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,
+  }}
+/>
+```

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

@@ -311,6 +311,12 @@ 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, set this prop to `true`
+   */
+  swapAssetTabsPositions?: boolean;
 };
 
 /**

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

@@ -247,6 +247,19 @@ 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, set this prop to `true`
+ *
+ * ```tsx
+ * <ConnectButton
+ *   client={client}
+ *   detailsModal={{
+ *     swapAssetTabsPositions: true,
+ *   }}
+ * />
+ * ```
+ *
  * @param props
  * Props for the `ConnectButton` component
  *

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

@@ -170,6 +170,7 @@ export const ConnectedWalletDetails: React.FC<{
         chains={props.chains}
         displayBalanceToken={props.detailsButton?.displayBalanceToken}
         connectOptions={props.connectOptions}
+        swapAssetTabsPositions={props.detailsModal?.swapAssetTabsPositions}
       />,
     );
   }
@@ -286,6 +287,7 @@ function DetailsModal(props: {
   chains: Chain[];
   displayBalanceToken?: Record<number, string>;
   connectOptions: DetailsModalConnectOptions | undefined;
+  swapAssetTabsPositions?: boolean;
 }) {
   const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
   const { disconnect } = useDisconnect();
@@ -801,6 +803,7 @@ function DetailsModal(props: {
           setScreen={setScreen}
           client={client}
           connectLocale={locale}
+          swapAssetTabsPositions={props.detailsModal?.swapAssetTabsPositions}
         />
       );
     } else {
@@ -1460,6 +1463,12 @@ 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, set this prop to `true`
+   */
+  swapAssetTabsPositions?: boolean;
 };
 
 /**
@@ -1517,6 +1526,7 @@ export function useWalletDetailsModal() {
               hideBuyFunds: props.hideBuyFunds,
               hideReceiveFunds: props.hideReceiveFunds,
               hideSendFunds: props.hideSendFunds,
+              swapAssetTabsPositions: props.swapAssetTabsPositions,
             }}
             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 {
@@ -26,10 +26,34 @@ export function ViewAssets(props: {
   setScreen: (screen: WalletDetailsModalScreen) => void;
   client: ThirdwebClient;
   connectLocale: ConnectLocale;
+  swapAssetTabsPositions?: boolean;
 }) {
   const [activeTab, setActiveTab] = useState("Tokens");
   const { connectLocale } = props;
-
+  const options = useMemo(() => {
+    const tabs = [
+      {
+        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",
+      },
+    ];
+    if (props.swapAssetTabsPositions) {
+      tabs.reverse();
+    }
+    return tabs;
+  }, [props.swapAssetTabsPositions]);
   return (
     <Container
       animate="fadein"
@@ -52,28 +76,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={{