feat: migrate legacy auth request to approver ux

.eslintrc.cjs

@@ -25,16 +25,13 @@ module.exports = {
     'plugin:storybook/csf',
   ],
   ignorePatterns: ['./leather-styles'],
-  plugins: ['react', 'react-hooks', '@typescript-eslint', 'deprecation'],
+  plugins: ['react', 'react-hooks', '@typescript-eslint'],
   settings: {
     react: {
       version: 'detect',
     },
   },
   rules: {
-    // This rule helps highlight areas of the code that use deprecated
-    // methods, such as implicit use of signed transactions
-    'deprecation/deprecation': 'warn',
     'no-console': ['error'],
     'no-duplicate-imports': ['error'],
     'prefer-const': [

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 });
+  });
+}

src/app/features/current-account/current-accout-displayer.tsx

@@ -0,0 +1,47 @@
+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 CurrentAccountDisplayerProps {
+  onSelectAccount(): void;
+}
+export function CurrentAccountDisplayer({ onSelectAccount }: CurrentAccountDisplayerProps) {
+  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()}
+    />
+  );
+}

src/app/pages/legacy-account-auth/legacy-account-auth.tsx

@@ -0,0 +1,43 @@
+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 { useOnMount } from '@app/common/hooks/use-on-mount';
+import { useSwitchAccountSheet } from '@app/common/switch-account/use-switch-account-sheet-context';
+import { openInNewTab } from '@app/common/utils/open-in-new-tab';
+import { CurrentAccountDisplayer } from '@app/features/current-account/current-accout-displayer';
+import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed';
+import { useCurrentAccountIndex } from '@app/store/accounts/account';
+
+import { GetAddressesLayout } from '../rpc-get-addresses/components/get-addresses.layout';
+
+export function LegacyAccountAuth() {
+  const { url } = useAppDetails();
+  const accountIndex = useCurrentAccountIndex();
+  const finishSignIn = useFinishAuthRequest();
+  const { toggleSwitchAccount } = useSwitchAccountSheet();
+
+  useOnOriginTabClose(() => closeWindow());
+
+  const cancelAuthentication = useCancelAuthRequest();
+
+  const handleUnmount = async () => cancelAuthentication();
+  useOnMount(() => window.addEventListener('beforeunload', handleUnmount));
+
+  if (!url) throw new Error('No app details found');
+
+  return (
+    <GetAddressesLayout
+      requester={url.origin}
+      onUserApprovesGetAddresses={async () => finishSignIn(accountIndex)}
+      // Here we should refocus the tab that initiated the request, however
+      // because the old auth code doesn't have the tab id and should be
+      // eventually removed, we just open in a new tab
+      onClickRequestedByLink={() => openInNewTab(url.origin)}
+      switchAccount={<CurrentAccountDisplayer onSelectAccount={toggleSwitchAccount} />}
+    />
+  );
+}

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,

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 { CurrentAccountDisplayer } from '@app/features/current-account/current-accout-displayer';
 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={<CurrentAccountDisplayer onSelectAccount={toggleSwitchAccount} />}
       onUserApprovesGetAddresses={onUserApproveGetAddresses}
     />
   );

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 {

src/app/routes/app-routes.tsx

@@ -30,10 +30,10 @@ import { ledgerStacksTxSigningRoutes } from '@app/features/ledger/flows/stacks-t
 import { UnsupportedBrowserLayout } from '@app/features/ledger/generic-steps';
 import { ConnectLedgerStart } from '@app/features/ledger/generic-steps/connect-device/connect-ledger-start';
 import { RetrieveTaprootToNativeSegwit } from '@app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit';
-import { ChooseAccount } from '@app/pages/choose-account/choose-account';
 import { ChooseCryptoAssetToFund } from '@app/pages/fund/choose-asset-to-fund/choose-asset-to-fund';
 import { FundPage } from '@app/pages/fund/fund';
 import { Home } from '@app/pages/home/home';
+import { LegacyAccountAuth } from '@app/pages/legacy-account-auth/legacy-account-auth';
 import { BackUpSecretKeyPage } from '@app/pages/onboarding/back-up-secret-key/back-up-secret-key';
 import { SignIn } from '@app/pages/onboarding/sign-in/sign-in';
 import { WelcomePage } from '@app/pages/onboarding/welcome/welcome';
@@ -262,7 +262,7 @@ function useAppRoutes() {
             path={RouteUrls.ChooseAccount}
             element={
               <AccountGate>
-                <ChooseAccount />
+                <LegacyAccountAuth />
               </AccountGate>
             }
           >