thirdweb 5.69.0 → 5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332

package/dist/types/react/web/ui/prebuilt/NFT/description.d.ts

@@ -0,0 +1,59 @@
+import type { UseQueryOptions } from "@tanstack/react-query";
+import type { JSX } from "react";
+import type { NFT } from "../../../../../utils/nft/parseNft.js";
+export interface NFTDescriptionProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    loadingComponent?: JSX.Element;
+    fallbackComponent?: JSX.Element;
+    /**
+     * Optional `useQuery` params
+     */
+    queryOptions?: Omit<UseQueryOptions<NFT>, "queryFn" | "queryKey">;
+}
+/**
+ * This component fetches and displays an NFT's description. It inherits all the attributes of a <span>
+ * so you can style it just like how you would style a <span> element.
+ * @returns A <span> element containing the description of the NFT
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { NFTProvider, NFTDescription } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTDescription />
+ * </NFTProvider>
+ * ```
+ *
+ * ### Show a loading sign while the description is being fetched
+ * ```tsx
+ * import { NFTProvider, NFTDescription } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTDescription loadingComponent={<YourLoadingSign />} />
+ * </NFTProvider>
+ * ```
+ *
+ * ### Show something in case the description failed to resolve
+ * ```tsx
+ * import { NFTProvider, NFTDescription } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTDescription fallbackComponent={<span>Failed to load description</span>} />
+ * </NFTProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery (tanstack-query)
+ * ```tsx
+ * import { NFTProvider, NFTDescription } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTDescription queryOptions={{ retry: 3, enabled: false, }} />
+ * </NFTProvider>
+ * ```
+ *
+ * @component
+ * @nft
+ * @beta
+ */
+export declare function NFTDescription({ loadingComponent, fallbackComponent, queryOptions, ...restProps }: NFTDescriptionProps): import("react/jsx-runtime.js").JSX.Element | null;
+//# sourceMappingURL=description.d.ts.map

package/dist/types/react/web/ui/prebuilt/NFT/description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"description.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/description.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AAIhE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC/D,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACnE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,cAAc,CAAC,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,mBAAmB,qDAiBrB"}

package/dist/types/react/web/ui/prebuilt/NFT/hooks.d.ts

@@ -0,0 +1,14 @@
+import { type UseQueryOptions } from "@tanstack/react-query";
+import type { NFT } from "../../../../../utils/nft/parseNft.js";
+import type { NFTProviderProps } from "./provider.js";
+/**
+ * @internal Only used for the NFT prebuilt components
+ */
+export declare function useNftInfo(props: NFTProviderProps & {
+    queryOptions?: Omit<UseQueryOptions<NFT>, "queryFn" | "queryKey">;
+}): import("@tanstack/react-query").UseQueryResult<NFT, Error>;
+/**
+ * @internal
+ */
+export declare function getNFTInfo(options: NFTProviderProps): Promise<NFT>;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/types/react/web/ui/prebuilt/NFT/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,uBAAuB,CAAC;AAGvE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,gBAAgB,GAAG;IACxB,YAAY,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACnE,8DAaF;AAED;;GAEG;AACH,wBAAsB,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,GAAG,CAAC,CAsBxE"}

package/dist/types/react/web/ui/prebuilt/NFT/media.d.ts

@@ -0,0 +1,75 @@
+import type { UseQueryOptions } from "@tanstack/react-query";
+import type { JSX } from "react";
+import type { NFT } from "../../../../../utils/nft/parseNft.js";
+import type { MediaRendererProps } from "../../MediaRenderer/types.js";
+/**
+ * @component
+ * The props for the <NFTMedia /> component
+ * It is similar to the [`MediaRendererProps`](https://portal.thirdweb.com/references/typescript/v5/MediaRendererProps)
+ * (excluding `src`, `poster` and `client`) that you can
+ * use to style the NFTMedia
+ */
+export type NFTMediaProps = Omit<MediaRendererProps, "src" | "poster" | "client"> & {
+    loadingComponent?: JSX.Element;
+    fallbackComponent?: JSX.Element;
+    /**
+     * Optional `useQuery` params
+     */
+    queryOptions?: Omit<UseQueryOptions<NFT>, "queryFn" | "queryKey">;
+};
+/**
+ * This component fetches and displays an NFT's media. It uses thirdweb [`MediaRenderer`](https://portal.thirdweb.com/refernces/typescript/v5/MediaRenderer) under the hood
+ * so you can style it just like how you would style a MediaRenderer.
+ * @returns A MediaRenderer component
+ *
+ * @component
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { NFTProvider, NFTMedia } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTMedia />
+ * </NFTProvider>
+ * ```
+ *
+ * ### Show a loading sign while the media is being fetched
+ * ```tsx
+ * import { NFTProvider, NFTMedia } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTMedia loadingComponent={<YourLoadingSign />} />
+ * </NFTProvider>
+ * ```
+ *
+ * ### Show something in case the media failed to resolve
+ * ```tsx
+ * import { NFTProvider, NFTMedia } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTMedia fallbackComponent={<span>Failed to load media</span>} />
+ * </NFTProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery (tanstack-query)
+ * ```tsx
+ * import { NFTProvider, NFTMedia } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTMedia queryOptions={{ retry: 3, enabled: false, }} />
+ * </NFTProvider>
+ * ```
+ *
+ * ### Basic stylings
+ *
+ * You can style NFTMedia with the `style` and `className` props.
+ *
+ * ```tsx
+ * <NFTMedia style={{ borderRadius: "8px" }} className="mx-auto" />
+ * ```
+ * @nft
+ * @beta
+ */
+export declare function NFTMedia({ loadingComponent, fallbackComponent, queryOptions, ...mediaRendererProps }: NFTMediaProps): import("react/jsx-runtime.js").JSX.Element | null;
+//# sourceMappingURL=media.d.ts.map

package/dist/types/react/web/ui/prebuilt/NFT/media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/media.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AAEhE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAIvE;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,kBAAkB,EAClB,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAC5B,GAAG;IACF,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACnE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,wBAAgB,QAAQ,CAAC,EACvB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,kBAAkB,EACtB,EAAE,aAAa,qDAgCf"}

package/dist/types/react/web/ui/prebuilt/NFT/name.d.ts

@@ -0,0 +1,59 @@
+import type { UseQueryOptions } from "@tanstack/react-query";
+import type { JSX } from "react";
+import type { NFT } from "../../../../../utils/nft/parseNft.js";
+export interface NFTNameProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    loadingComponent?: JSX.Element;
+    fallbackComponent?: JSX.Element;
+    /**
+     * Optional `useQuery` params
+     */
+    queryOptions?: Omit<UseQueryOptions<NFT>, "queryFn" | "queryKey">;
+}
+/**
+ * This component fetches and displays an NFT's name. It takes in a `className` and `style` props
+ * so you can style it just like how you would style a <span> element.
+ * @returns A <span> element containing the name of the NFT
+ *
+ * @component
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { NFTProvider, NFTName } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTName />
+ * </NFTProvider>
+ * ```
+ *
+ * ### Show a loading sign while the name is being fetched
+ * ```tsx
+ * import { NFTProvider, NFTName } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTName loadingComponent={<YourLoadingSign />} />
+ * </NFTProvider>
+ * ```
+ *
+ * ### Show something in case the name failed to resolve
+ * ```tsx
+ * import { NFTProvider, NFTName } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTName fallbackComponent={<span>Failed to load name</span>} />
+ * </NFTProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery (tanstack-query)
+ * ```tsx
+ * import { NFTProvider, NFTName } from "thirdweb/react";
+ *
+ * <NFTProvider>
+ *   <NFTName queryOptions={{ retry: 3, enabled: false, }} />
+ * </NFTProvider>
+ * ```
+ *
+ * @nft
+ * @beta
+ */
+export declare function NFTName({ loadingComponent, fallbackComponent, queryOptions, ...restProps }: NFTNameProps): import("react/jsx-runtime.js").JSX.Element | null;
+//# sourceMappingURL=name.d.ts.map

package/dist/types/react/web/ui/prebuilt/NFT/name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"name.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/name.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AAIhE,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC/D,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACnE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,OAAO,CAAC,EACtB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,YAAY,qDAiBd"}

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

@@ -0,0 +1,55 @@
+import type { ThirdwebContract } from "../../../../../contract/contract.js";
+/**
+ * Props for the <NFT> component
+ * @component
+ */
+export type NFTProviderProps = {
+    /**
+     * The NFT contract address. Accepts both ERC721 and ERC1155 contracts
+     */
+    contract: ThirdwebContract;
+    /**
+     * The tokenId whose info you want to display
+     */
+    tokenId: bigint;
+};
+/**
+ * @internal
+ */
+export declare const NFTProviderContext: import("react").Context<NFTProviderProps | undefined>;
+/**
+ * @internal
+ */
+export declare function useNFTContext(): NFTProviderProps;
+/**
+ * A React context provider component that supplies NFT-related data to its child components.
+ *
+ * This component serves as a wrapper around the `NFTProviderContext.Provider` and passes
+ * the provided NFT data down to all of its child components through the context API.
+ *
+ *
+ * @param {React.PropsWithChildren<NFTProviderProps>} props - The props for the NFT provider
+ *
+ * @example
+ * ```tsx
+ * import { getContract } from "thirdweb";
+ * import { NFTProvider, NFTMedia, NFTDescription, NFTName } from "thirdweb/react";
+ *
+ * const contract = getContract({
+ *   address: "0x...",
+ *   chain: ethereum,
+ *   client: yourThirdwebClient,
+ * });
+ *
+ * <NFTProvider contract={contract} tokenId={0n}>
+ *    <NFTMedia />
+ *    <NFTDescription />
+ *    <NFTName />
+ * </NFTProvider>
+ * ```
+ * @component
+ * @nft
+ * @beta
+ */
+export declare function NFTProvider(props: React.PropsWithChildren<NFTProviderProps>): import("react/jsx-runtime.js").JSX.Element;
+//# sourceMappingURL=provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAE5E;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,uDAEnB,CAAC;AAEb;;GAEG;AACH,wBAAgB,aAAa,qBAQ5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,8CAM3E"}

package/dist/types/react/web/ui/prebuilt/Token/icon.d.ts

@@ -0,0 +1,95 @@
+import { type UseQueryOptions } from "@tanstack/react-query";
+import type { JSX } from "react";
+export interface TokenIconProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
+    /**
+     * This prop can be a string or a (async) function that resolves to a string, representing the icon url of the token
+     * This is particularly useful if you already have a way to fetch the token icon.
+     */
+    iconResolver?: string | (() => string) | (() => Promise<string>);
+    /**
+     * This component will be shown while the avatar of the icon is being fetched
+     * If not passed, the component will return `null`.
+     *
+     * You can pass a loading sign or spinner to this prop.
+     * @example
+     * ```tsx
+     * <TokenIcon loadingComponent={<Spinner />} />
+     * ```
+     */
+    loadingComponent?: JSX.Element;
+    /**
+     * 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
+     * <TokenIcon fallbackComponent={<DummyImage />} />
+     * ```
+     */
+    fallbackComponent?: JSX.Element;
+    /**
+     * Optional query options for `useQuery`
+     */
+    queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}
+/**
+ * This component tries to resolve the icon of a given token, then return an image.
+ * @returns an <img /> with the src of the token icon
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { TokenProvider, TokenIcon } from "thirdweb/react";
+ *
+ * <TokenProvider address="0x-token-address" chain={chain} client={client}>
+ *   <TokenIcon />
+ * </TokenProvider>
+ * ```
+ *
+ * Result: An <img /> component with the src of the icon
+ * ```html
+ * <img src="token-icon.png" />
+ * ```
+ *
+ * ### Override the icon with the `iconResolver` prop
+ * If you already have the icon url, you can skip the network requests and pass it directly to the TokenIcon
+ * ```tsx
+ * <TokenIcon iconResolver="/usdc.png" />
+ * ```
+ *
+ * You can also pass in your own custom (async) function that retrieves the icon url
+ * ```tsx
+ * const getIcon = async () => {
+ *   const icon = getIconFromCoinMarketCap(tokenAddress, etc);
+ *   return icon;
+ * };
+ *
+ * <TokenIcon iconResolver={getIcon} />
+ * ```
+ *
+ * ### Show a loading sign while the icon is being loaded
+ * ```tsx
+ * <TokenIcon loadingComponent={<Spinner />} />
+ * ```
+ *
+ * ### Fallback to a dummy image if the token icon fails to resolve
+ * ```tsx
+ * <TokenIcon fallbackComponent={<img src="blank-image.png" />} />
+ * ```
+ *
+ * ### Usage with queryOptions
+ * TokenIcon 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
+ * <TokenIcon queryOptions={{ enabled: someLogic, retry: 3, }} />
+ * ```
+ *
+ * @component
+ * @token
+ * @beta
+ */
+export declare function TokenIcon({ iconResolver, loadingComponent, fallbackComponent, queryOptions, ...restProps }: TokenIconProps): import("react/jsx-runtime.js").JSX.Element | null;
+//# sourceMappingURL=icon.d.ts.map

package/dist/types/react/web/ui/prebuilt/Token/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Token/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAQjC,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC;IAC9D;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IACjE;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACtE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,cAAc,qDAsDhB"}

package/dist/types/react/web/ui/prebuilt/Token/name.d.ts

@@ -0,0 +1,140 @@
+import { type UseQueryOptions } from "@tanstack/react-query";
+import type React from "react";
+import type { JSX } from "react";
+/**
+ * Props for the TokenName component
+ * @component
+ * @token
+ */
+export interface TokenNameProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /**
+     * This prop can be a string or a (async) function that resolves to a string, representing the name of the token
+     * This is particularly useful if you already have a way to fetch the token name.
+     */
+    nameResolver?: string | (() => string) | (() => Promise<string>);
+    /**
+     * A function to format the name's display value
+     * Particularly useful to avoid overflowing-UI issues
+     *
+     * ```tsx
+     * <TokenName formatFn={(str: string) => doSomething()} />
+     * ```
+     */
+    formatFn?: (str: string) => string;
+    /**
+     * This component will be shown while the name of the token 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
+     * <TokenName loadingComponent={<Spinner />} />
+     * ```
+     */
+    loadingComponent?: JSX.Element;
+    /**
+     * 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
+     * <TokenName fallbackComponent={"Failed to load"}
+     * />
+     * ```
+     */
+    fallbackComponent?: JSX.Element;
+    /**
+     * Optional `useQuery` params
+     */
+    queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}
+/**
+ * This component fetches then shows the name of a token. For ERC20 tokens, it calls the `name` function in the ERC20 contract.
+ * 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 { TokenProvider, TokenName } from "thirdweb/react";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * <TokenProvider {...props}>
+ *   <TokenName  />
+ * </TokenProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>Ether</span>
+ * ```
+ *
+ * ### Custom name resolver
+ * By default TokenName will call the `name` method of the token contract.
+ * However if you have a different way to fetch the name, you can pass the function to the `nameResolver` prop.
+ * Note: nameResolver should either be a string or a function (async) that returns a string.
+ * ```tsx
+ * async function fetchNameMethod() {
+ *   // your own fetching logic
+ *   return "the token name";
+ * }
+ *
+ * <TokenName nameResolver={fetchNameMethod} />
+ * ```
+ *
+ * Alternatively you can also pass in a string directly:
+ * ```tsx
+ * <TokenName nameResolver="USD Coin Circle" />
+ * ```
+ *
+ *
+ * ### Format the name (capitalize, truncate, etc.)
+ * The TokenName component accepts a `formatFn` which takes in a string and outputs a string
+ * The function is used to modify the name of the token
+ *
+ * ```tsx
+ * const concatStr = (str: string):string => str + "Token"
+ *
+ * <TokenName formatFn={concatStr} />
+ * ```
+ *
+ * Result:
+ * ```html
+ * <span>Ether Token</span>
+ * ```
+ *
+ * ### Show a loading sign when the name is being fetched
+ * ```tsx
+ * import { TokenProvider, TokenName } from "thirdweb/react";
+ *
+ * <TokenProvider address="0x...">
+ *   <TokenName loadingComponent={<Spinner />} />
+ * </TokenProvider>
+ * ```
+ *
+ * ### Fallback to something when the name fails to resolve
+ * ```tsx
+ * <TokenProvider address="0x...">
+ *   <TokenName fallbackComponent={"Failed to load"} />
+ * </TokenProvider>
+ * ```
+ *
+ * ### 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
+ * <TokenName
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 4,
+ *   }}
+ * />
+ * ```
+ *
+ * @component
+ * @token
+ * @beta
+ */
+export declare function TokenName({ nameResolver, formatFn, loadingComponent, fallbackComponent, queryOptions, ...restProps }: TokenNameProps): import("react/jsx-runtime.js").JSX.Element | null;
+//# sourceMappingURL=name.d.ts.map

package/dist/types/react/web/ui/prebuilt/Token/name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"name.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Token/name.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAQjC;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC/D;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IACjE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACtE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,QAAQ,EACR,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,cAAc,qDA4ChB"}

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

@@ -0,0 +1,61 @@
+import type { Address } from "abitype";
+import type React from "react";
+import type { Chain } from "../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+/**
+ * Props for the <TokenProvider /> component
+ * @component
+ * @token
+ */
+export type TokenProviderProps = {
+    /**
+     * The token (ERC20) contract address
+     */
+    address: Address;
+    /**
+     * thirdweb Client
+     */
+    client: ThirdwebClient;
+    /**
+     * The chain (network) that the token is on
+     */
+    chain: Chain;
+};
+/**
+ * A React context provider component that supplies Token-related data to its child components.
+ *
+ * This component serves as a wrapper around the `TokenProviderContext.Provider` and passes
+ * the provided token data down to all of its child components through the context API.
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { TokenProvider, TokenIcon, TokenName  } from "thirdweb/react";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * <TokenProvider address="0x..." client={...} chain={ethereum}>
+ *   <TokenIcon />
+ *   <TokenName />
+ * </TokenProvider>
+ * ```
+ *
+ * ### This component also works with native token!
+ * ```tsx
+ * import { NATIVE_TOKEN_ADDRESS} from "thirdweb";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * <TokenProvider address={NATIVE_TOKEN_ADDRESS} chain={ethereum} client={client}>
+ *   <TokenSymbol /> // "ETH"
+ * </TokenProvider>
+ * ```
+ *
+ * @component
+ * @token
+ * @beta
+ */
+export declare function TokenProvider(props: React.PropsWithChildren<TokenProviderProps>): import("react/jsx-runtime.js").JSX.Element;
+/**
+ * @internal
+ */
+export declare function useTokenContext(): TokenProviderProps;
+//# sourceMappingURL=provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Token/provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,8CAOnD;AAED;;GAEG;AACH,wBAAgB,eAAe,uBAQ9B"}