[SDK] Options to custonize ViewAssets's tabs (#5126)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `ConnectButton` component by allowing customization of the asset tab display order in the "View Assets" section. Users can now specify whether to show the "Tokens" or "NFTs" tab first, and an empty array will hide the "View Funds" button.

### Detailed summary
- Added `assetTabs` prop to `ConnectButton` for customizing asset tab order.
- Updated `ViewAssets` to dynamically render tabs based on `assetTabs` prop.
- Modified `DetailsModal` to conditionally display "View Funds" button based on `assetTabs` length.
- Enhanced documentation with instructions for using the new feature.

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

<!-- end pr-codex -->

Author: kien-ngo

.changeset/mean-mails-exercise.md

@@ -0,0 +1,20 @@
+---
+"thirdweb": minor
+---
+
+Allow to customize the display order of Asset tabs
+
+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"]
+
+Note: If an empty array is passed, the [View Funds] button will be hidden
+
+```tsx
+<ConnectButton
+  client={client}
+  detailsModal={{
+    assetTabs: ["nft", "token"],
+  }}
+/>
+```

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

@@ -3,6 +3,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
 import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
 import type { FiatProvider } from "../../../../pay/utils/commonTypes.js";
+import type { AssetTabs } from "../../../../react/web/ui/ConnectWallet/screens/ViewAssets.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { Prettify } from "../../../../utils/type-utils.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -311,6 +312,13 @@ export type ConnectButton_detailsModalOptions = {
    * 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"]
+   * Note: If an empty array is passed, the [View Funds] button will be hidden
+   */
+  assetTabs?: AssetTabs[];
 };
 
 /**

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

@@ -247,6 +247,20 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * />
  * ```
  *
+ * ### Customizing the orders of the tabs in the [View Funds] screen
+ * 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"]
+ * Note: If an empty array is passed, the [View Funds] button will be hidden
+ *
+ * ```tsx
+ * <ConnectButton
+ *   client={client}
+ *   detailsModal={{
+ *     assetTabs: ["nft", "token"],
+ *   }}
+ * />
+ * ```
+ *
  * @param props
  * Props for the `ConnectButton` component
  *

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

@@ -109,7 +109,7 @@ import { ManageWalletScreen } from "./screens/ManageWalletScreen.js";
 import { PrivateKey } from "./screens/PrivateKey.js";
 import { ReceiveFunds } from "./screens/ReceiveFunds.js";
 import { SendFunds } from "./screens/SendFunds.js";
-import { ViewAssets } from "./screens/ViewAssets.js";
+import { type AssetTabs, ViewAssets } from "./screens/ViewAssets.js";
 import { ViewNFTs } from "./screens/ViewNFTs.js";
 import { ViewTokens } from "./screens/ViewTokens.js";
 import { WalletConnectReceiverScreen } from "./screens/WalletConnectReceiverScreen.js";
@@ -170,6 +170,7 @@ export const ConnectedWalletDetails: React.FC<{
         chains={props.chains}
         displayBalanceToken={props.detailsButton?.displayBalanceToken}
         connectOptions={props.connectOptions}
+        assetTabs={props.detailsModal?.assetTabs}
       />,
     );
   }
@@ -284,6 +285,7 @@ function DetailsModal(props: {
   chains: Chain[];
   displayBalanceToken?: Record<number, string>;
   connectOptions: DetailsModalConnectOptions | undefined;
+  assetTabs?: AssetTabs[];
 }) {
   const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
   const { disconnect } = useDisconnect();
@@ -627,21 +629,24 @@ function DetailsModal(props: {
           </MenuButton>
 
           {/* View Funds */}
-          <MenuButton
-            onClick={() => {
-              setScreen("view-assets");
-            }}
-            style={{
-              fontSize: fontSize.sm,
-            }}
-          >
-            <CoinsIcon size={iconSize.md} />
-            <Text color="primaryText">
-              {props.supportedNFTs
-                ? locale.viewFunds.viewAssets
-                : locale.viewFunds.title}
-            </Text>
-          </MenuButton>
+          {/* Hide the View Funds button if the assetTabs props is set to an empty array */}
+          {(props.assetTabs === undefined || props.assetTabs.length) && (
+            <MenuButton
+              onClick={() => {
+                setScreen("view-assets");
+              }}
+              style={{
+                fontSize: fontSize.sm,
+              }}
+            >
+              <CoinsIcon size={iconSize.md} />
+              <Text color="primaryText">
+                {props.supportedNFTs
+                  ? locale.viewFunds.viewAssets
+                  : locale.viewFunds.title}
+              </Text>
+            </MenuButton>
+          )}
 
           {/* Manage Wallet */}
           <MenuButton
@@ -799,6 +804,7 @@ function DetailsModal(props: {
           setScreen={setScreen}
           client={client}
           connectLocale={locale}
+          assetTabs={props.detailsModal?.assetTabs}
         />
       );
     } else {
@@ -1458,6 +1464,13 @@ export type UseWalletDetailsModalOptions = {
    * By default the "Buy Funds" button is shown.
    */
   hideBuyFunds?: boolean;
+
+  /**
+   * 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"]
+   * Note: If an empty array is passed, the [View Funds] button will be hidden
+   */
+  assetTabs?: AssetTabs[];
 };
 
 /**
@@ -1515,6 +1528,7 @@ export function useWalletDetailsModal() {
               hideBuyFunds: props.hideBuyFunds,
               hideReceiveFunds: props.hideReceiveFunds,
               hideSendFunds: props.hideSendFunds,
+              assetTabs: props.assetTabs,
             }}
             displayBalanceToken={props.displayBalanceToken}
             theme={props.theme || "dark"}

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { type Theme, iconSize } from "../../../../core/design-system/index.js";
 import type {
@@ -15,6 +15,29 @@ import { ViewNFTsContent } from "./ViewNFTs.js";
 import { ViewTokensContent } from "./ViewTokens.js";
 import type { WalletDetailsModalScreen } from "./types.js";
 
+/**
+ * @internal
+ */
+export type AssetTabs = "token" | "nft";
+
+const TokenTab = {
+  label: (
+    <span className="flex gap-2">
+      <CoinsIcon size={iconSize.sm} /> Tokens
+    </span>
+  ),
+  value: "Tokens",
+};
+
+const NftTab = {
+  label: (
+    <span className="flex gap-2">
+      <ImageIcon size={iconSize.sm} /> NFTs
+    </span>
+  ),
+  value: "NFTs",
+};
+
 /**
  * @internal
  */
@@ -26,9 +49,29 @@ export function ViewAssets(props: {
   setScreen: (screen: WalletDetailsModalScreen) => void;
   client: ThirdwebClient;
   connectLocale: ConnectLocale;
+  assetTabs?: AssetTabs[];
 }) {
-  const [activeTab, setActiveTab] = useState("Tokens");
   const { connectLocale } = props;
+  const options = useMemo(() => {
+    if (!props.assetTabs) {
+      return [TokenTab, NftTab];
+    }
+    if (!props.assetTabs.length) {
+      return [];
+    }
+    const tabs = [];
+    for (const item of props.assetTabs) {
+      if (item === "token") {
+        tabs.push(TokenTab);
+      } else if (item === "nft") {
+        tabs.push(NftTab);
+      }
+    }
+    return tabs;
+  }, [props.assetTabs]);
+
+  // Since `options` is now a dynamic value, the default active tab is set to the value of the first tab in `options`
+  const [activeTab, setActiveTab] = useState(options[0]?.value || "Tokens");
 
   return (
     <Container
@@ -52,28 +95,7 @@ export function ViewAssets(props: {
         }}
       >
         <Spacer y="md" />
-        <Tabs
-          options={[
-            {
-              label: (
-                <span className="flex gap-2">
-                  <CoinsIcon size={iconSize.sm} /> Tokens
-                </span>
-              ),
-              value: "Tokens",
-            },
-            {
-              label: (
-                <span className="flex gap-2">
-                  <ImageIcon size={iconSize.sm} /> NFTs
-                </span>
-              ),
-              value: "NFTs",
-            },
-          ]}
-          selected={activeTab}
-          onSelect={setActiveTab}
-        >
+        <Tabs options={options} selected={activeTab} onSelect={setActiveTab}>
           <Container
             scrollY
             style={{