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"

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;
   };