fix(sdk): disconnect smart wallet when signer is disconnected

changeset

Author: gregfromstl

.changeset/strong-meals-remain.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix: Disconnect smart account when account signer is disconnected

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -343,6 +343,13 @@ function DetailsModal(props: {
     props.onDisconnect(info);
   }
 
+  useEffect(() => {
+    if (!activeAccount) {
+      setIsOpen(false);
+      props.closeModal();
+    }
+  }, [activeAccount, props.closeModal]);
+
   const networkSwitcherButton = (
     <MenuButton
       type="button"
@@ -993,12 +1000,11 @@ function DetailsModal(props: {
               }
             }}
           >
-            <AccountProvider
-              address={activeAccount?.address || ""}
-              client={client}
-            >
-              {content}
-            </AccountProvider>
+            {activeAccount?.address && (
+              <AccountProvider address={activeAccount.address} client={client}>
+                {content}
+              </AccountProvider>
+            )}
           </Modal>
         </ScreenSetupContext.Provider>
       </WalletUIStatesProvider>

packages/thirdweb/src/react/web/ui/prebuilt/Account/provider.test.tsx

@@ -35,4 +35,20 @@ describe.runIf(process.env.TW_SECRET_KEY)("AccountProvider component", () => {
       }),
     ).toBeInTheDocument();
   });
+
+  it("should throw an error if no address is provided", () => {
+    expect(() => {
+      render(
+        <AccountProvider
+          // biome-ignore lint/suspicious/noExplicitAny: testing invalid input
+          address={undefined as any}
+          client={TEST_CLIENT}
+        >
+          <AccountAddress />
+        </AccountProvider>,
+      );
+    }).toThrowError(
+      "AccountProvider: No address passed. Ensure an address is always provided to the AccountProvider",
+    );
+  });
 });

packages/thirdweb/src/react/web/ui/prebuilt/Account/provider.tsx

@@ -48,6 +48,11 @@ const AccountProviderContext = /* @__PURE__ */ createContext<
 export function AccountProvider(
   props: React.PropsWithChildren<AccountProviderProps>,
 ) {
+  if (!props.address) {
+    throw new Error(
+      "AccountProvider: No address passed. Ensure an address is always provided to the AccountProvider",
+    );
+  }
   return (
     <AccountProviderContext.Provider value={props}>
       {props.children}

packages/thirdweb/src/wallets/in-app/web/lib/iframe-wallet.ts

@@ -316,7 +316,7 @@ export class IFrameWallet implements IWebWallet {
                 parsedTypedData.types as SignerProcedureTypes["signTypedDataV4"]["types"],
               message:
                 parsedTypedData.message as SignerProcedureTypes["signTypedDataV4"]["message"],
-              chainId: chainId || 1,
+              chainId: Number(chainId) || 1,
               partnerId,
               rpcEndpoint: `https://${chainId}.${RPC_URL}`, // TODO (ew) shouldnt be needed
             },

packages/thirdweb/src/wallets/manager/connection-manager.test.ts

@@ -44,7 +44,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("Connection Manager", () => {
     await manager.connect(wallet, { client, onConnect });
 
     expect(onConnect).toHaveBeenCalledWith(wallet);
-    expect(storage.setItem).toHaveBeenCalledWith(expect.any(String), wallet.id);
+    expect(storage.setItem).toHaveBeenCalled();
   });
 
   it("handleConnection should connect smart wallet", async () => {
@@ -65,4 +65,22 @@ describe.runIf(process.env.TW_SECRET_KEY)("Connection Manager", () => {
 
     expect(manager.connectedWallets.getValue()).toContain(wallet);
   });
+
+  it("should disconnect the active wallet when the EOA disconnects", async () => {
+    const manager = createConnectionManager(storage);
+
+    const smartWallet = await manager.handleConnection(wallet, {
+      client,
+      accountAbstraction: smartWalletOptions,
+    });
+
+    expect(manager.activeWalletStore.getValue()).toBe(smartWallet);
+
+    await wallet.disconnect();
+
+    expect(wallet.subscribe).toHaveBeenCalledWith(
+      "disconnect",
+      expect.any(Function),
+    );
+  });
 });

packages/thirdweb/src/wallets/manager/index.ts

@@ -131,7 +131,7 @@ export function createConnectionManager(storage: AsyncStorage) {
     const activeWallet = await (async () => {
       if (options?.accountAbstraction && !hasSmartAccount(wallet)) {
         return await handleSmartWalletConnection(
-          account,
+          wallet,
           options.client,
           options.accountAbstraction,
         );
@@ -140,12 +140,10 @@ export function createConnectionManager(storage: AsyncStorage) {
       }
     })();
 
-    // add personal wallet to connected wallets list
-    addConnectedWallet(wallet);
+    await storage.setItem(LAST_ACTIVE_EOA_ID, wallet.id);
 
-    if (wallet.id !== "smart") {
-      await storage.setItem(LAST_ACTIVE_EOA_ID, wallet.id);
-    }
+    // add personal wallet to connected wallets list even if it's not the active one
+    addConnectedWallet(wallet);
 
     handleSetActiveWallet(activeWallet);
 
@@ -159,10 +157,15 @@ export function createConnectionManager(storage: AsyncStorage) {
   };
 
   const handleSmartWalletConnection = async (
-    signer: Account,
+    eoaWallet: Wallet,
     client: ThirdwebClient,
     options: SmartWalletOptions,
   ) => {
+    const signer = eoaWallet.getAccount();
+    if (!signer) {
+      throw new Error("Can not set a wallet without an account as active");
+    }
+
     const wallet = smartWallet(options);
 
     await wallet.connect({
@@ -171,6 +174,15 @@ export function createConnectionManager(storage: AsyncStorage) {
       chain: options.chain,
     });
 
+    // Disconnect the active wallet when the EOA disconnects if it the active wallet is a smart wallet
+    const disconnectUnsub = eoaWallet.subscribe("disconnect", () => {
+      handleDisconnect();
+    });
+    const handleDisconnect = () => {
+      disconnectUnsub();
+      onWalletDisconnect(wallet);
+    };
+
     return wallet;
   };