feat: Add BNB Chain support (Uniswap#279)

* add bsc * add etherscan link * fix: 'bsc' has been renamed BNB Chain (Uniswap#280) * fix: timestamp issue (Uniswap#282) * fix timestamp issue * revert block issue * update block numbers * update chain name * include bnb chain token icons * use plasma list instead of coingecko * use correct logos on all networks --------- Co-authored-by: Jordan Frankfurt <[email protected]>
BoThe1K · Mar 15, 2023 · cd375aa · cd375aa
1 parent 87eb4d7
commit cd375aa
Show file tree

Hide file tree

Showing 17 changed files with 246 additions and 183 deletions.
diff --git a/package.json b/package.json
@@ -131,7 +131,7 @@
     "@data-ui/histogram": "^0.0.84",
     "@types/numeral": "^2.0.1",
     "@uniswap/default-token-list": "^2.0.0",
-    "@uniswap/sdk-core": "^3.0.1",
+    "@uniswap/sdk-core": "^3.2.2",
     "@uniswap/v2-sdk": "^3.0.0-alpha.0",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",

diff --git a/src/apollo/client.ts b/src/apollo/client.ts
@@ -119,6 +119,49 @@ export const optimismClient = new ApolloClient({
   },
 })
 
+export const bscClient = new ApolloClient({
+  uri: 'https://api.thegraph.com/subgraphs/name/ianlapham/uniswap-v3-bsc',
+  cache: new InMemoryCache({
+    typePolicies: {
+      Token: {
+        // Singleton types that have no identifying field can use an empty
+        // array for their keyFields.
+        keyFields: false,
+      },
+      Pool: {
+        // Singleton types that have no identifying field can use an empty
+        // array for their keyFields.
+        keyFields: false,
+      },
+    },
+  }),
+  queryDeduplication: true,
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'no-cache',
+    },
+    query: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+  },
+})
+
+export const bscBlockClient = new ApolloClient({
+  uri: 'https://api.thegraph.com/subgraphs/name/wombat-exchange/bnb-chain-block',
+  cache: new InMemoryCache(),
+  queryDeduplication: true,
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'cache-first',
+    },
+    query: {
+      fetchPolicy: 'cache-first',
+      errorPolicy: 'all',
+    },
+  },
+})
+
 export const optimismBlockClient = new ApolloClient({
   uri: 'https://api.thegraph.com/subgraphs/name/ianlapham/uni-testing-subgraph',
   cache: new InMemoryCache(),

diff --git a/src/assets/images/bnb-logo.svg b/src/assets/images/bnb-logo.svg
diff --git a/src/components/CurrencyLogo/index.tsx b/src/components/CurrencyLogo/index.tsx
@@ -7,9 +7,29 @@ import useHttpLocations from 'hooks/useHttpLocations'
 import { useActiveNetworkVersion } from 'state/application/hooks'
 import { OptimismNetworkInfo } from 'constants/networks'
 import EthereumLogo from '../../assets/images/ethereum-logo.png'
+import { SupportedChainId } from '@uniswap/sdk-core'
 
-export const getTokenLogoURL = (address: string) => {
-  return `https://raw.githubusercontent.com/uniswap/assets/master/blockchains/ethereum/assets/${address}/logo.png`
+export function chainIdToNetworkName(networkId: SupportedChainId) {
+  switch (networkId) {
+    case SupportedChainId.MAINNET:
+      return 'ethereum'
+    case SupportedChainId.ARBITRUM_ONE:
+      return 'arbitrum'
+    case SupportedChainId.OPTIMISM:
+      return 'optimism'
+    case SupportedChainId.POLYGON:
+      return 'polygon'
+    case SupportedChainId.BNB:
+      return 'smartchain'
+    default:
+      return 'ethereum'
+  }
+}
+
+const getTokenLogoURL = ({ address, chainId }: { address: string; chainId: SupportedChainId }) => {
+  return `https://raw.githubusercontent.com/uniswap/assets/master/blockchains/${chainIdToNetworkName(
+    chainId
+  )}/assets/${address}/logo.png`
 }
 
 const StyledLogo = styled(Logo)<{ size: string }>`
@@ -43,6 +63,7 @@ export default function CurrencyLogo({
   const arbitrumList = useCombinedActiveList()?.[42161]
   const polygon = useCombinedActiveList()?.[137]
   const celo = useCombinedActiveList()?.[42220]
+  const bnbList = useCombinedActiveList()?.[SupportedChainId.BNB]
 
   const [activeNetwork] = useActiveNetworkVersion()
 
@@ -64,6 +85,14 @@ export default function CurrencyLogo({
   }, [checkSummed, arbitrumList])
   const uriLocationsArbitrum = useHttpLocations(arbitrumURI)
 
+  const BNBURI = useMemo(() => {
+    if (checkSummed && bnbList?.[checkSummed]) {
+      return bnbList?.[checkSummed].token.logoURI
+    }
+    return undefined
+  }, [checkSummed, bnbList])
+  const uriLocationsBNB = useHttpLocations(BNBURI)
+
   const polygonURI = useMemo(() => {
     if (checkSummed && polygon?.[checkSummed]) {
       return polygon?.[checkSummed].token.logoURI
@@ -94,16 +123,26 @@ export default function CurrencyLogo({
     if (checkSummed && address) {
       const override = tempSources[address]
       return [
-        getTokenLogoURL(checkSummed),
+        getTokenLogoURL({ address: checkSummed, chainId: activeNetwork.chainId }),
         ...uriLocationsOptimism,
         ...uriLocationsArbitrum,
         ...uriLocationsPolygon,
         ...uriLocationsCelo,
+        ...uriLocationsBNB,
         override,
       ]
     }
     return []
-  }, [address, tempSources, uriLocationsArbitrum, uriLocationsOptimism, uriLocationsPolygon, uriLocationsCelo])
+  }, [
+    address,
+    tempSources,
+    activeNetwork.chainId,
+    uriLocationsOptimism,
+    uriLocationsArbitrum,
+    uriLocationsPolygon,
+    uriLocationsCelo,
+    uriLocationsBNB,
+  ])
 
   if (activeNetwork === OptimismNetworkInfo && address === '0x4200000000000000000000000000000000000006') {
     return <StyledEthereumLogo src={EthereumLogo} size={size} style={style} {...rest} />

diff --git a/src/components/Header/TopBar.tsx b/src/components/Header/TopBar.tsx
@@ -32,7 +32,13 @@ const TopBar = () => {
         <Polling />
         <AutoRow gap="6px">
           <RowFixed>
-            {activeNetwork.id === SupportedNetwork.CELO ? <Item>Celo Price:</Item> : <Item>Eth Price:</Item>}
+            {activeNetwork.id === SupportedNetwork.CELO ? (
+              <Item>Celo Price:</Item>
+            ) : activeNetwork.id === SupportedNetwork.BNB ? (
+              <Item>BNB Price:</Item>
+            ) : (
+              <Item>Eth Price:</Item>
+            )}
             <Item fontWeight="700" ml="4px">
               {formatDollarAmount(ethPrices?.current)}
             </Item>

diff --git a/src/components/Menu/NetworkDropdown.tsx b/src/components/Menu/NetworkDropdown.tsx
@@ -1,5 +1,5 @@
 import { RowFixed, RowBetween } from 'components/Row'
-import { CeloNetworkInfo, PolygonNetworkInfo, SUPPORTED_NETWORK_VERSIONS } from 'constants/networks'
+import { BNBNetworkInfo, CeloNetworkInfo, PolygonNetworkInfo, SUPPORTED_NETWORK_VERSIONS } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
 import React, { useState, useRef } from 'react'
 import { ChevronDown } from 'react-feather'
@@ -98,7 +98,7 @@ export default function NetworkDropdown() {
           <TYPE.main fontSize="14px" color={theme.white} ml="8px" mt="-2px" mr="2px" style={{ whiteSpace: 'nowrap' }}>
             {activeNetwork.name}
           </TYPE.main>
-          {[EthereumNetworkInfo, PolygonNetworkInfo, CeloNetworkInfo].includes(activeNetwork) ? null : (
+          {[EthereumNetworkInfo, PolygonNetworkInfo, CeloNetworkInfo, BNBNetworkInfo].includes(activeNetwork) ? null : (
             <Badge bgColor={activeNetwork.primaryColor} style={{ margin: '0 4px' }}>
               L2
             </Badge>

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -25,6 +25,7 @@ export const TOKEN_HIDE: { [key: string]: string[] } = {
   [SupportedNetwork.ARBITRUM]: [],
   [SupportedNetwork.OPTIMISM]: [],
   [SupportedNetwork.CELO]: [],
+  [SupportedNetwork.BNB]: [],
 }
 
 export const POOL_HIDE: { [key: string]: string[] } = {
@@ -41,7 +42,18 @@ export const POOL_HIDE: { [key: string]: string[] } = {
   [SupportedNetwork.ARBITRUM]: [],
   [SupportedNetwork.OPTIMISM]: [],
   [SupportedNetwork.CELO]: [],
+  [SupportedNetwork.BNB]: [],
 }
+
+export const START_BLOCKS: { [key: string]: number } = {
+  [SupportedNetwork.ETHEREUM]: 14292820,
+  [SupportedNetwork.POLYGON]: 25459720,
+  [SupportedNetwork.ARBITRUM]: 175,
+  [SupportedNetwork.OPTIMISM]: 10028767,
+  [SupportedNetwork.CELO]: 13916355,
+  [SupportedNetwork.BNB]: 26324014,
+}
+
 export interface WalletInfo {
   connector?: AbstractConnector
   name: string

diff --git a/src/constants/lists.ts b/src/constants/lists.ts
@@ -6,15 +6,17 @@ export const ARBITRUM_LIST = 'https://bridge.arbitrum.io/token-list-42161.json'
 export const POLYGON_LIST =
   'https://unpkg.com/[email protected]/build/quickswap-default.tokenlist.json'
 export const CELO_LIST = 'https://celo-org.github.io/celo-token-list/celo.tokenlist.json'
+export const BNB_LIST = 'https://raw.githubusercontent.com/plasmadlt/plasma-finance-token-list/master/bnb.json'
 
 // lower index == higher priority for token import
 export const DEFAULT_LIST_OF_LISTS: string[] = [
   OPTIMISM_LIST,
   ARBITRUM_LIST,
   POLYGON_LIST,
   CELO_LIST,
+  BNB_LIST,
   ...UNSUPPORTED_LIST_URLS, // need to load unsupported tokens as well
 ]
 
 // default lists to be 'active' aka searched across
-export const DEFAULT_ACTIVE_LIST_URLS: string[] = [OPTIMISM_LIST, ARBITRUM_LIST, POLYGON_LIST, CELO_LIST]
+export const DEFAULT_ACTIVE_LIST_URLS: string[] = [OPTIMISM_LIST, ARBITRUM_LIST, POLYGON_LIST, CELO_LIST, BNB_LIST]
diff --git a/src/constants/networks.ts b/src/constants/networks.ts
@@ -3,16 +3,20 @@ import ARBITRUM_LOGO_URL from '../assets/images/arbitrum.svg'
 import ETHEREUM_LOGO_URL from '../assets/images/ethereum-logo.png'
 import POLYGON_LOGO_URL from '../assets/images/polygon-logo.png'
 import CELO_LOGO_URL from '../assets/images/celo-logo.svg'
+import BNB_LOGO_URL from '../assets/images/bnb-logo.svg'
+import { SupportedChainId } from '@uniswap/sdk-core'
 
 export enum SupportedNetwork {
   ETHEREUM,
   ARBITRUM,
   OPTIMISM,
   POLYGON,
   CELO,
+  BNB,
 }
 
 export type NetworkInfo = {
+  chainId: SupportedChainId
   id: SupportedNetwork
   route: string
   name: string
@@ -24,6 +28,7 @@ export type NetworkInfo = {
 }
 
 export const EthereumNetworkInfo: NetworkInfo = {
+  chainId: SupportedChainId.MAINNET,
   id: SupportedNetwork.ETHEREUM,
   route: '',
   name: 'Ethereum',
@@ -34,6 +39,7 @@ export const EthereumNetworkInfo: NetworkInfo = {
 }
 
 export const ArbitrumNetworkInfo: NetworkInfo = {
+  chainId: SupportedChainId.ARBITRUM_ONE,
   id: SupportedNetwork.ARBITRUM,
   route: 'arbitrum',
   name: 'Arbitrum',
@@ -44,6 +50,7 @@ export const ArbitrumNetworkInfo: NetworkInfo = {
 }
 
 export const OptimismNetworkInfo: NetworkInfo = {
+  chainId: SupportedChainId.OPTIMISM,
   id: SupportedNetwork.OPTIMISM,
   route: 'optimism',
   name: 'Optimism',
@@ -54,6 +61,7 @@ export const OptimismNetworkInfo: NetworkInfo = {
 }
 
 export const PolygonNetworkInfo: NetworkInfo = {
+  chainId: SupportedChainId.POLYGON,
   id: SupportedNetwork.POLYGON,
   route: 'polygon',
   name: 'Polygon',
@@ -64,6 +72,7 @@ export const PolygonNetworkInfo: NetworkInfo = {
   blurb: '',
 }
 export const CeloNetworkInfo: NetworkInfo = {
+  chainId: SupportedChainId.CELO,
   id: SupportedNetwork.CELO,
   route: 'celo',
   name: 'Celo',
@@ -74,10 +83,23 @@ export const CeloNetworkInfo: NetworkInfo = {
   blurb: '',
 }
 
+export const BNBNetworkInfo: NetworkInfo = {
+  chainId: SupportedChainId.BNB,
+  id: SupportedNetwork.BNB,
+  route: 'bnb',
+  name: 'BNB Chain',
+  bgColor: '#F0B90B',
+  primaryColor: '#F0B90B',
+  secondaryColor: '#F0B90B',
+  imageURL: BNB_LOGO_URL,
+  blurb: '',
+}
+
 export const SUPPORTED_NETWORK_VERSIONS: NetworkInfo[] = [
   EthereumNetworkInfo,
   PolygonNetworkInfo,
   OptimismNetworkInfo,
   ArbitrumNetworkInfo,
   CeloNetworkInfo,
+  BNBNetworkInfo,
 ]
diff --git a/src/hooks/useBlocksFromTimestamps.ts b/src/hooks/useBlocksFromTimestamps.ts
@@ -1,6 +1,7 @@
 import gql from 'graphql-tag'
 import { useState, useEffect, useMemo } from 'react'
 import { splitQuery } from 'utils/queries'
+import { START_BLOCKS } from 'constants/index'
 import { useActiveNetworkVersion, useClients } from 'state/application/hooks'
 import { ApolloClient, NormalizedCacheObject } from '@apollo/client'
 
@@ -63,9 +64,13 @@ export function useBlocksFromTimestamps(
       const formatted = []
       for (const t in networkBlocks) {
         if (networkBlocks[t].length > 0) {
+          const number = networkBlocks[t][0]['number']
+          const deploymentBlock = START_BLOCKS[activeNetwork.id]
+          const adjustedNumber = number > deploymentBlock ? number : deploymentBlock
+
           formatted.push({
             timestamp: t.split('t')[1],
-            number: networkBlocks[t][0]['number'],
+            number: adjustedNumber,
           })
         }
       }

diff --git a/src/state/application/hooks.ts b/src/state/application/hooks.ts
@@ -10,6 +10,8 @@ import {
   polygonClient,
   celoClient,
   celoBlockClient,
+  bscClient,
+  bscBlockClient,
 } from 'apollo/client'
 import { NetworkInfo, SupportedNetwork } from 'constants/networks'
 import { useCallback, useMemo } from 'react'
@@ -138,6 +140,8 @@ export function useDataClient(): ApolloClient<NormalizedCacheObject> {
       return polygonClient
     case SupportedNetwork.CELO:
       return celoClient
+    case SupportedNetwork.BNB:
+      return bscClient
     default:
       return client
   }
@@ -157,6 +161,8 @@ export function useBlockClient(): ApolloClient<NormalizedCacheObject> {
       return polygonBlockClient
     case SupportedNetwork.CELO:
       return celoBlockClient
+    case SupportedNetwork.BNB:
+      return bscBlockClient
     default:
       return blockClient
   }

diff --git a/src/state/pools/reducer.ts b/src/state/pools/reducer.ts
@@ -85,6 +85,7 @@ export const initialState: PoolsState = {
     [SupportedNetwork.OPTIMISM]: {},
     [SupportedNetwork.POLYGON]: {},
     [SupportedNetwork.CELO]: {},
+    [SupportedNetwork.BNB]: {},
   },
 }
 

diff --git a/src/state/protocol/reducer.ts b/src/state/protocol/reducer.ts
@@ -64,6 +64,12 @@ export const initialState: ProtocolState = {
     transactions: undefined,
     lastUpdated: undefined,
   },
+  [SupportedNetwork.BNB]: {
+    data: undefined,
+    chartData: undefined,
+    transactions: undefined,
+    lastUpdated: undefined,
+  },
 }
 
 export default createReducer(initialState, (builder) =>