feat: migrate legacy auth request to approver ux

leather-io · Dec 6, 2024 · f17ba48 · f17ba48
1 parent 742b38d
commit f17ba48
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 82 deletions.
diff --git a/src/app/common/focus-tab.ts b/src/app/common/focus-tab.ts
@@ -0,0 +1,10 @@
+export function focusTab(tabId: number | null) {
+  chrome.tabs.update(tabId ?? 0, { active: true });
+}
+
+export function focusTabAndWindow(tabId: number | null) {
+  chrome.tabs.update(tabId ?? 0, { active: true }, tab => {
+    if (!tab) return;
+    chrome.windows.update(tab.windowId, { focused: true });
+  });
+}
diff --git a/src/app/features/current-account/current-accout-cell.tsx b/src/app/features/current-account/current-accout-cell.tsx
@@ -0,0 +1,48 @@
+import { Box } from 'leather-styles/jsx';
+
+import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names';
+import { AccountTotalBalance } from '@app/components/account-total-balance';
+import { AcccountAddresses } from '@app/components/account/account-addresses';
+import { AccountListItemLayout } from '@app/components/account/account-list-item.layout';
+import { AccountNameLayout } from '@app/components/account/account-name';
+import { useCurrentAccountIndex } from '@app/store/accounts/account';
+import { useNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
+import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
+import { AccountAvatarItem } from '@app/ui/components/account/account-avatar/account-avatar-item';
+
+interface CurrentAccountCellProps {
+  onSelectAccount(): void;
+}
+
+export function CurrentAccountCell({ onSelectAccount }: CurrentAccountCellProps) {
+  const index = useCurrentAccountIndex();
+  const stacksAccounts = useStacksAccounts();
+  const stxAddress = stacksAccounts[index]?.address || '';
+  const { data: name = '' } = useAccountDisplayName({ address: stxAddress, index });
+  const bitcoinSigner = useNativeSegwitSigner(index);
+  const bitcoinAddress = bitcoinSigner?.(0).address || '';
+  return (
+    <AccountListItemLayout
+      withChevron
+      accountAddresses={<AcccountAddresses index={index} />}
+      accountName={<AccountNameLayout isLoading={false}>{name}</AccountNameLayout>}
+      avatar={
+        <AccountAvatarItem
+          index={index}
+          publicKey={stacksAccounts[index]?.stxPublicKey || ''}
+          name={name}
+        />
+      }
+      balanceLabel={
+        // Hack to center element without adjusting AccountListItemLayout
+        <Box pos="relative" top={12}>
+          <AccountTotalBalance stxAddress={stxAddress} btcAddress={bitcoinAddress} />
+        </Box>
+      }
+      index={index}
+      isLoading={false}
+      isSelected={false}
+      onSelectAccount={() => onSelectAccount()}
+    />
+  );
+}
diff --git a/src/app/pages/choose-account/choose-account.tsx b/src/app/pages/choose-account/choose-account.tsx
@@ -1,53 +1,39 @@
-import { useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
-
-import { Flex, Stack, styled } from 'leather-styles/jsx';
-
-import { LeatherLogomarkIcon } from '@leather.io/ui';
+import { noop } from 'rxjs';
 
 import { closeWindow } from '@shared/utils';
 
 import { useCancelAuthRequest } from '@app/common/authentication/use-cancel-auth-request';
+import { useFinishAuthRequest } from '@app/common/authentication/use-finish-auth-request';
 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 { useOnMount } from '@app/common/hooks/use-on-mount';
+import { useSwitchAccountSheet } from '@app/common/switch-account/use-switch-account-sheet-context';
+import { CurrentAccountCell } from '@app/features/current-account/current-accout-cell';
 import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed';
-import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
+import { useCurrentAccountIndex } from '@app/store/accounts/account';
+
+import { GetAddressesLayout } from '../rpc-get-addresses/components/get-addresses.layout';
 
 export function ChooseAccount() {
   const { url } = useAppDetails();
-  const accounts = useStacksAccounts();
-  const hasConnectedStacksAccounts = accounts.length > 0;
-
-  const cancelAuthentication = useCancelAuthRequest();
+  const accountIndex = useCurrentAccountIndex();
+  const finishSignIn = useFinishAuthRequest();
+  const { toggleSwitchAccount } = useSwitchAccountSheet();
 
   useOnOriginTabClose(() => closeWindow());
 
+  const cancelAuthentication = useCancelAuthRequest();
+
   const handleUnmount = async () => cancelAuthentication();
+  useOnMount(() => window.addEventListener('beforeunload', handleUnmount));
 
-  useEffect(() => {
-    window.addEventListener('beforeunload', handleUnmount);
-    return () => window.removeEventListener('beforeunload', handleUnmount);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  if (!url) throw new Error('No app details found');
 
   return (
-    <>
-      <Flex alignItems="center" flexDirection="column" pt="space.07" width="100%" height="100%">
-        <Stack gap="space.05" textAlign="center" alignItems="center">
-          {url && <RequesterFlag requester={url.toString()} />}
-          <LeatherLogomarkIcon height={58} width={248} />
-          <Stack gap="space.04">
-            <styled.h1 textStyle="heading.05">
-              {hasConnectedStacksAccounts
-                ? 'Choose an account to connect'
-                : 'No connected accounts found'}
-            </styled.h1>
-          </Stack>
-        </Stack>
-        {hasConnectedStacksAccounts && <ChooseAccountsList />}
-      </Flex>
-      <Outlet />
-    </>
+    <GetAddressesLayout
+      requester={url.origin}
+      onUserApprovesGetAddresses={async () => await finishSignIn(accountIndex)}
+      onClickRequestedByLink={noop}
+      switchAccount={<CurrentAccountCell onSelectAccount={toggleSwitchAccount} />}
+    />
   );
 }
diff --git a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx
@@ -22,7 +22,7 @@ interface GetAddressesLayoutProps {
   requester: string;
   switchAccount: ReactNode;
   onBeforeAnimation?(): void;
-  onUserApprovesGetAddresses(): void;
+  onUserApprovesGetAddresses(): void | Promise<void>;
   onClickRequestedByLink(): void;
 }
 export function GetAddressesLayout({
@@ -61,7 +61,7 @@ export function GetAddressesLayout({
     });
     await checkmarkEnters.start({ scale: 0.5, dur: 0.32 });
     await delay(280);
-    onUserApprovesGetAddresses();
+    await onUserApprovesGetAddresses();
     await delay(280);
     await originLogoAnimation.start({
       scale: 0,

diff --git a/src/app/pages/rpc-get-addresses/rpc-get-addresses.tsx b/src/app/pages/rpc-get-addresses/rpc-get-addresses.tsx
@@ -1,30 +1,14 @@
-import { Box } from 'leather-styles/jsx';
-
 import { closeWindow } from '@shared/utils';
 
-import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { useSwitchAccountSheet } from '@app/common/switch-account/use-switch-account-sheet-context';
-import { AccountTotalBalance } from '@app/components/account-total-balance';
-import { AcccountAddresses } from '@app/components/account/account-addresses';
-import { AccountListItemLayout } from '@app/components/account/account-list-item.layout';
-import { AccountNameLayout } from '@app/components/account/account-name';
+import { CurrentAccountCell } from '@app/features/current-account/current-accout-cell';
 import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed';
-import { useCurrentAccountIndex } from '@app/store/accounts/account';
-import { useNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
-import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
-import { AccountAvatarItem } from '@app/ui/components/account/account-avatar/account-avatar-item';
 
 import { GetAddressesLayout } from './components/get-addresses.layout';
 import { useGetAddresses } from './use-get-addresses';
 
 export function RpcGetAddresses() {
   const { focusInitatingTab, origin, onUserApproveGetAddresses } = useGetAddresses();
-  const index = useCurrentAccountIndex();
-  const stacksAccounts = useStacksAccounts();
-  const stxAddress = stacksAccounts[index]?.address || '';
-  const { data: name = '' } = useAccountDisplayName({ address: stxAddress, index });
-  const bitcoinSigner = useNativeSegwitSigner(index);
-  const bitcoinAddress = bitcoinSigner?.(0).address || '';
 
   useOnOriginTabClose(() => closeWindow());
 
@@ -39,30 +23,7 @@ export function RpcGetAddresses() {
     <GetAddressesLayout
       requester={origin}
       onClickRequestedByLink={focusInitatingTab}
-      switchAccount={
-        <AccountListItemLayout
-          withChevron
-          accountAddresses={<AcccountAddresses index={index} />}
-          accountName={<AccountNameLayout isLoading={false}>{name}</AccountNameLayout>}
-          avatar={
-            <AccountAvatarItem
-              index={index}
-              publicKey={stacksAccounts[index]?.stxPublicKey || ''}
-              name={name}
-            />
-          }
-          balanceLabel={
-            // Hack to center element without adjusting AccountListItemLayout
-            <Box pos="relative" top={12}>
-              <AccountTotalBalance stxAddress={stxAddress} btcAddress={bitcoinAddress} />
-            </Box>
-          }
-          index={0}
-          isLoading={false}
-          isSelected={false}
-          onSelectAccount={() => toggleSwitchAccount()}
-        />
-      }
+      switchAccount={<CurrentAccountCell onSelectAccount={toggleSwitchAccount} />}
       onUserApprovesGetAddresses={onUserApproveGetAddresses}
     />
   );

diff --git a/src/app/pages/rpc-get-addresses/use-get-addresses.ts b/src/app/pages/rpc-get-addresses/use-get-addresses.ts
@@ -7,6 +7,7 @@ import { logger } from '@shared/logger';
 import { makeRpcSuccessResponse } from '@shared/rpc/rpc-methods';
 import { analytics } from '@shared/utils/analytics';
 
+import { focusTab } from '@app/common/focus-tab';
 import { useRpcRequestParams } from '@app/common/rpc-helpers';
 import { useCurrentAccountNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentAccountTaprootSigner } from '@app/store/accounts/blockchain/bitcoin/taproot-account.hooks';
@@ -23,10 +24,7 @@ export function useGetAddresses() {
 
   function focusInitatingTab() {
     void analytics.track('user_clicked_requested_by_link', { endpoint: 'getAddresses' });
-    chrome.tabs.update(tabId ?? 0, { active: true }, tab => {
-      if (!tab) return;
-      chrome.windows.update(tab.windowId, { focused: true });
-    });
+    focusTab(tabId);
   }
 
   return {