thirdweb 5.86.7-nightly-f5f8a40320d5d768d5866813f53ee4880bdf7851-20250129000319 → 5.87.1

package/src/react/core/utils/account.ts

@@ -0,0 +1,146 @@
+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 "../../../pay/convert/cryptoToFiat.js";
+import type { SupportedFiatCurrency } from "../../../pay/convert/type.js";
+import { type Address, isAddress } from "../../../utils/address.js";
+import { formatNumber } from "../../../utils/formatNumber.js";
+import { shortenLargeNumber } from "../../../utils/shortenLargeNumber.js";
+import { getWalletBalance } from "../../../wallets/utils/getWalletBalance.js";
+
+export const COLOR_OPTIONS = [
+  ["#fca5a5", "#b91c1c"],
+  ["#fdba74", "#c2410c"],
+  ["#fcd34d", "#b45309"],
+  ["#fde047", "#a16207"],
+  ["#a3e635", "#4d7c0f"],
+  ["#86efac", "#15803d"],
+  ["#67e8f9", "#0e7490"],
+  ["#7dd3fc", "#0369a1"],
+  ["#93c5fd", "#1d4ed8"],
+  ["#a5b4fc", "#4338ca"],
+  ["#c4b5fd", "#6d28d9"],
+  ["#d8b4fe", "#7e22ce"],
+  ["#f0abfc", "#a21caf"],
+  ["#f9a8d4", "#be185d"],
+  ["#fda4af", "#be123c"],
+];
+
+/**
+ * @component
+ * @wallet
+ */
+export type AccountBalanceInfo = {
+  /**
+   * Represents either token balance or fiat balance.
+   */
+  balance: number;
+  /**
+   * Represents either token symbol or fiat symbol
+   */
+  symbol: string;
+};
+
+/**
+ * @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}`,
+      );
+    }
+    const result = {
+      balance: fiatData?.result,
+      symbol: getFiatSymbol(showBalanceInFiat),
+    };
+
+    return result;
+  }
+
+  return {
+    balance: Number(tokenBalanceData.displayValue),
+    symbol: tokenBalanceData.symbol,
+  };
+}
+
+function getFiatSymbol(showBalanceInFiat: SupportedFiatCurrency) {
+  switch (showBalanceInFiat) {
+    case "USD":
+      return "$";
+  }
+}
+
+/**
+ * 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/core/utils/walletIcon.ts

@@ -1,4 +1,8 @@
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { getWalletInfo } from "../../../wallets/__generated__/getWalletInfo.js";
 import type { AuthOption } from "../../../wallets/types.js";
+import type { WalletId } from "../../../wallets/wallet-types.js";
+import { useWalletContext } from "../wallet/provider.js";
 
 // TODO make the social icons usable in RN too
 const googleIconUri =
@@ -106,3 +110,27 @@ export function getSocialIcon(provider: AuthOption | ({} & string)): string {
       return genericWalletIcon;
   }
 }
+
+/**
+ * @internal
+ */
+export 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);
+}

package/src/react/core/utils/walletname.ts

@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import type { UseQueryOptions } from "@tanstack/react-query";
+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 "../wallet/provider.js";
+
+/**
+ * @internal
+ */
+export 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/react/{web/ui/prebuilt/Wallet → core/wallet}/provider.tsx

@@ -2,7 +2,7 @@
 
 import type React from "react";
 import { createContext, useContext } from "react";
-import type { WalletId } from "../../../../../wallets/wallet-types.js";
+import type { WalletId } from "../../../wallets/wallet-types.js";
 
 /**
  * Props for the WalletProvider component

package/src/react/native/ui/prebuilt/Account/address.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { Text, type TextProps } from "react-native";
+import { useAccountContext } from "../../../../core/account/provider.js";
+
+/**
+ * @component
+ * @wallet
+ */
+export interface AccountAddressProps extends Omit<TextProps, "children"> {
+  /**
+   * The function used to transform (format) the wallet address
+   * Specifically useful for shortening the wallet.
+   *
+   * This function should take in a string and output a string
+   */
+  formatFn?: (str: string) => string;
+  className?: string;
+}
+
+/**
+ *
+ * @returns a <span> containing the full wallet address of the account
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountAddress } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x12345674b599ce99958242b3D3741e7b01841DF3" client={TW_CLIENT}>
+ *   <AccountAddress />
+ * </AccountProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>0x12345674b599ce99958242b3D3741e7b01841DF3</span>
+ * ```
+ *
+ *
+ * ### Shorten the address
+ * ```tsx
+ * import { AccountProvider, AccountAddress } from "thirdweb/react";
+ * import { shortenAddress } from "thirdweb/utils";
+ *
+ * <AccountProvider address="0x12345674b599ce99958242b3D3741e7b01841DF3" client={TW_CLIENT}>
+ *   <AccountAddress formatFn={shortenAddress} />
+ * </AccountProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>0x1234...1DF3</span>
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function AccountAddress({
+  formatFn,
+  ...restProps
+}: AccountAddressProps) {
+  const { address } = useAccountContext();
+  const value = formatFn ? formatFn(address) : address;
+  return <Text {...restProps}>{value}</Text>;
+}

package/src/react/native/ui/prebuilt/Account/avatar.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { Image, type ImageProps } from "react-native";
+import { resolveAvatar } from "../../../../../extensions/ens/resolve-avatar.js";
+import {
+  type ResolveNameOptions,
+  resolveName,
+} from "../../../../../extensions/ens/resolve-name.js";
+import { getSocialProfiles } from "../../../../../social/profiles.js";
+import type { SocialProfile } from "../../../../../social/types.js";
+import { parseAvatarRecord } from "../../../../../utils/ens/avatar.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+/**
+ * Props for the AccountAvatar component
+ * @component
+ * @wallet
+ */
+export interface AccountAvatarProps
+  extends Omit<ImageProps, "source">,
+    Omit<ResolveNameOptions, "client" | "address"> {
+  /**
+   * Use this prop to prioritize the social profile that you want to display
+   * This is useful for a wallet containing multiple social profiles.
+   * This component inherits all attributes of a HTML's <img />, so you can interact with it just like a normal <img />
+   *
+   * @example
+   * If you have ENS, Lens and Farcaster profiles linked to your wallet
+   * you can prioritize showing the image for Lens by:
+   * ```tsx
+   * <AccountAvatar
+   *   socialType="lens" // Choose between: "farcaster" | "lens" | "ens"
+   * />
+   * ```
+   */
+  socialType?: SocialProfile["type"];
+
+  /**
+   * This component will be shown while the avatar of the account is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <AccountAvatar loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: React.ComponentType;
+  /**
+   * This component will be shown if the request for fetching the avatar is done
+   * but could not retreive any result.
+   * You can pass a dummy avatar/image to this prop.
+   *
+   * If not passed, the component will return `null`
+   *
+   * @example
+   * ```tsx
+   * <AccountAvatar fallbackComponent={<DummyImage />} />
+   * ```
+   */
+  fallbackComponent?: React.ComponentType;
+
+  /**
+   * Optional query options for `useQuery`
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}
+
+/**
+ * The component for showing the avatar of the account.
+ * If fetches all the social profiles linked to your wallet, including: Farcaster, ENS, Lens (more to be added)
+ * You can choose which social profile you want to display. Defaults to the first item in the list.
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar />
+ * </AccountProvider>
+ * ```
+ * Result: An <img /> component, if the avatar is resolved successfully
+ * ```html
+ * <img alt="" src="resolved-url-for-the-avatar" />
+ * ```
+ *
+ * ### Show a loading sign when the avatar is being resolved
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     loadingComponent={<YourLoadingComponent />}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Fallback to something when the avatar fails to resolve
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     fallbackComponent={<DummyImage />}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Select a social profile to display
+ * If you wallet associates with more than one social profiles (Lens, Farcaster, ENS, etc.)
+ * You can specify which service you want to prioritize using the `socialType` props
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     // Choose between: "farcaster" | "lens" | "ens"
+ *     socialType={"ens"}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Custom ENS resolver chain
+ * This component shares the same props with the ENS extension `resolveAvatar`
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ * import { base } from "thirdweb/chains";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     resolverAddress={"0x..."}
+ *     resolverChain={base}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery
+ * This component uses `@tanstack-query`'s useQuery internally.
+ * You can use the `queryOptions` prop for more fine-grained control
+ * ```tsx
+ * <AccountAvatar
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 3,
+ *   }}
+ * />
+ * ```
+ * @returns An <img /> if the avatar is resolved successfully
+ * @component
+ * @wallet
+ * @beta
+ */
+export function AccountAvatar({
+  socialType,
+  resolverAddress,
+  resolverChain,
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  ...restProps
+}: AccountAvatarProps) {
+  const { address, client } = useAccountContext();
+  const avatarQuery = useQuery({
+    queryKey: [
+      "account-avatar",
+      address,
+      { socialType },
+      { resolverAddress, resolverChain },
+    ],
+    queryFn: async (): Promise<string> => {
+      const [socialData, ensName] = await Promise.all([
+        getSocialProfiles({ address, client }),
+        resolveName({
+          client,
+          address: address || "",
+          resolverAddress,
+          resolverChain,
+        }),
+      ]);
+
+      const uri = socialData?.filter(
+        (p) => p.avatar && (socialType ? p.type === socialType : true),
+      )[0]?.avatar;
+
+      const [resolvedSocialAvatar, resolvedENSAvatar] = await Promise.all([
+        uri ? parseAvatarRecord({ client, uri }) : undefined,
+        ensName
+          ? resolveAvatar({
+              client,
+              name: ensName,
+            })
+          : undefined,
+      ]);
+
+      // If no social image + ens name found -> exit and show <Blobbie />
+      if (!resolvedSocialAvatar && !resolvedENSAvatar) {
+        throw new Error("Failed to resolve social + ens avatar");
+      }
+
+      // else, prioritize the social image first
+      if (resolvedSocialAvatar) {
+        return resolvedSocialAvatar;
+      }
+
+      if (resolvedENSAvatar) {
+        return resolvedENSAvatar;
+      }
+
+      throw new Error("Failed to resolve social + ens avatar");
+    },
+    retry: false,
+    ...queryOptions,
+  });
+
+  if (avatarQuery.isLoading) {
+    return loadingComponent || null;
+  }
+
+  if (!avatarQuery.data) {
+    return fallbackComponent || null;
+  }
+
+  return <Image source={{ uri: avatarQuery.data }} {...restProps} />;
+}