chore(pool): use agnostic ticks query for liquidity chart

apps/web/src/graphql/agnostic/pools/usePoolTicks.ts

@@ -0,0 +1,60 @@
+import { useQuery } from '@apollo/client'
+import { gql } from 'graphql-tag'
+import { AllV3TicksQuery } from 'graphql/thegraph/__generated__/types-and-hooks'
+import ms from 'ms'
+import { useMemo } from 'react'
+import { client } from '../client'
+
+const POOL_TICKS_QUERY = gql`
+  query PoolTicksQuery($poolAddress: String = "") {
+    explore_pool_liquidity(pool_address: $poolAddress) {
+      tick
+      liquidity_net
+      price0
+      price1
+    }
+  }
+`
+
+type PoolTicksQuery = {
+  explore_pool_liquidity?: {
+    tick: string
+    liquidity_net: string
+    price0: string
+    price1: string
+  }[]
+}
+
+type PoolTicksVariables = {
+  poolAddress?: string
+}
+
+// eslint-disable-next-line import/no-unused-modules
+export function usePoolTicksQuery(poolAddress?: string, skip = false) {
+  const { data, ...rest } = useQuery<PoolTicksQuery, PoolTicksVariables>(POOL_TICKS_QUERY, {
+    client,
+    variables: { poolAddress },
+    skip: !poolAddress || skip,
+    pollInterval: ms(`30s`),
+    context: {
+      headers: {
+        'Cache-control': 'no-cache',
+      },
+    },
+  })
+
+  return { ...rest, data: useMemo(() => transform(data), [data]) }
+}
+
+function transform(data?: PoolTicksQuery): AllV3TicksQuery | undefined {
+  if (!data?.explore_pool_liquidity) return undefined
+
+  return {
+    ticks: data.explore_pool_liquidity.map((t) => ({
+      liquidityNet: t.liquidity_net,
+      price0: t.price0,
+      price1: t.price1,
+      tick: t.tick,
+    })),
+  }
+}

apps/web/src/graphql/agnostic/pools/useTopPools.ts

@@ -102,7 +102,7 @@ export function useTopV3PoolsQuery(_: any) {
     context: {
       headers: {
         'Cache-control': 'max-age=1800',
-        'X-Agnostic-Cache-Refresh-Trigger': '0.9',
+        'X-Agnostic-Cache-Refresh-Trigger': '0.8',
       },
     },
   })

apps/web/src/hooks/usePoolTickData.ts

@@ -2,13 +2,11 @@ import { ChainId, Currency, Price, Token, V3_CORE_FACTORY_ADDRESSES } from '@uni
 import { FeeAmount, Pool, TICK_SPACINGS, tickToPrice } from '@uniswap/v3-sdk'
 import { useWeb3React } from '@web3-react/core'
 import { TickData, Ticks } from 'graphql/thegraph/AllV3TicksQuery'
-import { useAllV3TicksQuery } from 'graphql/thegraph/__generated__/types-and-hooks'
 import JSBI from 'jsbi'
-import ms from 'ms'
 import { useEffect, useMemo, useState } from 'react'
 import computeSurroundingTicks from 'utils/computeSurroundingTicks'
 
-import { chainToApolloClient } from 'graphql/thegraph/apollo'
+import { usePoolTicksQuery } from 'graphql/agnostic/pools/usePoolTicks'
 import { PoolState, usePoolMultichain } from './usePools'
 
 const PRICE_FIXED_DIGITS = 8
@@ -32,7 +30,6 @@ function useTicksFromSubgraph(
   skip = 0,
   chainId: ChainId
 ) {
-  const apolloClient = chainToApolloClient[chainId]
   const poolAddress =
     currencyA && currencyB && feeAmount
       ? Pool.getAddress(
@@ -44,12 +41,9 @@ function useTicksFromSubgraph(
         )
       : undefined
 
-  return useAllV3TicksQuery({
-    variables: { poolAddress: poolAddress?.toLowerCase(), skip },
-    skip: !poolAddress,
-    pollInterval: ms(`30s`),
-    client: apolloClient,
-  })
+  const agnostic = usePoolTicksQuery(poolAddress, Boolean(skip) || chainId !== ChainId.MAINNET)
+
+  return agnostic
 }
 
 const MAX_THE_GRAPH_TICK_FETCH_VALUE = 1000
@@ -70,7 +64,7 @@ function useAllV3Ticks(
 
   useEffect(() => {
     if (data?.ticks.length) {
-      setSubgraphTickData((tickData) => [...tickData, ...data.ticks])
+      setSubgraphTickData((tickData) => uniqBy([...tickData, ...data.ticks], 'tick'))
       if (data.ticks.length === MAX_THE_GRAPH_TICK_FETCH_VALUE) {
         setSkipNumber((skipNumber) => skipNumber + MAX_THE_GRAPH_TICK_FETCH_VALUE)
       }
@@ -172,3 +166,7 @@ export function usePoolActiveLiquidity(
     }
   }, [currencyA, currencyB, activeTick, pool, ticks, isLoading, error, currentTick, liquidity, sqrtPriceX96])
 }
+
+function uniqBy<T extends object, K extends keyof T>(arr: T[], key: K) {
+  return Array.from(arr.reduce((m, item) => m.set(item[key], item), new Map<T[K], T>()).values())
+}