Add whitelist rigy (#304)

src/components/AccountSearch/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import 'feather-icons'
-import { useParams, withRouter } from 'react-router-dom'
+import { withRouter } from 'react-router-dom'
 import styled from 'styled-components'
 import { ButtonDark } from '../ButtonStyled'
 import { isAddress } from '../../utils'
@@ -13,7 +13,7 @@ import { Divider } from '..'
 import { Flex, Text } from 'rebass'
 
 import { X } from 'react-feather'
-import { NETWORK_INFOS } from '../../constants/networks'
+import { NETWORKS_INFO } from '../../constants/networks'
 import { useNetworksInfo } from '../../contexts/NetworkInfo'
 import { BasicLink } from '../Link'
 import { RowFixed } from '../Row'
@@ -123,9 +123,9 @@ function AccountSearch({ history, small, shortenAddress }) {
                 <DashGrid key={account.address} center={true} style={{ height: 'fit-content', padding: '1rem 0 0 0' }}>
                   <Flex area='account' justifyContent='space-between'>
                     <Wrapper isWrap={small}>
-                      <BasicLink to={'/' + NETWORK_INFOS[account.chainId]?.urlKey + '/account/' + account.address}>
+                      <BasicLink to={'/' + NETWORKS_INFO[account.chainId]?.urlKey + '/account/' + account.address}>
                         <RowFixed>
-                          {small && <img src={NETWORK_INFOS[account.chainId].icon} width='16px' style={{ marginRight: '4px' }} />}
+                          {small && <img src={NETWORKS_INFO[account.chainId].icon} width='16px' style={{ marginRight: '4px' }} />}
                           <AccountLink isSmall={small}>
                             {shortenAddress || small
                               ? `${account.address?.slice(0, 6) + '...' + account.address?.slice(38, 42)}`

src/components/LPList/index.js

@@ -14,7 +14,7 @@ import { TYPE } from '../../Theme'
 import DoubleTokenLogo from '../DoubleLogo'
 import { RowFixed } from '../Row'
 import useTheme from '../../hooks/useTheme'
-import { NETWORK_INFOS } from '../../constants/networks'
+import { NETWORKS_INFO } from '../../constants/networks'
 import { aggregateLps } from '../../utils/aggregateData'
 
 dayjs.extend(utc)
@@ -129,15 +129,15 @@ function LPList({ lps, disbaleLinks, maxItems = 10 }) {
               textOverflow: 'ellipsis',
               overflow: 'hidden',
             }}
-            to={'/' + NETWORK_INFOS[lp.chainId].urlKey + '/account/' + lp.user.id}
+            to={'/' + NETWORKS_INFO[lp.chainId].urlKey + '/account/' + lp.user.id}
           >
             {below800 ? lp.user.id.slice(0, 5) + '...' + lp.user.id.slice(39, 42) : lp.user.id}
           </CustomLink>
         </DataText>
         {isShowNetworkColumn && (
           <DataText area='network'>
-            <Link to={'/' + NETWORK_INFOS[lp.chainId].urlKey}>
-              <img src={NETWORK_INFOS[lp.chainId].icon} width={25} />
+            <Link to={'/' + NETWORKS_INFO[lp.chainId].urlKey}>
+              <img src={NETWORKS_INFO[lp.chainId].icon} width={25} />
             </Link>
           </DataText>
         )}
@@ -150,15 +150,15 @@ function LPList({ lps, disbaleLinks, maxItems = 10 }) {
 
         {!below600 && (
           <DataText>
-            <CustomLink area='pair' to={'/' + NETWORK_INFOS[lp.chainId].urlKey + '/pair/' + lp.pairAddress}>
+            <CustomLink area='pair' to={'/' + NETWORKS_INFO[lp.chainId].urlKey + '/pair/' + lp.pairAddress}>
               <RowFixed>
                 {!below600 && (
                   <DoubleTokenLogo
                     a0={lp.token0}
                     a1={lp.token1}
                     size={16}
                     margin={true}
-                    networkInfo={NETWORK_INFOS[lp.chainId]}
+                    networkInfo={NETWORKS_INFO[lp.chainId]}
                   />
                 )}
                 {lp.pairName}
@@ -168,7 +168,7 @@ function LPList({ lps, disbaleLinks, maxItems = 10 }) {
         )}
 
         <DataText>
-          <CustomLink area='pool' to={'/' + NETWORK_INFOS[lp.chainId].urlKey + '/pool/' + lp.poolAddress}>
+          <CustomLink area='pool' to={'/' + NETWORKS_INFO[lp.chainId].urlKey + '/pool/' + lp.poolAddress}>
             <RowFixed>{shortenAddress(lp.poolAddress, 3)}</RowFixed>
           </CustomLink>
         </DataText>

src/components/PairList/index.js

@@ -16,7 +16,7 @@ import QuestionHelper from '../QuestionHelper'
 import { TYPE } from '../../Theme'
 import { MAX_ALLOW_APY } from '../../constants'
 import useTheme from '../../hooks/useTheme'
-import { NETWORK_INFOS } from '../../constants/networks'
+import { NETWORKS_INFO } from '../../constants/networks'
 import { aggregatePairs } from '../../utils/aggregateData'
 import { MouseoverTooltip } from '../Tooltip'
 
@@ -186,21 +186,21 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 5 }) {
               a0={pairData.token0.id}
               a1={pairData.token1.id}
               margin={!below740}
-              networkInfo={NETWORK_INFOS[pairData.chainId]}
+              networkInfo={NETWORKS_INFO[pairData.chainId]}
             />
             <CustomLink
               style={{ marginLeft: '20px', whiteSpace: 'nowrap' }}
-              to={'/' + NETWORK_INFOS[pairData.chainId].urlKey + '/pair/' + pairAddress}
+              to={'/' + NETWORKS_INFO[pairData.chainId].urlKey + '/pair/' + pairAddress}
               color={color}
             >
               <FormattedName text={showData.name} maxCharacters={below600 ? 8 : 16} adjustSize={true} link={true} />
             </CustomLink>
           </DataText>
           {isShowNetworkColumn && (
             <DataText area='network'>
-              <Link to={'/' + NETWORK_INFOS[pairData.chainId].urlKey}>
-                <MouseoverTooltip text={NETWORK_INFOS[pairData.chainId].name} width='unset'>
-                  <img src={NETWORK_INFOS[pairData.chainId].icon} width={25} />
+              <Link to={'/' + NETWORKS_INFO[pairData.chainId].urlKey}>
+                <MouseoverTooltip text={NETWORKS_INFO[pairData.chainId].name} width='unset'>
+                  <img src={NETWORKS_INFO[pairData.chainId].icon} width={25} />
                 </MouseoverTooltip>
               </Link>
             </DataText>
@@ -234,8 +234,8 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 5 }) {
           valueToCompareB = parseFloat(MAP_SHOW_DATA(pairB)[sortedColumn])
         } else if (sortedColumn === FIELDS.NETWORK) {
           //reverse order
-          valueToCompareB = NETWORK_INFOS[pairA.chainId].name
-          valueToCompareA = NETWORK_INFOS[pairB.chainId].name
+          valueToCompareB = NETWORKS_INFO[pairA.chainId].name
+          valueToCompareA = NETWORKS_INFO[pairB.chainId].name
         }
         if (valueToCompareA == valueToCompareB) {
           if (parseFloat(MAP_SHOW_DATA(pairA)[FIELDS.LIQ]) == parseFloat(MAP_SHOW_DATA(pairB)[FIELDS.LIQ])) {

src/components/PinnedData/index.js

@@ -10,7 +10,7 @@ import AccountSearch from '../AccountSearch'
 import { Bookmark, ChevronRight, X } from 'react-feather'
 import FormattedName from '../FormattedName'
 import { shortenAddress } from '../../utils'
-import { NETWORK_INFOS } from '../../constants/networks'
+import { NETWORKS_INFO } from '../../constants/networks'
 
 const RightColumn = styled.div`
   position: sticky;
@@ -98,9 +98,9 @@ function PinnedData({ open, setSavedOpen }) {
                 return (
                   <RowBetween key={pair.address}>
                     <Wrapper>
-                      <Link to={'/' + NETWORK_INFOS[pair.chainId].urlKey + '/pair/' + address}>
+                      <Link to={'/' + NETWORKS_INFO[pair.chainId].urlKey + '/pair/' + address}>
                         <RowFixed>
-                          <img src={NETWORK_INFOS[pair.chainId].icon} width='16px' style={{ marginRight: '4px' }} />
+                          <img src={NETWORKS_INFO[pair.chainId].icon} width='16px' style={{ marginRight: '4px' }} />
                           <TYPE.header>
                             <FormattedName
                               text={pair.token0Symbol + '/' + pair.token1Symbol}
@@ -138,9 +138,9 @@ function PinnedData({ open, setSavedOpen }) {
                 return (
                   <RowBetween key={pool.address}>
                     <Wrapper>
-                      <Link to={'/' + NETWORK_INFOS[pool.chainId].urlKey + '/pool/' + pool.address}>
+                      <Link to={'/' + NETWORKS_INFO[pool.chainId].urlKey + '/pool/' + pool.address}>
                         <RowFixed>
-                          <img src={NETWORK_INFOS[pool.chainId].icon} width='16px' style={{ marginRight: '4px' }} />
+                          <img src={NETWORKS_INFO[pool.chainId].icon} width='16px' style={{ marginRight: '4px' }} />
                           <TYPE.header>
                             <FormattedName text={shortenAddress(pool.address, 3)} maxCharacters={12} fontSize={'12px'} />
                           </TYPE.header>
@@ -174,9 +174,9 @@ function PinnedData({ open, setSavedOpen }) {
                 return (
                   <RowBetween key={address}>
                     <Wrapper>
-                      <Link to={'/' + NETWORK_INFOS[token.chainId].urlKey + '/token/' + address}>
+                      <Link to={'/' + NETWORKS_INFO[token.chainId].urlKey + '/token/' + address}>
                         <RowFixed>
-                          <img src={NETWORK_INFOS[token.chainId].icon} width='16px' style={{ marginRight: '4px' }} />
+                          <img src={NETWORKS_INFO[token.chainId].icon} width='16px' style={{ marginRight: '4px' }} />
                           <TYPE.header ml={'6px'}>
                             <FormattedName text={token.symbol} maxCharacters={12} fontSize={'12px'} />
                           </TYPE.header>

src/components/Search/index.js

@@ -16,7 +16,7 @@ import { OVERVIEW_TOKEN_BLACKLIST, PAIR_BLACKLIST } from '../../constants'
 import { PAIR_SEARCH, TOKEN_SEARCH } from '../../apollo/queries'
 import FormattedName from '../FormattedName'
 import { TYPE } from '../../Theme'
-import { NETWORK_INFOS } from '../../constants/networks'
+import { NETWORKS_INFO } from '../../constants/networks'
 
 const Container = styled.div`
   height: 48px;
@@ -436,22 +436,22 @@ export const Search = ({ small = false }) => {
           )}
           {filteredPairList &&
             filteredPairList.slice(0, pairsShown).map(pair => {
-              if (pair?.token0?.id === NETWORK_INFOS[pair.chainId].wethAddress) {
-                pair.token0.name = NETWORK_INFOS[pair.chainId].nativeTokenWrappedName
-                pair.token0.symbol = NETWORK_INFOS[pair.chainId].nativeTokenSymbol
+              if (pair?.token0?.id === NETWORKS_INFO[pair.chainId].wethAddress) {
+                pair.token0.name = NETWORKS_INFO[pair.chainId].nativeTokenWrappedName
+                pair.token0.symbol = NETWORKS_INFO[pair.chainId].nativeTokenSymbol
               }
-              if (pair?.token1.id === NETWORK_INFOS[pair.chainId].wethAddress) {
-                pair.token1.name = NETWORK_INFOS[pair.chainId].nativeTokenWrappedName
-                pair.token1.symbol = NETWORK_INFOS[pair.chainId].nativeTokenSymbol
+              if (pair?.token1.id === NETWORKS_INFO[pair.chainId].wethAddress) {
+                pair.token1.name = NETWORKS_INFO[pair.chainId].nativeTokenWrappedName
+                pair.token1.symbol = NETWORKS_INFO[pair.chainId].nativeTokenSymbol
               }
               return (
-                <BasicLink to={'/' + NETWORK_INFOS[pair.chainId].urlKey + '/pair/' + pair.id} key={pair.id} onClick={onDismiss}>
+                <BasicLink to={'/' + NETWORKS_INFO[pair.chainId].urlKey + '/pair/' + pair.id} key={pair.id} onClick={onDismiss}>
                   <MenuItem>
                     <DoubleTokenLogo
                       a0={pair?.token0?.id}
                       a1={pair?.token1?.id}
                       margin={true}
-                      networkInfo={NETWORK_INFOS[pair.chainId]}
+                      networkInfo={NETWORKS_INFO[pair.chainId]}
                     />
                     <TYPE.body style={{ marginLeft: '10px' }}>{pair.token0.symbol + '-' + pair.token1.symbol} Pair</TYPE.body>
                   </MenuItem>
@@ -479,10 +479,10 @@ export const Search = ({ small = false }) => {
           )}
           {filteredTokenList.slice(0, tokensShown).map(token => {
             return (
-              <BasicLink to={'/' + NETWORK_INFOS[token.chainId].urlKey + '/token/' + token.id} key={token.id} onClick={onDismiss}>
+              <BasicLink to={'/' + NETWORKS_INFO[token.chainId].urlKey + '/token/' + token.id} key={token.id} onClick={onDismiss}>
                 <MenuItem>
                   <RowFixed>
-                    <TokenLogo address={token.id} style={{ marginRight: '10px' }} networkInfo={NETWORK_INFOS[token.chainId]} />
+                    <TokenLogo address={token.id} style={{ marginRight: '10px' }} networkInfo={NETWORKS_INFO[token.chainId]} />
                     <FormattedName text={token.name} maxCharacters={20} style={{ marginRight: '6px' }} />
                     (<FormattedName text={token.symbol} maxCharacters={6} />)
                   </RowFixed>

src/components/TokenList/index.js

@@ -17,7 +17,7 @@ import FormattedName from '../FormattedName'
 import { TYPE } from '../../Theme'
 import LocalLoader from '../LocalLoader'
 import { useAllTokenData } from '../../contexts/TokenData'
-import { NETWORK_INFOS } from '../../constants/networks'
+import { NETWORKS_INFO } from '../../constants/networks'
 import { aggregateTokens } from '../../utils/aggregateData'
 import { MouseoverTooltip } from '../Tooltip'
 
@@ -197,8 +197,8 @@ function TopTokenList({ itemMax = 5 }) {
             valueToCompareA = b[sortedColumn].toLowerCase()
           } else if (sortedColumn === SORT_FIELD.NETWORK) {
             //reverse order
-            valueToCompareB = NETWORK_INFOS[a.chainId].name
-            valueToCompareA = NETWORK_INFOS[b.chainId].name
+            valueToCompareB = NETWORKS_INFO[a.chainId].name
+            valueToCompareA = NETWORKS_INFO[b.chainId].name
           } else {
             valueToCompareA = parseFloat(a[sortedColumn])
             valueToCompareB = parseFloat(b[sortedColumn])
@@ -221,10 +221,10 @@ function TopTokenList({ itemMax = 5 }) {
         <DataText area='name' fontWeight='500'>
           <Row>
             {!below680 && <div style={{ marginRight: '1rem', width: '10px' }}>{index}</div>}
-            <TokenLogo address={item.id} networkInfo={NETWORK_INFOS[item.chainId]} />
+            <TokenLogo address={item.id} networkInfo={NETWORKS_INFO[item.chainId]} />
             <CustomLink
               style={{ marginLeft: '16px', whiteSpace: 'nowrap' }}
-              to={'/' + NETWORK_INFOS[item.chainId].urlKey + '/token/' + item.id}
+              to={'/' + NETWORKS_INFO[item.chainId].urlKey + '/token/' + item.id}
             >
               <FormattedName
                 text={below680 ? item.symbol : item.name}
@@ -237,9 +237,9 @@ function TopTokenList({ itemMax = 5 }) {
         </DataText>
         {isShowNetworkColumn && (
           <DataText area='network'>
-            <Link to={'/' + NETWORK_INFOS[item.chainId].urlKey}>
-              <MouseoverTooltip text={NETWORK_INFOS[item.chainId].name} width='unset'>
-                <img src={NETWORK_INFOS[item.chainId].icon} width={25} />
+            <Link to={'/' + NETWORKS_INFO[item.chainId].urlKey}>
+              <MouseoverTooltip text={NETWORKS_INFO[item.chainId].name} width='unset'>
+                <img src={NETWORKS_INFO[item.chainId].icon} width={25} />
               </MouseoverTooltip>
             </Link>
           </DataText>

src/components/TokenLogo/index.js

@@ -57,7 +57,6 @@ export function getCustomLogo({ address, chainId, src, size, setError, ...rest }
   )
 }
 
-//todo: dò reference TokenLogo networkInfo
 export default function TokenLogo({ address, networkInfo, header = false, size = '24px', ...rest }) {
   const [error, setError] = useState(false)
 

src/components/TxnList/index.js

@@ -17,7 +17,7 @@ import DropdownSelect from '../DropdownSelect'
 import FormattedName from '../FormattedName'
 import { TYPE } from '../../Theme'
 import useTheme from '../../hooks/useTheme'
-import { NETWORK_INFOS } from '../../constants/networks'
+import { NETWORKS_INFO } from '../../constants/networks'
 import { aggregateGlobalTxns } from '../../utils/aggregateData'
 import { MouseoverTooltip } from '../Tooltip'
 
@@ -289,8 +289,8 @@ function TxnList({ transactions, symbol0Override, symbol1Override, color }) {
         let valueToCompareA = null
         let valueToCompareB = null
         if (sortedColumn === SORT_FIELD.NETWORK) {
-          valueToCompareA = NETWORK_INFOS[a.chainId].name
-          valueToCompareB = NETWORK_INFOS[b.chainId].name
+          valueToCompareA = NETWORKS_INFO[a.chainId].name
+          valueToCompareB = NETWORKS_INFO[b.chainId].name
         } else {
           valueToCompareA = parseFloat(a[sortedColumn])
           valueToCompareB = parseFloat(b[sortedColumn])
@@ -315,7 +315,7 @@ function TxnList({ transactions, symbol0Override, symbol1Override, color }) {
   const isShowDropdown = below900 || (!below1080 && below1280)
 
   const ListItem = ({ item }) => {
-    const urls = useMemo(() => getEtherScanUrls(NETWORK_INFOS[item.chainId]), [item.chainId])
+    const urls = useMemo(() => getEtherScanUrls(NETWORKS_INFO[item.chainId]), [item.chainId])
     if (item.token0Symbol === 'WETH') {
       item.token0Symbol = 'ETH'
     }
@@ -333,9 +333,9 @@ function TxnList({ transactions, symbol0Override, symbol1Override, color }) {
         </DataText>
         {isShowNetworkColumn && (
           <DataText area='network'>
-            <RouterLink to={'/' + NETWORK_INFOS[item.chainId].urlKey}>
-              <MouseoverTooltip text={NETWORK_INFOS[item.chainId].name} width='unset'>
-                <img src={NETWORK_INFOS[item.chainId].icon} width={25} />
+            <RouterLink to={'/' + NETWORKS_INFO[item.chainId].urlKey}>
+              <MouseoverTooltip text={NETWORKS_INFO[item.chainId].name} width='unset'>
+                <img src={NETWORKS_INFO[item.chainId].icon} width={25} />
               </MouseoverTooltip>
             </RouterLink>
           </DataText>

src/constants/networks.ts

@@ -82,7 +82,7 @@ export type NETWORK_INFO = {
   }
 }
 
-export const NETWORK_INFOS: { [key in ChainId]: NETWORK_INFO } = {
+export const NETWORKS_INFO: { [key in ChainId]: NETWORK_INFO } = {
   [ChainId.MAINNET]: {
     chainId: ChainId.MAINNET,
     icon: Mainnet,

src/constants/tokenLists/polygon.tokenlist.js

@@ -67,6 +67,14 @@ const POLYGON_TOKEN_LIST = {
     decimals: 18,
     logoURI: 'https://i.imgur.com/o914JpY.jpg',
   },
+  '0x9F994e2783b44C83204377589854A17c6b0c226d': {
+    chainId: 137,
+    address: '0x9F994e2783b44C83204377589854A17c6b0c226d',
+    symbol: 'RIGY',
+    name: 'RIGY',
+    decimals: 18,
+    logoURI: 'https://i.imgur.com/ZQWH9gg.jpg',
+  },
 }
 
 export default POLYGON_TOKEN_LIST

src/contexts/NetworkInfo.js

@@ -1,9 +1,9 @@
 import React, { createContext, useContext, useReducer, useMemo, useCallback } from 'react'
-import { NETWORK_INFOS } from '../constants/networks'
+import { NETWORKS_INFO } from '../constants/networks'
 const UPDATE_CHAIN = 'UPDATE_CHAIN'
 
 export const NetworksInfoEnv = process.env.REACT_APP_SUPPORT_CHAINS_ID.split(',').map(
-  supportChainId => NETWORK_INFOS[supportChainId]
+  supportChainId => NETWORKS_INFO[supportChainId]
 )
 const INITIAL_STATE = {
   networksInfo: [NetworksInfoEnv[0]],

src/contexts/PairData.js

@@ -703,7 +703,6 @@ export function usePairChartData(pairAddress) {
  * Get list of all pairs in Kyberswap
  */
 export function useAllPairData() {
-  //todo namgold: dò lại
   const [state] = usePairDataContext()
   const [networksInfo] = useNetworksInfo()
   return networksInfo.map(networkInfo => state?.[networkInfo?.chainId] || {})