update 24hr liquidity change calculation on token page (#232)

* change global timestamp to hourly round - improve performance with cache;

* update token volume percentage calculation

* use untracked liquidity in chart

* add manual liquidity override while graph syncs with change

src/components/PairList/index.js

@@ -150,7 +150,7 @@ function PairList({ pairs, color, history, disbaleLinks, maxItems = 10 }) {
     const pairData = pairs[pairAddress]
 
     if (pairData && pairData.token0 && pairData.token1) {
-      const liquidity = formattedNum(pairData.trackedReserveUSD, true)
+      const liquidity = formattedNum(pairData.reserveUSD, true)
       const volume = formattedNum(pairData.oneDayVolumeUSD, true)
 
       if (pairData.token0.id === '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2') {

src/contexts/GlobalData.js

@@ -510,7 +510,7 @@ export function useGlobalChartData() {
         utcStartTime = utcEndTime.subtract(1, 'year').startOf('year')
         break
     }
-    let startTime = utcStartTime.startOf('minute').unix() - 1
+    let startTime = utcStartTime.startOf('hour').unix() - 1
 
     if ((activeWindow && startTime < oldestDateFetch) || !oldestDateFetch) {
       setOldestDateFetched(startTime)

src/contexts/TokenData.js

@@ -177,20 +177,22 @@ const getTopTokens = async (ethPrice, ethPriceOld) => {
           twoDayHistory?.txCount ?? 0
         )
 
+        const currentLiquidityUSD = data?.totalLiquidity * ethPrice * data?.derivedETH
+        const oldLiquidityUSD = oneDayHistory?.totalLiquidity * ethPriceOld * oneDayHistory?.derivedETH
+
         // percent changes
         const priceChangeUSD = getPercentChange(
           data?.derivedETH * ethPrice,
           oneDayHistory?.derivedETH ? oneDayHistory?.derivedETH * ethPriceOld : 0
         )
-        const liquidityChangeUSD = getPercentChange(data?.totalLiquidityUSD, oneDayHistory?.totalLiquidityUSD ?? 0)
 
         // set data
         data.priceUSD = data?.derivedETH * ethPrice
-        data.totalLiquidityUSD = data?.totalLiquidity * ethPrice * data?.derivedETH
+        data.totalLiquidityUSD = currentLiquidityUSD
         data.oneDayVolumeUSD = oneDayVolumeUSD
         data.volumeChangeUSD = volumeChangeUSD
         data.priceChangeUSD = priceChangeUSD
-        data.liquidityChangeUSD = liquidityChangeUSD
+        data.liquidityChangeUSD = getPercentChange(currentLiquidityUSD ?? 0, oldLiquidityUSD ?? 0)
         data.oneDayTxns = oneDayTxns
         data.txnChange = txnChange
 

src/helpers/index.js

@@ -229,7 +229,8 @@ export const get2DayPercentChange = (valueNow, value24HoursAgo, value48HoursAgo)
 }
 
 export const getPercentChange = (valueNow, value24HoursAgo) => {
-  const adjustedPercentChange = ((valueNow - value24HoursAgo) / value24HoursAgo) * 100
+  const adjustedPercentChange =
+    ((parseFloat(valueNow) - parseFloat(value24HoursAgo)) / parseFloat(value24HoursAgo)) * 100
   if (isNaN(adjustedPercentChange) || !isFinite(adjustedPercentChange)) {
     return 0
   }

src/pages/TokenPage.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import 'feather-icons'
 import { withRouter } from 'react-router-dom'
 import { Text } from 'rebass'
@@ -158,6 +158,18 @@ function TokenPage({ address, history }) {
 
   const [dismissed, markAsDismissed] = usePathDismissed(history.location.pathname)
 
+  const [manualLiquidity, setManualLiquidity] = useState(0)
+  useEffect(() => {
+    let calculated = 0
+    for (let pairAddress in fetchedPairsList) {
+      const pair = fetchedPairsList[pairAddress]
+      calculated = calculated + parseFloat(pair.reserveUSD ?? 0)
+    }
+    setManualLiquidity(calculated / 2)
+  }, [fetchedPairsList])
+
+  const useManualLiquidity = parseFloat(totalLiquidityUSD / manualLiquidity) < 0.5
+
   return (
     <PageWrapper>
       <ThemedBackground backgroundColor={transparentize(0.6, backgroundColor)} />
@@ -236,7 +248,7 @@ function TokenPage({ address, history }) {
                   </RowBetween>
                   <RowBetween align="flex-end">
                     <TYPE.main fontSize={'2rem'} lineHeight={1} fontWeight={600}>
-                      {liquidity}
+                      {useManualLiquidity ? formattedNum(manualLiquidity, true) : liquidity}
                     </TYPE.main>
                     <TYPE.main>{liquidityChange}</TYPE.main>
                   </RowBetween>
@@ -287,7 +299,11 @@ function TokenPage({ address, history }) {
             }}
             p={20}
           >
-            {address ? <PairList color={backgroundColor} address={address} pairs={fetchedPairsList} /> : <Loader />}
+            {address && fetchedPairsList ? (
+              <PairList color={backgroundColor} address={address} pairs={fetchedPairsList} />
+            ) : (
+              <Loader />
+            )}
           </Panel>
           <RowBetween mt={40} mb={'1rem'}>
             <TYPE.main fontSize={'1.125rem'}>Transactions</TYPE.main> <div />