thirdweb 5.75.0 → 5.76.0-nightly-015293eb826b346871696183e96d49da44f31393-20241209000527

package/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { formatTokenBalance } from "./formatTokenBalance.js";
+
+describe("formatTokenBalance", () => {
+  const mockBalanceData = {
+    symbol: "ETH",
+    name: "Ethereum",
+    decimals: 18,
+    displayValue: "1.23456789",
+  };
+
+  it("formats balance with symbol by default", () => {
+    const result = formatTokenBalance(mockBalanceData);
+    expect(result).toBe("1.23457 ETH");
+  });
+
+  it("formats balance without symbol when showSymbol is false", () => {
+    const result = formatTokenBalance(mockBalanceData, false);
+    expect(result).toBe("1.23457");
+  });
+
+  it("respects custom decimal places", () => {
+    const result = formatTokenBalance(mockBalanceData, true, 3);
+    expect(result).toBe("1.235 ETH");
+  });
+
+  it("handles zero balance", () => {
+    const zeroBalance = { ...mockBalanceData, displayValue: "0" };
+    const result = formatTokenBalance(zeroBalance);
+    expect(result).toBe("0 ETH");
+  });
+
+  it("handles very small numbers", () => {
+    const smallBalance = { ...mockBalanceData, displayValue: "0.0000001" };
+    const result = formatTokenBalance(smallBalance);
+    expect(result).toBe("0.00001 ETH");
+  });
+
+  it("handles large numbers", () => {
+    const largeBalance = { ...mockBalanceData, displayValue: "1234567.89" };
+    const result = formatTokenBalance(largeBalance);
+    expect(result).toBe("1234567.89 ETH");
+  });
+
+  it("rounds up for very small non-zero values", () => {
+    const tinyBalance = { ...mockBalanceData, displayValue: "0.000000001" };
+    const result = formatTokenBalance(tinyBalance, true, 8);
+    expect(result).toBe("1e-8 ETH");
+  });
+
+  it("handles different token symbols", () => {
+    const usdcBalance = {
+      ...mockBalanceData,
+      symbol: "USDC",
+      displayValue: "100.5",
+    };
+    const result = formatTokenBalance(usdcBalance);
+    expect(result).toBe("100.5 USDC");
+  });
+});

package/src/react/web/ui/ConnectWallet/screens/nativeToken.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import {
+  NATIVE_TOKEN,
+  type NativeToken,
+  isNativeToken,
+} from "./nativeToken.js"; // Replace with the actual file name// Assuming this is defined in a constants file
+
+describe("isNativeToken", () => {
+  it("should return true for NATIVE_TOKEN", () => {
+    expect(isNativeToken(NATIVE_TOKEN)).toBe(true);
+  });
+
+  it("should return true for an object with nativeToken property", () => {
+    const token: NativeToken = { nativeToken: true };
+    expect(isNativeToken(token)).toBe(true);
+  });
+
+  it("should return true for a token with the native token address", () => {
+    const token = { address: NATIVE_TOKEN_ADDRESS };
+    expect(isNativeToken(token)).toBe(true);
+  });
+
+  it("should return true for a token with the native token address in uppercase", () => {
+    const token = { address: NATIVE_TOKEN_ADDRESS.toUpperCase() };
+    expect(isNativeToken(token)).toBe(true);
+  });
+
+  it("should return false for a non-native token", () => {
+    const token = { address: "0x1234567890123456789012345678901234567890" };
+    expect(isNativeToken(token)).toBe(false);
+  });
+
+  it("should return false for an empty object", () => {
+    expect(isNativeToken({})).toBe(false);
+  });
+
+  it("should return false for a token with a similar but incorrect address", () => {
+    const token = { address: `${NATIVE_TOKEN_ADDRESS.slice(0, -1)}0` };
+    expect(isNativeToken(token)).toBe(false);
+  });
+});

package/src/react/web/ui/components/CopyIcon.tsx

@@ -38,7 +38,11 @@ export const CopyIcon: React.FC<{
             flex="row"
             center="both"
           >
-            {showCheckIcon ? <CheckIcon /> : <CopyIconSVG />}
+            {showCheckIcon ? (
+              <CheckIcon className="tw-check-icon" />
+            ) : (
+              <CopyIconSVG className="tw-copy-icon" />
+            )}
           </Container>
         </div>
       </ToolTip>

package/src/react/web/ui/components/Skeleton.tsx

@@ -11,6 +11,7 @@ export const Skeleton: React.FC<{
   height: string;
   width?: string;
   color?: keyof Theme["colors"];
+  className?: string;
 }> = (props) => {
   return (
     <SkeletonDiv
@@ -19,6 +20,7 @@ export const Skeleton: React.FC<{
         height: props.height,
         width: props.width || "auto",
       }}
+      className={props.className || ""}
     />
   );
 };

package/src/react/web/ui/prebuilt/Account/balance.test.tsx

@@ -1,54 +1,185 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { describe, expect, it } from "vitest";
-import { ANVIL_CHAIN } from "~test/chains.js";
-import { render, screen, waitFor } from "~test/react-render.js";
+import { VITALIK_WALLET } from "~test/addresses.js";
+import { render } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
-import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
-import { getWalletBalance } from "../../../../../wallets/utils/getWalletBalance.js";
-import { AccountBalance } from "./balance.js";
+import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";
+import { sepolia } from "../../../../../chains/chain-definitions/sepolia.js";
+import { defineChain } from "../../../../../chains/utils.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import {
+  AccountBalance,
+  formatAccountFiatBalance,
+  formatAccountTokenBalance,
+  loadAccountBalance,
+} from "./balance.js";
 import { AccountProvider } from "./provider.js";
 
+const queryClient = new QueryClient();
+
 describe.runIf(process.env.TW_SECRET_KEY)("AccountBalance component", () => {
-  it("format the balance properly", async () => {
-    const roundTo1Decimal = (num: number): number => Math.round(num * 10) / 10;
-    const balance = await getWalletBalance({
-      chain: ANVIL_CHAIN,
+  it("should render", async () => {
+    const { container } = render(
+      <QueryClientProvider client={queryClient}>
+        <AccountProvider address={VITALIK_WALLET} client={TEST_CLIENT}>
+          <AccountBalance
+            chain={ethereum}
+            loadingComponent={<span />}
+            fallbackComponent={<span />}
+            formatFn={() => "nope"}
+          />
+        </AccountProvider>
+      </QueryClientProvider>,
+    );
+
+    const spans = container.getElementsByTagName("span");
+    expect(spans).toHaveLength(1);
+  });
+
+  it("`loadAccountBalance` should fetch the native balance properly", async () => {
+    const result = await loadAccountBalance({
       client: TEST_CLIENT,
-      address: TEST_ACCOUNT_A.address,
+      chain: ethereum,
+      address: VITALIK_WALLET,
     });
 
-    render(
-      <AccountProvider address={TEST_ACCOUNT_A.address} client={TEST_CLIENT}>
-        <AccountBalance chain={ANVIL_CHAIN} formatFn={roundTo1Decimal} />
-      </AccountProvider>,
+    expect(Number.isNaN(result.balance)).toBe(false);
+    expect(result.symbol).toBe("ETH");
+  });
+
+  it("`loadAccountBalance` should fetch the token balance properly", async () => {
+    const result = await loadAccountBalance({
+      client: TEST_CLIENT,
+      chain: ethereum,
+      address: VITALIK_WALLET,
+      // USDC
+      tokenAddress: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
+    });
+
+    expect(Number.isNaN(result.balance)).toBe(false);
+    expect(result.symbol).toBe("USDC");
+  });
+
+  it("`loadAccountBalance` should fetch the fiat balance properly", async () => {
+    const result = await loadAccountBalance({
+      client: TEST_CLIENT,
+      chain: ethereum,
+      address: VITALIK_WALLET,
+      showBalanceInFiat: "USD",
+    });
+
+    expect(Number.isNaN(result.balance)).toBe(false);
+    expect(result.symbol).toBe("$");
+  });
+
+  it("`loadAccountBalance` should throw if `chain` is not passed", async () => {
+    await expect(() =>
+      loadAccountBalance({ client: TEST_CLIENT, address: VITALIK_WALLET }),
+    ).rejects.toThrowError("chain is required");
+  });
+
+  it("`loadAccountBalance` should throw if `tokenAddress` is mistakenly passed as native token", async () => {
+    await expect(() =>
+      loadAccountBalance({
+        client: TEST_CLIENT,
+        address: VITALIK_WALLET,
+        tokenAddress: NATIVE_TOKEN_ADDRESS,
+        chain: ethereum,
+      }),
+    ).rejects.toThrowError(
+      `Invalid tokenAddress - cannot be ${NATIVE_TOKEN_ADDRESS}`,
+    );
+  });
+
+  it("`loadAccountBalance` should throw if `address` is not a valid evm address", async () => {
+    await expect(() =>
+      loadAccountBalance({
+        client: TEST_CLIENT,
+        address: "haha",
+        chain: ethereum,
+      }),
+    ).rejects.toThrowError("Invalid wallet address. Expected an EVM address");
+  });
+
+  it("`loadAccountBalance` should throw if `tokenAddress` is passed but is not a valid evm address", async () => {
+    await expect(() =>
+      loadAccountBalance({
+        client: TEST_CLIENT,
+        address: VITALIK_WALLET,
+        tokenAddress: "haha",
+        chain: ethereum,
+      }),
+    ).rejects.toThrowError(
+      "Invalid tokenAddress. Expected an EVM contract address",
+    );
+  });
+
+  it("`formatAccountTokenBalance` should display a rounded-up value + symbol", () => {
+    expect(
+      formatAccountTokenBalance({
+        balance: 1.1999,
+        symbol: "ETH",
+        decimals: 1,
+      }),
+    ).toBe("1.2 ETH");
+  });
+
+  it("`formatAccountFiatBalance` should display fiat symbol followed by a rounded-up fiat value", () => {
+    expect(
+      formatAccountFiatBalance({ balance: 55.001, symbol: "$", decimals: 0 }),
+    ).toBe("$55");
+  });
+
+  it("`loadAccountBalance` should throw if failed to load tokenBalance (native token)", async () => {
+    await expect(() =>
+      loadAccountBalance({
+        client: TEST_CLIENT,
+        address: VITALIK_WALLET,
+        chain: defineChain(-1),
+      }),
+    ).rejects.toThrowError(
+      `Failed to retrieve native token balance for address: ${VITALIK_WALLET} on chainId:-1`,
     );
+  });
 
-    waitFor(() =>
-      expect(
-        screen.getByText(roundTo1Decimal(Number(balance.displayValue)), {
-          exact: true,
-          selector: "span",
-        }),
-      ).toBeInTheDocument(),
+  it("`loadAccountBalance` should throw if failed to load tokenBalance (erc20 token)", async () => {
+    await expect(() =>
+      loadAccountBalance({
+        client: TEST_CLIENT,
+        address: VITALIK_WALLET,
+        chain: defineChain(-1),
+        tokenAddress: "0xFfEBd97b29AD3b2BecF8E554e4a638A56C6Bbd59",
+      }),
+    ).rejects.toThrowError(
+      `Failed to retrieve token: 0xFfEBd97b29AD3b2BecF8E554e4a638A56C6Bbd59 balance for address: ${VITALIK_WALLET} on chainId:-1`,
     );
   });
 
-  it("should fallback properly if failed to load", () => {
-    render(
-      <AccountProvider address={TEST_ACCOUNT_A.address} client={TEST_CLIENT}>
-        <AccountBalance
-          chain={undefined}
-          fallbackComponent={<span>oops</span>}
-        />
-      </AccountProvider>,
+  it("if fetching fiat value then it should throw if failed to resolve (native token)", async () => {
+    await expect(() =>
+      loadAccountBalance({
+        client: TEST_CLIENT,
+        address: VITALIK_WALLET,
+        chain: sepolia,
+        showBalanceInFiat: "USD",
+      }),
+    ).rejects.toThrowError(
+      `Failed to resolve fiat value for native token on chainId: ${sepolia.id}`,
     );
+  });
 
-    waitFor(() =>
-      expect(
-        screen.getByText("oops", {
-          exact: true,
-          selector: "span",
-        }),
-      ).toBeInTheDocument(),
+  it("if fetching fiat value then it should throw if failed to resolve (erc20 token)", async () => {
+    await expect(() =>
+      loadAccountBalance({
+        client: TEST_CLIENT,
+        address: VITALIK_WALLET,
+        chain: sepolia,
+        showBalanceInFiat: "USD",
+        // this is a random erc20 token on sepolia that vitalik's wallet owns
+        tokenAddress: "0xFfEBd97b29AD3b2BecF8E554e4a638A56C6Bbd59",
+      }),
+    ).rejects.toThrowError(
+      `Failed to resolve fiat value for token: 0xFfEBd97b29AD3b2BecF8E554e4a638A56C6Bbd59 on chainId: ${sepolia.id}`,
     );
   });
 });

package/src/react/web/ui/prebuilt/Account/balance.tsx

@@ -1,16 +1,36 @@
 "use client";
 
 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type { Address } from "abitype";
 import type React from "react";
 import type { JSX } from "react";
 import type { Chain } from "../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { convertCryptoToFiat } from "../../../../../exports/pay.js";
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { useActiveWalletChain } from "../../../../../react/core/hooks/wallets/useActiveWalletChain.js";
-import {
-  type GetWalletBalanceResult,
-  getWalletBalance,
-} from "../../../../../wallets/utils/getWalletBalance.js";
+import { isAddress } from "../../../../../utils/address.js";
+import { formatNumber } from "../../../../../utils/formatNumber.js";
+import { shortenLargeNumber } from "../../../../../utils/shortenLargeNumber.js";
+import { getWalletBalance } from "../../../../../wallets/utils/getWalletBalance.js";
 import { useAccountContext } from "./provider.js";
 
+/**
+ * @component
+ * @wallet
+ */
+export type AccountBalanceInfo = {
+  /**
+   * Represents either token balance or fiat balance.
+   */
+  balance: number;
+  /**
+   * Represents either token symbol or fiat symbol
+   */
+  symbol: string;
+};
+
 /**
  * Props for the AccountBalance component
  * @component
@@ -33,7 +53,7 @@ export interface AccountBalanceProps
    * use this function to transform the balance display value like round up the number
    * Particularly useful to avoid overflowing-UI issues
    */
-  formatFn?: (num: number) => number;
+  formatFn?: (props: AccountBalanceInfo) => string;
   /**
    * This component will be shown while the balance of the account is being fetched
    * If not passed, the component will return `null`.
@@ -67,9 +87,14 @@ export interface AccountBalanceProps
    * Optional `useQuery` params
    */
   queryOptions?: Omit<
-    UseQueryOptions<GetWalletBalanceResult>,
+    UseQueryOptions<AccountBalanceInfo>,
     "queryFn" | "queryKey"
   >;
+
+  /**
+   * Show the token balance in a supported fiat currency (e.g "USD")
+   */
+  showBalanceInFiat?: SupportedFiatCurrency;
 }
 
 /**
@@ -94,18 +119,21 @@ export interface AccountBalanceProps
  *
  *
  * ### Format the balance (round up, shorten etc.)
- * The AccountBalance component accepts a `formatFn` which takes in a number and outputs a number
- * The function is used to modify the display value of the wallet balance
+ * The AccountBalance component accepts a `formatFn` which takes in an object of type `AccountBalanceInfo` and outputs a string
+ * The function is used to modify the display value of the wallet balance (either in crypto or fiat)
  *
  * ```tsx
- * const roundTo1Decimal = (num: number):number => Math.round(num * 10) / 10;
+ * import type { AccountBalanceInfo } from "thirdweb/react";
+ * import { formatNumber } from "thirdweb/utils";
  *
- * <AccountBalance formatFn={roundTo1Decimal} />
+ * const format = (props: AccountInfoBalance):string => `${formatNumber(props.balance, 1)} ${props.symbol.toLowerCase()}`
+ *
+ * <AccountBalance formatFn={format} />
  * ```
  *
  * Result:
  * ```html
- * <span>1.1 ETH</span>
+ * <span>1.1 eth</span> // the balance is rounded up to 1 decimal and the symbol is lowercased
  * ```
  *
  * ### Show a loading sign when the balance is being fetched
@@ -149,10 +177,11 @@ export interface AccountBalanceProps
 export function AccountBalance({
   chain,
   tokenAddress,
-  formatFn,
   loadingComponent,
   fallbackComponent,
   queryOptions,
+  formatFn,
+  showBalanceInFiat,
   ...restProps
 }: AccountBalanceProps) {
   const { address, client } = useAccountContext();
@@ -160,25 +189,20 @@ export function AccountBalance({
   const chainToLoad = chain || walletChain;
   const balanceQuery = useQuery({
     queryKey: [
-      "walletBalance",
+      "internal_account_balance",
       chainToLoad?.id || -1,
-      address || "0x0",
+      address,
       { tokenAddress },
+      showBalanceInFiat,
     ] as const,
-    queryFn: async () => {
-      if (!chainToLoad) {
-        throw new Error("chain is required");
-      }
-      if (!client) {
-        throw new Error("client is required");
-      }
-      return getWalletBalance({
+    queryFn: async (): Promise<AccountBalanceInfo> =>
+      loadAccountBalance({
         chain: chainToLoad,
         client,
         address,
         tokenAddress,
-      });
-    },
+        showBalanceInFiat,
+      }),
     retry: false,
     ...queryOptions,
   });
@@ -191,13 +215,129 @@ export function AccountBalance({
     return fallbackComponent || null;
   }
 
-  const displayValue = formatFn
-    ? formatFn(Number(balanceQuery.data.displayValue))
-    : balanceQuery.data.displayValue;
+  // Prioritize using the formatFn from users
+  if (formatFn) {
+    return <span {...restProps}>{formatFn(balanceQuery.data)}</span>;
+  }
+
+  if (showBalanceInFiat) {
+    return (
+      <span {...restProps}>
+        {formatAccountFiatBalance({ ...balanceQuery.data, decimals: 0 })}
+      </span>
+    );
+  }
 
   return (
     <span {...restProps}>
-      {displayValue} {balanceQuery.data.symbol}
+      {formatAccountTokenBalance({
+        ...balanceQuery.data,
+        decimals: balanceQuery.data.balance < 1 ? 3 : 2,
+      })}
     </span>
   );
 }
+
+/**
+ * @internal Exported for tests
+ */
+export async function loadAccountBalance(props: {
+  chain?: Chain;
+  client: ThirdwebClient;
+  address: Address;
+  tokenAddress?: Address;
+  showBalanceInFiat?: SupportedFiatCurrency;
+}): Promise<AccountBalanceInfo> {
+  const { chain, client, address, tokenAddress, showBalanceInFiat } = props;
+  if (!chain) {
+    throw new Error("chain is required");
+  }
+
+  if (
+    tokenAddress &&
+    tokenAddress?.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()
+  ) {
+    throw new Error(`Invalid tokenAddress - cannot be ${NATIVE_TOKEN_ADDRESS}`);
+  }
+
+  if (!isAddress(address)) {
+    throw new Error("Invalid wallet address. Expected an EVM address");
+  }
+
+  if (tokenAddress && !isAddress(tokenAddress)) {
+    throw new Error("Invalid tokenAddress. Expected an EVM contract address");
+  }
+
+  const tokenBalanceData = await getWalletBalance({
+    chain,
+    client,
+    address,
+    tokenAddress,
+  }).catch(() => undefined);
+
+  if (!tokenBalanceData) {
+    throw new Error(
+      `Failed to retrieve ${tokenAddress ? `token: ${tokenAddress}` : "native token"} balance for address: ${address} on chainId:${chain.id}`,
+    );
+  }
+
+  if (showBalanceInFiat) {
+    const fiatData = await convertCryptoToFiat({
+      fromAmount: Number(tokenBalanceData.displayValue),
+      fromTokenAddress: tokenAddress || NATIVE_TOKEN_ADDRESS,
+      to: showBalanceInFiat,
+      chain,
+      client,
+    }).catch(() => undefined);
+
+    if (fiatData === undefined) {
+      throw new Error(
+        `Failed to resolve fiat value for ${tokenAddress ? `token: ${tokenAddress}` : "native token"} on chainId: ${chain.id}`,
+      );
+    }
+    return {
+      balance: fiatData?.result,
+      symbol:
+        new Intl.NumberFormat("en", {
+          style: "currency",
+          currency: showBalanceInFiat,
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        })
+          .formatToParts(0)
+          .find((p) => p.type === "currency")?.value ||
+        showBalanceInFiat.toUpperCase(),
+    };
+  }
+
+  return {
+    balance: Number(tokenBalanceData.displayValue),
+    symbol: tokenBalanceData.symbol,
+  };
+}
+
+/**
+ * Format the display balance for both crypto and fiat, in the Details button and Modal
+ * If both crypto balance and fiat balance exist, we have to keep the string very short to avoid UI issues.
+ * @internal
+ * Used internally for the Details button and the Details Modal
+ */
+export function formatAccountTokenBalance(
+  props: AccountBalanceInfo & { decimals: number },
+): string {
+  const formattedTokenBalance = formatNumber(props.balance, props.decimals);
+  return `${formattedTokenBalance} ${props.symbol}`;
+}
+
+/**
+ * Used internally for the Details button and Details Modal
+ * @internal
+ */
+export function formatAccountFiatBalance(
+  props: AccountBalanceInfo & { decimals: number },
+) {
+  const num = formatNumber(props.balance, props.decimals);
+  // Need to keep them short to avoid UI overflow issues
+  const formattedFiatBalance = shortenLargeNumber(num);
+  return `${props.symbol}${formattedFiatBalance}`;
+}

package/src/react/web/ui/prebuilt/Account/provider.test.tsx

@@ -35,4 +35,20 @@ describe.runIf(process.env.TW_SECRET_KEY)("AccountProvider component", () => {
       }),
     ).toBeInTheDocument();
   });
+
+  it("should throw an error if no address is provided", () => {
+    expect(() => {
+      render(
+        <AccountProvider
+          // biome-ignore lint/suspicious/noExplicitAny: testing invalid input
+          address={undefined as any}
+          client={TEST_CLIENT}
+        >
+          <AccountAddress />
+        </AccountProvider>,
+      );
+    }).toThrowError(
+      "AccountProvider: No address passed. Ensure an address is always provided to the AccountProvider",
+    );
+  });
 });

package/src/react/web/ui/prebuilt/Account/provider.tsx

@@ -48,6 +48,11 @@ const AccountProviderContext = /* @__PURE__ */ createContext<
 export function AccountProvider(
   props: React.PropsWithChildren<AccountProviderProps>,
 ) {
+  if (!props.address) {
+    throw new Error(
+      "AccountProvider: No address passed. Ensure an address is always provided to the AccountProvider",
+    );
+  }
   return (
     <AccountProviderContext.Provider value={props}>
       {props.children}

package/src/utils/formatNumber.ts

@@ -1,5 +1,11 @@
 /**
- * @internal
+ * Round up a number to a certain decimal place
+ * @example
+ * ```ts
+ * import { formatNumber } from "thirdweb/utils";
+ * const value = formatNumber(12.1214141, 1); // 12.1
+ * ```
+ * @utils
  */
 export function formatNumber(value: number, decimalPlaces: number) {
   if (value === 0) return 0;