From 4c3ef0389fd4f51f146238bc4f9c0f171452db7c Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 15 Apr 2024 10:43:03 +0100 Subject: [PATCH] chore: close ledger dialogs properly, notify user if no stacks accounts --- .../components/account-list-unavailable.tsx | 38 +++++++++---------- .../jwt-signing/ledger-sign-jwt-container.tsx | 2 +- .../ledger-stacks-sign-msg-container.tsx | 2 +- .../request-keys/request-keys-flow.tsx | 22 ++++------- .../tx-signing/tx-signing-flow.tsx | 27 ++++++------- .../pages/choose-account/choose-account.tsx | 12 +++++- .../choose-account/components/accounts.tsx | 9 ++--- .../rpc-sign-bip322-message.tsx | 16 +++++++- .../containers/headers/dialog-header.tsx | 18 +++++---- 9 files changed, 80 insertions(+), 66 deletions(-) diff --git a/src/app/features/dialogs/switch-account-dialog/components/account-list-unavailable.tsx b/src/app/features/dialogs/switch-account-dialog/components/account-list-unavailable.tsx index 5ced903f54d..5ad30bb5cf2 100644 --- a/src/app/features/dialogs/switch-account-dialog/components/account-list-unavailable.tsx +++ b/src/app/features/dialogs/switch-account-dialog/components/account-list-unavailable.tsx @@ -1,21 +1,21 @@ -import { memo } from 'react'; - import { Box, Flex, styled } from 'leather-styles/jsx'; -export const AccountListUnavailable = memo(() => ( - - - Unable to load account information - - We're unable to load information about your accounts. This may be a problem with the - wallet's API. If this problem persists, contact support. - - - -)); +export function AccountListUnavailable() { + return ( + + + Unable to load account information + + We're unable to load information about your accounts. This may be a problem with the + wallet's API. If this problem persists, contact support. + + + + ); +} diff --git a/src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx b/src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx index c08c1476c3c..2c0e8175257 100644 --- a/src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx +++ b/src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx @@ -185,7 +185,7 @@ export function LedgerSignJwtContainer() { } - onClose={isWaitingOnPerformedAction ? undefined : () => onCancelConnectLedger} + onClose={isWaitingOnPerformedAction ? undefined : () => onCancelConnectLedger()} > diff --git a/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx b/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx index 07a2ab00508..ca6276ab1af 100644 --- a/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx +++ b/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx @@ -156,7 +156,7 @@ function LedgerSignStacksMsg({ account, unsignedMessage }: LedgerSignMsgProps) { onGoBack={allowUserToGoBack ? () => navigate(-1) : undefined} isShowing header={} - onClose={isWaitingOnPerformedAction ? undefined : () => ledgerNavigate.cancelLedgerAction} + onClose={isWaitingOnPerformedAction ? undefined : () => ledgerNavigate.cancelLedgerAction()} > diff --git a/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx b/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx index 05ebb7e448e..e13fe7d1720 100644 --- a/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx +++ b/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx @@ -1,37 +1,29 @@ -import { Outlet, useNavigate } from 'react-router-dom'; +import { Outlet } from 'react-router-dom'; import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; import { Dialog } from '@app/ui/components/containers/dialog/dialog'; import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; +import { useLedgerNavigate } from '../../hooks/use-ledger-navigate'; import { LedgerRequestKeysContext, LedgerRequestKeysProvider } from './ledger-request-keys.context'; interface RequestKeysFlowProps { context: LedgerRequestKeysContext; isActionCancellableByUser: boolean; - onCancelConnectLedger?(): void; } -export function RequestKeysFlow({ - context, - isActionCancellableByUser, - onCancelConnectLedger, -}: RequestKeysFlowProps) { - const navigate = useNavigate(); +export function RequestKeysFlow({ context, isActionCancellableByUser }: RequestKeysFlowProps) { + const ledgerNavigate = useLedgerNavigate(); useScrollLock(true); + const onCancelConnectLedger = ledgerNavigate.cancelLedgerAction; + return ( } // clean this up - onClose={ - isActionCancellableByUser - ? () => null - : onCancelConnectLedger - ? onCancelConnectLedger - : () => navigate('../') - } + onClose={isActionCancellableByUser ? onCancelConnectLedger : undefined} > diff --git a/src/app/features/ledger/generic-flows/tx-signing/tx-signing-flow.tsx b/src/app/features/ledger/generic-flows/tx-signing/tx-signing-flow.tsx index 5197bb21499..e38ec1de286 100644 --- a/src/app/features/ledger/generic-flows/tx-signing/tx-signing-flow.tsx +++ b/src/app/features/ledger/generic-flows/tx-signing/tx-signing-flow.tsx @@ -1,6 +1,7 @@ -import { Outlet, useNavigate } from 'react-router-dom'; +import { Outlet, useLocation, useNavigate } from 'react-router-dom'; + +import { RouteUrls } from '@shared/route-urls'; -import { useLocationState } from '@app/common/hooks/use-location-state'; import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; import { Dialog } from '@app/ui/components/containers/dialog/dialog'; import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; @@ -11,26 +12,26 @@ import { LedgerTxSigningContext, LedgerTxSigningProvider } from './ledger-sign-t interface TxSigningFlowProps { context: LedgerTxSigningContext; awaitingDeviceConnection: boolean; - closeAction(): void; } -export function TxSigningFlow({ - context, - awaitingDeviceConnection, - closeAction, -}: TxSigningFlowProps) { +export function TxSigningFlow({ context, awaitingDeviceConnection }: TxSigningFlowProps) { const navigate = useNavigate(); + const location = useLocation(); useScrollLock(true); - const allowUserToGoBack = useLocationState('goBack'); const canUserCancelAction = useActionCancellableByUser(); - const isWaitingOnPerformedAction = awaitingDeviceConnection || canUserCancelAction; return ( navigate(-1) : undefined} isShowing - header={} - onClose={isWaitingOnPerformedAction ? undefined : () => closeAction} + header={ + + } + onClose={() => + // navigate to specific route instead of `..` to avoid redirect to Home + navigate(RouteUrls.RpcSignBip322Message, { state: { ...location.state, wentBack: true } }) + } > diff --git a/src/app/pages/choose-account/choose-account.tsx b/src/app/pages/choose-account/choose-account.tsx index 41fa8bfe5ca..bc0c0af4c5d 100644 --- a/src/app/pages/choose-account/choose-account.tsx +++ b/src/app/pages/choose-account/choose-account.tsx @@ -10,12 +10,16 @@ import { useAppDetails } from '@app/common/hooks/auth/use-app-details'; import { RequesterFlag } from '@app/components/requester-flag'; import { ChooseAccountsList } from '@app/pages/choose-account/components/accounts'; import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed'; +import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { LogomarkIcon } from '@app/ui/icons/logomark-icon'; export const ChooseAccount = memo(() => { const { url } = useAppDetails(); const cancelAuthentication = useCancelAuthRequest(); + const accounts = useStacksAccounts(); + // ledger can have only BTC accounts connected but stacks needed to connect + const hasConnectedStacksAccounts = accounts.length > 0; useOnOriginTabClose(() => closeWindow()); @@ -34,10 +38,14 @@ export const ChooseAccount = memo(() => { {url && } - Choose an account to connect + + {hasConnectedStacksAccounts + ? 'Choose an account to connect' + : 'No connected accounts found'} + - + {hasConnectedStacksAccounts && } diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx index 1c06eedcbe3..3906066b5bc 100644 --- a/src/app/pages/choose-account/components/accounts.tsx +++ b/src/app/pages/choose-account/components/accounts.tsx @@ -71,7 +71,7 @@ const ChooseAccountItem = memo( } ); -const AddAccountAction = memo(() => { +function AddAccountAction() { const [component, bind] = usePressable(true); const createAccount = useCreateAccount(); @@ -88,9 +88,9 @@ const AddAccountAction = memo(() => { {component} ); -}); +} -export const ChooseAccountsList = memo(() => { +export function ChooseAccountsList() { const finishSignIn = useFinishAuthRequest(); const { whenWallet } = useWalletType(); const accounts = useStacksAccounts(); @@ -109,7 +109,6 @@ export const ChooseAccountsList = memo(() => { })(); }; - if (!accounts) return null; const accountNum = accounts.length; const maxAccountsShown = accountNum > 10 ? 10 : accountNum; @@ -137,4 +136,4 @@ export const ChooseAccountsList = memo(() => { /> ); -}); +} diff --git a/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx b/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx index 2b5cffebb77..485211a2cf8 100644 --- a/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx +++ b/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx @@ -1,4 +1,5 @@ -import { Outlet } from 'react-router-dom'; +import { useEffect, useState } from 'react'; +import { Outlet, useLocation } from 'react-router-dom'; import { closeWindow } from '@shared/utils'; @@ -29,13 +30,24 @@ function RpcSignBip322Message() { origin, message, address, - isLoading, + isLoading: signBip322MessageIsLoading, onUserApproveBip322MessageSigningRequest, onUserRejectBip322MessageSigningRequest, } = useSignBip322Message(); + const location = useLocation(); const { chain } = useCurrentNetwork(); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + if (location?.state?.wentBack) { + setIsLoading(false); + } else { + setIsLoading(signBip322MessageIsLoading); + } + }, [location, signBip322MessageIsLoading, isLoading, setIsLoading]); + if (origin === null) { closeWindow(); throw new Error('Origin is null'); diff --git a/src/app/ui/components/containers/headers/dialog-header.tsx b/src/app/ui/components/containers/headers/dialog-header.tsx index ec1d0d08a27..dbe4761b117 100644 --- a/src/app/ui/components/containers/headers/dialog-header.tsx +++ b/src/app/ui/components/containers/headers/dialog-header.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; -import { Flex } from 'leather-styles/jsx'; +import { Box, Flex } from 'leather-styles/jsx'; import { CloseIcon } from '@app/ui/icons'; @@ -17,22 +17,24 @@ export function DialogHeader({ isWaitingOnPerformedAction, onClose, title }: Dia return ( {title && ( - + {title} )} {onClose && !isWaitingOnPerformedAction && ( - } - dataTestId={SharedComponentsSelectors.HeaderCloseBtn} - onAction={onClose} - /> + + } + dataTestId={SharedComponentsSelectors.HeaderCloseBtn} + onAction={onClose} + /> + )} );