thirdweb 5.32.0 → 5.32.1

package/dist/types/wallets/smart/lib/userop.d.ts

@@ -1,21 +1,66 @@
 import type { PreparedTransaction } from "../../../transaction/prepare-transaction.js";
-import type { SmartAccountOptions, UserOperation } from "../types.js";
+import type { TransactionReceipt } from "../../../transaction/types.js";
+import type { Hex } from "../../../utils/encoding/hex.js";
+import type { BundlerOptions, SmartAccountOptions, UserOperation } from "../types.js";
 /**
- * Create an unsigned user operation
- * @internal
+ * Wait for the user operation to be mined.
+ * @param args - The options and user operation hash
+ * @returns - The transaction receipt
+ *
+ * @example
+ * ```ts
+ * import { waitForUserOpReceipt } from "thirdweb/wallets/smart";
+ *
+ * const receipt = await waitForUserOpReceipt({
+ *  chain,
+ *  client,
+ *  userOpHash,
+ * });
+ * ```
+ * @walletUtils
  */
+export declare function waitForUserOpReceipt(args: BundlerOptions & {
+    userOpHash: Hex;
+    timeoutMs?: number;
+    intervalMs?: number;
+}): Promise<TransactionReceipt>;
 /**
- * Creates an unsigned user operation.
- * @internal
+ * Creates an unsigned user operation from a prepared transaction.
+ * @param args - The prepared transaction and options
+ * @returns - The unsigned user operation
+ * @example
+ * ```ts
+ * import { createUnsignedUserOp } from "thirdweb/wallets/smart";
+ *
+ * const transaction = prepareContractCall(...);
+ *
+ * const userOp = await createUnsignedUserOp({
+ *  transaction,
+ *  options,
+ * });
+ * ```
+ * @walletUtils
  */
 export declare function createUnsignedUserOp(args: {
-    executeTx: PreparedTransaction;
+    transaction: PreparedTransaction;
     options: SmartAccountOptions;
 }): Promise<UserOperation>;
 /**
- * Sign the filled userOp.
+ * Sign a user operation.
  * @param userOp - The UserOperation to sign (with signature field ignored)
- * @internal
+ * @returns - The user operation with the signature field populated
+ * @example
+ * ```ts
+ * import { signUserOp } from "thirdweb/wallets/smart";
+ *
+ * const userOp = createUnsignedUserOp(...);
+ *
+ * const signedUserOp = await signUserOp({
+ *  userOp,
+ *  options,
+ * });
+ * ```
+ * @walletUtils
  */
 export declare function signUserOp(args: {
     userOp: UserOperation;

package/dist/types/wallets/smart/lib/userop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"userop.d.ts","sourceRoot":"","sources":["../../../../../src/wallets/smart/lib/userop.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAQvF,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAWtE;;;GAGG;AACH;;;GAGG;AACH,wBAAsB,oBAAoB,CAAC,IAAI,EAAE;IAC/C,SAAS,EAAE,mBAAmB,CAAC;IAC/B,OAAO,EAAE,mBAAmB,CAAC;CAC9B,GAAG,OAAO,CAAC,aAAa,CAAC,CAkHzB;AAED;;;;GAIG;AACH,wBAAsB,UAAU,CAAC,IAAI,EAAE;IACrC,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,mBAAmB,CAAC;CAC9B,GAAG,OAAO,CAAC,aAAa,CAAC,CAmBzB"}
+{"version":3,"file":"userop.d.ts","sourceRoot":"","sources":["../../../../../src/wallets/smart/lib/userop.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAGxE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAK1D,OAAO,KAAK,EACV,cAAc,EACd,mBAAmB,EACnB,aAAa,EACd,MAAM,aAAa,CAAC;AAerB;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAsB,oBAAoB,CACxC,IAAI,EAAE,cAAc,GAAG;IACrB,UAAU,EAAE,GAAG,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GACA,OAAO,CAAC,kBAAkB,CAAC,CAY7B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAsB,oBAAoB,CAAC,IAAI,EAAE;IAC/C,WAAW,EAAE,mBAAmB,CAAC;IACjC,OAAO,EAAE,mBAAmB,CAAC;CAC9B,GAAG,OAAO,CAAC,aAAa,CAAC,CAkHzB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAsB,UAAU,CAAC,IAAI,EAAE;IACrC,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,mBAAmB,CAAC;CAC9B,GAAG,OAAO,CAAC,aAAa,CAAC,CAmBzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.32.0",
+  "version": "5.32.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

package/src/chains/types.ts

@@ -1,5 +1,4 @@
 import type { Prettify } from "../utils/type-utils.js";
-
 export type Chain = Prettify<Readonly<ChainOptions & { rpc: string }>>;
 
 export type ChainOptions = {
@@ -21,6 +20,7 @@ export type ChainOptions = {
   experimental?: {
     increaseZeroByteCount?: boolean;
   };
+  faucets?: Array<string>;
 };
 
 type Icon = {

package/src/chains/utils.ts

@@ -81,7 +81,7 @@ function isLegacyChain(
 }
 
 function convertLegacyChain(legacyChain: LegacyChain): Chain {
-  const c: Chain = {
+  return {
     id: legacyChain.chainId,
     name: legacyChain.name,
     rpc:
@@ -96,11 +96,10 @@ function convertLegacyChain(legacyChain: LegacyChain): Chain {
       symbol: legacyChain.nativeCurrency.symbol,
       decimals: legacyChain.nativeCurrency.decimals,
     },
+    faucets: legacyChain.faucets ? [...legacyChain.faucets] : undefined,
+    icon: legacyChain.icon,
+    testnet: legacyChain.testnet ? true : undefined,
   };
-  if (legacyChain.testnet) {
-    return { ...c, testnet: true };
-  }
-  return c;
 }
 
 function isViemChain(
@@ -110,7 +109,7 @@ function isViemChain(
 }
 
 function convertViemChain(viemChain: ViemChain): Chain {
-  return defineChain({
+  return {
     id: viemChain.id,
     name: viemChain.name,
     nativeCurrency: {
@@ -130,7 +129,8 @@ function convertViemChain(viemChain: ViemChain): Chain {
           };
         })
       : [],
-  });
+    testnet: viemChain.testnet ? true : undefined,
+  };
 }
 
 type GetRpcUrlForChainOptions = {
@@ -310,6 +310,8 @@ export function convertApiChainToChain(apiChain: ChainMetadata): Chain {
         apiUrl: explorer.url,
       };
     }),
+    faucets: apiChain.faucets ? [...apiChain.faucets] : undefined,
+    icon: apiChain.icon,
   };
 }
 

package/src/exports/react.ts

@@ -135,3 +135,8 @@ export {
   useWalletDetailsModal,
   type UseWalletDetailsModalOptions,
 } from "../react/web/ui/ConnectWallet/Details.js";
+
+export {
+  useNetworkSwitcherModal,
+  type UseNetworkSwitcherModalOptions,
+} from "../react/web/ui/ConnectWallet/NetworkSelector.js";

package/src/exports/wallets/smart.ts

@@ -1,5 +1,7 @@
 export { smartWallet } from "../../wallets/smart/smart-wallet.js";
 
+export { waitForUserOpReceipt } from "../../wallets/smart/lib/userop.js";
+
 export type {
   SmartWalletConnectionOptions,
   SmartWalletOptions,

package/src/extensions/erc1155/drop1155.test.ts

@@ -8,6 +8,8 @@ import {
 } from "../../../test/src/test-wallets.js";
 import { type ThirdwebContract, getContract } from "../../contract/contract.js";
 import { sendAndConfirmTransaction } from "../../transaction/actions/send-and-confirm-transaction.js";
+import { resolvePromisedValue } from "../../utils/promise/resolve-promised-value.js";
+import { toEther } from "../../utils/units.js";
 import { getContractMetadata } from "../common/read/getContractMetadata.js";
 import { deployERC1155Contract } from "../prebuilts/deploy-erc1155.js";
 import { balanceOf } from "./__generated__/IERC1155/read/balanceOf.js";
@@ -135,6 +137,11 @@ describe.runIf(process.env.TW_SECRET_KEY)(
         tokenId: 0n,
         quantity: 1n,
       });
+      // assert value is set correctly
+      const value = await resolvePromisedValue(claimTx.value);
+      expect(value).toBeDefined();
+      if (!value) throw new Error("value is undefined");
+      expect(toEther(value)).toBe("0.001");
       await sendAndConfirmTransaction({
         transaction: claimTx,
         account: TEST_ACCOUNT_A,

package/src/extensions/erc20/drop20.test.ts

@@ -5,9 +5,12 @@ import { TEST_CLIENT } from "../../../test/src/test-clients.js";
 import {
   TEST_ACCOUNT_A,
   TEST_ACCOUNT_B,
+  TEST_ACCOUNT_C,
 } from "../../../test/src/test-wallets.js";
 import { type ThirdwebContract, getContract } from "../../contract/contract.js";
 import { sendAndConfirmTransaction } from "../../transaction/actions/send-and-confirm-transaction.js";
+import { resolvePromisedValue } from "../../utils/promise/resolve-promised-value.js";
+import { toEther } from "../../utils/units.js";
 import { getContractMetadata } from "../common/read/getContractMetadata.js";
 import { deployERC20Contract } from "../prebuilts/deploy-erc20.js";
 import { claimTo } from "./drops/write/claimTo.js";
@@ -92,6 +95,58 @@ describe.runIf(process.env.TW_SECRET_KEY)(
       `);
     });
 
+    it("should allow to claim tokens with value", async () => {
+      await expect(
+        getBalance({ contract, address: TEST_ACCOUNT_C.address }),
+      ).resolves.toMatchInlineSnapshot(`
+        {
+          "decimals": 18,
+          "displayValue": "0",
+          "name": "Test DropERC20",
+          "symbol": "",
+          "value": 0n,
+        }
+      `);
+      // set cc with price
+      await sendAndConfirmTransaction({
+        transaction: setClaimConditions({
+          contract,
+          phases: [
+            {
+              price: "0.01",
+            },
+          ],
+        }),
+        account: TEST_ACCOUNT_A,
+      });
+      const claimTx = claimTo({
+        contract,
+        to: TEST_ACCOUNT_C.address,
+        quantity: "2",
+      });
+      // assert value is set correctly
+      const value = await resolvePromisedValue(claimTx.value);
+      expect(value).toBeDefined();
+      if (!value) throw new Error("value is undefined");
+      expect(toEther(value)).toBe("0.02");
+      // claim
+      await sendAndConfirmTransaction({
+        transaction: claimTx,
+        account: TEST_ACCOUNT_C,
+      });
+      await expect(
+        getBalance({ contract, address: TEST_ACCOUNT_C.address }),
+      ).resolves.toMatchInlineSnapshot(`
+        {
+          "decimals": 18,
+          "displayValue": "2",
+          "name": "Test DropERC20",
+          "symbol": "",
+          "value": 2000000000000000000n,
+        }
+      `);
+    });
+
     describe("Allowlists", () => {
       it("should allow to claim tokens with an allowlist", async () => {
         await sendAndConfirmTransaction({

package/src/extensions/erc721/drop721.test.ts

@@ -5,9 +5,12 @@ import { TEST_CLIENT } from "../../../test/src/test-clients.js";
 import {
   TEST_ACCOUNT_A,
   TEST_ACCOUNT_B,
+  TEST_ACCOUNT_C,
 } from "../../../test/src/test-wallets.js";
 import { type ThirdwebContract, getContract } from "../../contract/contract.js";
 import { sendAndConfirmTransaction } from "../../transaction/actions/send-and-confirm-transaction.js";
+import { resolvePromisedValue } from "../../utils/promise/resolve-promised-value.js";
+import { toEther } from "../../utils/units.js";
 import { getContractMetadata } from "../common/read/getContractMetadata.js";
 import { deployERC721Contract } from "../prebuilts/deploy-erc721.js";
 import { balanceOf } from "./__generated__/IERC721A/read/balanceOf.js";
@@ -110,6 +113,31 @@ describe.runIf(process.env.TW_SECRET_KEY)(
       ).resolves.toBe(1n);
     });
 
+    it("should allow to claim tokens with value", async () => {
+      // set cc with price
+      await sendAndConfirmTransaction({
+        transaction: setClaimConditions({
+          contract,
+          phases: [
+            {
+              price: "0.01",
+            },
+          ],
+        }),
+        account: TEST_ACCOUNT_A,
+      });
+      const claimTx = claimTo({
+        contract,
+        to: TEST_ACCOUNT_C.address,
+        quantity: 2n,
+      });
+      // assert value is set correctly
+      const value = await resolvePromisedValue(claimTx.value);
+      expect(value).toBeDefined();
+      if (!value) throw new Error("value is undefined");
+      expect(toEther(value)).toBe("0.02");
+    });
+
     describe("Allowlists", () => {
       it("should allow to claim tokens with an allowlist", async () => {
         await sendAndConfirmTransaction({

package/src/react/core/hooks/others/useChainQuery.ts

@@ -1,49 +1,130 @@
-import { useQueries, useQuery } from "@tanstack/react-query";
-import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
 import type { Chain } from "../../../../chains/types.js";
-import { getChainMetadata } from "../../../../chains/utils.js";
-import { pLimit } from "../../../../utils/promise/p-limit.js";
+import {
+  convertApiChainToChain,
+  getChainMetadata,
+} from "../../../../chains/utils.js";
+
+export function useChainName(chain?: Chain) {
+  // only if we have a chain and no chain name!
+  const isEnabled = !!chain && !chain.name;
+  const chainQuery = useQuery({
+    queryKey: ["chain", chain?.id],
+    enabled: isEnabled,
+    retry: false,
+    // 1 hour
+    staleTime: 60 * 60 * 1000,
+    queryFn: async () => {
+      if (!chain) {
+        throw new Error("chain is required");
+      }
+      return convertApiChainToChain(await getChainMetadata(chain));
+    },
+  });
+
+  return {
+    name: chain?.name ?? chainQuery.data?.name,
+    isLoading: isEnabled && chainQuery.isLoading,
+  };
+}
+
+export function useChainIconUrl(chain?: Chain) {
+  // only if we have a chain and no chain icon url!
+  const isEnabled = !!chain && !chain.icon?.url;
+  const chainQuery = useQuery({
+    queryKey: ["chain", chain?.id],
+    // only if we have a chain and no chain icon url!
+    enabled: isEnabled,
+    retry: false,
+    // 1 hour
+    staleTime: 60 * 60 * 1000,
+    queryFn: async () => {
+      if (!chain) {
+        throw new Error("chain is required");
+      }
+      return convertApiChainToChain(await getChainMetadata(chain));
+    },
+  });
+
+  return {
+    url: chain?.icon?.url ?? chainQuery.data?.icon?.url,
+    isLoading: isEnabled && chainQuery.isLoading,
+  };
+}
+
+export function useChainFaucets(chain?: Chain) {
+  // only if we have a chain and it might be a testnet and no faucets and its not localhost
+  const isEnabled =
+    !!chain &&
+    "testnet" in chain &&
+    !chain.faucets?.length &&
+    chain.id !== 1337;
+
+  const chainQuery = useQuery({
+    queryKey: ["chain", chain?.id],
+    enabled: isEnabled,
+    retry: false,
+    // 1 hour
+    staleTime: 60 * 60 * 1000,
+    queryFn: async () => {
+      if (!chain) {
+        throw new Error("chain is required");
+      }
+      return convertApiChainToChain(await getChainMetadata(chain));
+    },
+  });
 
-function getQueryOptions(chain?: Chain) {
   return {
-    queryKey: ["chain", chain],
-    enabled: !!chain,
-    staleTime: 1000 * 60 * 60, // 1 hour
-  } as const;
+    faucets: chain?.faucets ?? chainQuery.data?.faucets ?? [],
+    isLoading: isEnabled && chainQuery.isLoading,
+  };
 }
 
-/**
- * @internal
- */
-export function useChainQuery(chain?: Chain) {
-  return useQuery({
-    ...getQueryOptions(chain),
+export function useChainSymbol(chain?: Chain) {
+  // only if we have a chain and no chain icon url!
+  const isEnabled = !!chain && !chain.nativeCurrency?.symbol;
+  const chainQuery = useQuery({
+    queryKey: ["chain", chain?.id],
+    // only if we have a chain and no chain icon url!
+    enabled: isEnabled,
+    retry: false,
+    // 1 hour
+    staleTime: 60 * 60 * 1000,
     queryFn: async () => {
       if (!chain) {
-        throw new Error("chainId is required");
+        throw new Error("chain is required");
       }
-      return getChainMetadata(chain);
+      return convertApiChainToChain(await getChainMetadata(chain));
     },
   });
+
+  return {
+    symbol:
+      chain?.nativeCurrency?.symbol ?? chainQuery.data?.nativeCurrency?.symbol,
+    isLoading: isEnabled && chainQuery.isLoading,
+  };
 }
 
-/**
- * @param chains - array of `Chains`
- * @param maxConcurrency - maximum number of concurrent requests to make
- * @internal
- */
-export function useChainsQuery(chains: Chain[], maxConcurrency: number) {
-  const queryList = useMemo(() => {
-    const limit = pLimit(maxConcurrency);
-    return chains.map((chain) => {
-      return {
-        ...getQueryOptions(chain),
-        queryFn: () => limit(() => getChainMetadata(chain)),
-      };
-    });
-  }, [chains, maxConcurrency]);
-
-  return useQueries({
-    queries: queryList,
+export function useChainExplorers(chain?: Chain) {
+  // only if we have a chain and it might be a testnet and no faucets and its not localhost
+  const isEnabled = !!chain && !chain.blockExplorers?.length;
+
+  const chainQuery = useQuery({
+    queryKey: ["chain", chain?.id],
+    enabled: isEnabled,
+    retry: false,
+    // 1 hour
+    staleTime: 60 * 60 * 1000,
+    queryFn: async () => {
+      if (!chain) {
+        throw new Error("chain is required");
+      }
+      return convertApiChainToChain(await getChainMetadata(chain));
+    },
   });
+
+  return {
+    explorers: chain?.blockExplorers ?? chainQuery.data?.blockExplorers ?? [],
+    isLoading: isEnabled && chainQuery.isLoading,
+  };
 }

package/src/react/native/ui/components/ChainIcon.tsx

@@ -3,7 +3,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { resolveScheme } from "../../../../utils/ipfs.js";
 import type { Theme } from "../../../core/design-system/index.js";
-import { useChainQuery } from "../../../core/hooks/others/useChainQuery.js";
+import { useChainIconUrl } from "../../../core/hooks/others/useChainQuery.js";
 import { CHAIN_ICON } from "../icons/svgs.js";
 import { RNImage } from "./RNImage.js";
 
@@ -15,9 +15,8 @@ export type ChainIconProps = {
 };
 
 export const ChainIcon = (props: ChainIconProps) => {
-  const chainQuery = useChainQuery(props.chain);
+  const { url } = useChainIconUrl(props.chain);
   const data = useMemo(() => {
-    const url = chainQuery?.data?.icon?.url;
     if (!url) {
       return CHAIN_ICON;
     }
@@ -29,7 +28,7 @@ export const ChainIcon = (props: ChainIconProps) => {
     } catch {
       return CHAIN_ICON;
     }
-  }, [props, chainQuery?.data?.icon?.url]);
+  }, [props, url]);
   return (
     <RNImage
       theme={props.theme}

package/src/react/native/ui/connect/ConnectedModal.tsx

@@ -6,7 +6,7 @@ import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deplo
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
-import { useChainQuery } from "../../../core/hooks/others/useChainQuery.js";
+import { useChainName } from "../../../core/hooks/others/useChainQuery.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
 import { useConnectedWalletDetails } from "../../../core/utils/wallet.js";
 import { fontSize, radius, spacing } from "../../design-system/index.js";
@@ -252,13 +252,13 @@ const WalletMenu = (props: ConnectedModalPropsInner) => {
 const ChainSwitcher = (props: ConnectedModalPropsInner) => {
   const { client, wallet, theme } = props;
   const chain = wallet.getChain();
-  const chainQuery = useChainQuery(chain);
+  const { name } = useChainName(chain);
   return (
     <TouchableOpacity style={styles.walletMenuRow}>
       <ChainIcon client={client} size={32} chain={chain} theme={theme} />
-      {chainQuery.data?.name ? (
+      {name ? (
         <ThemedText theme={theme} type="defaultSemiBold">
-          {chainQuery.data?.name}
+          {name}
         </ThemedText>
       ) : (
         <Skeleton theme={theme} style={{ width: 80, height: 16 }} />

package/src/react/native/ui/connect/SendScreen.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { StyleSheet, View } from "react-native";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Theme } from "../../../core/design-system/index.js";
-import { useChainQuery } from "../../../core/hooks/others/useChainQuery.js";
+import { useChainSymbol } from "../../../core/hooks/others/useChainQuery.js";
 import type {
   SupportedTokens,
   TokenInfo,
@@ -38,7 +38,7 @@ export const SendScreen = (props: SendScreenProps) => {
   const [selectedToken, setSelectedToken] = useState<TokenInfo>();
   const account = useActiveAccount();
   const chain = useActiveWalletChain();
-  const chainIfo = useChainQuery(chain);
+  const { symbol } = useChainSymbol(chain);
   const sendMutation = useSendToken(client);
   const [screen, setScreen] = useState<
     "base" | "tokenList" | "success" | "error"
@@ -193,7 +193,7 @@ export const SendScreen = (props: SendScreenProps) => {
                 type="subtext"
                 style={{ marginRight: spacing.md }}
               >
-                {selectedToken?.symbol || chainIfo.data?.nativeCurrency?.symbol}
+                {selectedToken?.symbol || symbol}
               </ThemedText>
             }
           />

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -34,8 +34,9 @@ import type {
   PayUIOptions,
 } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import {
-  useChainQuery,
-  useChainsQuery,
+  useChainFaucets,
+  useChainIconUrl,
+  useChainName,
 } from "../../../core/hooks/others/useChainQuery.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
 import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
@@ -112,8 +113,6 @@ export const ConnectedWalletDetails: React.FC<{
   const activeAccount = useActiveAccount();
   const walletChain = useActiveWalletChain();
 
-  useChainsQuery(props.chains, 5);
-
   const { ensAvatarQuery, addressOrENS, balanceQuery } =
     useConnectedWalletDetails(
       client,
@@ -256,7 +255,9 @@ function DetailsModal(props: {
     );
 
   const activeWallet = useActiveWallet();
-  const chainQuery = useChainQuery(walletChain);
+  const chainIconQuery = useChainIconUrl(walletChain);
+  const chainNameQuery = useChainName(walletChain);
+  const chainFaucetsQuery = useChainFaucets(walletChain);
 
   const disableSwitchChain = !activeWallet?.switchChain;
 
@@ -289,9 +290,9 @@ function DetailsModal(props: {
           position: "relative",
         }}
       >
-        {chainQuery.data ? (
+        {!chainIconQuery.isLoading ? (
           <ChainIcon
-            chainIcon={chainQuery.data?.icon}
+            chainIconUrl={chainIconQuery.url}
             size={iconSize.md}
             active
             client={client}
@@ -301,11 +302,11 @@ function DetailsModal(props: {
         )}
       </div>
 
-      {chainQuery.isLoading ? (
+      {chainNameQuery.isLoading ? (
         <Skeleton height={"16px"} width={"200px"} />
       ) : (
         <Text color="primaryText" multiline>
-          {chainQuery.data?.name || `Unknown chain #${walletChain?.id}`}
+          {chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
         </Text>
       )}
 
@@ -535,11 +536,11 @@ function DetailsModal(props: {
 
           {/* Request Testnet funds */}
           {(props.detailsModal?.showTestnetFaucet ?? false) &&
-            ((chainQuery.data?.faucets && chainQuery.data.faucets.length > 0) ||
-              chainQuery.data?.chainId === LocalhostChainId) && (
+            (chainFaucetsQuery.faucets.length > 0 ||
+              walletChain?.id === LocalhostChainId) && (
               <MenuLink
                 href={
-                  chainQuery.data?.faucets ? chainQuery.data.faucets[0] : "#"
+                  chainFaucetsQuery.faucets ? chainFaucetsQuery.faucets[0] : "#"
                 }
                 target="_blank"
                 as="a"