Fix custom chain RPC not used if passed via chains prop (#3728)

Co-authored-by: MananTank <[email protected]>

.changeset/spicy-bananas-compare.md

@@ -0,0 +1,7 @@
+---
+"thirdweb": patch
+---
+
+Fix chain with custom RPC not used if the chain object is passed in the `chains` prop to `ConnectButton`, `ConnectEmbed` or `PayEmbed` components.
+
+This also fixes dashboard not using custom chain's RPC since it passes the chain object via `chains` prop

packages/thirdweb/src/chains/utils.ts

@@ -60,6 +60,15 @@ export function defineChain(
   return chain;
 }
 
+/**
+ * @internal
+ */
+export function cacheChains(chains: Chain[]) {
+  for (const chain of chains) {
+    CUSTOM_CHAIN_MAP.set(chain.id, chain);
+  }
+}
+
 /**
  * @internal
  */

packages/thirdweb/src/react/native/ui/connect/ConnectButton.tsx

@@ -9,6 +9,7 @@ import {
   StyleSheet,
   View,
 } from "react-native";
+import { cacheChains } from "../../../../chains/utils.js";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
@@ -67,6 +68,15 @@ export function ConnectButton(props: ConnectButtonProps) {
     ]).start();
   }, []);
 
+  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
+  if (props.chains) {
+    cacheChains(props.chains);
+  }
+
+  if (props.chain) {
+    cacheChains([props.chain]);
+  }
+
   const closeModal = useCallback(() => {
     Animated.parallel([
       Animated.timing(fadeAnim.current, {

packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -2,6 +2,7 @@
 
 import styled from "@emotion/styled";
 import { useEffect, useMemo, useState } from "react";
+import { cacheChains } from "../../../../chains/utils.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
@@ -63,6 +64,15 @@ export function ConnectButton(props: ConnectButtonProps) {
     client: props.client,
   });
 
+  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
+  if (props.chains) {
+    cacheChains(props.chains);
+  }
+
+  if (props.chain) {
+    cacheChains([props.chain]);
+  }
+
   const size = useMemo(() => {
     return !canFitWideModal() || wallets.length === 1
       ? "compact"

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useMemo } from "react";
 import type { Chain } from "../../../../../chains/types.js";
+import { cacheChains } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
@@ -62,6 +63,15 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
   const show =
     !activeAccount || (siweAuth.requiresAuth && !siweAuth.isLoggedIn);
 
+  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
+  if (props.chains) {
+    cacheChains(props.chains);
+  }
+
+  if (props.chain) {
+    cacheChains([props.chain]);
+  }
+
   const wallets = useMemo(
     () =>
       props.wallets ||

packages/thirdweb/src/react/web/ui/PayEmbed.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import type { Chain } from "../../../chains/types.js";
+import { cacheChains } from "../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
@@ -161,6 +162,15 @@ export function PayEmbed(props: PayEmbedProps) {
   const [screen, setScreen] = useState<"buy" | "tx-history">("buy");
   const theme = props.theme || "dark";
 
+  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
+  if (props.connectOptions?.chains) {
+    cacheChains(props.connectOptions?.chains);
+  }
+
+  if (props.connectOptions?.chain) {
+    cacheChains([props.connectOptions?.chain]);
+  }
+
   let content = null;
 
   if (!localeQuery.data) {