ephemeraHQ · nmalzieu · Oct 17, 2024 · Oct 17, 2024 · Oct 17, 2024 · Oct 18, 2024
@@ -91,6 +91,8 @@
         <data android:host="dev.converse.xyz" android:pathPrefix="/group" android:scheme="https"/>
         <data android:host="dev.getconverse.app" android:pathPrefix="/coinbase" android:scheme="https"/>
         <data android:host="dev.converse.xyz" android:pathPrefix="/coinbase" android:scheme="https"/>
+        <data android:host="dev.getconverse.app" android:pathPrefix="/mobile-wallet-protocol" android:scheme="https"/>
+        <data android:host="dev.converse.xyz" android:pathPrefix="/mobile-wallet-protocol" android:scheme="https"/>
         <data android:host="dev.getconverse.app" android:pathPrefix="/desktopconnect" android:scheme="https"/>
         <data android:host="dev.converse.xyz" android:pathPrefix="/desktopconnect" android:scheme="https"/>
       </intent-filter>

@@ -23,6 +23,8 @@
                 <data android:host="preview.converse.xyz" android:pathPrefix="/group" android:scheme="https"/>
                 <data android:host="preview.getconverse.app" android:pathPrefix="/coinbase" android:scheme="https"/>
                 <data android:host="preview.converse.xyz" android:pathPrefix="/coinbase" android:scheme="https"/>
+                <data android:host="preview.getconverse.app" android:pathPrefix="/mobile-wallet-protocol" android:scheme="https"/>
+                <data android:host="preview.converse.xyz" android:pathPrefix="/mobile-wallet-protocol" android:scheme="https"/>
                 <data android:host="preview.getconverse.app" android:pathPrefix="/desktopconnect" android:scheme="https"/>
                 <data android:host="preview.converse.xyz" android:pathPrefix="/desktopconnect" android:scheme="https"/>
             </intent-filter>

@@ -23,6 +23,8 @@
                 <data android:host="converse.xyz" android:pathPrefix="/group" android:scheme="https"/>
                 <data android:host="getconverse.app" android:pathPrefix="/coinbase" android:scheme="https"/>
                 <data android:host="converse.xyz" android:pathPrefix="/coinbase" android:scheme="https"/>
+                <data android:host="getconverse.app" android:pathPrefix="/mobile-wallet-protocol" android:scheme="https"/>
+                <data android:host="converse.xyz" android:pathPrefix="/mobile-wallet-protocol" android:scheme="https"/>
                 <data android:host="getconverse.app" android:pathPrefix="/desktopconnect" android:scheme="https"/>
                 <data android:host="converse.xyz" android:pathPrefix="/desktopconnect" android:scheme="https"/>
             </intent-filter>

@@ -6,6 +6,7 @@ type IConnectViaWalletStoreProps = {
   address: string;
   alreadyV3Db: boolean;
   signer: Signer;
+  isSCW: boolean;
 };
 
 type IConnectViaWalletStoreProviderProps =
@@ -42,6 +43,7 @@ const createConnectViaWalletStore = (props: IConnectViaWalletStoreProps) =>
   createStore<IConnectViaWalletStoreState>()((set) => ({
     address: props.address,
     signer: props.signer,
+    isSCW: props.isSCW,
     alreadyV3Db: props.alreadyV3Db,
     loading: false,
     numberOfSignaturesDone: 0,

@@ -24,14 +24,15 @@ import { useInitConnectViaWalletState } from "./useInitConnectViaWalletState";
 
 type IConnectViaWalletProps = {
   address: string;
+  isSCW: boolean;
   onDoneConnecting: () => void;
   onErrorConnecting: (arg: { error: Error }) => void;
 };
 
 export const ConnectViaWallet = memo(function ConnectViaWallet(
   props: IConnectViaWalletProps
 ) {
-  const { address, onErrorConnecting, onDoneConnecting } = props;
+  const { address, isSCW, onErrorConnecting, onDoneConnecting } = props;
 
   const finishedConnectingRef = useRef(false);
 
@@ -71,16 +72,22 @@ export const ConnectViaWallet = memo(function ConnectViaWallet(
       onDoneConnecting={handleDoneConnecting}
       onErrorConnecting={handleErrorConnecting}
     >
-      <ConnectViaWalletStateWrapper address={address} />
+      <ConnectViaWalletStateWrapper address={address} isSCW={isSCW} />
     </ConnectViaWalletContextProvider>
   );
 });
 
 // Wrapper to init the wallet state and then provide the data to the UI
 const ConnectViaWalletStateWrapper = memo(
-  function ConnectViaWalletStateWrapper({ address }: { address: string }) {
+  function ConnectViaWalletStateWrapper({
+    address,
+    isSCW,
+  }: {
+    address: string;
+    isSCW: boolean;
+  }) {
     const { isInitializing, alreadyV3Db, signer } =
-      useInitConnectViaWalletState({ address });
+      useInitConnectViaWalletState({ address, isSCW });
 
     if (isInitializing) {
       return <LoadingState />;
@@ -94,6 +101,7 @@ const ConnectViaWalletStateWrapper = memo(
     return (
       <ConnectViaWalletStoreProvider
         address={address}
+        isSCW={isSCW}
         alreadyV3Db={alreadyV3Db}
         signer={signer}
       >

@@ -16,6 +16,7 @@ import { WalletId } from "thirdweb/wallets";
 
 import { useAppStateHandlers } from "../../../hooks/useAppStateHandlers";
 import { isEthOS } from "../../../utils/ethos";
+import { InstalledWallet, SUPPORTED_WALLETS } from "@utils/evm/wallets";
 
 export const POPULAR_WALLETS = [
   {
@@ -56,116 +57,6 @@ export const POPULAR_WALLETS = [
   },
 ];
 
-const SUPPORTED_WALLETS = [
-  {
-    name: "Coinbase Wallet",
-    iconURL:
-      "https://explorer-api.walletconnect.com/v3/logo/sm/a5ebc364-8f91-4200-fcc6-be81310a0000?projectId=2f05ae7f1116030fde2d36508f472bfb",
-    customScheme: "cbwallet://",
-    thirdwebId: "com.coinbase.wallet",
-  },
-  {
-    name: "Ledger Live",
-    walletConnectId:
-      "19177a98252e07ddfc9af2083ba8e07ef627cb6103467ffebb3f8f4205fd7927",
-    iconURL:
-      "https://explorer-api.walletconnect.com/v3/logo/sm/a7f416de-aa03-4c5e-3280-ab49269aef00?projectId=2f05ae7f1116030fde2d36508f472bfb",
-    customScheme: "ledgerlive://",
-    thirdwebId: "com.ledger",
-  },
-  {
-    name: "Rainbow",
-    walletConnectId:
-      "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
-    iconURL:
-      "https://explorer-api.walletconnect.com/v3/logo/sm/7a33d7f1-3d12-4b5c-f3ee-5cd83cb1b500?projectId=2f05ae7f1116030fde2d36508f472bfb",
-    customScheme: "rainbow://",
-    thirdwebId: "me.rainbow",
-    // Rainbow Mobile does not support tesnets (even Sepolia)
-    // https://rainbow.me/en/support/app/testnets
-    supportedChains: [
-      ethereum,
-      base,
-      optimism,
-      polygon,
-      arbitrum,
-      avalanche,
-      blast,
-      zora,
-    ],
-  },
-  {
-    name: "MetaMask",
-    walletConnectId:
-      "c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96",
-    iconURL:
-      "https://explorer-api.walletconnect.com/v3/logo/sm/018b2d52-10e9-4158-1fde-a5d5bac5aa00?projectId=2f05ae7f1116030fde2d36508f472bfb",
-    customScheme: "metamask://",
-    thirdwebId: "io.metamask",
-  },
-  {
-    name: "Trust Wallet",
-    walletConnectId:
-      "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0",
-    iconURL:
-      "https://explorer-api.walletconnect.com/v3/logo/sm/0528ee7e-16d1-4089-21e3-bbfb41933100?projectId=2f05ae7f1116030fde2d36508f472bfb",
-    customScheme: "trust://",
-    thirdwebId: "com.trustwallet.app",
-  },
-  {
-    name: "Uniswap Wallet",
-    walletConnectId:
-      "c03dfee351b6fcc421b4494ea33b9d4b92a984f87aa76d1663bb28705e95034a",
-    iconURL:
-      "https://explorer-api.walletconnect.com/v3/logo/sm/bff9cf1f-df19-42ce-f62a-87f04df13c00?projectId=2f05ae7f1116030fde2d36508f472bfb",
-    customScheme: "uniswap://",
-    thirdwebId: "org.uniswap",
-  },
-  {
-    name: "Zerion",
-    walletConnectId:
-      "ecc4036f814562b41a5268adc86270fba1365471402006302e70169465b7ac18",
-    iconURL:
-      "https://explorer-api.walletconnect.com/v3/logo/sm/73f6f52f-7862-49e7-bb85-ba93ab72cc00?projectId=2f05ae7f1116030fde2d36508f472bfb",
-    customScheme: "zerion://",
-    thirdwebId: "io.zerion.wallet",
-  },
-  {
-    name: "Exodus",
-    walletConnectId:
-      "e9ff15be73584489ca4a66f64d32c4537711797e30b6660dbcb71ea72a42b1f4",
-    iconURL:
-      "https://explorer-api.walletconnect.com/v3/logo/sm/4c16cad4-cac9-4643-6726-c696efaf5200?projectId=2f05ae7f1116030fde2d36508f472bfb",
-    customScheme: "exodus://",
-    universalLink: "https://exodus.com/m",
-    thirdwebId: "com.exodus",
-  },
-  // {
-  //   name: "1inch Wallet",
-  //   walletConnectId:
-  //     "c286eebc742a537cd1d6818363e9dc53b21759a1e8e5d9b263d0c03ec7703576",
-  //   iconURL:
-  //     "https://explorer-api.walletconnect.com/v3/logo/sm/52b1da3c-9e72-40ae-5dac-6142addd9c00?projectId=2f05ae7f1116030fde2d36508f472bfb",
-  //   customScheme: "oneinch://",
-  //   universalLink: "https://wallet.1inch.io",
-  // },
-];
-
-type ISupportedWalletName =
-  | (typeof SUPPORTED_WALLETS)[number]["name"]
-  | "EthOS Wallet";
-
-export type InstalledWallet = {
-  name: ISupportedWalletName;
-  iconURL: string;
-  customScheme?: string;
-  universalLink?: string;
-  walletConnectId?: string;
-  platforms?: string[];
-  thirdwebId?: WalletId;
-  supportedChains?: Chain[];
-};
-
 let hasCheckedInstalled = false;
 export let installedWallets: InstalledWallet[] = [];
 
@@ -174,7 +65,9 @@ export const getInstalledWallets = async (
 ): Promise<InstalledWallet[]> => {
   if (hasCheckedInstalled && !refresh) return installedWallets;
   const checkInstalled = await Promise.all(
-    SUPPORTED_WALLETS.map((w) => Linking.canOpenURL(`${w.customScheme}wc`))
+    Object.values(SUPPORTED_WALLETS).map(
+      (w) => !!w.customScheme && Linking.canOpenURL(`${w.customScheme}wc`)
+    )
   );
   const wallets: InstalledWallet[] = [];
 
@@ -187,8 +80,8 @@ export const getInstalledWallets = async (
   }
 
   wallets.push(
-    ...(SUPPORTED_WALLETS as InstalledWallet[]).filter(
-      (w, i) => checkInstalled[i]
+    ...(Object.values(SUPPORTED_WALLETS) as InstalledWallet[]).filter(
+      (w, i) => checkInstalled[i] || w.isSmartContractWallet
     )
   );
   installedWallets = wallets;

@@ -1,28 +1,26 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
 // TODO: move out of ConnectViaWallet
-import { memo, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { ActivityIndicator } from "react-native";
 import {
   useDisconnect as useThirdwebDisconnect,
   useSetActiveWallet as useSetThirdwebActiveWallet,
   useConnect as useThirdwebConnect,
   useActiveWallet as useThirdwebActiveWallet,
 } from "thirdweb/react";
-import { createWallet } from "thirdweb/wallets";
 
-import {
-  InstalledWallet,
-  useInstalledWallets,
-} from "./ConnectViaWalletSupportedWallets";
+import { useInstalledWallets } from "./ConnectViaWalletSupportedWallets";
 import config from "../../../config";
 import { getAccountsList } from "../../../data/store/accountsStore";
 import { useAppStateHandlers } from "../../../hooks/useAppStateHandlers";
 import { translate } from "../../../i18n";
 import { getEthOSSigner } from "../../../utils/ethos";
 import logger from "../../../utils/logger";
-import { thirdwebClient } from "../../../utils/thirdweb";
+import { thirdwebClient, thirdwebWallets } from "../../../utils/thirdweb";
 import TableView, { TableViewItemType } from "../../TableView/TableView";
 import { TableViewEmoji, TableViewImage } from "../../TableView/TableViewImage";
 import { RightViewChevron } from "../../TableView/TableViewRightChevron";
+import { InstalledWallet, ISupportedWalletName } from "@utils/evm/wallets";
 
 export function getConnectViaWalletTableViewPrivateKeyItem(
   args: Partial<TableViewItemType>
@@ -79,17 +77,32 @@ export function getConnectViaWalletInstalledWalletTableViewItem(args: {
 export const InstalledWalletsTableView = memo(
   function InstalledWalletsTableView(props: {
     onAccountExists: (arg: { address: string }) => void;
-    onAccountDoesNotExist: (arg: { address: string }) => void;
+    onAccountDoesNotExist: (arg: { address: string; isSCW: boolean }) => void;
   }) {
     const { onAccountExists, onAccountDoesNotExist } = props;
 
     const walletsInstalled = useInstalledWallets();
 
     const { connect: thirdwebConnect } = useThirdwebConnect();
     const { disconnect: disconnectThirdweb } = useThirdwebDisconnect();
+
     const thirdwebActiveWallet = useThirdwebActiveWallet();
+    const thirdwebActiveWalletRef = useRef(thirdwebActiveWallet);
+    useEffect(() => {
+      thirdwebActiveWalletRef.current = thirdwebActiveWallet;
+    }, [thirdwebActiveWallet]);
+
     const setThirdwebActiveWallet = useSetThirdwebActiveWallet();
 
+    const disconnectActiveThirdweb = useCallback(async () => {
+      if (!thirdwebActiveWalletRef.current) return;
+      disconnectThirdweb(thirdwebActiveWalletRef.current);
+      // Wait for the disconnect to complete
+      while (!!thirdwebActiveWalletRef.current) {
+        await new Promise((r) => setTimeout(r, 100));
+      }
+    }, [disconnectThirdweb]);
-    const disconnectActiveThirdweb = useCallback(async () => {
-      if (!thirdwebActiveWalletRef.current) return;
-      disconnectThirdweb(thirdwebActiveWalletRef.current);
-      // Wait for the disconnect to complete
-      while (!!thirdwebActiveWalletRef.current) {
-        await new Promise((r) => setTimeout(r, 100));
-      }
-    }, [disconnectThirdweb]);
+    const disconnectActiveThirdweb = useCallback(async () => {
+      if (!thirdwebActiveWalletRef.current) return;
+      disconnectThirdweb(thirdwebActiveWalletRef.current);
+      // Wait for disconnect with timeout
+      const maxAttempts = 50; // 5 seconds total
+      let attempts = 0;
+      while (thirdwebActiveWalletRef.current && attempts < maxAttempts) {
+        await new Promise((r) => setTimeout(r, 100));
+        attempts++;
+      }
+      if (thirdwebActiveWalletRef.current) {
+        logger.warn('Wallet disconnect timeout exceeded');
+      }
+    }, [disconnectThirdweb]);
-    const disconnectActiveThirdweb = useCallback(async () => {
-      if (!thirdwebActiveWalletRef.current) return;
-      disconnectThirdweb(thirdwebActiveWalletRef.current);
-      // Wait for the disconnect to complete
-      while (!!thirdwebActiveWalletRef.current) {
-        await new Promise((r) => setTimeout(r, 100));
-      }
-    }, [disconnectThirdweb]);
+    const disconnectActiveThirdweb = useCallback(async () => {
+      if (!thirdwebActiveWalletRef.current) return;
+      disconnectThirdweb(thirdwebActiveWalletRef.current);
+      // Wait for disconnect with timeout
+      const maxAttempts = 50; // 5 seconds total
+      let attempts = 0;
+      while (thirdwebActiveWalletRef.current && attempts < maxAttempts) {
+        await new Promise((r) => setTimeout(r, 100));
+        attempts++;
+      }
+      if (thirdwebActiveWalletRef.current) {
+        logger.warn('Wallet disconnect timeout exceeded');
+      }
+    }, [disconnectThirdweb]);
+
     const [isProcessingWalletId, setIsProcessingWalletId] = useState<
       string | null
     >(null);
@@ -117,38 +130,35 @@ export const InstalledWalletsTableView = memo(
             walletName: wallet.name,
           }),
           action: async () => {
+            const isSCW = !!wallet?.isSmartContractWallet;
             logger.debug(
-              `[Onboarding] Clicked on wallet ${wallet.name} - opening external app`
+              `[Onboarding] Clicked on wallet ${wallet.name} - ${
+                isSCW ? "Opening web page" : "opening external app"
+              }`
             );
 
             setIsProcessingWalletId(wallet.name);
 
-            if (thirdwebActiveWallet) {
-              disconnectThirdweb(thirdwebActiveWallet);
-            }
+            await disconnectActiveThirdweb();
 
             try {
               let walletAddress: string = "";
 
               // Specific flow for Coinbase Wallet
-              if (wallet.name === "Coinbase Wallet") {
-                const wallet = await thirdwebConnect(async () => {
-                  const coinbaseWallet = createWallet("com.coinbase.wallet", {
-                    appMetadata: config.walletConnectConfig.appMetadata,
-                    mobileConfig: {
-                      callbackURL: `https://${config.websiteDomain}/coinbase`,
-                    },
-                  });
+              if (wallet.thirdwebId === "com.coinbase.wallet") {
+                const thirdwebWallet = await thirdwebConnect(async () => {
+                  const coinbaseWallet =
+                    thirdwebWallets[wallet.name as ISupportedWalletName];
                   await coinbaseWallet.connect({ client: thirdwebClient });
                   setThirdwebActiveWallet(coinbaseWallet);
                   return coinbaseWallet;
                 });
 
-                if (!wallet) {
+                if (!thirdwebWallet) {
                   throw new Error("No coinbase wallet");
                 }
 
-                const account = wallet.getAccount();
+                const account = thirdwebWallet.getAccount();
 
                 if (!account) {
                   throw new Error("No coinbase account found");
@@ -166,7 +176,8 @@ export const InstalledWalletsTableView = memo(
               }
               // Generic flow for all other wallets
               else if (wallet.thirdwebId) {
-                const walletConnectWallet = createWallet(wallet.thirdwebId);
+                const walletConnectWallet =
+                  thirdwebWallets[wallet.name as ISupportedWalletName];
                 const account = await walletConnectWallet.connect({
                   client: thirdwebClient,
                   walletConnect: config.walletConnectConfig,
@@ -179,7 +190,10 @@ export const InstalledWalletsTableView = memo(
               if (getAccountsList().includes(walletAddress)) {
                 onAccountExists({ address: walletAddress });
               } else {
-                onAccountDoesNotExist({ address: walletAddress });
+                onAccountDoesNotExist({
+                  address: walletAddress,
+                  isSCW,
+                });
               }
             } catch (e: any) {
               logger.error("Error connecting to wallet:", e);

@@ -53,6 +53,7 @@ export function useInitXmptClient() {
       const signer = connectViewWalletStore.getState().signer!; // We can assume that signer is set at this point
       const address = connectViewWalletStore.getState().address!; // We can assume that address is set at this point
       const alreadyV3Db = connectViewWalletStore.getState().alreadyV3Db;
+      const isSCW = connectViewWalletStore.getState().isSCW;
 
       const waitForClickSignature = async () => {
         while (!connectViewWalletStore.getState().clickedSignature) {
@@ -70,6 +71,7 @@ export function useInitXmptClient() {
 
       await createXmtpClientFromSigner(
         signer,
+        isSCW,
         async () => {
           logger.debug("[Connect Wallet] Installation revoked, disconnecting");
           try {