Harden fetchAndTestRpcs parsing against DefiLlama format changes and add RPC fallbacks

.github/workflows/jest.yml

@@ -0,0 +1,33 @@
+name: Jest Tests
+
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  jest:
+    name: Run Jest tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install pnpm
+        run: npm install -g pnpm@9.15.4
+
+      - name: Install dependencies
+        run: |
+          sed -i '/"@uniswap\/widgets\/@uniswap\/sdk-core"/d' package.json
+          sed -i 's/"prebuild": "yarn install --immutable && lingui compile"/"prebuild": "lingui compile"/' package.json
+          sed -i 's/"packageManager": "yarn@[^"]*"/"packageManager": "pnpm@9.15.4"/' package.json
+          pnpm install --no-frozen-lockfile --prod=false
+
+      - name: Run Jest tests
+        run: pnpm run test -- --testPathPatterns="rpcParsing" --testTimeout=30000

src/components/NetworkModal/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { SupportedChains, useSwitchNetwork } from '@gooddollar/web3sdk-v2'
-import { Text, Link } from 'native-base'
+import { Text, Link, Spinner, HStack } from 'native-base'
 import { SwitchChainModal } from '@gooddollar/good-design'
 import { ChainId } from '@sushiswap/sdk'
 import { UnsupportedChainId } from '@gooddollar/web3sdk'
@@ -39,11 +39,11 @@ const TextWrapper = styled.div`
     }
 `
 
-const ChainOption = ({ chainId, chain, toggleNetworkModal, switchChain, labels, icons, error }: any) => {
+const ChainOption = ({ chainId, chain, switchChain, labels, icons, error, disabled }: any) => {
     const onOptionClick = useCallback(() => {
-        toggleNetworkModal()
+        if (disabled) return
         switchChain(chain)
-    }, [switchChain, toggleNetworkModal, chain])
+    }, [disabled, switchChain, chain])
 
     const isUnsupported = error instanceof UnsupportedChainId
 
@@ -56,6 +56,7 @@ const ChainOption = ({ chainId, chain, toggleNetworkModal, switchChain, labels,
             icon={icons[chain]}
             id={String(chain)}
             onClick={onOptionClick}
+            disabled={disabled}
         />
     )
 }
@@ -72,6 +73,7 @@ export default function NetworkModal(): JSX.Element | null {
     const networkModalOpen = useModalOpen(ApplicationModal.NETWORK)
     const toggleNetworkModal = useNetworkModalToggle()
     const [toAddNetwork, setToAddNetwork] = useState<SupportedChains | undefined>()
+    const [switchingChain, setSwitchingChain] = useState(false)
 
     const networkLabel: string | null = error ? null : (NETWORK_LABEL as any)[+(chainId ?? 42220)]
     const network = getEnv()
@@ -102,17 +104,19 @@ export default function NetworkModal(): JSX.Element | null {
 
     const switchChain = useCallback(
         async (chain: SupportedChains) => {
+            setSwitchingChain(true)
             try {
+                await new Promise((resolve) => setTimeout(resolve, 250))
                 await switchNetwork(chain)
                 sendData({
                     event: 'network_switch',
                     action: 'network_switch_success',
                     network: ChainId[chain],
                 })
+                toggleNetworkModal()
             } catch (e: any) {
                 if (e?.code === 4902) {
                     setToAddNetwork(chain)
-                    toggleNetworkModal()
                     return
                 }
 
@@ -124,6 +128,7 @@ export default function NetworkModal(): JSX.Element | null {
                         network: ChainId[chain],
                     })
                     console.warn('Wallet not initialized. Network preference saved.')
+                    toggleNetworkModal()
                     return
                 }
 
@@ -135,6 +140,8 @@ export default function NetworkModal(): JSX.Element | null {
 
                     error: e?.message || 'Unknown error',
                 })
+            } finally {
+                setSwitchingChain(false)
             }
         },
 
@@ -174,6 +181,13 @@ export default function NetworkModal(): JSX.Element | null {
                             )}
                         </TextWrapper>
 
+                        {switchingChain && (
+                            <HStack mt={3} space={2} alignItems="center">
+                                <Spinner size="sm" />
+                                <Text fontSize="sm">{i18n._(t`Switching network...`)}</Text>
+                            </HStack>
+                        )}
+
                         <div className="flex flex-col mt-3 space-y-5 overflow-y-auto">
                             {allowedNetworks.map((chain: SupportedChains) => (
                                 <ChainOption
@@ -182,9 +196,9 @@ export default function NetworkModal(): JSX.Element | null {
                                     chain={chain}
                                     labels={NETWORK_LABEL}
                                     icons={NETWORK_ICON}
-                                    toggleNetworkModal={toggleNetworkModal}
                                     switchChain={switchChain}
                                     error={error}
+                                    disabled={switchingChain}
                                 />
                             ))}
                         </div>

src/components/WalletModal/Option.tsx

@@ -72,6 +72,7 @@ export default function Option({
     icon,
     active = false,
     id,
+    disabled = false,
 }: {
     clickable?: boolean
     size?: number | null
@@ -81,15 +82,17 @@ export default function Option({
     icon: string
     active?: boolean
     id: string
+    disabled?: boolean
     /** @deprecated */
     color?: string
 }) {
     const content = (
         <OptionCardClickable
             id={id}
-            onClick={clickable ? onClick : undefined}
-            clickable={clickable && !active}
+            onClick={clickable && !disabled ? onClick : undefined}
+            clickable={clickable && !active && !disabled}
             active={active}
+            disabled={disabled}
         >
             <div className="flex items-center">
                 <IconWrapper size={size}>

src/components/Web3Status/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import useENSName from '../../hooks/useENSName'
 import { isTransactionRecent, useAllTransactions } from '../../state/transactions/hooks'
 import { TransactionDetails } from '../../state/transactions/reducer'
@@ -12,6 +12,8 @@ import { Text, HStack } from 'native-base'
 import { useNativeBalance } from '@gooddollar/web3sdk-v2'
 import { Currency } from '@sushiswap/sdk'
 import { useAppKitAccount, useAppKitNetwork } from '@reown/appkit/react'
+import { useEthers } from '@usedapp/core'
+import { Spinner } from 'native-base'
 
 // we want the latest one to come first, so return negative if a is after b
 function newTransactionsFirst(a: TransactionDetails, b: TransactionDetails) {
@@ -23,11 +25,54 @@ function Web3StatusInner() {
     const sendData = useSendAnalyticsData()
     const { address } = useAppKitAccount()
     const { chainId } = useAppKitNetwork()
+    const { library } = useEthers() as any
 
     const { ENSName } = useENSName(address ?? undefined)
 
     const allTransactions = useAllTransactions()
     const nativeBalance = useNativeBalance()
+    const [directNativeBalance, setDirectNativeBalance] = useState<string | undefined>()
+    const [showBalance, setShowBalance] = useState(false)
+
+    // added a timed-out fallback for when native-balance does not seem to complete (happening on mainnet)
+    // it uses a timeout to avoid mis-formatted amounts based on old-chain decimals.
+    useEffect(() => {
+        let cancelled = false
+        setShowBalance(false)
+        setDirectNativeBalance(undefined)
+        const timeoutId = window.setTimeout(() => {
+            if (!cancelled) {
+                setShowBalance(true)
+            }
+        }, 500)
+
+        async function readBalance() {
+            if (!address || !library?.getBalance) {
+                return
+            }
+
+            try {
+                const balance = await library.getBalance(address)
+                if (!cancelled) {
+                    setDirectNativeBalance(balance.toString())
+                }
+            } catch {
+                if (!cancelled) {
+                    setDirectNativeBalance(undefined)
+                }
+            }
+        }
+
+        void readBalance()
+
+        return () => {
+            cancelled = true
+            window.clearTimeout(timeoutId)
+        }
+    }, [address, library, /*used*/ chainId])
+
+    const displayNativeBalance = nativeBalance ?? directNativeBalance
+    const shouldShowBalance = showBalance && !!displayNativeBalance
 
     const sortedRecentTransactions = useMemo(() => {
         const txs = Object.values(allTransactions)
@@ -46,10 +91,13 @@ function Web3StatusInner() {
         <HStack space={8} flexDirection="row">
             {address && (
                 <div className="flex flex-row gap-4">
-                    {nativeBalance && (
+                    {shouldShowBalance ? (
                         <Text fontSize="sm" fontFamily="subheading" fontWeight="normal" color="gdPrimary">
-                            {parseFloat(nativeBalance).toFixed(4)} {Currency.getNativeCurrencySymbol(+(chainId ?? 1))}
+                            {parseFloat(displayNativeBalance!).toFixed(4)}{' '}
+                            {Currency.getNativeCurrencySymbol(+(chainId ?? 1))}
                         </Text>
+                    ) : (
+                        <Spinner size="sm" color="gdPrimary" />
                     )}
                     {hasPendingTransactions ? (
                         <div className="flex items-center justify-between">

src/hooks/rpcParsing.test.ts

@@ -0,0 +1,24 @@
+/* eslint-env jest */
+import { fetchRpcsFromChainlist, FALLBACK_RPCS_BY_CHAIN } from './rpcParsing'
+
+describe('rpcParsing', () => {
+  it('fetches and parses HTTP(S) RPCs for all required chains from chainlist', async () => {
+    const extraRpcs = await fetchRpcsFromChainlist()
+
+    expect(extraRpcs).toBeDefined()
+    ;[1, 122, 42220, 50].forEach((chainId) => {
+      const key = String(chainId)
+      expect(extraRpcs[key]).toBeDefined()
+      expect(extraRpcs[key].length).toBeGreaterThan(0)
+      expect(extraRpcs[key].every((url) => /^https?:\/\//.test(url))).toBe(true)
+    })
+  }, 30000)
+
+  it('FALLBACK_RPCS_BY_CHAIN covers all required chains with HTTP(S) URLs', () => {
+    ;['1', '122', '42220', '50'].forEach((chainId) => {
+      expect(FALLBACK_RPCS_BY_CHAIN[chainId]).toBeDefined()
+      expect(FALLBACK_RPCS_BY_CHAIN[chainId].length).toBeGreaterThan(0)
+      expect(FALLBACK_RPCS_BY_CHAIN[chainId].every((url) => /^https?:\/\//.test(url))).toBe(true)
+    })
+  })
+})

src/hooks/rpcParsing.ts

@@ -0,0 +1,26 @@
+export const FALLBACK_RPCS_BY_CHAIN: Record<string, string[]> = {
+    '1': ['https://eth.llamarpc.com', 'https://1rpc.io/eth'],
+    '122': ['https://rpc.fuse.io'],
+    '42220': ['https://forno.celo.org'],
+    '50': ['https://rpc.xinfin.network'],
+}
+
+const CHAINLIST_JSON_URL = 'https://chainid.network/chains.json'
+const TARGET_CHAIN_IDS = new Set([1, 122, 42220, 50])
+
+export async function fetchRpcsFromChainlist(): Promise<Record<string, string[]>> {
+    const response = await fetch(CHAINLIST_JSON_URL)
+    if (!response.ok) throw new Error('Failed to fetch chainlist')
+
+    const chains: Array<{ chainId: number; rpc: string[] }> = await response.json()
+
+    const result: Record<string, string[]> = {}
+    for (const chain of chains) {
+        if (TARGET_CHAIN_IDS.has(chain.chainId)) {
+            result[String(chain.chainId)] = chain.rpc.filter(
+                (url) => url.startsWith('http://') || url.startsWith('https://')
+            )
+        }
+    }
+    return result
+}