[SDK] Allow passing NATIVE_TOKEN_ADDRESS to getWalletBalance()

joaquim-verges · joaquim-verges · commit 5541e1b1c51f · 2025-12-01T11:23:29.000+13:00
diff --git a/.changeset/chatty-rules-listen.md b/.changeset/chatty-rules-listen.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Allow passing NATIVE_TOKEN_ADDRESS to getWalletBalance()
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
@@ -10,17 +10,24 @@ import {
   ShuffleIcon,
   WalletIcon,
 } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { type ThirdwebClient, toWei } from "thirdweb";
+import {
+  getContract,
+  readContract,
+  type ThirdwebClient,
+  toUnits,
+} from "thirdweb";
 import { useWalletBalance } from "thirdweb/react";
 import { isAddress } from "thirdweb/utils";
 import { z } from "zod";
 import { sendProjectWalletTokens } from "@/actions/project-wallet/send-tokens";
 import type { Project } from "@/api/project/projects";
+import type { TokenMetadata } from "@/api/universal-bridge/types";
 import { FundWalletModal } from "@/components/blocks/fund-wallets-modal";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { TokenSelector } from "@/components/blocks/TokenSelector";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -78,15 +85,96 @@ type ProjectWalletControlsProps = {
   client: ThirdwebClient;
 };
 
+const STORAGE_KEY_PREFIX = "project-wallet-selection";
+
+function getStorageKey(projectId: string): string {
+  return `${STORAGE_KEY_PREFIX}-${projectId}`;
+}
+
+type StoredSelection = {
+  chainId: number;
+  tokenAddress: string | undefined;
+};
+
+function readStoredSelection(projectId: string): StoredSelection | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  try {
+    const stored = localStorage.getItem(getStorageKey(projectId));
+    if (stored) {
+      return JSON.parse(stored) as StoredSelection;
+    }
+  } catch {
+    // Ignore parse errors
+  }
+  return null;
+}
+
+function saveStoredSelection(projectId: string, selection: StoredSelection) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    localStorage.setItem(getStorageKey(projectId), JSON.stringify(selection));
+  } catch {
+    // Ignore storage errors
+  }
+}
+
 export function ProjectWalletDetailsSection(props: ProjectWalletControlsProps) {
   const { projectWallet, project, defaultChainId } = props;
   const [isSendOpen, setIsSendOpen] = useState(false);
   const [isReceiveOpen, setIsReceiveOpen] = useState(false);
-  const [selectedChainId, setSelectedChainId] = useState(defaultChainId ?? 1);
   const [isChangeWalletOpen, setIsChangeWalletOpen] = useState(false);
 
+  // Initialize chain and token from localStorage or defaults
+  const [selectedChainId, setSelectedChainId] = useState(() => {
+    const stored = readStoredSelection(project.id);
+    return stored?.chainId ?? defaultChainId ?? 1;
+  });
+  const [selectedTokenAddress, setSelectedTokenAddress] = useState<
+    string | undefined
+  >(() => {
+    const stored = readStoredSelection(project.id);
+    if (stored) {
+      return stored.tokenAddress;
+    }
+    return undefined;
+  });
+
   const chain = useV5DashboardChain(selectedChainId);
 
+  // Handle chain change - reset token to native when chain changes
+  const handleChainChange = useCallback(
+    (newChainId: number) => {
+      setSelectedChainId((prevChainId) => {
+        if (prevChainId !== newChainId) {
+          // Reset token to native (undefined) when chain changes
+          setSelectedTokenAddress(undefined);
+          saveStoredSelection(project.id, {
+            chainId: newChainId,
+            tokenAddress: undefined,
+          });
+        }
+        return newChainId;
+      });
+    },
+    [project.id],
+  );
+
+  // Handle token change
+  const handleTokenChange = useCallback(
+    (token: TokenMetadata) => {
+      setSelectedTokenAddress(token.address);
+      saveStoredSelection(project.id, {
+        chainId: selectedChainId,
+        tokenAddress: token.address,
+      });
+    },
+    [project.id, selectedChainId],
+  );
+
   const engineCloudService = useMemo(
     () => project.services?.find((service) => service.name === "engineCloud"),
     [project.services],
@@ -117,6 +205,7 @@ export function ProjectWalletDetailsSection(props: ProjectWalletControlsProps) {
     address: projectWallet.address,
     chain,
     client: props.client,
+    tokenAddress: selectedTokenAddress,
   });
 
   const canChangeWallet =
@@ -200,7 +289,7 @@ export function ProjectWalletDetailsSection(props: ProjectWalletControlsProps) {
           </div>
         </div>
 
-        <div className="p-5 border-t border-dashed flex justify-between items-center">
+        <div className="p-5 border-t border-dashed flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
           <div>
             <p className="text-sm text-foreground mb-1">Balance</p>
             <div className="flex items-center gap-1">
@@ -229,17 +318,36 @@ export function ProjectWalletDetailsSection(props: ProjectWalletControlsProps) {
             </div>
           </div>
 
-          <SingleNetworkSelector
-            chainId={selectedChainId}
-            className="w-fit rounded-full bg-background hover:bg-accent/50"
-            client={props.client}
-            disableDeprecated
-            disableChainId
-            onChange={setSelectedChainId}
-            placeholder="Select network"
-            popoverContentClassName="!w-[320px] rounded-xl overflow-hidden"
-            align="end"
-          />
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+            <SingleNetworkSelector
+              chainId={selectedChainId}
+              className="w-full sm:w-fit rounded-full bg-background hover:bg-accent/50"
+              client={props.client}
+              disableDeprecated
+              disableChainId
+              onChange={handleChainChange}
+              placeholder="Select network"
+              popoverContentClassName="!w-[320px] rounded-xl overflow-hidden"
+              align="end"
+            />
+            <TokenSelector
+              selectedToken={
+                selectedTokenAddress
+                  ? { chainId: selectedChainId, address: selectedTokenAddress }
+                  : undefined
+              }
+              onChange={handleTokenChange}
+              chainId={selectedChainId}
+              client={props.client}
+              enabled={true}
+              showCheck={true}
+              addNativeTokenIfMissing={true}
+              placeholder="Native token"
+              className="w-full sm:w-fit rounded-full bg-background hover:bg-accent/50"
+              popoverContentClassName="!w-[320px] rounded-xl overflow-hidden"
+              align="end"
+            />
+          </div>
         </div>
       </div>
 
@@ -253,6 +361,7 @@ export function ProjectWalletDetailsSection(props: ProjectWalletControlsProps) {
         open={isSendOpen}
         publishableKey={project.publishableKey}
         teamId={project.teamId}
+        tokenAddress={selectedTokenAddress}
         walletAddress={projectWallet.address}
       />
 
@@ -467,6 +576,7 @@ const createSendFormSchema = (secretKeyLabel: string) =>
     chainId: z.number({
       required_error: "Select a network",
     }),
+    tokenAddress: z.string().optional(),
     toAddress: z
       .string()
       .trim()
@@ -491,6 +601,7 @@ type SendProjectWalletModalProps = {
   publishableKey: string;
   teamId: string;
   chainId: number;
+  tokenAddress?: string;
   label: string;
   client: ReturnType<typeof getClientThirdwebClient>;
   isManagedVault: boolean;
@@ -528,6 +639,7 @@ function SendProjectWalletModalContent(props: SendProjectWalletModalProps) {
     publishableKey,
     teamId,
     chainId,
+    tokenAddress,
     label,
     client,
     isManagedVault,
@@ -539,6 +651,7 @@ function SendProjectWalletModalContent(props: SendProjectWalletModalProps) {
     defaultValues: {
       amount: "0",
       chainId,
+      tokenAddress,
       secretKey: "",
       vaultAccessToken: "",
       toAddress: "",
@@ -548,10 +661,31 @@ function SendProjectWalletModalContent(props: SendProjectWalletModalProps) {
   });
 
   const selectedChain = useV5DashboardChain(form.watch("chainId"));
+  const selectedFormChainId = form.watch("chainId");
+  const selectedFormTokenAddress = form.watch("tokenAddress");
+
+  // Track the selected token symbol for display
+  const [selectedTokenSymbol, setSelectedTokenSymbol] = useState<
+    string | undefined
+  >(undefined);
 
   const sendMutation = useMutation({
     mutationFn: async (values: SendFormValues) => {
-      const quantityWei = toWei(values.amount).toString();
+      let decimals = 18;
+      if (values.tokenAddress) {
+        const decimalsRpc = await readContract({
+          contract: getContract({
+            address: values.tokenAddress,
+            chain: selectedChain,
+            client,
+          }),
+          method: "function decimals() view returns (uint8)",
+          params: [],
+        });
+        decimals = Number(decimalsRpc);
+        console.log("decimals", decimals);
+      }
+      const quantityWei = toUnits(values.amount, decimals).toString();
       const secretKeyValue = values.secretKey.trim();
       const vaultAccessTokenValue = values.vaultAccessToken.trim();
 
@@ -563,16 +697,16 @@ function SendProjectWalletModalContent(props: SendProjectWalletModalProps) {
         teamId,
         walletAddress,
         secretKey: secretKeyValue,
+        ...(values.tokenAddress ? { tokenAddress: values.tokenAddress } : {}),
         ...(vaultAccessTokenValue
           ? { vaultAccessToken: vaultAccessTokenValue }
           : {}),
       });
 
       if (!result.ok) {
-        const errorMessage =
-          typeof result.error === "string"
-            ? result.error
-            : "Failed to send funds";
+        const errorMessage = result.error
+          ? JSON.stringify(result.error, null, 2)
+          : "Failed to send funds";
         throw new Error(errorMessage);
       }
 
@@ -623,6 +757,9 @@ function SendProjectWalletModalContent(props: SendProjectWalletModalProps) {
                       disableDeprecated
                       onChange={(nextChainId) => {
                         field.onChange(nextChainId);
+                        // Reset token to native when chain changes
+                        form.setValue("tokenAddress", undefined);
+                        setSelectedTokenSymbol(undefined);
                       }}
                       placeholder="Select network"
                     />
@@ -632,6 +769,40 @@ function SendProjectWalletModalContent(props: SendProjectWalletModalProps) {
               )}
             />
 
+            <FormField
+              control={form.control}
+              name="tokenAddress"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Token</FormLabel>
+                  <FormControl>
+                    <TokenSelector
+                      selectedToken={
+                        field.value
+                          ? {
+                              chainId: selectedFormChainId,
+                              address: field.value,
+                            }
+                          : undefined
+                      }
+                      onChange={(token) => {
+                        field.onChange(token.address);
+                        setSelectedTokenSymbol(token.symbol);
+                      }}
+                      chainId={selectedFormChainId}
+                      client={client}
+                      enabled={true}
+                      showCheck={true}
+                      addNativeTokenIfMissing={true}
+                      placeholder="Native token"
+                      className="w-full bg-card"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
             <FormField
               control={form.control}
               name="toAddress"
@@ -656,10 +827,9 @@ function SendProjectWalletModalContent(props: SendProjectWalletModalProps) {
                     <Input inputMode="decimal" min="0" step="any" {...field} />
                   </FormControl>
                   <FormDescription>
-                    Sending native token
-                    {selectedChain?.nativeCurrency?.symbol
-                      ? ` (${selectedChain.nativeCurrency.symbol})`
-                      : ""}
+                    {selectedFormTokenAddress
+                      ? `Sending ${selectedTokenSymbol || "token"}`
+                      : `Sending native token${selectedChain?.nativeCurrency?.symbol ? ` (${selectedChain.nativeCurrency.symbol})` : ""}`}
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
diff --git a/apps/portal/src/app/x402/client/page.mdx b/apps/portal/src/app/x402/client/page.mdx
@@ -21,15 +21,15 @@ The client library wraps the native `fetch` API and handles:
 4. Creating and signing payment authorization
 5. Retrying the request with payment credentials
 
-<Tabs defaultValue="typescript">
+<Tabs defaultValue="react">
   <TabsList>
-    <TabsTrigger value="typescript" className="flex items-center [&>p]:mb-0">
-      <TypeScriptIcon className="size-4 mr-1.5" />
-      TypeScript
-    </TabsTrigger>
     <TabsTrigger value="react" className="flex items-center [&>p]:mb-0">
       <ReactIcon className="size-4 mr-1.5" />
       React
+    </TabsTrigger>
+     <TabsTrigger value="typescript" className="flex items-center [&>p]:mb-0">
+      <TypeScriptIcon className="size-4 mr-1.5" />
+      TypeScript
     </TabsTrigger>
     <TabsTrigger value="http" className="flex items-center [&>p]:mb-0">
       <EngineIcon className="size-4 mr-1.5" />
diff --git a/apps/portal/src/app/x402/page.mdx b/apps/portal/src/app/x402/page.mdx
@@ -33,16 +33,16 @@ The payment token must support either:
 
 ## Client Side
 
-<Tabs defaultValue="typescript">
+<Tabs defaultValue="react">
   <TabsList>
-    <TabsTrigger value="typescript" className="flex items-center [&>p]:mb-0">
-      <TypeScriptIcon className="size-4 mr-1.5" />
-      TypeScript
-    </TabsTrigger>
     <TabsTrigger value="react" className="flex items-center [&>p]:mb-0">
       <ReactIcon className="size-4 mr-1.5" />
       React
     </TabsTrigger>
+    <TabsTrigger value="typescript" className="flex items-center [&>p]:mb-0">
+      <TypeScriptIcon className="size-4 mr-1.5" />
+      TypeScript
+    </TabsTrigger>
   </TabsList>
 
   <TabsContent value="typescript">
diff --git a/packages/thirdweb/src/wallets/utils/getWalletBalance.ts b/packages/thirdweb/src/wallets/utils/getWalletBalance.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"thirdweb": patch
 +---
++
 +Allow passing NATIVE_TOKEN_ADDRESS to getWalletBalance()