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,6 @@
+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/common/utils.ts

@@ -204,18 +204,6 @@ export function hexToHumanReadable(hex: string) {
   return `0x${hex}`;
 }
 
-export const slugify = (...args: (string | number)[]): string => {
-  const value = args.join(' ');
-
-  return value
-    .normalize('NFD') // split an accented letter in the base letter and the accent
-    .replace(/[\u0300-\u036f]/g, '') // remove all previously split accents
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9 ]/g, '') // remove all chars not letters, numbers and spaces (to be replaced)
-    .replace(/\s+/g, '-'); // separator
-};
-
 export function getUrlHostname(url: string) {
   return new URL(url).hostname;
 }

src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx → src/app/components/connect-account/connect-account.layout.tsx

@@ -18,20 +18,20 @@ import { closeWindow } from '@shared/utils';
 import { useOnMount } from '@app/common/hooks/use-on-mount';
 import { FaviconDisplayer } from '@app/components/favicon-displayer/favicon-displayer';
 
-interface GetAddressesLayoutProps {
+interface ConnectAccountLayoutProps {
   requester: string;
   switchAccount: ReactNode;
   onBeforeAnimation?(): void;
-  onUserApprovesGetAddresses(): void;
+  onUserApprovesGetAddresses(): void | Promise<void>;
   onClickRequestedByLink(): void;
 }
-export function GetAddressesLayout({
+export function ConnectAccountLayout({
   requester,
   switchAccount,
   onBeforeAnimation,
   onUserApprovesGetAddresses,
   onClickRequestedByLink,
-}: GetAddressesLayoutProps) {
+}: ConnectAccountLayoutProps) {
   const originLogoAnimation = useAnimationControls();
   const contentDisappears = useAnimationControls();
   const checkmarkEnters = useAnimationControls();
@@ -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/features/current-account/current-account-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,41 @@
+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-account-displayer';
+import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed';
+import { useCurrentAccountIndex } from '@app/store/accounts/account';
+
+import { ConnectAccountLayout } from '../../components/connect-account/connect-account.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 (
+    <ConnectAccountLayout
+      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} />}
+    />
+  );
+}