feat: integrate kn-protocol for classic pages

.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

src/components/PoolList/index.tsx

@@ -17,21 +17,22 @@ import { ClickableText } from 'components/YieldPools/styleds'
 import { AMP_HINT, AMP_LIQUIDITY_HINT, MAX_ALLOW_APY, SORT_DIRECTION } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import { useStableCoins } from 'hooks/Tokens'
+import useGetClassicPools from 'hooks/pool/classic'
+import { ClassicPoolData } from 'hooks/pool/classic/type'
 import { SelectPairInstructionWrapper } from 'pages/Pools/styleds'
 import { ApplicationModal } from 'state/application/actions'
 import { useModalOpen, useOpenModal } from 'state/application/hooks'
 import { useActiveAndUniqueFarmsData } from 'state/farms/classic/hooks'
 import { Field } from 'state/pair/actions'
 import {
-  SubgraphPoolData,
   UserLiquidityPosition,
-  useAllPoolsData,
   useResetPools,
   useSharedPoolIdManager,
   useUserLiquidityPositions,
 } from 'state/pools/hooks'
 import { useViewMode } from 'state/user/hooks'
 import { VIEW_MODE } from 'state/user/reducer'
+import { MEDIA_WIDTHS } from 'theme'
 import { getTradingFeeAPR } from 'utils/dmm'
 
 import ItemCard from './ItemCard'
@@ -64,6 +65,9 @@ const TableHeader = styled.div`
   z-index: 1;
   border-bottom: ${({ theme }) => `1px solid ${theme.border}`};
   text-align: right;
+  ${({ theme }) => theme.mediaWidth.upToLarge`
+    grid-template-columns: 3fr 120px 80px 1fr 1fr 1fr 1fr;
+  `};
 `
 const Grid = styled.div`
   padding: 24px;
@@ -101,8 +105,9 @@ const ITEM_PER_PAGE = 12
 
 const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShowStable }: PoolListProps) => {
   const above1000 = useMedia('(min-width: 1000px)')
+  const upToLarge = useMedia(`(max-width: ${MEDIA_WIDTHS.upToLarge}px)`)
 
-  const { loading: loadingPoolsData, data: subgraphPoolsData } = useAllPoolsData()
+  const { loading: loadingPoolsData, data: classicPoolsData } = useGetClassicPools()
 
   const { account, chainId, networkInfo, isEVM } = useActiveWeb3React()
   const [viewMode] = useViewMode()
@@ -134,7 +139,7 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
   const sortDirection = sortOrder === SORT_DIRECTION.DESC
 
   const listComparator = useCallback(
-    (poolA: SubgraphPoolData, poolB: SubgraphPoolData): number => {
+    (poolA: ClassicPoolData, poolB: ClassicPoolData): number => {
       const feeA = poolA?.oneDayFeeUSD ? poolA?.oneDayFeeUSD : poolA?.oneDayFeeUntracked
       const feeB = poolB?.oneDayFeeUSD ? poolB?.oneDayFeeUSD : poolB?.oneDayFeeUntracked
       const a = transformedUserLiquidityPositions[poolA.id]
@@ -199,20 +204,29 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
           <InfoHelper text={AMP_HINT} />
         </Flex>
         <Flex alignItems="center" justifyContent="flex-end">
-          <ClickableText onClick={() => handleSort(SORT_FIELD.TVL)} style={{ textAlign: 'right' }}>
-            <Trans>AMP LIQUIDITY</Trans>
-            <InfoHelper text={AMP_LIQUIDITY_HINT} />
-            <span style={{ marginLeft: '0.25rem' }}>|</span>
-            <span style={{ marginLeft: '0.25rem' }}>TVL</span>
-            {sortedColumn === SORT_FIELD.TVL ? (
-              !sortDirection ? (
-                <ChevronUp size="14" style={{ marginLeft: '2px' }} />
+          <ClickableText
+            onClick={() => handleSort(SORT_FIELD.TVL)}
+            style={{ textAlign: 'right' }}
+            flexDirection={upToLarge ? 'column' : 'row'}
+            alignItems="flex-end"
+          >
+            <Flex>
+              <Trans>AMP LIQUIDITY</Trans>
+              <InfoHelper text={AMP_LIQUIDITY_HINT} />
+            </Flex>
+            {upToLarge ? <span /> : <span style={{ marginLeft: '0.25rem' }}>|</span>}
+            <Flex>
+              <span style={{ marginLeft: '0.25rem' }}>TVL</span>
+              {sortedColumn === SORT_FIELD.TVL ? (
+                !sortDirection ? (
+                  <ChevronUp size="14" style={{ marginLeft: '2px' }} />
+                ) : (
+                  <ChevronDown size="14" style={{ marginLeft: '2px' }} />
+                )
               ) : (
-                <ChevronDown size="14" style={{ marginLeft: '2px' }} />
-              )
-            ) : (
-              ''
-            )}
+                ''
+              )}
+            </Flex>
           </ClickableText>
         </Flex>
         <Flex
@@ -305,8 +319,8 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
 
   const [currentPage, setCurrentPage] = useState(1)
   const { stableCoins } = useStableCoins(chainId)
-  const sortedFilteredSubgraphPoolsData = useMemo(() => {
-    let res = [...subgraphPoolsData]
+  const sortedFilteredClassicPoolsData = useMemo(() => {
+    let res = [...classicPoolsData]
 
     if (isShowOnlyActiveFarmPools) {
       const farmAddresses = farms.map(farm => farm.id)
@@ -320,24 +334,24 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
       const wca = ca.wrapped
       const wcaAddress = wca && wca.address.toLowerCase()
       res = res.filter(
-        poolData => wcaAddress && (poolData.token0.id === wcaAddress || poolData.token1.id === wcaAddress),
+        poolData => wcaAddress && (poolData.token0.address === wcaAddress || poolData.token1.address === wcaAddress),
       )
     }
 
     if (cb) {
       const wcb = cb.wrapped
       const wcbAddress = wcb && wcb.address.toLowerCase()
       res = res.filter(
-        poolData => wcbAddress && (poolData.token0.id === wcbAddress || poolData.token1.id === wcbAddress),
+        poolData => wcbAddress && (poolData.token0.address === wcbAddress || poolData.token1.address === wcbAddress),
       )
     }
 
     res = res.filter(poolData => {
       const search = searchValue.toLowerCase()
 
       return (
-        poolData.token0.symbol.toLowerCase().includes(search) ||
-        poolData.token1.symbol.toLowerCase().includes(search) ||
+        poolData.token0.symbol?.toLowerCase().includes(search) ||
+        poolData.token1.symbol?.toLowerCase().includes(search) ||
         poolData.id.includes(search)
       )
     })
@@ -346,14 +360,15 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
       const stableList = isEVM ? stableCoins?.map(item => item.address.toLowerCase()) || [] : []
       res = res.filter(poolData => {
         return (
-          stableList.includes(poolData.token0.id.toLowerCase()) && stableList.includes(poolData.token1.id.toLowerCase())
+          stableList.includes(poolData.token0.address.toLowerCase()) &&
+          stableList.includes(poolData.token1.address.toLowerCase())
         )
       })
     }
 
     return res.sort(listComparator)
   }, [
-    subgraphPoolsData,
+    classicPoolsData,
     listComparator,
     isShowOnlyActiveFarmPools,
     currencies,
@@ -366,11 +381,11 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
 
   const startIndex = (currentPage - 1) * ITEM_PER_PAGE
   const endIndex = currentPage * ITEM_PER_PAGE
-  const pageData = sortedFilteredSubgraphPoolsData.slice(startIndex, endIndex)
+  const pageData = sortedFilteredClassicPoolsData.slice(startIndex, endIndex)
 
   useEffect(() => {
     setCurrentPage(1)
-  }, [chainId, subgraphPoolsData, currencies, searchValue, isShowOnlyActiveFarmPools, onlyShowStable])
+  }, [chainId, classicPoolsData, currencies, searchValue, isShowOnlyActiveFarmPools, onlyShowStable])
 
   const [sharedPoolId, setSharedPoolId] = useSharedPoolIdManager()
   const openShareModal = useOpenModal(ApplicationModal.SHARE)
@@ -395,7 +410,7 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
 
   if (loadingUserLiquidityPositions || loadingPoolsData) return <LocalLoader />
 
-  if (sortedFilteredSubgraphPoolsData.length === 0)
+  if (sortedFilteredClassicPoolsData.length === 0)
     return (
       <SelectPairInstructionWrapper>
         <div style={{ marginBottom: '1rem' }}>
@@ -435,7 +450,7 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
         pageSize={ITEM_PER_PAGE}
         onPageChange={newPage => setCurrentPage(newPage)}
         currentPage={currentPage}
-        totalCount={sortedFilteredSubgraphPoolsData.length}
+        totalCount={sortedFilteredClassicPoolsData.length}
         haveBg={above1000}
       />
       <PoolDetailModal />