thirdweb 5.33.0 → 5.34.0-nightly-f6ff5a78fc2d65f0f250b154f1405210ca57ce0a-20240707000358

package/dist/types/react/web/ui/ConnectWallet/icons/ImageIcon.d.ts

@@ -0,0 +1,6 @@
+import type { IconFC } from "./types.js";
+/**
+ * @internal
+ */
+export declare const ImageIcon: IconFC;
+//# sourceMappingURL=ImageIcon.d.ts.map

package/dist/types/react/web/ui/ConnectWallet/icons/ImageIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/icons/ImageIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,MAmBvB,CAAC"}

package/dist/types/react/web/ui/ConnectWallet/screens/ViewFunds.d.ts

@@ -1,11 +1,14 @@
 import type { ThirdwebClient } from "../../../../../client/client.js";
-import { type SupportedTokens } from "../../../../core/utils/defaultTokens.js";
+import type { SupportedNFTs, SupportedTokens } from "../../../../core/utils/defaultTokens.js";
+import type { WalletDetailsModalScreen } from "./types.js";
 /**
  * @internal
  */
 export declare function ViewFunds(props: {
     supportedTokens?: SupportedTokens;
+    supportedNFTs?: SupportedNFTs;
     onBack: () => void;
+    setScreen: (screen: WalletDetailsModalScreen) => void;
     client: ThirdwebClient;
-}): import("react/jsx-runtime.js").JSX.Element | null;
+}): import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=ViewFunds.d.ts.map

package/dist/types/react/web/ui/ConnectWallet/screens/ViewFunds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewFunds.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/screens/ViewFunds.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGtE,OAAO,EACL,KAAK,eAAe,EAErB,MAAM,yCAAyC,CAAC;AAejD;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;CACxB,qDAkDA"}
+{"version":3,"file":"ViewFunds.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/screens/ViewFunds.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEtE,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EAChB,MAAM,yCAAyC,CAAC;AAOjD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAE3D;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,CAAC,MAAM,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACtD,MAAM,EAAE,cAAc,CAAC;CACxB,8CA8CA"}

package/dist/types/react/web/ui/ConnectWallet/screens/ViewNFTs.d.ts

@@ -0,0 +1,13 @@
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { Theme } from "../../../../core/design-system/index.js";
+import type { SupportedNFTs } from "../../../../core/utils/defaultTokens.js";
+/**
+ * @internal
+ */
+export declare function ViewNFTs(props: {
+    supportedNFTs?: SupportedNFTs;
+    theme: Theme | "light" | "dark";
+    onBack: () => void;
+    client: ThirdwebClient;
+}): import("react/jsx-runtime.js").JSX.Element | null;
+//# sourceMappingURL=ViewNFTs.d.ts.map

package/dist/types/react/web/ui/ConnectWallet/screens/ViewNFTs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewNFTs.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/screens/ViewNFTs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAMtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAoD7E;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;CACxB,qDAqFA"}

package/dist/types/react/web/ui/ConnectWallet/screens/ViewTokens.d.ts

@@ -0,0 +1,11 @@
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { type SupportedTokens } from "../../../../core/utils/defaultTokens.js";
+/**
+ * @internal
+ */
+export declare function ViewTokens(props: {
+    supportedTokens?: SupportedTokens;
+    onBack: () => void;
+    client: ThirdwebClient;
+}): import("react/jsx-runtime.js").JSX.Element | null;
+//# sourceMappingURL=ViewTokens.d.ts.map

package/dist/types/react/web/ui/ConnectWallet/screens/ViewTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewTokens.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/screens/ViewTokens.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGtE,OAAO,EACL,KAAK,eAAe,EAErB,MAAM,yCAAyC,CAAC;AAejD;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;CACxB,qDAkDA"}

package/dist/types/react/web/ui/ConnectWallet/screens/types.d.ts

@@ -56,5 +56,5 @@ export type WelcomeScreen = {
         height?: number;
     };
 } | (() => React.ReactNode);
-export type WalletDetailsModalScreen = "main" | "export" | "send" | "receive" | "buy" | "network-switcher" | "pending-tx" | "view-funds" | "private-key" | "manage-wallet" | "wallet-connect-receiver" | "wallet-manager";
+export type WalletDetailsModalScreen = "main" | "export" | "send" | "receive" | "buy" | "network-switcher" | "pending-tx" | "view-funds" | "view-tokens" | "view-nfts" | "private-key" | "manage-wallet" | "wallet-connect-receiver" | "wallet-manager";
 //# sourceMappingURL=types.d.ts.map

package/dist/types/react/web/ui/ConnectWallet/screens/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/screens/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,MAAM,aAAa,GACrB;IACE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE;QACJ;;WAEG;QACH,GAAG,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QACf;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,GACD,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;AAE5B,MAAM,MAAM,wBAAwB,GAChC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,SAAS,GACT,KAAK,GACL,kBAAkB,GAClB,YAAY,GACZ,YAAY,GACZ,aAAa,GACb,eAAe,GACf,yBAAyB,GACzB,gBAAgB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/screens/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,MAAM,aAAa,GACrB;IACE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE;QACJ;;WAEG;QACH,GAAG,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QACf;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,GACD,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;AAE5B,MAAM,MAAM,wBAAwB,GAChC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,SAAS,GACT,KAAK,GACL,kBAAkB,GAClB,YAAY,GACZ,YAAY,GACZ,aAAa,GACb,WAAW,GACX,aAAa,GACb,eAAe,GACf,yBAAyB,GACzB,gBAAgB,CAAC"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.33.0";
+export declare const version = "5.34.0-nightly-f6ff5a78fc2d65f0f250b154f1405210ca57ce0a-20240707000358";
 //# sourceMappingURL=version.d.ts.map

package/dist/types/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,2EAA2E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.33.0",
+  "version": "5.34.0-nightly-f6ff5a78fc2d65f0f250b154f1405210ca57ce0a-20240707000358",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

package/src/extensions/erc721/read/getOwnedTokenIds.ts

@@ -3,7 +3,14 @@ import {
   type BalanceOfParams,
   balanceOf,
 } from "../__generated__/IERC721A/read/balanceOf.js";
-import { tokenOfOwnerByIndex } from "../__generated__/IERC721Enumerable/read/tokenOfOwnerByIndex.js";
+import {
+  isTokensOfOwnerSupported,
+  tokensOfOwner,
+} from "../__generated__/IERC721AQueryable/read/tokensOfOwner.js";
+import {
+  isTokenOfOwnerByIndexSupported,
+  tokenOfOwnerByIndex,
+} from "../__generated__/IERC721Enumerable/read/tokenOfOwnerByIndex.js";
 
 export type GetOwnedTokenIdsParams = BalanceOfParams;
 
@@ -27,11 +34,29 @@ export async function getOwnedTokenIds(
 ): Promise<bigint[]> {
   const balanceOfResult = await balanceOf(options);
 
-  const promises: ReturnType<typeof tokenOfOwnerByIndex>[] = [];
+  const supportsTokensOfOwnerByIndex = await isTokenOfOwnerByIndexSupported(
+    options.contract,
+  );
+
+  if (supportsTokensOfOwnerByIndex) {
+    const promises: ReturnType<typeof tokenOfOwnerByIndex>[] = [];
+
+    for (let i = 0n; i < balanceOfResult; i++) {
+      promises.push(tokenOfOwnerByIndex({ ...options, index: i }));
+    }
+
+    return Promise.all(promises);
+  }
+
+  const supportsTokensOfOwner = await isTokensOfOwnerSupported(
+    options.contract,
+  );
 
-  for (let i = 0n; i < balanceOfResult; i++) {
-    promises.push(tokenOfOwnerByIndex({ ...options, index: i }));
+  if (supportsTokensOfOwner) {
+    return (await tokensOfOwner({ ...options })).map((token) => token); // Unfortunate map to make this return a mutable array
   }
 
-  return Promise.all(promises);
+  throw new Error(
+    `The contract at ${options.contract.address} on chain ${options.contract.chain.id} does not support the tokenOfOwnerByIndex or tokensOfOwner interface`,
+  );
 }

package/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -7,7 +7,10 @@ import type { NetworkSelectorProps } from "../../../web/ui/ConnectWallet/Network
 import type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.js";
 import type { LocaleId } from "../../../web/ui/types.js";
 import type { Theme } from "../../design-system/index.js";
-import type { SupportedTokens } from "../../utils/defaultTokens.js";
+import type {
+  SupportedNFTs,
+  SupportedTokens,
+} from "../../utils/defaultTokens.js";
 import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
 
 export type PayUIOptions = {
@@ -674,6 +677,31 @@ export type ConnectButtonProps = {
    */
   supportedTokens?: SupportedTokens;
 
+  /**
+   * Customize the NFTs shown in the "View Funds" screen in Details Modal for various networks.
+   *
+   * By default, The "View Funds" screen shows a few popular tokens for default chains and the native token. For other chains it only shows the native token.
+   * @example
+   *
+   * supportedTokens prop allows you to customize this list as shown below which shows "Pudgy Penguins" help when users wallet is connected to Ethereum mainnet.
+   *
+   * ```tsx
+   * import { ConnectButton } from 'thirdweb/react';
+   *
+   * function Example() {
+   *   return (
+   * 		<ConnectButton
+   * 			supportedNFTs={{
+   *        // when connected to Ethereum mainnet - show Pudgy Penguins
+   * 				1: ['0xBd3531dA5CF5857e7CfAA92426877b022e612cf8'],
+   * 			}}
+   * 		/>
+   * 	);
+   * }
+   * ```
+   */
+  supportedNFTs?: SupportedNFTs;
+
   /**
    * Called on connection of a wallet - including auto connect.
    * The callback is called with the connected wallet as an argument.

package/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -70,9 +70,10 @@ export type SendTransactionConfig = {
 type ShowModalData = {
   tx: PreparedTransaction;
   sendTx: () => void;
-  rejectTx: () => void;
+  rejectTx: (reason: Error) => void;
   totalCostWei: bigint;
   walletBalance: GetWalletBalanceResult;
+  resolveTx: (data: WaitForReceiptOptions) => void;
 };
 
 /**
@@ -171,9 +172,8 @@ export function useSendTransactionCore(args: {
             showPayModal({
               tx,
               sendTx,
-              rejectTx: () => {
-                reject(new Error("Not enough balance"));
-              },
+              rejectTx: reject,
+              resolveTx: resolve,
               totalCostWei,
               walletBalance,
             });

package/src/react/core/utils/defaultTokens.ts

@@ -1,3 +1,5 @@
+import type { Address } from "../../../utils/address.js";
+
 export type TokenInfo = {
   name: string;
   symbol: string;
@@ -30,6 +32,7 @@ const fantomIcon =
   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO2ZpbGwtcnVsZTpldmVub2RkO30uY2xzLTJ7ZmlsbDojMTNiNWVjO30uY2xzLTN7bWFzazp1cmwoI21hc2spO308L3N0eWxlPjxtYXNrIGlkPSJtYXNrIiB4PSIxMCIgeT0iNiIgd2lkdGg9IjkzLjEiIGhlaWdodD0iMjAiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiPjxnIGlkPSJhIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMCw2aDkzLjFWMjZIMTBaIi8+PC9nPjwvbWFzaz48L2RlZnM+PHRpdGxlPmZhPC90aXRsZT48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPjxjaXJjbGUgY2xhc3M9ImNscy0yIiBjeD0iMTYiIGN5PSIxNiIgcj0iMTYiLz48ZyBjbGFzcz0iY2xzLTMiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE3LjIsMTIuOWwzLjYtMi4xVjE1Wm0zLjYsOUwxNiwyNC43bC00LjgtMi44VjE3TDE2LDE5LjgsMjAuOCwxN1pNMTEuMiwxMC44bDMuNiwyLjFMMTEuMiwxNVptNS40LDMuMUwyMC4yLDE2bC0zLjYsMi4xWm0tMS4yLDQuMkwxMS44LDE2bDMuNi0yLjFabTQuOC04LjNMMTYsMTIuMiwxMS44LDkuOCwxNiw3LjNaTTEwLDkuNFYyMi41bDYsMy40LDYtMy40VjkuNEwxNiw2WiIvPjwvZz48L2c+PC9nPjwvc3ZnPg==";
 
 export type SupportedTokens = Record<number, TokenInfo[]>;
+export type SupportedNFTs = Record<number, Address[]>;
 
 /**
  * Default tokens shown in [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton)'s SendFunds screen for each network.

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -1,6 +1,7 @@
 import { CheckCircledIcon } from "@radix-ui/react-icons";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
@@ -80,8 +81,11 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
                 onComplete={data.sendTx}
                 onClose={() => {
                   setRootEl(null);
-                  data.rejectTx();
+                  data.rejectTx(
+                    new Error("User rejected transaction by closing modal"),
+                  );
                 }}
+                onTxSent={data.resolveTx}
                 client={data.tx.client}
                 localeId={payModal?.locale || "en_US"}
                 supportedTokens={payModal?.supportedTokens}
@@ -115,6 +119,7 @@ type ModalProps = {
   nativeTokenSymbol: string;
   tx: PreparedTransaction;
   payOptions: PayUIOptions;
+  onTxSent: (data: WaitForReceiptOptions) => void;
 };
 
 function TxModal(props: ModalProps) {
@@ -146,7 +151,13 @@ function ModalContent(props: ModalProps) {
   }
 
   if (screen === "execute-tx") {
-    return <ExecutingTxScreen tx={props.tx} closeModal={props.onClose} />;
+    return (
+      <ExecutingTxScreen
+        tx={props.tx}
+        closeModal={props.onClose}
+        onTxSent={props.onTxSent}
+      />
+    );
   }
 
   if (screen === "tx-history") {
@@ -194,6 +205,7 @@ function ModalContent(props: ModalProps) {
 function ExecutingTxScreen(props: {
   tx: PreparedTransaction;
   closeModal: () => void;
+  onTxSent: (data: WaitForReceiptOptions) => void;
 }) {
   const sendTxCore = useSendTransaction({
     payModal: false,
@@ -205,13 +217,16 @@ function ExecutingTxScreen(props: {
   const sendTx = useCallback(async () => {
     setStatus("loading");
     try {
-      await sendTxCore.mutateAsync(props.tx);
+      const txData = await sendTxCore.mutateAsync(props.tx);
+      props.onTxSent(txData);
       setStatus("sent");
     } catch (e) {
+      // Do not reject the transaction here, because the user may want to try again
+      // we only reject on modal close
       console.error(e);
       setStatus("failed");
     }
-  }, [sendTxCore, props.tx]);
+  }, [sendTxCore, props.tx, props.onTxSent]);
 
   const done = useRef(false);
   useEffect(() => {

package/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -292,6 +292,7 @@ function ConnectButtonInner(
       detailsButton={props.detailsButton}
       detailsModal={props.detailsModal}
       supportedTokens={supportedTokens}
+      supportedNFTs={props.supportedNFTs}
       onDisconnect={(info) => {
         // logout on explicit disconnect!
         if (siweAuth.requiresAuth) {

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -43,7 +43,10 @@ import {
   useChainName,
 } from "../../../core/hooks/others/useChainQuery.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
-import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
+import type {
+  SupportedNFTs,
+  SupportedTokens,
+} from "../../../core/utils/defaultTokens.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
 import { useConnectedWalletDetails } from "../../../core/utils/wallet.js";
 import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
@@ -86,6 +89,8 @@ import { PrivateKey } from "./screens/PrivateKey.js";
 import { ReceiveFunds } from "./screens/ReceiveFunds.js";
 import { SendFunds } from "./screens/SendFunds.js";
 import { ViewFunds } from "./screens/ViewFunds.js";
+import { ViewNFTs } from "./screens/ViewNFTs.js";
+import { ViewTokens } from "./screens/ViewTokens.js";
 import { WalletConnectReceiverScreen } from "./screens/WalletConnectReceiverScreen.js";
 import type { WalletDetailsModalScreen } from "./screens/types.js";
 
@@ -105,6 +110,7 @@ export const ConnectedWalletDetails: React.FC<{
   detailsModal?: ConnectButton_detailsModalOptions;
   theme: "light" | "dark" | Theme;
   supportedTokens?: SupportedTokens;
+  supportedNFTs?: SupportedNFTs;
   chains: Chain[];
   chain?: Chain;
   switchButton: ConnectButtonProps["switchButton"];
@@ -139,6 +145,7 @@ export const ConnectedWalletDetails: React.FC<{
         detailsModal={props.detailsModal}
         theme={props.theme}
         supportedTokens={props.supportedTokens}
+        supportedNFTs={props.supportedNFTs}
         closeModal={closeModal}
         onDisconnect={props.onDisconnect}
         chains={props.chains}
@@ -238,6 +245,7 @@ function DetailsModal(props: {
   detailsModal?: ConnectButton_detailsModalOptions;
   theme: "light" | "dark" | Theme;
   supportedTokens?: SupportedTokens;
+  supportedNFTs?: SupportedNFTs;
   closeModal: () => void;
   onDisconnect: (info: {
     wallet: Wallet;
@@ -527,7 +535,9 @@ function DetailsModal(props: {
             }}
           >
             <CoinsIcon size={iconSize.md} />
-            <Text color="primaryText">View Funds</Text>
+            <Text color="primaryText">
+              {props.supportedNFTs ? "View Assets" : "View Funds"}
+            </Text>
           </MenuButton>
 
           {/* Manage Wallet */}
@@ -682,8 +692,44 @@ function DetailsModal(props: {
       />
     );
   } else if (screen === "view-funds") {
+    if (props.supportedNFTs) {
+      content = (
+        <ViewFunds
+          supportedTokens={props.supportedTokens}
+          supportedNFTs={props.supportedNFTs}
+          onBack={() => {
+            setScreen("main");
+          }}
+          setScreen={setScreen}
+          client={client}
+        />
+      );
+    } else {
+      // Always show tokens (has the native token at least)
+      content = (
+        <ViewTokens
+          supportedTokens={props.supportedTokens}
+          onBack={() => {
+            setScreen("main");
+          }}
+          client={client}
+        />
+      );
+    }
+  } else if (screen === "view-nfts") {
     content = (
-      <ViewFunds
+      <ViewNFTs
+        theme={props.theme}
+        supportedNFTs={props.supportedNFTs}
+        onBack={() => {
+          setScreen("main");
+        }}
+        client={client}
+      />
+    );
+  } else if (screen === "view-tokens") {
+    content = (
+      <ViewTokens
         supportedTokens={props.supportedTokens}
         onBack={() => {
           setScreen("main");
@@ -1082,6 +1128,32 @@ export type UseWalletDetailsModalOptions = {
    * ```
    */
   supportedTokens?: SupportedTokens;
+  /**
+   * Customize the NFTs shown in the "View Funds" screen in Details Modal for various networks.
+   *
+   * By default, The "View Funds" screen shows a few popular tokens for default chains and the native token. For other chains it only shows the native token.
+   * @example
+   *
+   * supportedTokens prop allows you to customize this list as shown below which shows "Pudgy Penguins" when a users wallet is connected to Ethereum mainnet.
+   *
+   * ```tsx
+   * import { ConnectButton } from 'thirdweb/react';
+   *
+   * function Example() {
+   *   return (
+   * 		<ConnectButton
+   * 			supportedNFTs={{
+   *        // when connected to Ethereum mainnet - show Pudgy Penguins
+   * 				1: [
+   * 					'0xBd3531dA5CF5857e7CfAA92426877b022e612cf8',
+   * 				],
+   * 			}}
+   * 		/>
+   * 	);
+   * }
+   * ```
+   */
+  supportedNFTs?: SupportedNFTs;
   /**
    * By default - Details Modal UI uses the `en-US` locale for english language users.
    *
@@ -1240,6 +1312,7 @@ export function useWalletDetailsModal() {
             displayBalanceToken={props.displayBalanceToken}
             theme={props.theme || "dark"}
             supportedTokens={props.supportedTokens}
+            supportedNFTs={props.supportedNFTs}
             closeModal={closeModal}
             onDisconnect={(info) => {
               props.onDisconnect?.(info);

package/src/react/web/ui/ConnectWallet/icons/ImageIcon.tsx

@@ -0,0 +1,25 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const ImageIcon: IconFC = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="presentation"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+      <circle cx="9" cy="9" r="2" />
+      <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/screens/ViewFunds.tsx

@@ -1,43 +1,27 @@
-import type { Chain } from "../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
-import { fontSize } from "../../../../core/design-system/index.js";
-import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js";
-import {
-  type SupportedTokens,
-  defaultTokens,
+import { fontSize, iconSize } from "../../../../core/design-system/index.js";
+import type {
+  SupportedNFTs,
+  SupportedTokens,
 } from "../../../../core/utils/defaultTokens.js";
-import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
-import { useActiveWalletChain } from "../../../hooks/wallets/useActiveWalletChain.js";
-import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
-import { TokenIcon } from "../../components/TokenIcon.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
 import { Text } from "../../components/text.js";
-import { formatTokenBalance } from "./formatTokenBalance.js";
-import {
-  type ERC20OrNativeToken,
-  NATIVE_TOKEN,
-  isNativeToken,
-} from "./nativeToken.js";
+import { MenuButton } from "../MenuButton.js";
+import { CoinsIcon } from "../icons/CoinsIcon.js";
+import { ImageIcon } from "../icons/ImageIcon.js";
+import type { WalletDetailsModalScreen } from "./types.js";
 
 /**
  * @internal
  */
 export function ViewFunds(props: {
   supportedTokens?: SupportedTokens;
+  supportedNFTs?: SupportedNFTs;
   onBack: () => void;
+  setScreen: (screen: WalletDetailsModalScreen) => void;
   client: ThirdwebClient;
 }) {
-  const activeChain = useActiveWalletChain();
-  const supportedTokens = props.supportedTokens || defaultTokens;
-
-  if (!activeChain) {
-    return null;
-  }
-
-  const tokenList =
-    (activeChain?.id ? supportedTokens[activeChain.id] : undefined) || [];
-
   return (
     <Container
       style={{
@@ -57,69 +41,30 @@ export function ViewFunds(props: {
       >
         <Spacer y="md" />
 
-        <TokenInfo
-          token={NATIVE_TOKEN}
-          chain={activeChain}
-          client={props.client}
-        />
-
-        {tokenList.map((token) => {
-          return (
-            <TokenInfo
-              token={token}
-              key={token.address}
-              chain={activeChain}
-              client={props.client}
-            />
-          );
-        })}
+        <MenuButton
+          onClick={() => {
+            props.setScreen("view-tokens");
+          }}
+          style={{
+            fontSize: fontSize.sm,
+          }}
+        >
+          <CoinsIcon size={iconSize.md} />
+          <Text color="primaryText">View Tokens</Text>
+        </MenuButton>
+        <MenuButton
+          onClick={() => {
+            props.setScreen("view-nfts");
+          }}
+          style={{
+            fontSize: fontSize.sm,
+          }}
+        >
+          <ImageIcon size={iconSize.md} />
+          <Text color="primaryText">View NFTs</Text>
+        </MenuButton>
         <Spacer y="lg" />
       </Container>
     </Container>
   );
 }
-
-function TokenInfo(props: {
-  token: ERC20OrNativeToken;
-  chain: Chain;
-  client: ThirdwebClient;
-}) {
-  const account = useActiveAccount();
-  const tokenBalanceQuery = useWalletBalance({
-    address: account?.address,
-    chain: props.chain,
-    tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
-    client: props.client,
-  });
-
-  const tokenName = isNativeToken(props.token)
-    ? tokenBalanceQuery.data?.name
-    : props.token.name;
-
-  return (
-    <Container flex="row" gap="sm" p="sm">
-      <TokenIcon
-        token={props.token}
-        chain={props.chain}
-        size="lg"
-        client={props.client}
-      />
-
-      <Container flex="column" gap="xxs">
-        {tokenName ? (
-          <Text size="sm" color="primaryText">
-            {tokenName}
-          </Text>
-        ) : (
-          <Skeleton height={fontSize.md} width="150px" />
-        )}
-
-        {tokenBalanceQuery.data ? (
-          <Text size="xs"> {formatTokenBalance(tokenBalanceQuery.data)}</Text>
-        ) : (
-          <Skeleton height={fontSize.xs} width="100px" />
-        )}
-      </Container>
-    </Container>
-  );
-}