fix data fetching

src/components/NavHeader/index.js

@@ -6,10 +6,10 @@ import Search from '../Search'
 import { RowFixed, RowBetween } from '../Row'
 import { AutoColumn } from '../Column'
 import { useMedia } from 'react-use'
-import { useV1Data } from '../../contexts/V1Data'
 import { useGlobalData } from '../../contexts/GlobalData'
 import { toK } from '../../helpers'
 import { ButtonDark } from '../ButtonStyled'
+import Link from '../Link'
 
 const Header = styled.div`
   width: calc(100% - 80px);
@@ -40,14 +40,14 @@ export default function NavHeader({ token, pair }) {
   const below1024 = useMedia('(max-width: 1024px)')
   const below600 = useMedia('(max-width: 600px)')
 
-  const { liquidityUsd, dailyVolumeUSD } = useV1Data()
-
-  const { totalLiquidityUSD, oneDayVolumeUSD } = useGlobalData()
+  const { totalLiquidityUSD, oneDayVolumeUSD, v1Data } = useGlobalData()
 
   const liquidity =
-    totalLiquidityUSD && liquidityUsd ? '$' + toK(parseFloat(totalLiquidityUSD) + parseFloat(liquidityUsd), true) : ''
-  const volume = oneDayVolumeUSD && dailyVolumeUSD ? '$' + toK(oneDayVolumeUSD + dailyVolumeUSD, true) : ''
-  // const txns = oneDayTxns && txCount ? formattedNum(oneDayTxns + txCount) : ''
+    totalLiquidityUSD && v1Data?.liquidityUsd
+      ? '$' + toK(parseFloat(totalLiquidityUSD) + parseFloat(v1Data?.liquidityUsd), true)
+      : ''
+  const volume =
+    oneDayVolumeUSD && v1Data?.dailyVolumeUSD ? '$' + toK(oneDayVolumeUSD + v1Data?.dailyVolumeUSD, true) : ''
 
   return below600 ? (
     <Header>
@@ -77,9 +77,9 @@ export default function NavHeader({ token, pair }) {
                   </CombinedData> */}
                 </>
               )}
-              <ButtonDark style={{ minWidth: 'initial' }} href="https://combined.uniswap.info">
-                View combined {below1024 && 'data'} ↗
-              </ButtonDark>
+              <Link href="https://migrate.uniswap.info" target="_blank">
+                <ButtonDark style={{ minWidth: 'initial' }}>View combined {below1024 && 'data'} ↗</ButtonDark>
+              </Link>
             </CombinedWrapper>
           )}
         </RowFixed>

src/contexts/GlobalData.js

@@ -1,11 +1,18 @@
 import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect, useState } from 'react'
-import { client } from '../apollo/client'
+import { client, v1Client } from '../apollo/client'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { useTimeframe } from './Application'
 import { timeframeOptions } from '../constants'
 import { getPercentChange, getBlockFromTimestamp, get2DayPercentChange } from '../helpers'
-import { GLOBAL_DATA, GLOBAL_TXNS, GLOBAL_CHART, ETH_PRICE } from '../apollo/queries'
+import {
+  GLOBAL_DATA,
+  GLOBAL_TXNS,
+  GLOBAL_CHART,
+  ETH_PRICE,
+  UNISWAP_GLOBALS_QUERY,
+  UNISWAP_GLOBALS_24HOURS_AGO_QUERY
+} from '../apollo/queries'
 import weekOfYear from 'dayjs/plugin/weekOfYear'
 
 const UPDATE = 'UPDATE'
@@ -172,6 +179,9 @@ async function getGlobalData(ethPrice) {
       data.liquidityChangeETH = liquidityChangeETH
       data.oneDayTxns = oneDayTxns
       data.txnChange = txnChange
+
+      const v1Data = await getV1Data()
+      data.v1Data = v1Data
     }
   } catch (e) {
     console.log(e)
@@ -315,6 +325,92 @@ const getEthPrice = async () => {
   return [ethPrice, priceChangeETH]
 }
 
+async function getV1Data() {
+  console.log('fetch')
+  dayjs.extend(utc)
+
+  let data = {}
+  let data24HoursAgo = {}
+  let data48HoursAgo = {}
+  const utcCurrentTime = dayjs()
+  try {
+    // get the current data
+    let result = await v1Client.query({
+      query: UNISWAP_GLOBALS_QUERY,
+      fetchPolicy: 'cache-first'
+    })
+    if (result) {
+      data.totalVolumeUSD = result.data.uniswap.totalVolumeUSD
+      data.liquidityUsd = result.data.uniswap.totalLiquidityUSD
+      data.txCount = result.data.uniswap.txCount
+    }
+  } catch (err) {
+    console.log('error: ', err)
+  }
+
+  try {
+    const utcOneDayBack = utcCurrentTime.subtract(1, 'day')
+    // get data one day ago
+    let result = await v1Client.query({
+      query: UNISWAP_GLOBALS_24HOURS_AGO_QUERY,
+      variables: {
+        date: utcOneDayBack.unix()
+      },
+      fetchPolicy: 'cache-first'
+    })
+    if (result) {
+      data24HoursAgo.totalVolumeUSD = result.data.uniswapHistoricalDatas[0].totalVolumeUSD
+      data24HoursAgo.liquidityUsd = result.data.uniswapHistoricalDatas[0].totalLiquidityUSD
+      data24HoursAgo.txCount = result.data.uniswapHistoricalDatas[0].txCount
+    }
+  } catch (err) {
+    console.log('error: ', err)
+  }
+  // get two day stats
+  const utcTwoDaysBack = utcCurrentTime.subtract(2, 'day')
+  try {
+    let resultTwoDays = await v1Client.query({
+      query: UNISWAP_GLOBALS_24HOURS_AGO_QUERY,
+      variables: {
+        date: utcTwoDaysBack.unix()
+      },
+      fetchPolicy: 'cache-first'
+    })
+    if (resultTwoDays) {
+      // set two day data
+      data48HoursAgo.totalVolumeUSD = resultTwoDays.data.uniswapHistoricalDatas[0].totalVolumeUSD
+      data48HoursAgo.liquidityUsd = resultTwoDays.data.uniswapHistoricalDatas[0].totalLiquidityUSD
+      data48HoursAgo.txCount = resultTwoDays.data.uniswapHistoricalDatas[0].txCount
+    }
+  } catch (err) {
+    console.log('error: ', err)
+  }
+
+  // 48 hour windows
+  let [volumeChangeUSD, volumePercentChangeUSD] = get2DayPercentChange(
+    data.totalVolumeUSD,
+    data24HoursAgo.totalVolumeUSD,
+    data48HoursAgo.totalVolumeUSD
+  )
+
+  let [txCountChange, txCountPercentChange] = get2DayPercentChange(
+    data.txCount,
+    data24HoursAgo.txCount,
+    data48HoursAgo.txCount
+  )
+
+  // regular percent changes
+  let liquidityPercentChangeUSD = getPercentChange(data.liquidityUsd, data24HoursAgo.liquidityUsd)
+
+  data.liquidityPercentChangeUSD = liquidityPercentChangeUSD
+  data.volumePercentChangeUSD = volumePercentChangeUSD
+  data.txCount = txCountChange
+  data.txCountPercentChange = txCountPercentChange
+  data.dailyVolumeUSD = volumeChangeUSD
+
+  return data
+}
+
 export function useGlobalData() {
   const [state, { update }] = useGlobalDataContext()
   const ethPrice = useEthPrice()

src/contexts/V1Data.js

@@ -1,100 +0,0 @@
-import { useEffect, useState } from 'react'
-import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
-import { get2DayPercentChange, getPercentChange } from '../helpers'
-import { v1Client } from '../apollo/client'
-import { UNISWAP_GLOBALS_QUERY, UNISWAP_GLOBALS_24HOURS_AGO_QUERY } from '../apollo/queries'
-
-export function useV1Data() {
-  dayjs.extend(utc)
-  const [globalData, setGlobalData] = useState()
-
-  useEffect(() => {
-    const fetchGlobalData = async function() {
-      let data = {}
-      let data24HoursAgo = {}
-      let data48HoursAgo = {}
-      const utcCurrentTime = dayjs()
-      try {
-        // get the current data
-        let result = await v1Client.query({
-          query: UNISWAP_GLOBALS_QUERY,
-          fetchPolicy: 'cache-first'
-        })
-        if (result) {
-          data.totalVolumeUSD = result.data.uniswap.totalVolumeUSD
-          data.liquidityUsd = result.data.uniswap.totalLiquidityUSD
-          data.txCount = result.data.uniswap.txCount
-        }
-      } catch (err) {
-        console.log('error: ', err)
-      }
-
-      try {
-        const utcOneDayBack = utcCurrentTime.subtract(1, 'day')
-        // get data one day ago
-        let result = await v1Client.query({
-          query: UNISWAP_GLOBALS_24HOURS_AGO_QUERY,
-          variables: {
-            date: utcOneDayBack.unix()
-          },
-          fetchPolicy: 'cache-first'
-        })
-        if (result) {
-          data24HoursAgo.totalVolumeUSD = result.data.uniswapHistoricalDatas[0].totalVolumeUSD
-          data24HoursAgo.liquidityUsd = result.data.uniswapHistoricalDatas[0].totalLiquidityUSD
-          data24HoursAgo.txCount = result.data.uniswapHistoricalDatas[0].txCount
-        }
-      } catch (err) {
-        console.log('error: ', err)
-      }
-      // get two day stats
-      const utcTwoDaysBack = utcCurrentTime.subtract(2, 'day')
-      try {
-        let resultTwoDays = await v1Client.query({
-          query: UNISWAP_GLOBALS_24HOURS_AGO_QUERY,
-          variables: {
-            date: utcTwoDaysBack.unix()
-          },
-          fetchPolicy: 'cache-first'
-        })
-        if (resultTwoDays) {
-          // set two day data
-          data48HoursAgo.totalVolumeUSD = resultTwoDays.data.uniswapHistoricalDatas[0].totalVolumeUSD
-          data48HoursAgo.liquidityUsd = resultTwoDays.data.uniswapHistoricalDatas[0].totalLiquidityUSD
-          data48HoursAgo.txCount = resultTwoDays.data.uniswapHistoricalDatas[0].txCount
-        }
-      } catch (err) {
-        console.log('error: ', err)
-      }
-
-      // 48 hour windows
-      let [volumeChangeUSD, volumePercentChangeUSD] = get2DayPercentChange(
-        data.totalVolumeUSD,
-        data24HoursAgo.totalVolumeUSD,
-        data48HoursAgo.totalVolumeUSD
-      )
-
-      let [txCountChange, txCountPercentChange] = get2DayPercentChange(
-        data.txCount,
-        data24HoursAgo.txCount,
-        data48HoursAgo.txCount
-      )
-
-      // regular percent changes
-      let liquidityPercentChangeUSD = getPercentChange(data.liquidityUsd, data24HoursAgo.liquidityUsd)
-
-      data.liquidityPercentChangeUSD = liquidityPercentChangeUSD
-      data.volumePercentChangeUSD = volumePercentChangeUSD
-      data.txCount = txCountChange
-      data.txCountPercentChange = txCountPercentChange
-      data.dailyVolumeUSD = volumeChangeUSD
-
-      setGlobalData(data)
-    }
-
-    !globalData && fetchGlobalData()
-  }, [globalData])
-
-  return globalData || {}
-}