thirdweb 5.86.7-nightly-f5f8a40320d5d768d5866813f53ee4880bdf7851-20250129000319 → 5.87.0

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

@@ -1,35 +1,19 @@
 "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 { 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;
-};
+import { getAddress } from "../../../../../utils/address.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+import {
+  type AccountBalanceInfo,
+  formatAccountFiatBalance,
+  loadAccountBalance,
+} from "../../../../core/utils/account.js";
+import { formatAccountTokenBalance } from "../../../../core/utils/account.js";
 
 /**
  * Props for the AccountBalance component
@@ -199,8 +183,8 @@ export function AccountBalance({
       loadAccountBalance({
         chain: chainToLoad,
         client,
-        address,
-        tokenAddress,
+        address: getAddress(address),
+        tokenAddress: tokenAddress ? getAddress(tokenAddress) : undefined,
         showBalanceInFiat,
       }),
     retry: false,
@@ -237,107 +221,3 @@ export function AccountBalance({
     </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/blobbie.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { useAccountContext } from "../../../../core/account/provider.js";
 import { Blobbie, type BlobbieProps } from "../../ConnectWallet/Blobbie.js";
-import { useAccountContext } from "./provider.js";
 
 /**
  * A wrapper for the Blobbie component

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

@@ -1,8 +1,8 @@
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
+import { AccountProvider } from "../../../../core/account/provider.js";
 import { AccountName } from "./name.js";
-import { AccountProvider } from "./provider.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("AccountName component", () => {
   it("should return the correct social name", () => {

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

@@ -9,7 +9,7 @@ import {
 } from "../../../../../extensions/ens/resolve-name.js";
 import { getSocialProfiles } from "../../../../../social/profiles.js";
 import type { SocialProfile } from "../../../../../social/types.js";
-import { useAccountContext } from "./provider.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
 
 /**
  * Props for the AccountName component

package/src/react/web/ui/prebuilt/Wallet/icon.test.tsx

@@ -1,7 +1,8 @@
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";
-import { SocialIcon, WalletIcon, fetchWalletImage } from "./icon.js";
-import { WalletProvider } from "./provider.js";
+import { fetchWalletImage } from "../../../../core/utils/walletIcon.js";
+import { WalletProvider } from "../../../../core/wallet/provider.js";
+import { SocialIcon, WalletIcon } from "./icon.js";
 
 describe("WalletIcon", () => {
   it("should fetch wallet image", async () => {

package/src/react/web/ui/prebuilt/Wallet/icon.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type { UseQueryOptions } from "@tanstack/react-query";
 import type { JSX } from "react";
-import { getWalletInfo } from "../../../../../wallets/__generated__/getWalletInfo.js";
 import type { AuthOption } from "../../../../../wallets/types.js";
-import type { WalletId } from "../../../../../wallets/wallet-types.js";
-import { getSocialIcon } from "../../../../core/utils/walletIcon.js";
-import { useWalletContext } from "./provider.js";
+import {
+  getSocialIcon,
+  useWalletIcon,
+} from "../../../../core/utils/walletIcon.js";
 
 export interface WalletIconProps
   extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
@@ -96,31 +96,7 @@ export function WalletIcon({
   return <img src={imageQuery.data} {...restProps} alt={restProps.alt} />;
 }
 
-/**
- * @internal
- */
-function useWalletIcon(props: {
-  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
-}) {
-  const { id } = useWalletContext();
-  const imageQuery = useQuery({
-    queryKey: ["walletIcon", id],
-    queryFn: async () => fetchWalletImage({ id }),
-    ...props.queryOptions,
-  });
-  return imageQuery;
-}
-
-/**
- * @internal Exported for tests only
- */
-export async function fetchWalletImage(props: {
-  id: WalletId;
-}) {
-  return getWalletInfo(props.id, true);
-}
-
-interface SocialIconProps
+export interface SocialIconProps
   extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
   provider: AuthOption | string;
 }

package/src/react/web/ui/prebuilt/Wallet/name.test.tsx

@@ -1,8 +1,12 @@
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";
 import { getFunctionId } from "../../../../../utils/function-id.js";
-import { WalletName, fetchWalletName, getQueryKeys } from "./name.js";
-import { WalletProvider } from "./provider.js";
+import {
+  fetchWalletName,
+  getQueryKeys,
+} from "../../../../core/utils/walletname.js";
+import { WalletProvider } from "../../../../core/wallet/provider.js";
+import { WalletName } from "./name.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("WalletName", () => {
   it("fetchWalletName: should fetch wallet name from id", async () => {

package/src/react/web/ui/prebuilt/Wallet/name.tsx

@@ -1,11 +1,8 @@
 "use client";
 
-import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type { UseQueryOptions } from "@tanstack/react-query";
 import type { JSX } from "react";
-import { getFunctionId } from "../../../../../utils/function-id.js";
-import { getWalletInfo } from "../../../../../wallets/__generated__/getWalletInfo.js";
-import type { WalletId } from "../../../../../wallets/wallet-types.js";
-import { useWalletContext } from "./provider.js";
+import { useWalletName } from "../../../../core/utils/walletname.js";
 
 /**
  * Props for the WalletName component
@@ -115,50 +112,3 @@ export function WalletName({
   }
   return <span {...restProps}>{nameQuery.data}</span>;
 }
-
-/**
- * @internal
- */
-function useWalletName(props: {
-  formatFn?: (str: string) => string;
-  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
-}) {
-  const { id } = useWalletContext();
-  const nameQuery = useQuery({
-    queryKey: getQueryKeys({ id, formatFn: props.formatFn }),
-    queryFn: async () => fetchWalletName({ id, formatFn: props.formatFn }),
-    ...props.queryOptions,
-  });
-  return nameQuery;
-}
-
-/**
- * @internal Exported for tests only
- */
-export function getQueryKeys(props: {
-  id: WalletId;
-  formatFn?: (str: string) => string;
-}) {
-  if (typeof props.formatFn === "function") {
-    return [
-      "walletName",
-      props.id,
-      { resolver: getFunctionId(props.formatFn) },
-    ] as const;
-  }
-  return ["walletName", props.id] as const;
-}
-
-/**
- * @internal Exported for tests only
- */
-export async function fetchWalletName(props: {
-  id: WalletId;
-  formatFn?: (str: string) => string;
-}) {
-  const info = await getWalletInfo(props.id);
-  if (typeof props.formatFn === "function") {
-    return props.formatFn(info.name);
-  }
-  return info.name;
-}

package/src/utils/shortenLargeNumber.ts

@@ -13,6 +13,9 @@
  * @utils
  */
 export function shortenLargeNumber(value: number) {
+  if (value === 0) {
+    return "0.00";
+  }
   if (value < 1000) {
     return value.toString();
   }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.86.7-nightly-f5f8a40320d5d768d5866813f53ee4880bdf7851-20250129000319";
+export const version = "5.87.0";

package/dist/cjs/react/web/ui/prebuilt/Account/provider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/provider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAgDb,0CAaC;AAKD,8CAQC;;AAtED,iCAAkD;AAmBlD,MAAM,sBAAsB,GAAG,eAAe,CAAC,IAAA,qBAAa,EAE1D,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAgB,eAAe,CAC7B,KAAoD;IAEpD,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CACb,iGAAiG,CAClG,CAAC;IACJ,CAAC;IACD,OAAO,CACL,uBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC1C,KAAK,CAAC,QAAQ,GACiB,CACnC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAgB,iBAAiB;IAC/B,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,sBAAsB,CAAC,CAAC;IAC/C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,oIAAoI,CACrI,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/cjs/react/web/ui/prebuilt/Wallet/provider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Wallet/provider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AA0Cb,wCAQC;AAKD,4CAQC;;AA5DD,iCAAkD;AAYlD;;GAEG;AACU,QAAA,qBAAqB,GAAmB,IAAA,qBAAa,EAEhE,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAgB,cAAc,CAC5B,KAAmD;IAEnD,OAAO,CACL,uBAAC,6BAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACzC,KAAK,CAAC,QAAQ,GACgB,CAClC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAgB,gBAAgB;IAC9B,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,6BAAqB,CAAC,CAAC;IAC9C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,6HAA6H,CAC9H,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/esm/react/web/ui/prebuilt/Account/provider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAmBlD,MAAM,sBAAsB,GAAG,eAAe,CAAC,aAAa,CAE1D,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,eAAe,CAC7B,KAAoD;IAEpD,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CACb,iGAAiG,CAClG,CAAC;IACJ,CAAC;IACD,OAAO,CACL,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC1C,KAAK,CAAC,QAAQ,GACiB,CACnC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,iBAAiB;IAC/B,MAAM,GAAG,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAC/C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,oIAAoI,CACrI,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/esm/react/web/ui/prebuilt/Wallet/provider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Wallet/provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAYlD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,eAAe,CAAC,aAAa,CAEhE,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAmD;IAEnD,OAAO,CACL,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACzC,KAAK,CAAC,QAAQ,GACgB,CAClC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,GAAG,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC9C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,6HAA6H,CAC9H,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/types/react/web/ui/prebuilt/Account/provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,EAAE,cAAc,CAAC;CACxB,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,8CAYrD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,yBAQhC"}

package/dist/types/react/web/ui/prebuilt/Wallet/provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Wallet/provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAEvE;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,QAAQ,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,gDAEtB,CAAC;AAEb;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,8CAOpD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,wBAQ/B"}