thirdweb 5.86.6 → 5.87.0

package/dist/esm/react/native/ui/prebuilt/Account/avatar.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "react-native";
+import { resolveAvatar } from "../../../../../extensions/ens/resolve-avatar.js";
+import { resolveName, } from "../../../../../extensions/ens/resolve-name.js";
+import { getSocialProfiles } from "../../../../../social/profiles.js";
+import { parseAvatarRecord } from "../../../../../utils/ens/avatar.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+/**
+ * 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 }) {
+    const { address, client } = useAccountContext();
+    const avatarQuery = useQuery({
+        queryKey: [
+            "account-avatar",
+            address,
+            { socialType },
+            { resolverAddress, resolverChain },
+        ],
+        queryFn: async () => {
+            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 _jsx(Image, { source: { uri: avatarQuery.data }, ...restProps });
+}
+//# sourceMappingURL=avatar.js.map

package/dist/esm/react/native/ui/prebuilt/Account/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/avatar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/react/native/ui/prebuilt/Account/balance.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { Text } from "react-native";
+import { useActiveWalletChain } from "../../../../../react/core/hooks/wallets/useActiveWalletChain.js";
+import { getAddress } from "../../../../../utils/address.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+import { formatAccountFiatBalance, loadAccountBalance, } from "../../../../core/utils/account.js";
+import { formatAccountTokenBalance } from "../../../../core/utils/account.js";
+/**
+ * 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 }) {
+    const { address, client } = useAccountContext();
+    const walletChain = useActiveWalletChain();
+    const chainToLoad = chain || walletChain;
+    const balanceQuery = useQuery({
+        queryKey: [
+            "internal_account_balance",
+            chainToLoad?.id || -1,
+            address,
+            { tokenAddress },
+            showBalanceInFiat,
+        ],
+        queryFn: async () => 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 _jsx(Text, { ...restProps, children: formatFn(balanceQuery.data) });
+    }
+    if (showBalanceInFiat) {
+        return (_jsx(Text, { ...restProps, children: formatAccountFiatBalance({ ...balanceQuery.data, decimals: 2 }) }));
+    }
+    return (_jsx(Text, { ...restProps, children: formatAccountTokenBalance({
+            ...balanceQuery.data,
+            decimals: balanceQuery.data.balance < 1 ? 3 : 2,
+        }) }));
+}
+//# sourceMappingURL=balance.js.map

package/dist/esm/react/native/ui/prebuilt/Account/balance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"balance.js","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/balance.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAwB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAGpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iEAAiE,CAAC;AACvG,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAEL,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAmE9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,GAAG,SAAS,EACQ;IACpB,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAChD,MAAM,WAAW,GAAG,oBAAoB,EAAE,CAAC;IAC3C,MAAM,WAAW,GAAG,KAAK,IAAI,WAAW,CAAC;IACzC,MAAM,YAAY,GAAG,QAAQ,CAAC;QAC5B,QAAQ,EAAE;YACR,0BAA0B;YAC1B,WAAW,EAAE,EAAE,IAAI,CAAC,CAAC;YACrB,OAAO;YACP,EAAE,YAAY,EAAE;YAChB,iBAAiB;SACT;QACV,OAAO,EAAE,KAAK,IAAiC,EAAE,CAC/C,kBAAkB,CAAC;YACjB,KAAK,EAAE,WAAW;YAClB,MAAM;YACN,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;YAC5B,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS;YACjE,iBAAiB;SAClB,CAAC;QACJ,KAAK,EAAE,KAAK;QACZ,GAAG,YAAY;KAChB,CAAC,CAAC;IAEH,IAAI,YAAY,CAAC,SAAS,EAAE,CAAC;QAC3B,OAAO,gBAAgB,IAAI,IAAI,CAAC;IAClC,CAAC;IAED,IAAI,YAAY,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QACpC,OAAO,iBAAiB,IAAI,IAAI,CAAC;IACnC,CAAC;IAED,2CAA2C;IAC3C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,KAAC,IAAI,OAAK,SAAS,YAAG,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,GAAQ,CAAC;IACnE,CAAC;IAED,IAAI,iBAAiB,EAAE,CAAC;QACtB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,YAChB,wBAAwB,CAAC,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,GAC3D,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,YAChB,yBAAyB,CAAC;YACzB,GAAG,YAAY,CAAC,IAAI;YACpB,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAChD,CAAC,GACG,CACR,CAAC;AACJ,CAAC"}

package/dist/esm/react/native/ui/prebuilt/Account/blobbie.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { hexToNumber } from "@noble/curves/abstract/utils";
+import { useMemo } from "react";
+import { StyleSheet, View } 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";
+/**
+ * A wrapper for the Blobbie component
+ * @param props BlobbieProps
+ * @beta
+ * @wallet
+ */
+export function AccountBlobbie(props) {
+    const { address } = useAccountContext();
+    return _jsx(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) {
+    const colors = useMemo(() => COLOR_OPTIONS[Number(hexToNumber(props.address.slice(2, 4))) % COLOR_OPTIONS.length], [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 (_jsx(View, { style: [styles.container, containerStyle], children: _jsxs(Svg, { height: "100%", width: "100%", style: StyleSheet.absoluteFillObject, children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: gradientUniqueId, x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [_jsx(Stop, { offset: "0", stopColor: colors[0] }), _jsx(Stop, { offset: "1", stopColor: colors[1] })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientUniqueId})` })] }) }));
+}
+const styles = StyleSheet.create({
+    container: {
+        overflow: "hidden",
+    },
+});
+//# sourceMappingURL=blobbie.js.map

package/dist/esm/react/native/ui/prebuilt/Account/blobbie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blobbie.js","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/blobbie.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAWlE;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,KAAoC;IACjE,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AAClD,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CACH,aAAa,CACX,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,MAAM,CAClD,EACvB,CAAC,KAAK,CAAC,OAAO,CAAC,CAChB,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;QACpC,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;gBACL,GAAG,SAAS;gBACZ,KAAK,EAAE,KAAK,CAAC,IAAI;gBACjB,MAAM,EAAE,KAAK,CAAC,IAAI;aACnB,CAAC;QACJ,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAE9B,MAAM,gBAAgB,GAAG,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAC9D,gBAAgB,EAChB,EAAE,CACH,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,YAC7C,MAAC,GAAG,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,aAClE,KAAC,IAAI,cACH,MAAC,cAAc,IACb,EAAE,EAAE,gBAAgB,EACpB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,IAAI,aAEP,KAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,GAAI,EACzC,KAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,GAAI,IAC1B,GACZ,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,QAAQ,gBAAgB,GAAG,GAAI,IAClE,GACD,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC"}

package/dist/esm/react/native/ui/prebuilt/Account/name.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { Text } from "react-native";
+import { resolveName, } from "../../../../../extensions/ens/resolve-name.js";
+import { getSocialProfiles } from "../../../../../social/profiles.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+/**
+ * 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 }) {
+    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 _jsx(Text, { ...restProps, children: nameQuery.data });
+}
+//# sourceMappingURL=name.js.map

package/dist/esm/react/native/ui/prebuilt/Account/name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"name.js","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/name.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAwB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AACpD,OAAO,EAEL,WAAW,GACZ,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAmDzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,SAAS,EACK;IACjB,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAChD,MAAM,SAAS,GAAG,QAAQ,CAAC;QACzB,QAAQ,EAAE;YACR,cAAc;YACd,OAAO;YACP,EAAE,UAAU,EAAE;YACd,EAAE,eAAe,EAAE,aAAa,EAAE;SACnC;QACD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;gBAC9C,iBAAiB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;gBACtC,WAAW,CAAC;oBACV,MAAM;oBACN,OAAO;oBACP,eAAe;oBACf,aAAa;iBACd,CAAC;aACH,CAAC,CAAC;YAEH,MAAM,IAAI,GACR,UAAU,EAAE,MAAM,CAChB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAC7D,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,OAAO,CAAC;YAExB,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;YACpD,CAAC;YACD,OAAO,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC1C,CAAC;QACD,KAAK,EAAE,KAAK;QACZ,GAAG,YAAY;KAChB,CAAC,CAAC;IAEH,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;QACxB,OAAO,gBAAgB,IAAI,IAAI,CAAC;IAClC,CAAC;IAED,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACpB,OAAO,iBAAiB,IAAI,IAAI,CAAC;IACnC,CAAC;IAED,OAAO,KAAC,IAAI,OAAK,SAAS,YAAG,SAAS,CAAC,IAAI,GAAQ,CAAC;AACtD,CAAC"}

package/dist/esm/react/native/ui/prebuilt/Wallet/icon.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from "react-native";
+import { SvgXml } from "react-native-svg";
+import { useWalletIcon } from "../../../../core/utils/walletIcon.js";
+import { getAuthProviderImage } from "../../components/WalletImage.js";
+/**
+ * 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 }) {
+    const imageQuery = useWalletIcon({ queryOptions });
+    if (imageQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!imageQuery.data) {
+        return fallbackComponent || null;
+    }
+    return _jsx(Image, { source: { uri: imageQuery.data }, ...restProps });
+}
+/**
+ * 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 }) {
+    const src = getAuthProviderImage(provider);
+    return _jsx(SvgXml, { xml: src, ...restProps });
+}
+//# sourceMappingURL=icon.js.map

package/dist/esm/react/native/ui/prebuilt/Wallet/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Wallet/icon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,KAAK,EAAmB,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,MAAM,EAAiB,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAiCvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACI;IAChB,MAAM,UAAU,GAAG,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;IACnD,IAAI,UAAU,CAAC,SAAS,EAAE,CAAC;QACzB,OAAO,gBAAgB,IAAI,IAAI,CAAC;IAClC,CAAC;IACD,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACrB,OAAO,iBAAiB,IAAI,IAAI,CAAC;IACnC,CAAC;IACD,OAAO,KAAC,KAAK,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,UAAU,CAAC,IAAI,EAAE,KAAM,SAAS,GAAI,CAAC;AACpE,CAAC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAmB;IACpE,MAAM,GAAG,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IAC3C,OAAO,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,GAAI,CAAC;AAC7C,CAAC"}

package/dist/esm/react/native/ui/prebuilt/Wallet/name.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "react-native";
+import { useWalletName } from "../../../../core/utils/walletname.js";
+/**
+ * This component fetches then shows the name of a wallet.
+ * 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 { WalletProvider, WalletName } from "thirdweb/react";
+ *
+ * <WalletProvider id="io.metamask">
+ *   <WalletName  />
+ * </WalletProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>MetaMask</span>
+ * ```
+ *
+ * ### Show a loading sign when the name is being fetched
+ * ```tsx
+ * import { WalletProvider, WalletName } from "thirdweb/react";
+ *
+ * <WalletProvider {...props}>
+ *   <WalletName loadingComponent={<Spinner />} />
+ * </WalletProvider>
+ * ```
+ *
+ * ### Fallback to something when the name fails to resolve
+ * ```tsx
+ * <WalletProvider {...props}>
+ *   <WalletName fallbackComponent={<span>Failed to load</span>} />
+ * </WalletProvider>
+ * ```
+ *
+ * ### 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
+ * <WalletName
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 4,
+ *   }}
+ * />
+ * @component
+ * @beta
+ * @wallet
+ */
+export function WalletName({ loadingComponent, fallbackComponent, queryOptions, formatFn, ...restProps }) {
+    const nameQuery = useWalletName({ queryOptions, formatFn });
+    if (nameQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!nameQuery.data) {
+        return fallbackComponent || null;
+    }
+    return _jsx(Text, { ...restProps, children: nameQuery.data });
+}
+//# sourceMappingURL=name.js.map

package/dist/esm/react/native/ui/prebuilt/Wallet/name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"name.js","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Wallet/name.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AA4CrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACR,GAAG,SAAS,EACI;IAChB,MAAM,SAAS,GAAG,aAAa,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC5D,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;QACxB,OAAO,gBAAgB,IAAI,IAAI,CAAC;IAClC,CAAC;IACD,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACpB,OAAO,iBAAiB,IAAI,IAAI,CAAC;IACnC,CAAC;IACD,OAAO,KAAC,IAAI,OAAK,SAAS,YAAG,SAAS,CAAC,IAAI,GAAQ,CAAC;AACtD,CAAC"}

package/dist/esm/react/web/ui/ConnectWallet/Blobbie.js

@@ -2,23 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { hexToNumber } from "@noble/curves/abstract/utils";
 import { useId, useMemo } from "react";
-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"],
-];
+import { COLOR_OPTIONS } from "../../../core/utils/account.js";
 /**
  * A unique gradient avatar based on the provided address.
  * @param props The component props.

package/dist/esm/react/web/ui/ConnectWallet/Blobbie.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blobbie.js","sourceRoot":"","sources":["../../../../../../src/react/web/ui/ConnectWallet/Blobbie.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,aAAa,GAAG;IACpB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;IACtB,CAAC,SAAS,EAAE,SAAS,CAAC;CACvB,CAAC;AAaF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CACH,aAAa,CACX,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,MAAM,CAClD,EACvB,CAAC,KAAK,CAAC,OAAO,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE;YACL,GAAG,KAAK,CAAC,KAAK;YACd,eAAe,EAAE,2CAA2C,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG;YACtF,GAAG,CAAC,KAAK,CAAC,IAAI;gBACZ,CAAC,CAAC;oBACE,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI;oBACxB,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI;iBAC1B;gBACH,CAAC,CAAC,SAAS,CAAC;SACf,EACD,SAAS,EAAE,KAAK,CAAC,SAAS,GAC1B,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Blobbie.js","sourceRoot":"","sources":["../../../../../../src/react/web/ui/ConnectWallet/Blobbie.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAa/D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CACH,aAAa,CACX,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,MAAM,CAClD,EACvB,CAAC,KAAK,CAAC,OAAO,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE;YACL,GAAG,KAAK,CAAC,KAAK;YACd,eAAe,EAAE,2CAA2C,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG;YACtF,GAAG,CAAC,KAAK,CAAC,IAAI;gBACZ,CAAC,CAAC;oBACE,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI;oBACxB,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI;iBAC1B;gBACH,CAAC,CAAC,SAAS,CAAC;SACf,EACD,SAAS,EAAE,KAAK,CAAC,SAAS,GAC1B,CACH,CAAC;AACJ,CAAC"}

package/dist/esm/react/web/ui/ConnectWallet/ConnectButton.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import styled from "@emotion/styled";
 import { useEffect, useMemo, useState } from "react";
 import { getDefaultWallets } from "../../../../wallets/defaultWallets.js";
+import { AccountProvider } from "../../../core/account/provider.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
@@ -19,7 +20,6 @@ import { Spinner } from "../components/Spinner.js";
 import { Container } from "../components/basic.js";
 import { Button } from "../components/buttons.js";
 import { fadeInAnimation } from "../design-system/animations.js";
-import { AccountProvider } from "../prebuilt/Account/provider.js";
 import { ConnectedWalletDetails } from "./Details.js";
 import ConnectModal from "./Modal/ConnectModal.js";
 import { LockIcon } from "./icons/LockIcon.js";