smart wallet autoconnect and other fixes (#2558)

MananTank · web-flow · commit 889a1a08f590 · 2024-03-28T09:48:41.000Z
diff --git a/packages/thirdweb/src/react/core/hooks/connection/useAutoConnect.tsx b/packages/thirdweb/src/react/core/hooks/connection/useAutoConnect.tsx
@@ -21,6 +21,9 @@ import { asyncLocalStorage } from "../../utils/asyncLocalStorage.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
 import { timeoutPromise } from "../../utils/timeoutPromise.js";
+import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
+import { createWallet } from "../../../../wallets/create-wallet.js";
+import { getSavedConnectParamsFromStorage } from "../../../../wallets/storage/walletStorage.js";
 
 let autoConnectAttempted = false;
 
@@ -94,6 +97,22 @@ export type AutoConnectProps = {
    * ```
    */
   timeout?: number;
+
+  /**
+   * Enable Account abstraction for all wallets. This will connect to the users's smart account based on the connected personal wallet and the given options.
+   *
+   * If you are connecting to smart wallet using personal wallet - setting this configuration will autoConnect the personal wallet and then connect to the smart wallet.
+   *
+   * ```tsx
+   * <AutoConnect
+   *   accountAbstraction={{
+   *    factoryAddress: "0x123...",
+   *    chain: sepolia,
+   *    gasless: true;
+   *   }}
+   * />
+   */
+  accountAbstraction?: SmartWalletOptions;
 };
 
 /**
@@ -128,7 +147,7 @@ export function AutoConnect(props: AutoConnectProps) {
   const setConnectionStatus = useSetActiveWalletConnectionStatus();
   const { connect } = useConnect();
   const { isAutoConnecting } = connectionManager;
-  const { wallets } = props;
+  const { wallets, accountAbstraction } = props;
   const timeout = props.timeout ?? 15000;
   // get the supported wallets from thirdweb provider
   // check the storage for last connected wallets and connect them all
@@ -153,92 +172,74 @@ export function AutoConnect(props: AutoConnectProps) {
 
       async function handleWalletConnection(wallet: Wallet) {
         setConnectionStatus("connecting");
+        return wallet.autoConnect({
+          client: props.client,
+        });
+      }
 
-        // if this wallet requires a personal wallet to be connected
-        // if (walletConfig.personalWalletConfigs) {
-        //   // get saved connection params for this wallet
-        //   const savedParams = await getSavedConnectParamsFromStorage(
-        //     asyncLocalStorage,
-        //     walletConfig.metadata.id,
-        //   );
-
-        //   // if must be an object with `personalWalletId` property
-        //   if (!isValidWithPersonalWalletConnectionOptions(savedParams)) {
-        //     throw new Error("Invalid connection params");
-        //   }
-
-        //   // find the personal wallet config
-        //   const personalWalletConfig = walletConfig.personalWalletConfigs.find(
-        //     (w) => w.metadata.id === savedParams.personalWalletId,
-        //   );
-
-        //   if (!personalWalletConfig) {
-        //     throw new Error("Personal wallet not found");
-        //   }
-
-        //   // create and auto connect the personal wallet to get personal account
-        //   const personalWallet = personalWalletConfig.create({
-        //     client,
-        //     appMetadata,
-        //   });
+      if (lastActiveWalletId === "smart") {
+        if (!accountAbstraction) {
+          return;
+        }
 
-        //   const account = await personalWallet.autoConnect();
+        const savedParams = await getSavedConnectParamsFromStorage(
+          asyncLocalStorage,
+          "accountAbstraction",
+        );
 
-        //   // create wallet
-        //   const wallet = walletConfig.create({
-        //     client,
-        //     appMetadata,
-        //   }) as WalletWithPersonalAccount;
+        const personalWalletId =
+          savedParams && "personalWalletId" in savedParams
+            ? savedParams.personalWalletId
+            : null;
 
-        //   // auto connect the wallet using the personal account
-        //   await wallet.autoConnect({
-        //     personalAccount: account,
-        //   });
+        if (personalWalletId) {
+          const personalWallet = wallets.find((w) => w.id === personalWalletId);
 
-        //   return wallet;
-        // }
+          if (personalWallet) {
+            try {
+              const account = await timeoutPromise(
+                handleWalletConnection(personalWallet),
+                {
+                  ms: timeout,
+                  message:
+                    "AutoConnect timeout : " + timeout + "ms limit exceeded.",
+                },
+              );
 
-        if (false) {
-          // do nothing
-        }
+              const smartWallet = createWallet("smart", accountAbstraction);
+              await smartWallet.connect({
+                personalAccount: account,
+                client: props.client,
+              });
 
-        // if this wallet does not require a personal wallet to be connected
-        else {
-          await wallet.autoConnect({
-            client: props.client,
-          });
-          return wallet;
+              connect(smartWallet);
+            } catch (e) {
+              console.error("Failed to auto connect personal wallet");
+              console.error(e);
+              setConnectionStatus("disconnected");
+            }
+          }
         }
-      }
-
-      // connect the last active wallet and set it as active
-      const activeWalletConfig = wallets.find(
-        (w) => w.id === lastActiveWalletId,
-      );
+      } else {
+        const activeWallet = wallets.find((w) => w.id === lastActiveWalletId);
 
-      if (activeWalletConfig) {
-        try {
-          const wallet = await timeoutPromise(
-            handleWalletConnection(activeWalletConfig),
-            {
+        if (activeWallet) {
+          try {
+            await timeoutPromise(handleWalletConnection(activeWallet), {
               ms: timeout,
               message:
                 "AutoConnect timeout : " + timeout + "ms limit exceeded.",
-            },
-          );
+            });
 
-          if (wallet) {
-            connect(wallet);
-          } else {
+            connect(activeWallet);
+          } catch (e) {
+            console.error("Failed to auto connect last active wallet");
+            console.error(e);
             setConnectionStatus("disconnected");
           }
-        } catch (e) {
-          console.error("Failed to auto connect last active wallet");
-          console.error(e);
+        } else {
           setConnectionStatus("disconnected");
         }
-      } else {
-        setConnectionStatus("disconnected");
       }
 
       // then connect wallets that were last connected but were not set as active
@@ -247,10 +248,14 @@ export function AutoConnect(props: AutoConnectProps) {
           w.id !== lastActiveWalletId && lastConnectedWalletIds.includes(w.id),
       );
 
-      otherWallets.forEach(async (config) => {
-        const account = await handleWalletConnection(config);
-        if (account) {
-          connectionManager.addConnectedWallet(account);
+      otherWallets.forEach(async (wallet) => {
+        try {
+          await handleWalletConnection(wallet);
+          connectionManager.addConnectedWallet(wallet);
+        } catch (e) {
+          console.error("Failed to auto connect a non-active connected wallet");
+          console.error(e);
+          setConnectionStatus("disconnected");
         }
       });
     };
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectWallet.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectWallet.tsx
@@ -77,6 +77,7 @@ export function ConnectButton(props: ConnectButtonProps) {
           ? undefined
           : props.autoConnect?.timeout
       }
+      accountAbstraction={props.accountAbstraction}
     />
   );
 
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
@@ -820,9 +820,11 @@ function EmbeddedWalletEmail() {
   const emailQuery = useQuery({
     queryKey: ["embedded-wallet-user", client],
     queryFn: async () => {
-      return getUserEmail({
+      const data = await getUserEmail({
         client: client,
       });
+
+      return data || null;
     },
   });
 
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx
@@ -17,6 +17,8 @@ import { ModalConfigCtx } from "../../../providers/wallet-ui-states-provider.js"
 import { createWallet } from "../../../../../wallets/create-wallet.js";
 import { useWalletInfo } from "../../hooks/useWalletInfo.js";
 import type { WalletInfo } from "../../../../../wallets/wallet-info.js";
+import { saveConnectParamsToStorage } from "../../../../../wallets/storage/walletStorage.js";
+import { asyncLocalStorage } from "../../../../core/utils/asyncLocalStorage.js";
 
 /**
  * @internal
@@ -118,6 +120,10 @@ function SmartWalletConnecting(props: {
         client,
       });
 
+      saveConnectParamsToStorage(asyncLocalStorage, "accountAbstraction", {
+        personalWalletId: personalWallet.id,
+      });
+
       done(smartWallet);
       setSmartWalletConnectionStatus("idle");
     } catch (e) {
diff --git a/scripts/hotlink/changes.mjs b/scripts/hotlink/changes.mjs
@@ -2,10 +2,10 @@
 import fs from "fs";
 import path from "path";
 
-export const changes = [
+export const _legacyChanges = [
   // react
   {
-    path: "./packages/react/package.json",
+    path: "./legacy_packages/react/package.json",
     entry: "./src/index.ts",
     exports: {
       ".": "./src/index.ts",
@@ -14,7 +14,7 @@ export const changes = [
   },
   // react-core
   {
-    path: "./packages/react-core/package.json",
+    path: "./legacy_packages/react-core/package.json",
     entry: "./src/index.ts",
     exports: {
       ".": "./src/index.ts",
@@ -23,7 +23,7 @@ export const changes = [
   },
   // wallets
   {
-    path: "./packages/wallets/package.json",
+    path: "./legacy_packages/wallets/package.json",
     entry: "./src/index.ts",
     exports: {
       ".": "./src/index.ts",
@@ -58,6 +58,9 @@ export const changes = [
       "./evm/wallets/smart-wallet": "./src/evm/wallets/smart-wallet.ts",
     },
   },
+];
+
+export const _changes = [
   // thirdweb v5 sdk
   {
     path: "./packages/thirdweb/package.json",
@@ -91,8 +94,10 @@ const absPath = (relativePath) => path.join(process.cwd(), relativePath);
 /**
  *
  * @param {"original" | 'hotlink'} changeKey
+ * @param {boolean} isLegacy
  */
-export function updatePackages(changeKey) {
+export function updatePackages(changeKey, isLegacy) {
+  const changes = isLegacy ? _legacyChanges : _changes;
   changes.forEach((change) => {
     // read the package json file
     const pkg = JSON.parse(fs.readFileSync(absPath(change.path), "utf8"));
diff --git a/scripts/hotlink/hotlink-init.mjs b/scripts/hotlink/hotlink-init.mjs
@@ -4,31 +4,34 @@ import { updatePackages } from "./changes.mjs";
 import { execute } from "./execute.mjs";
 
 async function script() {
+  const isLegacy = process.argv[2] === "legacy";
   console.log(banner);
 
   console.log("\x1b[34m%s\x1b[0m", "Updating package json files");
-  updatePackages("hotlink");
+  updatePackages("hotlink", isLegacy);
 
   console.log("\x1b[34m%s\x1b[0m", "Creating Symlinks");
-  await execute([
-    "cd packages/thirdweb",
-    "pnpm link",
-    "cd ../react",
-    "pnpm link",
-    "cd ../react-core",
-    "pnpm link",
-    "cd ../wallets",
-    "pnpm link",
-    "cd ../..",
-  ]);
+  if (isLegacy) {
+    await execute([
+      "cd legacy_packages/react",
+      "pnpm link",
+      "cd ../react-core",
+      "pnpm link",
+      "cd ../wallets",
+      "pnpm link",
+      "cd ../..",
+    ]);
 
-  // use react-core and wallets link in react package
-  await execute([
-    "cd packages/react",
-    "pnpm link @thirdweb-dev/react-core",
-    "pnpm link @thirdweb-dev/wallets",
-    "cd ../..",
-  ]);
+    // use react-core and wallets link in react package
+    await execute([
+      "cd packages/react",
+      "pnpm link @thirdweb-dev/react-core",
+      "pnpm link @thirdweb-dev/wallets",
+      "cd ../..",
+    ]);
+  } else {
+    await execute(["cd packages/thirdweb", "pnpm link", "cd ../../"]);
+  }
 
   // done
   console.log("\x1b[32m%s\x1b[0m", "\nHotlink Complete ✨\n\n");
diff --git a/scripts/hotlink/hotlink-revert.mjs b/scripts/hotlink/hotlink-revert.mjs
@@ -5,20 +5,26 @@ import { execute } from "./execute.mjs";
 
 async function script() {
   console.log(banner);
+  const isLegacy = process.argv[2] === "legacy";
 
   console.log("\x1b[34m%s\x1b[0m", "Reverting package json files");
-  updatePackages("original");
+  updatePackages("original", isLegacy);
 
   console.log("\x1b[34m%s\x1b[0m", "Removing Symlinks");
-  await execute([
-    "cd packages/react",
-    "pnpm unlink",
-    "cd ../react-core",
-    "pnpm unlink",
-    "cd ../wallets",
-    "pnpm unlink",
-    "cd ../..",
-  ]);
+
+  if (isLegacy) {
+    await execute([
+      "cd legacy_packages/react",
+      "pnpm unlink",
+      "cd ../react-core",
+      "pnpm unlink",
+      "cd ../wallets",
+      "pnpm unlink",
+      "cd ../..",
+    ]);
+  } else {
+    await execute(["cd packages/thirdweb", "pnpm unlink"]);
+  }
 
   console.log("\x1b[32m%s\x1b[0m", "\nHotlink Reverted\n\n");
 }

Original file line number	Diff line number	Diff line change
`@@ -77,6 +77,7 @@ export function ConnectButton(props: ConnectButtonProps) {`
`77`	`77`	`? undefined`
`78`	`78`	`: props.autoConnect?.timeout`
`79`	`79`	`}`
	`80`	`+ accountAbstraction={props.accountAbstraction}`
`80`	`81`	`/>`
`81`	`82`	`);`
`82`	`83`