Cache custom chains internally (#3040)

gregfromstl · web-flow · commit ce4547501f9d · 2024-05-16T20:11:31.000-07:00
diff --git a/.changeset/dry-jobs-add.md b/.changeset/dry-jobs-add.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fixes caching issue when using `defineChain`
diff --git a/packages/thirdweb/src/auth/core/verify-login-payload.ts b/packages/thirdweb/src/auth/core/verify-login-payload.ts
@@ -1,4 +1,4 @@
-import { defineChain } from "../../chains/utils.js";
+import { getCachedChain } from "../../chains/utils.js";
 import { verifySignature } from "../verifySignature.js";
 import { DEFAULT_LOGIN_STATEMENT, DEFAULT_LOGIN_VERSION } from "./constants.js";
 import { createLoginMessage } from "./create-login-message.js";
@@ -126,7 +126,7 @@ export function verifyLoginPayload(options: AuthOptions) {
       signature: signature,
       address: payload.address,
       chain: payload.chain_id
-        ? defineChain(Number.parseInt(payload.chain_id))
+        ? getCachedChain(Number.parseInt(payload.chain_id))
         : undefined,
       client: options.client,
     });
diff --git a/packages/thirdweb/src/chains/utils.test.ts b/packages/thirdweb/src/chains/utils.test.ts
@@ -1,5 +1,11 @@
 import { defineChain as viemChain } from "viem";
 import { describe, expect, it } from "vitest";
+import { ANVIL_CHAIN } from "../../test/src/chains.js";
+import { TEST_CLIENT } from "../../test/src/test-clients.js";
+import { ANVIL_PKEY_A, TEST_ACCOUNT_B } from "../../test/src/test-wallets.js";
+import { getRpcClient, prepareTransaction } from "../exports/thirdweb.js";
+import { toSerializableTransaction } from "../transaction/actions/to-serializable-transaction.js";
+import { privateKeyToAccount } from "../wallets/private-key.js";
 import { defineChain } from "./utils.js";
 
 describe("defineChain", () => {
@@ -29,4 +35,47 @@ describe("defineChain", () => {
     expect(thirdwebViem.nativeCurrency).toEqual(zoraViem.nativeCurrency);
     expect(thirdwebViem.rpc).toEqual(zoraViem.rpcUrls.default.http[0]);
   });
+
+  it("should not cache custom chains", async () => {
+    const chain = defineChain({
+      id: 123456789,
+      name: "Test",
+      rpc: "https://rpc.test.com",
+    });
+    expect(defineChain(123456789).rpc).not.toEqual(chain.rpc);
+  });
+
+  it("should overwrite custom chains with same id", async () => {
+    const oldChain = defineChain({
+      id: ANVIL_CHAIN.id,
+      name: "Test",
+      rpc: "FAIL",
+    }); // this should get ignored
+    getRpcClient({ chain: oldChain, client: TEST_CLIENT });
+
+    const account = privateKeyToAccount({
+      privateKey: ANVIL_PKEY_A,
+      client: TEST_CLIENT,
+    });
+    const chain2 = defineChain({
+      id: ANVIL_CHAIN.id,
+      name: "Test2",
+      rpc: ANVIL_CHAIN.rpc,
+    }); // this should be the rpc used
+
+    const tx = prepareTransaction({
+      to: TEST_ACCOUNT_B.address,
+      value: 100n,
+      chain: chain2,
+      client: TEST_CLIENT,
+    });
+
+    const serializableTransaction = await toSerializableTransaction({
+      transaction: tx,
+      from: account.address,
+    });
+
+    await account.sendTransaction(serializableTransaction);
+    expect(defineChain(1).rpc).not.toEqual(chain2.rpc);
+  });
 });
diff --git a/packages/thirdweb/src/chains/utils.ts b/packages/thirdweb/src/chains/utils.ts
@@ -10,6 +10,8 @@ import type {
   LegacyChain,
 } from "./types.js";
 
+const CUSTOM_CHAIN_MAP = new Map<number, Chain>();
+
 /**
  * Defines a chain with the given options.
  * @param options The options for the chain.
@@ -31,7 +33,10 @@ export function defineChain(
   options: number | ChainOptions | ViemChain | LegacyChain,
 ): Chain {
   if (typeof options === "number") {
-    return { id: options, rpc: `https://${options}.rpc.thirdweb.com` } as const;
+    return {
+      id: options,
+      rpc: `https://${options}.rpc.thirdweb.com`,
+    } as const;
   }
   if (isViemChain(options)) {
     return convertViemChain(options);
@@ -44,7 +49,23 @@ export function defineChain(
   if (!rpc) {
     rpc = `https://${options.id}.rpc.thirdweb.com`;
   }
-  return { ...options, rpc } as const;
+  const chain = { ...options, rpc } as const;
+  CUSTOM_CHAIN_MAP.set(options.id, chain);
+  return chain;
+}
+
+/**
+ * @internal
+ */
+export function getCachedChain(id: number) {
+  if (CUSTOM_CHAIN_MAP.has(id)) {
+    return CUSTOM_CHAIN_MAP.get(id) as Chain;
+  }
+  const chain = {
+    id: id,
+    rpc: `https://${id}.rpc.thirdweb.com`,
+  } as const;
+  return chain;
 }
 
 function isLegacyChain(
diff --git a/packages/thirdweb/src/cli/commands/generate/generate.ts b/packages/thirdweb/src/cli/commands/generate/generate.ts
@@ -5,7 +5,7 @@ import {
   formatAbiItem,
   parseAbiItem,
 } from "abitype";
-import { defineChain } from "../../../chains/utils.js";
+import { getCachedChain } from "../../../chains/utils.js";
 import { createThirdwebClient } from "../../../client/client.js";
 import { resolveAbiFromContractApi } from "../../../contract/actions/resolve-abi.js";
 import { getContract } from "../../../contract/contract.js";
@@ -26,7 +26,7 @@ export async function generate(input: ChainIdAndContract) {
   }
   const contract = getContract({
     client,
-    chain: defineChain(Number.parseInt(chainId)),
+    chain: getCachedChain(Number.parseInt(chainId)),
     address: contractAddress,
   });
   const abi = await resolveAbiFromContractApi(contract);
diff --git a/packages/thirdweb/src/pay/buyWithCrypto/getQuote.ts b/packages/thirdweb/src/pay/buyWithCrypto/getQuote.ts
@@ -1,5 +1,5 @@
 import type { Hash } from "viem";
-import { defineChain } from "../../chains/utils.js";
+import { getCachedChain } from "../../chains/utils.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import { getContract } from "../../contract/contract.js";
 import {
@@ -277,7 +277,7 @@ export async function getBuyWithCryptoQuote(
 
     const swapRoute: BuyWithCryptoQuote = {
       transactionRequest: {
-        chain: defineChain(data.transactionRequest.chainId),
+        chain: getCachedChain(data.transactionRequest.chainId),
         client: params.client,
         data: data.transactionRequest.data as Hash,
         to: data.transactionRequest.to,
@@ -290,7 +290,7 @@ export async function getBuyWithCryptoQuote(
             contract: getContract({
               client: params.client,
               address: data.approval.tokenAddress,
-              chain: defineChain(data.approval.chainId),
+              chain: getCachedChain(data.approval.chainId),
             }),
             spender: data.approval?.spenderAddress,
             amountWei: BigInt(data.approval.amountWei),
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx
@@ -4,7 +4,7 @@ import {
   TriangleDownIcon,
 } from "@radix-ui/react-icons";
 import { useMemo } from "react";
-import { defineChain } from "../../../../../../../chains/utils.js";
+import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
 import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
@@ -104,13 +104,13 @@ export function FiatSteps(props: {
   const isPartialSuccess = statusMeta?.progressStatus === "partialSuccess";
 
   const toChain = useMemo(
-    () => defineChain(toTokenMeta.chainId),
+    () => getCachedChain(toTokenMeta.chainId),
     [toTokenMeta.chainId],
   );
 
   const destinationChain = useMemo(() => {
     if (props.status?.status !== "NOT_FOUND" && props.status?.destination) {
-      return defineChain(props.status?.destination.token.chainId);
+      return getCachedChain(props.status?.destination.token.chainId);
     }
 
     return undefined;
@@ -130,7 +130,7 @@ export function FiatSteps(props: {
   }, [toTokenMeta]);
 
   const onRampChain = useMemo(
-    () => defineChain(onRampTokenMeta.chainId),
+    () => getCachedChain(onRampTokenMeta.chainId),
     [onRampTokenMeta.chainId],
   );
 
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx
@@ -1,5 +1,5 @@
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
-import { defineChain } from "../../../../../../../chains/utils.js";
+import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
@@ -35,7 +35,7 @@ export function OnRampTxDetailsTable(props: {
     txHash?: string;
   };
 }) {
-  const onRampChainQuery = useChainQuery(defineChain(props.token.chainId));
+  const onRampChainQuery = useChainQuery(getCachedChain(props.token.chainId));
   const onrampTxHash = props.statusMeta?.txHash;
 
   const lineSpacer = (
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { defineChain } from "../../../../../../../chains/utils.js";
+import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
@@ -28,12 +28,12 @@ export function SwapFlow(props: SwapFlowProps) {
   const quote = props.buyWithCryptoQuote;
 
   const fromChain = useMemo(
-    () => defineChain(quote.swapDetails.fromToken.chainId),
+    () => getCachedChain(quote.swapDetails.fromToken.chainId),
     [quote],
   );
 
   const toChain = useMemo(
-    () => defineChain(quote.swapDetails.toToken.chainId),
+    () => getCachedChain(quote.swapDetails.toToken.chainId),
     [quote],
   );
 
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistoryButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistoryButton.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { defineChain } from "../../../../../../../chains/utils.js";
+import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { ChainName } from "../../../../components/ChainName.js";
@@ -47,7 +47,7 @@ export function BuyTxHistoryButton(props: {
       >
         <TokenIcon
           client={props.client}
-          chain={defineChain(props.txInfo.status.quote.toToken.chainId)}
+          chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
           size="md"
           token={{
             address: props.txInfo.status.quote.toToken.tokenAddress,
@@ -97,7 +97,7 @@ export function BuyTxHistoryButton(props: {
             }}
           >
             <ChainName
-              chain={defineChain(props.txInfo.status.quote.toToken.chainId)}
+              chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
               size="xs"
               client={props.client}
             />
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/SwapDetailsScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/SwapDetailsScreen.tsx
@@ -1,5 +1,5 @@
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
-import { defineChain } from "../../../../../../../chains/utils.js";
+import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import type { ValidBuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
@@ -166,8 +166,8 @@ export function SwapTxDetailsTable(
   const fromChainId = fromToken.chainId;
   const toChainId = toToken.chainId;
 
-  const fromChainQuery = useChainQuery(defineChain(fromChainId));
-  const toChainQuery = useChainQuery(defineChain(toChainId));
+  const fromChainQuery = useChainQuery(getCachedChain(fromChainId));
+  const toChainQuery = useChainQuery(getCachedChain(toChainId));
 
   const lineSpacer = (
     <>
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TokenInfoRow.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TokenInfoRow.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { defineChain } from "../../../../../../../chains/utils.js";
+import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
@@ -15,7 +15,10 @@ export function TokenInfoRow(props: {
   label: string;
   client: ThirdwebClient;
 }) {
-  const chainObj = useMemo(() => defineChain(props.chainId), [props.chainId]);
+  const chainObj = useMemo(
+    () => getCachedChain(props.chainId),
+    [props.chainId],
+  );
   const chainQuery = useChainQuery(chainObj);
 
   return (
diff --git a/packages/thirdweb/src/rpc/rpc.ts b/packages/thirdweb/src/rpc/rpc.ts
@@ -62,8 +62,11 @@ export function getRpcClient(
 ): EIP1193RequestFn<EIP1474Methods> {
   const rpcClientMap = getRpcClientMap(options.client);
   const chainId = options.chain.id;
-  if (rpcClientMap.has(chainId)) {
-    return rpcClientMap.get(chainId) as EIP1193RequestFn<EIP1474Methods>;
+
+  if (rpcClientMap.has(options.chain.rpc)) {
+    return rpcClientMap.get(
+      options.chain.rpc,
+    ) as EIP1193RequestFn<EIP1474Methods>;
   }
 
   const rpcClient: EIP1193RequestFn<EIP1474Methods> = (() => {
diff --git a/packages/thirdweb/src/utils/ens/avatar.ts b/packages/thirdweb/src/utils/ens/avatar.ts
@@ -1,4 +1,4 @@
-import { defineChain } from "../../chains/utils.js";
+import { getCachedChain } from "../../chains/utils.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import { getContract } from "../../contract/contract.js";
 import { isAddress } from "../address.js";
@@ -66,7 +66,7 @@ async function parseNftUri(options: AvatarOptions): Promise<string | null> {
   if (!tokenID) {
     throw new Error("Token ID not found");
   }
-  const chain = defineChain(Number(chainID));
+  const chain = getCachedChain(Number(chainID));
   const contract = getContract({
     client: options.client,
     chain,
diff --git a/packages/thirdweb/src/wallets/coinbase/coinbaseSDKWallet.ts b/packages/thirdweb/src/wallets/coinbase/coinbaseSDKWallet.ts
@@ -17,7 +17,7 @@ import { normalizeChainId } from "../utils/normalizeChainId.js";
 
 import type { Preference } from "@coinbase/wallet-sdk/dist/core/provider/interface.js";
 import type { Chain } from "../../chains/types.js";
-import { defineChain, getChainMetadata } from "../../chains/utils.js";
+import { getCachedChain, getChainMetadata } from "../../chains/utils.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import { getAddress } from "../../utils/address.js";
 import {
@@ -354,7 +354,7 @@ function onConnect(
   }
 
   function onChainChanged(newChainId: string) {
-    const newChain = defineChain(normalizeChainId(newChainId));
+    const newChain = getCachedChain(normalizeChainId(newChainId));
     emitter.emit("chainChanged", newChain);
   }
 
@@ -398,7 +398,7 @@ export async function connectCoinbaseWalletSDK(
   let chain =
     options.chain && options.chain.id === chainId
       ? options.chain
-      : defineChain(chainId);
+      : getCachedChain(chainId);
   // Switch to chain if provided
   if (
     connectedChainId &&
@@ -440,7 +440,7 @@ export async function autoConnectCoinbaseWalletSDK(
   const chain =
     options.chain && options.chain.id === chainId
       ? options.chain
-      : defineChain(chainId);
+      : getCachedChain(chainId);
 
   return onConnect(address, chain, provider, emitter);
 }
diff --git a/packages/thirdweb/src/wallets/in-app/implementations/lib/core/in-app-wallet.ts b/packages/thirdweb/src/wallets/in-app/implementations/lib/core/in-app-wallet.ts
@@ -1,6 +1,6 @@
 import type * as ethers5 from "ethers5";
 import type { Hex, TypedDataDefinition } from "viem";
-import { defineChain } from "../../../../../chains/utils.js";
+import { getCachedChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { eth_sendRawTransaction } from "../../../../../rpc/actions/eth_sendRawTransaction.js";
 import { getRpcClient } from "../../../../../rpc/rpc.js";
@@ -224,7 +224,7 @@ export class InAppWallet {
       async sendTransaction(tx) {
         const rpcRequest = getRpcClient({
           client,
-          chain: defineChain(tx.chainId),
+          chain: getCachedChain(tx.chainId),
         });
         const signedTx = await _signTransaction(tx);
         const transactionHash = await eth_sendRawTransaction(
diff --git a/packages/thirdweb/src/wallets/injected/index.ts b/packages/thirdweb/src/wallets/injected/index.ts
diff --git a/packages/thirdweb/src/wallets/private-key.ts b/packages/thirdweb/src/wallets/private-key.ts
diff --git a/packages/thirdweb/src/wallets/wallet-connect/index.ts b/packages/thirdweb/src/wallets/wallet-connect/index.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"thirdweb": patch
 +---
++
 +Fixes caching issue when using `defineChain`