update queries for monthly lookups

src/apollo/queries.js

@@ -44,18 +44,6 @@ export const GET_BLOCK = gql`
   }
 `
 
-export const GET_BLOCKS_SKIPPED = (timestamps, skip, end) => {
-  let queryString = 'query blocks {'
-  queryString += timestamps.slice(skip, end).map(timestamp => {
-    return `t${timestamp}:blocks(first: 1, orderBy: timestamp, orderDirection: desc, where: { timestamp_gt: ${timestamp}, timestamp_lt: ${timestamp +
-      600} }) {
-      number
-    }`
-  })
-  queryString += '}'
-  return gql(queryString)
-}
-
 export const GET_BLOCKS = timestamps => {
   let queryString = 'query blocks {'
   queryString += timestamps.map(timestamp => {

src/components/PairChart/index.js

@@ -40,7 +40,7 @@ const CHART_VIEW = {
 const PairChart = ({ address, color, base0, base1 }) => {
   const [chartFilter, setChartFilter] = useState(CHART_VIEW.LIQUIDITY)
 
-  const [timeWindow, setTimeWindow] = useState(timeframeOptions.WEEK)
+  const [timeWindow, setTimeWindow] = useState(timeframeOptions.MONTH)
 
   // update the width on a window resize
   const ref = useRef()
@@ -121,17 +121,38 @@ const PairChart = ({ address, color, base0, base1 }) => {
           <AutoRow gap="6px" style={{ flexWrap: 'nowrap' }}>
             <OptionButton
               active={chartFilter === CHART_VIEW.LIQUIDITY}
-              onClick={() => setChartFilter(CHART_VIEW.LIQUIDITY)}
+              onClick={() => {
+                setTimeWindow(timeframeOptions.ALL_TIME)
+                setChartFilter(CHART_VIEW.LIQUIDITY)
+              }}
             >
               Liquidity
             </OptionButton>
-            <OptionButton active={chartFilter === CHART_VIEW.VOLUME} onClick={() => setChartFilter(CHART_VIEW.VOLUME)}>
+            <OptionButton
+              active={chartFilter === CHART_VIEW.VOLUME}
+              onClick={() => {
+                setTimeWindow(timeframeOptions.ALL_TIME)
+                setChartFilter(CHART_VIEW.VOLUME)
+              }}
+            >
               Volume
             </OptionButton>
-            <OptionButton active={chartFilter === CHART_VIEW.RATE0} onClick={() => setChartFilter(CHART_VIEW.RATE0)}>
+            <OptionButton
+              active={chartFilter === CHART_VIEW.RATE0}
+              onClick={() => {
+                setTimeWindow(timeframeOptions.WEEK)
+                setChartFilter(CHART_VIEW.RATE0)
+              }}
+            >
               {pairData.token0 ? formattedSymbol0 + '/' + formattedSymbol1 : '-'}
             </OptionButton>
-            <OptionButton active={chartFilter === CHART_VIEW.RATE1} onClick={() => setChartFilter(CHART_VIEW.RATE1)}>
+            <OptionButton
+              active={chartFilter === CHART_VIEW.RATE1}
+              onClick={() => {
+                setTimeWindow(timeframeOptions.WEEK)
+                setChartFilter(CHART_VIEW.RATE1)
+              }}
+            >
               {pairData.token0 ? formattedSymbol1 + '/' + formattedSymbol0 : '-'}
             </OptionButton>
           </AutoRow>

src/components/PairList/index.js

@@ -152,7 +152,7 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
       return (
         <DashGrid style={{ height: '48px' }} disbaleLinks={disbaleLinks} focus={true}>
           <DataText area="name" fontWeight="500">
-            {!below600 && <div style={{ marginRight: '20px' }}>{index}</div>}
+            {!below600 && <div style={{ marginRight: '20px', width: '10px' }}>{index}</div>}
             <DoubleTokenLogo
               size={below600 ? 16 : 20}
               a0={pairData.token0.id}
@@ -272,7 +272,7 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10 }) {
                 setSortDirection(sortedColumn !== SORT_FIELD.APY ? true : !sortDirection)
               }}
             >
-              APY {sortedColumn === SORT_FIELD.APY ? (!sortDirection ? '↑' : '↓') : ''}
+              1y Fees / Liquidity {sortedColumn === SORT_FIELD.APY ? (!sortDirection ? '↑' : '↓') : ''}
             </ClickableText>
             <QuestionHelper text={'Based on 24hr volume anualized'} />
           </Flex>

src/components/TokenList/index.js

@@ -173,7 +173,7 @@ function TopTokenList({ tokens, history, itemMax = 10 }) {
       <DashGrid style={{ height: '48px' }} focus={true}>
         <DataText area="name" fontWeight="500">
           <Row>
-            {!below680 && <div style={{ marginRight: '1rem' }}>{index}</div>}
+            {!below680 && <div style={{ marginRight: '1rem', width: '10px' }}>{index}</div>}
             <TokenLogo address={item.id} />
             <CustomLink style={{ marginLeft: '16px', whiteSpace: 'nowrap' }} to={'/token/' + item.id}>
               <FormattedName text={below680 ? item.symbol : item.name} maxCharacters={20} />

src/contexts/PairData.js

@@ -21,7 +21,8 @@ import {
   get2DayPercentChange,
   isAddress,
   getBlocksFromTimestamps,
-  getTimestampsForChanges
+  getTimestampsForChanges,
+  splitQuery
 } from '../utils'
 import { timeframeOptions } from '../constants'
 
@@ -402,29 +403,24 @@ const getHourlyRateData = async (pairAddress, startTime) => {
   try {
     blocks = await getBlocksFromTimestamps(timestamps)
   } catch (e) {
-    console.log(e)
     console.log('error fetching blocks')
   }
   // catch failing case
   if (!blocks || blocks?.length === 0) {
     return []
   }
 
-  // pass the blocks to a token query
-  let result = await client.query({
-    query: HOURLY_PAIR_RATES(pairAddress, blocks),
-    fetchPolicy: 'cache-first'
-  })
+  const result = await splitQuery(HOURLY_PAIR_RATES, client, [pairAddress], blocks, 500)
 
   // format token ETH price results
   let values = []
-  for (var row in result?.data) {
+  for (var row in result) {
     let timestamp = row.split('t')[1]
     if (timestamp) {
       values.push({
         timestamp,
-        rate0: parseFloat(result.data[row]?.token0Price),
-        rate1: parseFloat(result.data[row]?.token1Price)
+        rate0: parseFloat(result[row]?.token0Price),
+        rate1: parseFloat(result[row]?.token1Price)
       })
     }
   }

src/utils/index.js

@@ -117,6 +117,35 @@ export function getTimestampsForChanges() {
   return [t1, t2, tWeek]
 }
 
+export async function splitQuery(query, localClient, vars, list, skipCount = 100) {
+  let fetchedData = {}
+  let allFound = false
+  let skip = 0
+
+  while (!allFound) {
+    let end = list.length
+    if (skip + skipCount < list.length) {
+      end = skip + skipCount
+    }
+    let sliced = list.slice(skip, end)
+    let result = await localClient.query({
+      query: query(...vars, sliced),
+      fetchPolicy: 'cache-first'
+    })
+    fetchedData = {
+      ...fetchedData,
+      ...result.data
+    }
+    if (Object.keys(result.data).length < skipCount || skip + skipCount > list.length) {
+      allFound = true
+    } else {
+      skip += skipCount
+    }
+  }
+
+  return fetchedData
+}
+
 /**
  * @notice Fetches first block after a given timestamp
  * @dev Query speed is optimized by limiting to a 600-second period
@@ -146,17 +175,14 @@ export async function getBlocksFromTimestamps(timestamps) {
     return []
   }
 
-  let result = await blockClient.query({
-    query: GET_BLOCKS(timestamps),
-    fetchPolicy: 'cache-first'
-  })
+  const fetchedData = await splitQuery(GET_BLOCKS, blockClient, [], timestamps, 500)
 
   let blocks = []
-  if (result.data) {
-    for (var t in result.data) {
+  if (fetchedData) {
+    for (var t in fetchedData) {
       blocks.push({
         timestamp: t.split('t')[1],
-        number: result.data[t][0]['number']
+        number: fetchedData[t][0]['number']
       })
     }
   }