feat(thirdweb): adds useChainMetadata hook to retrieve metadata for a…

… chain

.changeset/mighty-zebras-try.md

@@ -0,0 +1,15 @@
+---
+"thirdweb": minor
+---
+
+Adds useChainMetadata to retrieve metadata for a chain such as name, icon, available faucets, block explorers, etc.
+
+```jsx
+import { useChainMetadata } from "thirdweb/react";
+
+const { data: chainMetadata } = useChainMetadata(defineChain(11155111));
+
+console.log("Name:", chainMetadata.name); // Sepolia
+console.log("Faucets:", chainMetadata.faucets); // ["https://thirdweb.com/sepolia/faucet"]
+console.log("Explorers:", chainMetadata.explorers); // ["https://sepolia.etherscan.io/"]
+```

packages/thirdweb/src/exports/react.ts

@@ -56,6 +56,9 @@ export { useSwitchActiveWalletChain } from "../react/core/hooks/wallets/useSwitc
 export { useCallsStatus } from "../react/core/hooks/wallets/useCallsStatus.js";
 export { useWalletBalance } from "../react/core/hooks/others/useWalletBalance.js";
 
+// chain hooks
+export { useChainMetadata } from "../react/core/hooks/others/useChainQuery.js";
+
 export type { ConnectManagerOptions } from "../wallets/manager/index.js";
 
 // contract

packages/thirdweb/src/react/core/hooks/others/useChainQuery.ts

@@ -1,6 +1,10 @@
-import { useQueries, useQuery } from "@tanstack/react-query";
+import {
+  type UseQueryResult,
+  useQueries,
+  useQuery,
+} from "@tanstack/react-query";
 import { useMemo } from "react";
-import type { Chain } from "../../../../chains/types.js";
+import type { Chain, ChainMetadata } from "../../../../chains/types.js";
 import {
   convertApiChainToChain,
   getChainMetadata,
@@ -140,9 +144,25 @@ function getQueryOptions(chain?: Chain) {
 }
 
 /**
- * @internal
+ * @description Retrieves metadata for a chain such as name, icon, available faucets, block explorers, etc.
+ *
+ * @param chain - Chain to retrieve metadata for, see [defineChain](https://portal.thirdweb.com/references/typescript/v5/defineChain) for how to create a chain from a chain ID.
+ * @returns A React Query result containing the chain metadata, @see {@link ChainMetadata}.
+ *
+ * @example
+ * ```jsx
+ * import { useChainMetadata } from "thirdweb/react";
+ *
+ * const { data: chainMetadata } = useChainMetadata(defineChain(11155111));
+ *
+ * console.log("Name:", chainMetadata.name); // Sepolia
+ * console.log("Faucets:", chainMetadata.faucets); // ["https://thirdweb.com/sepolia/faucet"]
+ * console.log("Explorers:", chainMetadata.explorers); // ["https://sepolia.etherscan.io/"]
+ * ```
+ *
+ * @chain
  */
-export function useChainQuery(chain?: Chain) {
+export function useChainMetadata(chain?: Chain): UseQueryResult<ChainMetadata> {
   return useQuery({
     ...getQueryOptions(chain),
     queryFn: async () => {

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/DirectPaymentModeScreen.tsx

@@ -11,7 +11,7 @@ import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
 import { iconSize, spacing } from "../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { useChainQuery } from "../../../../../core/hooks/others/useChainQuery.js";
+import { useChainMetadata } from "../../../../../core/hooks/others/useChainQuery.js";
 import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
 import type { TokenInfo } from "../../../../../core/utils/defaultTokens.js";
 import { useEnsName } from "../../../../../core/utils/wallet.js";
@@ -52,7 +52,7 @@ export function DirectPaymentModeScreen(props: {
   const activeWallet = useActiveWallet();
   const metadata = payUiOptions.metadata;
   const paymentInfo = payUiOptions.paymentInfo;
-  const { data: chainData } = useChainQuery(paymentInfo.chain);
+  const { data: chainData } = useChainMetadata(paymentInfo.chain);
   const { data: sellerEns } = useEnsName({
     client,
     address: paymentInfo.sellerAddress,

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx

@@ -7,7 +7,7 @@ import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
 import { iconSize, spacing } from "../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { useChainQuery } from "../../../../../core/hooks/others/useChainQuery.js";
+import { useChainMetadata } from "../../../../../core/hooks/others/useChainQuery.js";
 import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
 import { hasSponsoredTransactionsEnabled } from "../../../../../core/utils/wallet.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
@@ -44,7 +44,7 @@ export function TransactionModeScreen(props: {
     supportedDestinations,
     onContinue,
   } = props;
-  const { data: chainData } = useChainQuery(payUiOptions.transaction.chain);
+  const { data: chainData } = useChainMetadata(payUiOptions.transaction.chain);
   const metadata = payUiOptions.metadata;
   const { data: transactionCostAndData } = useTransactionCostAndData({
     transaction: payUiOptions.transaction,

packages/thirdweb/src/storage/download.ts

@@ -9,13 +9,12 @@ export type DownloadOptions = Prettify<
 >;
 
 /**
- * @import { createThirdwebClient } from "../client/client.js"
- * Downloads a file from the specified IPFS, Arweave, or HTTP URI.
+ * @description Downloads a file from the specified IPFS, Arweave, or HTTP URI.
  *
  * `download` will parse the provided URI based on its scheme (ipfs://, ar://, https://) and convert it to a URL to fetch the file from thirdweb's storage service.
  *
  * @param options - The download options.
- * @param options.client - The Thirdweb client. @see {@link createThirdwebClient}
+ * @param options.client - The Thirdweb client. See [createThirdwebClient](https://portal.thirdweb.com/references/typescript/v5/createThirdwebClient).
  * @param options.uri - The URI of the file to download. Can be IPFS, Arweave, or HTTP.
  * @param [options.requestTimeoutMs] - The maximum time in milliseconds to wait for the request to complete. Defaults to 60 seconds (60,000 milliseconds).
  *