thirdweb 5.69.0 → 5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332

package/dist/cjs/react/web/ui/prebuilt/Account/balance.js

@@ -0,0 +1,122 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountBalance = AccountBalance;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_query_1 = require("@tanstack/react-query");
+const useActiveWalletChain_js_1 = require("../../../../../react/core/hooks/wallets/useActiveWalletChain.js");
+const getWalletBalance_js_1 = require("../../../../../wallets/utils/getWalletBalance.js");
+const provider_js_1 = require("./provider.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 a number and outputs a number
+ * The function is used to modify the display value of the wallet balance
+ *
+ * ```tsx
+ * const roundTo1Decimal = (num: number):number => Math.round(num * 10) / 10;
+ *
+ * <AccountBalance formatFn={roundTo1Decimal} />
+ * ```
+ *
+ * Result:
+ * ```html
+ * <span>1.1 ETH</span>
+ * ```
+ *
+ * ### 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
+ * @account
+ * @beta
+ */
+function AccountBalance({ chain, tokenAddress, formatFn, loadingComponent, fallbackComponent, queryOptions, ...restProps }) {
+    const { address, client } = (0, provider_js_1.useAccountContext)();
+    const walletChain = (0, useActiveWalletChain_js_1.useActiveWalletChain)();
+    const chainToLoad = chain || walletChain;
+    const balanceQuery = (0, react_query_1.useQuery)({
+        queryKey: [
+            "walletBalance",
+            chainToLoad?.id || -1,
+            address || "0x0",
+            { tokenAddress },
+        ],
+        queryFn: async () => {
+            if (!chainToLoad) {
+                throw new Error("chain is required");
+            }
+            if (!client) {
+                throw new Error("client is required");
+            }
+            return (0, getWalletBalance_js_1.getWalletBalance)({
+                chain: chainToLoad,
+                client,
+                address,
+                tokenAddress,
+            });
+        },
+        ...queryOptions,
+    });
+    if (balanceQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!balanceQuery.data) {
+        return fallbackComponent || null;
+    }
+    const displayValue = formatFn
+        ? formatFn(Number(balanceQuery.data.displayValue))
+        : balanceQuery.data.displayValue;
+    return ((0, jsx_runtime_1.jsxs)("span", { ...restProps, children: [displayValue, " ", balanceQuery.data.symbol] }));
+}
+//# sourceMappingURL=balance.js.map

package/dist/cjs/react/web/ui/prebuilt/Account/balance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"balance.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/balance.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAoJb,wCAqDC;;AAvMD,uDAAuE;AAIvE,6GAAuG;AACvG,0FAG0D;AAC1D,+CAAkD;AA+DlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,SAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACQ;IACpB,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAA,+BAAiB,GAAE,CAAC;IAChD,MAAM,WAAW,GAAG,IAAA,8CAAoB,GAAE,CAAC;IAC3C,MAAM,WAAW,GAAG,KAAK,IAAI,WAAW,CAAC;IACzC,MAAM,YAAY,GAAG,IAAA,sBAAQ,EAAC;QAC5B,QAAQ,EAAE;YACR,eAAe;YACf,WAAW,EAAE,EAAE,IAAI,CAAC,CAAC;YACrB,OAAO,IAAI,KAAK;YAChB,EAAE,YAAY,EAAE;SACR;QACV,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,CAAC,WAAW,EAAE,CAAC;gBACjB,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACvC,CAAC;YACD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;YACxC,CAAC;YACD,OAAO,IAAA,sCAAgB,EAAC;gBACtB,KAAK,EAAE,WAAW;gBAClB,MAAM;gBACN,OAAO;gBACP,YAAY;aACb,CAAC,CAAC;QACL,CAAC;QACD,GAAG,YAAY;KAChB,CAAC,CAAC;IAEH,IAAI,YAAY,CAAC,SAAS,EAAE,CAAC;QAC3B,OAAO,gBAAgB,IAAI,IAAI,CAAC;IAClC,CAAC;IAED,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QACvB,OAAO,iBAAiB,IAAI,IAAI,CAAC;IACnC,CAAC;IAED,MAAM,YAAY,GAAG,QAAQ;QAC3B,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAClD,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC;IAEnC,OAAO,CACL,qCAAU,SAAS,aAChB,YAAY,OAAG,YAAY,CAAC,IAAI,CAAC,MAAM,IACnC,CACR,CAAC;AACJ,CAAC"}

package/dist/cjs/react/web/ui/prebuilt/Account/blobbie.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountBlobbie = AccountBlobbie;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Blobbie_js_1 = require("../../ConnectWallet/Blobbie.js");
+const provider_js_1 = require("./provider.js");
+/**
+ * A wrapper for the Blobbie component
+ * @param props BlobbieProps
+ * @beta
+ */
+function AccountBlobbie(props) {
+    const { address } = (0, provider_js_1.useAccountContext)();
+    return (0, jsx_runtime_1.jsx)(Blobbie_js_1.Blobbie, { ...props, address: address });
+}
+//# sourceMappingURL=blobbie.js.map

package/dist/cjs/react/web/ui/prebuilt/Account/blobbie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blobbie.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/blobbie.tsx"],"names":[],"mappings":";;AAQA,wCAGC;;AAXD,+DAA4E;AAC5E,+CAAkD;AAElD;;;;GAIG;AACH,SAAgB,cAAc,CAAC,KAAoC;IACjE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,+BAAiB,GAAE,CAAC;IACxC,OAAO,uBAAC,oBAAO,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AAClD,CAAC"}

package/dist/cjs/react/web/ui/prebuilt/Account/name.js

@@ -0,0 +1,106 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountName = AccountName;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_query_1 = require("@tanstack/react-query");
+const resolve_name_js_1 = require("../../../../../extensions/ens/resolve-name.js");
+const profiles_js_1 = require("../../../../../social/profiles.js");
+const provider_js_1 = require("./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
+ * @account
+ * @beta
+ */
+function AccountName({ resolverAddress, resolverChain, socialType, formatFn, queryOptions, loadingComponent, fallbackComponent, ...restProps }) {
+    const { address, client } = (0, provider_js_1.useAccountContext)();
+    const nameQuery = (0, react_query_1.useQuery)({
+        queryKey: ["account-name", address],
+        queryFn: async () => {
+            const [socialData, ensName] = await Promise.all([
+                (0, profiles_js_1.getSocialProfiles)({ address, client }),
+                (0, resolve_name_js_1.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;
+        },
+        ...queryOptions,
+    });
+    if (nameQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!nameQuery.data) {
+        return fallbackComponent || null;
+    }
+    return (0, jsx_runtime_1.jsx)("span", { ...restProps, children: nameQuery.data });
+}
+//# sourceMappingURL=name.js.map

package/dist/cjs/react/web/ui/prebuilt/Account/name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"name.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/name.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAgIb,kCA8CC;;AA5KD,uDAAuE;AAGvE,mFAGuD;AACvD,mEAAsE;AAEtE,+CAAkD;AAmDlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,SAAgB,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,IAAA,+BAAiB,GAAE,CAAC;IAChD,MAAM,SAAS,GAAG,IAAA,sBAAQ,EAAC;QACzB,QAAQ,EAAE,CAAC,cAAc,EAAE,OAAO,CAAC;QACnC,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;gBAC9C,IAAA,+BAAiB,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;gBACtC,IAAA,6BAAW,EAAC;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,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,oCAAU,SAAS,YAAG,SAAS,CAAC,IAAI,GAAQ,CAAC;AACtD,CAAC"}

package/dist/cjs/react/web/ui/prebuilt/Account/provider.js

@@ -0,0 +1,43 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountProvider = AccountProvider;
+exports.useAccountContext = useAccountContext;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AccountProviderContext = /* @__PURE__ */ (0, react_1.createContext)(undefined);
+/**
+ * A React context provider component that supplies Account-related data to its child components.
+ *
+ * This component serves as a wrapper around the `AccountProviderContext.Provider` and passes
+ * the provided account data down to all of its child components through the context API.
+ *
+ * @example
+ * ```tsx
+ * import { AccountProvider, AccountAvatar, AccountName, AccountAddress  } from "thirdweb/react";
+ *
+ * <AccountProvider>
+ *   <AccountAvatar />
+ *   <AccountName />
+ *   <AccountAddress />
+ * </AccountProvider>
+ * ```
+ *
+ * @component
+ * @account
+ * @beta
+ */
+function AccountProvider(props) {
+    return ((0, jsx_runtime_1.jsx)(AccountProviderContext.Provider, { value: props, children: props.children }));
+}
+/**
+ * @internal
+ */
+function useAccountContext() {
+    const ctx = (0, react_1.useContext)(AccountProviderContext);
+    if (!ctx) {
+        throw new Error("AccountProviderContext not found. Make sure you are using AccountName, AccountAvatar, etc. inside an <AccountProvider /> component");
+    }
+    return ctx;
+}
+//# sourceMappingURL=provider.js.map

package/dist/cjs/react/web/ui/prebuilt/Account/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/provider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AA+Cb,0CAQC;AAKD,8CAQC;;AAjED,iCAAkD;AAmBlD,MAAM,sBAAsB,GAAG,eAAe,CAAC,IAAA,qBAAa,EAE1D,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAgB,eAAe,CAC7B,KAAoD;IAEpD,OAAO,CACL,uBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC1C,KAAK,CAAC,QAAQ,GACiB,CACnC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAgB,iBAAiB;IAC/B,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,sBAAsB,CAAC,CAAC;IAC/C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,oIAAoI,CACrI,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

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

@@ -0,0 +1,69 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NFTDescription = NFTDescription;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_js_1 = require("./hooks.js");
+const provider_js_1 = require("./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
+ */
+function NFTDescription({ loadingComponent, fallbackComponent, queryOptions, ...restProps }) {
+    const { contract, tokenId } = (0, provider_js_1.useNFTContext)();
+    const nftQuery = (0, hooks_js_1.useNftInfo)({
+        contract,
+        tokenId,
+        queryOptions,
+    });
+    if (nftQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!nftQuery.data?.metadata?.description) {
+        return fallbackComponent || null;
+    }
+    return (0, jsx_runtime_1.jsx)("span", { ...restProps, children: nftQuery.data.metadata.description });
+}
+//# sourceMappingURL=description.js.map

package/dist/cjs/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;;AAgEb,wCAsBC;;AAjFD,yCAAwC;AACxC,+CAA8C;AAY9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,SAAgB,cAAc,CAAC,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACQ;IACpB,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAA,2BAAa,GAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,IAAA,qBAAU,EAAC;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,oCAAU,SAAS,YAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAQ,CAAC;AAC1E,CAAC"}

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNftInfo = useNftInfo;
+exports.getNFTInfo = getNFTInfo;
+const react_query_1 = require("@tanstack/react-query");
+const getNFT_js_1 = require("../../../../../extensions/erc721/read/getNFT.js");
+const getNFT_js_2 = require("../../../../../extensions/erc1155/read/getNFT.js");
+/**
+ * @internal Only used for the NFT prebuilt components
+ */
+function useNftInfo(props) {
+    return (0, react_query_1.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
+ */
+async function getNFTInfo(options) {
+    const nft = await Promise.allSettled([
+        (0, getNFT_js_1.getNFT)(options),
+        (0, getNFT_js_2.getNFT)(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/cjs/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":";;AASA,gCAgBC;AAKD,gCAsBC;AApDD,uDAAuE;AACvE,+EAAsF;AACtF,gFAAwF;AAIxF;;GAEG;AACH,SAAgB,UAAU,CACxB,KAEC;IAED,OAAO,IAAA,sBAAQ,EAAC;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;AACI,KAAK,UAAU,UAAU,CAAC,OAAyB;IACxD,MAAM,GAAG,GAAG,MAAM,OAAO,CAAC,UAAU,CAAC;QACnC,IAAA,kBAAS,EAAC,OAAO,CAAC;QAClB,IAAA,kBAAU,EAAC,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/cjs/react/web/ui/prebuilt/NFT/media.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NFTMedia = NFTMedia;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MediaRenderer_js_1 = require("../../MediaRenderer/MediaRenderer.js");
+const hooks_js_1 = require("./hooks.js");
+const provider_js_1 = require("./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
+ */
+function NFTMedia({ loadingComponent, fallbackComponent, queryOptions, ...mediaRendererProps }) {
+    const { contract, tokenId } = (0, provider_js_1.useNFTContext)();
+    const nftQuery = (0, hooks_js_1.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 ((0, jsx_runtime_1.jsx)(MediaRenderer_js_1.MediaRenderer, { client: contract.client, src: animation_url || image, poster: image, ...mediaRendererProps }));
+}
+//# sourceMappingURL=media.js.map

package/dist/cjs/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":";;AAiFA,4BAqCC;;AAnHD,2EAAqE;AAErE,yCAAwC;AACxC,+CAA8C;AAqB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,SAAgB,QAAQ,CAAC,EACvB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,kBAAkB,EACP;IACd,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAA,2BAAa,GAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,IAAA,qBAAU,EAAC;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,uBAAC,gCAAa,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/cjs/react/web/ui/prebuilt/NFT/name.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NFTName = NFTName;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_js_1 = require("./hooks.js");
+const provider_js_1 = require("./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
+ */
+function NFTName({ loadingComponent, fallbackComponent, queryOptions, ...restProps }) {
+    const { contract, tokenId } = (0, provider_js_1.useNFTContext)();
+    const nftQuery = (0, hooks_js_1.useNftInfo)({
+        contract,
+        tokenId,
+        queryOptions,
+    });
+    if (nftQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!nftQuery.data?.metadata?.name) {
+        return fallbackComponent || null;
+    }
+    return (0, jsx_runtime_1.jsx)("span", { ...restProps, children: nftQuery.data.metadata.name });
+}
+//# sourceMappingURL=name.js.map

package/dist/cjs/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":";;AA8DA,0BAsBC;;AAjFD,yCAAwC;AACxC,+CAA8C;AAY9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,SAAgB,OAAO,CAAC,EACtB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACC;IACb,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAA,2BAAa,GAAE,CAAC;IAE9C,MAAM,QAAQ,GAAG,IAAA,qBAAU,EAAC;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,oCAAU,SAAS,YAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAQ,CAAC;AACnE,CAAC"}

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NFTProviderContext = void 0;
+exports.useNFTContext = useNFTContext;
+exports.NFTProvider = NFTProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/**
+ * @internal
+ */
+exports.NFTProviderContext = (0, react_1.createContext)(undefined);
+/**
+ * @internal
+ */
+function useNFTContext() {
+    const ctx = (0, react_1.useContext)(exports.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
+ */
+function NFTProvider(props) {
+    return ((0, jsx_runtime_1.jsx)(exports.NFTProviderContext.Provider, { value: props, children: props.children }));
+}
+//# sourceMappingURL=provider.js.map

package/dist/cjs/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":";;;AA4BA,sCAQC;AAgCD,kCAMC;;AA1ED,iCAAkD;AAkBlD;;GAEG;AACU,QAAA,kBAAkB,GAAmB,IAAA,qBAAa,EAE7D,SAAS,CAAC,CAAC;AAEb;;GAEG;AACH,SAAgB,aAAa;IAC3B,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,0BAAkB,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,SAAgB,WAAW,CAAC,KAAgD;IAC1E,OAAO,CACL,uBAAC,0BAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACtC,KAAK,CAAC,QAAQ,GACa,CAC/B,CAAC;AACJ,CAAC"}