feat: change getWalletBalance prop from account to address (#2576)

Author: joaquim-verges

.changeset/khaki-maps-poke.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Change getWalletBalance prop from account to address

packages/thirdweb/src/analytics/track.ts

@@ -6,7 +6,24 @@ const ANALYTICS_ENDPOINT = "https://c.thirdweb.com/event";
 /**
  * @internal
  */
-export function track(client: ThirdwebClient, data: object) {
+export function trackConnect(args: {
+  client: ThirdwebClient;
+  walletType: string;
+  walletAddress: string;
+}) {
+  const { client, walletType, walletAddress } = args;
+  track(client, {
+    source: "connectWallet",
+    action: "connect",
+    walletType,
+    walletAddress,
+  });
+}
+
+/**
+ * @internal
+ */
+function track(client: ThirdwebClient, data: object) {
   const fetch = getClientFetch(client);
 
   fetch(ANALYTICS_ENDPOINT, {

packages/thirdweb/src/react/core/hooks/others/useWalletBalance.ts

@@ -14,14 +14,14 @@ import { useWalletConnectionCtx } from "./useWalletConnectionCtx.js";
 export function useWalletBalance(
   options: Omit<Partial<GetWalletBalanceOptions>, "client">,
 ) {
-  const { chain, account, tokenAddress } = options;
+  const { chain, address, tokenAddress } = options;
   const { client } = useWalletConnectionCtx();
   const query = queryOptions({
     // eslint-disable-next-line @tanstack/query/exhaustive-deps
     queryKey: [
       "walletBalance",
       chain?.id || -1,
-      account?.address || "0x0",
+      address || "0x0",
       { tokenAddress },
     ] as const,
     queryFn: async () => {
@@ -31,12 +31,12 @@ export function useWalletBalance(
       if (!client) {
         throw new Error("client is required");
       }
-      if (!account) {
-        throw new Error("account is required");
+      if (!address) {
+        throw new Error("address is required");
       }
-      return getWalletBalance({ chain, client, account, tokenAddress });
+      return getWalletBalance({ chain, client, address, tokenAddress });
     },
-    enabled: !!chain && !!client && !!account,
+    enabled: !!chain && !!client && !!address,
   });
   return useQuery(query);
 }

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

@@ -121,7 +121,7 @@ export const ConnectedWalletDetails: React.FC<{
   const balanceQuery = useWalletBalance({
     chain: walletChain ? walletChain : undefined,
     tokenAddress,
-    account: activeAccount,
+    address: activeAccount?.address,
   });
 
   const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/InjectedConnectUI.tsx

@@ -6,7 +6,6 @@ import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { InjectedSupportedWalletIds } from "../../../../../wallets/__generated__/wallet-ids.js";
 import { useWalletConnectionCtx } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import type { WalletInfo } from "../../../../../wallets/wallet-info.js";
-import { asyncLocalStorage } from "../../../../core/utils/asyncLocalStorage.js";
 
 /**
  * @internal
@@ -20,7 +19,7 @@ export const InjectedConnectUI = (props: {
   done: () => void;
 }) => {
   const { wallet, done } = props;
-  const { chain } = useWalletConnectionCtx();
+  const { client, chain } = useWalletConnectionCtx();
   const [errorConnecting, setErrorConnecting] = useState(false);
   const locale = props.locale;
 
@@ -29,9 +28,8 @@ export const InjectedConnectUI = (props: {
       connectPrompted.current = true;
       setErrorConnecting(false);
       await wait(1000);
-      // set storage for the wallet if it supports it
-      wallet.setStorage?.(asyncLocalStorage);
       await wallet.connect({
+        client,
         chain: chain,
       });
 
@@ -40,7 +38,7 @@ export const InjectedConnectUI = (props: {
       setErrorConnecting(true);
       console.error(e);
     }
-  }, [chain, done, wallet]);
+  }, [client, chain, done, wallet]);
 
   const connectPrompted = useRef(false);
   useEffect(() => {

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/SwapScreen.tsx

@@ -121,7 +121,7 @@ export function SwapScreenContent(props: {
   const deferredTokenAmount = useDebouncedValue(tokenAmount, 300);
 
   const fromTokenBalanceQuery = useWalletBalance({
-    account: account,
+    address: account.address,
     chain: fromChain,
     tokenAddress: isNativeToken(fromToken) ? undefined : fromToken.address,
   });

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx

@@ -41,7 +41,7 @@ export function PayWithCrypto(props: {
   const activeAccount = useActiveAccount();
 
   const balanceQuery = useWalletBalance({
-    account: activeAccount,
+    address: activeAccount?.address,
     chain: props.chain,
     tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
   });

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx

@@ -116,7 +116,7 @@ function SendFundsForm(props: {
   const balanceQuery = useWalletBalance({
     chain,
     tokenAddress: tokenAddress,
-    account: activeAccount,
+    address: activeAccount?.address,
   });
 
   const { receiverAddress, setReceiverAddress, amount, setAmount } = props;

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx

@@ -39,7 +39,7 @@ export function TokenSelector(props: {
   // if input is undefined, it loads the native token
   // otherwise it loads the token with given address
   const tokenQuery = useWalletBalance({
-    account: activeAccount,
+    address: activeAccount?.address,
     chain: chain,
     tokenAddress: input,
   });
@@ -171,7 +171,7 @@ function SelectTokenButton(props: {
 }) {
   const account = useActiveAccount();
   const tokenBalanceQuery = useWalletBalance({
-    account,
+    address: account?.address,
     chain: props.chain,
     tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
   });

packages/thirdweb/src/react/web/ui/hooks/useTrack.ts

@@ -20,11 +20,12 @@ function CoinbaseSDKWalletConnectUI(props: {
 }) {
   const { onBack, done, wallet, walletInfo, onGetStarted, locale } = props;
   const [qrCodeUri, setQrCodeUri] = useState<string | undefined>();
-  const { chain } = useWalletConnectionCtx();
+  const { client, chain } = useWalletConnectionCtx();
 
   const connect = useCallback(() => {
     wallet
       .connect({
+        client,
         chain,
         onUri: (uri) => {
           setQrCodeUri(uri);
@@ -38,7 +39,7 @@ function CoinbaseSDKWalletConnectUI(props: {
       .catch((e) => {
         console.error(e);
       });
-  }, [wallet, chain, done]);
+  }, [client, wallet, chain, done]);
 
   const scanStarted = useRef(false);
   useEffect(() => {

packages/thirdweb/src/react/web/wallets/shared/CoinbaseSDKConnection.tsx

@@ -29,11 +29,17 @@ import {
 import { getAddress } from "../../utils/address.js";
 import { getDefaultAppMetadata } from "../utils/defaultDappMetadata.js";
 import type { WalletEmitter } from "../wallet-emitter.js";
+import type { ThirdwebClient } from "../../client/client.js";
 
 /**
  * Options for connecting to the CoinbaseSDK Wallet
  */
 export type CoinbaseSDKWalletConnectionOptions = {
+  /**
+   * The Thirdweb client object
+   */
+  client: ThirdwebClient;
+
   /**
    * Whether to use Dark theme in the Coinbase Wallet "Onboarding Overlay" popup.
    *

packages/thirdweb/src/wallets/coinbase/coinbaseSDKWallet.ts

@@ -9,6 +9,7 @@ import { injectedProvider } from "./injected/mipdStore.js";
 import type { InjectedSupportedWalletIds } from "./__generated__/wallet-ids.js";
 
 import { createWalletEmitter } from "./wallet-emitter.js";
+import { trackConnect } from "../analytics/track.js";
 
 // TODO: figure out how to define the type without tuple args type and using function overloads
 
@@ -113,6 +114,11 @@ export function createWallet<const ID extends WalletId>(
             chain = connectedChain;
             handleDisconnect = doDisconnect;
             handleSwitchChain = doSwitchChain;
+            trackConnect({
+              client: options.client,
+              walletType: id,
+              walletAddress: account.address,
+            });
             // return account
             return account;
           }
@@ -131,6 +137,11 @@ export function createWallet<const ID extends WalletId>(
             chain = connectedChain;
             handleDisconnect = doDisconnect;
             handleSwitchChain = doSwitchChain;
+            trackConnect({
+              client: options.client,
+              walletType: id,
+              walletAddress: account.address,
+            });
             // return account
             return account;
           }
@@ -152,6 +163,11 @@ export function createWallet<const ID extends WalletId>(
             chain = connectedChain;
             handleDisconnect = doDisconnect;
             handleSwitchChain = doSwitchChain;
+            trackConnect({
+              client: options.client,
+              walletType: id,
+              walletAddress: account.address,
+            });
             // return account
             return account;
           }
@@ -175,6 +191,11 @@ export function createWallet<const ID extends WalletId>(
             chain = connectedChain;
             handleDisconnect = doDisconnect;
             handleSwitchChain = doSwitchChain;
+            trackConnect({
+              client: options.client,
+              walletType: id,
+              walletAddress: account.address,
+            });
             // return account
             return account;
           }
@@ -233,6 +254,11 @@ export function smartWallet(
       // set the states
       account = connectedAccount;
       chain = connectedChain;
+      trackConnect({
+        client: options.client,
+        walletType: "smart",
+        walletAddress: account.address,
+      });
       // return account
       return account;
     },
@@ -246,6 +272,11 @@ export function smartWallet(
       // set the states
       account = connectedAccount;
       chain = connectedChain;
+      trackConnect({
+        client: options.client,
+        walletType: "smart",
+        walletAddress: account.address,
+      });
       // return account
       return account;
     },
@@ -304,6 +335,11 @@ export function embeddedWallet(
       // set the states
       account = connectedAccount;
       chain = connectedChain;
+      trackConnect({
+        client: options.client,
+        walletType: "embedded",
+        walletAddress: account.address,
+      });
       // return only the account
       return account;
     },
@@ -317,6 +353,11 @@ export function embeddedWallet(
       // set the states
       account = connectedAccount;
       chain = connectedChain;
+      trackConnect({
+        client: options.client,
+        walletType: "embedded",
+        walletAddress: account.address,
+      });
       // return only the account
       return account;
     },
@@ -383,6 +424,11 @@ function coinbaseWalletSDK(): Wallet<"com.coinbase.wallet"> {
       chain = connectedChain;
       handleDisconnect = doDisconnect;
       handleSwitchChain = doSwitchChain;
+      trackConnect({
+        client: options.client,
+        walletType: "com.coinbase.wallet",
+        walletAddress: account.address,
+      });
       // return account
       return account;
     },
@@ -398,6 +444,11 @@ function coinbaseWalletSDK(): Wallet<"com.coinbase.wallet"> {
       chain = connectedChain;
       handleDisconnect = doDisconnect;
       handleSwitchChain = doSwitchChain;
+      trackConnect({
+        client: options.client,
+        walletType: "com.coinbase.wallet",
+        walletAddress: account.address,
+      });
       // return account
       return account;
     },

packages/thirdweb/src/wallets/create-wallet.ts

@@ -36,8 +36,6 @@ export type Wallet<TWalletId extends WalletId = WalletId> = {
   disconnect(): Promise<void>;
   // chain management methods
   switchChain(chain: Chain): Promise<void>;
-  // storage management (temporary and "internal")
-  setStorage?(storage: any): void;
   // events
   subscribe: WalletEmitter<TWalletId>["subscribe"];
 

packages/thirdweb/src/wallets/interfaces/wallet.ts

@@ -9,10 +9,9 @@ import { getContract } from "../../contract/contract.js";
 import { eth_getBalance } from "../../rpc/actions/eth_getBalance.js";
 import { getRpcClient } from "../../rpc/rpc.js";
 import { toTokens } from "../../utils/units.js";
-import type { Account } from "../interfaces/wallet.js";
 
 export type GetWalletBalanceOptions = {
-  account: Pick<Account, "address">;
+  address: string;
   client: ThirdwebClient;
   chain: Chain;
   /**
@@ -47,7 +46,7 @@ type GetWalletBalanceResult = {
 export async function getWalletBalance(
   options: GetWalletBalanceOptions,
 ): Promise<GetWalletBalanceResult> {
-  const { account, client, chain, tokenAddress } = options;
+  const { address, client, chain, tokenAddress } = options;
   // erc20 case
   if (tokenAddress) {
     // load balanceOf dynamically to avoid circular dependency
@@ -56,7 +55,7 @@ export async function getWalletBalance(
     );
     return getBalance({
       contract: getContract({ client, chain, address: tokenAddress }),
-      address: account.address,
+      address,
     });
   }
   // native token case
@@ -67,7 +66,7 @@ export async function getWalletBalance(
       getChainSymbol(chain),
       getChainDecimals(chain),
       getChainNativeCurrencyName(chain),
-      eth_getBalance(rpcRequest, { address: account.address }),
+      eth_getBalance(rpcRequest, { address }),
     ]);
 
   return {