Merge pull request #19 from widolabs/feat/base-support

Add Base support

package.json

@@ -114,7 +114,7 @@
     "wcag-contrast": "^3.0.0",
     "web3": "^1.8.2",
     "wicg-inert": "^3.1.1",
-    "wido": "^0.2.6"
+    "wido": "0.4.0"
   },
   "peerDependencies": {
     "@babel/runtime": ">=7.17.0",

src/constants/addresses.ts

@@ -20,6 +20,7 @@ export const MULTICALL_ADDRESS: AddressMap = {
   [SupportedChainId.FANTOM]: '0x112235fE5C511277b21b70532c8Cd338e5ab74Df',
   [SupportedChainId.BSC]: '0x018b527df898381a690a5e9DD4633310d005837b',
   [SupportedChainId.AVALANCHE]: '0xEB15D8C563E08332C228Ad9b93a9ba9235375d18',
+  [SupportedChainId.BASE]: '0x919dF3aDbF5cfC9fcfd43198EDFe5aA5561CB456',
 }
 
 export const SWAP_ROUTER_ADDRESSES: AddressMap = {

src/constants/chainInfo.ts

@@ -2,6 +2,7 @@ import ethereumLogoUrl from 'assets/images/ethereum-logo.png'
 import arbitrumLogoUrl from 'assets/svg/arbitrum_logo.svg'
 import auroraLogo from 'assets/svg/aurora-logo.svg'
 import avalancheLogo from 'assets/svg/avalanche-logo.svg'
+import baseLogo from 'assets/svg/base-logo.svg'
 import bscLogo from 'assets/svg/bsc-logo.svg'
 import celoLogo from 'assets/svg/celo_logo.svg'
 import optimismLogoUrl from 'assets/svg/optimism_logo.svg'
@@ -320,6 +321,19 @@ const CHAIN_INFO: ChainInfoMap = {
     color: '#a12424',
     backgroundColor: '#0A0903',
   },
+  [SupportedChainId.BASE]: {
+    networkType: NetworkType.L2,
+    blockWaitMsBeforeWarning: ms`10m`,
+    bridge: '',
+    docs: '',
+    explorer: 'https://basescan.org/',
+    infoLink: 'https://info.uniswap.org/#/',
+    label: 'Base',
+    logoUrl: baseLogo,
+    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+    color: '#20308a',
+    backgroundColor: '#0A0903',
+  },
 }
 
 export function getChainInfo(chainId: SupportedL1ChainId): L1ChainInfo

src/constants/chains.ts

@@ -31,6 +31,8 @@ export enum SupportedChainId {
   BSC = 56,
 
   AVALANCHE = 43114,
+
+  BASE = 8453,
 }
 
 export const VISIBLE_CHAIN_IDS: number[] = [
@@ -42,6 +44,7 @@ export const VISIBLE_CHAIN_IDS: number[] = [
   SupportedChainId.FANTOM,
   SupportedChainId.BSC,
   SupportedChainId.AVALANCHE,
+  SupportedChainId.BASE,
 ]
 
 export enum ChainName {
@@ -62,26 +65,7 @@ export enum ChainName {
   AURORA_TESTNET = 'aurora-testnet',
   BSC = 'bsc',
   AVALANCHE = 'avalanche',
-}
-
-export const CHAIN_NAMES_TO_IDS: { [chainName: string]: SupportedChainId } = {
-  [ChainName.MAINNET]: SupportedChainId.MAINNET,
-  [ChainName.ROPSTEN]: SupportedChainId.ROPSTEN,
-  [ChainName.RINKEBY]: SupportedChainId.RINKEBY,
-  [ChainName.GOERLI]: SupportedChainId.GOERLI,
-  [ChainName.KOVAN]: SupportedChainId.KOVAN,
-  [ChainName.POLYGON]: SupportedChainId.POLYGON,
-  [ChainName.POLYGON_MUMBAI]: SupportedChainId.POLYGON_MUMBAI,
-  [ChainName.ARBITRUM_ONE]: SupportedChainId.ARBITRUM_ONE,
-  [ChainName.ARBITRUM_RINKEBY]: SupportedChainId.ARBITRUM_RINKEBY,
-  [ChainName.OPTIMISM]: SupportedChainId.OPTIMISM,
-  [ChainName.OPTIMISM_GOERLI]: SupportedChainId.OPTIMISM_GOERLI,
-  [ChainName.CELO]: SupportedChainId.CELO,
-  [ChainName.CELO_ALFAJORES]: SupportedChainId.CELO_ALFAJORES,
-  [ChainName.AURORA]: SupportedChainId.AURORA,
-  [ChainName.AURORA_TESTNET]: SupportedChainId.AURORA_TESTNET,
-  [ChainName.BSC]: SupportedChainId.BSC,
-  [ChainName.AVALANCHE]: SupportedChainId.AVALANCHE,
+  BASE = 'base',
 }
 
 /**
@@ -91,17 +75,6 @@ export const ALL_SUPPORTED_CHAIN_IDS: SupportedChainId[] = Object.values(Support
   (id) => typeof id === 'number'
 ) as SupportedChainId[]
 
-export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [
-  SupportedChainId.MAINNET,
-  SupportedChainId.POLYGON,
-  SupportedChainId.OPTIMISM,
-  SupportedChainId.ARBITRUM_ONE,
-  SupportedChainId.CELO,
-  SupportedChainId.AURORA,
-  SupportedChainId.BSC,
-  SupportedChainId.AVALANCHE,
-]
-
 /**
  * All the chain IDs that are running the Ethereum protocol.
  */
@@ -132,6 +105,7 @@ export const L2_CHAIN_IDS = [
   SupportedChainId.ARBITRUM_RINKEBY,
   SupportedChainId.OPTIMISM,
   SupportedChainId.OPTIMISM_GOERLI,
+  SupportedChainId.BASE,
 ] as const
 
 export type SupportedL2ChainId = typeof L2_CHAIN_IDS[number]

src/constants/jsonRpcEndpoints.ts

@@ -93,4 +93,8 @@ export const JSON_RPC_FALLBACK_ENDPOINTS: Record<SupportedChainId, string[]> = {
     // "Safe" URLs
     'https://avalanche-c-chain.publicnode.com',
   ],
+  [SupportedChainId.BASE]: [
+    // "Safe" URLs
+    'https://mainnet.base.org',
+  ],
 }

src/constants/tokens.ts

@@ -145,6 +145,13 @@ export const USDC_AVALANCHE = new Token(
   'USDC',
   'USD Coin'
 )
+export const USDC_BASE = new Token(
+  SupportedChainId.BASE,
+  '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
+  6,
+  'USDC',
+  'USD Coin'
+)
 export const AMPL = new Token(
   SupportedChainId.MAINNET,
   '0xD46bA6D942050d489DBd938a2C909A5d5039A161',
@@ -194,6 +201,7 @@ export const USDC: { [chainId in SupportedChainId]: Token } = {
   [SupportedChainId.AURORA_TESTNET]: USDC_AURORA_TESTNET,
   [SupportedChainId.BSC]: USDC_BSC,
   [SupportedChainId.AVALANCHE]: USDC_AVALANCHE,
+  [SupportedChainId.BASE]: USDC_BASE,
 }
 export const DAI_POLYGON = new Token(
   SupportedChainId.POLYGON,
@@ -405,6 +413,13 @@ export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } =
   ...(WETH9 as Record<SupportedChainId, Token>),
   [SupportedChainId.CELO]: CELO_CELO,
   [SupportedChainId.CELO_ALFAJORES]: CELO_CELO_ALFAJORES,
+  [SupportedChainId.BASE]: new Token(
+    SupportedChainId.BASE,
+    '0x4200000000000000000000000000000000000006',
+    18,
+    'WETH',
+    'Wrapped Ether'
+  ),
   [SupportedChainId.OPTIMISM]: new Token(
     SupportedChainId.OPTIMISM,
     '0x4200000000000000000000000000000000000006',

src/hooks/useCurrencyLogoURIs.ts

@@ -3,6 +3,7 @@ import EthereumLogo from 'assets/images/ethereum-logo.png'
 import arbitrumLogoUrl from 'assets/svg/arbitrum_logo.svg'
 import AuroraLogo from 'assets/svg/aurora-logo.svg'
 import avalancheLogo from 'assets/svg/avalanche-logo.svg'
+import baseLogo from 'assets/svg/base-logo.svg'
 import BscLogo from 'assets/svg/bsc-logo.svg'
 import CeloLogo from 'assets/svg/celo_logo.svg'
 import fantomLogo from 'assets/svg/fantom-logo.svg'
@@ -15,7 +16,7 @@ import { useMemo } from 'react'
 
 import { isCelo, nativeOnChain } from '../constants/tokens'
 
-type Network = 'ethereum' | 'arbitrum' | 'optimism' | 'aurora' | 'bsc' | 'avalanche'
+type Network = 'ethereum' | 'arbitrum' | 'optimism' | 'aurora' | 'bsc' | 'avalanche' | 'base'
 
 function chainIdToNetworkName(networkId: SupportedChainId): Network {
   switch (networkId) {
@@ -31,6 +32,8 @@ function chainIdToNetworkName(networkId: SupportedChainId): Network {
       return ChainName.BSC
     case SupportedChainId.AVALANCHE:
       return ChainName.AVALANCHE
+    case SupportedChainId.BASE:
+      return ChainName.BASE
     default:
       return 'ethereum'
   }
@@ -60,6 +63,8 @@ export function getNativeLogoURI(chainId: SupportedChainId = SupportedChainId.MA
       return BscLogo
     case SupportedChainId.AVALANCHE:
       return avalancheLogo
+    case SupportedChainId.BASE:
+      return baseLogo
     default:
       return EthereumLogo
   }

src/hooks/useTokenList/index.tsx

@@ -66,8 +66,9 @@ export function TestableProvider({ list, children }: PropsWithChildren<{ list: T
 }
 
 export function Provider({ children }: PropsWithChildren<{ list?: string | TokenInfo[] }>) {
+  const localStorageHandlers = useMemo(() => createLocalStorageHandlers<Token[]>('wido_tokens'), [])
   const { saveToLocalStorage: saveTokensToLocalStorage, getFromLocalStorage: getTokensFromLocalStorage } =
-    createLocalStorageHandlers<Token[]>('wido_tokens')
+    localStorageHandlers
 
   const tokensFromLocalStorage = getTokensFromLocalStorage()
   const [chainTokenMap, setChainTokenMap] = useState<ChainTokenMap>(
@@ -88,32 +89,18 @@ export function Provider({ children }: PropsWithChildren<{ list?: string | Token
 
   const throwError = useAsyncError()
   useEffect(() => {
-    // If the list was already loaded, don't reload it.
-    if (chainTokenMap && Object.keys(chainTokenMap).length > 0) return
-
-    let stale = false
-    activateList()
-    return () => {
-      stale = true
-    }
-
-    async function activateList() {
+    fetchTokens()
+    async function fetchTokens() {
       try {
         const tokens = await getSupportedTokens()
         saveTokensToLocalStorage(tokens)
-        // tokensToChainTokenMap also caches the fetched tokens, so it must be invoked even if stale.
         const map = tokensToChainTokenMap(tokens)
-        if (!stale) {
-          setChainTokenMap(map)
-        }
+        setChainTokenMap(map)
       } catch (e: unknown) {
-        if (!stale) {
-          // Do not update the token map, in case the map was already resolved without error on mainnet.
-          throwError(e as Error)
-        }
+        throwError(e as Error)
       }
     }
-  }, [chainTokenMap, resolver, saveTokensToLocalStorage, throwError])
+  }, [saveTokensToLocalStorage, throwError])
 
   return <ChainTokenMapContext.Provider value={chainTokenMap}>{children}</ChainTokenMapContext.Provider>
 }

src/hooks/web3/useJsonRpcUrlsMap.tsx

@@ -38,6 +38,7 @@ function toJsonRpcMap<T>(getChainConnections: (chainId: SupportedChainId) => T):
     [SupportedChainId.AURORA_TESTNET]: getChainConnections(SupportedChainId.AURORA_TESTNET),
     [SupportedChainId.BSC]: getChainConnections(SupportedChainId.BSC),
     [SupportedChainId.AVALANCHE]: getChainConnections(SupportedChainId.AVALANCHE),
+    [SupportedChainId.BASE]: getChainConnections(SupportedChainId.BASE),
   }
 }
 

src/utils/getExplorerLink.ts

@@ -17,6 +17,7 @@ const ETHERSCAN_PREFIXES: { [chainId: number]: string } = {
   [SupportedChainId.AURORA_TESTNET]: 'https://explorer.testnet.aurora.dev',
   [SupportedChainId.BSC]: 'https://bscscan.com/',
   [SupportedChainId.AVALANCHE]: 'https://snowtrace.io/',
+  [SupportedChainId.BASE]: 'https://basescan.org/',
 }
 
 export enum ExplorerDataType {