Update

Author: kien-ngo

.changeset/seven-singers-bathe.md

@@ -0,0 +1,15 @@
+---
+"thirdweb": minor
+---
+
+Add option to customize ViewAssets tabs
+
+When you click on "View Assets", by default the "Tokens" tab is shown first. If you want to show the "NFTs" tab first, set this prop to true
+```tsx
+<ConnectButton
+  client={client}
+  detailsModal={{
+    swapAssetTabsPositions: true,
+  }}
+/>
+```

apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx

@@ -110,6 +110,20 @@ export function RightSection(props: {
             }
           : undefined
       }
+      supportedNFTs={{
+        "84532": ["0x638263e3eAa3917a53630e61B1fBa685308024fa"],
+        "11155111": ["0x7196e8Fb8DDb8b1Da9133BD876C6aEDB8f5D7995"],
+      }}
+      supportedTokens={{
+        11155111: [
+          {
+            name: "TWCOIN",
+            symbol: "TWCON",
+            address: "0x7196e8Fb8DDb8b1Da9133BD876C6aEDB8f5D7995",
+          },
+        ],
+      }}
+      detailsModal={{ assetTabs: ["nft", "token"] }}
     />
   );
 

apps/playground-web/src/components/styled-connect-button.tsx

@@ -30,7 +30,18 @@ export function StyledConnectButton(
       wallets={WALLETS}
       supportedNFTs={{
         "84532": ["0x638263e3eAa3917a53630e61B1fBa685308024fa"],
+        "11155111": ["0x7196e8Fb8DDb8b1Da9133BD876C6aEDB8f5D7995"],
       }}
+      supportedTokens={{
+        11155111: [
+          {
+            name: "TWCOIN",
+            symbol: "TWCON",
+            address: "0x7196e8Fb8DDb8b1Da9133BD876C6aEDB8f5D7995",
+          },
+        ],
+      }}
+      detailsModal={{ assetTabs: ["nft", "token"] }}
       client={THIRDWEB_CLIENT}
       theme={theme === "light" ? "light" : "dark"}
       {...props}

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,25 @@ 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 ||
+            (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 +805,7 @@ function DetailsModal(props: {
           setScreen={setScreen}
           client={client}
           connectLocale={locale}
+          assetTabs={props.detailsModal?.assetTabs}
         />
       );
     } else {
@@ -1458,6 +1465,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 +1529,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,10 +49,27 @@ 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]);
   return (
     <Container
       animate="fadein"
@@ -52,28 +92,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={{