[BLD-125] SDK: Fix missing props for details modal on useWalletDetailsModal hook (#7865)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `useWalletDetailsModal` hook by adding missing properties for better configuration of the details modal, along with adjustments to the UI components for displaying wallet details.

### Detailed summary
- Added missing props for the details modal in the `useWalletDetailsModal` hook.
- Updated `DetailsModal` to include `manageWallet`, `showBalanceInFiat`, and `hiddenWallets` props.
- Modified the `TokenTab` and `NftTab` components to use inline styles instead of utility classes.
- Enhanced storybook stories for `useWalletDetailsModal` with various configurations and examples.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- New Features
  - Wallet Details modal: show balances in fiat, configure manage-wallet options, hide specific wallets, and pass connect options from the switcher.
  - Assets view: default active tab now adapts dynamically based on available tabs.
- Documentation
  - Added comprehensive Storybook examples for the wallet details modal covering configuration, theming, locales, and callbacks.
  - Clarified notes to keep related modal options in sync.
- Style
  - Updated tab label styling to inline CSS for consistent layout.
- Chores
  - Added a patch-level changeset.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

.changeset/swift-toes-build.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add missing props for details modal on `useWalletDetailsModal` hook

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

@@ -198,6 +198,9 @@ export type TransactionOptions = {
   transaction: PreparedTransaction;
 };
 
+// Note: When adding props to ConnectButton_connectButtonOptions,
+// make sure to also add it in UseWalletDetailsModalOptions for useWalletDetailsModal hook
+
 /**
  * Options for configuring the `ConnectButton`'s Connect Button
  * @connectWallet

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

@@ -179,6 +179,7 @@ export const ConnectedWalletDetails: React.FC<{
         supportedNFTs={props.supportedNFTs}
         supportedTokens={props.supportedTokens}
         theme={props.theme}
+        showBalanceInFiat={props.detailsButton?.showBalanceInFiat}
       />,
     );
   }
@@ -898,6 +899,7 @@ export function DetailsModal(props: {
         onBack={() => {
           setScreen("main");
         }}
+        manageWallet={props.detailsModal?.manageWallet}
         setScreen={setScreen}
       />
     );
@@ -975,6 +977,7 @@ export function DetailsModal(props: {
         client={client}
         hiddenWallets={props.detailsModal?.hiddenWallets}
         locale={locale.id}
+        connectOptions={props.connectOptions}
         onCancel={() => setScreen("main")}
         onSuccess={() => setScreen("main")}
         supportedTokens={props.supportedTokens}
@@ -1594,6 +1597,26 @@ export type UseWalletDetailsModalOptions = {
 
   /**
    * Render custom UI at the bottom of the Details Modal
+   * @param props - props passed to the footer component which includes a function to close the modal
+   * @example
+   * ```tsx
+   * function Example() {
+   *   const detailsModal = useWalletDetailsModal();
+   *
+   *   return (
+   *     <button onClick={() => detailsModal.open({
+   *       client,
+   *       footer: CustomFooter,
+   *     })}>
+   *         wallet details
+   *     </button>
+   *   )
+   * }
+   *
+   * function CustomFooter(props: { close: () => void }) {
+   *   return <div> ... </div>
+   * }
+   * ```
    */
   footer?: (props: { close: () => void }) => JSX.Element;
 
@@ -1653,6 +1676,11 @@ export type UseWalletDetailsModalOptions = {
    */
   hideBuyFunds?: boolean;
 
+  /**
+   * All wallet IDs included in this array will be hidden from wallet selection when connected.
+   */
+  hiddenWallets?: WalletId[];
+
   /**
    * When you click on "View Assets", by default the "Tokens" tab is shown first.
    * If you want to show the "NFTs" tab first, change the order of the asset tabs to: ["nft", "token"]
@@ -1666,6 +1694,18 @@ export type UseWalletDetailsModalOptions = {
    */
   showBalanceInFiat?: SupportedFiatCurrency;
 
+  /**
+   * Configure options for managing the connected wallet.
+   */
+  manageWallet?: {
+    /**
+     * Allow linking other profiles to the connected wallet.
+     *
+     * By default it is `true`.
+     */
+    allowLinkingProfiles?: boolean;
+  };
+
   /**
    * The callback function for when the modal is closed
    * @param screen The name of the screen that was being shown when user closed the modal
@@ -1729,6 +1769,9 @@ export function useWalletDetailsModal() {
             closeModal={closeModal}
             connectOptions={props.connectOptions}
             detailsModal={{
+              showBalanceInFiat: props.showBalanceInFiat,
+              hiddenWallets: props.hiddenWallets,
+              manageWallet: props.manageWallet,
               assetTabs: props.assetTabs,
               connectedAccountAvatarUrl: props.connectedAccountAvatarUrl,
               connectedAccountName: props.connectedAccountName,

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewAssets.tsx

@@ -22,7 +22,7 @@ export type AssetTabs = "token" | "nft";
 
 const TokenTab = {
   label: (
-    <span className="flex gap-2">
+    <span style={{ display: "flex", gap: "8px", alignItems: "center" }}>
       <CoinsIcon size={iconSize.sm} /> Tokens
     </span>
   ),
@@ -31,7 +31,7 @@ const TokenTab = {
 
 const NftTab = {
   label: (
-    <span className="flex gap-2">
+    <span style={{ display: "flex", gap: "8px", alignItems: "center" }}>
       <ImageIcon size={iconSize.sm} /> NFTs
     </span>
   ),

packages/thirdweb/src/stories/ConnectWallet/useWalletDetailsModal.stories.tsx

@@ -0,0 +1,192 @@
+import type { Meta } from "@storybook/react-vite";
+import { base } from "../../chains/chain-definitions/base.js";
+import { ethereum } from "../../chains/chain-definitions/ethereum.js";
+import { polygon } from "../../chains/chain-definitions/polygon.js";
+import { lightTheme } from "../../react/core/design-system/index.js";
+import { useActiveAccount } from "../../react/core/hooks/wallets/useActiveAccount.js";
+import { ConnectButton } from "../../react/web/ui/ConnectWallet/ConnectButton.js";
+import {
+  type UseWalletDetailsModalOptions,
+  useWalletDetailsModal,
+} from "../../react/web/ui/ConnectWallet/Details.js";
+import { storyClient } from "../utils.js";
+
+const meta: Meta = {
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  title: "Hooks/useWalletDetailsModal",
+  decorators: [
+    (Story) => {
+      return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+          <ConnectButton client={storyClient} autoConnect={true} />
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+export default meta;
+
+export function BasicUsage() {
+  return <Variant client={storyClient} />;
+}
+
+export function DisableLinkingProfiles() {
+  return (
+    <Variant
+      client={storyClient}
+      manageWallet={{ allowLinkingProfiles: false }}
+    />
+  );
+}
+
+export function HideSwitchWallet() {
+  return <Variant client={storyClient} hideSwitchWallet={true} />;
+}
+
+export function HideDisconnect() {
+  return <Variant client={storyClient} hideDisconnect={true} />;
+}
+
+export function HideSendFunds() {
+  return <Variant client={storyClient} hideSendFunds={true} />;
+}
+
+export function HideReceiveFunds() {
+  return <Variant client={storyClient} hideReceiveFunds={true} />;
+}
+
+export function HideBuyFunds() {
+  return <Variant client={storyClient} hideBuyFunds={true} />;
+}
+
+export function HideAllTopButtons() {
+  return (
+    <Variant
+      client={storyClient}
+      hideSendFunds={true}
+      hideReceiveFunds={true}
+      hideBuyFunds={true}
+    />
+  );
+}
+
+export function Chains() {
+  return <Variant client={storyClient} chains={[ethereum, polygon, base]} />;
+}
+
+export function Locale() {
+  return <Variant client={storyClient} locale="ja_JP" />;
+}
+
+export function ConnectedAccountAvatarUrl() {
+  return (
+    <Variant
+      client={storyClient}
+      connectedAccountAvatarUrl="https://thirdweb.com/favicon.ico"
+    />
+  );
+}
+
+export function ConnectedAccountName() {
+  return <Variant client={storyClient} connectedAccountName="test" />;
+}
+
+export function ShowBalanceInFiat() {
+  return <Variant client={storyClient} showBalanceInFiat="usd" />;
+}
+
+export function AssetTabs() {
+  return <Variant client={storyClient} assetTabs={["nft", "token"]} />;
+}
+
+export function OnClose() {
+  return (
+    <Variant
+      client={storyClient}
+      onClose={() => {
+        alert("onClose");
+      }}
+    />
+  );
+}
+
+export function Footer() {
+  return (
+    <Variant
+      client={storyClient}
+      footer={(props) => (
+        <div
+          style={{
+            outline: "1px solid red",
+            padding: "16px",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: "10px",
+          }}
+        >
+          custom footer
+          <button onClick={props.close} type="button">
+            close
+          </button>
+        </div>
+      )}
+    />
+  );
+}
+
+export function ConnectOptions() {
+  return (
+    <Variant
+      client={storyClient}
+      connectOptions={{
+        showAllWallets: false,
+      }}
+    />
+  );
+}
+
+export function LightTheme() {
+  return <Variant client={storyClient} theme="light" />;
+}
+
+export function CustomLightTheme() {
+  return (
+    <Variant
+      client={storyClient}
+      theme={lightTheme({
+        colors: {
+          modalBg: "#FFFFF0",
+          tertiaryBg: "#DBE4C9",
+          borderColor: "#8AA624",
+          secondaryText: "#3E3F29",
+          accentText: "#E43636",
+        },
+      })}
+    />
+  );
+}
+
+function Variant(params: UseWalletDetailsModalOptions) {
+  const account = useActiveAccount();
+  const detailsModal = useWalletDetailsModal();
+
+  if (!account) {
+    return <p> no account </p>;
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        detailsModal.open(params);
+      }}
+    >
+      test
+    </button>
+  );
+}