feat: integrate kn-protocol for classic pages

.eslintrc.js

@@ -62,7 +62,12 @@ module.exports = {
     '@typescript-eslint/no-var-requires': 'off',
     '@typescript-eslint/no-unused-vars': [
       'warn',
-      { ignoreRestSiblings: true, argsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },
+      {
+        ignoreRestSiblings: true,
+        argsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+      },
     ],
     'no-empty-function': 'off',
     '@typescript-eslint/no-empty-function': 'off',

.github/workflows/pr.yaml

@@ -97,11 +97,11 @@ jobs:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-${{ env.SERVICE }}-buildx
 
-      - name: Restore node_modules
-        uses: actions/cache@v2
-        with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      # - name: Restore node_modules
+      #   uses: actions/cache@v2
+      #   with:
+      #     path: '**/node_modules'
+      #     key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install dependences
         uses: bahmutov/npm-install@HEAD

.gitignore

@@ -26,7 +26,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-notes.txt
+notes*.*
 .idea/
 
 .vscode/

src/components/PoolList/ItemCard/index.tsx

@@ -31,15 +31,16 @@ import { APP_PATHS, DMM_ANALYTICS_URL, ONE_BIPS, SUBGRAPH_AMP_MULTIPLIER } from
 import { EVMNetworkInfo } from 'constants/networks/type'
 import { NativeCurrencies } from 'constants/tokens'
 import { useActiveWeb3React } from 'hooks'
+import { ClassicPoolData } from 'hooks/pool/classic/type'
 import useTheme from 'hooks/useTheme'
 import { IconWrapper } from 'pages/Pools/styleds'
 import { useActiveAndUniqueFarmsData } from 'state/farms/classic/hooks'
 import { Farm } from 'state/farms/classic/types'
 import { useMultipleContractSingleData } from 'state/multicall/hooks'
-import { SubgraphPoolData, UserLiquidityPosition, useSharedPoolIdManager } from 'state/pools/hooks'
+import { UserLiquidityPosition, useSharedPoolIdManager } from 'state/pools/hooks'
 import { tryParseAmount } from 'state/swap/hooks'
 import { ExternalLink } from 'theme'
-import { formattedNum, shortenAddress } from 'utils'
+import { shortenAddress } from 'utils'
 import { currencyId } from 'utils/currencyId'
 import {
   feeRangeCalc,
@@ -49,6 +50,7 @@ import {
   priceRangeCalcBySubgraphPool,
   useFarmApr,
 } from 'utils/dmm'
+import { formatDisplayNumber, parseFraction } from 'utils/numbers'
 import { getTokenSymbolWithHardcode } from 'utils/tokenInfo'
 
 const StyledLink = styled(ExternalLink)`
@@ -57,7 +59,7 @@ const StyledLink = styled(ExternalLink)`
   }
 `
 interface ListItemProps {
-  poolData: SubgraphPoolData
+  poolData: ClassicPoolData
   myLiquidity?: UserLiquidityPosition
 }
 
@@ -104,7 +106,11 @@ const ItemCard = ({ poolData, myLiquidity }: ListItemProps) => {
 
   const [, setSharedPoolId] = useSharedPoolIdManager()
 
-  const ampLiquidity = formattedNum(`${parseFloat(amp.toSignificant(5)) * parseFloat(poolData.reserveUSD)}`, true)
+  const ampLiquidity = formatDisplayNumber(amp.multiply(parseFraction(poolData.reserveUSD)), {
+    style: 'currency',
+    significantDigits: 7,
+    fractionDigits: 4,
+  })
   const volume = poolData.oneDayVolumeUSD ? poolData.oneDayVolumeUSD : poolData.oneDayVolumeUntracked
   const fee24H = poolData.oneDayFeeUSD ? poolData.oneDayFeeUSD : poolData.oneDayFeeUntracked
   const oneYearFL = getTradingFeeAPR(poolData.reserveUSD, fee24H).toFixed(2)
@@ -131,7 +137,7 @@ const ItemCard = ({ poolData, myLiquidity }: ListItemProps) => {
       <Text fontSize="16px" fontWeight="500">
         {currency0Symbol} - {currency1Symbol}
       </Text>
-      <FeeTag style={{ fontSize: '12px' }}>AMP {formattedNum(amp.toSignificant(5))}</FeeTag>
+      <FeeTag style={{ fontSize: '12px' }}>AMP {formatDisplayNumber(amp, { significantDigits: 5 })}</FeeTag>
 
       {isFarmingPool && (
         <MouseoverTooltip
@@ -303,8 +309,8 @@ const ItemCard = ({ poolData, myLiquidity }: ListItemProps) => {
           </Flex>
 
           <Flex justifyContent="space-between" fontSize="16px" fontWeight="500" marginTop="0.25rem" marginBottom="1rem">
-            <Text>{formattedNum(volume, true)}</Text>
-            <Text>{formattedNum(fee24H, true)}</Text>
+            <Text>{formatDisplayNumber(volume, { style: 'currency', significantDigits: 5 })}</Text>
+            <Text>{formatDisplayNumber(fee24H, { style: 'currency', significantDigits: 5 })}</Text>
           </Flex>
 
           <Divider />
@@ -327,7 +333,9 @@ const ItemCard = ({ poolData, myLiquidity }: ListItemProps) => {
             fontWeight="500"
             marginTop="0.25rem"
           >
-            <Text>{formattedNum(poolData.reserveUSD, true)}</Text>
+            <Text>
+              {formatDisplayNumber(poolData.reserveUSD, { style: 'currency', significantDigits: 7, fractionDigits: 4 })}
+            </Text>
             <Text textAlign="center">{ampLiquidity}</Text>
             <Text textAlign="end">{myLiquidity ? getMyLiquidity(myLiquidity) : '-'}</Text>
           </Box>
@@ -491,10 +499,7 @@ const ItemCard = ({ poolData, myLiquidity }: ListItemProps) => {
 }
 
 const FarmCalculator = ({ farm, onUpdate }: { farm: Farm; onUpdate: (value: number) => void }) => {
-  const lpTokenRatio = new Fraction(
-    farm.totalStake.toString(),
-    JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(18)),
-  ).divide(
+  const lpTokenRatio = farm.totalStake.divide(
     new Fraction(parseUnits(farm.totalSupply, 18).toString(), JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(18))),
   )
   const liquidity = parseFloat(lpTokenRatio.toSignificant(6)) * parseFloat(farm.reserveUSD)

src/components/PoolList/ListItem.tsx

@@ -19,19 +19,21 @@ import { FeeTag } from 'components/YieldPools/ElasticFarmGroup/styleds'
 import { ClassicFarmingPoolAPRCell } from 'components/YieldPools/FarmingPoolAPRCell'
 import { APP_PATHS, MAX_ALLOW_APY } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
+import { ClassicPoolData } from 'hooks/pool/classic/type'
 import useTheme from 'hooks/useTheme'
 import { IconWrapper } from 'pages/Pools/styleds'
 import { usePoolDetailModalToggle } from 'state/application/hooks'
 import { useActiveAndUniqueFarmsData } from 'state/farms/classic/hooks'
 import { setSelectedPool } from 'state/pools/actions'
-import { SubgraphPoolData, UserLiquidityPosition, useSharedPoolIdManager } from 'state/pools/hooks'
-import { formattedNum, shortenAddress } from 'utils'
+import { UserLiquidityPosition, useSharedPoolIdManager } from 'state/pools/hooks'
+import { shortenAddress } from 'utils'
 import { currencyId } from 'utils/currencyId'
 import { getMyLiquidity, getTradingFeeAPR, parseSubgraphPoolData } from 'utils/dmm'
+import { formatDisplayNumber, parseFraction } from 'utils/numbers'
 import { getTokenSymbolWithHardcode } from 'utils/tokenInfo'
 
 interface ListItemGroupProps {
-  poolData: SubgraphPoolData
+  poolData: ClassicPoolData
   userLiquidityPositions: { [key: string]: UserLiquidityPosition }
 }
 
@@ -57,7 +59,6 @@ const ListItem = ({ poolData, userLiquidityPositions }: ListItemGroupProps) => {
   )
   const currency0Symbol = getTokenSymbolWithHardcode(chainId, currency0.wrapped.address, currency0.symbol)
   const currency1Symbol = getTokenSymbolWithHardcode(chainId, currency1.wrapped.address, currency1.symbol)
-
   const realPercentToken0 =
     reserve0 && virtualReserve0 && reserve1 && virtualReserve1
       ? reserve0.asFraction
@@ -73,8 +74,16 @@ const ListItem = ({ poolData, userLiquidityPositions }: ListItemGroupProps) => {
 
   const oneYearFL = getTradingFeeAPR(poolData.reserveUSD, fee24H).toFixed(2)
 
-  const ampLiquidity = formattedNum(`${parseFloat(amp.toSignificant(5)) * parseFloat(poolData.reserveUSD)}`, true)
-  const totalValueLocked = formattedNum(`${parseFloat(poolData.reserveUSD)}`, true)
+  const ampLiquidity = formatDisplayNumber(amp.multiply(parseFraction(poolData.reserveUSD)), {
+    style: 'currency',
+    significantDigits: 7,
+    fractionDigits: 4,
+  })
+  const totalValueLocked = formatDisplayNumber(poolData.reserveUSD, {
+    style: 'currency',
+    significantDigits: 7,
+    fractionDigits: 4,
+  })
 
   const onTogglePoolDetailModal = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     event.stopPropagation()
@@ -111,7 +120,7 @@ const ListItem = ({ poolData, userLiquidityPositions }: ListItemGroupProps) => {
           paddingRight: '20px', // to make all the APR numbers vertically align
         }}
       >
-        {oneYearFL}%
+        {formatDisplayNumber(Number(oneYearFL) / 100, { style: 'percent', fractionDigits: 2 })}
       </Flex>
     )
   }
@@ -124,7 +133,7 @@ const ListItem = ({ poolData, userLiquidityPositions }: ListItemGroupProps) => {
           <Text fontSize="14px" fontWeight="500">
             {currency0Symbol} - {currency1Symbol}
           </Text>
-          <FeeTag style={{ padding: '4px 6px' }}>AMP {formattedNum(amp.toSignificant(5))}</FeeTag>
+          <FeeTag style={{ padding: '4px 6px' }}>AMP {formatDisplayNumber(amp, { significantDigits: 5 })}</FeeTag>
           {isFarmingPool && (
             <MouseoverTooltip placement="top" text={t`Available for yield farming`}>
               <Link to={`${APP_PATHS.FARMS}/${networkInfo.route}?tab=classic&type=active&search=${poolData.id}`}>
@@ -185,8 +194,12 @@ const ListItem = ({ poolData, userLiquidityPositions }: ListItemGroupProps) => {
       >
         {renderAPR()}
       </DataText>
-      <DataText alignItems="flex-end">{!poolData ? <Loader /> : formattedNum(volume, true)}</DataText>
-      <DataText alignItems="flex-end">{!poolData ? <Loader /> : formattedNum(fee24H, true)}</DataText>
+      <DataText alignItems="flex-end">
+        {!poolData ? <Loader /> : formatDisplayNumber(volume, { style: 'currency', significantDigits: 6 })}
+      </DataText>
+      <DataText alignItems="flex-end">
+        {!poolData ? <Loader /> : formatDisplayNumber(fee24H, { style: 'currency', significantDigits: 6 })}
+      </DataText>
       <DataText alignItems="flex-end">{getMyLiquidity(myLiquidity)}</DataText>
       <ButtonWrapper style={{ marginRight: '-3px' }}>
         <ButtonEmpty