feat: use rpc-handler

static/constants.ts

@@ -0,0 +1,30 @@
+// these are used as backups in case @ubiquity-dao/rpc-handler fails to fetch the fastest provider
+export const providersUrl: { [key: string]: string } = {
+  100: "https://rpc.gnosischain.com",
+  1: "https://eth.llamarpc.com",
+  137: "https://polygon.llamarpc.com",
+  10: "https://optimism.llamarpc.com",
+  42161: "https://arbitrum.llamarpc.com",
+  8453: "https://base.llamarpc.com",
+  56: "https://binance.llamarpc.com",
+  81457: "https://blast.drpc.org",
+  324: "https://mainnet.era.zksync.io",
+  43114: "https://rpc.ankr.com/avalanche",
+  480: "https://rpc.worldchain.network",
+  31337: "http://127.0.0.1:8545",
+};
+
+export const explorersUrl: { [key: string]: string } = {
+  100: "https://gnosisscan.io",
+  1: "https://etherscan.io",
+  137: "https://polygonscan.com",
+  10: "https://optimistic.etherscan.io",
+  42161: "https://arbiscan.io",
+  8453: "https://basescan.org",
+  56: "https://bscscan.com",
+  81457: "https://blastscan.io",
+  324: "https://explorer.zksync.io",
+  43114: "https://snowtrace.io",
+  480: "https://explorer.worldchain.network",
+  31337: "http://127.0.0.1:8545",
+};

static/main.ts

@@ -5,6 +5,8 @@ import { ethers } from "ethers";
 import { renderErrorInModal } from "./display-popup-modal";
 import { updateTokenDropdown } from "./populate-dropdown";
 import { isApprovalButtonsValid, setupApproveButton, setupRevokeButton, setupButtonValidityListener } from "./handle-approval";
+import { providersUrl } from "./constants";
+import { useRpcHandler } from "./use-rpc-handler";
 
 // all unhandled errors are caught and displayed in a modal
 window.addEventListener("error", (event: ErrorEvent) => renderErrorInModal(event.error));
@@ -21,35 +23,6 @@ const metadata = {
   url: "https://onboard.ubq.fi",
   icons: ["https://avatars.githubusercontent.com/u/76412717"],
 };
-export const providersUrl: { [key: string]: string } = {
-  100: "https://rpc.gnosischain.com",
-  1: "https://eth.llamarpc.com",
-  137: "https://polygon.llamarpc.com",
-  10: "https://optimism.llamarpc.com",
-  42161: "https://arbitrum.llamarpc.com",
-  8453: "https://base.llamarpc.com",
-  56: "https://binance.llamarpc.com",
-  81457: "https://blast.drpc.org",
-  324: "https://mainnet.era.zksync.io",
-  43114: "https://rpc.ankr.com/avalanche",
-  480: "https://rpc.worldchain.network",
-  31337: "http://127.0.0.1:8545",
-};
-
-export const explorersUrl: { [key: string]: string } = {
-  100: "https://gnosisscan.io",
-  1: "https://etherscan.io",
-  137: "https://polygonscan.com",
-  10: "https://optimistic.etherscan.io",
-  42161: "https://arbiscan.io",
-  8453: "https://basescan.org",
-  56: "https://bscscan.com",
-  81457: "https://blastscan.io",
-  324: "https://explorer.zksync.io",
-  43114: "https://snowtrace.io",
-  480: "https://explorer.worldchain.network",
-  31337: "http://127.0.0.1:8545",
-};
 
 let networks: [AppKitNetwork, ...AppKitNetwork[]];
 if (window.location.hostname === "localhost" || window.location.hostname === "0.0.0.0") {
@@ -75,10 +48,10 @@ export let userSigner: ethers.Signer | undefined;
 let web3Provider: ethers.providers.Web3Provider | undefined;
 
 async function initializeProviderAndSigner() {
-  const networkId = appState.getChainId();
+  const networkId = Number(appState.getChainId());
   if (networkId && providersUrl[networkId]) {
     // read-only provider for fetching
-    provider = new ethers.providers.JsonRpcProvider(providersUrl[networkId]);
+    provider = await useRpcHandler(networkId);
   } else {
     console.error("No provider URL found for the current network ID");
     provider = undefined;

static/use-rpc-handler.ts

@@ -0,0 +1,52 @@
+import { RPCHandler, HandlerConstructorConfig, NetworkId } from "@ubiquity-dao/rpc-handler";
+import { providersUrl } from "./constants";
+import { JsonRpcProvider } from "@ethersproject/providers";
+
+export function convertToNetworkId(networkId: number | string): NetworkId {
+  if (typeof networkId === "string") {
+    return networkId as NetworkId;
+  }
+  return String(networkId) as NetworkId;
+}
+
+export function useHandler(networkId: number) {
+    const isDev = networkId === 31337;
+    const config: HandlerConstructorConfig = {
+    networkId: convertToNetworkId(networkId),
+    autoStorage: true,
+    cacheRefreshCycles: 5,
+    rpcTimeout: 1500,
+    networkName: null,
+    runtimeRpcs: isDev ? ["http://localhost:8545"] : null,
+    networkRpcs: isDev ? [{ url: "http://localhost:8545" }] : null,
+    proxySettings: {
+      logger: null,
+      logTier: "error",
+      retryCount: 3,
+      retryDelay: 50,
+      strictLogs: true, // Set to false to see all log tiers
+    },
+  };
+
+  // No RPCs are tested at this point
+  return new RPCHandler(config);
+}
+
+export async function useRpcHandler(networkId: number) {
+  if (!networkId) {
+    throw new Error("Network ID not set");
+  }
+  try {
+    const handler = useHandler(networkId);
+    const provider = await handler.getFastestRpcProvider();
+    console.log("found fastest provider: provider");
+    const url = provider.connection.url;
+    if (!url) {
+      throw new Error("Provider URL not set");
+    }
+    return provider;
+  } catch (e) {
+    console.log(`RpcHandler is having issues. Error: ${e} \nUsing backup rpc.`);
+    return new JsonRpcProvider({ url: providersUrl[networkId], skipFetchSetup: true });
+  }
+}