thirdweb 5.69.1-nightly-f368793375d099eec53569330af7a083e558e483-20241120000334 → 5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/types/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.d.ts

@@ -60,6 +60,7 @@ export type BuyDirectListingButtonProps = Omit<TransactionButtonProps, "transact
  * For error handling & callbacks on transaction-sent and transaction-confirmed,
  * please refer to the TransactionButton docs.
  * @component
+ * @transaction
  */
 export declare function BuyDirectListingButton(props: BuyDirectListingButtonProps): import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAKzE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;AAKhH,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAC5C,sBAAsB,EACtB,aAAa,CACd,GAAG;IACF;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;IAEb;;OAEG;IACH,MAAM,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,8CAuGxE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAKzE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;AAKhH,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAC5C,sBAAsB,EACtB,aAAa,CACd,GAAG;IACF;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;IAEb;;OAEG;IACH,MAAM,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,8CAuGxE"}

package/dist/types/react/web/ui/prebuilt/thirdweb/ClaimButton/index.d.ts

@@ -87,6 +87,7 @@ import type { ClaimButtonProps, Erc20ClaimParams, Erc721ClaimParams, Erc1155Clai
  *
  * For error handling & callbacks on transaction-sent and transaction-confirmed,
  * please refer to the TransactionButton docs.
+ * @transaction
  */
 export declare function ClaimButton(props: ClaimButtonProps): import("react/jsx-runtime.js").JSX.Element;
 /**

package/dist/types/react/web/ui/prebuilt/thirdweb/ClaimButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/react/web/ui/prebuilt/thirdweb/ClaimButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,wCAAwC,CAAC;AAGhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAEhG,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gDAAgD,CAAC;AAK9E,OAAO,KAAK,EACV,gBAAgB,EAEhB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,8CAqDlD;AAsDD;;GAEG;AACH,wBAAsB,gBAAgB,CAAC,EACrC,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,iBAAiB,CAAC;CAChC,8JAWA;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,EACtC,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;CACjC,8JAYA;AAED;;GAEG;AACH,wBAAsB,eAAe,CAAC,EACpC,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,gBAAgB,CAAC;CAC/B,8JAwBA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/react/web/ui/prebuilt/thirdweb/ClaimButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,wCAAwC,CAAC;AAGhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAEhG,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gDAAgD,CAAC;AAK9E,OAAO,KAAK,EACV,gBAAgB,EAEhB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,8CAqDlD;AAsDD;;GAEG;AACH,wBAAsB,gBAAgB,CAAC,EACrC,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,iBAAiB,CAAC;CAChC,8JAWA;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,EACtC,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;CACjC,8JAYA;AAED;;GAEG;AACH,wBAAsB,eAAe,CAAC,EACpC,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,gBAAgB,CAAC;CAC/B,8JAwBA"}

package/dist/types/react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.d.ts

@@ -35,6 +35,7 @@ export type CreateDirectListingButtonProps = Omit<TransactionButtonProps, "trans
  * For error handling & callbacks on transaction-sent and transaction-confirmed,
  * please refer to the TransactionButton docs.
  * @component
+ * @transaction
  */
 export declare function CreateDirectListingButton(props: CreateDirectListingButtonProps): import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAIzE,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,iFAAiF,CAAC;AAGzF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;AAKhH,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,sBAAsB,EACtB,aAAa,CACd,GACC,mBAAmB,GAAG;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,cAAc,CAAC;CACxB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,8BAA8B,8CAyHtC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAIzE,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,iFAAiF,CAAC;AAGzF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mEAAmE,CAAC;AAKhH,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,sBAAsB,EACtB,aAAa,CACd,GACC,mBAAmB,GAAG;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,cAAc,CAAC;CACxB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,8BAA8B,8CAyHtC"}

package/dist/types/storage/unpin.d.ts

@@ -5,7 +5,7 @@ export type UnpinOptions = {
 };
 /**
  * Unpins a file from IPFS.
- * @note For security purposes, this method requires a secret key to be set in the ThirdwebClient instance.
+ *  For security purposes, this method requires a secret key to be set in the ThirdwebClient instance.
  * @param options - The options for unpinning the file.
  * @param options.client - The Thirdweb client instance.
  * @param options.cid - The content identifier (CID) of the file to unpin.

package/dist/types/storage/upload.d.ts

@@ -30,6 +30,7 @@ type UploadReturnType<TFiles extends UploadableFile[]> = TFiles extends {
  *    },
  *  ],
  * });
+ * ```
  *
  * ### Uploading files
  *

package/dist/types/storage/upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"upload.d.ts","sourceRoot":"","sources":["../../../src/storage/upload.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAU1D,OAAO,KAAK,EAEV,aAAa,IAAI,qBAAqB,EACtC,cAAc,EACf,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,aAAa,CAAC,MAAM,SAAS,cAAc,EAAE,IACvD,qBAAqB,CAAC,MAAM,CAAC,GAAG;IAC9B,MAAM,EAAE,cAAc,CAAC;CACxB,CAAC;AAEJ,KAAK,gBAAgB,CAAC,MAAM,SAAS,cAAc,EAAE,IAAI,MAAM,SAAS;IACtE,MAAM,EAAE,CAAC,CAAC;CACX,GACG,IAAI,GACJ,MAAM,SAAS;IAAE,MAAM,EAAE,CAAC,CAAA;CAAE,GAC1B,MAAM,GACN,MAAM,EAAE,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAsB,MAAM,CAAC,KAAK,CAAC,MAAM,SAAS,cAAc,EAAE,EAChE,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,GAC7B,OAAO,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAgEnC"}
+{"version":3,"file":"upload.d.ts","sourceRoot":"","sources":["../../../src/storage/upload.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAU1D,OAAO,KAAK,EAEV,aAAa,IAAI,qBAAqB,EACtC,cAAc,EACf,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,aAAa,CAAC,MAAM,SAAS,cAAc,EAAE,IACvD,qBAAqB,CAAC,MAAM,CAAC,GAAG;IAC9B,MAAM,EAAE,cAAc,CAAC;CACxB,CAAC;AAEJ,KAAK,gBAAgB,CAAC,MAAM,SAAS,cAAc,EAAE,IAAI,MAAM,SAAS;IACtE,MAAM,EAAE,CAAC,CAAC;CACX,GACG,IAAI,GACJ,MAAM,SAAS;IAAE,MAAM,EAAE,CAAC,CAAA;CAAE,GAC1B,MAAM,GACN,MAAM,EAAE,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAsB,MAAM,CAAC,KAAK,CAAC,MAAM,SAAS,cAAc,EAAE,EAChE,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,GAC7B,OAAO,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAgEnC"}

package/dist/types/transaction/actions/to-serializable-transaction.d.ts

@@ -14,7 +14,7 @@ export type ToSerializableTransactionOptions = {
  * @param options - The transaction and additional options for conversion
  * @returns A serializable transaction for inspection or submission to an account.
  *
- * @note For easier transaction sending, {@see sendTransaction}
+ *  For easier transaction sending, {@see sendTransaction}
  * @example
  * ```ts
  * import { prepareTransaction, toSerializableTransaction } from "thirdweb";