thirdweb 5.86.7-nightly-f5f8a40320d5d768d5866813f53ee4880bdf7851-20250129000319 → 5.87.1

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

@@ -0,0 +1,221 @@
+"use client";
+
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { Text, type TextProps } from "react-native";
+import type { Chain } from "../../../../../chains/types.js";
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
+import { useActiveWalletChain } from "../../../../../react/core/hooks/wallets/useActiveWalletChain.js";
+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
+ * @component
+ * @wallet
+ */
+export interface AccountBalanceProps extends Omit<TextProps, "children"> {
+  /**
+   * The network to fetch balance on
+   * If not passed, the component will use the current chain that the wallet is connected to (`useActiveWalletChain()`)
+   */
+  chain?: Chain;
+  /**
+   * By default this component will fetch the balance for the native token on a given chain
+   * If you want to fetch balance for an ERC20 token, use the `tokenAddress` props
+   */
+  tokenAddress?: string;
+  /**
+   * A function to format the balance's display value
+   * use this function to transform the balance display value like round up the number
+   * Particularly useful to avoid overflowing-UI issues
+   */
+  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`.
+   *
+   * You can/should pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <AccountBalance
+   *   chain={ethereum}
+   *   loadingComponent={<Spinner />}
+   * />
+   * ```
+   */
+  loadingComponent?: React.ComponentType;
+  /**
+   * This component will be shown if the balance fails to be retreived
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a descriptive text/component to this prop, indicating that the
+   * balance was not fetched succesfully
+   * @example
+   * ```tsx
+   * <AccountBalance
+   *   chain={nonExistentChain}
+   *   fallbackComponent={"Failed to load"}
+   * />
+   * ```
+   */
+  fallbackComponent?: React.ComponentType;
+  /**
+   * Optional `useQuery` params
+   */
+  queryOptions?: Omit<
+    UseQueryOptions<AccountBalanceInfo>,
+    "queryFn" | "queryKey"
+  >;
+
+  /**
+   * Show the token balance in a supported fiat currency (e.g "USD")
+   */
+  showBalanceInFiat?: SupportedFiatCurrency;
+}
+
+/**
+ * This component fetches and shows the balance of the wallet address on a given chain.
+ * It inherits all the attributes of a HTML <span> component, hence you can style it just like how you would style a normal <span>
+ *
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountBalance } from "thirdweb/react";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountBalance chain={ethereum} />
+ * </AccountProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>1.091435 ETH</span>
+ * ```
+ *
+ *
+ * ### Format the balance (round up, shorten etc.)
+ * 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
+ * import type { AccountBalanceInfo } from "thirdweb/react";
+ * import { formatNumber } from "thirdweb/utils";
+ *
+ * const format = (props: AccountInfoBalance):string => `${formatNumber(props.balance, 1)} ${props.symbol.toLowerCase()}`
+ *
+ * <AccountBalance formatFn={format} />
+ * ```
+ *
+ * Result:
+ * ```html
+ * <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
+ * ```tsx
+ * import { AccountProvider, AccountBalance } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountBalance
+ *     chain={ethereum}
+ *     loadingComponent={<Spinner />}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Fallback to something when the balance fails to resolve
+ * ```tsx
+ * <AccountProvider address="0x...">
+ *   <AccountBalance
+ *     chain={nonExistentChain}
+ *     fallbackComponent={"Failed to load"}
+ *   />
+ * </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
+ * <AccountBalance
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 4,
+ *   }}
+ * />
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function AccountBalance({
+  chain,
+  tokenAddress,
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  formatFn,
+  showBalanceInFiat,
+  ...restProps
+}: AccountBalanceProps) {
+  const { address, client } = useAccountContext();
+  const walletChain = useActiveWalletChain();
+  const chainToLoad = chain || walletChain;
+  const balanceQuery = useQuery({
+    queryKey: [
+      "internal_account_balance",
+      chainToLoad?.id || -1,
+      address,
+      { tokenAddress },
+      showBalanceInFiat,
+    ] as const,
+    queryFn: async (): Promise<AccountBalanceInfo> =>
+      loadAccountBalance({
+        chain: chainToLoad,
+        client,
+        address: getAddress(address),
+        tokenAddress: tokenAddress ? getAddress(tokenAddress) : undefined,
+        showBalanceInFiat,
+      }),
+    retry: false,
+    ...queryOptions,
+  });
+
+  if (balanceQuery.isLoading) {
+    return loadingComponent || null;
+  }
+
+  if (balanceQuery.data === undefined) {
+    return fallbackComponent || null;
+  }
+
+  // Prioritize using the formatFn from users
+  if (formatFn) {
+    return <Text {...restProps}>{formatFn(balanceQuery.data)}</Text>;
+  }
+
+  if (showBalanceInFiat) {
+    return (
+      <Text {...restProps}>
+        {formatAccountFiatBalance({ ...balanceQuery.data, decimals: 2 })}
+      </Text>
+    );
+  }
+
+  return (
+    <Text {...restProps}>
+      {formatAccountTokenBalance({
+        ...balanceQuery.data,
+        decimals: balanceQuery.data.balance < 1 ? 3 : 2,
+      })}
+    </Text>
+  );
+}

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

@@ -0,0 +1,94 @@
+import { hexToNumber } from "@noble/curves/abstract/utils";
+import { useMemo } from "react";
+import { StyleSheet, View, type ViewStyle } from "react-native";
+import { Defs, LinearGradient, Rect, Stop, Svg } from "react-native-svg";
+import { useAccountContext } from "../../../../core/account/provider.js";
+import { COLOR_OPTIONS } from "../../../../core/utils/account.js";
+/**
+ * Props for the Blobbie component
+ * @component
+ */
+export type BlobbieProps = {
+  address: string;
+  size: number;
+  style?: ViewStyle;
+};
+
+/**
+ * A wrapper for the Blobbie component
+ * @param props BlobbieProps
+ * @beta
+ * @wallet
+ */
+export function AccountBlobbie(props: Omit<BlobbieProps, "address">) {
+  const { address } = useAccountContext();
+  return <Blobbie {...props} address={address} />;
+}
+
+/**
+ * A unique gradient avatar based on the provided address.
+ * @param props The component props.
+ * @param props.address The address to generate the gradient with.
+ * @param props.style The style for the component
+ * @param props.size The size of each side of the square avatar (in pixels)
+ * @component
+ * @wallet
+ * @example
+ * ```tsx
+ * import { Blobbie } from "thirdweb/react";
+ *
+ * <Blobbie address="0x...." style={{ width: 40, height: 40 }} />
+ * ```
+ */
+export function Blobbie(props: BlobbieProps) {
+  const colors = useMemo(
+    () =>
+      COLOR_OPTIONS[
+        Number(hexToNumber(props.address.slice(2, 4))) % COLOR_OPTIONS.length
+      ] as [string, string],
+    [props.address],
+  );
+
+  const containerStyle = useMemo(() => {
+    const baseStyle = props.style || {};
+    if (props.size) {
+      return {
+        ...baseStyle,
+        width: props.size,
+        height: props.size,
+      };
+    }
+    return baseStyle;
+  }, [props.style, props.size]);
+
+  const gradientUniqueId = `grad${colors[0]}+${colors[1]}`.replace(
+    /[^a-zA-Z0-9 ]/g,
+    "",
+  );
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <Svg height="100%" width="100%" style={StyleSheet.absoluteFillObject}>
+        <Defs>
+          <LinearGradient
+            id={gradientUniqueId}
+            x1="0%"
+            y1="100%"
+            x2="100%"
+            y2="0%"
+          >
+            <Stop offset="0" stopColor={colors[0]} />
+            <Stop offset="1" stopColor={colors[1]} />
+          </LinearGradient>
+        </Defs>
+        <Rect width="100%" height="100%" fill={`url(#${gradientUniqueId})`} />
+      </Svg>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+  },
+});

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

@@ -0,0 +1,180 @@
+"use client";
+
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { Text, type TextProps } from "react-native";
+import {
+  type ResolveNameOptions,
+  resolveName,
+} from "../../../../../extensions/ens/resolve-name.js";
+import { getSocialProfiles } from "../../../../../social/profiles.js";
+import type { SocialProfile } from "../../../../../social/types.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+
+/**
+ * Props for the AccountName component
+ * @component
+ * @wallet
+ */
+export interface AccountNameProps
+  extends Omit<TextProps, "children">,
+    Omit<ResolveNameOptions, "client" | "address"> {
+  /**
+   * A function used to transform (format) the name of the account.
+   * it should take in a string and output a string.
+   *
+   * This function is particularly useful
+   */
+  formatFn?: (str: string) => string;
+  /**
+   * Use this prop to prioritize the social profile that you want to display
+   * This is useful for a wallet containing multiple social profiles
+   */
+  socialType?: SocialProfile["type"];
+  /**
+   * This component will be shown while the name 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
+   * <AccountName loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: React.ComponentType;
+  /**
+   * This component will be shown if the request for fetching the name is done but could not retreive any result.
+   * You can pass the wallet address as the fallback option if that's the case.
+   *
+   * If not passed, the component will return `null`
+   *
+   * @example
+   * ```tsx
+   * <AccountName fallbackComponent={"0x1234....3f3f"} />
+   * ```
+   */
+  fallbackComponent?: React.ComponentType;
+  /**
+   * Optional `useQuery` params
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}
+
+/**
+ * This component is used to display the name of the account.
+ * A "name" in this context is the username, or account of the social profiles that the wallet may have.
+ * In case a name is not found or failed to resolve, you can always fallback to displaying the wallet address instead by using the `fallbackComponent` prop.
+ *
+ * This component inherits all attribute of a native HTML <span> element, so you can style it just like how you would style a <span>.
+ *
+ * @param props
+ * @returns A `<span>` containing the name of the account
+ * ```html
+ * <span>{name}</span>
+ * ```
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountName } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x1234...3f3f" client={client}>
+ *   <AccountName />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Show wallet address while social name is being loaded
+ * ```tsx
+ * <AccountName
+ *   loadingComponent={<AccountAddress />}
+ * />
+ * ```
+ *
+ *
+ * ### Fallback to showing wallet address if fail to resolve social name
+ * ```tsx
+ * <AccountName
+ *   fallbackComponent={<AccountAddress />}
+ * />
+ * ```
+ *
+ * ### Transform the account name using `formatFn` prop
+ * ```tsx
+ * import { isAddress, shortenAddress } from "thirdweb/utils";
+ * import { AccountProvider, AccountName } from "thirdweb/react";
+ *
+ * // Let's say we want the name to be capitalized without using CSS
+ * const formatName = (name: string) => name.toUpperCase();
+ *
+ * return <AccountName formatFn={formatName} />
+ * ```
+ *
+ *
+ * ### 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
+ * <AccountName
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 3
+ *   }}
+ * />
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function AccountName({
+  resolverAddress,
+  resolverChain,
+  socialType,
+  formatFn,
+  queryOptions,
+  loadingComponent,
+  fallbackComponent,
+  ...restProps
+}: AccountNameProps) {
+  const { address, client } = useAccountContext();
+  const nameQuery = useQuery({
+    queryKey: [
+      "account-name",
+      address,
+      { socialType },
+      { resolverAddress, resolverChain },
+    ],
+    queryFn: async () => {
+      const [socialData, ensName] = await Promise.all([
+        getSocialProfiles({ address, client }),
+        resolveName({
+          client,
+          address,
+          resolverAddress,
+          resolverChain,
+        }),
+      ]);
+
+      const name =
+        socialData?.filter(
+          (p) => p.name && (socialType ? p.type === socialType : true),
+        )[0]?.name || ensName;
+
+      if (!name) {
+        throw new Error("Failed to resolve account name");
+      }
+      return formatFn ? formatFn(name) : name;
+    },
+    retry: false,
+    ...queryOptions,
+  });
+
+  if (nameQuery.isLoading) {
+    return loadingComponent || null;
+  }
+
+  if (!nameQuery.data) {
+    return fallbackComponent || null;
+  }
+
+  return <Text {...restProps}>{nameQuery.data}</Text>;
+}

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

@@ -0,0 +1,124 @@
+"use client";
+
+import type { UseQueryOptions } from "@tanstack/react-query";
+import { Image, type ImageProps } from "react-native";
+import { SvgXml, type XmlProps } from "react-native-svg";
+import type { AuthOption } from "../../../../../wallets/types.js";
+import { useWalletIcon } from "../../../../core/utils/walletIcon.js";
+import { getAuthProviderImage } from "../../components/WalletImage.js";
+
+export interface WalletIconProps extends Omit<ImageProps, "uri"> {
+  /**
+   * This component will be shown while the icon of the wallet is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <WalletIcon loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: React.ComponentType;
+  /**
+   * This component will be shown if the icon fails to be retrieved
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a descriptive text/component to this prop, indicating that the
+   * icon was not fetched successfully
+   * @example
+   * ```tsx
+   * <WalletIcon fallbackComponent={<span>Failed to load</span>}
+   * />
+   * ```
+   */
+  fallbackComponent?: React.ComponentType;
+  /**
+   * Optional `useQuery` params
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}
+
+/**
+ * This component tries to resolve the icon of a given wallet, then return an image.
+ * @returns an <img /> with the src of the wallet icon
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { WalletProvider, WalletIcon } from "thirdweb/react";
+ *
+ * <WalletProvider id="io.metamask">
+ *   <WalletIcon />
+ * </WalletProvider>
+ * ```
+ *
+ * Result: An <img /> component with the src of the icon
+ * ```html
+ * <img src="metamask-icon.png" />
+ * ```
+ *
+ * ### Show a loading sign while the icon is being loaded
+ * ```tsx
+ * <WalletIcon loadingComponent={<Spinner />} />
+ * ```
+ *
+ * ### Fallback to a dummy image if the wallet icon fails to resolve
+ * ```tsx
+ * <WalletIcon fallbackComponent={<img src="blank-image.png" />} />
+ * ```
+ *
+ * ### Usage with queryOptions
+ * WalletIcon uses useQuery() from tanstack query internally.
+ * It allows you to pass a custom queryOptions of your choice for more control of the internal fetching logic
+ * ```tsx
+ * <WalletIcon queryOptions={{ enabled: someLogic, retry: 3, }} />
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function WalletIcon({
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  ...restProps
+}: WalletIconProps) {
+  const imageQuery = useWalletIcon({ queryOptions });
+  if (imageQuery.isLoading) {
+    return loadingComponent || null;
+  }
+  if (!imageQuery.data) {
+    return fallbackComponent || null;
+  }
+  return <Image source={{ uri: imageQuery.data }} {...restProps} />;
+}
+
+export interface SocialIconProps extends Omit<XmlProps, "xml"> {
+  provider: AuthOption | (string & {});
+}
+
+/**
+ * Social auth provider icon
+ * @returns an <img /> component with the src set to the svg
+ *
+ * @example
+ * ```tsx
+ * import { SocialIcon } from "thirdweb/react";
+ *
+ * <SocialIcon provider="google" />
+ * ```
+ *
+ * Result: An <img /> component with the src of the icon
+ * ```html
+ * <img src="google-icon-svg" />
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function SocialIcon({ provider, ...restProps }: SocialIconProps) {
+  const src = getAuthProviderImage(provider);
+  return <SvgXml xml={src} {...restProps} />;
+}