thirdweb 5.69.0 → 5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332

package/dist/esm/react/web/ui/prebuilt/NFT/description.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNftInfo } from "./hooks.js";
+import { useNFTContext } from "./provider.js";
+/**
+ * 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 function NFTDescription({ loadingComponent, fallbackComponent, queryOptions, ...restProps }) {
+    const { contract, tokenId } = useNFTContext();
+    const nftQuery = useNftInfo({
+        contract,
+        tokenId,
+        queryOptions,
+    });
+    if (nftQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!nftQuery.data?.metadata?.description) {
+        return fallbackComponent || null;
+    }
+    return _jsx("span", { ...restProps, children: nftQuery.data.metadata.description });
+}
+//# sourceMappingURL=description.js.map

package/dist/esm/react/web/ui/prebuilt/NFT/description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/description.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAKb,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAY9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACQ;IACpB,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,UAAU,CAAC;QAC1B,QAAQ;QACR,OAAO;QACP,YAAY;KACb,CAAC,CAAC;IAEH,IAAI,QAAQ,CAAC,SAAS,EAAE,CAAC;QACvB,OAAO,gBAAgB,IAAI,IAAI,CAAC;IAClC,CAAC;IAED,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;QAC1C,OAAO,iBAAiB,IAAI,IAAI,CAAC;IACnC,CAAC;IAED,OAAO,kBAAU,SAAS,YAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAQ,CAAC;AAC1E,CAAC"}

package/dist/esm/react/web/ui/prebuilt/NFT/hooks.js

@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+import { getNFT as getNFT721 } from "../../../../../extensions/erc721/read/getNFT.js";
+import { getNFT as getNFT1155 } from "../../../../../extensions/erc1155/read/getNFT.js";
+/**
+ * @internal Only used for the NFT prebuilt components
+ */
+export function useNftInfo(props) {
+    return useQuery({
+        queryKey: [
+            "__nft_component_internal__",
+            props.contract.chain.id,
+            props.contract.address,
+            props.tokenId.toString(),
+        ],
+        queryFn: () => getNFTInfo({ contract: props.contract, tokenId: props.tokenId }),
+        ...props.queryOptions,
+    });
+}
+/**
+ * @internal
+ */
+export async function getNFTInfo(options) {
+    const nft = await Promise.allSettled([
+        getNFT721(options),
+        getNFT1155(options),
+    ]).then(([possibleNFT721, possibleNFT1155]) => {
+        // getNFT extension always return an NFT object
+        // so we need to check if the tokenURI exists
+        if (possibleNFT721.status === "fulfilled" &&
+            possibleNFT721.value.tokenURI) {
+            return possibleNFT721.value;
+        }
+        if (possibleNFT1155.status === "fulfilled" &&
+            possibleNFT1155.value.tokenURI) {
+            return possibleNFT1155.value;
+        }
+        throw new Error("Failed to load NFT metadata");
+    });
+    return nft;
+}
+//# sourceMappingURL=hooks.js.map

package/dist/esm/react/web/ui/prebuilt/NFT/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAIxF;;GAEG;AACH,MAAM,UAAU,UAAU,CACxB,KAEC;IAED,OAAO,QAAQ,CAAC;QACd,QAAQ,EAAE;YACR,4BAA4B;YAC5B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YACvB,KAAK,CAAC,QAAQ,CAAC,OAAO;YACtB,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE;SACzB;QACD,OAAO,EAAE,GAAG,EAAE,CACZ,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;QAClE,GAAG,KAAK,CAAC,YAAY;KACtB,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,UAAU,CAAC,OAAyB;IACxD,MAAM,GAAG,GAAG,MAAM,OAAO,CAAC,UAAU,CAAC;QACnC,SAAS,CAAC,OAAO,CAAC;QAClB,UAAU,CAAC,OAAO,CAAC;KACpB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,EAAE,eAAe,CAAC,EAAE,EAAE;QAC5C,+CAA+C;QAC/C,6CAA6C;QAC7C,IACE,cAAc,CAAC,MAAM,KAAK,WAAW;YACrC,cAAc,CAAC,KAAK,CAAC,QAAQ,EAC7B,CAAC;YACD,OAAO,cAAc,CAAC,KAAK,CAAC;QAC9B,CAAC;QACD,IACE,eAAe,CAAC,MAAM,KAAK,WAAW;YACtC,eAAe,CAAC,KAAK,CAAC,QAAQ,EAC9B,CAAC;YACD,OAAO,eAAe,CAAC,KAAK,CAAC;QAC/B,CAAC;QACD,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IACH,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/esm/react/web/ui/prebuilt/NFT/media.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MediaRenderer } from "../../MediaRenderer/MediaRenderer.js";
+import { useNftInfo } from "./hooks.js";
+import { useNFTContext } from "./provider.js";
+/**
+ * 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 function NFTMedia({ loadingComponent, fallbackComponent, queryOptions, ...mediaRendererProps }) {
+    const { contract, tokenId } = useNFTContext();
+    const nftQuery = useNftInfo({
+        contract,
+        tokenId,
+        queryOptions,
+    });
+    if (nftQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!nftQuery.data) {
+        return fallbackComponent || null;
+    }
+    const animation_url = nftQuery.data.metadata.animation_url;
+    const image = nftQuery.data.metadata.image || nftQuery.data.metadata.image_url;
+    if (!animation_url && !image) {
+        return fallbackComponent || null;
+    }
+    return (_jsx(MediaRenderer, { client: contract.client, src: animation_url || image, poster: image, ...mediaRendererProps }));
+}
+//# sourceMappingURL=media.js.map

package/dist/esm/react/web/ui/prebuilt/NFT/media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/media.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAErE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAqB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,kBAAkB,EACP;IACd,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,UAAU,CAAC;QAC1B,QAAQ;QACR,OAAO;QACP,YAAY;KACb,CAAC,CAAC;IAEH,IAAI,QAAQ,CAAC,SAAS,EAAE,CAAC;QACvB,OAAO,gBAAgB,IAAI,IAAI,CAAC;IAClC,CAAC;IAED,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACnB,OAAO,iBAAiB,IAAI,IAAI,CAAC;IACnC,CAAC;IAED,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC3D,MAAM,KAAK,GACT,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;IAEnE,IAAI,CAAC,aAAa,IAAI,CAAC,KAAK,EAAE,CAAC;QAC7B,OAAO,iBAAiB,IAAI,IAAI,CAAC;IACnC,CAAC;IAED,OAAO,CACL,KAAC,aAAa,IACZ,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,GAAG,EAAE,aAAa,IAAI,KAAK,EAC3B,MAAM,EAAE,KAAK,KACT,kBAAkB,GACtB,CACH,CAAC;AACJ,CAAC"}

package/dist/esm/react/web/ui/prebuilt/NFT/name.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNftInfo } from "./hooks.js";
+import { useNFTContext } from "./provider.js";
+/**
+ * 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 function NFTName({ loadingComponent, fallbackComponent, queryOptions, ...restProps }) {
+    const { contract, tokenId } = useNFTContext();
+    const nftQuery = useNftInfo({
+        contract,
+        tokenId,
+        queryOptions,
+    });
+    if (nftQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!nftQuery.data?.metadata?.name) {
+        return fallbackComponent || null;
+    }
+    return _jsx("span", { ...restProps, children: nftQuery.data.metadata.name });
+}
+//# sourceMappingURL=name.js.map

package/dist/esm/react/web/ui/prebuilt/NFT/name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"name.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/name.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAY9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACC;IACb,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE,CAAC;IAE9C,MAAM,QAAQ,GAAG,UAAU,CAAC;QAC1B,QAAQ;QACR,OAAO;QACP,YAAY;KACb,CAAC,CAAC;IAEH,IAAI,QAAQ,CAAC,SAAS,EAAE,CAAC;QACvB,OAAO,gBAAgB,IAAI,IAAI,CAAC;IAClC,CAAC;IAED,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QACnC,OAAO,iBAAiB,IAAI,IAAI,CAAC;IACnC,CAAC;IACD,OAAO,kBAAU,SAAS,YAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAQ,CAAC;AACnE,CAAC"}

package/dist/esm/react/web/ui/prebuilt/NFT/provider.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+/**
+ * @internal
+ */
+export const NFTProviderContext = /* @__PURE__ */ createContext(undefined);
+/**
+ * @internal
+ */
+export function useNFTContext() {
+    const ctx = useContext(NFTProviderContext);
+    if (!ctx) {
+        throw new Error("NFTProviderContext not found. Make sure you are using NFTMedia, NFTDescription, etc. inside a <NFTProvider /> component");
+    }
+    return ctx;
+}
+/**
+ * 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 function NFTProvider(props) {
+    return (_jsx(NFTProviderContext.Provider, { value: props, children: props.children }));
+}
+//# sourceMappingURL=provider.js.map

package/dist/esm/react/web/ui/prebuilt/NFT/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAkBlD;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,eAAe,CAAC,aAAa,CAE7D,SAAS,CAAC,CAAC;AAEb;;GAEG;AACH,MAAM,UAAU,aAAa;IAC3B,MAAM,GAAG,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC3C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,yHAAyH,CAC1H,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,WAAW,CAAC,KAAgD;IAC1E,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACtC,KAAK,CAAC,QAAQ,GACa,CAC/B,CAAC;AACJ,CAAC"}

package/dist/esm/react/web/ui/prebuilt/Token/icon.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { getChainMetadata } from "../../../../../chains/utils.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { getContract } from "../../../../../contract/contract.js";
+import { getContractMetadata } from "../../../../../extensions/common/read/getContractMetadata.js";
+import { resolveScheme } from "../../../../../utils/ipfs.js";
+import { useTokenContext } from "./provider.js";
+/**
+ * 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 function TokenIcon({ iconResolver, loadingComponent, fallbackComponent, queryOptions, ...restProps }) {
+    const { address, client, chain } = useTokenContext();
+    const iconQuery = useQuery({
+        queryKey: ["_internal_token_icon_", chain.id, address],
+        queryFn: async () => {
+            if (typeof iconResolver === "string") {
+                return iconResolver;
+            }
+            if (typeof iconResolver === "function") {
+                return iconResolver();
+            }
+            if (address.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()) {
+                const possibleUrl = await getChainMetadata(chain).then((data) => data.icon?.url);
+                if (!possibleUrl) {
+                    throw new Error("Failed to resolve icon for native token");
+                }
+                return resolveScheme({ uri: possibleUrl, client });
+            }
+            // Try to get the icon from the contractURI
+            const contractMetadata = await getContractMetadata({
+                contract: getContract({
+                    address,
+                    chain,
+                    client,
+                }),
+            });
+            if (!contractMetadata.image ||
+                typeof contractMetadata.image !== "string") {
+                throw new Error("Failed to resolve token icon from contract metadata");
+            }
+            return resolveScheme({
+                uri: contractMetadata.image,
+                client,
+            });
+        },
+        ...queryOptions,
+    });
+    if (iconQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!iconQuery.data) {
+        return fallbackComponent || null;
+    }
+    return _jsx("img", { src: iconQuery.data, alt: restProps.alt });
+}
+//# sourceMappingURL=icon.js.map

package/dist/esm/react/web/ui/prebuilt/Token/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Token/icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAwB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AACnG,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAwChD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACG;IACf,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IACrD,MAAM,SAAS,GAAG,QAAQ,CAAC;QACzB,QAAQ,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE,EAAE,OAAO,CAAU;QAC/D,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE,CAAC;gBACrC,OAAO,YAAY,CAAC;YACtB,CAAC;YACD,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE,CAAC;gBACvC,OAAO,YAAY,EAAE,CAAC;YACxB,CAAC;YACD,IAAI,OAAO,CAAC,WAAW,EAAE,KAAK,oBAAoB,CAAC,WAAW,EAAE,EAAE,CAAC;gBACjE,MAAM,WAAW,GAAG,MAAM,gBAAgB,CAAC,KAAK,CAAC,CAAC,IAAI,CACpD,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CACzB,CAAC;gBACF,IAAI,CAAC,WAAW,EAAE,CAAC;oBACjB,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;gBAC7D,CAAC;gBACD,OAAO,aAAa,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;YACrD,CAAC;YAED,2CAA2C;YAC3C,MAAM,gBAAgB,GAAG,MAAM,mBAAmB,CAAC;gBACjD,QAAQ,EAAE,WAAW,CAAC;oBACpB,OAAO;oBACP,KAAK;oBACL,MAAM;iBACP,CAAC;aACH,CAAC,CAAC;YAEH,IACE,CAAC,gBAAgB,CAAC,KAAK;gBACvB,OAAO,gBAAgB,CAAC,KAAK,KAAK,QAAQ,EAC1C,CAAC;gBACD,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;YACzE,CAAC;YAED,OAAO,aAAa,CAAC;gBACnB,GAAG,EAAE,gBAAgB,CAAC,KAAK;gBAC3B,MAAM;aACP,CAAC,CAAC;QACL,CAAC;QACD,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,cAAK,GAAG,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,CAAC,GAAG,GAAI,CAAC;AAC1D,CAAC"}

package/dist/esm/react/web/ui/prebuilt/Token/name.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { getChainMetadata } from "../../../../../chains/utils.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { getContract } from "../../../../../contract/contract.js";
+import { getContractMetadata } from "../../../../../extensions/common/read/getContractMetadata.js";
+import { name } from "../../../../../extensions/common/read/name.js";
+import { useTokenContext } from "./provider.js";
+/**
+ * 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 function TokenName({ nameResolver, formatFn, loadingComponent, fallbackComponent, queryOptions, ...restProps }) {
+    const { address, client, chain } = useTokenContext();
+    const nameQuery = useQuery({
+        queryKey: ["_internal_token_name_", chain.id, address],
+        queryFn: async () => {
+            if (typeof nameResolver === "string") {
+                return nameResolver;
+            }
+            if (typeof nameResolver === "function") {
+                return nameResolver();
+            }
+            if (address.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()) {
+                // Don't wanna use `getChainNativeCurrencyName` because it has some side effect (it catches error and defaults to "ETH")
+                return getChainMetadata(chain).then((data) => data.nativeCurrency.name);
+            }
+            // Try to fetch the name from both the `name()` function and the contract metadata
+            // then prioritize the `name()`
+            const contract = getContract({ address, client, chain });
+            const [_name, contractMetadata] = await Promise.all([
+                name({ contract }),
+                getContractMetadata({ contract }),
+            ]);
+            if (!_name && !contractMetadata.name) {
+                throw new Error("Failed to resolve name from both name() and contract metadata");
+            }
+            return _name || contractMetadata.name;
+        },
+        ...queryOptions,
+    });
+    if (nameQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!nameQuery.data) {
+        return fallbackComponent || null;
+    }
+    const displayValue = formatFn ? formatFn(nameQuery.data) : nameQuery.data;
+    return _jsx("span", { ...restProps, children: displayValue });
+}
+//# sourceMappingURL=name.js.map

package/dist/esm/react/web/ui/prebuilt/Token/name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"name.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Token/name.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAwB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AACnG,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAqDhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,YAAY,EACZ,QAAQ,EACR,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACG;IACf,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IACrD,MAAM,SAAS,GAAG,QAAQ,CAAC;QACzB,QAAQ,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE,EAAE,OAAO,CAAU;QAC/D,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE,CAAC;gBACrC,OAAO,YAAY,CAAC;YACtB,CAAC;YACD,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE,CAAC;gBACvC,OAAO,YAAY,EAAE,CAAC;YACxB,CAAC;YACD,IAAI,OAAO,CAAC,WAAW,EAAE,KAAK,oBAAoB,CAAC,WAAW,EAAE,EAAE,CAAC;gBACjE,wHAAwH;gBACxH,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC1E,CAAC;YACD,kFAAkF;YAClF,+BAA+B;YAC/B,MAAM,QAAQ,GAAG,WAAW,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;YACzD,MAAM,CAAC,KAAK,EAAE,gBAAgB,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;gBAClD,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;gBAClB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,CAAC;aAClC,CAAC,CAAC;YACH,IAAI,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;gBACrC,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;YACJ,CAAC;YAED,OAAO,KAAK,IAAI,gBAAgB,CAAC,IAAI,CAAC;QACxC,CAAC;QACD,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,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;IAE1E,OAAO,kBAAU,SAAS,YAAG,YAAY,GAAQ,CAAC;AACpD,CAAC"}

package/dist/esm/react/web/ui/prebuilt/Token/provider.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const TokenProviderContext = /* @__PURE__ */ createContext(undefined);
+/**
+ * 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 function TokenProvider(props) {
+    return (_jsx(TokenProviderContext.Provider, { value: props, children: props.children }));
+}
+/**
+ * @internal
+ */
+export function useTokenContext() {
+    const ctx = useContext(TokenProviderContext);
+    if (!ctx) {
+        throw new Error("TokenProviderContext not found. Make sure you are using TokenName, TokenIcon, TokenSymbol etc. inside a <TokenProvider /> component");
+    }
+    return ctx;
+}
+//# sourceMappingURL=provider.js.map

package/dist/esm/react/web/ui/prebuilt/Token/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Token/provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAwBlD,MAAM,oBAAoB,GAAG,eAAe,CAAC,aAAa,CAExD,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,aAAa,CAC3B,KAAkD;IAElD,OAAO,CACL,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACxC,KAAK,CAAC,QAAQ,GACe,CACjC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,eAAe;IAC7B,MAAM,GAAG,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC7C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,qIAAqI,CACtI,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}