[SDK] Fix: Disconnect smart wallet when signer is disconnected (#5617)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on improving error handling and connection management for smart wallets within the `thirdweb` package, enhancing user experience by ensuring proper disconnection and validation of address inputs.

### Detailed summary
- Added error handling in `AccountProvider` for missing addresses.
- Implemented disconnection logic for smart wallets in `handleSmartWalletConnection`.
- Updated tests to cover new error scenarios and connection handling.
- Refactored `DetailsModal` to manage modal state based on active accounts.
- Improved test coverage for `DetailsModal` and connection manager functionalities.

> The following files were skipped due to too many changes: `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: gregfromstl

.changeset/strong-meals-remain.md

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

packages/thirdweb/package.json

@@ -309,6 +309,7 @@
     "test:watch": "vitest -c ./test/vitest.config.ts dev",
     "test": "vitest run -c ./test/vitest.config.ts --coverage",
     "test:cov": "vitest dev -c ./test/vitest.config.ts --coverage",
+    "test:ui": "vitest dev -c ./test/vitest.config.ts --coverage --ui",
     "test:dev": "vitest run -c ./test/vitest.config.ts",
     "test:react": "vitest run -c ./test/vitest.config.ts dev --ui src/react",
     "typedoc": "bun run scripts/typedoc.mjs",

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

@@ -0,0 +1,107 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "../../../../../test/src/react-render.js";
+import { TEST_CLIENT } from "../../../../../test/src/test-clients.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { DetailsModal } from "./Details.js";
+import { getConnectLocale } from "./locale/getConnectLocale.js";
+
+vi.mock("../../../core/hooks/wallets/useActiveAccount.js", () => ({
+  useActiveAccount: vi.fn(),
+}));
+
+const mockDetailsModalOptions = {};
+const mockSupportedTokens = {};
+const mockSupportedNFTs = {};
+// biome-ignore lint/suspicious/noExplicitAny: Mock
+const mockChains: any[] = [];
+const mockDisplayBalanceToken = {};
+const mockConnectOptions = {};
+// biome-ignore lint/suspicious/noExplicitAny: Mock
+const mockAssetTabs: any[] = [];
+const mockOnDisconnect = vi.fn();
+
+describe("Details Component", () => {
+  beforeEach(() => {
+    // Mock the animate method
+    HTMLDivElement.prototype.animate = vi.fn().mockReturnValue({
+      onfinish: vi.fn(),
+    });
+  });
+
+  it("should close the modal when activeAccount is falsy", async () => {
+    const closeModalMock = vi.fn();
+    const locale = await getConnectLocale("en_US");
+
+    vi.mocked(useActiveAccount).mockReturnValue(undefined);
+
+    render(
+      <DetailsModal
+        client={TEST_CLIENT}
+        locale={locale}
+        detailsModal={mockDetailsModalOptions}
+        theme="light"
+        supportedTokens={mockSupportedTokens}
+        supportedNFTs={mockSupportedNFTs}
+        closeModal={closeModalMock}
+        onDisconnect={mockOnDisconnect}
+        chains={mockChains}
+        displayBalanceToken={mockDisplayBalanceToken}
+        connectOptions={mockConnectOptions}
+        assetTabs={mockAssetTabs}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(closeModalMock).toHaveBeenCalled();
+    });
+  });
+
+  it("should render the DetailsModal with default props", async () => {
+    const closeModalMock = vi.fn();
+    const locale = await getConnectLocale("en_US");
+
+    render(
+      <DetailsModal
+        client={TEST_CLIENT}
+        locale={locale}
+        theme="light"
+        closeModal={closeModalMock}
+        onDisconnect={mockOnDisconnect}
+        chains={mockChains}
+        connectOptions={mockConnectOptions}
+      />,
+    );
+
+    // Add assertions to check if the modal is rendered correctly
+    expect(screen.getByText("Connect Modal")).toBeInTheDocument();
+  });
+
+  it("should call closeModal when the close button is clicked", async () => {
+    const closeModalMock = vi.fn();
+    const locale = await getConnectLocale("en_US");
+
+    render(
+      <DetailsModal
+        client={TEST_CLIENT}
+        locale={locale}
+        theme="light"
+        closeModal={closeModalMock}
+        onDisconnect={mockOnDisconnect}
+        chains={mockChains}
+        connectOptions={mockConnectOptions}
+      />,
+    );
+
+    // Simulate clicking the close button
+    fireEvent.click(screen.getByRole("button", { name: /close/i }));
+
+    await waitFor(() => {
+      expect(closeModalMock).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -9,7 +9,7 @@ import {
   TextAlignJustifyIcon,
 } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
-import { type JSX, useContext, useEffect, useState } from "react";
+import { type JSX, useCallback, useContext, useEffect, useState } from "react";
 import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
@@ -291,7 +291,10 @@ export const ConnectedWalletDetails: React.FC<{
   );
 };
 
-function DetailsModal(props: {
+/**
+ * @internal
+ */
+export function DetailsModal(props: {
   client: ThirdwebClient;
   locale: ConnectLocale;
   detailsModal?: ConnectButton_detailsModalOptions;
@@ -330,19 +333,25 @@ function DetailsModal(props: {
     wallets: activeWallet ? [activeWallet] : [],
   });
 
-  function closeModal() {
+  const closeModal = useCallback(() => {
     setIsOpen(false);
     onModalUnmount(() => {
       props.closeModal();
     });
-  }
+  }, [props.closeModal]);
 
   function handleDisconnect(info: { wallet: Wallet; account: Account }) {
     setIsOpen(false);
     props.closeModal();
     props.onDisconnect(info);
   }
 
+  useEffect(() => {
+    if (!activeAccount) {
+      closeModal();
+    }
+  }, [activeAccount, closeModal]);
+
   const networkSwitcherButton = (
     <MenuButton
       type="button"
@@ -691,20 +700,6 @@ function DetailsModal(props: {
             <Text color="primaryText">{props.locale.manageWallet.title}</Text>
           </MenuButton>
 
-          {/* Switch to Personal Wallet  */}
-          {/* {personalWallet &&
-            !props.detailsModal?.hideSwitchToPersonalWallet && (
-              <AccountSwitcher
-                wallet={personalWallet}
-                name={locale.personalWallet}
-              />
-            )} */}
-
-          {/* Switch to Smart Wallet */}
-          {/* {smartWallet && (
-            <AccountSwitcher name={locale.smartWallet} wallet={smartWallet} />
-          )} */}
-
           {/* Request Testnet funds */}
           {(props.detailsModal?.showTestnetFaucet ?? false) &&
             (chainFaucetsQuery.faucets.length > 0 ||
@@ -993,12 +988,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}