[SDK] Add onClose callback to details modal (#5605)

CNCT-2444
CNCT-2444

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily introduces an `onClose` callback for the `ConnectButton` component's details modal, enhancing its functionality. It also improves the rendering of various components and adds tests for new features.

### Detailed summary
- Added `onClose` callback to `ConnectButtonProps` for modal closure.
- Updated `ConnectButton` to utilize the `onClose` callback.
- Improved test coverage for `NetworkSwitcherButton` and `ChainIcon`.
- Enhanced `fetchChainIcon` functionality to handle various icon resolvers.
- Introduced `ChainActiveDot` for visual representation of active chains.
- Updated `NetworkSelector` and `DetailsModal` components for better user experience.

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

<!-- end pr-codex -->

Author: kien-ngo

.changeset/metal-mails-ring.md

@@ -0,0 +1,20 @@
+---
+"thirdweb": patch
+---
+
+- Add onClose callback to Connect Details modal
+
+```tsx
+<ConnectButton
+  detailsModal={{
+    onClose: (screen: string) => {
+      // The last screen name that was being shown when user closed the modal
+      console.log({ screen });
+    }
+  }}
+/>
+```
+
+- Small fix for ChainIcon: Always resolve IPFS URI
+
+- Improve test coverage

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -339,6 +339,12 @@ export type ConnectButton_detailsModalOptions = {
      */
     allowLinkingProfiles?: boolean;
   };
+
+  /**
+   * @param screen The screen's name that was last shown when user closed the modal
+   * @returns
+   */
+  onClose?: (screen: string) => void;
 };
 
 /**

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

@@ -262,6 +262,17 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * />
  * ```
  *
+ * ### Callback for when the details modal is closed
+ * ```tsx
+ * <ConnectButton
+ *   detailsModal={{
+ *     onClose: (screen: string) => {
+ *       console.log({ screen });
+ *     }
+ *   }}
+ * />
+ * ```
+ *
  * @param props
  * Props for the `ConnectButton` component
  *

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

@@ -21,6 +21,8 @@ import {
   ConnectedWalletDetails,
   DetailsModal,
   InAppWalletUserInfo,
+  NetworkSwitcherButton,
+  StyledChevronRightIcon,
   SwitchNetworkButton,
   detailsBtn_formatFiatBalanceForButton,
   detailsBtn_formatTokenBalanceForButton,
@@ -584,4 +586,57 @@ describe("Details Modal", () => {
       expect(closeModalMock).toHaveBeenCalled();
     });
   });
+
+  it("NetworkSwitcherButton should not render if no active chain", () => {
+    const { container } = render(
+      <AccountProvider address={VITALIK_WALLET} client={client}>
+        <NetworkSwitcherButton
+          setScreen={(scr) => console.log(scr)}
+          disableSwitchChain={false}
+          displayBalanceToken={undefined}
+          client={client}
+        />
+      </AccountProvider>,
+    );
+
+    const element = container.querySelector(
+      ".tw-internal-network-switcher-button",
+    );
+    expect(element).toBeFalsy();
+  });
+
+  it("NetworkSwitcherButton should render if there is an active chain", async () => {
+    vi.mock(
+      "../../../../react/core/hooks/wallets/useActiveWalletChain.js",
+      () => ({
+        useActiveWalletChain: vi.fn(),
+      }),
+    );
+    vi.mocked(useActiveWalletChain).mockReturnValue(base);
+    const { container } = render(
+      <AccountProvider address={VITALIK_WALLET} client={client}>
+        <NetworkSwitcherButton
+          setScreen={(scr) => console.log(scr)}
+          disableSwitchChain={false}
+          displayBalanceToken={undefined}
+          client={client}
+        />
+      </AccountProvider>,
+    );
+    await waitFor(
+      () => {
+        const element = container.querySelector(
+          ".tw-internal-network-switcher-button",
+        );
+        expect(element).toBeTruthy();
+      },
+      { timeout: 2000 },
+    );
+  });
+
+  it("StyledChevronRightIcon should render a svg element", () => {
+    const { container } = render(<StyledChevronRightIcon />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeTruthy();
+  });
 });