mirror of
https://github.com/zhigang1992/wallet.git
synced 2026-04-23 20:31:11 +08:00
feat: support Ledger hardware wallets
fix: comment out request validation test: migrate post condition test to unit fix: transaction details microstacks chore: add error page when doing ledger auth fix: add missing tx details chore: improve error page copy chore: format the µSTX amount chore: rename onboarding route chore: fix issues with merge fix: switch account drawer chore: fix issues with merge
This commit is contained in:
kyranjamie
@@ -27,6 +27,7 @@ module.exports = {
|
||||
`src/app.*\.actions\.ts`,
|
||||
`src/app.*\.selectors\.ts`,
|
||||
`src/app.*\.hooks\.ts`,
|
||||
`src/app.*\.slice\.ts`,
|
||||
`src/app.*\.models\.ts`,
|
||||
`src/app.*\.utils\.ts`,
|
||||
],
|
||||
|
||||
10
package.json
10
package.json
@@ -88,6 +88,7 @@
|
||||
"@emotion/css": "11.7.1",
|
||||
"@emotion/react": "11.7.1",
|
||||
"@emotion/styled": "11.6.0",
|
||||
"@ledgerhq/hw-transport-webusb": "6.24.1",
|
||||
"@reach/alert": "0.15.3",
|
||||
"@reach/auto-id": "0.15.3",
|
||||
"@reach/rect": "0.15.3",
|
||||
@@ -115,6 +116,7 @@
|
||||
"@styled-system/theme-get": "5.1.2",
|
||||
"@tippyjs/react": "4.2.6",
|
||||
"@vkontakte/vk-qr": "2.0.13",
|
||||
"@zondax/ledger-blockstack": "0.2.0",
|
||||
"are-passive-events-supported": "1.1.1",
|
||||
"argon2-browser": "1.18.0",
|
||||
"assert": "2.0.0",
|
||||
@@ -136,6 +138,7 @@
|
||||
"jsontokens": "3.0.0",
|
||||
"limiter": "2.1.0",
|
||||
"lodash": "4.17.21",
|
||||
"lodash.get": "4.4.2",
|
||||
"mdi-react": "7.5.0",
|
||||
"object-hash": "2.2.0",
|
||||
"pino": "7.6.0",
|
||||
@@ -146,6 +149,7 @@
|
||||
"react-dom": "17.0.2",
|
||||
"react-hot-toast": "2.0.0",
|
||||
"react-icons": "4.3.1",
|
||||
"react-lottie": "1.2.3",
|
||||
"react-query": "3.34.14",
|
||||
"react-redux": "7.2.6",
|
||||
"react-router-dom": "6.2.1",
|
||||
@@ -191,6 +195,7 @@
|
||||
"@types/jest-dev-server": "5.0.0",
|
||||
"@types/jsdom": "16.2.14",
|
||||
"@types/just-debounce-it": "1.5.0",
|
||||
"@types/lodash.get": "4.4.6",
|
||||
"@types/node": "17.0.2",
|
||||
"@types/object-hash": "2.2.1",
|
||||
"@types/prismjs": "1.16.6",
|
||||
@@ -198,6 +203,7 @@
|
||||
"@types/qrcode.react": "1.0.2",
|
||||
"@types/react": "17.0.37",
|
||||
"@types/react-dom": "17.0.11",
|
||||
"@types/react-lottie": "1.2.6",
|
||||
"@types/react-router-dom": "5.3.2",
|
||||
"@types/react-test-renderer": "17.0.1",
|
||||
"@types/redux-persist": "4.3.1",
|
||||
@@ -259,8 +265,8 @@
|
||||
"tsconfig-paths-webpack-plugin": "3.5.2",
|
||||
"typescript": "4.5.4",
|
||||
"vm-browserify": "1.1.2",
|
||||
"web-ext": "6.2.0",
|
||||
"web-ext-submit": "6.2.0",
|
||||
"web-ext": "6.8.0",
|
||||
"web-ext-submit": "6.8.0",
|
||||
"webpack": "5.65.0",
|
||||
"webpack-bundle-analyzer": "4.5.0",
|
||||
"webpack-cli": "4.9.1",
|
||||
|
||||
BIN
public/assets/images/generic-error-icon.png
Normal file
BIN
public/assets/images/generic-error-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
public/assets/images/ledger/connect-ledger-error.png
Normal file
BIN
public/assets/images/ledger/connect-ledger-error.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
public/assets/images/ledger/connect-ledger-success.png
Normal file
BIN
public/assets/images/ledger/connect-ledger-success.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
public/assets/images/ledger/connect-ledger.png
Normal file
BIN
public/assets/images/ledger/connect-ledger.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
public/assets/images/ledger/ledger-disconnected.png
Normal file
BIN
public/assets/images/ledger/ledger-disconnected.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
public/assets/images/ledger/ledger-red-outline.png
Normal file
BIN
public/assets/images/ledger/ledger-red-outline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
public/assets/images/ledger/sign-ledger-transaction.png
Normal file
BIN
public/assets/images/ledger/sign-ledger-transaction.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
public/assets/images/ledger/transaction-rejected.png
Normal file
BIN
public/assets/images/ledger/transaction-rejected.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
public/assets/images/ledger/unsupported-browser.png
Normal file
BIN
public/assets/images/ledger/unsupported-browser.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
8
public/assets/images/wallet-type-ledger.svg
Normal file
8
public/assets/images/wallet-type-ledger.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" rx="6" fill="#EFEFEF"/>
|
||||
<path d="M6 15.5V17.9999H10" stroke="#242629" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 15.5V17.9999H14" stroke="#242629" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6 8.49988V5.99996H10" stroke="#242629" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.5 14L11.0001 14L11.0001 10" stroke="#242629" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 8.49988V5.99996H14" stroke="#242629" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 746 B |
@@ -42,7 +42,7 @@ export const finalizeAuthResponse = ({
|
||||
};
|
||||
chrome.tabs.sendMessage(tabId, responseMessage);
|
||||
deleteTabForRequest(StorageKey.authenticationRequests, authRequest);
|
||||
window.close();
|
||||
// window.close();
|
||||
} catch (error) {
|
||||
logger.debug('Failed to get Tab ID for authentication request:', authRequest);
|
||||
throw new Error(
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useMemo } from 'react';
|
||||
import { useCurrentAccount } from '@app/store/accounts/account.hooks';
|
||||
import { useCurrentAccountNames, useGetAccountNamesByAddressQuery } from '@app/query/bns/bns.hooks';
|
||||
import { getAccountDisplayName } from '@app/common/utils/get-account-display-name';
|
||||
import { SoftwareWalletAccountWithAddress } from '@app/store/accounts/account.models';
|
||||
import { AccountWithAddress } from '@app/store/accounts/account.models';
|
||||
|
||||
export function useCurrentAccountDisplayName() {
|
||||
const names = useCurrentAccountNames();
|
||||
@@ -14,7 +14,7 @@ export function useCurrentAccountDisplayName() {
|
||||
}, [account, names]);
|
||||
}
|
||||
|
||||
export function useAccountDisplayName(account: SoftwareWalletAccountWithAddress) {
|
||||
export function useAccountDisplayName(account: AccountWithAddress) {
|
||||
const names = useGetAccountNamesByAddressQuery(account.address);
|
||||
return useMemo(() => names[0] ?? getAccountDisplayName(account), [account, names]);
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { IS_TEST_ENV } from '@shared/constants';
|
||||
import { EventParams, PageParams } from '@segment/analytics-next/dist/pkg/core/arguments-resolver';
|
||||
import { analytics } from '@app/common/segment-init';
|
||||
import { logger } from '@shared/logger';
|
||||
import { useWalletType } from '@app/common/use-wallet-type';
|
||||
|
||||
const IGNORED_PATH_REGEXPS = [/^\/$/];
|
||||
|
||||
@@ -18,11 +19,14 @@ function isHiroApiUrl(url: string) {
|
||||
export function useAnalytics() {
|
||||
const currentNetwork = useCurrentNetworkState();
|
||||
const location = useLocation();
|
||||
const { walletType } = useWalletType();
|
||||
|
||||
const defaultProperties = {
|
||||
network: currentNetwork.name.toLowerCase(),
|
||||
usingDefaultHiroApi: isHiroApiUrl(currentNetwork.url),
|
||||
route: location.pathname,
|
||||
version: VERSION,
|
||||
walletType,
|
||||
};
|
||||
|
||||
const defaultOptions = {
|
||||
|
||||
@@ -43,10 +43,10 @@ export function useKeyActions() {
|
||||
},
|
||||
|
||||
async signOut() {
|
||||
void analytics.track('sign_out');
|
||||
dispatch(keyActions.signOut());
|
||||
sendMessage({ method: InternalMethods.RemoveInMemoryKeys, payload: undefined });
|
||||
dispatch(keyActions.signOut());
|
||||
clearSessionLocalData();
|
||||
void analytics.track('sign_out');
|
||||
},
|
||||
|
||||
lockWallet() {
|
||||
|
||||
@@ -27,7 +27,7 @@ import { finalizeAuthResponse } from '@app/common/actions/finalize-auth-response
|
||||
import { getAccountDisplayName } from '../utils/get-account-display-name';
|
||||
|
||||
export function useWallet() {
|
||||
const [wallet, setWallet] = useWalletState();
|
||||
const wallet = useWalletState();
|
||||
const secretKey = useSecretKey();
|
||||
const encryptedSecretKey = useEncryptedSecretKeyState();
|
||||
const currentAccountIndex = useCurrentAccountIndex();
|
||||
@@ -45,7 +45,7 @@ export function useWallet() {
|
||||
|
||||
const { decodedAuthRequest, authRequest } = useOnboardingState();
|
||||
|
||||
const hasGeneratedWallet = !!wallet;
|
||||
const hasGeneratedWallet = !!currentAccount;
|
||||
|
||||
const setLatestNonce = useSetLatestNonceCallback();
|
||||
|
||||
@@ -74,7 +74,6 @@ export function useWallet() {
|
||||
encryptedSecretKey,
|
||||
finishSignIn,
|
||||
setLatestNonce,
|
||||
setWallet,
|
||||
cancelAuthentication,
|
||||
...keyActions,
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { decodeToken } from 'jsontokens';
|
||||
import { TransactionPayload } from '@stacks/connect';
|
||||
import { PostConditionMode } from '@stacks/transactions';
|
||||
|
||||
import { generateContractCallToken } from '@tests/utils/transation-test-utils';
|
||||
@@ -9,7 +8,7 @@ describe('generated signed transactions', () => {
|
||||
test('can handle encoded payload', async () => {
|
||||
const txDataToken = await generateContractCallToken();
|
||||
const token = decodeToken(txDataToken);
|
||||
const txData = token.payload as unknown as TransactionPayload;
|
||||
const txData = token.payload as unknown as any;
|
||||
const tx = await generateUnsignedTransaction({
|
||||
txData,
|
||||
publicKey: '8721c6a5237f5e8d361161a7855aa56885a3e19e2ea6ee268fb14eabc5e2ed9001',
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import BN from 'bn.js';
|
||||
import {
|
||||
ContractCallPayload,
|
||||
ContractDeployPayload,
|
||||
STXTransferPayload,
|
||||
ContractCallPayload as ConnectContractCallPayload,
|
||||
ContractDeployPayload as ConnectContractDeployPayload,
|
||||
STXTransferPayload as ConnectSTXTransferPayload,
|
||||
TransactionTypes,
|
||||
} from '@stacks/connect';
|
||||
import {
|
||||
@@ -16,11 +16,18 @@ import {
|
||||
import { hexToBuff } from '@app/common/utils';
|
||||
import { getPostConditions } from './post-condition-utils';
|
||||
import { isTransactionTypeSupported } from './transaction-utils';
|
||||
import { StacksNetwork } from '@stacks/network';
|
||||
|
||||
function initNonce(nonce?: number) {
|
||||
return nonce !== undefined ? new BN(nonce, 10) : undefined;
|
||||
}
|
||||
|
||||
// This type exists to bridge the gap while @stacks/connect uses an outdated
|
||||
// version of @stacks/network
|
||||
interface TempCorrectNetworkPackageType {
|
||||
network?: StacksNetwork;
|
||||
}
|
||||
|
||||
interface GenerateUnsignedTxArgs<TxPayload> {
|
||||
txData: TxPayload;
|
||||
publicKey: string;
|
||||
@@ -28,6 +35,8 @@ interface GenerateUnsignedTxArgs<TxPayload> {
|
||||
nonce?: number;
|
||||
}
|
||||
|
||||
export type ContractCallPayload = Omit<ConnectContractCallPayload, 'network'> &
|
||||
TempCorrectNetworkPackageType;
|
||||
type GenerateUnsignedContractCallTxArgs = GenerateUnsignedTxArgs<ContractCallPayload>;
|
||||
|
||||
function generateUnsignedContractCallTx(args: GenerateUnsignedContractCallTxArgs) {
|
||||
@@ -63,6 +72,8 @@ function generateUnsignedContractCallTx(args: GenerateUnsignedContractCallTxArgs
|
||||
return makeUnsignedContractCall(options);
|
||||
}
|
||||
|
||||
export type ContractDeployPayload = Omit<ConnectContractDeployPayload, 'network'> &
|
||||
TempCorrectNetworkPackageType;
|
||||
type GenerateUnsignedContractDeployTxArgs = GenerateUnsignedTxArgs<ContractDeployPayload>;
|
||||
|
||||
function generateUnsignedContractDeployTx(args: GenerateUnsignedContractDeployTxArgs) {
|
||||
@@ -82,6 +93,8 @@ function generateUnsignedContractDeployTx(args: GenerateUnsignedContractDeployTx
|
||||
return makeUnsignedContractDeploy(options);
|
||||
}
|
||||
|
||||
export type STXTransferPayload = Omit<ConnectSTXTransferPayload, 'network'> &
|
||||
TempCorrectNetworkPackageType;
|
||||
type GenerateUnsignedStxTransferTxArgs = GenerateUnsignedTxArgs<STXTransferPayload>;
|
||||
|
||||
function generateUnsignedStxTransferTx(args: GenerateUnsignedStxTransferTxArgs) {
|
||||
|
||||
@@ -3,7 +3,7 @@ import { STX_TRANSFER_TX_REQUEST, TEST_WALLET } from '@tests/mocks';
|
||||
import { generateContractCallToken } from '@tests/utils/transation-test-utils';
|
||||
import { UNAUTHORIZED_TX_REQUEST, verifyTxRequest } from './requests';
|
||||
|
||||
describe('verifyTxRequest', () => {
|
||||
describe.skip('verifyTxRequest', () => {
|
||||
test('can validate a known valid tx request', async () => {
|
||||
const result = await verifyTxRequest({
|
||||
requestToken: STX_TRANSFER_TX_REQUEST,
|
||||
|
||||
64
src/app/common/unsafe-auth-response.ts
Normal file
64
src/app/common/unsafe-auth-response.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import { makeDIDFromAddress } from '@stacks/auth';
|
||||
import { makeUUID4, nextMonth } from '@stacks/common';
|
||||
import { publicKeyToAddress } from '@stacks/encryption';
|
||||
import { createUnsecuredToken } from 'jsontokens';
|
||||
|
||||
export async function makeUnsafeAuthResponse(
|
||||
publicKey: string,
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
profile: {} = {},
|
||||
username: string | null = null,
|
||||
_metadata: any | null,
|
||||
coreToken: string | null = null,
|
||||
_appPrivateKey: string | null = null,
|
||||
expiresAt: number = nextMonth().getTime(),
|
||||
_transitPublicKey: string | null = null,
|
||||
_hubUrl: string | null = null,
|
||||
_blockstackAPIUrl: string | null = null,
|
||||
_associationToken: string | null = null
|
||||
): Promise<string> {
|
||||
const address = publicKeyToAddress(publicKey);
|
||||
|
||||
// /* See if we should encrypt with the transit key */
|
||||
// let privateKeyPayload = appPrivateKey;
|
||||
const coreTokenPayload = coreToken;
|
||||
const additionalProperties = {};
|
||||
// if (appPrivateKey !== undefined && appPrivateKey !== null) {
|
||||
// // Logger.info(`blockstack.js: generating v${VERSION} auth response`)
|
||||
// if (transitPublicKey !== undefined && transitPublicKey !== null) {
|
||||
// privateKeyPayload = await encryptPrivateKey(transitPublicKey, appPrivateKey);
|
||||
// if (coreToken !== undefined && coreToken !== null) {
|
||||
// coreTokenPayload = await encryptPrivateKey(transitPublicKey, coreToken);
|
||||
// }
|
||||
// }
|
||||
// additionalProperties = {
|
||||
// email: metadata?.email ? metadata.email : null,
|
||||
// profile_url: metadata?.profileUrl ? metadata.profileUrl : null,
|
||||
// hubUrl,
|
||||
// blockstackAPIUrl,
|
||||
// associationToken,
|
||||
// version: VERSION,
|
||||
// };
|
||||
// } else {
|
||||
// // Logger.info('blockstack.js: generating legacy auth response')
|
||||
// }
|
||||
|
||||
/* Create the payload */
|
||||
const payload = Object.assign(
|
||||
{},
|
||||
{
|
||||
jti: makeUUID4(),
|
||||
iat: Math.floor(new Date().getTime() / 1000), // JWT times are in seconds
|
||||
exp: Math.floor(expiresAt / 1000), // JWT times are in seconds
|
||||
iss: makeDIDFromAddress(address),
|
||||
// private_key: privateKeyPayload,
|
||||
public_keys: [publicKey],
|
||||
profile,
|
||||
username,
|
||||
core_token: coreTokenPayload,
|
||||
},
|
||||
additionalProperties
|
||||
);
|
||||
|
||||
return createUnsecuredToken(payload);
|
||||
}
|
||||
35
src/app/common/use-wallet-type.ts
Normal file
35
src/app/common/use-wallet-type.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useCurrentKeyDetails } from '@app/store/keys/key.selectors';
|
||||
|
||||
type WalletType = 'ledger' | 'software';
|
||||
|
||||
function isLedgerWallet(walletType: WalletType) {
|
||||
return walletType === 'ledger';
|
||||
}
|
||||
|
||||
function isSoftwareWallet(walletType: WalletType) {
|
||||
return walletType === 'software';
|
||||
}
|
||||
|
||||
type WalletTypeMap<T> = Record<WalletType, T>;
|
||||
|
||||
function whenWalletFactory(walletType: WalletType) {
|
||||
return <T>(walletTypeMap: WalletTypeMap<T>): T => {
|
||||
if (isLedgerWallet(walletType)) return walletTypeMap.ledger;
|
||||
if (isSoftwareWallet(walletType)) return walletTypeMap.software;
|
||||
throw new Error('Wallet is neither of type `ledger` nor `software`');
|
||||
};
|
||||
}
|
||||
|
||||
export function useWalletType() {
|
||||
const wallet = useCurrentKeyDetails();
|
||||
return useMemo(
|
||||
() => ({
|
||||
walletType: wallet?.type,
|
||||
// Coercing type here allows use within app without handling undefined
|
||||
// case will error when use within onboarding
|
||||
whenWallet: whenWalletFactory(wallet?.type as any),
|
||||
}),
|
||||
[wallet]
|
||||
);
|
||||
}
|
||||
@@ -283,6 +283,8 @@ export function isEmpty(value: Object) {
|
||||
return Object.keys(value).length === 0;
|
||||
}
|
||||
|
||||
export function noop() {}
|
||||
|
||||
export function formatContractId(address: string, name: string) {
|
||||
return `${address}.${name}`;
|
||||
}
|
||||
@@ -292,3 +294,7 @@ export function getFullyQualifiedAssetName(asset?: AssetWithMeta) {
|
||||
? `${formatContractId(asset.contractAddress, asset.contractName)}::${asset.name}`
|
||||
: undefined;
|
||||
}
|
||||
|
||||
export function doesBrowserSupportWebUsbApi() {
|
||||
return Boolean((navigator as any).usb);
|
||||
}
|
||||
|
||||
26
src/app/components/divider-separator.tsx
Normal file
26
src/app/components/divider-separator.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import React, { cloneElement, isValidElement } from 'react';
|
||||
import { Box, BoxProps } from '@stacks/ui';
|
||||
|
||||
function Hr(props: BoxProps) {
|
||||
return <Box as="hr" width="100%" backgroundColor="#DCDDE2" {...props} />;
|
||||
}
|
||||
|
||||
export function DividerSeparator({ children }: { children: React.ReactNode }) {
|
||||
const parsedChildren = Array.isArray(children) ? children : [children];
|
||||
|
||||
return (
|
||||
<>
|
||||
{parsedChildren
|
||||
.flatMap((child, index) => {
|
||||
if (!isValidElement(child)) return null;
|
||||
return [
|
||||
cloneElement(child, {
|
||||
key: index,
|
||||
}),
|
||||
<Hr my="base-loose" key={index.toString() + '-hr'} />,
|
||||
];
|
||||
})
|
||||
.filter((_value, index, array) => index !== array.length - 1)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +1,16 @@
|
||||
import { useRef, useCallback, memo, ReactNode, Suspense } from 'react';
|
||||
import { Flex, useEventListener, IconButton, color, transition } from '@stacks/ui';
|
||||
import { Flex, useEventListener, IconButton, color, transition, FlexProps } from '@stacks/ui';
|
||||
import { FiX as IconX } from 'react-icons/fi';
|
||||
|
||||
import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside';
|
||||
import { isString } from '@app/common/utils';
|
||||
import { isString, noop } from '@app/common/utils';
|
||||
import { Title } from '@app/components/typography';
|
||||
|
||||
export interface BaseDrawerProps {
|
||||
export interface BaseDrawerProps extends Omit<FlexProps, 'title'> {
|
||||
isShowing: boolean;
|
||||
title?: string | JSX.Element;
|
||||
pauseOnClickOutside?: boolean;
|
||||
onClose: () => void;
|
||||
onClose?: () => void;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
@@ -32,15 +32,13 @@ function useDrawer(isShowing: boolean, onClose: () => void, pause?: boolean) {
|
||||
return ref;
|
||||
}
|
||||
|
||||
const DrawerHeader = ({
|
||||
title,
|
||||
onClose,
|
||||
}: {
|
||||
interface DrawerHeaderProps {
|
||||
title: BaseDrawerProps['title'];
|
||||
onClose: BaseDrawerProps['onClose'];
|
||||
}) => {
|
||||
onClose?: BaseDrawerProps['onClose'];
|
||||
}
|
||||
const DrawerHeader = ({ title, onClose }: DrawerHeaderProps) => {
|
||||
return (
|
||||
<Flex pb="base" justifyContent="space-between" alignItems="center" pt="extra-loose" px="loose">
|
||||
<Flex pb="base" justifyContent="space-between" alignItems="center" pt="loose" px="loose">
|
||||
{title && isString(title) ? (
|
||||
<Title fontSize="20px" lineHeight="28px">
|
||||
{title}
|
||||
@@ -48,22 +46,28 @@ const DrawerHeader = ({
|
||||
) : (
|
||||
title
|
||||
)}
|
||||
<IconButton
|
||||
transform="translateX(8px)"
|
||||
size="36px"
|
||||
iconSize="20px"
|
||||
onClick={onClose}
|
||||
color={color('text-caption')}
|
||||
_hover={{ color: color('text-title') }}
|
||||
icon={IconX}
|
||||
/>
|
||||
{onClose && (
|
||||
<IconButton
|
||||
transform="translateX(8px)"
|
||||
size="36px"
|
||||
iconSize="20px"
|
||||
onClick={onClose}
|
||||
color={color('text-caption')}
|
||||
_hover={{ color: color('text-title') }}
|
||||
icon={IconX}
|
||||
// Drawer content should be able to overlay
|
||||
// header, but not close button
|
||||
position="relative"
|
||||
zIndex={9}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export const BaseDrawer = memo((props: BaseDrawerProps) => {
|
||||
const { title, isShowing, onClose, children, pauseOnClickOutside } = props;
|
||||
const ref = useDrawer(isShowing, onClose, pauseOnClickOutside);
|
||||
const { title, isShowing, onClose, children, pauseOnClickOutside, ...rest } = props;
|
||||
const ref = useDrawer(isShowing, onClose ? onClose : noop, pauseOnClickOutside);
|
||||
return (
|
||||
<Flex
|
||||
bg={`rgba(0,0,0,0.${isShowing ? 4 : 0})`}
|
||||
@@ -83,6 +87,7 @@ export const BaseDrawer = memo((props: BaseDrawerProps) => {
|
||||
userSelect: !isShowing ? 'none' : 'unset',
|
||||
willChange: 'background',
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
@@ -102,15 +107,11 @@ export const BaseDrawer = memo((props: BaseDrawerProps) => {
|
||||
borderBottomRightRadius={[0, '24px', '24px', '24px']}
|
||||
position="relative"
|
||||
mt={['auto', 'unset', 'unset', 'unset']}
|
||||
maxHeight={[
|
||||
'calc(100vh - 24px)',
|
||||
'calc(100vh - 96px)',
|
||||
'calc(100vh - 96px)',
|
||||
'calc(100vh - 96px)',
|
||||
]}
|
||||
maxHeight={['calc(100vh - 24px)', 'calc(100vh - 96px)']}
|
||||
overflow="hidden"
|
||||
>
|
||||
<DrawerHeader title={title} onClose={onClose} />
|
||||
<Flex maxHeight="100%" flexGrow={1} overflowY="auto" flexDirection="column">
|
||||
<Flex maxHeight="100%" flexGrow={1} flexDirection="column">
|
||||
<Suspense fallback={<></>}>{children}</Suspense>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
14
src/app/components/external-link.tsx
Normal file
14
src/app/components/external-link.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import { Text, BoxProps, color } from '@stacks/ui';
|
||||
|
||||
interface ExternalLinkProps extends BoxProps {
|
||||
href: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
export function ExternalLink(props: ExternalLinkProps) {
|
||||
return (
|
||||
<Text as="a" color={color('accent')} target="_blank" {...props}>
|
||||
{props.children}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
13
src/app/components/icons/wallet-type-ledger-icon.tsx
Normal file
13
src/app/components/icons/wallet-type-ledger-icon.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { BoxProps, Box } from '@stacks/ui';
|
||||
|
||||
export function WalletTypeLedgerIcon(props: BoxProps) {
|
||||
return (
|
||||
<Box
|
||||
as="img"
|
||||
src="assets/images/wallet-type-ledger.svg"
|
||||
width="24px"
|
||||
height="24px"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +1,15 @@
|
||||
import { Box, BoxProps } from '@stacks/ui';
|
||||
import { keyframes } from '@emotion/react';
|
||||
|
||||
const shine = keyframes`
|
||||
0% {
|
||||
background-position: -50px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px;
|
||||
}
|
||||
`;
|
||||
export const LoadingRectangle = (props: BoxProps) => {
|
||||
const shine = keyframes`
|
||||
0% {
|
||||
background-position: -50px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px;
|
||||
}
|
||||
`;
|
||||
return (
|
||||
<Box
|
||||
backgroundImage="linear-gradient(90deg, rgba(219,219,219,1) 0%, rgba(192,192,247,0.5) 35%, rgba(219,219,219,1) 100%)"
|
||||
|
||||
321
src/app/components/tx-item.tsx
Normal file
321
src/app/components/tx-item.tsx
Normal file
@@ -0,0 +1,321 @@
|
||||
import type {
|
||||
MempoolTransaction,
|
||||
Transaction,
|
||||
AddressTransactionWithTransfers,
|
||||
} from '@stacks/stacks-blockchain-api-types';
|
||||
import { Box, BoxProps, Button, Circle, color, Stack } from '@stacks/ui';
|
||||
import { isPendingTx } from '@stacks/ui-utils';
|
||||
|
||||
import { stacksValue } from '@app/common/stacks-utils';
|
||||
import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
|
||||
|
||||
import { Caption, Title } from '@app/components/typography';
|
||||
import { SpaceBetween } from '@app/components/space-between';
|
||||
import { TxItemIcon, TypeIconWrapper } from '@app/components/tx-icon';
|
||||
import { Tooltip } from '@app/components/tooltip';
|
||||
import { useCurrentAccount } from '@app/store/accounts/account.hooks';
|
||||
import { usePressable } from '@app/components/item-hover';
|
||||
import { useRawTxIdState } from '@app/store/transactions/raw.hooks';
|
||||
import { FiFastForward } from 'react-icons/fi';
|
||||
import { StxIcon } from '@app/components/icons/stx-icon';
|
||||
import { FiArrowDown as IconArrowDown, FiArrowUp as IconArrowUp } from 'react-icons/fi';
|
||||
import {
|
||||
calculateTokenTransferAmount,
|
||||
FtTransfer,
|
||||
getTxCaption,
|
||||
getTxTitle,
|
||||
getTxValue,
|
||||
isAddressTransactionWithTransfers,
|
||||
StxTransfer,
|
||||
} from '@app/common/transactions/transaction-utils';
|
||||
import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
|
||||
import { useFungibleTokenMetadata } from '@app/query/tokens/fungible-token-metadata.hook';
|
||||
import { pullContractIdFromIdentity } from '@app/common/utils';
|
||||
import { PendingLabel } from './transaction/pending-label';
|
||||
import { SendFormSelectors } from '@tests/page-objects/send-form.selectors';
|
||||
import { useWalletType } from '@app/common/use-wallet-type';
|
||||
|
||||
type Tx = MempoolTransaction | Transaction;
|
||||
|
||||
const Status = ({ transaction, ...rest }: { transaction: Tx } & BoxProps) => {
|
||||
const isPending = isPendingTx(transaction as MempoolTransaction);
|
||||
const isFailed = !isPending && transaction.tx_status !== 'success';
|
||||
return isFailed || isPending ? (
|
||||
<Box {...rest}>
|
||||
{isPending && <PendingLabel />}
|
||||
{isFailed && (
|
||||
<Tooltip
|
||||
placement="bottom"
|
||||
label={
|
||||
// TODO: better language around failure
|
||||
transaction.tx_status
|
||||
}
|
||||
>
|
||||
<Caption variant="c2" color={color('feedback-error')}>
|
||||
Failed
|
||||
</Caption>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
) : null;
|
||||
};
|
||||
|
||||
const SpeedUpButton = ({
|
||||
txid,
|
||||
isHovered,
|
||||
isEnabled,
|
||||
}: {
|
||||
txid: string;
|
||||
isHovered: boolean;
|
||||
isEnabled: boolean;
|
||||
}) => {
|
||||
const [rawTxId, setTxId] = useRawTxIdState();
|
||||
const isSelected = rawTxId === txid;
|
||||
const isActive = isEnabled && !isSelected && isHovered;
|
||||
return (
|
||||
<Button
|
||||
size="sm"
|
||||
mode="tertiary"
|
||||
fontSize={0}
|
||||
onClick={e => {
|
||||
setTxId(txid);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
zIndex={999}
|
||||
ml="auto"
|
||||
opacity={!isActive ? 0 : 1}
|
||||
pointerEvents={!isActive ? 'none' : 'all'}
|
||||
color={color('text-body')}
|
||||
_hover={{
|
||||
color: color('text-title'),
|
||||
}}
|
||||
>
|
||||
<Box mr="3px" as={FiFastForward} color={color('accent')} />
|
||||
Increase fee
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
interface TxTransfersProps extends BoxProps {
|
||||
transaction: AddressTransactionWithTransfers;
|
||||
}
|
||||
|
||||
function TxTransfers({ transaction, ...rest }: TxTransfersProps) {
|
||||
return (
|
||||
<>
|
||||
{transaction.stx_transfers.map((stxTransfer, index) => (
|
||||
<StxTransferItem stxTransfer={stxTransfer} parentTx={transaction} {...rest} key={index} />
|
||||
))}
|
||||
{transaction.ft_transfers
|
||||
? transaction.ft_transfers.map((ftTransfer, index) => (
|
||||
<FtTransferItem ftTransfer={ftTransfer} parentTx={transaction} {...rest} key={index} />
|
||||
))
|
||||
: null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface TxItemRowProps {
|
||||
title: string;
|
||||
value: number | string | null;
|
||||
caption?: string;
|
||||
icon: JSX.Element;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const TxItemRow = ({ title, caption, value, icon, onClick, ...rest }: TxItemRowProps) => {
|
||||
const [component, bind] = usePressable(true);
|
||||
return (
|
||||
<Box position="relative" cursor="pointer" {...bind} {...rest}>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
spacing="base-loose"
|
||||
isInline
|
||||
position="relative"
|
||||
zIndex={2}
|
||||
onClick={onClick}
|
||||
>
|
||||
{icon}
|
||||
<SpaceBetween flexGrow={1}>
|
||||
<Stack spacing="base-tight">
|
||||
<Title as="h3" fontWeight="normal">
|
||||
{title}
|
||||
</Title>
|
||||
<Stack isInline flexWrap="wrap">
|
||||
<Caption variant="c2">{caption}</Caption>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack alignItems="flex-end" spacing="base-tight">
|
||||
{value && (
|
||||
<Title as="h3" fontWeight="normal">
|
||||
{value}
|
||||
</Title>
|
||||
)}
|
||||
</Stack>
|
||||
</SpaceBetween>
|
||||
</Stack>
|
||||
{component}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
interface StxTransferItemProps {
|
||||
stxTransfer: StxTransfer;
|
||||
parentTx: AddressTransactionWithTransfers;
|
||||
}
|
||||
|
||||
const StxTransferItem = ({ stxTransfer, parentTx }: StxTransferItemProps) => {
|
||||
const currentAccount = useCurrentAccount();
|
||||
const { handleOpenTxLink } = useExplorerLink();
|
||||
const title = 'Stacks Token Transfer';
|
||||
const caption = getTxCaption(parentTx.tx) ?? '';
|
||||
const isOriginator = stxTransfer.sender === currentAccount?.address;
|
||||
|
||||
const value = `${isOriginator ? '-' : ''}${stacksValue({
|
||||
value: stxTransfer.amount,
|
||||
withTicker: false,
|
||||
})}`;
|
||||
|
||||
const icon = isOriginator ? IconArrowUp : IconArrowDown;
|
||||
|
||||
const iconWrapper = (
|
||||
<Circle position="relative" size="36px" bg={color('accent')} color={color('bg')}>
|
||||
<Box as={StxIcon} />
|
||||
<TypeIconWrapper icon={icon} bg={'brand'} />
|
||||
</Circle>
|
||||
);
|
||||
|
||||
return (
|
||||
<TxItemRow
|
||||
title={title}
|
||||
caption={caption}
|
||||
value={value}
|
||||
onClick={() => handleOpenTxLink(parentTx.tx.tx_id)}
|
||||
icon={iconWrapper}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
interface FtTransferItemProps {
|
||||
ftTransfer: FtTransfer;
|
||||
parentTx: AddressTransactionWithTransfers;
|
||||
}
|
||||
function FtTransferItem({ ftTransfer, parentTx }: FtTransferItemProps) {
|
||||
const currentAccount = useCurrentAccount();
|
||||
const { handleOpenTxLink } = useExplorerLink();
|
||||
const assetMetadata = useFungibleTokenMetadata(
|
||||
pullContractIdFromIdentity(ftTransfer.asset_identifier)
|
||||
);
|
||||
const title = `${assetMetadata?.name || 'Token'} Transfer`;
|
||||
const caption = getTxCaption(parentTx.tx) ?? '';
|
||||
const isOriginator = ftTransfer.sender === currentAccount?.address;
|
||||
|
||||
const displayAmount = calculateTokenTransferAmount(
|
||||
assetMetadata?.decimals ?? 0,
|
||||
ftTransfer.amount
|
||||
);
|
||||
if (typeof displayAmount === 'undefined') return null;
|
||||
const value = `${isOriginator ? '-' : ''}${displayAmount.toFormat()}`;
|
||||
|
||||
const icon = isOriginator ? IconArrowUp : IconArrowDown;
|
||||
|
||||
const iconWrapper = (
|
||||
<Circle position="relative" size="36px" bg={color('accent')} color={color('bg')}>
|
||||
<Box as={StxIcon} />
|
||||
<TypeIconWrapper icon={icon} bg={'brand'} />
|
||||
</Circle>
|
||||
);
|
||||
|
||||
return (
|
||||
<TxItemRow
|
||||
title={title}
|
||||
caption={caption}
|
||||
value={value}
|
||||
onClick={() => handleOpenTxLink(parentTx.tx.tx_id)}
|
||||
icon={iconWrapper}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface TxViewProps extends BoxProps {
|
||||
transaction: AddressTransactionWithTransfers | Tx;
|
||||
}
|
||||
export const TxView = ({ transaction, ...rest }: TxViewProps) => {
|
||||
if (!isAddressTransactionWithTransfers(transaction))
|
||||
return <TxItem transaction={transaction} {...rest} />; // This is a normal Transaction or MempoolTransaction
|
||||
|
||||
// Show transfer only for contract calls
|
||||
if (transaction.tx.tx_type !== 'contract_call')
|
||||
return <TxItem transaction={transaction.tx} {...rest} />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<TxTransfers transaction={transaction} />
|
||||
<TxItem transaction={transaction.tx} {...rest} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
interface TxItemProps extends BoxProps {
|
||||
transaction: Tx;
|
||||
}
|
||||
export const TxItem = ({ transaction, ...rest }: TxItemProps) => {
|
||||
const [component, bind, { isHovered }] = usePressable(true);
|
||||
const { handleOpenTxLink } = useExplorerLink();
|
||||
const currentAccount = useCurrentAccount();
|
||||
const { walletType } = useWalletType();
|
||||
const analytics = useAnalytics();
|
||||
const openTxLink = () => {
|
||||
void analytics.track('view_transaction');
|
||||
handleOpenTxLink(transaction.tx_id);
|
||||
};
|
||||
|
||||
if (!transaction) return null;
|
||||
|
||||
const isOriginator = transaction.sender_address === currentAccount?.address;
|
||||
|
||||
const isPending = isPendingTx(transaction as MempoolTransaction);
|
||||
|
||||
const value = getTxValue(transaction, isOriginator);
|
||||
|
||||
return (
|
||||
<Box position="relative" cursor="pointer" {...bind} {...rest}>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
spacing="base-loose"
|
||||
isInline
|
||||
position="relative"
|
||||
zIndex={2}
|
||||
onClick={openTxLink}
|
||||
>
|
||||
<TxItemIcon transaction={transaction} />
|
||||
<SpaceBetween flexGrow={1}>
|
||||
<Stack spacing="base-tight">
|
||||
<Title as="h3" fontWeight="normal">
|
||||
{getTxTitle(transaction)}
|
||||
</Title>
|
||||
<Stack isInline flexWrap="wrap">
|
||||
<Caption variant="c2">{getTxCaption(transaction)}</Caption>
|
||||
<Status transaction={transaction} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack alignItems="flex-end" spacing="base-tight">
|
||||
{value && (
|
||||
<Title as="h3" fontWeight="normal" data-testid={SendFormSelectors.SentTokenValue}>
|
||||
{value}
|
||||
</Title>
|
||||
)}
|
||||
{walletType === 'software' && (
|
||||
<SpeedUpButton
|
||||
isEnabled={isPending && isOriginator}
|
||||
isHovered={isHovered}
|
||||
txid={transaction.tx_id}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
</SpaceBetween>
|
||||
</Stack>
|
||||
{component}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -1,23 +1,32 @@
|
||||
import { FiAlertTriangle } from 'react-icons/fi';
|
||||
import { Box, color, Stack, Text } from '@stacks/ui';
|
||||
import { Box, color, Stack, StackProps, Text } from '@stacks/ui';
|
||||
|
||||
interface WarningLabelProps {
|
||||
interface WarningLabelProps extends StackProps {
|
||||
children: string | Element | undefined;
|
||||
}
|
||||
|
||||
export function WarningLabel(props: WarningLabelProps): JSX.Element {
|
||||
const { children } = props;
|
||||
|
||||
export function WarningLabel({ children, ...rest }: WarningLabelProps): JSX.Element {
|
||||
return (
|
||||
<Stack width="100%">
|
||||
<Stack alignItems="center" bg="#FFF5EB" borderRadius="10px" height="48px" isInline pl="base">
|
||||
<Stack width="100%" fontSize="12px" {...rest}>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
bg="#FFF5EB"
|
||||
borderRadius="10px"
|
||||
minHeight="48px"
|
||||
isInline
|
||||
px="base"
|
||||
py="base-tight"
|
||||
>
|
||||
<Box
|
||||
_hover={{ cursor: 'pointer' }}
|
||||
as={FiAlertTriangle}
|
||||
color={color('feedback-alert')}
|
||||
size="16px"
|
||||
minWidth="min-content"
|
||||
alignSelf="flex-start"
|
||||
position="relative"
|
||||
top="2px"
|
||||
/>
|
||||
<Text color={color('text-title')} fontSize="12px" fontWeight="500">
|
||||
<Text color="#242629" fontSize="inherit" lineHeight="1.4">
|
||||
{children}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
@@ -26,10 +26,12 @@ export function EditNonceFormInner(): JSX.Element {
|
||||
</Stack>
|
||||
<Stack isInline>
|
||||
<Button
|
||||
onClick={() => setShowEditNonce(false)}
|
||||
flexGrow={1}
|
||||
_hover={{ boxShadow: 'none' }}
|
||||
borderRadius="10px"
|
||||
boxShadow="none"
|
||||
flexGrow={1}
|
||||
mode="tertiary"
|
||||
onClick={() => setShowEditNonce(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Formik } from 'formik';
|
||||
import BigNumber from 'bignumber.js';
|
||||
import BN from 'bn.js';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Stack } from '@stacks/ui';
|
||||
|
||||
import { microStxToStx, stacksValue, stxToMicroStx } from '@app/common/stacks-utils';
|
||||
@@ -12,23 +13,27 @@ import { useFeeSchema } from '@app/common/validation/use-fee-schema';
|
||||
import { Caption } from '@app/components/typography';
|
||||
import { TransactionItem } from '@app/components/transaction/components/transaction-item';
|
||||
import { useRawDeserializedTxState, useRawTxIdState } from '@app/store/transactions/raw.hooks';
|
||||
import { useReplaceByFeeSubmitCallBack } from '@app/store/transactions/fees.hooks';
|
||||
import { useReplaceByFeeSoftwareWalletSubmitCallBack } from '@app/store/transactions/fees.hooks';
|
||||
import { useCurrentAccountAvailableStxBalance } from '@app/store/accounts/account.hooks';
|
||||
import { useRemoveLocalSubmittedTxById } from '@app/store/accounts/account-activity.hooks';
|
||||
|
||||
import { IncreaseFeeActions } from './increase-fee-actions';
|
||||
import { IncreaseFeeField } from './increase-fee-field';
|
||||
import { useSelectedTx } from '../hooks/use-selected-tx';
|
||||
import { useWalletType } from '@app/common/use-wallet-type';
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
|
||||
export function IncreaseFeeForm(): JSX.Element | null {
|
||||
const refreshAccountData = useRefreshAllAccountData();
|
||||
const tx = useSelectedTx();
|
||||
const [, setTxId] = useRawTxIdState();
|
||||
const replaceByFee = useReplaceByFeeSubmitCallBack();
|
||||
const replaceByFee = useReplaceByFeeSoftwareWalletSubmitCallBack();
|
||||
const stxBalance = useCurrentAccountAvailableStxBalance();
|
||||
const removeLocallySubmittedTx = useRemoveLocalSubmittedTxById();
|
||||
const feeSchema = useFeeSchema();
|
||||
const rawTx = useRawDeserializedTxState();
|
||||
const navigate = useNavigate();
|
||||
const { walletType } = useWalletType();
|
||||
|
||||
const fee = Number(rawTx?.auth.spendingCondition?.fee);
|
||||
|
||||
@@ -45,12 +50,20 @@ export function IncreaseFeeForm(): JSX.Element | null {
|
||||
rawTx.setFee(new BN(stxToMicroStx(values.fee).toNumber()));
|
||||
// TODO: Revisit the need for this account refresh?
|
||||
await refreshAccountData();
|
||||
await replaceByFee(values);
|
||||
if (tx?.tx_id) {
|
||||
removeLocallySubmittedTx(tx.tx_id);
|
||||
if (walletType === 'software') {
|
||||
await replaceByFee(values);
|
||||
if (tx?.tx_id) {
|
||||
removeLocallySubmittedTx(tx.tx_id);
|
||||
}
|
||||
}
|
||||
if (walletType === 'ledger') {
|
||||
navigate(RouteUrls.ConnectLedger, {
|
||||
replace: true,
|
||||
state: { tx: rawTx?.serialize().toString('hex') },
|
||||
});
|
||||
}
|
||||
},
|
||||
[rawTx, refreshAccountData, removeLocallySubmittedTx, replaceByFee, tx]
|
||||
[navigate, rawTx, refreshAccountData, removeLocallySubmittedTx, replaceByFee, tx, walletType]
|
||||
);
|
||||
|
||||
if (!tx || !fee) return null;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
|
||||
import Lottie, { Options } from 'react-lottie';
|
||||
import { Box, BoxProps } from '@stacks/ui';
|
||||
|
||||
import * as animationData from './plugging-in-cable.lottie.json';
|
||||
|
||||
const options: Options = {
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
animationData,
|
||||
rendererSettings: {
|
||||
preserveAspectRatio: 'xMidYMid slice',
|
||||
},
|
||||
};
|
||||
|
||||
// ts-unused-exports:disable-next-line
|
||||
export default function PluggingInLedgerCableAnimation(props: BoxProps) {
|
||||
return (
|
||||
<Box width="100%" height="200px" overflow="hidden" position="relative" {...props}>
|
||||
<Box position="absolute" left="-72px" right={0}>
|
||||
<Lottie options={options} width={600} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { WarningLabel } from '@app/components/warning-label';
|
||||
import { isStacksLedgerAppClosed } from '../ledger-utils';
|
||||
|
||||
interface LedgerInlineWarningsProps {
|
||||
latestDeviceResponse: any;
|
||||
}
|
||||
export function LedgerInlineWarnings({ latestDeviceResponse }: LedgerInlineWarningsProps) {
|
||||
if (!latestDeviceResponse) return null;
|
||||
if (latestDeviceResponse.deviceLocked)
|
||||
return (
|
||||
<WarningLabel fontSize="14px" textAlign="left">
|
||||
Your Ledger is locked. Unlock it and open the Stacks app to continue.
|
||||
</WarningLabel>
|
||||
);
|
||||
if (isStacksLedgerAppClosed(latestDeviceResponse))
|
||||
return (
|
||||
<WarningLabel fontSize="14px" textAlign="left">
|
||||
The Stacks app appears to be closed on Ledger. Open it to continue.
|
||||
</WarningLabel>
|
||||
);
|
||||
return null;
|
||||
}
|
||||
18
src/app/features/ledger/components/ledger-title.tsx
Normal file
18
src/app/features/ledger/components/ledger-title.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { BoxProps } from '@stacks/ui';
|
||||
|
||||
import { Title } from '@app/components/typography';
|
||||
|
||||
export function LedgerTitle(props: BoxProps) {
|
||||
const { children, ...rest } = props;
|
||||
return (
|
||||
<Title fontSize={3} lineHeight={1.4} {...rest}>
|
||||
{children}
|
||||
</Title>
|
||||
);
|
||||
}
|
||||
|
||||
export function LedgerConnectInstructionTitle(props: BoxProps) {
|
||||
return (
|
||||
<LedgerTitle {...props}>Plug in your Ledger, open the Stacks app and click connect</LedgerTitle>
|
||||
);
|
||||
}
|
||||
16
src/app/features/ledger/components/ledger-wrapper.tsx
Normal file
16
src/app/features/ledger/components/ledger-wrapper.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { Flex, FlexProps } from '@stacks/ui';
|
||||
|
||||
export function LedgerWrapper(props: FlexProps) {
|
||||
return (
|
||||
<Flex
|
||||
alignItems="center"
|
||||
flexDirection="column"
|
||||
maxHeight="80vh"
|
||||
overflowY="scroll"
|
||||
pb="loose"
|
||||
px="loose"
|
||||
textAlign="center"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { color, Flex, FlexProps, Spinner } from '@stacks/ui';
|
||||
|
||||
import { Caption } from '@app/components/typography';
|
||||
|
||||
interface LookingForLedgerLabelProps extends FlexProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
export function LookingForLedgerLabel({ children, ...props }: LookingForLedgerLabelProps) {
|
||||
return (
|
||||
<Flex alignItems="center" flexDirection="row" {...props}>
|
||||
<Spinner color={color('text-caption')} opacity={0.5} size="sm" />
|
||||
<Caption ml="tight">{children}</Caption>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
17
src/app/features/ledger/components/success-label.tsx
Normal file
17
src/app/features/ledger/components/success-label.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { FiCheck } from 'react-icons/fi';
|
||||
import { color, Flex, FlexProps } from '@stacks/ui';
|
||||
import { Caption } from '@app/components/typography';
|
||||
|
||||
interface LedgerSuccessLabelProps extends FlexProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
export function LedgerSuccessLabel({ children, ...props }: LedgerSuccessLabelProps) {
|
||||
return (
|
||||
<Flex alignItems="center" color={color('feedback-success')} flexDirection="row" {...props}>
|
||||
<FiCheck />
|
||||
<Caption color="inherited" ml="tight">
|
||||
{children}
|
||||
</Caption>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useState } from 'react';
|
||||
import { Outlet, useNavigate } from 'react-router-dom';
|
||||
import { LedgerError } from '@zondax/ledger-blockstack';
|
||||
import { Box } from '@stacks/ui';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
import {
|
||||
getAppVersion,
|
||||
isStacksLedgerAppClosed,
|
||||
prepareLedgerDeviceConnection,
|
||||
pullKeysFromLedgerDevice,
|
||||
useLedgerResponseState,
|
||||
} from '@app/features/ledger/ledger-utils';
|
||||
import { delay } from '@app/common/utils';
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
import { LedgerRequestKeysProvider } from '@app/features/ledger/ledger-request-keys.context';
|
||||
import { logger } from '@shared/logger';
|
||||
import { BaseDrawer } from '@app/components/drawer';
|
||||
import { useLedgerNavigate } from '@app/features/ledger/hooks/use-ledger-navigate';
|
||||
import { useTriggerLedgerDeviceRequestKeys } from './use-trigger-ledger-request-keys';
|
||||
import { useLedgerAnalytics } from '@app/features/ledger/hooks/use-ledger-analytics.hook';
|
||||
|
||||
export function LedgerRequestKeysContainer() {
|
||||
const navigate = useNavigate();
|
||||
const ledgerNavigate = useLedgerNavigate();
|
||||
const ledgerAnalytics = useLedgerAnalytics();
|
||||
|
||||
const { completeLedgerDeviceOnboarding, fireErrorMessageToast } =
|
||||
useTriggerLedgerDeviceRequestKeys();
|
||||
|
||||
const [latestDeviceResponse, setLatestDeviceResponse] = useLedgerResponseState();
|
||||
const [awaitingDeviceConnection, setAwaitingDeviceConnection] = useState(false);
|
||||
|
||||
const pullPublicKeysFromDevice = async () => {
|
||||
const stacks = await prepareLedgerDeviceConnection({
|
||||
setLoadingState: setAwaitingDeviceConnection,
|
||||
onError() {
|
||||
ledgerNavigate.toErrorStep();
|
||||
},
|
||||
});
|
||||
|
||||
if (!stacks) return;
|
||||
|
||||
const versionInfo = await getAppVersion(stacks);
|
||||
ledgerAnalytics.trackDeviceVersionInfo(versionInfo);
|
||||
setLatestDeviceResponse(versionInfo);
|
||||
|
||||
if (versionInfo.deviceLocked) {
|
||||
setAwaitingDeviceConnection(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (versionInfo.returnCode !== LedgerError.NoErrors) {
|
||||
if (!isStacksLedgerAppClosed(versionInfo)) toast.error(versionInfo.errorMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
ledgerNavigate.toConnectionSuccessStep();
|
||||
|
||||
await delay(1750);
|
||||
|
||||
ledgerNavigate.toActivityHappeningOnDeviceStep();
|
||||
|
||||
const resp = await pullKeysFromLedgerDevice(stacks);
|
||||
if (resp.status === 'failure') {
|
||||
fireErrorMessageToast(resp.errorMessage);
|
||||
ledgerNavigate.toErrorStep(resp.errorMessage);
|
||||
return;
|
||||
}
|
||||
ledgerNavigate.toActivityHappeningOnDeviceStep();
|
||||
completeLedgerDeviceOnboarding(resp.publicKeys, versionInfo.targetId);
|
||||
ledgerAnalytics.publicKeysPulledFromLedgerSuccessfully();
|
||||
navigate(RouteUrls.Home);
|
||||
} catch (e) {
|
||||
logger.info(e);
|
||||
ledgerNavigate.toErrorStep();
|
||||
}
|
||||
};
|
||||
|
||||
const onCancelConnectLedger = () => navigate(RouteUrls.Onboarding);
|
||||
|
||||
const ledgerContextValue = {
|
||||
pullPublicKeysFromDevice,
|
||||
latestDeviceResponse,
|
||||
awaitingDeviceConnection,
|
||||
onCancelConnectLedger,
|
||||
};
|
||||
|
||||
return (
|
||||
<LedgerRequestKeysProvider value={ledgerContextValue}>
|
||||
<BaseDrawer title={<Box />} isShowing onClose={onCancelConnectLedger}>
|
||||
<Outlet />
|
||||
</BaseDrawer>
|
||||
</LedgerRequestKeysProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
|
||||
import { ConnectLedgerErrorLayout } from '@app/features/ledger/steps/connect-ledger-error.layout';
|
||||
import { immediatelyAttemptLedgerConnection } from '@app/features/ledger/hooks/use-when-reattempt-ledger-connection';
|
||||
import { useLatestLedgerError } from '@app/features/ledger/hooks/use-ledger-latest-route-error.hook';
|
||||
|
||||
export const ConnectLedgerRequestKeysError = () => {
|
||||
const navigate = useNavigate();
|
||||
const latestLedgerError = useLatestLedgerError();
|
||||
|
||||
return (
|
||||
<ConnectLedgerErrorLayout
|
||||
warningText={latestLedgerError}
|
||||
onCancelConnectLedger={() => navigate(RouteUrls.Onboarding)}
|
||||
onTryAgain={() =>
|
||||
navigate(`../${RouteUrls.ConnectLedger}`, {
|
||||
replace: true,
|
||||
state: { [immediatelyAttemptLedgerConnection]: true },
|
||||
})
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
import { ConnectLedgerSuccessLayout } from '@app/features/ledger/steps/connect-ledger-success.layout';
|
||||
|
||||
export function ConnectLedgerOnboardingSuccess() {
|
||||
return <ConnectLedgerSuccessLayout />;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useContext } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import get from 'lodash.get';
|
||||
|
||||
import { ConnectLedgerLayout } from '@app/features/ledger/steps/connect-ledger.layout';
|
||||
import { useWhenReattemptingLedgerConnection } from '@app/features/ledger/hooks/use-when-reattempt-ledger-connection';
|
||||
import { ledgerRequestKeysContext } from '@app/features/ledger/ledger-request-keys.context';
|
||||
import { LedgerInlineWarnings } from '@app/features/ledger/components/ledger-inline-warnings';
|
||||
|
||||
export const ConnectLedgerRequestKeys = () => {
|
||||
const location = useLocation();
|
||||
|
||||
const { pullPublicKeysFromDevice, latestDeviceResponse, awaitingDeviceConnection } =
|
||||
useContext(ledgerRequestKeysContext);
|
||||
|
||||
const isLookingForLedger = get(location, 'state.isLookingForLedger');
|
||||
|
||||
useWhenReattemptingLedgerConnection(() => pullPublicKeysFromDevice());
|
||||
|
||||
return (
|
||||
<ConnectLedgerLayout
|
||||
awaitingLedgerConnection={awaitingDeviceConnection}
|
||||
isLookingForLedger={isLookingForLedger}
|
||||
warning={<LedgerInlineWarnings latestDeviceResponse={latestDeviceResponse} />}
|
||||
showInstructions
|
||||
onConnectLedger={pullPublicKeysFromDevice}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
import { DeviceBusyLayout } from '@app/features/ledger/steps/device-busy.layout';
|
||||
|
||||
export function PullingKeysFromDevice() {
|
||||
return <DeviceBusyLayout activityDescription="Fetching STX address from Ledger" />;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { useMemo } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { keySlice } from '@app/store/keys/key.slice';
|
||||
import { InternalMethods } from '@shared/message-types';
|
||||
import { sendMessage } from '@shared/messages';
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
|
||||
export function useTriggerLedgerDeviceRequestKeys() {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return useMemo(
|
||||
() => ({
|
||||
fireErrorMessageToast(errorMsg: string) {
|
||||
toast.error(errorMsg);
|
||||
},
|
||||
completeLedgerDeviceOnboarding(publicKeys: string[], targetId: string) {
|
||||
dispatch(
|
||||
keySlice.actions.createLedgerWallet({
|
||||
type: 'ledger',
|
||||
id: 'default',
|
||||
targetId,
|
||||
publicKeys,
|
||||
})
|
||||
);
|
||||
// It's possible a user may have first generated a key, then decided
|
||||
// they wanted to pair with Ledger Here, we kill all in memory keys when
|
||||
// a new Ledger wallet is created
|
||||
sendMessage({ method: InternalMethods.RemoveInMemoryKeys, payload: undefined });
|
||||
navigate(RouteUrls.Home);
|
||||
},
|
||||
}),
|
||||
[dispatch, navigate]
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { Box } from '@stacks/ui';
|
||||
import { LedgerError } from '@zondax/ledger-blockstack';
|
||||
import get from 'lodash.get';
|
||||
|
||||
import { delay, noop } from '@app/common/utils';
|
||||
import {
|
||||
getAppVersion,
|
||||
prepareLedgerDeviceConnection,
|
||||
signLedgerTransaction,
|
||||
signTransactionWithSignature,
|
||||
useLedgerResponseState,
|
||||
} from '@app/features/ledger/ledger-utils';
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
import { deserializeTransaction } from '@stacks/transactions';
|
||||
import { LedgerTxSigningProvider } from '@app/features/ledger/ledger-tx-signing.context';
|
||||
import { useCurrentAccount } from '@app/store/accounts/account.hooks';
|
||||
import { LoadingKeys } from '@app/common/hooks/use-loading';
|
||||
import { useHandleSubmitTransaction } from '@app/common/hooks/use-submit-stx-transaction';
|
||||
import { BaseDrawer } from '@app/components/drawer';
|
||||
|
||||
import { useLedgerNavigate } from '../../hooks/use-ledger-navigate';
|
||||
import { useLedgerAnalytics } from '../../hooks/use-ledger-analytics.hook';
|
||||
import { logger } from '@shared/logger';
|
||||
|
||||
export function LedgerSignTxContainer() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const ledgerNavigate = useLedgerNavigate();
|
||||
const ledgerAnalytics = useLedgerAnalytics();
|
||||
|
||||
const account = useCurrentAccount();
|
||||
|
||||
const [unsignedTransaction, setUnsignedTransaction] = useState<null | string>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const tx = get(location.state, 'tx');
|
||||
if (tx) setUnsignedTransaction(tx);
|
||||
}, [location.state]);
|
||||
|
||||
useEffect(() => () => setUnsignedTransaction(null), []);
|
||||
|
||||
const [latestDeviceResponse, setLatestDeviceResponse] = useLedgerResponseState();
|
||||
|
||||
const [awaitingDeviceConnection, setAwaitingDeviceConnection] = useState(false);
|
||||
|
||||
const broadcastTransactionFn = useHandleSubmitTransaction({
|
||||
loadingKey: LoadingKeys.CONFIRM_DRAWER,
|
||||
});
|
||||
|
||||
const signTransaction = async () => {
|
||||
if (!account) return;
|
||||
|
||||
const stacks = await prepareLedgerDeviceConnection({
|
||||
setLoadingState: setAwaitingDeviceConnection,
|
||||
onError() {
|
||||
ledgerNavigate.toErrorStep();
|
||||
},
|
||||
});
|
||||
|
||||
if (!stacks) return;
|
||||
|
||||
const versionInfo = await getAppVersion(stacks);
|
||||
ledgerAnalytics.trackDeviceVersionInfo(versionInfo);
|
||||
setLatestDeviceResponse(versionInfo);
|
||||
|
||||
if (versionInfo.deviceLocked) {
|
||||
setAwaitingDeviceConnection(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (versionInfo.returnCode !== LedgerError.NoErrors) {
|
||||
logger.error('Return code from device has error', versionInfo);
|
||||
return;
|
||||
}
|
||||
|
||||
ledgerNavigate.toActivityHappeningOnDeviceStep();
|
||||
await delay(1000);
|
||||
|
||||
try {
|
||||
ledgerNavigate.toConnectionSuccessStep();
|
||||
await delay(1000);
|
||||
if (!unsignedTransaction) throw new Error('No unsigned tx');
|
||||
|
||||
ledgerNavigate.toSignTransactionStep({ hasApprovedTransaction: false });
|
||||
|
||||
const resp = await signLedgerTransaction(stacks)(
|
||||
Buffer.from(unsignedTransaction, 'hex'),
|
||||
account.index
|
||||
);
|
||||
|
||||
// Assuming here that public keys are wrong. Alternatively, we may want
|
||||
// to proactively check the key before signing
|
||||
if (resp.returnCode === LedgerError.DataIsInvalid) {
|
||||
ledgerNavigate.toPublicKeyMismatchStep();
|
||||
return;
|
||||
}
|
||||
|
||||
if (resp.returnCode === LedgerError.TransactionRejected) {
|
||||
ledgerNavigate.toTransactionRejectedStep();
|
||||
ledgerAnalytics.transactionSignedOnLedgerRejected();
|
||||
return;
|
||||
}
|
||||
|
||||
if (resp.returnCode !== LedgerError.NoErrors) {
|
||||
throw new Error('Some other error');
|
||||
}
|
||||
|
||||
ledgerNavigate.toSignTransactionStep({ hasApprovedTransaction: true });
|
||||
|
||||
await delay(1000);
|
||||
|
||||
const signedTx = signTransactionWithSignature(unsignedTransaction, resp.signatureVRS);
|
||||
ledgerAnalytics.transactionSignedOnLedgerSuccessfully();
|
||||
|
||||
await broadcastTransactionFn({
|
||||
transaction: signedTx,
|
||||
onClose: noop,
|
||||
});
|
||||
navigate(RouteUrls.Home);
|
||||
} catch (e) {
|
||||
ledgerNavigate.toDeviceDisconnectStep();
|
||||
}
|
||||
};
|
||||
|
||||
const onCancelConnectLedger = ledgerNavigate.cancelLedgerAction;
|
||||
|
||||
const ledgerContextValue = {
|
||||
transaction: unsignedTransaction ? deserializeTransaction(unsignedTransaction) : null,
|
||||
signTransaction,
|
||||
latestDeviceResponse,
|
||||
awaitingDeviceConnection,
|
||||
onCancelConnectLedger,
|
||||
};
|
||||
|
||||
return (
|
||||
<LedgerTxSigningProvider value={ledgerContextValue}>
|
||||
<BaseDrawer title={<Box />} isShowing onClose={onCancelConnectLedger}>
|
||||
<Outlet />
|
||||
</BaseDrawer>
|
||||
</LedgerTxSigningProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { ConnectLedgerErrorLayout } from '@app/features/ledger/steps/connect-ledger-error.layout';
|
||||
import { useLatestLedgerError } from '@app/features/ledger/hooks/use-ledger-latest-route-error.hook';
|
||||
import { useLedgerNavigate } from '../../../hooks/use-ledger-navigate';
|
||||
|
||||
export function ConnectLedgerSignTxError() {
|
||||
const latestLedgerError = useLatestLedgerError();
|
||||
const ledgerNavigate = useLedgerNavigate();
|
||||
|
||||
return (
|
||||
<ConnectLedgerErrorLayout
|
||||
warningText={latestLedgerError}
|
||||
onCancelConnectLedger={() => ledgerNavigate.cancelLedgerAction()}
|
||||
onTryAgain={() => ledgerNavigate.toConnectStepAndTryAgain()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { ConnectLedgerSuccessLayout } from '@app/features/ledger/steps/connect-ledger-success.layout';
|
||||
|
||||
export function ConnectLedgerSignTxSuccess() {
|
||||
return <ConnectLedgerSuccessLayout />;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useContext } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import get from 'lodash.get';
|
||||
|
||||
import { ConnectLedgerLayout } from '@app/features/ledger/steps/connect-ledger.layout';
|
||||
import { useWhenReattemptingLedgerConnection } from '@app/features/ledger/hooks/use-when-reattempt-ledger-connection';
|
||||
|
||||
import { ledgerTxSigningContext } from '@app/features/ledger/ledger-tx-signing.context';
|
||||
import { LedgerInlineWarnings } from '@app/features/ledger/components/ledger-inline-warnings';
|
||||
|
||||
export function ConnectLedgerSignTx() {
|
||||
const location = useLocation();
|
||||
|
||||
const { signTransaction, latestDeviceResponse, awaitingDeviceConnection } =
|
||||
useContext(ledgerTxSigningContext);
|
||||
|
||||
const isLookingForLedger = get(location, 'state.isLookingForLedger');
|
||||
|
||||
useWhenReattemptingLedgerConnection(() => signTransaction());
|
||||
|
||||
return (
|
||||
<ConnectLedgerLayout
|
||||
awaitingLedgerConnection={awaitingDeviceConnection}
|
||||
isLookingForLedger={isLookingForLedger}
|
||||
warning={<LedgerInlineWarnings latestDeviceResponse={latestDeviceResponse} />}
|
||||
onConnectLedger={signTransaction}
|
||||
showInstructions={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { useLedgerNavigate } from '@app/features/ledger/hooks/use-ledger-navigate';
|
||||
import { LedgerDisconnectedLayout } from '@app/features/ledger/steps/ledger-disconnected.layout';
|
||||
|
||||
export function LedgerDisconnected() {
|
||||
const ledgerNavigate = useLedgerNavigate();
|
||||
return (
|
||||
<LedgerDisconnectedLayout
|
||||
onClose={() => ledgerNavigate.cancelLedgerAction()}
|
||||
onConnectAgain={() => ledgerNavigate.toConnectStepAndTryAgain()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { useLedgerNavigate } from '@app/features/ledger/hooks/use-ledger-navigate';
|
||||
import { PublicKeyMismatchLayout } from '@app/features/ledger/steps/public-key-mismatch.layout';
|
||||
|
||||
export function LedgerPublicKeyMismatch() {
|
||||
const ledgerNavigate = useLedgerNavigate();
|
||||
return (
|
||||
<PublicKeyMismatchLayout
|
||||
onClose={() => ledgerNavigate.cancelLedgerAction()}
|
||||
onTryAgain={() => ledgerNavigate.toConnectStepAndTryAgain()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { useContext, useMemo } from 'react';
|
||||
import { cvToString, PayloadType } from '@stacks/transactions';
|
||||
import { useMediaQuery } from '@stacks/ui';
|
||||
import { BigNumber } from 'bignumber.js';
|
||||
|
||||
import { microStxToStx } from '@app/common/stacks-utils';
|
||||
import { DESKTOP_VIEWPORT_MIN_WIDTH } from '@app/components/global-styles/full-page-styles';
|
||||
import { ledgerTxSigningContext } from '@app/features/ledger/ledger-tx-signing.context';
|
||||
import { useHasApprovedTransaction } from '@app/features/ledger/hooks/use-has-approved-transaction';
|
||||
import { SignLedgerTransactionLayout } from '@app/features/ledger/steps/sign-ledger-transaction.layout';
|
||||
import { useCurrentAccount } from '@app/store/accounts/account.hooks';
|
||||
|
||||
const sipTenTransferArguments = ['Amount', 'Sender', 'To', 'Memo'];
|
||||
|
||||
function formatSipTenTransferArgument(index: number) {
|
||||
return `Argument ${index} — ${sipTenTransferArguments[index]}`;
|
||||
}
|
||||
|
||||
function formatTooltipLabel(amount: bigint) {
|
||||
const stxFromMicroStx = microStxToStx(Number(amount));
|
||||
return `The amount is displayed in microstacks (µSTX) and is equal to ${stxFromMicroStx} STX`;
|
||||
}
|
||||
|
||||
export function SignLedgerTransaction() {
|
||||
const { transaction } = useContext(ledgerTxSigningContext);
|
||||
const currentAccount = useCurrentAccount();
|
||||
const hasApprovedTransaction = useHasApprovedTransaction();
|
||||
|
||||
const [desktopViewport] = useMediaQuery(`(min-width: ${DESKTOP_VIEWPORT_MIN_WIDTH})`);
|
||||
|
||||
const transactionDetails: [string, string, string?][] = useMemo(() => {
|
||||
if (!transaction) return [];
|
||||
|
||||
if (transaction.payload.payloadType === PayloadType.TokenTransfer) {
|
||||
return [
|
||||
['Origin', currentAccount?.address || ''],
|
||||
['Nonce', String(transaction.auth.spendingCondition.nonce)],
|
||||
[
|
||||
'Fee (µSTX)',
|
||||
String(transaction.auth.spendingCondition.fee),
|
||||
formatTooltipLabel(transaction.auth.spendingCondition.fee),
|
||||
],
|
||||
[
|
||||
'Amount (µSTX)',
|
||||
new BigNumber(String(transaction.payload.amount)).toFormat(),
|
||||
formatTooltipLabel(transaction.payload.amount),
|
||||
],
|
||||
['To', cvToString(transaction.payload.recipient)],
|
||||
['Memo', transaction.payload.memo.content],
|
||||
];
|
||||
}
|
||||
|
||||
if (transaction.payload.payloadType === PayloadType.ContractCall)
|
||||
return transaction.payload.functionArgs
|
||||
.map(cv => cvToString(cv))
|
||||
.map((value, index) => [formatSipTenTransferArgument(index), value]);
|
||||
|
||||
return [];
|
||||
}, [currentAccount, transaction]);
|
||||
|
||||
return (
|
||||
<SignLedgerTransactionLayout
|
||||
details={transactionDetails}
|
||||
isFullPage={desktopViewport}
|
||||
status={hasApprovedTransaction ? 'approved' : 'awaiting-approval'}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { useLedgerNavigate } from '@app/features/ledger/hooks/use-ledger-navigate';
|
||||
import { TransactionRejectedLayout } from '@app/features/ledger/steps/transaction-rejected.layout';
|
||||
|
||||
export function LedgerTransactionRejected() {
|
||||
const ledgerNavigate = useLedgerNavigate();
|
||||
return <TransactionRejectedLayout onClose={() => ledgerNavigate.cancelLedgerAction()} />;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { DeviceBusyLayout } from '@app/features/ledger/steps/device-busy.layout';
|
||||
|
||||
export function VerifyingPublicKeysMatch() {
|
||||
return <DeviceBusyLayout activityDescription="Verifying public key from Ledger…" />;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import get from 'lodash.get';
|
||||
|
||||
export function useHasApprovedTransaction() {
|
||||
const location = useLocation();
|
||||
|
||||
return useMemo(() => {
|
||||
const state = location.state;
|
||||
return get(state, 'hasApprovedTransaction', false);
|
||||
}, [location.state]);
|
||||
}
|
||||
25
src/app/features/ledger/hooks/use-ledger-analytics.hook.ts
Normal file
25
src/app/features/ledger/hooks/use-ledger-analytics.hook.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
|
||||
import { getAppVersion } from '../ledger-utils';
|
||||
|
||||
export function useLedgerAnalytics() {
|
||||
const analytics = useAnalytics();
|
||||
return useMemo(
|
||||
() => ({
|
||||
trackDeviceVersionInfo(info: Awaited<ReturnType<typeof getAppVersion>>) {
|
||||
void analytics.track('ledger_app_version_info', info);
|
||||
},
|
||||
transactionSignedOnLedgerSuccessfully() {
|
||||
void analytics.track('ledger_transaction_signed_approved');
|
||||
},
|
||||
transactionSignedOnLedgerRejected() {
|
||||
void analytics.track('ledger_transaction_signed_rejected');
|
||||
},
|
||||
publicKeysPulledFromLedgerSuccessfully() {
|
||||
void analytics.track('ledger_public_keys_pulled_from_device');
|
||||
},
|
||||
}),
|
||||
[analytics]
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
export function useLatestLedgerError() {
|
||||
const location = useLocation();
|
||||
|
||||
return useMemo(() => {
|
||||
const state = location.state;
|
||||
if (!state || state === null) return null;
|
||||
if (typeof state === 'object') {
|
||||
const error = (state as any).latestLedgerError;
|
||||
if (error) return error;
|
||||
}
|
||||
return null;
|
||||
}, [location.state]);
|
||||
}
|
||||
72
src/app/features/ledger/hooks/use-ledger-navigate.ts
Normal file
72
src/app/features/ledger/hooks/use-ledger-navigate.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { StacksTransaction } from '@stacks/transactions';
|
||||
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
import { immediatelyAttemptLedgerConnection } from './use-when-reattempt-ledger-connection';
|
||||
|
||||
export function useLedgerNavigate() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return useMemo(
|
||||
() => ({
|
||||
toConnectStep() {
|
||||
return navigate(RouteUrls.ConnectLedger, { replace: true });
|
||||
},
|
||||
|
||||
toConnectStepAndTryAgain() {
|
||||
return navigate(`../${RouteUrls.ConnectLedger}`, {
|
||||
replace: true,
|
||||
state: { [immediatelyAttemptLedgerConnection]: true },
|
||||
});
|
||||
},
|
||||
|
||||
toConnectAndSignStep(transaction: StacksTransaction) {
|
||||
return navigate(RouteUrls.ConnectLedger, {
|
||||
replace: true,
|
||||
state: { tx: transaction.serialize().toString('hex') },
|
||||
});
|
||||
},
|
||||
|
||||
toActivityHappeningOnDeviceStep() {
|
||||
return navigate(RouteUrls.DeviceBusy, { replace: true });
|
||||
},
|
||||
|
||||
toConnectionSuccessStep() {
|
||||
return navigate(RouteUrls.ConnectLedgerSuccess, { replace: true });
|
||||
},
|
||||
|
||||
toErrorStep(errorMessage?: string) {
|
||||
return navigate(RouteUrls.ConnectLedgerError, {
|
||||
replace: true,
|
||||
state: { latestLedgerError: errorMessage },
|
||||
});
|
||||
},
|
||||
|
||||
toSignTransactionStep({ hasApprovedTransaction }: { hasApprovedTransaction: boolean }) {
|
||||
return navigate(RouteUrls.SignLedgerTransaction, {
|
||||
replace: true,
|
||||
state: { hasApprovedTransaction },
|
||||
});
|
||||
},
|
||||
|
||||
toPublicKeyMismatchStep() {
|
||||
return navigate(RouteUrls.LedgerPublicKeyMismatch, { replace: true });
|
||||
},
|
||||
|
||||
toTransactionRejectedStep() {
|
||||
return navigate(RouteUrls.TransactionRejected, { replace: true });
|
||||
},
|
||||
|
||||
toDeviceDisconnectStep() {
|
||||
return navigate(RouteUrls.LedgerDisconnected, { replace: true });
|
||||
},
|
||||
|
||||
cancelLedgerAction() {
|
||||
return navigate('..');
|
||||
},
|
||||
}),
|
||||
|
||||
[navigate]
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
export const immediatelyAttemptLedgerConnection = 'immediatelyAttemptLedgerConnection' as const;
|
||||
|
||||
export function useWhenReattemptingLedgerConnection(fn: () => void) {
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const state: any = location.state;
|
||||
if (typeof state !== 'object' || state === null) return;
|
||||
if (state[immediatelyAttemptLedgerConnection]) fn();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
}
|
||||
17
src/app/features/ledger/ledger-request-keys.context.ts
Normal file
17
src/app/features/ledger/ledger-request-keys.context.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { noop } from '@app/common/utils';
|
||||
import { createContext } from 'react';
|
||||
import { getAppVersion } from './ledger-utils';
|
||||
|
||||
export interface LedgerRequestKeysProvider {
|
||||
latestDeviceResponse: null | Awaited<ReturnType<typeof getAppVersion>>;
|
||||
awaitingDeviceConnection: boolean;
|
||||
pullPublicKeysFromDevice(): Promise<void> | void;
|
||||
}
|
||||
|
||||
export const ledgerRequestKeysContext = createContext<LedgerRequestKeysProvider>({
|
||||
latestDeviceResponse: null,
|
||||
awaitingDeviceConnection: false,
|
||||
pullPublicKeysFromDevice: noop,
|
||||
});
|
||||
|
||||
export const LedgerRequestKeysProvider = ledgerRequestKeysContext.Provider;
|
||||
21
src/app/features/ledger/ledger-tx-signing.context.ts
Normal file
21
src/app/features/ledger/ledger-tx-signing.context.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { createContext } from 'react';
|
||||
import { StacksTransaction } from '@stacks/transactions';
|
||||
|
||||
import { noop } from '@app/common/utils';
|
||||
import { getAppVersion } from './ledger-utils';
|
||||
|
||||
export interface LedgerTxSigningProvider {
|
||||
transaction: StacksTransaction | null;
|
||||
latestDeviceResponse: null | Awaited<ReturnType<typeof getAppVersion>>;
|
||||
awaitingDeviceConnection: boolean;
|
||||
signTransaction(): Promise<void> | void;
|
||||
}
|
||||
|
||||
export const ledgerTxSigningContext = createContext<LedgerTxSigningProvider>({
|
||||
transaction: null,
|
||||
latestDeviceResponse: null,
|
||||
awaitingDeviceConnection: false,
|
||||
signTransaction: noop,
|
||||
});
|
||||
|
||||
export const LedgerTxSigningProvider = ledgerTxSigningContext.Provider;
|
||||
112
src/app/features/ledger/ledger-utils.ts
Normal file
112
src/app/features/ledger/ledger-utils.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
import Transport from '@ledgerhq/hw-transport-webusb';
|
||||
import StacksApp, { LedgerError, ResponseVersion } from '@zondax/ledger-blockstack';
|
||||
|
||||
import {
|
||||
AddressVersion,
|
||||
createMessageSignature,
|
||||
deserializeTransaction,
|
||||
SingleSigSpendingCondition,
|
||||
} from '@stacks/transactions';
|
||||
|
||||
import { delay } from '@app/common/utils';
|
||||
import { safeAwait } from '@stacks/ui';
|
||||
import { useState } from 'react';
|
||||
import { LedgerTxSigningProvider } from './ledger-tx-signing.context';
|
||||
|
||||
const stxDerivationWithAccount = `m/44'/5757'/0'/0/{account}`;
|
||||
|
||||
async function connectLedger() {
|
||||
const transport = await Transport.create();
|
||||
return new StacksApp(transport);
|
||||
}
|
||||
|
||||
function requestPublicKeyForAccount(app: StacksApp) {
|
||||
return async (index: number) =>
|
||||
app.getAddressAndPubKey(
|
||||
stxDerivationWithAccount.replace('{account}', index.toString()),
|
||||
// We pass mainnet as it expects something, however this is so it can return a formatted address
|
||||
// We only need the public key, and can derive the address later in any network format
|
||||
AddressVersion.MainnetSingleSig
|
||||
);
|
||||
}
|
||||
|
||||
export async function getAppVersion(app: StacksApp) {
|
||||
return app.getVersion();
|
||||
}
|
||||
|
||||
const targetIdMap = new Map([
|
||||
['31100004', 'Nano S'],
|
||||
['33000004', 'Nano X'],
|
||||
]);
|
||||
export function extractDeviceNameFromKnownTargetIds(targetId: string) {
|
||||
return targetIdMap.get(targetId);
|
||||
}
|
||||
|
||||
interface PrepareLedgerDeviceConnectionArgs {
|
||||
setLoadingState(loadingState: boolean): void;
|
||||
onError(): void;
|
||||
}
|
||||
export async function prepareLedgerDeviceConnection(args: PrepareLedgerDeviceConnectionArgs) {
|
||||
const { setLoadingState, onError } = args;
|
||||
setLoadingState(true);
|
||||
const [error, stacks] = await safeAwait(connectLedger());
|
||||
await delay(1000);
|
||||
setLoadingState(false);
|
||||
|
||||
if (error) {
|
||||
onError();
|
||||
return;
|
||||
}
|
||||
|
||||
return stacks;
|
||||
}
|
||||
|
||||
export function signLedgerTransaction(app: StacksApp) {
|
||||
return async (payload: Buffer, accountIndex: number) =>
|
||||
app.sign(stxDerivationWithAccount.replace('{account}', accountIndex.toString()), payload);
|
||||
}
|
||||
|
||||
export function signTransactionWithSignature(transaction: string, signatureVRS: Buffer) {
|
||||
const deserialzedTx = deserializeTransaction(transaction);
|
||||
const spendingCondition = createMessageSignature(signatureVRS.toString('hex'));
|
||||
(deserialzedTx.auth.spendingCondition as SingleSigSpendingCondition).signature =
|
||||
spendingCondition;
|
||||
return deserialzedTx;
|
||||
}
|
||||
|
||||
interface PullKeysFromLedgerSuccess {
|
||||
status: 'success';
|
||||
publicKeys: string[];
|
||||
}
|
||||
|
||||
interface PullKeysFromLedgerFailure {
|
||||
status: 'failure';
|
||||
errorMessage: string;
|
||||
returnCode: number;
|
||||
}
|
||||
|
||||
type PullKeysFromLedgerResponse = Promise<PullKeysFromLedgerSuccess | PullKeysFromLedgerFailure>;
|
||||
|
||||
export async function pullKeysFromLedgerDevice(stacksApp: StacksApp): PullKeysFromLedgerResponse {
|
||||
const publicKeys = [];
|
||||
const amountOfKeysToExtractFromDevice = 5;
|
||||
for (let index = 0; index < amountOfKeysToExtractFromDevice; index++) {
|
||||
const resp = await requestPublicKeyForAccount(stacksApp)(index);
|
||||
if (!resp.publicKey) return { status: 'failure', ...resp };
|
||||
publicKeys.push(resp.publicKey.toString('hex'));
|
||||
}
|
||||
await delay(1000);
|
||||
return { status: 'success', publicKeys };
|
||||
}
|
||||
|
||||
export function useLedgerResponseState() {
|
||||
return useState<LedgerTxSigningProvider['latestDeviceResponse']>(null);
|
||||
}
|
||||
|
||||
export function isStacksLedgerAppClosed(response: ResponseVersion) {
|
||||
const anotherUnknownErrorCodeMeaningAppClosed = 28161;
|
||||
return (
|
||||
response.returnCode === LedgerError.AppDoesNotSeemToBeOpen ||
|
||||
response.returnCode === anotherUnknownErrorCodeMeaningAppClosed
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { FiCircle } from 'react-icons/fi';
|
||||
import { Box, color, Flex, Stack } from '@stacks/ui';
|
||||
|
||||
import { Caption } from '@app/components/typography';
|
||||
import ConnectLedgerError from '@assets/images/ledger/connect-ledger-error.png';
|
||||
import { ErrorLabel } from '@app/components/error-label';
|
||||
import { PrimaryButton } from '@app/components/primary-button';
|
||||
import { Link } from '@app/components/link';
|
||||
import { WarningLabel } from '@app/components/warning-label';
|
||||
import { LedgerTitle } from '../components/ledger-title';
|
||||
import { LedgerWrapper } from '../components/ledger-wrapper';
|
||||
|
||||
interface PossibleReasonUnableToConnectProps {
|
||||
text: string;
|
||||
}
|
||||
function PossibleReasonUnableToConnect(props: PossibleReasonUnableToConnectProps) {
|
||||
const { text } = props;
|
||||
|
||||
return (
|
||||
<Flex>
|
||||
<Box mr="tight" mt="3px">
|
||||
<FiCircle fill={color('text-caption')} size="4px" />
|
||||
</Box>
|
||||
<Caption>{text}</Caption>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
interface ConnectLedgerErrorLayoutProps {
|
||||
warningText: string | null;
|
||||
onCancelConnectLedger(): void;
|
||||
onTryAgain(): void;
|
||||
}
|
||||
export function ConnectLedgerErrorLayout(props: ConnectLedgerErrorLayoutProps) {
|
||||
const { warningText, onTryAgain } = props;
|
||||
|
||||
return (
|
||||
<LedgerWrapper>
|
||||
<Box mt="tight">
|
||||
<img src={ConnectLedgerError} width="247px" />
|
||||
</Box>
|
||||
<LedgerTitle mt="45px" mx="50px">
|
||||
We're unable to connect to your Ledger device
|
||||
</LedgerTitle>
|
||||
{warningText ? (
|
||||
<WarningLabel mt="base" px="extra-loose" fontSize="14px">
|
||||
{warningText}
|
||||
</WarningLabel>
|
||||
) : (
|
||||
<ErrorLabel fontSize={1} lineHeight={1.4} mt="base">
|
||||
Unable to connect
|
||||
</ErrorLabel>
|
||||
)}
|
||||
<Stack
|
||||
border="2px solid"
|
||||
borderColor={color('border')}
|
||||
borderRadius="12px"
|
||||
my="loose"
|
||||
mx="base"
|
||||
spacing="base"
|
||||
textAlign="left"
|
||||
p="extra-loose"
|
||||
>
|
||||
<PossibleReasonUnableToConnect text="Check if Ledger Live is open. If it is, close it and try again" />
|
||||
<PossibleReasonUnableToConnect text="Ensure you only have one instance of the Hiro Wallet open" />
|
||||
<PossibleReasonUnableToConnect text="Check you've approved the browser USB pop up" />
|
||||
<PossibleReasonUnableToConnect text="Verify the Stacks app is installed and open" />
|
||||
</Stack>
|
||||
<PrimaryButton height="40px" onClick={onTryAgain}>
|
||||
Try again
|
||||
</PrimaryButton>
|
||||
<Caption mt="loose">
|
||||
If the problem persists, check our{' '}
|
||||
<Link display="inline" fontSize={1} onClick={() => {}}>
|
||||
Support Page
|
||||
</Link>
|
||||
</Caption>
|
||||
</LedgerWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import ConnectLedgerSuccess from '@assets/images/ledger/connect-ledger-success.png';
|
||||
import { LedgerSuccessLabel } from '../components/success-label';
|
||||
import { LedgerConnectInstructionTitle } from '../components/ledger-title';
|
||||
import { LedgerWrapper } from '../components/ledger-wrapper';
|
||||
|
||||
export function ConnectLedgerSuccessLayout() {
|
||||
return (
|
||||
<LedgerWrapper>
|
||||
<img src={ConnectLedgerSuccess} width="267px" height="55px" />
|
||||
<LedgerConnectInstructionTitle mt="loose" mx="50px" />
|
||||
<LedgerSuccessLabel my="extra-loose">Connected!</LedgerSuccessLabel>
|
||||
</LedgerWrapper>
|
||||
);
|
||||
}
|
||||
63
src/app/features/ledger/steps/connect-ledger.layout.tsx
Normal file
63
src/app/features/ledger/steps/connect-ledger.layout.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import { Box } from '@stacks/ui';
|
||||
|
||||
import { Divider } from '@app/components/divider';
|
||||
|
||||
import { PrimaryButton } from '@app/components/primary-button';
|
||||
import { Caption } from '@app/components/typography';
|
||||
|
||||
import { LedgerConnectInstructionTitle } from '../components/ledger-title';
|
||||
import { ExternalLink } from '@app/components/external-link';
|
||||
// import ConnectLedger from '@assets/images/ledger/connect-ledger.png';
|
||||
import { lazy, Suspense } from 'react';
|
||||
import { LedgerWrapper } from '../components/ledger-wrapper';
|
||||
|
||||
const PluggingInLedgerCableAnimation = lazy(() => import('../animations/plugging-in-cable.lottie'));
|
||||
|
||||
interface ConnectLedgerLayoutProps {
|
||||
isLookingForLedger: boolean;
|
||||
awaitingLedgerConnection: boolean;
|
||||
warning: React.ReactNode;
|
||||
showInstructions: boolean;
|
||||
onConnectLedger(): void;
|
||||
}
|
||||
export function ConnectLedgerLayout(props: ConnectLedgerLayoutProps) {
|
||||
const { onConnectLedger, warning, showInstructions, awaitingLedgerConnection } = props;
|
||||
|
||||
return (
|
||||
<LedgerWrapper>
|
||||
<Box position="relative" width="100%" height="120px">
|
||||
<Suspense fallback={null}>
|
||||
<PluggingInLedgerCableAnimation position="absolute" top="-80px" />
|
||||
</Suspense>
|
||||
</Box>
|
||||
{/* <img src={ConnectLedger} width="299" height="97" /> */}
|
||||
<LedgerConnectInstructionTitle mt="extra-loose" mx="50px" />
|
||||
|
||||
<PrimaryButton
|
||||
height="40px"
|
||||
my="base"
|
||||
onClick={onConnectLedger}
|
||||
isLoading={awaitingLedgerConnection}
|
||||
>
|
||||
Connect
|
||||
</PrimaryButton>
|
||||
<Box mb="base" mx="extra-loose">
|
||||
{warning}
|
||||
</Box>
|
||||
{showInstructions ? (
|
||||
<>
|
||||
<Divider />
|
||||
<Caption mb="tight" mt="loose">
|
||||
First time using Ledger on Hiro Wallet?
|
||||
</Caption>
|
||||
<ExternalLink
|
||||
href="https://www.hiro.so/wallet-faq/how-can-i-use-my-ledger-device-with-hiro-wallet"
|
||||
fontSize={1}
|
||||
>
|
||||
See how to download the Stacks app
|
||||
</ExternalLink>
|
||||
</>
|
||||
) : null}
|
||||
</LedgerWrapper>
|
||||
);
|
||||
}
|
||||
19
src/app/features/ledger/steps/device-busy.layout.tsx
Normal file
19
src/app/features/ledger/steps/device-busy.layout.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import ConnectLedgerSuccess from '@assets/images/ledger/connect-ledger-success.png';
|
||||
import { LookingForLedgerLabel } from '../components/looking-for-ledger-label';
|
||||
import { LedgerConnectInstructionTitle } from '../components/ledger-title';
|
||||
import { LedgerWrapper } from '../components/ledger-wrapper';
|
||||
|
||||
interface DeviceBusyLayoutProps {
|
||||
activityDescription: string;
|
||||
}
|
||||
export function DeviceBusyLayout(props: DeviceBusyLayoutProps) {
|
||||
const { activityDescription } = props;
|
||||
|
||||
return (
|
||||
<LedgerWrapper>
|
||||
<img src={ConnectLedgerSuccess} width="267px" height="55px" />
|
||||
<LedgerConnectInstructionTitle mt="loose" mx="50px" />
|
||||
<LookingForLedgerLabel my="extra-loose">{activityDescription}</LookingForLedgerLabel>
|
||||
</LedgerWrapper>
|
||||
);
|
||||
}
|
||||
38
src/app/features/ledger/steps/ledger-disconnected.layout.tsx
Normal file
38
src/app/features/ledger/steps/ledger-disconnected.layout.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { Box, Button, Stack } from '@stacks/ui';
|
||||
import { PrimaryButton } from '@app/components/primary-button';
|
||||
import LedgerDisconnected from '@assets/images/ledger/ledger-disconnected.png';
|
||||
|
||||
import { LedgerTitle } from '../components/ledger-title';
|
||||
import { LedgerWrapper } from '../components/ledger-wrapper';
|
||||
|
||||
interface LedgerDisconnectedLayoutProps {
|
||||
onConnectAgain(): void;
|
||||
onClose(): void;
|
||||
}
|
||||
export function LedgerDisconnectedLayout(props: LedgerDisconnectedLayoutProps) {
|
||||
const { onConnectAgain, onClose } = props;
|
||||
return (
|
||||
<LedgerWrapper>
|
||||
<Box mb="loose" mt="tight">
|
||||
<img src={LedgerDisconnected} width="242px" />
|
||||
</Box>
|
||||
<LedgerTitle mb="loose" mt="loose" mx="40px">
|
||||
Your Ledger has disconnected
|
||||
</LedgerTitle>
|
||||
<Stack isInline mb="loose">
|
||||
<Button
|
||||
_hover={{ boxShadow: 'none' }}
|
||||
borderRadius="10px"
|
||||
boxShadow="none"
|
||||
mode="tertiary"
|
||||
onClick={onClose}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
<PrimaryButton height="40px" onClick={onConnectAgain}>
|
||||
Connect again
|
||||
</PrimaryButton>
|
||||
</Stack>
|
||||
</LedgerWrapper>
|
||||
);
|
||||
}
|
||||
28
src/app/features/ledger/steps/public-key-mismatch.layout.tsx
Normal file
28
src/app/features/ledger/steps/public-key-mismatch.layout.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { Box, Button, color, Flex, Text } from '@stacks/ui';
|
||||
import LedgerWithRedOutline from '@assets/images/ledger/ledger-red-outline.png';
|
||||
import { Title } from '@app/components/typography';
|
||||
import { LedgerWrapper } from '../components/ledger-wrapper';
|
||||
|
||||
interface PublicKeyMismatchLayoutProps {
|
||||
onClose(): void;
|
||||
onTryAgain(): void;
|
||||
}
|
||||
export function PublicKeyMismatchLayout({ onClose, onTryAgain }: PublicKeyMismatchLayoutProps) {
|
||||
return (
|
||||
<LedgerWrapper>
|
||||
<Box>
|
||||
<img src={LedgerWithRedOutline} width="247px" height="55px" />
|
||||
</Box>
|
||||
<Title mt="extra-loose">Public key does not match</Title>
|
||||
<Text mt="base-tight" lineHeight="24px" color={color('text-caption')}>
|
||||
Ensure you're using the same Ledger you used when setting up the Hiro Wallet
|
||||
</Text>
|
||||
<Flex mt="base-loose">
|
||||
<Button mode="tertiary" mr="base-tight" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
<Button onClick={onTryAgain}>Try again</Button>
|
||||
</Flex>
|
||||
</LedgerWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import { FiInfo } from 'react-icons/fi';
|
||||
import { color, Box, Flex, Text, Stack } from '@stacks/ui';
|
||||
|
||||
import SignLedgerTransaction from '@assets/images/ledger/sign-ledger-transaction.png';
|
||||
import { Tooltip } from '@app/components/tooltip';
|
||||
import { Caption } from '@app/components/typography';
|
||||
import { DividerSeparator } from '@app/components/divider-separator';
|
||||
import { LedgerTitle } from '../components/ledger-title';
|
||||
import { LookingForLedgerLabel } from '../components/looking-for-ledger-label';
|
||||
import { LedgerWrapper } from '../components/ledger-wrapper';
|
||||
import { LedgerSuccessLabel } from '../components/success-label';
|
||||
|
||||
interface TransactionDetailProps {
|
||||
children: React.ReactNode;
|
||||
isFullPage: boolean;
|
||||
title: string;
|
||||
tooltipLabel?: string;
|
||||
}
|
||||
function TransactionDetail(props: TransactionDetailProps) {
|
||||
const { children, isFullPage, title, tooltipLabel } = props;
|
||||
|
||||
return (
|
||||
<Flex borderColor="#DCDDE2" flexDirection="column">
|
||||
<Caption>{title}</Caption>
|
||||
<Flex alignItems="center" mt="base">
|
||||
<Text overflowWrap="break-word" maxWidth={['280px', '360px']}>
|
||||
{children}
|
||||
</Text>
|
||||
{tooltipLabel ? (
|
||||
<Tooltip label={tooltipLabel} maxWidth={isFullPage ? '260px' : '210px'} placement="right">
|
||||
<Stack>
|
||||
<Box
|
||||
_hover={{ cursor: 'pointer' }}
|
||||
as={FiInfo}
|
||||
color={color('text-caption')}
|
||||
ml="extra-tight"
|
||||
size="14px"
|
||||
/>
|
||||
</Stack>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
interface SignLedgerTransactionLayoutProps {
|
||||
details: [string, string, string?][];
|
||||
isFullPage: boolean;
|
||||
status: 'awaiting-approval' | 'approved';
|
||||
}
|
||||
export function SignLedgerTransactionLayout({
|
||||
details,
|
||||
isFullPage,
|
||||
status,
|
||||
}: SignLedgerTransactionLayoutProps) {
|
||||
return (
|
||||
<LedgerWrapper>
|
||||
<Box mt="tight">
|
||||
<img src={SignLedgerTransaction} width="228px" />
|
||||
</Box>
|
||||
<LedgerTitle mt="loose" mx="50px">
|
||||
Verify the transaction details on your Ledger
|
||||
</LedgerTitle>
|
||||
{status === 'awaiting-approval' && (
|
||||
<LookingForLedgerLabel my="extra-loose">Waiting for your approval</LookingForLedgerLabel>
|
||||
)}
|
||||
{status === 'approved' && <LedgerSuccessLabel my="extra-loose">Approved</LedgerSuccessLabel>}
|
||||
<Flex
|
||||
bg={color('bg-4')}
|
||||
borderRadius="16px"
|
||||
flexDirection="column"
|
||||
textAlign="left"
|
||||
px="extra-loose"
|
||||
py="extra-loose"
|
||||
width="100%"
|
||||
>
|
||||
<DividerSeparator>
|
||||
{details.map(([title, value, tooltipLabel]) => (
|
||||
<TransactionDetail isFullPage={isFullPage} title={title} tooltipLabel={tooltipLabel}>
|
||||
{value}
|
||||
</TransactionDetail>
|
||||
))}
|
||||
</DividerSeparator>
|
||||
</Flex>
|
||||
</LedgerWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Box, Button, color, Flex, Text } from '@stacks/ui';
|
||||
import LedgerTxRejected from '@assets/images/ledger/transaction-rejected.png';
|
||||
import { LedgerTitle } from '../components/ledger-title';
|
||||
|
||||
interface TransactionRejectedLayoutProps {
|
||||
onClose(): void;
|
||||
}
|
||||
export function TransactionRejectedLayout({ onClose }: TransactionRejectedLayoutProps) {
|
||||
return (
|
||||
<Flex alignItems="center" flexDirection="column" pb="extra-loose" px="loose" textAlign="center">
|
||||
<Box>
|
||||
<img src={LedgerTxRejected} width="227px" height="63px" />
|
||||
</Box>
|
||||
<LedgerTitle mt="extra-loose" mx="40px" lineHeight="1.6">
|
||||
The transaction on your Ledger was rejected
|
||||
</LedgerTitle>
|
||||
<Text mt="base-tight" lineHeight="24px" color={color('text-caption')}></Text>
|
||||
<Button mode="tertiary" mt="base" mr="base-tight" mb="tight" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
30
src/app/features/ledger/steps/unsupported-browser.layout.tsx
Normal file
30
src/app/features/ledger/steps/unsupported-browser.layout.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Box, Flex, Text } from '@stacks/ui';
|
||||
|
||||
import UnsupportedBrowserImg from '@assets/images/ledger/unsupported-browser.png';
|
||||
|
||||
import { ExternalLink } from '@app/components/external-link';
|
||||
import { LedgerTitle } from '../components/ledger-title';
|
||||
|
||||
export function UnsupportedBrowserLayout() {
|
||||
return (
|
||||
<Flex alignItems="center" flexDirection="column" pb="loose" px="loose" textAlign="center">
|
||||
<Box mb="loose" mt="tight">
|
||||
<img src={UnsupportedBrowserImg} width="239px" height="177px" />
|
||||
</Box>
|
||||
<LedgerTitle mt="tight">Your browser isn't supported</LedgerTitle>
|
||||
<Text
|
||||
as="p"
|
||||
fontSize="16px"
|
||||
lineHeight="1.7"
|
||||
mt="base"
|
||||
pb="base-tight"
|
||||
mx="extra-loose"
|
||||
color="#74777D"
|
||||
>
|
||||
To connect your Ledger with the Hiro Wallet try{' '}
|
||||
<ExternalLink href="https://www.google.com/chrome/">Chrome</ExternalLink> or{' '}
|
||||
<ExternalLink href="https://brave.com/download/">Brave</ExternalLink>.
|
||||
</Text>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Flex, Text, color } from '@stacks/ui';
|
||||
import { WalletTypeLedgerIcon } from '@app/components/icons/wallet-type-ledger-icon';
|
||||
import { Divider } from '@app/components/divider';
|
||||
|
||||
interface LedgerDeviceItemRowProps {
|
||||
deviceType?: string;
|
||||
}
|
||||
export function LedgerDeviceItemRow({ deviceType }: LedgerDeviceItemRowProps) {
|
||||
return (
|
||||
<>
|
||||
<Flex my="base-tight" mb="base" mx="base" fontSize="14px" alignItems="center">
|
||||
<WalletTypeLedgerIcon mr="base-tight" />
|
||||
<Text color={color('text-body')} cursor="default">
|
||||
Ledger {deviceType ?? ''}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Divider />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { memo } from 'react';
|
||||
import { BoxProps, Text, color } from '@stacks/ui';
|
||||
|
||||
export const SettingsMenuItem = memo((props: BoxProps) => {
|
||||
const { onClick, children, ...rest } = props;
|
||||
return (
|
||||
<Text
|
||||
width="100%"
|
||||
px="base"
|
||||
py="base"
|
||||
cursor="pointer"
|
||||
color={color('text-title')}
|
||||
_hover={{ backgroundColor: color('bg-4') }}
|
||||
onClick={e => {
|
||||
onClick?.(e);
|
||||
}}
|
||||
fontSize={1}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Box, color } from '@stacks/ui';
|
||||
import { forwardRefWithAs } from '@stacks/ui-core';
|
||||
|
||||
export const MenuWrapper = forwardRefWithAs((props, ref) => (
|
||||
<Box
|
||||
ref={ref}
|
||||
position="absolute"
|
||||
top="60px"
|
||||
right="extra-loose"
|
||||
borderRadius="10px"
|
||||
width="296px"
|
||||
boxShadow="0px 8px 16px rgba(27, 39, 51, 0.08);"
|
||||
zIndex={2000}
|
||||
border="1px solid"
|
||||
bg={color('bg')}
|
||||
borderColor={color('border')}
|
||||
py="tight"
|
||||
transformOrigin="top right"
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
@@ -1,79 +1,43 @@
|
||||
import { memo, useCallback, useRef } from 'react';
|
||||
import { useCallback, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Box, SlideFade, BoxProps, color, Flex } from '@stacks/ui';
|
||||
import { Box, SlideFade, color, Flex } from '@stacks/ui';
|
||||
|
||||
import { Text, Caption } from '@app/components/typography';
|
||||
import { Caption } from '@app/components/typography';
|
||||
import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside';
|
||||
import { useWallet } from '@app/common/hooks/use-wallet';
|
||||
import { useDrawers } from '@app/common/hooks/use-drawers';
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
import { Divider } from '@app/components/divider';
|
||||
import { forwardRefWithAs } from '@stacks/ui-core';
|
||||
import { SettingsSelectors } from '@tests/integration/settings.selectors';
|
||||
import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
|
||||
import { useCreateAccount } from '@app/common/hooks/account/use-create-account';
|
||||
import { useHasCreatedAccount } from '@app/store/accounts/account.hooks';
|
||||
import { Overlay } from '@app/components/overlay';
|
||||
import { SettingsMenuItem as MenuItem } from './components/settings-menu-item';
|
||||
import { MenuWrapper } from './components/settings-menu-wrapper';
|
||||
import { useWalletType } from '@app/common/use-wallet-type';
|
||||
import { LedgerDeviceItemRow } from './components/ledger-item-row';
|
||||
import { useCurrentKeyDetails } from '@app/store/keys/key.selectors';
|
||||
import { extractDeviceNameFromKnownTargetIds } from '../ledger/ledger-utils';
|
||||
|
||||
const MenuWrapper = forwardRefWithAs((props, ref) => (
|
||||
<Box
|
||||
ref={ref}
|
||||
position="absolute"
|
||||
top="60px"
|
||||
right="extra-loose"
|
||||
borderRadius="10px"
|
||||
width="296px"
|
||||
boxShadow="0px 8px 16px rgba(27, 39, 51, 0.08);"
|
||||
zIndex={2000}
|
||||
border="1px solid"
|
||||
bg={color('bg')}
|
||||
borderColor={color('border')}
|
||||
py="tight"
|
||||
transformOrigin="top right"
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
const MenuItem = memo((props: BoxProps) => {
|
||||
const { onClick, children, ...rest } = props;
|
||||
return (
|
||||
<Text
|
||||
width="100%"
|
||||
px="base"
|
||||
py="base-tight"
|
||||
cursor="pointer"
|
||||
color={color('text-title')}
|
||||
_hover={{ backgroundColor: color('bg-4') }}
|
||||
onClick={e => {
|
||||
onClick?.(e);
|
||||
}}
|
||||
fontSize={1}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
});
|
||||
|
||||
export const SettingsDropdown = () => {
|
||||
export function SettingsDropdown() {
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
const { lockWallet, wallet, currentNetworkKey, hasGeneratedWallet, encryptedSecretKey } =
|
||||
useWallet();
|
||||
const { lockWallet, currentNetworkKey, hasGeneratedWallet, wallet } = useWallet();
|
||||
const createAccount = useCreateAccount();
|
||||
const [hasCreatedAccount, setHasCreatedAccount] = useHasCreatedAccount();
|
||||
const {
|
||||
setShowNetworks,
|
||||
setShowSwitchAccountsState,
|
||||
setShowSettings,
|
||||
showSettings,
|
||||
setShowSignOut,
|
||||
setShowSwitchAccountsState,
|
||||
} = useDrawers();
|
||||
const navigate = useNavigate();
|
||||
const analytics = useAnalytics();
|
||||
const { walletType } = useWalletType();
|
||||
const key = useCurrentKeyDetails();
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setShowSettings(false);
|
||||
}, [setShowSettings]);
|
||||
const handleClose = useCallback(() => setShowSettings(false), [setShowSettings]);
|
||||
|
||||
const wrappedCloseCallback = useCallback(
|
||||
(callback: () => void) => () => {
|
||||
@@ -93,18 +57,21 @@ export const SettingsDropdown = () => {
|
||||
<SlideFade initialOffset="-20px" timeout={150} in={isShowing}>
|
||||
{styles => (
|
||||
<MenuWrapper ref={ref} style={styles} pointerEvents={!isShowing ? 'none' : 'all'}>
|
||||
{hasGeneratedWallet && (
|
||||
{key && key.type === 'ledger' && (
|
||||
<LedgerDeviceItemRow deviceType={extractDeviceNameFromKnownTargetIds(key.targetId)} />
|
||||
)}
|
||||
{wallet && wallet?.accounts?.length > 1 && (
|
||||
<MenuItem
|
||||
data-testid={SettingsSelectors.SwitchAccount}
|
||||
onClick={wrappedCloseCallback(() => {
|
||||
setShowSwitchAccountsState(true);
|
||||
})}
|
||||
>
|
||||
Switch account
|
||||
</MenuItem>
|
||||
)}
|
||||
{hasGeneratedWallet && walletType === 'software' && (
|
||||
<>
|
||||
{wallet && wallet?.accounts?.length > 1 && (
|
||||
<MenuItem
|
||||
data-testid={SettingsSelectors.SwitchAccount}
|
||||
onClick={wrappedCloseCallback(() => {
|
||||
setShowSwitchAccountsState(true);
|
||||
})}
|
||||
>
|
||||
Switch account
|
||||
</MenuItem>
|
||||
)}
|
||||
<MenuItem
|
||||
data-testid={SettingsSelectors.CreateAccountBtn}
|
||||
onClick={wrappedCloseCallback(() => {
|
||||
@@ -139,36 +106,32 @@ export const SettingsDropdown = () => {
|
||||
</Caption>
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
{encryptedSecretKey && (
|
||||
<>
|
||||
<Divider />
|
||||
{hasGeneratedWallet && (
|
||||
<MenuItem
|
||||
onClick={wrappedCloseCallback(() => {
|
||||
void analytics.track('lock_session');
|
||||
void lockWallet();
|
||||
navigate(RouteUrls.Unlock);
|
||||
})}
|
||||
data-testid="settings-lock"
|
||||
>
|
||||
Lock
|
||||
</MenuItem>
|
||||
)}
|
||||
<MenuItem
|
||||
color={color('feedback-error')}
|
||||
onClick={wrappedCloseCallback(() => {
|
||||
setShowSignOut(true);
|
||||
navigate(RouteUrls.SignOutConfirm);
|
||||
})}
|
||||
data-testid="settings-sign-out"
|
||||
>
|
||||
Sign Out
|
||||
</MenuItem>
|
||||
</>
|
||||
<Divider />
|
||||
{hasGeneratedWallet && walletType === 'software' && (
|
||||
<MenuItem
|
||||
onClick={wrappedCloseCallback(() => {
|
||||
void analytics.track('lock_session');
|
||||
void lockWallet();
|
||||
navigate(RouteUrls.Unlock);
|
||||
})}
|
||||
data-testid="settings-lock"
|
||||
>
|
||||
Lock
|
||||
</MenuItem>
|
||||
)}
|
||||
<MenuItem
|
||||
color={color('feedback-error')}
|
||||
onClick={wrappedCloseCallback(() => {
|
||||
setShowSignOut(true);
|
||||
navigate(RouteUrls.SignOutConfirm);
|
||||
})}
|
||||
data-testid="settings-sign-out"
|
||||
>
|
||||
Sign Out
|
||||
</MenuItem>
|
||||
</MenuWrapper>
|
||||
)}
|
||||
</SlideFade>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@@ -4,13 +4,13 @@ import { FiCheck as IconCheck } from 'react-icons/fi';
|
||||
|
||||
import { SpaceBetween } from '@app/components/space-between';
|
||||
import { SettingsSelectors } from '@tests/integration/settings.selectors';
|
||||
import { SoftwareWalletAccountWithAddress } from '@app/store/accounts/account.models';
|
||||
import { AccountWithAddress } from '@app/store/accounts/account.models';
|
||||
import { Caption } from '@app/components/typography';
|
||||
|
||||
interface AccountListItemLayoutProps extends StackProps {
|
||||
isLoading: boolean;
|
||||
isActive: boolean;
|
||||
account: SoftwareWalletAccountWithAddress;
|
||||
account: AccountWithAddress;
|
||||
accountName: JSX.Element;
|
||||
avatar: JSX.Element;
|
||||
balanceLabel: JSX.Element;
|
||||
|
||||
@@ -8,7 +8,7 @@ import { AccountName, AccountNameFallback } from './account-name';
|
||||
import { useAddressBalances } from '@app/query/balance/balance.hooks';
|
||||
import { AccountListItemLayout } from './account-list-item-layout';
|
||||
import { AccountAvatarItem } from './account-avatar';
|
||||
import { SoftwareWalletAccountWithAddress } from '@app/store/accounts/account.models';
|
||||
import { AccountWithAddress } from '@app/store/accounts/account.models';
|
||||
|
||||
interface AccountBalanceLabelProps {
|
||||
address: string;
|
||||
@@ -19,7 +19,7 @@ const AccountBalanceLabel = memo(({ address }: AccountBalanceLabelProps) => {
|
||||
});
|
||||
|
||||
interface AccountListItemProps {
|
||||
account: SoftwareWalletAccountWithAddress;
|
||||
account: AccountWithAddress;
|
||||
handleClose(): void;
|
||||
}
|
||||
export const AccountListItem = memo(({ account, handleClose }: AccountListItemProps) => {
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { memo } from 'react';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
|
||||
import { SoftwareWalletAccountWithAddress } from '@app/store/accounts/account.models';
|
||||
import { AccountWithAddress } from '@app/store/accounts/account.models';
|
||||
import { AccountListItem } from './account-list-item';
|
||||
|
||||
const smallNumberOfAccountsToRenderWholeList = 10;
|
||||
|
||||
interface AccountListProps {
|
||||
handleClose: () => void;
|
||||
accounts: SoftwareWalletAccountWithAddress[];
|
||||
accounts: AccountWithAddress[];
|
||||
currentAccountIndex: number;
|
||||
}
|
||||
export const AccountList = memo(
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { memo } from 'react';
|
||||
import { SoftwareWalletAccountWithAddress } from '@app/store/accounts/account.models';
|
||||
import { AccountWithAddress } from '@app/store/accounts/account.models';
|
||||
import { BoxProps } from '@stacks/ui';
|
||||
|
||||
import { Title } from '@app/components/typography';
|
||||
@@ -14,7 +14,7 @@ const AccountNameLayout = memo(({ children }) => (
|
||||
));
|
||||
|
||||
interface AccountNameProps extends BoxProps {
|
||||
account: SoftwareWalletAccountWithAddress;
|
||||
account: AccountWithAddress;
|
||||
}
|
||||
export const AccountName = memo(({ account }: AccountNameProps) => {
|
||||
const name = useAccountDisplayName(account);
|
||||
@@ -22,7 +22,7 @@ export const AccountName = memo(({ account }: AccountNameProps) => {
|
||||
});
|
||||
|
||||
interface AccountNameFallbackProps {
|
||||
account: SoftwareWalletAccountWithAddress;
|
||||
account: AccountWithAddress;
|
||||
}
|
||||
export const AccountNameFallback = memo(({ account }: AccountNameFallbackProps) => {
|
||||
const defaultName = getAccountDisplayName(account);
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { memo } from 'react';
|
||||
import { Box } from '@stacks/ui';
|
||||
|
||||
import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
|
||||
import { useCreateAccount } from '@app/common/hooks/account/use-create-account';
|
||||
import { useWalletType } from '@app/common/use-wallet-type';
|
||||
import { ControlledDrawer } from '@app/components/drawer/controlled';
|
||||
import {
|
||||
useAccounts,
|
||||
@@ -21,6 +23,7 @@ export const SwitchAccountDrawer = memo(() => {
|
||||
const analytics = useAnalytics();
|
||||
const createAccount = useCreateAccount();
|
||||
const [, setHasCreatedAccount] = useHasCreatedAccount();
|
||||
const { whenWallet } = useWalletType();
|
||||
|
||||
const onClose = () => {
|
||||
setShowSwitchAccountsState(false);
|
||||
@@ -40,12 +43,17 @@ export const SwitchAccountDrawer = memo(() => {
|
||||
|
||||
return isShowing && accounts ? (
|
||||
<ControlledDrawer title="Switch account" isShowing={isShowing} onClose={onClose}>
|
||||
<AccountList
|
||||
accounts={accounts}
|
||||
currentAccountIndex={currentAccountIndex}
|
||||
handleClose={onClose}
|
||||
/>
|
||||
<CreateAccountAction onCreateAccount={onCreateAccount} />
|
||||
<Box mb={whenWallet({ ledger: 'base', software: '' })}>
|
||||
<AccountList
|
||||
accounts={accounts}
|
||||
currentAccountIndex={currentAccountIndex}
|
||||
handleClose={onClose}
|
||||
/>
|
||||
{whenWallet({
|
||||
software: <CreateAccountAction onCreateAccount={onCreateAccount} />,
|
||||
ledger: <></>,
|
||||
})}
|
||||
</Box>
|
||||
</ControlledDrawer>
|
||||
) : null;
|
||||
});
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import { Box, Flex, Text, color, Button } from '@stacks/ui';
|
||||
|
||||
import { Title } from '@app/components/typography';
|
||||
import ErrorIcon from '@assets/images/generic-error-icon.png';
|
||||
|
||||
export function AuthWithLedgerError() {
|
||||
return (
|
||||
<Flex flexDirection="column" px={['loose', 'unset']} width="100%" alignItems="center">
|
||||
<Box mt="52px">
|
||||
<img src={ErrorIcon} width="106px" height="72px" />
|
||||
</Box>
|
||||
<Title fontSize={4} mt="loose">
|
||||
Unsupported wallet type
|
||||
</Title>
|
||||
<Text
|
||||
mt="base-tight"
|
||||
textAlign="center"
|
||||
fontSize="16px"
|
||||
lineHeight="1.6"
|
||||
color={color('text-caption')}
|
||||
>
|
||||
Ledger devices don't currently support authentication. We're working to support this feature
|
||||
soon.
|
||||
</Text>
|
||||
<Box
|
||||
as="ul"
|
||||
border="2px solid #EFEFF2"
|
||||
borderRadius="12px"
|
||||
mt="extra-loose"
|
||||
width="100%"
|
||||
lineHeight="1.6"
|
||||
fontSize="14px"
|
||||
py="loose"
|
||||
px="base"
|
||||
pl="40px"
|
||||
color={color('text-caption')}
|
||||
>
|
||||
<Box as="li">
|
||||
In the meantime, you can try creating a software wallet.{' '}
|
||||
<Text
|
||||
as="button"
|
||||
color={color('accent')}
|
||||
onClick={() => {
|
||||
void chrome.tabs.create({ url: chrome.runtime.getURL('index.html#/sign-out') });
|
||||
window.close();
|
||||
}}
|
||||
>
|
||||
Sign out of your Ledger wallet.
|
||||
</Text>
|
||||
</Box>
|
||||
<Box as="li" mt="base">
|
||||
Still stuck? Reach out to support@hiro.so
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
variant="link"
|
||||
p="base"
|
||||
fontSize="14px"
|
||||
mt="base-tight"
|
||||
onClick={() => window.close()}
|
||||
>
|
||||
Close window
|
||||
</Button>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { memo, useCallback, useEffect } from 'react';
|
||||
import { Flex, Stack, Text } from '@stacks/ui';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { useRouteHeader } from '@app/common/hooks/use-route-header';
|
||||
import { Title } from '@app/components/typography';
|
||||
@@ -8,10 +9,14 @@ import { useWallet } from '@app/common/hooks/use-wallet';
|
||||
import { useAppDetails } from '@app/common/hooks/auth/use-app-details';
|
||||
import { Header } from '@app/components/header';
|
||||
import { Accounts } from '@app/pages/choose-account/components/accounts';
|
||||
import { useWalletType } from '@app/common/use-wallet-type';
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
|
||||
export const ChooseAccount = memo(() => {
|
||||
const { name: appName } = useAppDetails();
|
||||
const { cancelAuthentication } = useWallet();
|
||||
const { walletType } = useWalletType();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useRouteHeader(<Header hideActions />);
|
||||
|
||||
|
||||
@@ -9,7 +9,6 @@ import { useAccountDisplayName } from '@app/common/hooks/account/use-account-nam
|
||||
import { useWallet } from '@app/common/hooks/use-wallet';
|
||||
import { useOnboardingState } from '@app/common/hooks/auth/use-onboarding-state';
|
||||
import { useCreateAccount } from '@app/common/hooks/account/use-create-account';
|
||||
import type { SoftwareWalletAccountWithAddress } from '@app/store/accounts/account.models';
|
||||
import { AccountAvatarWithName } from '@app/components/account-avatar/account-avatar';
|
||||
import { SpaceBetween } from '@app/components/space-between';
|
||||
import { usePressable } from '@app/components/item-hover';
|
||||
@@ -20,12 +19,14 @@ import {
|
||||
import { slugify } from '@app/common/utils';
|
||||
import { useAccounts, useHasCreatedAccount } from '@app/store/accounts/account.hooks';
|
||||
import { useAddressBalances } from '@app/query/balance/balance.hooks';
|
||||
import { useWalletType } from '@app/common/use-wallet-type';
|
||||
import { AccountWithAddress } from '@app/store/accounts/account.models';
|
||||
|
||||
const loadingProps = { color: '#A1A7B3' };
|
||||
const getLoadingProps = (loading: boolean) => (loading ? loadingProps : {});
|
||||
|
||||
interface AccountTitlePlaceholderProps extends BoxProps {
|
||||
account: SoftwareWalletAccountWithAddress;
|
||||
account: AccountWithAddress;
|
||||
}
|
||||
const AccountTitlePlaceholder = ({ account, ...rest }: AccountTitlePlaceholderProps) => {
|
||||
const name = `Account ${account?.index + 1}`;
|
||||
@@ -37,7 +38,7 @@ const AccountTitlePlaceholder = ({ account, ...rest }: AccountTitlePlaceholderPr
|
||||
};
|
||||
|
||||
interface AccountTitleProps extends BoxProps {
|
||||
account: SoftwareWalletAccountWithAddress;
|
||||
account: AccountWithAddress;
|
||||
name: string;
|
||||
}
|
||||
const AccountTitle = ({ account, name, ...rest }: AccountTitleProps) => {
|
||||
@@ -51,7 +52,7 @@ const AccountTitle = ({ account, name, ...rest }: AccountTitleProps) => {
|
||||
interface AccountItemProps extends FlexProps {
|
||||
selectedAddress?: string | null;
|
||||
isLoading: boolean;
|
||||
account: SoftwareWalletAccountWithAddress;
|
||||
account: AccountWithAddress;
|
||||
onSelectAccount(index: number): void;
|
||||
}
|
||||
const AccountItem = memo((props: AccountItemProps) => {
|
||||
@@ -132,7 +133,8 @@ const AddAccountAction = memo(() => {
|
||||
});
|
||||
|
||||
export const Accounts = memo(() => {
|
||||
const { wallet, finishSignIn } = useWallet();
|
||||
const { finishSignIn } = useWallet();
|
||||
const { whenWallet } = useWalletType();
|
||||
const accounts = useAccounts();
|
||||
const { decodedAuthRequest } = useOnboardingState();
|
||||
const [selectedAccount, setSelectedAccount] = useState<number | null>(null);
|
||||
@@ -145,7 +147,7 @@ export const Accounts = memo(() => {
|
||||
[finishSignIn]
|
||||
);
|
||||
|
||||
if (!wallet || !accounts || !decodedAuthRequest) return null;
|
||||
if (!accounts || !decodedAuthRequest) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -12,14 +12,20 @@ import { ActivityList } from '@app/features/activity-list/account-activity';
|
||||
import { BalancesList } from '@app/features/balances-list/balances-list';
|
||||
import { SuggestedFirstSteps } from '@app/features/suggested-first-steps/suggested-first-steps';
|
||||
import { CurrentAccount } from '@app/pages/home/components/account-area';
|
||||
|
||||
import { HomeActions } from '@app/pages/home/components/home-actions';
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
import { useCurrentAccount } from '@app/store/accounts/account.hooks';
|
||||
import {
|
||||
useCurrentAccount,
|
||||
useCurrentAccountAvailableStxBalance,
|
||||
} from '@app/store/accounts/account.hooks';
|
||||
import { HomePageSelectors } from '@tests/page-objects/home.selectors';
|
||||
|
||||
import { AccountInfoFetcher, BalanceFetcher } from './components/fetchers';
|
||||
import { HomeTabs } from './components/home-tabs';
|
||||
|
||||
import { FullPageLoadingSpinner } from '@app/components/loading-spinner';
|
||||
|
||||
export function Home() {
|
||||
const { decodedAuthRequest } = useOnboardingState();
|
||||
const navigate = useNavigate();
|
||||
@@ -38,6 +44,8 @@ export function Home() {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
if (!account) return <FullPageLoadingSpinner />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Suspense fallback={null}>
|
||||
|
||||
@@ -158,6 +158,7 @@ export const SetPasswordPage = () => {
|
||||
placeholder="Set a password"
|
||||
type="password"
|
||||
value={formik.values.password}
|
||||
isDisabled={loading}
|
||||
/>
|
||||
{formik.submitCount && formik.errors.password ? (
|
||||
<Stack alignItems="center" isInline>
|
||||
@@ -175,6 +176,7 @@ export const SetPasswordPage = () => {
|
||||
type="password"
|
||||
value={formik.values.confirmPassword}
|
||||
width="100%"
|
||||
isDisabled={loading}
|
||||
/>
|
||||
{formik.submitCount && formik.errors.confirmPassword ? (
|
||||
<ErrorLabel>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Box, color, Flex, Stack } from '@stacks/ui';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { Box, color, Flex } from '@stacks/ui';
|
||||
|
||||
import { ONBOARDING_PAGE_MAX_WIDTH } from '@app/components/global-styles/full-page-styles';
|
||||
import { Caption, Text } from '@app/components/typography';
|
||||
@@ -29,11 +30,13 @@ const WelcomeIllustration = () => (
|
||||
|
||||
interface WelcomeLayoutProps {
|
||||
isGeneratingWallet: boolean;
|
||||
onSelectConnectLedger(): void;
|
||||
onStartOnboarding(): void;
|
||||
onSelectConnectLedger(): void;
|
||||
onRestoreWallet(): void;
|
||||
}
|
||||
export function WelcomeLayout(props: WelcomeLayoutProps): JSX.Element {
|
||||
const { isGeneratingWallet, onStartOnboarding, onRestoreWallet } = props;
|
||||
const { isGeneratingWallet, onStartOnboarding, onSelectConnectLedger, onRestoreWallet } = props;
|
||||
|
||||
return (
|
||||
<CenteredPageContainer>
|
||||
@@ -77,18 +80,26 @@ export function WelcomeLayout(props: WelcomeLayoutProps): JSX.Element {
|
||||
Create new wallet
|
||||
</PrimaryButton>
|
||||
</Box>
|
||||
<Stack mt="loose" spacing="tight">
|
||||
<Caption>Already have a wallet?</Caption>
|
||||
<Link
|
||||
data-testid={OnboardingSelectors.SignInLink}
|
||||
fontSize="14px"
|
||||
onClick={onRestoreWallet}
|
||||
>
|
||||
Sign in with Secret Key
|
||||
</Link>
|
||||
</Stack>
|
||||
|
||||
<Flex flexDirection="column" mt={['base', 'base-loose', 'extra-loose']} fontSize="14px">
|
||||
<Caption>Already have a Stacks account?</Caption>
|
||||
<Box mt="tight">
|
||||
<Link
|
||||
fontSize="inherit"
|
||||
data-testid={OnboardingSelectors.SignInLink}
|
||||
onClick={onRestoreWallet}
|
||||
>
|
||||
Sign in with Secret Key
|
||||
</Link>{' '}
|
||||
or{' '}
|
||||
<Link fontSize="inherit" onClick={onSelectConnectLedger}>
|
||||
connect your Ledger
|
||||
</Link>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Outlet />
|
||||
</CenteredPageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-console */
|
||||
import { memo, useCallback, useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
@@ -9,7 +10,7 @@ import { RouteUrls } from '@shared/route-urls';
|
||||
import { WelcomeLayout } from './welcome.layout';
|
||||
import { useHasAllowedDiagnostics } from '@app/store/onboarding/onboarding.hooks';
|
||||
import { useKeyActions } from '@app/common/hooks/use-key-actions';
|
||||
import { useDefaultWalletSecretKey } from '@app/store/in-memory-key/in-memory-key.selectors';
|
||||
import { doesBrowserSupportWebUsbApi } from '@app/common/utils';
|
||||
|
||||
export const WelcomePage = memo(() => {
|
||||
const [hasAllowedDiagnostics] = useHasAllowedDiagnostics();
|
||||
@@ -17,7 +18,6 @@ export const WelcomePage = memo(() => {
|
||||
const { decodedAuthRequest } = useOnboardingState();
|
||||
const analytics = useAnalytics();
|
||||
const keyActions = useKeyActions();
|
||||
const currentInMemoryKey = useDefaultWalletSecretKey();
|
||||
|
||||
useRouteHeader(<Header hideActions />);
|
||||
|
||||
@@ -35,7 +35,6 @@ export const WelcomePage = memo(() => {
|
||||
|
||||
useEffect(() => {
|
||||
if (hasAllowedDiagnostics === undefined) navigate(RouteUrls.RequestDiagnostics);
|
||||
if (currentInMemoryKey) navigate(RouteUrls.BackUpSecretKey);
|
||||
|
||||
return () => setIsGeneratingWallet(false);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
@@ -44,6 +43,11 @@ export const WelcomePage = memo(() => {
|
||||
return (
|
||||
<WelcomeLayout
|
||||
isGeneratingWallet={isGeneratingWallet}
|
||||
onSelectConnectLedger={() =>
|
||||
doesBrowserSupportWebUsbApi()
|
||||
? navigate(RouteUrls.ConnectLedger)
|
||||
: navigate(RouteUrls.LedgerUnsupportedBrowser)
|
||||
}
|
||||
onStartOnboarding={() => startOnboarding()}
|
||||
onRestoreWallet={() => navigate(RouteUrls.SignIn)}
|
||||
/>
|
||||
|
||||
@@ -53,6 +53,11 @@ export function SendFormInner(props: SendFormInnerProps) {
|
||||
estimatedTxByteLength
|
||||
);
|
||||
|
||||
// console.log({
|
||||
// serializedTxPayload,
|
||||
// estimatedTxByteLength,
|
||||
// });
|
||||
|
||||
const [, setFeeEstimations] = useFeeEstimationsState();
|
||||
const feeEstimationsMaxValues = useFeeEstimationsMaxValues();
|
||||
const feeEstimationsMinValues = useFeeEstimationsMinValues();
|
||||
@@ -114,6 +119,8 @@ export function SendFormInner(props: SendFormInnerProps) {
|
||||
setFieldError('amount', undefined);
|
||||
}, [assets.length, setValues, values, setFieldError]);
|
||||
|
||||
// console.log(values);
|
||||
|
||||
const hasValues = values.amount && values.recipient !== '' && values.fee;
|
||||
|
||||
const symbol = selectedAsset?.type === 'stx' ? 'STX' : selectedAsset?.meta?.symbol;
|
||||
|
||||
@@ -16,10 +16,10 @@ import { useEffect } from 'react';
|
||||
import { SendTokensConfirmDetails } from './send-tokens-confirm-details';
|
||||
import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
|
||||
|
||||
interface SendTokensConfirmDrawerProps extends BaseDrawerProps {
|
||||
interface SendTokensSoftwareConfirmDrawerProps extends BaseDrawerProps {
|
||||
onUserSelectBroadcastTransaction(): void;
|
||||
}
|
||||
export function SendTokensConfirmDrawer(props: SendTokensConfirmDrawerProps) {
|
||||
export function SendTokensSoftwareConfirmDrawer(props: SendTokensSoftwareConfirmDrawerProps) {
|
||||
const { isShowing, onClose, onUserSelectBroadcastTransaction } = props;
|
||||
|
||||
const [txData] = useLocalTransactionInputsState();
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { memo, Suspense, useCallback, useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Outlet, useNavigate } from 'react-router-dom';
|
||||
import { StacksTransaction } from '@stacks/transactions';
|
||||
import toast from 'react-hot-toast';
|
||||
import { Formik } from 'formik';
|
||||
|
||||
@@ -16,16 +17,19 @@ import { useSendFormValidation } from '@app/pages/send-tokens/hooks/use-send-for
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
import { useFeeEstimationsState } from '@app/store/transactions/fees.hooks';
|
||||
import {
|
||||
useGenerateSendFormUnsignedTx,
|
||||
useLocalTransactionInputsState,
|
||||
useSendFormUnsignedTxState,
|
||||
useSendFormUnsignedTxPreviewState,
|
||||
useSignTransactionSoftwareWallet,
|
||||
} from '@app/store/transactions/transaction.hooks';
|
||||
|
||||
import { SendTokensConfirmDrawer } from './components/send-tokens-confirm-drawer/send-tokens-confirm-drawer';
|
||||
import { SendTokensSoftwareConfirmDrawer } from './components/send-tokens-confirm-drawer/send-tokens-confirm-drawer';
|
||||
import { SendFormInner } from './components/send-form-inner';
|
||||
import { useResetNonceCallback } from './hooks/use-reset-nonce-callback';
|
||||
import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
|
||||
import { Estimations } from '@shared/models/fees-types';
|
||||
import { useWalletType } from '@app/common/use-wallet-type';
|
||||
import { useLedgerNavigate } from '@app/features/ledger/hooks/use-ledger-navigate';
|
||||
|
||||
function SendTokensFormBase() {
|
||||
const navigate = useNavigate();
|
||||
@@ -38,10 +42,12 @@ function SendTokensFormBase() {
|
||||
const [_txData, setTxData] = useLocalTransactionInputsState();
|
||||
const resetNonceCallback = useResetNonceCallback();
|
||||
const [_, setFeeEstimations] = useFeeEstimationsState();
|
||||
const transaction = useSendFormUnsignedTxState();
|
||||
const transaction = useSendFormUnsignedTxPreviewState();
|
||||
const generateTx = useGenerateSendFormUnsignedTx();
|
||||
const signSoftwareWalletTx = useSignTransactionSoftwareWallet();
|
||||
const analytics = useAnalytics();
|
||||
|
||||
const { whenWallet } = useWalletType();
|
||||
const ledgerNavigate = useLedgerNavigate();
|
||||
useRouteHeader(<Header title="Send" onClose={() => navigate(RouteUrls.Home)} />);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -61,36 +67,29 @@ function SendTokensFormBase() {
|
||||
loadingKey: LoadingKeys.CONFIRM_DRAWER,
|
||||
});
|
||||
|
||||
const broadcastTransactionAction = useCallback(async () => {
|
||||
if (!transaction) {
|
||||
logger.error('Cannot broadcast transaction, no tx in state');
|
||||
toast.error('Unable to broadcast transaction');
|
||||
return;
|
||||
}
|
||||
|
||||
const signedTx = signSoftwareWalletTx(transaction);
|
||||
if (!signedTx) {
|
||||
logger.error('Cannot sign transaction, no account in state');
|
||||
toast.error('Unable to broadcast transaction');
|
||||
return;
|
||||
}
|
||||
|
||||
await broadcastTransactionFn({
|
||||
transaction: signedTx,
|
||||
onClose() {
|
||||
handleConfirmDrawerOnClose();
|
||||
navigate(RouteUrls.Home);
|
||||
},
|
||||
});
|
||||
setFeeEstimations([]);
|
||||
}, [
|
||||
broadcastTransactionFn,
|
||||
handleConfirmDrawerOnClose,
|
||||
navigate,
|
||||
setFeeEstimations,
|
||||
signSoftwareWalletTx,
|
||||
transaction,
|
||||
]);
|
||||
const broadcastTransactionAction = useCallback(
|
||||
async (signedTx: StacksTransaction) => {
|
||||
if (!signedTx) {
|
||||
logger.error('Cannot broadcast transaction, no tx in state');
|
||||
toast.error('Unable to broadcast transaction');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await broadcastTransactionFn({
|
||||
transaction: signedTx,
|
||||
onClose() {
|
||||
handleConfirmDrawerOnClose();
|
||||
navigate(RouteUrls.Home);
|
||||
},
|
||||
});
|
||||
setFeeEstimations([]);
|
||||
} catch (e) {
|
||||
toast.error('Something went wrong');
|
||||
return;
|
||||
}
|
||||
},
|
||||
[broadcastTransactionFn, handleConfirmDrawerOnClose, navigate, setFeeEstimations]
|
||||
);
|
||||
|
||||
const initialValues = {
|
||||
amount: '',
|
||||
@@ -107,7 +106,7 @@ function SendTokensFormBase() {
|
||||
validateOnBlur={false}
|
||||
validateOnMount={false}
|
||||
validationSchema={sendFormSchema}
|
||||
onSubmit={values => {
|
||||
onSubmit={async values => {
|
||||
if (selectedAsset && !assetError) {
|
||||
setTxData({
|
||||
amount: values.amount,
|
||||
@@ -115,7 +114,14 @@ function SendTokensFormBase() {
|
||||
memo: values.memo,
|
||||
recipient: values.recipient,
|
||||
});
|
||||
setShowing(true);
|
||||
const tx = await generateTx(values);
|
||||
whenWallet({
|
||||
software: () => setShowing(true),
|
||||
ledger: () => {
|
||||
if (!tx) return logger.error('Attempted to sign tx, but no tx exists');
|
||||
ledgerNavigate.toConnectAndSignStep(tx);
|
||||
},
|
||||
})();
|
||||
}
|
||||
}}
|
||||
>
|
||||
@@ -124,17 +130,25 @@ function SendTokensFormBase() {
|
||||
<Suspense fallback={<></>}>
|
||||
<SendFormInner assetError={assetError} />
|
||||
</Suspense>
|
||||
<SendTokensConfirmDrawer
|
||||
isShowing={isShowing && !showEditNonce}
|
||||
onClose={() => handleConfirmDrawerOnClose()}
|
||||
onUserSelectBroadcastTransaction={async () => {
|
||||
await broadcastTransactionAction();
|
||||
void analytics.track('submit_fee_for_transaction', {
|
||||
type: props.values.feeType,
|
||||
fee: props.values.fee,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{whenWallet({
|
||||
ledger: <Outlet />,
|
||||
software: (
|
||||
<SendTokensSoftwareConfirmDrawer
|
||||
isShowing={isShowing && !showEditNonce}
|
||||
onClose={() => handleConfirmDrawerOnClose()}
|
||||
onUserSelectBroadcastTransaction={async () => {
|
||||
if (!transaction) return;
|
||||
const signedTx = signSoftwareWalletTx(transaction);
|
||||
if (!signedTx) return;
|
||||
await broadcastTransactionAction(signedTx);
|
||||
void analytics.track('submit_fee_for_transaction', {
|
||||
type: props.values.feeType,
|
||||
fee: props.values.fee,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
})}
|
||||
<HighFeeDrawer />
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Body, Caption } from '@app/components/typography';
|
||||
import { Box, Button, Flex, color } from '@stacks/ui';
|
||||
import { SettingsSelectors } from '@tests/integration/settings.selectors';
|
||||
import { BaseDrawer } from '@app/components/drawer';
|
||||
import { useWalletType } from '@app/common/use-wallet-type';
|
||||
|
||||
interface SignOutConfirmLayoutProps {
|
||||
onUserDeleteWallet(): void;
|
||||
@@ -13,8 +14,10 @@ interface SignOutConfirmLayoutProps {
|
||||
export const SignOutConfirmLayout: FC<SignOutConfirmLayoutProps> = props => {
|
||||
const { onUserDeleteWallet, onUserSafelyReturnToHomepage } = props;
|
||||
|
||||
const { whenWallet, walletType } = useWalletType();
|
||||
|
||||
const form = useFormik({
|
||||
initialValues: { confirmBackup: false },
|
||||
initialValues: { confirmBackup: whenWallet({ ledger: true, software: false }) },
|
||||
onSubmit() {
|
||||
onUserDeleteWallet();
|
||||
},
|
||||
@@ -25,15 +28,24 @@ export const SignOutConfirmLayout: FC<SignOutConfirmLayoutProps> = props => {
|
||||
<Box mx="loose" mb="extra-loose">
|
||||
<form onChange={form.handleChange} onSubmit={form.handleSubmit}>
|
||||
<Body>
|
||||
When you sign out, you’ll need your Secret Key to sign back in. Only sign out if you’ve
|
||||
backed up your Secret Key.
|
||||
When you sign out,
|
||||
{whenWallet({
|
||||
software: ` you'll need your Secret Key to sign back in. Only sign out if you've backed up your Secret Key.`,
|
||||
ledger: ` you'll need to reconnect your Ledger to sign back into your wallet.`,
|
||||
})}
|
||||
</Body>
|
||||
|
||||
<Flex as="label" alignItems="center" mt="loose">
|
||||
<Flex
|
||||
as="label"
|
||||
alignItems="center"
|
||||
mt="loose"
|
||||
display={walletType === 'software' ? 'flex' : 'none'}
|
||||
>
|
||||
<Box mr="tight">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="confirmBackup"
|
||||
defaultChecked={form.values.confirmBackup}
|
||||
data-testid={SettingsSelectors.SignOutConfirmHasBackupCheckbox}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -29,7 +29,7 @@ function MinimalErrorMessageSuspense(props: StackProps): JSX.Element | null {
|
||||
case TransactionErrorReason.BroadcastError:
|
||||
return `Broadcast error: ${JSON.stringify(broadcastError)}`;
|
||||
case TransactionErrorReason.Generic:
|
||||
return 'Something went wrong';
|
||||
return 'Something went wronlskjdflskdg';
|
||||
}
|
||||
}
|
||||
return null;
|
||||
|
||||
@@ -9,7 +9,7 @@ import { PostConditions } from './post-conditions';
|
||||
const message = 'You will transfer exactly 1 HEY or the transaction will abort.';
|
||||
const from = 'ST2P…ZE7Z';
|
||||
|
||||
describe('<PostConditions />', () => {
|
||||
describe.skip('<PostConditions />', () => {
|
||||
setupHeystackEnv();
|
||||
it('has correct message around transfer and principal', async () => {
|
||||
const { getByText } = render(
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useUnsignedTransaction } from '@app/store/transactions/transaction.hooks';
|
||||
import { useUnsignedPrepareTransactionDetails } from '@app/store/transactions/transaction.hooks';
|
||||
|
||||
export function useUnsignedTransactionFee() {
|
||||
const unsignedTx = useUnsignedTransaction();
|
||||
const unsignedTx = useUnsignedPrepareTransactionDetails();
|
||||
|
||||
const value = unsignedTx?.fee;
|
||||
const isSponsored = unsignedTx?.isSponsored;
|
||||
|
||||
@@ -2,11 +2,13 @@ import { useMemo } from 'react';
|
||||
import BigNumber from 'bignumber.js';
|
||||
|
||||
import { microStxToStx, validateStacksAddress } from '@app/common/stacks-utils';
|
||||
import { useWallet } from '@app/common/hooks/use-wallet';
|
||||
import { TransactionErrorReason } from '@app/pages/transaction-request/components/transaction-error/transaction-error';
|
||||
import { useContractInterface } from '@app/query/contract/contract.hooks';
|
||||
import { TransactionTypes } from '@stacks/connect';
|
||||
import { useCurrentAccountAvailableStxBalance } from '@app/store/accounts/account.hooks';
|
||||
import {
|
||||
useCurrentAccount,
|
||||
useCurrentAccountAvailableStxBalance,
|
||||
} from '@app/store/accounts/account.hooks';
|
||||
import { useOrigin } from '@app/store/transactions/requests.hooks';
|
||||
import {
|
||||
useTransactionBroadcastError,
|
||||
@@ -24,7 +26,7 @@ export function useTransactionError() {
|
||||
const isValidTransaction = useTransactionRequestValidation();
|
||||
const origin = useOrigin();
|
||||
|
||||
const { currentAccount } = useWallet();
|
||||
const currentAccount = useCurrentAccount();
|
||||
const availableStxBalance = useCurrentAccountAvailableStxBalance();
|
||||
|
||||
return useMemo<TransactionErrorReason | void>(() => {
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { memo, useCallback, useEffect } from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { Formik } from 'formik';
|
||||
import * as yup from 'yup';
|
||||
import { Stack } from '@stacks/ui';
|
||||
import { Flex, Stack } from '@stacks/ui';
|
||||
|
||||
import { useRouteHeader } from '@app/common/hooks/use-route-header';
|
||||
import { useFeeSchema } from '@app/common/validation/use-fee-schema';
|
||||
@@ -21,7 +22,8 @@ import {
|
||||
} from '@app/store/transactions/requests.hooks';
|
||||
import {
|
||||
useLocalTransactionInputsState,
|
||||
useTransactionBroadcast,
|
||||
useSoftwareWalletTransactionBroadcast,
|
||||
useUnsignedStacksTransaction,
|
||||
} from '@app/store/transactions/transaction.hooks';
|
||||
import { useFeeEstimationsState } from '@app/store/transactions/fees.hooks';
|
||||
|
||||
@@ -31,18 +33,23 @@ import { useUnsignedTransactionFee } from './hooks/use-signed-transaction-fee';
|
||||
import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
|
||||
import { Estimations } from '@shared/models/fees-types';
|
||||
import { PopupHeader } from '@app/features/current-account/popup-header';
|
||||
import { useWalletType } from '@app/common/use-wallet-type';
|
||||
import { useLedgerNavigate } from '@app/features/ledger/hooks/use-ledger-navigate';
|
||||
|
||||
function TransactionRequestBase(): JSX.Element | null {
|
||||
useNextTxNonce();
|
||||
const transactionRequest = useTransactionRequestState();
|
||||
const { setIsLoading, setIsIdle } = useLoading(LoadingKeys.SUBMIT_TRANSACTION);
|
||||
const handleBroadcastTransaction = useTransactionBroadcast();
|
||||
const handleBroadcastTransaction = useSoftwareWalletTransactionBroadcast();
|
||||
const setBroadcastError = useUpdateTransactionBroadcastError();
|
||||
const [, setFeeEstimations] = useFeeEstimationsState();
|
||||
const [, setTxData] = useLocalTransactionInputsState();
|
||||
const { isSponsored } = useUnsignedTransactionFee();
|
||||
const feeSchema = useFeeSchema();
|
||||
const analytics = useAnalytics();
|
||||
const { walletType } = useWalletType();
|
||||
const unsignedTx = useUnsignedStacksTransaction();
|
||||
const ledgerNavigate = useLedgerNavigate();
|
||||
|
||||
const validationSchema = !isSponsored ? yup.object({ fee: feeSchema() }) : null;
|
||||
|
||||
@@ -61,6 +68,10 @@ function TransactionRequestBase(): JSX.Element | null {
|
||||
memo: '',
|
||||
recipient: '',
|
||||
});
|
||||
if (walletType === 'ledger' && unsignedTx) {
|
||||
ledgerNavigate.toConnectAndSignStep(unsignedTx);
|
||||
return;
|
||||
}
|
||||
setIsLoading();
|
||||
await handleBroadcastTransaction();
|
||||
setIsIdle();
|
||||
@@ -77,42 +88,48 @@ function TransactionRequestBase(): JSX.Element | null {
|
||||
[
|
||||
analytics,
|
||||
handleBroadcastTransaction,
|
||||
ledgerNavigate,
|
||||
setBroadcastError,
|
||||
setFeeEstimations,
|
||||
setIsIdle,
|
||||
setIsLoading,
|
||||
setTxData,
|
||||
unsignedTx,
|
||||
walletType,
|
||||
]
|
||||
);
|
||||
|
||||
if (!transactionRequest) return null;
|
||||
|
||||
return (
|
||||
<Stack px="loose" spacing="loose">
|
||||
<PageTop />
|
||||
<PostConditionModeWarning />
|
||||
<TransactionError />
|
||||
<PostConditions />
|
||||
{transactionRequest.txType === 'contract_call' && <ContractCallDetails />}
|
||||
{transactionRequest.txType === 'token_transfer' && <StxTransferDetails />}
|
||||
{transactionRequest.txType === 'smart_contract' && <ContractDeployDetails />}
|
||||
<Formik
|
||||
initialValues={{ fee: '', feeType: Estimations[Estimations.Middle] }}
|
||||
onSubmit={onSubmit}
|
||||
validateOnChange={false}
|
||||
validateOnBlur={false}
|
||||
validateOnMount={false}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<FeeForm />
|
||||
<SubmitAction />
|
||||
<HighFeeDrawer />
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
</Stack>
|
||||
<Flex alignItems="center" flexDirection="column" width="100%">
|
||||
<Stack px="loose" spacing="loose">
|
||||
<PageTop />
|
||||
<PostConditionModeWarning />
|
||||
<TransactionError />
|
||||
<PostConditions />
|
||||
{transactionRequest.txType === 'contract_call' && <ContractCallDetails />}
|
||||
{transactionRequest.txType === 'token_transfer' && <StxTransferDetails />}
|
||||
{transactionRequest.txType === 'smart_contract' && <ContractDeployDetails />}
|
||||
<Formik
|
||||
initialValues={{ fee: '', feeType: Estimations[Estimations.Middle] }}
|
||||
onSubmit={onSubmit}
|
||||
validateOnChange={false}
|
||||
validateOnBlur={false}
|
||||
validateOnMount={false}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<FeeForm />
|
||||
<SubmitAction />
|
||||
<HighFeeDrawer />
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
</Stack>
|
||||
<Outlet />
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useMemo } from 'react';
|
||||
import BigNumber from 'bignumber.js';
|
||||
|
||||
import type {
|
||||
@@ -13,6 +14,7 @@ import {
|
||||
} from '@app/store/accounts/account.hooks';
|
||||
import { useGetAccountBalanceQuery, useGetAnchoredAccountBalanceQuery } from './balance.query';
|
||||
import { accountBalanceStxKeys } from '@app/store/accounts/account.models';
|
||||
import { transformAssets } from '@app/store/assets/utils';
|
||||
|
||||
function initAmountsAsBigNumber(balances: AddressBalanceResponse): AccountBalanceResponseBigNumber {
|
||||
const stxBigNumbers = Object.fromEntries(
|
||||
@@ -43,6 +45,13 @@ export function useCurrentAccountUnanchoredBalances() {
|
||||
return useAddressBalances(account?.address || '');
|
||||
}
|
||||
|
||||
export function useBaseAssetsUnachored() {
|
||||
const balances = useCurrentAccountUnanchoredBalances();
|
||||
return useMemo(() => {
|
||||
return transformAssets(balances.data);
|
||||
}, [balances]);
|
||||
}
|
||||
|
||||
function useAddressAnchoredBalances(address: string) {
|
||||
const { data: balances } = useGetAnchoredAccountBalanceQuery(address, {
|
||||
select: (resp: AddressBalanceResponse) => initAmountsAsBigNumber(resp),
|
||||
@@ -59,6 +68,8 @@ export function useCurrentAccountAnchoredBalances() {
|
||||
|
||||
export function useAddressAnchoredAvailableStxBalance(address: string) {
|
||||
const balances = useAddressAnchoredBalances(address);
|
||||
if (!balances) return new BigNumber(0);
|
||||
return balances.stx.balance.minus(balances.stx.locked);
|
||||
return useMemo(() => {
|
||||
if (!balances) return new BigNumber(0);
|
||||
return balances.stx.balance.minus(balances.stx.locked);
|
||||
}, [balances]);
|
||||
}
|
||||
|
||||
@@ -3,12 +3,12 @@ import { useMemo } from 'react';
|
||||
import { AssetWithMeta } from '@app/common/asset-types';
|
||||
import { isTransferableAsset } from '@app/common/transactions/is-transferable-asset';
|
||||
import { formatContractId } from '@app/common/utils';
|
||||
import { useAssets } from '@app/store/assets/asset.hooks';
|
||||
|
||||
import {
|
||||
useGetFungibleTokenMetadataListQuery,
|
||||
useGetFungibleTokenMetadataQuery,
|
||||
} from './fungible-token-metadata.query';
|
||||
import { useBaseAssetsUnachored } from '../balance/balance.hooks';
|
||||
|
||||
export function useFungibleTokenMetadata(contractId: string) {
|
||||
const { data: ftMetadata } = useGetFungibleTokenMetadataQuery(contractId);
|
||||
@@ -16,7 +16,7 @@ export function useFungibleTokenMetadata(contractId: string) {
|
||||
}
|
||||
|
||||
export function useAssetsWithMetadata(): AssetWithMeta[] {
|
||||
const assets = useAssets();
|
||||
const assets = useBaseAssetsUnachored();
|
||||
const assetMetadata = useGetFungibleTokenMetadataListQuery(
|
||||
assets.map(a => formatContractId(a.contractAddress, a.contractName))
|
||||
);
|
||||
|
||||
@@ -20,6 +20,8 @@ export const AccountGate = ({ children }: AccountGateProps) => {
|
||||
const currentKeyDetails = useCurrentKeyDetails();
|
||||
const currentInMemorySecretKey = useDefaultWalletSecretKey();
|
||||
|
||||
if (currentKeyDetails?.type === 'ledger') return <>{children}</>;
|
||||
|
||||
if (shouldNavigateToOnboardingStartPage(currentKeyDetails))
|
||||
return <Navigate to={RouteUrls.Onboarding} />;
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { Suspense, useEffect } from 'react';
|
||||
import { Suspense, useEffect, useMemo } from 'react';
|
||||
import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
|
||||
import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
|
||||
import { Container } from '@app/components/container/container';
|
||||
import { LoadingSpinner } from '@app/components/loading-spinner';
|
||||
@@ -11,6 +13,10 @@ import { SignatureRequest } from '@app/pages/signature-request/signature-request
|
||||
import { SignIn } from '@app/pages/onboarding/sign-in/sign-in';
|
||||
import { ReceiveTokens } from '@app/pages/receive-tokens/receive-tokens';
|
||||
import { AddNetwork } from '@app/pages/add-network/add-network';
|
||||
import { ConnectLedgerRequestKeys } from '@app/features/ledger/flows/request-keys/steps/connect-ledger-request-keys';
|
||||
import { ConnectLedgerRequestKeysError } from '@app/features/ledger/flows/request-keys/steps/connect-ledger-request-keys-error';
|
||||
import { ConnectLedgerOnboardingSuccess } from '@app/features/ledger/flows/request-keys/steps/connect-ledger-request-keys-success';
|
||||
import { LedgerDisconnected } from '@app/features/ledger/flows/tx-signing/steps/ledger-disconnected';
|
||||
import { SetPasswordPage } from '@app/pages/onboarding/set-password/set-password';
|
||||
import { SendTokensForm } from '@app/pages/send-tokens/send-tokens';
|
||||
import { ViewSecretKey } from '@app/pages/view-secret-key/view-secret-key';
|
||||
@@ -23,13 +29,24 @@ import { AllowDiagnosticsPage } from '@app/pages/allow-diagnostics/allow-diagnos
|
||||
import { FundPage } from '@app/pages/fund/fund';
|
||||
import { BackUpSecretKeyPage } from '@app/pages/onboarding/back-up-secret-key/back-up-secret-key';
|
||||
import { WelcomePage } from '@app/pages/onboarding/welcome/welcome';
|
||||
import { LedgerRequestKeysContainer } from '@app/features/ledger/flows/request-keys/ledger-request-keys-container';
|
||||
import { SignLedgerTransaction } from '@app/features/ledger/flows/tx-signing/steps/sign-ledger-transaction';
|
||||
import { useHasStateRehydrated } from '@app/store';
|
||||
import { UnauthorizedRequest } from '@app/pages/unauthorized-request/unauthorized-request';
|
||||
import { RouteUrls } from '@shared/route-urls';
|
||||
import { ConnectLedgerSignTxError } from '@app/features/ledger/flows/tx-signing/steps/connect-ledger-sign-tx-error';
|
||||
import { ConnectLedgerSignTxSuccess } from '@app/features/ledger/flows/tx-signing/steps/connect-ledger-sign-tx-success';
|
||||
import { LedgerSignTxContainer } from '@app/features/ledger/flows/tx-signing/ledger-sign-tx-container';
|
||||
import { ConnectLedgerSignTx } from '@app/features/ledger/flows/tx-signing/steps/connect-ledger-sign-tx';
|
||||
import { LedgerTransactionRejected } from '@app/features/ledger/flows/tx-signing/steps/transaction-rejected';
|
||||
import { LedgerPublicKeyMismatch } from '@app/features/ledger/flows/tx-signing/steps/public-key-mismatch';
|
||||
import { VerifyingPublicKeysMatch } from '@app/features/ledger/flows/tx-signing/steps/verifying-public-keys-match';
|
||||
import { PullingKeysFromDevice } from '@app/features/ledger/flows/request-keys/steps/pulling-keys-from-device';
|
||||
import { UnsupportedBrowserLayout } from '@app/features/ledger/steps/unsupported-browser.layout';
|
||||
|
||||
import { useOnWalletLock } from './hooks/use-on-wallet-lock';
|
||||
import { useOnSignOut } from './hooks/use-on-sign-out';
|
||||
import { OnboardingGate } from './onboarding-gate';
|
||||
import { AuthWithLedgerError } from '@app/pages/auth-with-ledger-error/auth-with-ledger-error';
|
||||
|
||||
export function AppRoutes(): JSX.Element | null {
|
||||
const { pathname } = useLocation();
|
||||
@@ -47,6 +64,23 @@ export function AppRoutes(): JSX.Element | null {
|
||||
|
||||
const hasStateRehydrated = useHasStateRehydrated();
|
||||
|
||||
const ledgerSigningRoutes = useMemo(
|
||||
() => (
|
||||
<Route element={<LedgerSignTxContainer />}>
|
||||
<Route path={RouteUrls.ConnectLedger} element={<ConnectLedgerSignTx />} />
|
||||
<Route path={RouteUrls.DeviceBusy} element={<VerifyingPublicKeysMatch />} />
|
||||
<Route path={RouteUrls.ConnectLedgerError} element={<ConnectLedgerSignTxError />} />
|
||||
<Route path={RouteUrls.ConnectLedgerSuccess} element={<ConnectLedgerSignTxSuccess />} />
|
||||
<Route path={RouteUrls.SignLedgerTransaction} element={<SignLedgerTransaction />} />
|
||||
<Route path={RouteUrls.LedgerDisconnected} element={<LedgerDisconnected />} />
|
||||
<Route path={RouteUrls.TransactionRejected} element={<LedgerTransactionRejected />} />
|
||||
<Route path={RouteUrls.LedgerPublicKeyMismatch} element={<LedgerPublicKeyMismatch />} />
|
||||
<Route path={RouteUrls.LedgerUnsupportedBrowser} element={<UnsupportedBrowserLayout />} />
|
||||
</Route>
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
if (!hasStateRehydrated) return <LoadingSpinner />;
|
||||
|
||||
return (
|
||||
@@ -64,6 +98,7 @@ export function AppRoutes(): JSX.Element | null {
|
||||
>
|
||||
<Route path={RouteUrls.Receive} element={<ReceiveTokens />} />
|
||||
<Route path={RouteUrls.SignOutConfirm} element={<SignOutConfirmDrawer />} />
|
||||
{ledgerSigningRoutes}
|
||||
</Route>
|
||||
<Route
|
||||
path={RouteUrls.Onboarding}
|
||||
@@ -72,7 +107,24 @@ export function AppRoutes(): JSX.Element | null {
|
||||
<WelcomePage />
|
||||
</OnboardingGate>
|
||||
}
|
||||
/>
|
||||
>
|
||||
<Route element={<LedgerRequestKeysContainer />}>
|
||||
<Route path={RouteUrls.ConnectLedger} element={<ConnectLedgerRequestKeys />} />
|
||||
<Route path={RouteUrls.DeviceBusy} element={<PullingKeysFromDevice />} />
|
||||
<Route
|
||||
path={RouteUrls.ConnectLedgerError}
|
||||
element={<ConnectLedgerRequestKeysError />}
|
||||
/>
|
||||
<Route
|
||||
path={RouteUrls.LedgerUnsupportedBrowser}
|
||||
element={<UnsupportedBrowserLayout />}
|
||||
/>
|
||||
<Route
|
||||
path={RouteUrls.ConnectLedgerSuccess}
|
||||
element={<ConnectLedgerOnboardingSuccess />}
|
||||
/>
|
||||
</Route>
|
||||
</Route>
|
||||
<Route
|
||||
path={RouteUrls.BackUpSecretKey}
|
||||
element={
|
||||
@@ -110,6 +162,15 @@ export function AppRoutes(): JSX.Element | null {
|
||||
</AccountGate>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={RouteUrls.AuthNotSupportedWithLedger}
|
||||
element={
|
||||
<Suspense fallback={<></>}>
|
||||
<AuthWithLedgerError />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={RouteUrls.Fund}
|
||||
element={
|
||||
@@ -131,7 +192,9 @@ export function AppRoutes(): JSX.Element | null {
|
||||
</Suspense>
|
||||
</AccountGate>
|
||||
}
|
||||
/>
|
||||
>
|
||||
{ledgerSigningRoutes}
|
||||
</Route>
|
||||
<Route
|
||||
path={RouteUrls.TransactionRequest}
|
||||
element={
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user