thirdweb 5.86.6 → 5.87.0

package/dist/types/react/native/ui/prebuilt/Account/avatar.d.ts

@@ -0,0 +1,141 @@
+import { type UseQueryOptions } from "@tanstack/react-query";
+import { type ImageProps } from "react-native";
+import { type ResolveNameOptions } from "../../../../../extensions/ens/resolve-name.js";
+import type { SocialProfile } from "../../../../../social/types.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 declare function AccountAvatar({ socialType, resolverAddress, resolverChain, loadingComponent, fallbackComponent, queryOptions, ...restProps }: AccountAvatarProps): import("react/jsx-runtime.js").JSX.Element | import("react").ComponentType<{}> | null;
+//# sourceMappingURL=avatar.d.ts.map

package/dist/types/react/native/ui/prebuilt/Account/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,EACL,KAAK,kBAAkB,EAExB,MAAM,+CAA+C,CAAC;AAEvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAGpE;;;;GAIG;AACH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,EAChC,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChD;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAEnC;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACtE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,kBAAkB,yFA+DpB"}

package/dist/types/react/native/ui/prebuilt/Account/balance.d.ts

@@ -0,0 +1,144 @@
+import { type UseQueryOptions } from "@tanstack/react-query";
+import { type TextProps } from "react-native";
+import type { Chain } from "../../../../../chains/types.js";
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
+import { type AccountBalanceInfo } 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 declare function AccountBalance({ chain, tokenAddress, loadingComponent, fallbackComponent, queryOptions, formatFn, showBalanceInFiat, ...restProps }: AccountBalanceProps): import("react/jsx-runtime.js").JSX.Element | import("react").ComponentType<{}> | null;
+//# sourceMappingURL=balance.d.ts.map

package/dist/types/react/native/ui/prebuilt/Account/balance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"balance.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/balance.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAIhF,OAAO,EACL,KAAK,kBAAkB,EAGxB,MAAM,mCAAmC,CAAC;AAG3C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,MAAM,CAAC;IACjD;;;;;;;;;;;;OAYG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC;;;;;;;;;;;;;OAaG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACxC;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CACjB,eAAe,CAAC,kBAAkB,CAAC,EACnC,SAAS,GAAG,UAAU,CACvB,CAAC;IAEF;;OAEG;IACH,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;CAC3C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,mBAAmB,yFAqDrB"}

package/dist/types/react/native/ui/prebuilt/Account/blobbie.d.ts

@@ -0,0 +1,34 @@
+import { type ViewStyle } from "react-native";
+/**
+ * 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 declare function AccountBlobbie(props: Omit<BlobbieProps, "address">): import("react/jsx-runtime.js").JSX.Element;
+/**
+ * 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 declare function Blobbie(props: BlobbieProps): import("react/jsx-runtime.js").JSX.Element;
+//# sourceMappingURL=blobbie.d.ts.map

package/dist/types/react/native/ui/prebuilt/Account/blobbie.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blobbie.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/blobbie.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,8CAGlE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,8CA6C1C"}

package/dist/types/react/native/ui/prebuilt/Account/name.d.ts

@@ -0,0 +1,118 @@
+import { type UseQueryOptions } from "@tanstack/react-query";
+import { type TextProps } from "react-native";
+import { type ResolveNameOptions } from "../../../../../extensions/ens/resolve-name.js";
+import type { SocialProfile } from "../../../../../social/types.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 declare function AccountName({ resolverAddress, resolverChain, socialType, formatFn, queryOptions, loadingComponent, fallbackComponent, ...restProps }: AccountNameProps): import("react/jsx-runtime.js").JSX.Element | import("react").ComponentType<{}> | null;
+//# sourceMappingURL=name.d.ts.map

package/dist/types/react/native/ui/prebuilt/Account/name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"name.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/name.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EACL,KAAK,kBAAkB,EAExB,MAAM,+CAA+C,CAAC;AAEvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAGpE;;;;GAIG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,EACjC,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACnC;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC;;;;;;;;;;OAUG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACxC;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACtE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,gBAAgB,yFA2ClB"}

package/dist/types/react/native/ui/prebuilt/Wallet/icon.d.ts

@@ -0,0 +1,100 @@
+import type { UseQueryOptions } from "@tanstack/react-query";
+import { type ImageProps } from "react-native";
+import { type XmlProps } from "react-native-svg";
+import type { AuthOption } from "../../../../../wallets/types.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 declare function WalletIcon({ loadingComponent, fallbackComponent, queryOptions, ...restProps }: WalletIconProps): import("react/jsx-runtime.js").JSX.Element | import("react").ComponentType<{}> | null;
+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 declare function SocialIcon({ provider, ...restProps }: SocialIconProps): import("react/jsx-runtime.js").JSX.Element;
+//# sourceMappingURL=icon.d.ts.map

package/dist/types/react/native/ui/prebuilt/Wallet/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Wallet/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAU,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAIlE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC;IAC9D;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACxC;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACtE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,UAAU,CAAC,EACzB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,eAAe,yFASjB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC;IAC5D,QAAQ,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,8CAGrE"}

package/dist/types/react/native/ui/prebuilt/Wallet/name.d.ts

@@ -0,0 +1,94 @@
+import type { UseQueryOptions } from "@tanstack/react-query";
+import { type TextProps } from "react-native";
+/**
+ * Props for the WalletName component
+ * @component
+ * @wallet
+ */
+export interface WalletNameProps extends Omit<TextProps, "children"> {
+    /**
+     * This component will be shown while the name of the wallet name 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
+     * <WalletName loadingComponent={<Spinner />} />
+     * ```
+     */
+    loadingComponent?: React.ComponentType;
+    /**
+     * This component will be shown if the name 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
+     * name was not fetched succesfully
+     * @example
+     * ```tsx
+     * <WalletName fallbackComponent={<span>Failed to load</span>}
+     * />
+     * ```
+     */
+    fallbackComponent?: React.ComponentType;
+    /**
+     * Optional `useQuery` params
+     */
+    queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+    /**
+     * A function to format the name's display value
+     * ```tsx
+     * <WalletName formatFn={(str: string) => doSomething()} />
+     * ```
+     */
+    formatFn?: (str: string) => string;
+}
+/**
+ * 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 declare function WalletName({ loadingComponent, fallbackComponent, queryOptions, formatFn, ...restProps }: WalletNameProps): import("react/jsx-runtime.js").JSX.Element | import("react").ComponentType<{}> | null;
+//# sourceMappingURL=name.d.ts.map

package/dist/types/react/native/ui/prebuilt/Wallet/name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"name.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Wallet/name.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAClE;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACxC;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;IACrE;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,UAAU,CAAC,EACzB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,eAAe,yFASjB"}

package/dist/types/react/web/ui/ConnectWallet/Blobbie.d.ts

@@ -24,5 +24,5 @@ export type BlobbieProps = {
  * <Blobbie address="0x...." className="w-10 h-10" />
  * ```
  */
-export declare function Blobbie(props: BlobbieProps): import("react/jsx-runtime").JSX.Element;
+export declare function Blobbie(props: BlobbieProps): import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=Blobbie.d.ts.map

package/dist/types/react/web/ui/ConnectWallet/Blobbie.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Blobbie.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/ConnectWallet/Blobbie.tsx"],"names":[],"mappings":"AAsBA;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CA0B1C"}
+{"version":3,"file":"Blobbie.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/ConnectWallet/Blobbie.tsx"],"names":[],"mappings":"AAKA;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,8CA0B1C"}

package/dist/types/react/web/ui/ConnectWallet/ConnectButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectButton.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/ConnectWallet/ConnectButton.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAC;AA4B/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2PG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,8CA2GtD"}
+{"version":3,"file":"ConnectButton.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/ConnectWallet/ConnectButton.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAC;AA2B/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2PG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,8CA2GtD"}