more tests

Author: gregfromstl

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

@@ -0,0 +1,54 @@
+import { beforeEach, describe, it, vi } from "vitest";
+import { render } 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}
+      />,
+    );
+  });
+});

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,12 +333,12 @@ 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);
@@ -345,10 +348,9 @@ function DetailsModal(props: {
 
   useEffect(() => {
     if (!activeAccount) {
-      setIsOpen(false);
-      props.closeModal();
+      closeModal();
     }
-  }, [activeAccount, props.closeModal]);
+  }, [activeAccount, closeModal]);
 
   const networkSwitcherButton = (
     <MenuButton
@@ -698,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 ||

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

@@ -163,7 +163,7 @@ export function createConnectionManager(storage: AsyncStorage) {
   ) => {
     const signer = eoaWallet.getAccount();
     if (!signer) {
-      throw new Error("Can not set a wallet without an account as active");
+      throw new Error("Cannot set a wallet without an account as active");
     }
 
     const wallet = smartWallet(options);
@@ -196,7 +196,7 @@ export function createConnectionManager(storage: AsyncStorage) {
   const handleSetActiveWallet = (activeWallet: Wallet) => {
     const account = activeWallet.getAccount();
     if (!account) {
-      throw new Error("Can not set a wallet without an account as active");
+      throw new Error("Cannot set a wallet without an account as active");
     }
 
     // also add it to connected wallets if it's not already there