thirdweb 5.32.0 → 5.32.1-nightly-49ae575211f8484296d4aac16782e94ae89c437d-20240703000329

package/dist/types/react/web/ui/components/ChainName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChainName.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/components/ChainName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAMnE;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAcA,CAAC"}
+{"version":3,"file":"ChainName.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/components/ChainName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAMnE;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAYA,CAAC"}

package/dist/types/react/web/wallets/ecosystem/EcosystemWalletFormUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EcosystemWalletFormUI.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/wallets/ecosystem/EcosystemWalletFormUI.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAI7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAI5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGnE,MAAM,MAAM,0BAA0B,GAAG;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IACzB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;QAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B,CAAC;IACF,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,0BAA0B,8CAuD5E"}
+{"version":3,"file":"EcosystemWalletFormUI.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/wallets/ecosystem/EcosystemWalletFormUI.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAI7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAI5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGnE,MAAM,MAAM,0BAA0B,GAAG;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IACzB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;QAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B,CAAC;IACF,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,0BAA0B,8CAmD5E"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.32.0";
+export declare const version = "5.32.1-nightly-49ae575211f8484296d4aac16782e94ae89c437d-20240703000329";
 //# sourceMappingURL=version.d.ts.map

package/dist/types/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,2EAA2E,CAAC"}

package/dist/types/wallets/manager/index.d.ts

@@ -54,6 +54,7 @@ export declare function createConnectionManager(storage: AsyncStorage): {
         readonly experimental?: {
             increaseZeroByteCount?: boolean;
         };
+        readonly faucets?: Array<string>;
     } | undefined>;
     switchActiveWalletChain: (chain: Chain) => Promise<void>;
     activeWalletConnectionStatusStore: import("../../reactive/store.js").Store<ConnectionStatus>;

package/dist/types/wallets/manager/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/wallets/manager/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAK7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAExE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGnD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,CAAC;AAM3E,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC3E,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,cAAc,CAAC;IACvB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,YAAY;;;;iCAqBvB,MAAM;+BA+BR,MAAM;oCAuFK,MAAM;sBAjDpB,MAAM,YAAY,qBAAqB;+BA/B5D,MAAM,YACJ,qBAAqB;;;;;;;;;;;;gBA9F0B,CAAC;kBAC5C,CAAA;oBAAsB,CAAC;;;;;kBAEnB,CAAC;;;;iCACK,CAAC;;;qCA4MmB,KAAK;;;oCA/IZ,MAAM;EA+L9C;AAED;;;GAGG;AACH,wBAAsB,2BAA2B,CAC/C,OAAO,EAAE,YAAY,GACpB,OAAO,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAU1B;AAED;;GAEG;AACH,wBAAsB,uBAAuB,CAC3C,OAAO,EAAE,YAAY,GACpB,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAW1B;AAED;;GAEG;AACH,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,YAAY,GACpB,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,CAWvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/wallets/manager/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAK7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAExE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGnD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,CAAC;AAM3E,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC3E,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,cAAc,CAAC;IACvB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,YAAY;;;;iCAqBvB,MAAM;+BA+BR,MAAM;oCAuFK,MAAM;sBAjDpB,MAAM,YAAY,qBAAqB;+BA/B5D,MAAM,YACJ,qBAAqB;;;;;;;;;;;;gBA9FyB,CAAC;kBAC7C,CAAC;oBAAsB,CAAC;;;;;kBAEnB,CAAC;;;;iCACK,CAAC;;;;qCA4MoB,KAAK;;;oCA/IZ,MAAM;EA+L9C;AAED;;;GAGG;AACH,wBAAsB,2BAA2B,CAC/C,OAAO,EAAE,YAAY,GACpB,OAAO,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAU1B;AAED;;GAEG;AACH,wBAAsB,uBAAuB,CAC3C,OAAO,EAAE,YAAY,GACpB,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAW1B;AAED;;GAEG;AACH,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,YAAY,GACpB,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,CAWvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.32.0",
+  "version": "5.32.1-nightly-49ae575211f8484296d4aac16782e94ae89c437d-20240703000329",
   "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/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"