[SDK] Update token balances query to use client instead of clientId (#8507)

Author: joaquim-verges

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx

@@ -419,6 +419,7 @@ export function ProjectWalletDetailsSection(props: ProjectWalletControlsProps) {
       <Dialog onOpenChange={setIsSwapOpen} open={isSwapOpen}>
         <DialogContent className="gap-0 p-0 overflow-hidden max-w-md">
           <SwapProjectWalletModalContent
+            client={props.client}
             chainId={selectedChainId}
             tokenAddress={selectedTokenAddress}
             walletAddress={projectWallet.address}
@@ -613,6 +614,7 @@ function ChangeProjectWalletDialogContent(props: {
 }
 
 type SwapProjectWalletModalContentProps = {
+  client: ThirdwebClient;
   chainId: number;
   tokenAddress: string | undefined;
   walletAddress: string;
@@ -630,6 +632,7 @@ function SwapProjectWalletModalContent(
   props: SwapProjectWalletModalContentProps,
 ) {
   const {
+    client,
     chainId,
     tokenAddress,
     walletAddress,
@@ -655,6 +658,7 @@ function SwapProjectWalletModalContent(
     if (!secretKey.trim()) {
       return null;
     }
+    // use the inputted secret key to create the client used for the serverWallet
     return createThirdwebClient({
       clientId: publishableKey,
       secretKey: secretKey.trim(),
@@ -777,9 +781,9 @@ function SwapProjectWalletModalContent(
       </DialogHeader>
 
       <div className="px-4 pb-4 lg:px-6 lg:pb-6 flex justify-center">
-        {swapClient && activeWallet && (
+        {activeWallet && (
           <SwapWidget
-            client={swapClient}
+            client={props.client}
             prefill={{
               sellToken: {
                 chainId: chainId,

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx

@@ -90,7 +90,7 @@ export function SelectToken(props: SelectTokenUIProps) {
 
   // owned tokens
   const ownedTokensQuery = useTokenBalances({
-    clientId: props.client.clientId,
+    client: props.client,
     chainId: selectedChain?.chainId,
     limit,
     page: 1,

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts

@@ -4,6 +4,7 @@ import { tokens } from "../../../../../bridge/Token.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { isAddress } from "../../../../../utils/address.js";
 import { getThirdwebBaseUrl } from "../../../../../utils/domains.js";
+import { getClientFetch } from "../../../../../utils/fetch.js";
 
 export function useTokens(options: {
   client: ThirdwebClient;
@@ -72,7 +73,7 @@ type TokenBalancesResponse = {
 };
 
 export function useTokenBalances(options: {
-  clientId: string;
+  client: ThirdwebClient;
   page: number;
   limit: number;
   walletAddress: string | undefined;
@@ -101,11 +102,8 @@ export function useTokenBalances(options: {
       url.searchParams.set("sortOrder", "desc");
       url.searchParams.set("includeWithoutPrice", "false"); // filter out tokens with no price
 
-      const response = await fetch(url.toString(), {
-        headers: {
-          "x-client-id": options.clientId,
-        },
-      });
+      const clientFetch = getClientFetch(options.client);
+      const response = await clientFetch(url.toString());
 
       if (!response.ok) {
         throw new Error(