[TASK-14095] feat: add fallback transport to viem clients (#1131)

* feat: add fallback transport to viem clients

Use viem fallback transport to handle RPC errors and fallback to other
providers.

* style: Apply prettier formatting

* test: add fallback to viem mock

Author: jjramirezn

src/app/actions/claimLinks.ts

@@ -15,7 +15,7 @@ export const getLinkDetails = unstable_cache(
         const chainId = params.chainId
         const contractVersion = params.contractVersion
         const depositIdx = params.depositIdx
-        const client = await getPublicClient(Number(chainId) as ChainId)
+        const client = getPublicClient(Number(chainId) as ChainId)
         const peanutContractAddress = peanut.getContractAddress(chainId, contractVersion) as Address
         const peanutContractAbi = peanut.getContractAbi(contractVersion)
         const contract = getContract({
@@ -58,7 +58,7 @@ export const getLinkFromTx = unstable_cache(
         password: string
     }): Promise<string> => {
         const { chainId } = linkDetails
-        const client = await getPublicClient(Number(chainId) as ChainId)
+        const client = getPublicClient(Number(chainId) as ChainId)
         const txReceipt = await client.waitForTransactionReceipt({
             hash: txHash as `0x${string}`,
         })
@@ -68,7 +68,7 @@ export const getLinkFromTx = unstable_cache(
 )
 
 export async function getNextDepositIndex(contractVersion: string): Promise<number> {
-    const publicClient = await getPublicClient(PEANUT_WALLET_CHAIN.id)
+    const publicClient = getPublicClient(PEANUT_WALLET_CHAIN.id)
     const contractAbi = peanut.getContractAbi(contractVersion)
     const contractAddress: Address = peanut.getContractAddress(
         PEANUT_WALLET_CHAIN.id.toString(),

src/app/actions/clients.ts

@@ -1,20 +1,39 @@
-'use server'
-import type { PublicClient, Chain } from 'viem'
-import { createPublicClient, http, extractChain } from 'viem'
+import type { PublicClient, Chain, Transport } from 'viem'
+import { createPublicClient, http, extractChain, fallback } from 'viem'
 import * as chains from 'viem/chains'
 
 import { PUBLIC_CLIENTS_BY_CHAIN, rpcUrls } from '@/constants'
 
 const allChains = Object.values(chains)
 export type ChainId = (typeof allChains)[number]['id']
 
-export const getPublicClient = async (chainId: ChainId): Promise<PublicClient> => {
+/**
+ * Returns viem transport with fallback
+ *
+ * @see https://viem.sh/docs/clients/transports/fallback#fallback-transport
+ */
+export function getTransportWithFallback(chainId: ChainId): Transport {
+    const providerUrls = rpcUrls[chainId]
+    if (!providerUrls) {
+        // If no premium providers are configured, viem will use a default one
+        return http()
+    }
+    return fallback(
+        providerUrls.map((u) => http(u)),
+        // Viem checks the status of the provider every 60 seconds and notes latency
+        // and stability. The provider that viem will try first depend on this
+        // ranking
+        { rank: { interval: 60_000 } }
+    )
+}
+
+export function getPublicClient(chainId: ChainId): PublicClient {
     let client: PublicClient | undefined = PUBLIC_CLIENTS_BY_CHAIN[chainId]?.client
     if (client) return client
     const chain: Chain = extractChain({ chains: allChains, id: chainId })
     if (!chain) throw new Error(`No chain found for chainId ${chainId}`)
     return createPublicClient({
-        transport: http(rpcUrls[chainId][0]),
+        transport: getTransportWithFallback(chainId),
         chain,
     })
 }

src/app/actions/tokens.ts

@@ -160,7 +160,7 @@ export const fetchTokenDetails = unstable_cache(
         console.log('chain id', chainId)
         const tokenDetails = getTokenDetails({ tokenAddress: tokenAddress as Address, chainId: chainId! })
         if (tokenDetails) return tokenDetails
-        const client = await getPublicClient(Number(chainId) as ChainId)
+        const client = getPublicClient(Number(chainId) as ChainId)
         console.log('token address', tokenAddress)
         const [symbol, name, decimals] = await Promise.all([
             client.readContract({
@@ -193,7 +193,7 @@ export const fetchTokenDetails = unstable_cache(
  */
 const getCachedGasPrice = unstable_cache(
     async (chainId: string) => {
-        const client = await getPublicClient(Number(chainId) as ChainId)
+        const client = getPublicClient(Number(chainId) as ChainId)
         const gasPrice = await client.getGasPrice()
         return gasPrice.toString()
     },
@@ -208,7 +208,7 @@ const getCachedGasPrice = unstable_cache(
  */
 const getCachedGasEstimate = unstable_cache(
     async (fromAddress: Address, contractAddress: Address, data: Hex, chainId: string) => {
-        const client = await getPublicClient(Number(chainId) as ChainId)
+        const client = getPublicClient(Number(chainId) as ChainId)
         const gasEstimate = await client.estimateGas({
             account: fromAddress,
             to: contractAddress,

src/components/Global/GeneralRecipientInput/__tests__/GeneralRecipientInput.test.tsx

@@ -43,6 +43,7 @@ jest.mock('viem', () => ({
     isAddress: (address: string) => address.startsWith('0x') && address.length === 42,
     http: jest.fn(),
     createPublicClient: jest.fn(),
+    fallback: jest.fn(),
 }))
 
 describe('GeneralRecipientInput Type Detection', () => {

src/constants/general.consts.ts

@@ -22,8 +22,6 @@ export const rpcUrls: Record<number, string[]> = {
     [polygon.id]: [infuraUrl('polygon-mainnet'), alchemyUrl('polygon-mainnet')].filter(Boolean) as string[],
     [optimism.id]: [infuraUrl('optimism-mainnet'), alchemyUrl('opt-mainnet')].filter(Boolean) as string[],
     [base.id]: [infuraUrl('base-mainnet'), alchemyUrl('base-mainnet')].filter(Boolean) as string[],
-    // Infura is returning weird estimations for BSC @2025-05-14
-    //[bsc.id]: `https://bsc-mainnet.infura.io/v3/${INFURA_API_KEY}`,
     [bsc.id]: ['https://bsc-dataseed.bnbchain.org', infuraUrl('bsc-mainnet'), alchemyUrl('bsc-mainnet')].filter(
         Boolean
     ) as string[],

src/constants/zerodev.consts.ts

@@ -1,7 +1,7 @@
-import { rpcUrls } from '@/constants/general.consts'
 import { getEntryPoint, KERNEL_V3_1 } from '@zerodev/sdk/constants'
 import type { Chain, PublicClient } from 'viem'
-import { createPublicClient, http } from 'viem'
+import { createPublicClient } from 'viem'
+import { getTransportWithFallback } from '@/app/actions/clients'
 import { arbitrum, polygon } from 'viem/chains'
 
 // consts needed to define low level SDK kernel
@@ -57,7 +57,7 @@ export const PUBLIC_CLIENTS_BY_CHAIN: Record<
 > = {
     [arbitrum.id]: {
         client: createPublicClient({
-            transport: http(rpcUrls[arbitrum.id][0]),
+            transport: getTransportWithFallback(arbitrum.id),
             chain: arbitrum,
             pollingInterval: 500,
         }),
@@ -67,7 +67,7 @@ export const PUBLIC_CLIENTS_BY_CHAIN: Record<
     },
     [polygon.id]: {
         client: createPublicClient({
-            transport: http(rpcUrls[polygon.id][0]),
+            transport: getTransportWithFallback(polygon.id),
             chain: polygon,
             pollingInterval: 2500,
         }),

src/services/swap.ts

@@ -191,7 +191,7 @@ async function checkTokenAllowance(
     spenderAddress: Address,
     chainId: string
 ): Promise<bigint> {
-    const client = await getPublicClient(Number(chainId) as ChainId)
+    const client = getPublicClient(Number(chainId) as ChainId)
 
     const allowance = await client.readContract({
         address: tokenAddress,

src/utils/ens.utils.ts

@@ -1,7 +1,6 @@
 import { JustaName } from '@justaname.id/sdk'
 import { rpcUrls } from '@/constants/general.consts'
 import { mainnet } from 'viem/chains'
-import { ethers } from 'ethers'
 
 /**
  * Resolves an Ethereum address to its username using JustaName ENS resolution
@@ -11,7 +10,7 @@ import { ethers } from 'ethers'
  */
 export async function resolveAddressToUsername(address: string, siteUrl: string): Promise<string | null> {
     try {
-        const mainnetRpcUrl = rpcUrls[mainnet.id]?.[0] ?? ethers.getDefaultProvider('mainnet')
+        const mainnetRpcUrl = rpcUrls[mainnet.id]?.[0]!
 
         const ensDomain = process.env.NEXT_PUBLIC_JUSTANAME_ENS_DOMAIN
 
@@ -23,7 +22,7 @@ export async function resolveAddressToUsername(address: string, siteUrl: string)
             networks: [
                 {
                     chainId: 1, // Ethereum Mainnet
-                    providerUrl: mainnetRpcUrl || 'https://eth.llamarpc.com',
+                    providerUrl: mainnetRpcUrl,
                 },
             ],
             ensDomains: [

src/utils/general.utils.ts

@@ -15,9 +15,9 @@ import * as Sentry from '@sentry/nextjs'
 import peanut, { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
 import { SiweMessage } from 'siwe'
 import type { Address, TransactionReceipt } from 'viem'
-import { getAddress, isAddress } from 'viem'
+import { getAddress, isAddress, erc20Abi } from 'viem'
 import * as wagmiChains from 'wagmi/chains'
-import { getSDKProvider } from './sdk.utils'
+import { getPublicClient, type ChainId } from '@/app/actions/clients'
 import { NATIVE_TOKEN_ADDRESS, SQUID_ETH_ADDRESS } from './token.utils'
 
 export function urlBase64ToUint8Array(base64String: string) {
@@ -1056,16 +1056,13 @@ export async function fetchTokenSymbol(tokenAddress: string, chainId: string): P
     let tokenSymbol = getTokenSymbol(tokenAddress, chainId)
     if (!tokenSymbol) {
         try {
-            const provider = await getSDKProvider({ chainId })
-            if (!provider) {
-                console.error(`Failed to get provider for chain ID ${chainId}`)
-                return undefined
-            }
-            const contract = await peanut.getTokenContractDetails({
-                address: tokenAddress,
-                provider: provider,
-            })
-            tokenSymbol = contract?.symbol?.toUpperCase()
+            const client = getPublicClient(Number(chainId) as ChainId)
+            tokenSymbol = (await client.readContract({
+                address: tokenAddress as Address,
+                abi: erc20Abi,
+                functionName: 'symbol',
+                args: [],
+            })) as string
         } catch (error) {
             Sentry.captureException(error)
             console.error('Error fetching token symbol:', error)