thirdweb 5.71.0 → 5.72.0-nightly-a98550d229e7fd124e1977fcc64dbd1b602ce656-20241126000403

package/dist/cjs/exports/react.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoConnect = exports.usePostOnRampQuote = exports.useBuyHistory = exports.useBuyWithFiatHistory = exports.useBuyWithFiatStatus = exports.useBuyWithFiatQuote = exports.useBuyWithCryptoHistory = exports.useBuyWithCryptoStatus = exports.useBuyWithCryptoQuote = exports.useInvalidateContractQuery = exports.createContractQuery = exports.useBlockNumber = exports.useEstimateGasCost = exports.useEstimateGas = exports.useSendAndConfirmTransaction = exports.useSendBatchTransaction = exports.useSendTransaction = exports.useSimulateTransaction = exports.useContractEvents = exports.useWaitForReceipt = exports.useReadContract = exports.useChainMetadata = exports.useLinkProfile = exports.useProfiles = exports.useWalletBalance = exports.useCallsStatus = exports.useSwitchActiveWalletChain = exports.useSendCalls = exports.useSetActiveWalletConnectionStatus = exports.useSetActiveWallet = exports.useIsAutoConnecting = exports.useDisconnect = exports.useConnectedWallets = exports.useConnect = exports.useCapabilities = exports.useAutoConnect = exports.useActiveAccount = exports.useActiveWalletConnectionStatus = exports.useActiveWalletChain = exports.useAdminWallet = exports.useActiveWallet = exports.MediaRenderer = exports.getDefaultToken = exports.defaultTokens = exports.ThirdwebProvider = exports.TransactionButton = exports.ConnectEmbed = exports.ConnectButton = exports.lightTheme = exports.darkTheme = void 0;
-exports.TokenIcon = exports.TokenSymbol = exports.TokenName = exports.TokenProvider = exports.AccountAvatar = exports.AccountProvider = exports.AccountBlobbie = exports.AccountName = exports.AccountBalance = exports.AccountAddress = exports.SiteLink = exports.SiteEmbed = exports.useSocialProfiles = exports.useSiweAuth = exports.Blobbie = exports.useConnectionManager = exports.NFTMedia = exports.NFTDescription = exports.NFTName = exports.NFTProvider = exports.CreateDirectListingButton = exports.BuyDirectListingButton = exports.ClaimButton = exports.useEnsAvatar = exports.useEnsName = exports.useNetworkSwitcherModal = exports.useWalletDetailsModal = exports.useWalletImage = exports.useWalletInfo = exports.useConnectModal = exports.PayEmbed = void 0;
+exports.ChainIcon = exports.ChainName = exports.ChainProvider = exports.TokenIcon = exports.TokenSymbol = exports.TokenName = exports.TokenProvider = exports.AccountAvatar = exports.AccountProvider = exports.AccountBlobbie = exports.AccountName = exports.AccountBalance = exports.AccountAddress = exports.SiteLink = exports.SiteEmbed = exports.useSocialProfiles = exports.useSiweAuth = exports.Blobbie = exports.useConnectionManager = exports.NFTMedia = exports.NFTDescription = exports.NFTName = exports.NFTProvider = exports.CreateDirectListingButton = exports.BuyDirectListingButton = exports.ClaimButton = exports.useEnsAvatar = exports.useEnsName = exports.useNetworkSwitcherModal = exports.useWalletDetailsModal = exports.useWalletImage = exports.useWalletInfo = exports.useConnectModal = exports.PayEmbed = void 0;
 var index_js_1 = require("../react/core/design-system/index.js");
 Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return index_js_1.darkTheme; } });
 Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return index_js_1.lightTheme; } });
@@ -180,4 +180,11 @@ var symbol_js_1 = require("../react/web/ui/prebuilt/Token/symbol.js");
 Object.defineProperty(exports, "TokenSymbol", { enumerable: true, get: function () { return symbol_js_1.TokenSymbol; } });
 var icon_js_1 = require("../react/web/ui/prebuilt/Token/icon.js");
 Object.defineProperty(exports, "TokenIcon", { enumerable: true, get: function () { return icon_js_1.TokenIcon; } });
+// Chain
+var provider_js_4 = require("../react/web/ui/prebuilt/Chain/provider.js");
+Object.defineProperty(exports, "ChainProvider", { enumerable: true, get: function () { return provider_js_4.ChainProvider; } });
+var name_js_4 = require("../react/web/ui/prebuilt/Chain/name.js");
+Object.defineProperty(exports, "ChainName", { enumerable: true, get: function () { return name_js_4.ChainName; } });
+var icon_js_2 = require("../react/web/ui/prebuilt/Chain/icon.js");
+Object.defineProperty(exports, "ChainIcon", { enumerable: true, get: function () { return icon_js_2.ChainIcon; } });
 //# sourceMappingURL=react.js.map

package/dist/cjs/exports/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/exports/react.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/exports/react.ts"],"names":[],"mappings":"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"}

package/dist/cjs/react/web/ui/prebuilt/Chain/icon.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainIcon = ChainIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_query_1 = require("@tanstack/react-query");
+const utils_js_1 = require("../../../../../chains/utils.js");
+const ipfs_js_1 = require("../../../../../utils/ipfs.js");
+const provider_js_1 = require("./provider.js");
+/**
+ * This component tries to resolve the icon of a given chain, then return an image.
+ * @returns an <img /> with the src of the chain icon
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { ChainProvider, ChainIcon } from "thirdweb/react";
+ *
+ * <ChainProvider chain={chain}>
+ *   <ChainIcon />
+ * </ChainProvider>
+ * ```
+ *
+ * Result: An <img /> component with the src of the icon
+ * ```html
+ * <img src="chain-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 ChainIcon
+ * ```tsx
+ * <ChainIcon iconResolver="/ethereum-icon.png" />
+ * ```
+ *
+ * You can also pass in your own custom (async) function that retrieves the icon url
+ * ```tsx
+ * const getIcon = async () => {
+ *   const icon = getIconFromCoinMarketCap(chainId, etc);
+ *   return icon;
+ * };
+ *
+ * <ChainIcon iconResolver={getIcon} />
+ * ```
+ *
+ * ### Show a loading sign while the icon is being loaded
+ * ```tsx
+ * <ChainIcon loadingComponent={<Spinner />} />
+ * ```
+ *
+ * ### Fallback to a dummy image if the chain icon fails to resolve
+ * ```tsx
+ * <ChainIcon fallbackComponent={<img src="blank-image.png" />} />
+ * ```
+ *
+ * ### Usage with queryOptions
+ * ChainIcon 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
+ * <ChainIcon queryOptions={{ enabled: someLogic, retry: 3, }} />
+ * ```
+ *
+ * @component
+ * @chain
+ * @beta
+ */
+function ChainIcon({ iconResolver, loadingComponent, fallbackComponent, queryOptions, client, ...restProps }) {
+    const { chain } = (0, provider_js_1.useChainContext)();
+    const iconQuery = (0, react_query_1.useQuery)({
+        queryKey: ["_internal_chain_icon_", chain.id],
+        queryFn: async () => {
+            if (typeof iconResolver === "string") {
+                return iconResolver;
+            }
+            if (typeof iconResolver === "function") {
+                return iconResolver();
+            }
+            // Check if the chain object already has "icon"
+            if (chain.icon?.url) {
+                return chain.icon.url;
+            }
+            const possibleUrl = await (0, utils_js_1.getChainMetadata)(chain).then((data) => data.icon?.url);
+            if (!possibleUrl) {
+                throw new Error("Failed to resolve icon for chain");
+            }
+            return (0, ipfs_js_1.resolveScheme)({ uri: possibleUrl, client });
+        },
+        ...queryOptions,
+    });
+    if (iconQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!iconQuery.data) {
+        return fallbackComponent || null;
+    }
+    return (0, jsx_runtime_1.jsx)("img", { src: iconQuery.data, ...restProps, alt: restProps.alt });
+}
+//# sourceMappingURL=icon.js.map

package/dist/cjs/react/web/ui/prebuilt/Chain/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Chain/icon.tsx"],"names":[],"mappings":";;AA+GA,8BA0CC;;AAzJD,uDAAuE;AAEvE,6DAAkE;AAElE,0DAA6D;AAC7D,+CAAgD;AAkDhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,SAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,MAAM,EACN,GAAG,SAAS,EACG;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,6BAAe,GAAE,CAAC;IACpC,MAAM,SAAS,GAAG,IAAA,sBAAQ,EAAC;QACzB,QAAQ,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAU;QACtD,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,+CAA+C;YAC/C,IAAI,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;gBACpB,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;YACxB,CAAC;YACD,MAAM,WAAW,GAAG,MAAM,IAAA,2BAAgB,EAAC,KAAK,CAAC,CAAC,IAAI,CACpD,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CACzB,CAAC;YACF,IAAI,CAAC,WAAW,EAAE,CAAC;gBACjB,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;YACtD,CAAC;YACD,OAAO,IAAA,uBAAa,EAAC,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;QACrD,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,gCAAK,GAAG,EAAE,SAAS,CAAC,IAAI,KAAM,SAAS,EAAE,GAAG,EAAE,SAAS,CAAC,GAAG,GAAI,CAAC;AACzE,CAAC"}

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

@@ -0,0 +1,124 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainName = ChainName;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_query_1 = require("@tanstack/react-query");
+const utils_js_1 = require("../../../../../chains/utils.js");
+const provider_js_1 = require("./provider.js");
+/**
+ * This component fetches then shows the name of a 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 { ChainProvider, ChainName } from "thirdweb/react";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * <ChainProvider {...props}>
+ *   <ChainName  />
+ * </ChainProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>Ethereum Mainnet</span>
+ * ```
+ *
+ * ### Custom name resolver
+ * By default ChainName will call the thirdweb API to retrieve the chain name.
+ * 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 chain name";
+ * }
+ *
+ * <ChainName nameResolver={fetchNameMethod} />
+ * ```
+ *
+ * Alternatively you can also pass in a string directly:
+ * ```tsx
+ * <ChainName nameResolver="ETH Mainnet" />
+ * ```
+ *
+ *
+ * ### Format the name (capitalize, truncate, etc.)
+ * The ChainName component accepts a `formatFn` which takes in a string and outputs a string
+ * The function is used to modify the name of the chain
+ *
+ * ```tsx
+ * const concatStr = (str: string):string => str + "Network"
+ *
+ * <ChainProvider {...props}>
+ *   <ChainName formatFn={concatStr} />
+ * </ChainProvider>
+ * ```
+ *
+ * Result:
+ * ```html
+ * <span>Ethereum Mainnet Network</span>
+ * ```
+ *
+ * ### Show a loading sign when the name is being fetched
+ * ```tsx
+ * import { ChainProvider, ChainName } from "thirdweb/react";
+ *
+ * <ChainProvider {...props}>
+ *   <ChainName loadingComponent={<Spinner />} />
+ * </ChainProvider>
+ * ```
+ *
+ * ### Fallback to something when the name fails to resolve
+ * ```tsx
+ * <ChainProvider {...props}>
+ *   <ChainName fallbackComponent={"Failed to load"} />
+ * </ChainProvider>
+ * ```
+ *
+ * ### 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
+ * <ChainName
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 4,
+ *   }}
+ * />
+ * ```
+ *
+ * @component
+ * @chain
+ * @beta
+ */
+function ChainName({ nameResolver, formatFn, loadingComponent, fallbackComponent, queryOptions, ...restProps }) {
+    const { chain } = (0, provider_js_1.useChainContext)();
+    const nameQuery = (0, react_query_1.useQuery)({
+        queryKey: ["_internal_chain_name_", chain.id],
+        queryFn: async () => {
+            if (typeof nameResolver === "string") {
+                return nameResolver;
+            }
+            if (typeof nameResolver === "function") {
+                return nameResolver();
+            }
+            if (chain.name) {
+                return chain.name;
+            }
+            return (0, utils_js_1.getChainMetadata)(chain).then((data) => data.name);
+        },
+        ...queryOptions,
+    });
+    if (nameQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!nameQuery.data) {
+        return fallbackComponent || null;
+    }
+    const displayValue = formatFn ? formatFn(nameQuery.data) : nameQuery.data;
+    return (0, jsx_runtime_1.jsx)("span", { ...restProps, children: displayValue });
+}
+//# sourceMappingURL=name.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"name.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Chain/name.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAmJb,8BAqCC;;AAtLD,uDAAuE;AAGvE,6DAAkE;AAClE,+CAAgD;AAqDhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AACH,SAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,QAAQ,EACR,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACG;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,6BAAe,GAAE,CAAC;IACpC,MAAM,SAAS,GAAG,IAAA,sBAAQ,EAAC;QACzB,QAAQ,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAU;QACtD,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,KAAK,CAAC,IAAI,EAAE,CAAC;gBACf,OAAO,KAAK,CAAC,IAAI,CAAC;YACpB,CAAC;YACD,OAAO,IAAA,2BAAgB,EAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3D,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,oCAAU,SAAS,YAAG,YAAY,GAAQ,CAAC;AACpD,CAAC"}

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

@@ -0,0 +1,54 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainProvider = ChainProvider;
+exports.useChainContext = useChainContext;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ChainProviderContext = /* @__PURE__ */ (0, react_1.createContext)(undefined);
+/**
+ * A React context provider component that supplies Chain-related data to its child components.
+ *
+ * This component serves as a wrapper around the `ChainProviderContext.Provider` and passes
+ * the provided chain data down to all of its child components through the context API.
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { ChainProvider, ChainIcon, ChainName } from "thirdweb/react";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * <ChainProvider chain={ethereum}>
+ *   <ChainIcon />
+ *   <ChainName />
+ * </ChainProvider>
+ * ```
+ *
+ * ### Usage with defineChain
+ * ```tsx
+ * import { defineChain } from "thirdweb/chains"l
+ * import { ChainProvider, ChainName } from "thirdweb/react";
+ *
+ * const chainId = someNumber;
+ *
+ * <ChainProvider chain={defineChain(chainId)}>
+ *   <ChainName />
+ * </ChainProvider>
+ * ```
+ * @component
+ * @chain
+ */
+function ChainProvider(props) {
+    return ((0, jsx_runtime_1.jsx)(ChainProviderContext.Provider, { value: props, children: props.children }));
+}
+/**
+ * @internal
+ */
+function useChainContext() {
+    const ctx = (0, react_1.useContext)(ChainProviderContext);
+    if (!ctx) {
+        throw new Error("ChainProviderContext not found. Make sure you are using ChainName, ChainIcon, etc. inside a <ChainProvider /> component");
+    }
+    return ctx;
+}
+//# sourceMappingURL=provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Chain/provider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAmDb,sCAQC;AAKD,0CAQC;;AArED,iCAAkD;AAYlD,MAAM,oBAAoB,GAAG,eAAe,CAAC,IAAA,qBAAa,EAExD,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,SAAgB,aAAa,CAC3B,KAAkD;IAElD,OAAO,CACL,uBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACxC,KAAK,CAAC,QAAQ,GACe,CACjC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAgB,eAAe;IAC7B,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,oBAAoB,CAAC,CAAC;IAC7C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,yHAAyH,CAC1H,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Token/icon.tsx"],"names":[],"mappings":";;AAuGA,8BA4DC;;AAnKD,uDAAuE;AAEvE,6DAAkE;AAClE,wEAA6E;AAC7E,qEAAkE;AAClE,yGAAmG;AACnG,0DAA6D;AAC7D,+CAAgD;AAwChD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,SAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACG;IACf,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,6BAAe,GAAE,CAAC;IACrD,MAAM,SAAS,GAAG,IAAA,sBAAQ,EAAC;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,mCAAoB,CAAC,WAAW,EAAE,EAAE,CAAC;gBACjE,MAAM,WAAW,GAAG,MAAM,IAAA,2BAAgB,EAAC,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,IAAA,uBAAa,EAAC,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;YACrD,CAAC;YAED,2CAA2C;YAC3C,MAAM,gBAAgB,GAAG,MAAM,IAAA,4CAAmB,EAAC;gBACjD,QAAQ,EAAE,IAAA,yBAAW,EAAC;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,IAAA,uBAAa,EAAC;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,gCAAK,GAAG,EAAE,SAAS,CAAC,IAAI,KAAM,SAAS,EAAE,GAAG,EAAE,SAAS,CAAC,GAAG,GAAI,CAAC;AACzE,CAAC"}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Token/icon.tsx"],"names":[],"mappings":";;AA4GA,8BA4DC;;AAxKD,uDAAuE;AAEvE,6DAAkE;AAClE,wEAA6E;AAC7E,qEAAkE;AAClE,yGAAmG;AACnG,0DAA6D;AAC7D,+CAAgD;AA6ChD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,SAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACG;IACf,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,6BAAe,GAAE,CAAC;IACrD,MAAM,SAAS,GAAG,IAAA,sBAAQ,EAAC;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,mCAAoB,CAAC,WAAW,EAAE,EAAE,CAAC;gBACjE,MAAM,WAAW,GAAG,MAAM,IAAA,2BAAgB,EAAC,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,IAAA,uBAAa,EAAC,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;YACrD,CAAC;YAED,2CAA2C;YAC3C,MAAM,gBAAgB,GAAG,MAAM,IAAA,4CAAmB,EAAC;gBACjD,QAAQ,EAAE,IAAA,yBAAW,EAAC;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,IAAA,uBAAa,EAAC;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,gCAAK,GAAG,EAAE,SAAS,CAAC,IAAI,KAAM,SAAS,EAAE,GAAG,EAAE,SAAS,CAAC,GAAG,GAAI,CAAC;AACzE,CAAC"}

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = void 0;
-exports.version = "5.71.0";
+exports.version = "5.72.0-nightly-a98550d229e7fd124e1977fcc64dbd1b602ce656-20241126000403";
 //# sourceMappingURL=version.js.map

package/dist/cjs/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG,wEAAwE,CAAC"}

package/dist/esm/exports/react.js

@@ -95,4 +95,8 @@ export { TokenProvider, } from "../react/web/ui/prebuilt/Token/provider.js";
 export { TokenName, } from "../react/web/ui/prebuilt/Token/name.js";
 export { TokenSymbol, } from "../react/web/ui/prebuilt/Token/symbol.js";
 export { TokenIcon, } from "../react/web/ui/prebuilt/Token/icon.js";
+// Chain
+export { ChainProvider, } from "../react/web/ui/prebuilt/Chain/provider.js";
+export { ChainName, } from "../react/web/ui/prebuilt/Chain/name.js";
+export { ChainIcon, } from "../react/web/ui/prebuilt/Chain/icon.js";
 //# sourceMappingURL=react.js.map

package/dist/esm/exports/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/exports/react.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/exports/react.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { getChainMetadata } from "../../../../../chains/utils.js";
+import { resolveScheme } from "../../../../../utils/ipfs.js";
+import { useChainContext } from "./provider.js";
+/**
+ * This component tries to resolve the icon of a given chain, then return an image.
+ * @returns an <img /> with the src of the chain icon
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { ChainProvider, ChainIcon } from "thirdweb/react";
+ *
+ * <ChainProvider chain={chain}>
+ *   <ChainIcon />
+ * </ChainProvider>
+ * ```
+ *
+ * Result: An <img /> component with the src of the icon
+ * ```html
+ * <img src="chain-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 ChainIcon
+ * ```tsx
+ * <ChainIcon iconResolver="/ethereum-icon.png" />
+ * ```
+ *
+ * You can also pass in your own custom (async) function that retrieves the icon url
+ * ```tsx
+ * const getIcon = async () => {
+ *   const icon = getIconFromCoinMarketCap(chainId, etc);
+ *   return icon;
+ * };
+ *
+ * <ChainIcon iconResolver={getIcon} />
+ * ```
+ *
+ * ### Show a loading sign while the icon is being loaded
+ * ```tsx
+ * <ChainIcon loadingComponent={<Spinner />} />
+ * ```
+ *
+ * ### Fallback to a dummy image if the chain icon fails to resolve
+ * ```tsx
+ * <ChainIcon fallbackComponent={<img src="blank-image.png" />} />
+ * ```
+ *
+ * ### Usage with queryOptions
+ * ChainIcon 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
+ * <ChainIcon queryOptions={{ enabled: someLogic, retry: 3, }} />
+ * ```
+ *
+ * @component
+ * @chain
+ * @beta
+ */
+export function ChainIcon({ iconResolver, loadingComponent, fallbackComponent, queryOptions, client, ...restProps }) {
+    const { chain } = useChainContext();
+    const iconQuery = useQuery({
+        queryKey: ["_internal_chain_icon_", chain.id],
+        queryFn: async () => {
+            if (typeof iconResolver === "string") {
+                return iconResolver;
+            }
+            if (typeof iconResolver === "function") {
+                return iconResolver();
+            }
+            // Check if the chain object already has "icon"
+            if (chain.icon?.url) {
+                return chain.icon.url;
+            }
+            const possibleUrl = await getChainMetadata(chain).then((data) => data.icon?.url);
+            if (!possibleUrl) {
+                throw new Error("Failed to resolve icon for chain");
+            }
+            return resolveScheme({ uri: possibleUrl, client });
+        },
+        ...queryOptions,
+    });
+    if (iconQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!iconQuery.data) {
+        return fallbackComponent || null;
+    }
+    return _jsx("img", { src: iconQuery.data, ...restProps, alt: restProps.alt });
+}
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Chain/icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAwB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAkDhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,MAAM,EACN,GAAG,SAAS,EACG;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IACpC,MAAM,SAAS,GAAG,QAAQ,CAAC;QACzB,QAAQ,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAU;QACtD,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,+CAA+C;YAC/C,IAAI,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;gBACpB,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;YACxB,CAAC;YACD,MAAM,WAAW,GAAG,MAAM,gBAAgB,CAAC,KAAK,CAAC,CAAC,IAAI,CACpD,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CACzB,CAAC;YACF,IAAI,CAAC,WAAW,EAAE,CAAC;gBACjB,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;YACtD,CAAC;YACD,OAAO,aAAa,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;QACrD,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,KAAM,SAAS,EAAE,GAAG,EAAE,SAAS,CAAC,GAAG,GAAI,CAAC;AACzE,CAAC"}

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

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { getChainMetadata } from "../../../../../chains/utils.js";
+import { useChainContext } from "./provider.js";
+/**
+ * This component fetches then shows the name of a 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 { ChainProvider, ChainName } from "thirdweb/react";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * <ChainProvider {...props}>
+ *   <ChainName  />
+ * </ChainProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>Ethereum Mainnet</span>
+ * ```
+ *
+ * ### Custom name resolver
+ * By default ChainName will call the thirdweb API to retrieve the chain name.
+ * 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 chain name";
+ * }
+ *
+ * <ChainName nameResolver={fetchNameMethod} />
+ * ```
+ *
+ * Alternatively you can also pass in a string directly:
+ * ```tsx
+ * <ChainName nameResolver="ETH Mainnet" />
+ * ```
+ *
+ *
+ * ### Format the name (capitalize, truncate, etc.)
+ * The ChainName component accepts a `formatFn` which takes in a string and outputs a string
+ * The function is used to modify the name of the chain
+ *
+ * ```tsx
+ * const concatStr = (str: string):string => str + "Network"
+ *
+ * <ChainProvider {...props}>
+ *   <ChainName formatFn={concatStr} />
+ * </ChainProvider>
+ * ```
+ *
+ * Result:
+ * ```html
+ * <span>Ethereum Mainnet Network</span>
+ * ```
+ *
+ * ### Show a loading sign when the name is being fetched
+ * ```tsx
+ * import { ChainProvider, ChainName } from "thirdweb/react";
+ *
+ * <ChainProvider {...props}>
+ *   <ChainName loadingComponent={<Spinner />} />
+ * </ChainProvider>
+ * ```
+ *
+ * ### Fallback to something when the name fails to resolve
+ * ```tsx
+ * <ChainProvider {...props}>
+ *   <ChainName fallbackComponent={"Failed to load"} />
+ * </ChainProvider>
+ * ```
+ *
+ * ### 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
+ * <ChainName
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 4,
+ *   }}
+ * />
+ * ```
+ *
+ * @component
+ * @chain
+ * @beta
+ */
+export function ChainName({ nameResolver, formatFn, loadingComponent, fallbackComponent, queryOptions, ...restProps }) {
+    const { chain } = useChainContext();
+    const nameQuery = useQuery({
+        queryKey: ["_internal_chain_name_", chain.id],
+        queryFn: async () => {
+            if (typeof nameResolver === "string") {
+                return nameResolver;
+            }
+            if (typeof nameResolver === "function") {
+                return nameResolver();
+            }
+            if (chain.name) {
+                return chain.name;
+            }
+            return getChainMetadata(chain).then((data) => data.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/Chain/name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"name.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Chain/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,eAAe,EAAE,MAAM,eAAe,CAAC;AAqDhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,YAAY,EACZ,QAAQ,EACR,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACG;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IACpC,MAAM,SAAS,GAAG,QAAQ,CAAC;QACzB,QAAQ,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAU;QACtD,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,KAAK,CAAC,IAAI,EAAE,CAAC;gBACf,OAAO,KAAK,CAAC,IAAI,CAAC;YACpB,CAAC;YACD,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3D,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"}