Merge branch 'greg/viem-ox' of https://github.com/thirdweb-dev/js into greg/viem-ox

Author: gregfromstl

.changeset/odd-hats-give.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+respect custom RPC urls passed directly

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -93,14 +93,14 @@ export const CustomConnectWallet = (props: {
 
   const chainSections: NetworkSelectorProps["sections"] = useMemo(() => {
     return [
-      {
-        label: "Favorites",
-        chains: favoriteChainsWithMetadata,
-      },
       {
         label: "Recent",
         chains: recentlyUsedChainsWithMetadata,
       },
+      {
+        label: "Favorites",
+        chains: favoriteChainsWithMetadata,
+      },
       {
         label: "Popular",
         chains: popularChainsWithMetadata,

apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx

@@ -62,9 +62,12 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
     values: {
       name: editingChain?.name || prefillSlug || "",
       rpcUrl:
-        editingChain && editingChain?.status !== "deprecated"
-          ? getDashboardChainRpc(editingChain.chainId, editingChain)
-          : "",
+        (!editingChain || editingChain.status === "deprecated"
+          ? ""
+          : // if chain is custom or modified, show the rpc as is
+            editingChain.isCustom || editingChain.isModified
+            ? editingChain.rpc[0]
+            : getDashboardChainRpc(editingChain.chainId, editingChain)) || "",
       chainId: editingChain?.chainId
         ? `${editingChain?.chainId}`
         : prefillChainId || "",

apps/dashboard/src/components/configure-networks/Form/NetworkIdInput.tsx

@@ -8,9 +8,7 @@ export const NetworkIDInput: React.FC<{
   form: UseFormReturn<NetworkConfigFormData>;
   disabled?: boolean;
 }> = ({ form, disabled }) => {
-  const slug = form.watch("slug");
   const { slugToChain } = useAllChainsData();
-  const existingChain = slugToChain.get(slug);
 
   return (
     <FormFieldSetup
@@ -29,12 +27,7 @@ export const NetworkIDInput: React.FC<{
       }
       errorMessage={
         form.formState.errors.slug?.type === "taken" ? (
-          <>
-            Can not use {`"${slug}"`}.{" "}
-            {slug &&
-              existingChain &&
-              `It is being used by "${existingChain.name}"`}
-          </>
+          <>Slug is taken by other network</>
         ) : undefined
       }
     >
@@ -59,7 +52,13 @@ export const NetworkIDInput: React.FC<{
                 return true;
               }
 
-              return !slugToChain.has(_slug);
+              const chainForSlug = slugToChain.get(_slug);
+
+              if (chainForSlug && !chainForSlug.isCustom) {
+                return false;
+              }
+
+              return true;
             },
           },
         })}

packages/thirdweb/src/chains/utils.test.ts

@@ -23,6 +23,7 @@ import {
   getChainDecimals,
   getChainNativeCurrencyName,
   getChainSymbol,
+  getRpcUrlForChain,
 } from "./utils.js";
 
 const legacyChain: LegacyChain = {
@@ -306,4 +307,75 @@ describe("defineChain", () => {
       testnet: undefined,
     });
   });
+
+  describe("getRpcUrlForChain", () => {
+    it("should construct RPC URL using chain ID and client ID when chain is a number", () => {
+      const options = {
+        client: { ...TEST_CLIENT, clientId: "test-client-id" },
+        chain: 1,
+      };
+      const result = getRpcUrlForChain(options);
+      expect(result).toBe("https://1.rpc.thirdweb.com/test-client-id");
+    });
+
+    it("should return the custom RPC URL if provided", () => {
+      const options = {
+        client: { ...TEST_CLIENT, clientId: "test-client-id" },
+        chain: {
+          id: 1,
+          rpc: "https://custom-rpc.com",
+        },
+      };
+      const result = getRpcUrlForChain(options);
+      expect(result).toBe("https://custom-rpc.com");
+    });
+
+    it("should add client ID to thirdweb RPC URL", () => {
+      const options = {
+        client: { ...TEST_CLIENT, clientId: "test-client-id" },
+        chain: {
+          id: 1,
+          rpc: "https://1.rpc.thirdweb.com",
+        },
+      };
+      const result = getRpcUrlForChain(options);
+      expect(result).toBe("https://1.rpc.thirdweb.com/test-client-id");
+    });
+
+    it("should honor client ID passed directly in rpc field", () => {
+      const options = {
+        client: { ...TEST_CLIENT, clientId: "test-client-id" },
+        chain: {
+          id: 1,
+          rpc: "https://1.rpc.thirdweb.com/abc",
+        },
+      };
+      const result = getRpcUrlForChain(options);
+      expect(result).toBe("https://1.rpc.thirdweb.com/abc");
+    });
+
+    it("should replace template string in rpc url", () => {
+      const options = {
+        client: { ...TEST_CLIENT, clientId: "test-client-id" },
+        chain: {
+          id: 1,
+          rpc: "https://1.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+        },
+      };
+      const result = getRpcUrlForChain(options);
+      expect(result).toBe("https://1.rpc.thirdweb.com/test-client-id");
+    });
+
+    it("should return the RPC URL without modification if it's not a thirdweb URL", () => {
+      const options = {
+        client: { ...TEST_CLIENT, clientId: "test-client-id" },
+        chain: {
+          id: 1,
+          rpc: "https://custom-rpc.com",
+        },
+      };
+      const result = getRpcUrlForChain(options);
+      expect(result).toBe("https://custom-rpc.com");
+    });
+  });
 });

packages/thirdweb/src/chains/utils.ts

@@ -193,7 +193,9 @@ export function getRpcUrlForChain(options: GetRpcUrlForChainOptions): string {
     const rpcUrl = new URL(
       options.chain.rpc.replace(DEFAULT_RPC_URL, baseRpcUrl),
     );
-    rpcUrl.pathname = `/${options.client.clientId}`;
+    if (rpcUrl.pathname === "/" || rpcUrl.pathname.startsWith("/$")) {
+      rpcUrl.pathname = `/${options.client.clientId}`;
+    }
     return rpcUrl.toString();
   }
   return rpc;