Merge branch 'main' of github.com:KyberNetwork/kyberswap-interface in…

…to feat/zkevm
KyberNetwork · Aug 15, 2023 · 0c0b5b5 · 0c0b5b5
2 parents 10c7f5a + 814c39e
commit 0c0b5b5
Show file tree

Hide file tree

Showing 17 changed files with 177 additions and 105 deletions.
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -141,7 +141,7 @@ const IconImage = styled.img<{ isChristmas?: boolean }>`
 `
 
 const BlogWrapper = styled.span`
-  @media (max-width: 1440px) {
+  @media (max-width: 1600px) {
     display: none;
   }
 `

diff --git a/src/components/TradeRouting/index.tsx b/src/components/TradeRouting/index.tsx
@@ -197,11 +197,11 @@ const Routing = ({ tradeComposition, maxHeight, inputAmount, outputAmount, curre
 }
 
 const TokenRoute = ({ token }: { token: Token }) => {
-  const currency = useCurrencyV2(token.address)
+  const currency = useCurrencyV2(token.wrapped.address)
   return (
     <StyledToken
       style={{ marginRight: 0 }}
-      href={getEtherscanLink(token.chainId, token?.address, 'token')}
+      href={getEtherscanLink(token.chainId, token?.wrapped.address, 'token')}
       target="_blank"
     >
       <CurrencyLogo currency={currency} size="16px" />

diff --git a/src/components/WalletPopup/WalletView.tsx b/src/components/WalletPopup/WalletView.tsx
@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro'
+import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { ChevronLeft, FileText, LogOut, StopCircle, X } from 'react-feather'
@@ -10,6 +10,7 @@ import { ReactComponent as DragHandleIcon } from 'assets/svg/wallet_drag_handle.
 import CopyHelper from 'components/Copy'
 import SendIcon from 'components/Icons/SendIcon'
 import Row from 'components/Row'
+import { MouseoverTooltip } from 'components/Tooltip'
 import AccountInfo from 'components/WalletPopup/AccountInfo'
 import MyAssets from 'components/WalletPopup/MyAssets'
 import PinButton from 'components/WalletPopup/PinButton'
@@ -323,7 +324,7 @@ export default function WalletView({
                 </Flex>
               </>
             ) : (
-              <Flex alignItems={'center'} style={{ gap: 5 }} color={theme.subText}>
+              <Flex alignItems={'center'} style={{ gap: 8 }} color={theme.subText}>
                 {walletKey && (
                   <IconWrapper>
                     <img
@@ -336,9 +337,15 @@ export default function WalletView({
                 <Text as="span" fontWeight="500">
                   {shortenAddress(chainId, account, 5, false)}
                 </Text>
-                <CopyHelper toCopy={account} />
-                <ExternalLinkIcon href={getEtherscanLink(chainId, account, 'address')} color={theme.subText} />
-                <LogOutIcon size={16} onClick={disconnectWallet} />
+                <MouseoverTooltip text={t`Copy wallet address`} width="fit-content" placement="top">
+                  <CopyHelper toCopy={account} />
+                </MouseoverTooltip>
+                <MouseoverTooltip text={t`Open scan explorer`} width="fit-content" placement="top">
+                  <ExternalLinkIcon href={getEtherscanLink(chainId, account, 'address')} color={theme.subText} />
+                </MouseoverTooltip>
+                <MouseoverTooltip text={t`Disconnect wallet`} width="fit-content" placement="top">
+                  <LogOutIcon size={16} onClick={disconnectWallet} />
+                </MouseoverTooltip>
               </Flex>
             )}
             <Flex style={{ gap: 20 }} alignItems="center">

diff --git a/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx b/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx
@@ -11,23 +11,29 @@ import { ReactComponent as TreadingSecurity } from 'assets/svg/security_trading.
 import { CollapseItem } from 'components/Collapse'
 import { getSecurityTokenInfo } from 'components/swapv2/TokenInfo/utils'
 import useTheme from 'hooks/useTheme'
+import { useIsDarkMode } from 'state/user/hooks'
 
 import { Container } from '../index'
 import Content from './Content'
 import Header from './Header'
 
 export default function SecurityInfo({ token }: { token: Token | undefined }) {
   const theme = useTheme()
-  const style: CSSProperties = { background: rgba(theme.black, 0.2), borderRadius: '16px', padding: '0' }
-  const headerStyle: CSSProperties = { background: rgba(theme.black, 0.48) }
+  const isDarkMode = useIsDarkMode()
+  const style: CSSProperties = {
+    background: isDarkMode ? rgba(theme.black, 0.2) : rgba(theme.subText, 0.04),
+    borderRadius: '16px',
+    padding: '0',
+  }
+  const headerStyle: CSSProperties = { background: isDarkMode ? rgba(theme.black, 0.48) : rgba(theme.subText, 0.08) }
   const arrowStyle: CSSProperties = { marginRight: '6px', color: theme.subText }
-  const { data, isLoading } = useGetSecurityTokenInfoQuery(
+  const { data, isLoading, error } = useGetSecurityTokenInfoQuery(
     { chainId: token?.chainId as ChainId, address: token?.address ?? '' },
     { skip: !token?.address },
   )
 
   const { contractData, tradingData, totalWarningContract, totalWarningTrading, totalRiskContract, totalRiskTrading } =
-    useMemo(() => getSecurityTokenInfo(data), [data])
+    useMemo(() => getSecurityTokenInfo(error ? undefined : data), [data, error])
 
   return (
     <Container>

diff --git a/src/constants/networks/arbitrum.ts b/src/constants/networks/arbitrum.ts
@@ -64,7 +64,11 @@ const arbitrumInfo: EVMNetworkInfo = {
     routers: '0xF9c2b5746c946EF883ab2660BbbB1f10A5bdeAb4',
     farms: ['0x7D5ba536ab244aAA1EA42aB88428847F25E3E676'],
     farmv2Quoter: '0x6AFeb9EDd6Cf44fA8E89b1eee28284e6dD7705C8',
-    farmV2S: ['0xE44ec65521B85612fa7BC45d842645Fb4B690E4b', '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43'],
+    farmV2S: [
+      '0xE44ec65521B85612fa7BC45d842645Fb4B690E4b',
+      '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43',
+      '0xf2BcDf38baA52F6b0C1Db5B025DfFf01Ae1d6dBd',
+    ],
   },
   limitOrder: {
     production: '0x227B0c196eA8db17A665EA6824D972A64202E936',

diff --git a/src/constants/networks/avax.ts b/src/constants/networks/avax.ts
@@ -73,7 +73,11 @@ const avaxInfo: EVMNetworkInfo = {
     routers: '0xF9c2b5746c946EF883ab2660BbbB1f10A5bdeAb4',
     farms: ['0x7D5ba536ab244aAA1EA42aB88428847F25E3E676'],
     farmv2Quoter: '0x6AFeb9EDd6Cf44fA8E89b1eee28284e6dD7705C8',
-    farmV2S: ['0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e', '0x3d6afe2fb73ffed2e3dd00c501a174554e147a43'],
+    farmV2S: [
+      '0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e',
+      '0x3d6afe2fb73ffed2e3dd00c501a174554e147a43',
+      '0xf2BcDf38baA52F6b0C1Db5B025DfFf01Ae1d6dBd',
+    ],
   },
   limitOrder: {
     development: '0x1877Ec0770901cc6886FDA7E7525a78c2Ed4e975',

diff --git a/src/constants/networks/matic.ts b/src/constants/networks/matic.ts
@@ -68,7 +68,11 @@ const maticInfo: EVMNetworkInfo = {
     routers: '0xF9c2b5746c946EF883ab2660BbbB1f10A5bdeAb4',
     farms: ['0x7D5ba536ab244aAA1EA42aB88428847F25E3E676'],
     farmv2Quoter: '0x6AFeb9EDd6Cf44fA8E89b1eee28284e6dD7705C8',
-    farmV2S: ['0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e', '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43'],
+    farmV2S: [
+      '0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e',
+      '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43',
+      '0xf2BcDf38baA52F6b0C1Db5B025DfFf01Ae1d6dBd',
+    ],
   },
   limitOrder: {
     development: '0x3C2E9227A6d3779e5b469E425CAa7067b40Ff124',

diff --git a/src/constants/networks/optimism.ts b/src/constants/networks/optimism.ts
@@ -59,7 +59,11 @@ const optimismInfo: EVMNetworkInfo = {
     routers: '0xF9c2b5746c946EF883ab2660BbbB1f10A5bdeAb4',
     farms: ['0x7D5ba536ab244aAA1EA42aB88428847F25E3E676'],
     farmv2Quoter: '0x6AFeb9EDd6Cf44fA8E89b1eee28284e6dD7705C8',
-    farmV2S: ['0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e', '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43'],
+    farmV2S: [
+      '0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e',
+      '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43',
+      '0xf2BcDf38baA52F6b0C1Db5B025DfFf01Ae1d6dBd',
+    ],
   },
   limitOrder: {
     development: '0xAF800D3EB207BAFBadE540554DF8bDCe561166f8',

diff --git a/src/hooks/useTokenInfo.ts b/src/hooks/useTokenInfo.ts
@@ -18,20 +18,28 @@ export interface TokenInfo {
   name: string
 }
 
-export default function useTokenInfo(token: Token | undefined): { data: TokenInfo; loading: boolean; error: any } {
+export default function useTokenInfo(token: Token | undefined): {
+  data: TokenInfo
+  loading: boolean
+  error: any
+} {
   const { isSolana, chainId: currentChain } = useActiveWeb3React()
   const chainId = token?.chainId || currentChain
   const coingeckoAPI = useCoingeckoAPI()
 
   const tokenAddress = isSolana ? token?.address || '' : (token?.address || '').toLowerCase()
-  const { data, error } = useGetMarketTokenInfoQuery(
+  const {
+    data: rawData,
+    error,
+    isFetching,
+  } = useGetMarketTokenInfoQuery(
     { chainId, address: tokenAddress, coingeckoAPI },
     { skip: !tokenAddress, pollingInterval: 60_000 },
   )
 
-  const loading = !data
+  const data = error ? {} : rawData
 
-  const result = {
+  const result: TokenInfo = {
     price: data?.market_data?.current_price?.usd || 0,
     marketCap: data?.market_data?.market_cap?.usd || 0,
     marketCapRank: data?.market_data?.market_cap_rank || 0,
@@ -44,5 +52,5 @@ export default function useTokenInfo(token: Token | undefined): { data: TokenInf
     name: data?.name || '',
   }
 
-  return { data: result, loading, error }
+  return { data: result, loading: isFetching, error }
 }
diff --git a/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx b/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx
@@ -34,6 +34,7 @@ import { useFarmV2Action, useUserFarmV2Info } from 'state/farms/elasticv2/hooks'
 import { ElasticFarmV2 } from 'state/farms/elasticv2/types'
 import { getFormattedTimeFromSecond } from 'utils/formatTime'
 import { formatDollarAmount } from 'utils/numbers'
+import { getTokenSymbolWithHardcode } from 'utils/tokenInfo'
 
 import { convertTickToPrice } from '../utils'
 
@@ -107,7 +108,7 @@ function FarmCard({
   isApproved: boolean
 }) {
   const theme = useTheme()
-  const { account, networkInfo } = useActiveWeb3React()
+  const { account, networkInfo, chainId } = useActiveWeb3React()
   const [activeRangeIndex, setActiveRangeIndex] = useState(farm.ranges[0].index)
 
   const [, setSharePoolAddress] = useShareFarmAddress()
@@ -213,7 +214,8 @@ function FarmCard({
                 }}
               >
                 <Text fontSize="16px" lineHeight="20px" color={theme.primary}>
-                  {`${farm.token0.symbol} - ${farm.token1.symbol}`}
+                  {getTokenSymbolWithHardcode(chainId, farm.token0.wrapped.address, farm.token0.symbol)} -{' '}
+                  {getTokenSymbolWithHardcode(chainId, farm.token1.wrapped.address, farm.token1.symbol)}
                 </Text>
               </Link>
               <IconButton>

diff --git a/src/pages/Farm/ElasticFarmv2/components/ListView.tsx b/src/pages/Farm/ElasticFarmv2/components/ListView.tsx
@@ -19,7 +19,6 @@ import HorizontalScroll from 'components/HorizontalScroll'
 import HoverInlineText from 'components/HoverInlineText'
 import { TwoWayArrow } from 'components/Icons'
 import Harvest from 'components/Icons/Harvest'
-import { RowBetween } from 'components/Row'
 import { MouseoverTooltip, MouseoverTooltipDesktopOnly } from 'components/Tooltip'
 import TransactionConfirmationModal, { TransactionErrorContent } from 'components/TransactionConfirmationModal'
 import { ButtonColorScheme, MinimalActionButton } from 'components/YieldPools/ElasticFarmGroup/buttons'
@@ -154,11 +153,12 @@ export const ListView = ({
   const maxFarmAPR = Math.max(...farm.ranges.map(r => r.apr || 0))
 
   const mixpanelPayload = { farm_pool_address: farm.poolAddress, farm_id: farm.id, farm_fid: farm.fId }
+  const above1500 = useMedia('(min-width: 1500px)')
 
   return (
     <Wrapper isDeposited={!!stakedPos.length}>
-      <RowBetween gap="1rem">
-        <Flex alignItems="center" justifyContent="space-between">
+      <Flex justifyContent="space-between" sx={{ gap: '1rem' }}>
+        <Flex alignItems="center" justifyContent="space-between" width="max-content">
           <DoubleCurrencyLogo currency0={farm.token0} currency1={farm.token1} />
           <Link
             to={addliquidityElasticPool}
@@ -193,41 +193,48 @@ export const ListView = ({
           </Flex>
         </Flex>
 
-        <HorizontalScroll
-          style={{ gap: '8px', justifyContent: 'flex-end' }}
-          noShadow
-          items={['-1'].concat(farm.ranges.map(item => item.index.toString()))}
-          renderItem={(item, index) => {
-            if (item === '-1')
-              return (
-                <Text color={theme.subText} fontSize={12} fontWeight="500" marginRight="4px">
-                  <Trans>Available Farming Range</Trans>
-                </Text>
-              )
-            const range = farm.ranges.find(r => r.index === +item)
-            if (!range) return null
-            return (
-              <Flex
-                alignItems="center"
-                sx={{ gap: '2px' }}
-                color={range.isRemoved ? theme.warning : theme.subText}
-                fontSize={12}
-                fontWeight="500"
-              >
-                {convertTickToPrice(farm.token0, farm.token1, range.tickLower, farm.pool.fee)}
-                <TwoWayArrow />
-                {convertTickToPrice(farm.token0, farm.token1, range.tickUpper, farm.pool.fee)}
+        <Flex sx={{ gap: '8px' }} alignItems="center">
+          <Text color={theme.subText} fontSize={12} fontWeight="500" marginRight="4px">
+            <Trans>Available Farming Range</Trans>
+          </Text>
 
-                {index !== farm.ranges.length && (
-                  <Text paddingLeft="6px" color={theme.subText}>
-                    |
-                  </Text>
-                )}
-              </Flex>
-            )
-          }}
-        />
-      </RowBetween>
+          <div style={{ maxWidth: above1500 ? '900px' : 'calc(100vw - 500px)' }}>
+            <HorizontalScroll
+              style={{ gap: '8px' }}
+              noShadow
+              items={farm.ranges.map(item => item.index.toString())}
+              renderItem={(item, index) => {
+                const range = farm.ranges.find(r => r.index === +item)
+                if (!range) return null
+                return (
+                  <Flex
+                    alignItems="center"
+                    minWidth="fit-content"
+                    sx={{ gap: '2px' }}
+                    color={range.isRemoved ? theme.warning : theme.subText}
+                    fontSize={12}
+                    fontWeight="500"
+                  >
+                    <Text minWidth="max-content">
+                      {convertTickToPrice(farm.token0, farm.token1, range.tickLower, farm.pool.fee)}
+                    </Text>
+                    <TwoWayArrow />
+                    <Text minWidth="max-content">
+                      {convertTickToPrice(farm.token0, farm.token1, range.tickUpper, farm.pool.fee)}
+                    </Text>
+
+                    {index !== farm.ranges.length - 1 && (
+                      <Text paddingLeft="6px" color={theme.subText}>
+                        |
+                      </Text>
+                    )}
+                  </Flex>
+                )
+              }}
+            />
+          </div>
+        </Flex>
+      </Flex>
       <ElasticFarmV2TableRow>
         <Text textAlign="left">{formatDollarAmount(farm.tvl)}</Text>
         <Text

diff --git a/src/pages/TrueSightV2/components/TokenListVariants.tsx b/src/pages/TrueSightV2/components/TokenListVariants.tsx
@@ -0,0 +1,35 @@
+import Icon from 'components/Icons/Icon'
+
+export default function TokenListVariants({
+  tokens,
+  iconSize = 12,
+}: {
+  tokens: Array<{ address: string; logo: string; chain: string }>
+  iconSize?: number
+}) {
+  return (
+    <>
+      {tokens.map((item, index) => {
+        const key = item.address + '_' + index
+        switch (item.chain) {
+          case 'ethereum':
+            return <Icon key={key} id="eth-mono" size={iconSize} title="Ethereum" />
+          case 'bsc':
+            return <Icon key={key} id="bnb-mono" size={iconSize} title="Binance" />
+          case 'avalanche':
+            return <Icon key={key} id="ava-mono" size={iconSize} title="Avalanche" />
+          case 'polygon':
+            return <Icon key={key} id="matic-mono" size={iconSize} title="Polygon" />
+          case 'arbitrum':
+            return <Icon key={key} id="arbitrum-mono" size={iconSize} title="Arbitrum" />
+          case 'fantom':
+            return <Icon key={key} id="fantom-mono" size={iconSize} title="Fantom" />
+          case 'optimism':
+            return <Icon key={key} id="optimism-mono" size={iconSize} title="Optimism" />
+          default:
+            return <></>
+        }
+      })}
+    </>
+  )
+}