[NO-TASK] merge browser extension

src/components/home/connect-base.tsx

@@ -10,12 +10,13 @@ import { InstallHint } from './install-hint';
 import { SignHint } from './sign-hint';
 
 interface Props extends ConnectProps {
-  isSupported: () => boolean | Promise<boolean>;
-  fallback?: WalletType;
+  isSupported: (wallet: WalletType, blockchain: Blockchain) => boolean | Promise<boolean>;
+  fallback?: (wallet: WalletType) => WalletType;
   getAccount: (wallet: WalletType, blockchain: Blockchain, isReconnect: boolean) => Promise<Account>;
   signMessage: (
     msg: string,
     address: string,
+    wallet: WalletType,
     blockchain: Blockchain,
     accountIndex?: number,
     index?: number,
@@ -54,8 +55,8 @@ export function ConnectBase({
   }, []);
 
   async function init() {
-    const supported = await isSupported();
-    if (!supported && fallback) onSwitch(fallback);
+    const supported = await isSupported(wallet, Blockchain.BASE);
+    if (!supported && fallback) onSwitch(fallback(wallet));
 
     setShowInstallHint(!supported);
     setIsLoading(false);
@@ -104,7 +105,15 @@ export function ConnectBase({
                 (a, m) =>
                   account.signature
                     ? Promise.resolve(account.signature)
-                    : onSignMessage(a, account.blockchain, m, account.accountIndex, account.index, account.type),
+                    : onSignMessage(
+                        a,
+                        account.blockchain,
+                        wallet,
+                        m,
+                        account.accountIndex,
+                        account.index,
+                        account.type,
+                      ),
                 account.key,
               ),
         );
@@ -113,13 +122,14 @@ export function ConnectBase({
   async function onSignMessage(
     address: string,
     blockchain: Blockchain,
+    wallet: WalletType,
     message: string,
     accountIndex?: number,
     index?: number,
     addressType?: BitcoinAddressType,
   ): Promise<string> {
     setShowSignHint(true);
-    return signMessage(message, address, blockchain, accountIndex, index, addressType).finally(() =>
+    return signMessage(message, address, wallet, blockchain, accountIndex, index, addressType).finally(() =>
       setShowSignHint(false),
     );
   }

src/components/home/connect-wrapper.tsx

@@ -2,26 +2,27 @@ import { lazy } from 'react';
 import { WalletType } from '../../contexts/wallet.context';
 import { ConnectProps } from './connect-shared';
 
+const ConnectBrowserExtension = lazy(() => import('./wallet/connect-browser-extension'));
 const ConnectAlby = lazy(() => import('./wallet/connect-alby'));
 const ConnectBitbox = lazy(() => import('./wallet/connect-bitbox'));
 const ConnectCli = lazy(() => import('./wallet/connect-cli'));
 const ConnectLedger = lazy(() => import('./wallet/connect-ledger'));
-const ConnectMetaMask = lazy(() => import('./wallet/connect-metamask'));
 const ConnectTrezor = lazy(() => import('./wallet/connect-trezor'));
 const ConnectTaro = lazy(() => import('./wallet/connect-taro'));
 const ConnectWalletConnect = lazy(() => import('./wallet/connect-wallet-connect'));
 const ConnectMonero = lazy(() => import('./wallet/connect-monero'));
-const ConnectPhantom = lazy(() => import('./wallet/connect-phantom'));
-const ConnectTrustSol = lazy(() => import('./wallet/connect-trust-sol'));
-const ConnectTrustTrx = lazy(() => import('./wallet/connect-trust-trx'));
-const ConnectTronLinkTrx = lazy(() => import('./wallet/connect-tronlink-trx'));
 const ConnectMail = lazy(() => import('./wallet/connect-mail'));
 const ConnectAddress = lazy(() => import('./wallet/connect-address'));
 
 export function ConnectWrapper(props: ConnectProps): JSX.Element {
   switch (props.wallet) {
     case WalletType.META_MASK:
-      return <ConnectMetaMask {...props} />;
+    case WalletType.PHANTOM_SOL:
+    case WalletType.TRUST_SOL:
+    case WalletType.TRUST_TRX:
+    case WalletType.TRON_LINK_TRX:
+    case WalletType.BROWSER_EXTENSION:
+      return <ConnectBrowserExtension {...props} />;
 
     case WalletType.ALBY:
       return <ConnectAlby {...props} />;
@@ -59,22 +60,12 @@ export function ConnectWrapper(props: ConnectProps): JSX.Element {
     case WalletType.MONERO:
       return <ConnectMonero {...props} wallet={props.wallet} />;
 
-    case WalletType.PHANTOM_SOL:
-      return <ConnectPhantom {...props} />;
-
-    case WalletType.TRUST_SOL:
-      return <ConnectTrustSol {...props} />;
-
-    case WalletType.TRUST_TRX:
-      return <ConnectTrustTrx {...props} />;
-
-    case WalletType.TRONLINK_TRX:
-      return <ConnectTronLinkTrx {...props} />;
-
     case WalletType.MAIL:
       return <ConnectMail {...props} />;
 
     case WalletType.ADDRESS:
       return <ConnectAddress {...props} />;
+    default:
+      return <></>;
   }
 }

src/components/home/install-hint.tsx

@@ -29,7 +29,7 @@ export function InstallHint({ type, onConfirm }: { type: WalletType; onConfirm:
     case WalletType.TRUST_TRX:
       return <TrustHint onConfirm={onConfirm} />;
 
-    case WalletType.TRONLINK_TRX:
+    case WalletType.TRON_LINK_TRX:
       return <TronLinkHint onConfirm={onConfirm} />;
 
     case WalletType.CLI_BTC:
@@ -48,6 +48,8 @@ export function InstallHint({ type, onConfirm }: { type: WalletType; onConfirm:
     case WalletType.MAIL:
     case WalletType.ADDRESS:
       return <></>;
+    default:
+      return <></>;
   }
 }
 

src/components/home/wallet/connect-bitbox.tsx

@@ -89,7 +89,7 @@ export default function ConnectBitbox(props: Props): JSX.Element {
     <ConnectBase
       isSupported={isSupported}
       getAccount={getAccount}
-      signMessage={(msg, _a, chain, accountIndex, index, type) =>
+      signMessage={(msg, _a, _w, chain, accountIndex, index, type) =>
         signMessage(msg, props.wallet, chain, accountIndex ?? 0, type ?? defaultAddressType, index ?? 0)
       }
       renderContent={(p) => (

src/components/home/wallet/connect-browser-extension.tsx

@@ -0,0 +1,87 @@
+import { Blockchain, useAuthContext } from '@dfx.swiss/react';
+import {
+  SpinnerSize,
+  StyledButton,
+  StyledButtonColor,
+  StyledButtonWidth,
+  StyledLoadingSpinner,
+} from '@dfx.swiss/react-components';
+import { useBrowserExtension } from 'src/hooks/wallets/browser-extension.hook';
+import { useSettingsContext } from '../../../contexts/settings.context';
+import { WalletType } from '../../../contexts/wallet.context';
+import { ConnectBase } from '../connect-base';
+import { Account, ConnectContentProps, ConnectError, ConnectProps } from '../connect-shared';
+
+export default function ConnectBrowserExtension(props: Readonly<ConnectProps>): JSX.Element {
+  const { isInstalled, connect, signMessage, requestAccount, requestBlockchain, requestChangeToBlockchain } =
+    useBrowserExtension();
+  const { session } = useAuthContext();
+
+  const evmBlockchains = [
+    Blockchain.ETHEREUM,
+    Blockchain.ARBITRUM,
+    Blockchain.OPTIMISM,
+    Blockchain.POLYGON,
+    Blockchain.BASE,
+    Blockchain.BINANCE_SMART_CHAIN,
+  ];
+  async function getAccount(walletType: WalletType, blockchain: Blockchain, isReconnect: boolean): Promise<Account> {
+    if (isReconnect && session?.address) return { address: session.address };
+
+    if (evmBlockchains.includes(blockchain)) {
+      const address = await requestAccount(blockchain);
+      if (!address) throw new Error('Permission denied or account not verified');
+
+      const currentBlockchain = requestBlockchain ? await requestBlockchain() : undefined;
+      if (currentBlockchain && blockchain !== currentBlockchain) await requestChangeToBlockchain?.(blockchain);
+      return { address };
+    }
+
+    const currentAddress = await connect(walletType, blockchain);
+
+    return { address: currentAddress };
+  }
+
+  return (
+    <ConnectBase
+      isSupported={(wallet) => {
+        return isInstalled(wallet);
+      }}
+      fallback={(wallet) => {
+        return wallet;
+      }}
+      getAccount={(wallet, blockchain) => getAccount(wallet, blockchain, false)}
+      signMessage={(msg, addr, wallet, blockchain) => signMessage(addr, msg, wallet, blockchain)}
+      renderContent={Content}
+      autoConnect
+      {...props}
+    />
+  );
+}
+
+function Content({ back, error }: ConnectContentProps): JSX.Element {
+  const { translate } = useSettingsContext();
+
+  return error ? (
+    <>
+      <ConnectError error={error} />
+
+      <StyledButton
+        className="mt-4"
+        label={translate('general/actions', 'Back')}
+        onClick={back}
+        color={StyledButtonColor.GRAY_OUTLINE}
+        width={StyledButtonWidth.MIN}
+      />
+    </>
+  ) : (
+    <>
+      <div className="mb-4">
+        <StyledLoadingSpinner size={SpinnerSize.LG} />
+      </div>
+      <p className="text-dfxGray-700">
+        {translate('screens/home', 'Please confirm the connection in your browser extension.')}
+      </p>
+    </>
+  );
+}

src/components/home/wallet/connect-ledger.tsx

@@ -76,7 +76,7 @@ export default function ConnectLedger(props: Props): JSX.Element {
     <ConnectBase
       isSupported={isSupported}
       getAccount={getAccount}
-      signMessage={(msg, _a, _b, accountIndex, index, type) =>
+      signMessage={(msg, _a, _w, _b, accountIndex, index, type) =>
         signMessage(msg, props.wallet, accountIndex ?? 0, index ?? 0, type ?? defaultAddressType)
       }
       renderContent={(p) => (
@@ -199,9 +199,7 @@ function Content({
           <ConnectInstructions
             steps={steps}
             params={{ app, device: 'Ledger' }}
-            img={
-              addresses ? undefined : `https://dfx.swiss/images/app/ledger${app.toLowerCase()}ready_en.jpg`
-            }
+            img={addresses ? undefined : `https://dfx.swiss/images/app/ledger${app.toLowerCase()}ready_en.jpg`}
           />
         )}
         {error && <ConnectError error={error} />}

src/components/home/wallet/connect-trezor.tsx

@@ -76,7 +76,7 @@ export default function ConnectTrezor(props: Props): JSX.Element {
     <ConnectBase
       isSupported={isSupported}
       getAccount={getAccount}
-      signMessage={(msg, _a, _b, accountIndex, index, type) =>
+      signMessage={(msg, _a, _w, _b, accountIndex, index, type) =>
         signMessage(msg, props.wallet, accountIndex ?? 0, index ?? 0, type ?? defaultAddressType)
       }
       renderContent={(p) => (