Rpc fix with json

.github/workflows/jest.yml

@@ -0,0 +1,26 @@
+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 dependencies
+              run: yarn install --immutable
+
+            - name: Run Jest tests
+              run: yarn test --testPathPattern="rpcParsing" --testTimeout=30000

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
+}

jest.setup.js

@@ -0,0 +1,8 @@
+const nodeFetch = require('node-fetch')
+const globalObject = typeof globalThis !== 'undefined' ? globalThis : global
+if (!globalObject.fetch) {
+  globalObject.fetch = nodeFetch.default || nodeFetch
+  globalObject.Request = nodeFetch.Request
+  globalObject.Response = nodeFetch.Response
+  globalObject.Headers = nodeFetch.Headers
+}

package.json

@@ -26,8 +26,10 @@
         "@apollo/react-components": "^3.1.5",
         "@apollo/react-hooks": "^3.1.5",
         "@babel/core": "^7.15.8",
+        "@babel/preset-env": "^7.29.7",
         "@babel/preset-flow": "^7.18.6",
         "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.29.7",
         "@commitlint/cli": "^12.1.1",
         "@commitlint/config-conventional": "^12.1.1",
         "@ethersproject/experimental": "^5.0.1",
@@ -87,6 +89,7 @@
         "@web3-react/core": "^6.1.9",
         "ajv": "^6.12.3",
         "autoprefixer": "^9",
+        "babel-jest": "29",
         "babel-plugin-import": "^1.13.5",
         "babel-plugin-macros": "^3.1.0",
         "babel-plugin-react-native-web": "^0.18.10",
@@ -114,6 +117,8 @@
         "graphql": "^15.5.1",
         "husky": "^8.0.2",
         "jazzicon": "^1.5.0",
+        "jest": "29",
+        "jest-environment-jsdom": "^30.4.1",
         "jotai-immer": "^0.2.0",
         "jsbi": "^3.1.5",
         "lint-staged": "^13.1.0",
@@ -122,6 +127,7 @@
         "luxon": "^1.25.0",
         "multicodec": "^2.0.0",
         "multihashes": "^3.0.1",
+        "node-fetch": "2",
         "node-vibrant": "^3.1.5",
         "numeral": "^2.0.6",
         "patch-package": "^6.4.7",
@@ -165,6 +171,7 @@
         "swr": "^0.5.5",
         "tailwindcss": "^3.3.2",
         "tailwindcss-border-gradient-radius": "^2.0.0",
+        "ts-jest": "^29.4.11",
         "use-count-up": "^2.2.5",
         "vercel": "^52.0.0",
         "vite": "^4.3.5",
@@ -250,5 +257,12 @@
         "wagmi": "^2.14.13",
         "web3": "1.8.2"
     },
-    "packageManager": "yarn@3.6.1"
+    "packageManager": "yarn@3.6.1",
+    "jest": {
+        "testEnvironment": "jsdom",
+        "setupFiles": [
+            "./jest.setup.js"
+        ],
+        "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,9 @@ 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'
+import { formatUnits } from 'viem'
 
 // we want the latest one to come first, so return negative if a is after b
 function newTransactionsFirst(a: TransactionDetails, b: TransactionDetails) {
@@ -23,11 +26,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(formatUnits(balance.toString(), 18))
+                }
+            } 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 +92,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/functions/rpcParsing.test.ts

@@ -0,0 +1,71 @@
+/* eslint-env jest */
+
+const CHAINLIST_RPCS_SOURCE = [
+    {
+        chainId: 1,
+        name: 'Ethereum Mainnet',
+        rpc: [
+            { url: 'https://eth.llamarpc.com' },
+            { url: 'https://1rpc.io/eth' },
+            { url: 'wss://ethereum-rpc.publicnode.com' },
+        ],
+    },
+    {
+        chainId: 122,
+        name: 'Fuse Mainnet',
+        rpc: [{ url: 'https://rpc.fuse.io' }, { url: 'https://fuse.drpc.org' }],
+    },
+    {
+        chainId: 42220,
+        name: 'Celo Mainnet',
+        rpc: [{ url: 'https://forno.celo.org' }, { url: 'wss://forno.celo.org/ws' }],
+    },
+    {
+        chainId: 50,
+        name: 'XDC Network',
+        rpc: [{ url: 'https://rpc.xinfin.network' }, { url: 'https://erpc.xinfin.network' }],
+    },
+]
+
+describe('rpcParsing', () => {
+    const originalEnv = process.env
+
+    beforeEach(() => {
+        process.env = { ...originalEnv }
+    })
+
+    afterEach(() => {
+        process.env = originalEnv
+        jest.restoreAllMocks()
+    })
+
+    it('parses HTTP(S) RPCs from chainlist json', async () => {
+        jest.spyOn(global, 'fetch').mockResolvedValue({
+            ok: true,
+            json: async () => CHAINLIST_RPCS_SOURCE,
+        } as Response)
+
+        const { fetchRpcsFromChainlist } = await import('./rpcParsing')
+
+        await expect(fetchRpcsFromChainlist()).resolves.toEqual({
+            '1': ['https://eth.llamarpc.com', 'https://1rpc.io/eth'],
+            '122': ['https://rpc.fuse.io', 'https://fuse.drpc.org'],
+            '42220': ['https://forno.celo.org'],
+            '50': ['https://rpc.xinfin.network', 'https://erpc.xinfin.network'],
+        })
+    })
+
+    it('returns only configured fallback chains', async () => {
+        process.env.REACT_APP_RPC_FALLBACK_CHAIN_IDS = '122,50'
+        process.env.REACT_APP_FUSE_RPC = 'https://fuse.example'
+
+        const { getFallbackRpcsByChain } = await import('./rpcParsing')
+
+        expect(getFallbackRpcsByChain()).toEqual({
+            '1': [],
+            '122': ['https://fuse.example'],
+            '42220': [],
+            '50': ['https://rpc.xinfin.network'],
+        })
+    })
+})