hotfix(website): use builder provided rpcs for registry requests

.github/workflows/commitlint-pr.yml

@@ -24,3 +24,10 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           validateSingleCommit: false
+          types: |
+            hotfix
+            feat
+            fix
+            chore
+            docs
+            test

packages/website/src/features/Deploy/PublishUtility.tsx

@@ -28,7 +28,7 @@ import {
 import { useMutation } from '@tanstack/react-query';
 import {
   CannonStorage,
-  DEFAULT_REGISTRY_ADDRESS,
+  DEFAULT_REGISTRY_CONFIG,
   FallbackRegistry,
   InMemoryRegistry,
   OnChainRegistry,
@@ -81,7 +81,7 @@ export default function PublishUtility(props: {
       viem.isAddressEqual(publisher, wc.data?.account.address)
   );
 
-  const { transports, getExplorerUrl } = useCannonChains();
+  const { getChainById, customTransports, getExplorerUrl } = useCannonChains();
 
   const prepareAndPublishPackage = async (publishChainId: number) => {
     if (!wc.data) {
@@ -90,25 +90,23 @@ export default function PublishUtility(props: {
 
     const [walletAddress] = await wc.data.getAddresses();
 
-    const targetRegistry = new FallbackRegistry(
-      [
-        new OnChainRegistry({
-          signer: { address: walletAddress, wallet: wc.data as any },
-          address: DEFAULT_REGISTRY_ADDRESS,
-          provider: viem.createPublicClient({
-            chain: optimism,
-            transport: transports[optimism.id] || viem.http(),
-          }) as any, // TODO: fix type
-        }),
-        new OnChainRegistry({
-          signer: { address: walletAddress, wallet: wc.data as any },
-          address: DEFAULT_REGISTRY_ADDRESS,
-          provider: viem.createPublicClient({
-            chain: mainnet,
-            transport: transports[mainnet.id] || viem.http(),
-          }) as any, // TODO: fix type
+    const onChainRegistries = DEFAULT_REGISTRY_CONFIG.map((config) => {
+      const rpcUrl = config.rpcUrl.find(
+        (url) => url.startsWith('https://') || url.startsWith('wss://')
+      );
+
+      return new OnChainRegistry({
+        signer: { address: walletAddress, wallet: wc.data as any },
+        address: config.address,
+        provider: viem.createPublicClient({
+          chain: getChainById(config.chainId),
+          transport: customTransports[config.chainId] || viem.http(rpcUrl),
         }),
-      ],
+      });
+    });
+
+    const targetRegistry = new FallbackRegistry(
+      onChainRegistries,
       publishChainId === 10 ? 0 : 1
     );
 

packages/website/src/hooks/registry.ts

@@ -1,5 +1,5 @@
 import { useCannonChains } from '@/providers/CannonProvidersProvider';
-import { DEFAULT_REGISTRY_ADDRESS, DEFAULT_REGISTRY_CONFIG, OnChainRegistry } from '@usecannon/builder';
+import { DEFAULT_REGISTRY_CONFIG, OnChainRegistry } from '@usecannon/builder';
 import { useEffect, useState } from 'react';
 import * as viem from 'viem';
 
@@ -11,18 +11,20 @@ type Publishers = {
 
 export function useCannonPackagePublishers(packageName?: string) {
   const [publishers, setPublishers] = useState<Publishers[]>([]);
-  const { getChainById } = useCannonChains();
+  const { getChainById, customTransports } = useCannonChains();
 
   useEffect(() => {
     if (!packageName) return setPublishers([]);
 
     const onChainRegistries = DEFAULT_REGISTRY_CONFIG.map((config) => {
+      const rpcUrl = config.rpcUrl.find((url) => url.startsWith('https://') || url.startsWith('wss://'));
+
       return new OnChainRegistry({
-        address: DEFAULT_REGISTRY_ADDRESS,
+        address: config.address,
         provider: viem.createPublicClient({
           chain: getChainById(config.chainId),
-          transport: viem.http(),
-        }) as any, // TODO: fix type
+          transport: customTransports[config.chainId] || viem.http(rpcUrl),
+        }),
       });
     });
 

packages/website/src/providers/CannonProvidersProvider.tsx

@@ -8,14 +8,7 @@ import React, {
   useContext,
   useMemo,
 } from 'react';
-import {
-  Chain,
-  Hash,
-  http,
-  HttpTransport,
-  isAddress,
-  createPublicClient,
-} from 'viem';
+import * as viem from 'viem';
 // eslint-disable-next-line no-restricted-imports
 import * as chains from 'viem/chains';
 import sortBy from 'lodash/sortBy';
@@ -27,11 +20,12 @@ import { useQuery } from '@tanstack/react-query';
 
 type CustomProviders =
   | {
-      chains: Chain[];
+      chains: viem.Chain[];
       chainMetadata: Record<number, { color: string }>;
-      transports: Record<number, HttpTransport>;
-      getChainById: (chainId: number) => Chain | undefined;
-      getExplorerUrl: (chainId: number, hash: Hash) => string;
+      transports: Record<number, viem.HttpTransport>;
+      customTransports: Record<number, viem.HttpTransport>;
+      getChainById: (chainId: number) => viem.Chain | undefined;
+      getExplorerUrl: (chainId: number, hash: viem.Hash) => string;
     }
   | undefined;
 const ProvidersContext = createContext<CustomProviders>(undefined);
@@ -40,7 +34,7 @@ const cannonNetwork = {
   ...chains.localhost,
   id: 13370,
   name: 'Cannon',
-} as Chain;
+} as viem.Chain;
 
 const chainMetadata = {
   [chains.arbitrum.id]: {
@@ -93,11 +87,11 @@ const chainMetadata = {
 export const supportedChains = [cannonNetwork, ...Object.values(chains)];
 
 export const defaultTransports = supportedChains.reduce((transports, chain) => {
-  transports[chain.id] = http();
+  transports[chain.id] = viem.http();
   return transports;
-}, {} as Record<number, HttpTransport>);
+}, {} as Record<number, viem.HttpTransport>);
 
-type RpcUrlAndTransport = { rpcUrl: string; transport: HttpTransport };
+type RpcUrlAndTransport = { rpcUrl: string; transport: viem.HttpTransport };
 
 async function _getProvidersChainId({ queryKey }: { queryKey: string[] }) {
   const [, ...providerUrls] = queryKey;
@@ -107,8 +101,8 @@ async function _getProvidersChainId({ queryKey }: { queryKey: string[] }) {
   }
 
   const allPromises = providerUrls.map(async (rpcUrl) => {
-    const client = createPublicClient({
-      transport: http(rpcUrl),
+    const client = viem.createPublicClient({
+      transport: viem.http(rpcUrl),
     });
     const chainId = await client.getChainId();
     return {
@@ -122,7 +116,7 @@ async function _getProvidersChainId({ queryKey }: { queryKey: string[] }) {
     if (r.status === 'fulfilled') {
       transports[+r.value.chainId] = {
         rpcUrl: r.value.rpcUrl,
-        transport: http(r.value.rpcUrl),
+        transport: viem.http(r.value.rpcUrl),
       };
     }
 
@@ -131,7 +125,7 @@ async function _getProvidersChainId({ queryKey }: { queryKey: string[] }) {
 }
 
 function _getAllChains(verifiedProviders?: Record<number, RpcUrlAndTransport>) {
-  const customChains: Chain[] = cloneDeep(supportedChains);
+  const customChains: viem.Chain[] = cloneDeep(supportedChains);
 
   if (!verifiedProviders || isEmpty(verifiedProviders)) {
     return customChains;
@@ -177,12 +171,28 @@ function _getAllTransports(
   return customTransports;
 }
 
-function _getChainById(allChains: Chain[], chainId: number) {
+function _getCustomTransports(
+  verifiedProviders?: Record<number, RpcUrlAndTransport>
+) {
+  const customTransports: { [chainId: number]: viem.HttpTransport } = {};
+
+  for (const [chainId, provider] of Object.entries(verifiedProviders || {})) {
+    customTransports[+chainId] = provider.transport;
+  }
+
+  return customTransports;
+}
+
+function _getChainById(allChains: viem.Chain[], chainId: number) {
   const chain = allChains.find((c) => c.id === +chainId);
   return chain;
 }
 
-const _getExplorerUrl = (allChains: Chain[], chainId: number, hash: Hash) => {
+const _getExplorerUrl = (
+  allChains: viem.Chain[],
+  chainId: number,
+  hash: viem.Hash
+) => {
   const chain = _getChainById(allChains, +chainId);
   if (!chain) return externalLinks.ETHERSCAN;
 
@@ -191,7 +201,7 @@ const _getExplorerUrl = (allChains: Chain[], chainId: number, hash: Hash) => {
 
   const url = explorer?.url || externalLinks.ETHERSCAN;
 
-  const type = isAddress(hash) ? 'address' : 'tx';
+  const type = viem.isAddress(hash) ? 'address' : 'tx';
   return `${url}/${type}/${hash}`;
 };
 
@@ -208,10 +218,11 @@ export const CannonProvidersProvider: React.FC<PropsWithChildren> = ({
   const chainsUrls = Object.values(verifiedProviders || {}).map(
     (v) => v.rpcUrl
   );
-  const [_allChains, _allTransports] = useMemo(
+  const [_allChains, _allTransports, _customTransports] = useMemo(
     () => [
       _getAllChains(verifiedProviders),
       _getAllTransports(verifiedProviders),
+      _getCustomTransports(verifiedProviders),
     ],
     [JSON.stringify(sortBy(chainsUrls))]
   );
@@ -222,8 +233,9 @@ export const CannonProvidersProvider: React.FC<PropsWithChildren> = ({
         chains: _allChains,
         chainMetadata,
         transports: _allTransports,
+        customTransports: _customTransports,
         getChainById: (chainId: number) => _getChainById(_allChains, chainId),
-        getExplorerUrl: (chainId: number, hash: Hash) =>
+        getExplorerUrl: (chainId: number, hash: viem.Hash) =>
           _getExplorerUrl(_allChains, chainId, hash),
       }}
     >

packages/website/src/providers/CannonRegistryProvider.tsx

@@ -3,7 +3,6 @@
 import { inMemoryRegistry } from '@/helpers/cannon';
 import { useCannonChains } from '@/providers/CannonProvidersProvider';
 import {
-  DEFAULT_REGISTRY_ADDRESS,
   DEFAULT_REGISTRY_CONFIG,
   FallbackRegistry,
   OnChainRegistry,
@@ -20,17 +19,18 @@ type Props = {
   children: React.ReactNode;
 };
 export const CannonRegistryProvider: React.FC<Props> = ({ children }) => {
-  const { getChainById, transports } = useCannonChains();
-  const onChainRegistries = DEFAULT_REGISTRY_CONFIG.map(
-    (registry) => registry.chainId
-  ).map((chainId: number) => {
-    const chain = getChainById(chainId);
+  const { getChainById, customTransports } = useCannonChains();
+
+  const onChainRegistries = DEFAULT_REGISTRY_CONFIG.map((config) => {
+    const rpcUrl = config.rpcUrl.find(
+      (url) => url.startsWith('https://') || url.startsWith('wss://')
+    );
 
     return new OnChainRegistry({
-      address: DEFAULT_REGISTRY_ADDRESS,
+      address: config.address,
       provider: createPublicClient({
-        chain,
-        transport: transports[chainId] || http(),
+        chain: getChainById(config.chainId),
+        transport: customTransports[config.chainId] || http(rpcUrl),
       }),
     });
   });