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

Author: gregfromstl

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/react/web/ui/prebuilt/Account/address.tsx

@@ -59,6 +59,9 @@ export function AccountAddress({
   ...restProps
 }: AccountAddressProps) {
   const { address } = useAccountContext();
+  if (!address) {
+    return null;
+  }
   const value = formatFn ? formatFn(address) : address;
   return <span {...restProps}>{value}</span>;
 }

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

@@ -166,6 +166,11 @@ export function AccountAvatar({
   const avatarQuery = useQuery({
     queryKey: ["account-avatar", address],
     queryFn: async (): Promise<string> => {
+      if (!address) {
+        throw new Error(
+          "No address found, please make sure you only use AccountAvatar when an account is active",
+        );
+      }
       const [socialData, ensName] = await Promise.all([
         getSocialProfiles({ address, client }),
         resolveName({

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

@@ -172,6 +172,11 @@ export function AccountBalance({
       if (!client) {
         throw new Error("client is required");
       }
+      if (!address) {
+        throw new Error(
+          "Can not fetch balance without an address, please ensure AccountBalance is only rendered when an address exists",
+        );
+      }
       return getWalletBalance({
         chain: chainToLoad,
         client,

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

@@ -9,5 +9,10 @@ import { useAccountContext } from "./provider.js";
  */
 export function AccountBlobbie(props: Omit<BlobbieProps, "address">) {
   const { address } = useAccountContext();
+  if (!address) {
+    throw new Error(
+      "Can not render AccountBlobbie without an address, please ensure AccountBlobbie is only rendered when an address exists",
+    );
+  }
   return <Blobbie {...props} address={address} />;
 }

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

@@ -140,6 +140,12 @@ export function AccountName({
   const nameQuery = useQuery({
     queryKey: ["account-name", address],
     queryFn: async () => {
+      if (!address) {
+        throw new Error(
+          "Can not resolve account name without an address, please ensure AccountName is only rendered when an address exists",
+        );
+      }
+
       const [socialData, ensName] = await Promise.all([
         getSocialProfiles({ address, client }),
         resolveName({

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

@@ -13,7 +13,7 @@ export type AccountProviderProps = {
   /**
    * The user's wallet address
    */
-  address: Address;
+  address: Address | undefined;
   /**
    * thirdweb Client
    */

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,13 +140,9 @@ export function createConnectionManager(storage: AsyncStorage) {
       }
     })();
 
-    // add personal wallet to connected wallets list
+    // add personal wallet to connected wallets list even if it's not the active one
     addConnectedWallet(wallet);
 
-    if (wallet.id !== "smart") {
-      await storage.setItem(LAST_ACTIVE_EOA_ID, wallet.id);
-    }
-
     handleSetActiveWallet(activeWallet);
 
     wallet.subscribe("accountChanged", async () => {
@@ -159,10 +155,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 +172,17 @@ export function createConnectionManager(storage: AsyncStorage) {
       chain: options.chain,
     });
 
+    await storage.setItem(LAST_ACTIVE_EOA_ID, eoaWallet.id);
+
+    // 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;
   };