Merge branch 'main' into remove-react-spring

src/components/EarningPieChart/index.tsx

@@ -2,6 +2,7 @@ import { ChainId } from '@kyberswap/ks-sdk-core'
 import { Trans, t } from '@lingui/macro'
 import { darken, rgba } from 'polished'
 import { useCallback, useMemo, useState } from 'react'
+import { HelpCircle } from 'react-feather'
 import { PieChart, pieChartDefaultProps } from 'react-minimal-pie-chart'
 import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
@@ -133,18 +134,7 @@ const Legend: React.FC<LegendProps> = ({
           justifyContent: 'center',
         }}
       >
-        {logoUrl ? (
-          <Logo srcs={[logoUrl]} style={{ width: 14, height: 14 }} />
-        ) : (
-          <Flex
-            sx={{
-              flex: '0 0 14px',
-              height: '14px',
-              borderRadius: '999px',
-              background: theme.subText,
-            }}
-          />
-        )}
+        {logoUrl ? <Logo srcs={[logoUrl]} style={{ width: 14, height: 14 }} /> : <HelpCircle />}
         {chainId && (
           <NetworkLogo
             chainId={chainId}

src/constants/networks.ts

@@ -216,12 +216,6 @@ export const COMING_SOON_NETWORKS_FOR_MY_EARNINGS: ChainId[] = []
 export const COMING_SOON_NETWORKS_FOR_MY_EARNINGS_LEGACY: ChainId[] = []
 export const COMING_SOON_NETWORKS_FOR_MY_EARNINGS_CLASSIC: ChainId[] = [
   ChainId.CRONOS,
-  ChainId.OASIS,
-  ChainId.MATIC,
-  ChainId.BSCMAINNET,
-  ChainId.AVAXMAINNET,
-  ChainId.CRONOS,
-  ChainId.BTTC,
   ChainId.VELAS,
   ChainId.AURORA,
   ChainId.OASIS,

src/pages/MyEarnings/ClassicPools/SinglePool/Position.tsx

@@ -149,7 +149,7 @@ const Position: React.FC<Props> = ({ poolEarning, chainId }) => {
             <div>
               <HoverDropdown
                 anchor={<span>{myLiquidityBalance}</span>}
-                disabled={poolEarning.liquidityTokenBalance === '0'}
+                disabled={poolEarning.liquidityTokenBalanceIncludingStake === '0'}
                 text={
                   <div>
                     <Flex alignItems="center">
@@ -199,11 +199,24 @@ const Position: React.FC<Props> = ({ poolEarning, chainId }) => {
           }
         />
 
-        <Column label={t`Total LP Tokens`} value={formattedNum(+poolEarning.liquidityTokenBalance, false, 6)} />
+        <Column
+          label={t`Total LP Tokens`}
+          value={
+            poolEarning.liquidityTokenBalanceIncludingStake !== '0'
+              ? formattedNum(+poolEarning.liquidityTokenBalanceIncludingStake, false, 6)
+              : '--'
+          }
+        />
 
-        <Column label={t`Share of Pool`} value={myShareOfPool ? (myShareOfPool * 100).toFixed(2) + '%' : '--'} />
+        <Column
+          label={t`Share of Pool`}
+          value={myShareOfPool ? (myShareOfPool * 100 < 1 ? '<0.01%' : (myShareOfPool * 100).toFixed(2) + '%') : '--'}
+        />
 
-        <Column label={t`Staked LP Tokens`} value={formattedNum(liquidityStaked, false, 6)} />
+        <Column
+          label={t`Staked LP Tokens`}
+          value={liquidityStaked !== 0 ? formattedNum(liquidityStaked, false, 6) : '--'}
+        />
       </Box>
     </Flex>
   )

src/pages/MyEarnings/ClassicPools/SinglePool/index.tsx

@@ -125,9 +125,10 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId }) => {
     visibleCurrency1?.symbol || poolEarning.pool.token1.symbol,
   )
   const myLiquidityBalance =
-    poolEarning.liquidityTokenBalance !== '0' && poolEarning.pool.totalSupply !== '0'
+    poolEarning.liquidityTokenBalanceIncludingStake !== '0' && poolEarning.pool.totalSupply !== '0'
       ? formatDollarAmount(
-          (+poolEarning.liquidityTokenBalance * +poolEarning.pool.reserveUSD) / +poolEarning.pool.totalSupply,
+          (+poolEarning.liquidityTokenBalanceIncludingStake * +poolEarning.pool.reserveUSD) /
+            +poolEarning.pool.totalSupply,
         )
       : '--'
 
@@ -198,8 +199,10 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId }) => {
         <MobileStatWrapper padding={mobileView ? '1rem 0' : '1rem'}>
           <Flex
             sx={{
-              alignItems: 'center',
+              gap: '8px',
+              alignItems: mobileView ? 'flex-start' : 'center',
               justifyContent: 'space-between',
+              flexDirection: mobileView ? 'column' : 'row',
             }}
           >
             <Flex
@@ -209,7 +212,21 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId }) => {
               }}
             >
               <Flex alignItems="center">
-                <DoubleCurrencyLogo currency0={visibleCurrency0} currency1={visibleCurrency1} size={20} />
+                <Box sx={{ position: 'relative' }}>
+                  <DoubleCurrencyLogo currency0={visibleCurrency0} currency1={visibleCurrency1} size={20} />
+                  <img
+                    src={NETWORKS_INFO[chainId].icon}
+                    alt={NETWORKS_INFO[chainId].name}
+                    width={12}
+                    height={12}
+                    style={{
+                      position: 'absolute',
+                      bottom: 0,
+                      right: 0,
+                      zIndex: 1,
+                    }}
+                  />
+                </Box>
 
                 <Text
                   sx={{
@@ -389,10 +406,28 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId }) => {
                   gap: '8px',
                 }}
               >
-                <Text>
-                  {visibleCurrency0Symbol} - {visibleCurrency1Symbol}
+                <Text flex={1} maxWidth="fit-content">
+                  <MouseoverTooltip
+                    text={`${visibleCurrency0Symbol} - ${visibleCurrency1Symbol}`}
+                    width="fit-content"
+                    containerStyle={{ maxWidth: '100%' }}
+                    placement="top"
+                  >
+                    <Text
+                      sx={{
+                        textOverflow: 'ellipsis',
+                        overflow: 'hidden',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {visibleCurrency0Symbol} - {visibleCurrency1Symbol}
+                    </Text>
+                  </MouseoverTooltip>
                 </Text>
-                <Badge $color={theme.blue}>AMP {+poolEarning.pool.amp / 10000}</Badge>
+
+                <Badge $color={theme.blue} style={{ minWidth: 'max-content' }}>
+                  AMP {+poolEarning.pool.amp / 10000}
+                </Badge>
 
                 {isFarmingPool && (
                   <MouseoverTooltip

src/pages/MyEarnings/EarningsBreakdownPanel.tsx

@@ -1,10 +1,14 @@
+import { ChainId } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
+import { useEffect, useMemo, useState } from 'react'
 import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
 import { formatUSDValue } from 'components/EarningAreaChart/utils'
 import EarningPieChart from 'components/EarningPieChart'
+import { fetchListTokenByAddresses } from 'hooks/Tokens'
 import useTheme from 'hooks/useTheme'
+import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { EarningsBreakdown } from 'types/myEarnings'
 
 type WrapperProps = { $columns: 1 | 2 }
@@ -36,10 +40,63 @@ type Props = {
   horizontalLayout?: boolean
 }
 
+type Token = {
+  address: string
+  chainId: ChainId
+  logoUrl?: string
+  symbol: string
+  value: string
+  percent: number
+}
 const EarningsBreakdownPanel: React.FC<Props> = ({ isLoading, data, className, horizontalLayout }) => {
   const theme = useTheme()
 
   const numberOfTokens = data?.breakdowns.length || 0
+  const [tokens, setTokens] = useState<{ [chainId: string]: { [address: string]: WrappedTokenInfo } }>({})
+
+  const missingTokensByChainId = useMemo(() => {
+    return (
+      data?.breakdowns
+        .filter(item => (item.address && item.chainId ? item.symbol === '' : false))
+        .reduce(
+          (acc, cur) => {
+            if (!cur.chainId || !cur.address) return acc
+            if (acc[cur.chainId]) {
+              acc[cur.chainId].push(cur as Token)
+            } else acc[cur.chainId] = [cur as Token]
+            return acc
+          },
+          {} as {
+            [key: string]: Array<Token>
+          },
+        ) || {}
+    )
+  }, [data])
+
+  useEffect(() => {
+    const getData = async () => {
+      const chainIds = Object.keys(missingTokensByChainId)
+      const res = await Promise.all(
+        chainIds.map(chain => {
+          const missingTokens = missingTokensByChainId[chain].map(item => item.address)
+          return fetchListTokenByAddresses(missingTokens, +chain)
+        }),
+      )
+
+      setTokens(
+        chainIds.reduce((acc, id, idx) => {
+          acc[id] = res[idx].reduce(
+            (ac, item: WrappedTokenInfo) => ({ ...ac, [item.address]: item }),
+            {} as { [tokenAddress: string]: WrappedTokenInfo },
+          )
+
+          return acc
+        }, {} as { [chainId: string]: { [address: string]: WrappedTokenInfo } }),
+      )
+    }
+
+    getData()
+  }, [missingTokensByChainId])
 
   return (
     <Wrapper className={className} $columns={numberOfTokens > 5 ? 2 : 1}>
@@ -73,7 +130,17 @@ const EarningsBreakdownPanel: React.FC<Props> = ({ isLoading, data, className, h
       ) : (
         <EarningPieChart
           horizontalLayout={horizontalLayout}
-          data={data.breakdowns}
+          data={data.breakdowns.map(item => ({
+            ...item,
+            logoUrl:
+              item.chainId && item.address && !item.logoUrl
+                ? tokens[item.chainId]?.[item.address].logoURI
+                : item.logoUrl,
+            symbol:
+              item.chainId && item.address && !item.symbol
+                ? tokens[item.chainId]?.[item.address].symbol || ''
+                : item.symbol,
+          }))}
           totalValue={formatUSDValue(data.totalValue, true)}
         />
       )}

src/pages/MyEarnings/ElasticPools/SinglePosition/EarningView.tsx

@@ -29,7 +29,12 @@ const EarningView: React.FC<CommonProps> = props => {
 
   // format pool value
   const ticks: EarningStatsTick[] | undefined = useMemo(() => {
-    return calculateEarningStatsTick({ data: positionEarning.historicalEarning, chainId, tokensByChainId, nativeLogo })
+    return calculateEarningStatsTick({
+      data: positionEarning.historicalEarning,
+      chainId,
+      tokensByChainId: tokensByChainId[chainId],
+      nativeLogo,
+    })
   }, [chainId, positionEarning.historicalEarning, tokensByChainId, nativeLogo])
 
   const earningToday = ticks?.[0]

src/pages/MyEarnings/PoolEarningsSection.tsx

@@ -175,8 +175,13 @@ const PoolEarningsSection: React.FC<Props> = ({ historicalEarning, chainId }) =>
 
   // format pool value
   const ticks: EarningStatsTick[] | undefined = useMemo(() => {
-    return calculateEarningStatsTick({ data: historicalEarning, chainId, tokensByChainId, nativeLogo })
-  }, [chainId, historicalEarning, tokensByChainId, nativeLogo])
+    return calculateEarningStatsTick({
+      data: historicalEarning,
+      chainId,
+      tokensByChainId: { ...tokensByChainId[chainId], ...tokens },
+      nativeLogo,
+    })
+  }, [chainId, historicalEarning, tokensByChainId, nativeLogo, tokens])
 
   if (upToExtraSmall) {
     return (

src/pages/MyEarnings/styled.tsx

@@ -44,6 +44,7 @@ export const Row = styled.div`
   padding: 12px;
   font-size: 14px;
   font-weight: 500;
+  gap: 8px;
   display: grid;
   grid-template-columns: 3fr repeat(7, 1fr);