chore: close ledger dialogs properly, notify user if no stacks accounts

leather-io · Apr 16, 2024 · 4c3ef03 · 4c3ef03
1 parent eb7d315
commit 4c3ef03
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 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
@@ -1,21 +1,21 @@
-import { memo } from 'react';
-
 import { Box, Flex, styled } from 'leather-styles/jsx';
 
-export const AccountListUnavailable = memo(() => (
-  <Flex
-    flexDirection="column"
-    justifyContent="center"
-    minHeight="120px"
-    mb="space.06"
-    px="space.05"
-  >
-    <Box>
-      <styled.span textStyle="label.01">Unable to load account information</styled.span>
-      <styled.span mt="space.03" textStyle="body.02">
-        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.
-      </styled.span>
-    </Box>
-  </Flex>
-));
+export function AccountListUnavailable() {
+  return (
+    <Flex
+      flexDirection="column"
+      justifyContent="center"
+      minHeight="120px"
+      mb="space.06"
+      px="space.05"
+    >
+      <Box>
+        <styled.span textStyle="label.01">Unable to load account information</styled.span>
+        <styled.span mt="space.03" textStyle="body.02">
+          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.
+        </styled.span>
+      </Box>
+    </Flex>
+  );
+}
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
@@ -185,7 +185,7 @@ export function LedgerSignJwtContainer() {
       <Dialog
         isShowing
         header={<DialogHeader isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
-        onClose={isWaitingOnPerformedAction ? undefined : () => onCancelConnectLedger}
+        onClose={isWaitingOnPerformedAction ? undefined : () => onCancelConnectLedger()}
       >
         <Outlet />
       </Dialog>

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
@@ -156,7 +156,7 @@ function LedgerSignStacksMsg({ account, unsignedMessage }: LedgerSignMsgProps) {
         onGoBack={allowUserToGoBack ? () => navigate(-1) : undefined}
         isShowing
         header={<DialogHeader isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
-        onClose={isWaitingOnPerformedAction ? undefined : () => ledgerNavigate.cancelLedgerAction}
+        onClose={isWaitingOnPerformedAction ? undefined : () => ledgerNavigate.cancelLedgerAction()}
       >
         <Outlet />
       </Dialog>

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
@@ -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 (
     <LedgerRequestKeysProvider value={context}>
       <Dialog
         isShowing
         header={<DialogHeader isWaitingOnPerformedAction={isActionCancellableByUser} />}
         // clean this up
-        onClose={
-          isActionCancellableByUser
-            ? () => null
-            : onCancelConnectLedger
-              ? onCancelConnectLedger
-              : () => navigate('../')
-        }
+        onClose={isActionCancellableByUser ? onCancelConnectLedger : undefined}
       >
         <Outlet />
       </Dialog>

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
@@ -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<boolean>('goBack');
   const canUserCancelAction = useActionCancellableByUser();
 
-  const isWaitingOnPerformedAction = awaitingDeviceConnection || canUserCancelAction;
   return (
     <LedgerTxSigningProvider value={context}>
       <Dialog
-        onGoBack={allowUserToGoBack ? () => navigate(-1) : undefined}
         isShowing
-        header={<DialogHeader isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
-        onClose={isWaitingOnPerformedAction ? undefined : () => closeAction}
+        header={
+          <DialogHeader
+            isWaitingOnPerformedAction={awaitingDeviceConnection || canUserCancelAction}
+          />
+        }
+        onClose={() =>
+          // navigate to specific route instead of `..` to avoid redirect to Home
+          navigate(RouteUrls.RpcSignBip322Message, { state: { ...location.state, wentBack: true } })
+        }
       >
         <Outlet />
       </Dialog>

diff --git 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 && <RequesterFlag requester={url.toString()} />}
           <LogomarkIcon width="248px" height="58px" />
           <Stack gap="space.04">
-            <styled.h1 textStyle="heading.05">Choose an account to connect</styled.h1>
+            <styled.h1 textStyle="heading.05">
+              {hasConnectedStacksAccounts
+                ? 'Choose an account to connect'
+                : 'No connected accounts found'}
+            </styled.h1>
           </Stack>
         </Stack>
-        <ChooseAccountsList />
+        {hasConnectedStacksAccounts && <ChooseAccountsList />}
       </Flex>
       <Outlet />
     </>

diff --git 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}
     </Box>
   );
-});
+}
 
-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(() => {
       />
     </Box>
   );
-});
+}
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
@@ -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
@@ -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 (
     <Flex
       justifyContent="center"
-      margin={{ base: 0, md: 'auto' }}
+      m={{ base: 0, md: 'auto' }}
       p="space.04"
       bg="transparent"
       width="100%"
     >
       {title && (
-        <Flex flex="none" margin="auto" alignItems="center" textStyle="heading.05">
+        <Flex flex="none" m="auto" alignItems="center" textStyle="heading.05">
           {title}
         </Flex>
       )}
       {onClose && !isWaitingOnPerformedAction && (
-        <HeaderActionButton
-          icon={<CloseIcon />}
-          dataTestId={SharedComponentsSelectors.HeaderCloseBtn}
-          onAction={onClose}
-        />
+        <Box ml="auto">
+          <HeaderActionButton
+            icon={<CloseIcon />}
+            dataTestId={SharedComponentsSelectors.HeaderCloseBtn}
+            onAction={onClose}
+          />
+        </Box>
       )}
     </Flex>
   );