feat: Add Base support to Uniswap widget

package.json

@@ -166,7 +166,7 @@
     "@types/wcag-contrast": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
-    "@uniswap/default-token-list": "^9.0.0",
+    "@uniswap/default-token-list": "^11.6.0",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",

src/components/Logo/util.ts

@@ -2,12 +2,13 @@ import { SupportedChainId } from 'constants/chains'
 import { isAddress } from 'utils'
 
 import EthereumLogo from '../../assets/images/ethereum-logo.png'
+import BaseLogo from '../../assets/svg/base_logo.svg'
 import BnbLogo from '../../assets/svg/bnb-logo.svg'
 import CeloLogo from '../../assets/svg/celo_logo.svg'
 import MaticLogo from '../../assets/svg/matic-token-icon.svg'
 import { LogoTableInput } from './LogoTable'
 
-type Network = 'ethereum' | 'arbitrum' | 'optimism' | 'polygon' | 'celo' | 'smartchain'
+type Network = 'ethereum' | 'arbitrum' | 'optimism' | 'polygon' | 'celo' | 'smartchain' | 'base'
 
 function chainIdToNetworkName(networkId: SupportedChainId): Network | undefined {
   switch (networkId) {
@@ -23,6 +24,8 @@ function chainIdToNetworkName(networkId: SupportedChainId): Network | undefined
       return 'celo'
     case SupportedChainId.BNB:
       return 'smartchain'
+    case SupportedChainId.BASE:
+      return 'base'
     default:
       return 'ethereum'
   }
@@ -51,6 +54,8 @@ export function getNativeLogoURI(chainId: SupportedChainId = SupportedChainId.MA
       return CeloLogo
     case SupportedChainId.BNB:
       return BnbLogo
+    case SupportedChainId.BASE:
+      return BaseLogo
     default:
       return EthereumLogo
   }

src/constants/chainInfo.ts

@@ -1,5 +1,6 @@
 import ethereumLogoUrl from 'assets/images/ethereum-logo.png'
 import arbitrumLogoUrl from 'assets/svg/arbitrum_logo.svg'
+import baseLogo from 'assets/svg/base_logo.svg'
 import bnbLogo from 'assets/svg/bnb-logo.svg'
 import celoLogo from 'assets/svg/celo_logo.svg'
 import optimismLogoUrl from 'assets/svg/optimism_logo.svg'
@@ -237,6 +238,19 @@ const CHAIN_INFO: ChainInfoMap = {
     color: '#F0B90B',
     backgroundColor: '#F0B90B',
   },
+  [SupportedChainId.BASE]: {
+    networkType: NetworkType.L2,
+    blockWaitMsBeforeWarning: ms`10m`,
+    bridge: 'https://bridge.base.org/',
+    docs: 'https://docs.base.org/',
+    explorer: 'https://basescan.org/',
+    infoLink: 'https://info.uniswap.org/#/base/',
+    label: 'Base',
+    logoUrl: baseLogo,
+    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+    color: '#0152ff',
+    backgroundColor: '#0152ff',
+  }
 }
 
 export function getChainInfo(chainId: SupportedL1ChainId): L1ChainInfo

src/constants/chains.ts

@@ -21,6 +21,8 @@ export enum SupportedChainId {
   CELO_ALFAJORES = 44787,
 
   BNB = 56,
+
+  BASE = 8453,
 }
 
 export enum ChainName {
@@ -38,6 +40,7 @@ export enum ChainName {
   CELO = 'celo',
   CELO_ALFAJORES = 'celo-alfajores',
   BNB = 'bnb',
+  BASE = 'base',
 }
 
 export const CHAIN_NAMES_TO_IDS: { [chainName: string]: SupportedChainId } = {
@@ -55,6 +58,7 @@ export const CHAIN_NAMES_TO_IDS: { [chainName: string]: SupportedChainId } = {
   [ChainName.CELO]: SupportedChainId.CELO,
   [ChainName.CELO_ALFAJORES]: SupportedChainId.CELO_ALFAJORES,
   [ChainName.BNB]: SupportedChainId.BNB,
+  [ChainName.BASE]: SupportedChainId.BASE,
 }
 
 /**
@@ -71,6 +75,7 @@ export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [
   SupportedChainId.ARBITRUM_ONE,
   SupportedChainId.CELO,
   SupportedChainId.BNB,
+  SupportedChainId.BASE,
 ]
 
 /**
@@ -86,6 +91,7 @@ export const L1_CHAIN_IDS = [
   SupportedChainId.POLYGON_MUMBAI,
   SupportedChainId.CELO,
   SupportedChainId.CELO_ALFAJORES,
+  SupportedChainId.BASE,
 ] as const
 
 export type SupportedL1ChainId = typeof L1_CHAIN_IDS[number]
@@ -99,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

@@ -86,4 +86,14 @@ export const JSON_RPC_FALLBACK_ENDPOINTS: Record<SupportedChainId, string[]> = {
     'https://bsc-dataseed4.defibit.io',
     'https://rpc.ankr.com/bsc',
   ],
+  [SupportedChainId.BASE]: [
+    // "Safe" URLs
+    'https://mainnet.base.org',
+    'https://developer-access-mainnet.base.org/',
+    'https://base.gateway.tenderly.co',
+    'https://base.publicnode.com',
+    // "Fallback" URLs
+    'https://1rpc.io/base',
+    'https://base.meowrpc.com',
+  ],
 }

src/constants/routing.ts

@@ -9,6 +9,7 @@ import {
   CUSD_CELO,
   DAI,
   DAI_ARBITRUM_ONE,
+  DAI_BASE,
   DAI_OPTIMISM,
   DAI_POLYGON,
   ETH2X_FLI,
@@ -24,6 +25,7 @@ import {
   SWISE,
   TRIBE,
   USDC_BNB_CHAIN,
+  USDC_BASE,
   USDC_MAINNET,
   USDC_POLYGON,
   USDT,
@@ -92,6 +94,11 @@ export const BASES_TO_CHECK_TRADES_AGAINST: ChainTokenList = {
     USDT_BNB_CHAIN,
     ...WRAPPED_NATIVE_CURRENCIES_ONLY[SupportedChainId.BNB],
   ],
+  [SupportedChainId.BASE]: [
+    ...WRAPPED_NATIVE_CURRENCIES_ONLY[SupportedChainId.BASE],
+    DAI_BASE,
+    USDC_BASE,
+  ],
 }
 export const ADDITIONAL_BASES: { [chainId: number]: { [tokenAddress: string]: Token[] } } = {
   [SupportedChainId.MAINNET]: {

src/constants/tokens.ts

@@ -130,6 +130,13 @@ export const USDC_BNB_CHAIN = new Token(
   'USDC',
   'USDC'
 )
+export const USDC_BASE = new Token(
+  SupportedChainId.BASE,
+  '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
+  6,
+  'USDC',
+  'USD Coin'
+)
 export const USDC: { [chainId in SupportedChainId]: Token } = {
   [SupportedChainId.MAINNET]: USDC_MAINNET,
   [SupportedChainId.ARBITRUM_ONE]: USDC_ARBITRUM,
@@ -145,6 +152,7 @@ export const USDC: { [chainId in SupportedChainId]: Token } = {
   [SupportedChainId.KOVAN]: USDC_KOVAN,
   [SupportedChainId.ROPSTEN]: USDC_ROPSTEN,
   [SupportedChainId.BNB]: USDC_BNB_CHAIN,
+  [SupportedChainId.BASE]: USDC_BASE,
 }
 export const DAI_POLYGON = new Token(
   SupportedChainId.POLYGON,
@@ -407,6 +415,14 @@ export const DAI_BNB_CHAIN = new Token(
   'DAI'
 )
 
+export const DAI_BASE = new Token(
+  SupportedChainId.BASE,
+  '0x50c5725949a6f0c72e6c4a641f24049a917db0cb',
+  18,
+  'DAI',
+  'Dai Stablecoin'
+)
+
 function isBnbChain(chainId: number): chainId is SupportedChainId.BNB {
   return chainId === SupportedChainId.BNB
 }
@@ -490,6 +506,13 @@ export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } =
     'WBNB',
     'Wrapped BNB'
   ),
+  [SupportedChainId.BASE]: new Token(
+    SupportedChainId.BASE,
+    '0x4200000000000000000000000000000000000006',
+    18,
+    'WETH',
+    'Wrapped Ether'
+  ),
 }
 
 export function isCelo(chainId: number): chainId is SupportedChainId.CELO | SupportedChainId.CELO_ALFAJORES {
@@ -574,5 +597,6 @@ export const TOKEN_SHORTHANDS: { [shorthand: string]: { [chainId in SupportedCha
     [SupportedChainId.ROPSTEN]: USDC_ROPSTEN.address,
     [SupportedChainId.CELO]: PORTAL_USDC_CELO.address,
     [SupportedChainId.CELO_ALFAJORES]: USDC_CELO_ALFAJORES.address,
+    [SupportedChainId.BASE]: USDC_BASE.address,
   },
 }

src/hooks/useStablecoinAmountFromFiatValue.ts

@@ -1,7 +1,7 @@
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { SupportedChainId } from 'constants/chains'
-import { CUSD_CELO, DAI_OPTIMISM, USDC_ARBITRUM, USDC_MAINNET, USDC_POLYGON } from 'constants/tokens'
+import { CUSD_CELO, DAI_OPTIMISM, USDC_ARBITRUM, USDC_MAINNET, USDC_POLYGON, USDC_BASE } from 'constants/tokens'
 import { useMemo } from 'react'
 import tryParseCurrencyAmount from 'utils/tryParseCurrencyAmount'
 
@@ -13,6 +13,7 @@ export const STABLECOIN_AMOUNT_OUT: { [chainId: number]: CurrencyAmount<Token> }
   [SupportedChainId.OPTIMISM]: CurrencyAmount.fromRawAmount(DAI_OPTIMISM, 10_000e18),
   [SupportedChainId.POLYGON]: CurrencyAmount.fromRawAmount(USDC_POLYGON, 10_000e6),
   [SupportedChainId.CELO]: CurrencyAmount.fromRawAmount(CUSD_CELO, 10_000e18),
+  [SupportedChainId.BASE]: CurrencyAmount.fromRawAmount(USDC_BASE, 10_000e6),
 }
 
 /**

src/hooks/web3/useJsonRpcUrlsMap.tsx

@@ -32,6 +32,7 @@ function toJsonRpcMap<T>(getChainConnections: (chainId: SupportedChainId) => T):
     [SupportedChainId.CELO]: getChainConnections(SupportedChainId.CELO),
     [SupportedChainId.CELO_ALFAJORES]: getChainConnections(SupportedChainId.CELO_ALFAJORES),
     [SupportedChainId.BNB]: getChainConnections(SupportedChainId.BNB),
+    [SupportedChainId.BASE]: getChainConnections(SupportedChainId.BASE),
   }
 }
 

src/utils/getExplorerLink.test.ts

@@ -39,4 +39,7 @@ describe('#getExplorerLink', () => {
   it('bnb chain', () => {
     expect(getExplorerLink(56, 'abc', ExplorerDataType.ADDRESS)).toEqual('https://bscscan.com/address/abc')
   })
+  it('base', () => {
+    expect(getExplorerLink(8453, 'abc', ExplorerDataType.ADDRESS)).toEqual('https://basescan.org/address/abc')
+  })
 })

src/utils/getExplorerLink.ts

@@ -13,6 +13,7 @@ const ETHERSCAN_PREFIXES: { [chainId: number]: string } = {
   [SupportedChainId.CELO]: 'https://celoscan.io',
   [SupportedChainId.CELO_ALFAJORES]: 'https://alfajores.celoscan.io',
   [SupportedChainId.BNB]: 'https://bscscan.com',
+  [SupportedChainId.BASE]: 'https://basescan.org/',
 }
 
 export enum ExplorerDataType {