chore(token): use token info from agnostic

apps/web/src/components/TopLevelModals/index.tsx

@@ -36,7 +36,7 @@ export default function TopLevelModals() {
       <Banners />
 
       <OffchainActivityModal />
-      <TransactionCompleteModal />
+      {shouldShowDevFlags && <TransactionCompleteModal />}
       <FiatOnrampModal />
       <UkDisclaimerModal />
       <GetTheAppModal />

apps/web/src/graphql/agnostic/assets/token.ts

@@ -1,8 +1,8 @@
 import { ApolloClient, InMemoryCache, QueryHookOptions, useQuery } from '@apollo/client'
 import { gql } from 'graphql-tag'
-import { Chain, TokenStandard } from 'graphql/data/__generated__/types-and-hooks'
+import { Chain, Currency, TokenQuery, TokenStandard } from 'graphql/data/__generated__/types-and-hooks'
 import { useMemo } from 'react'
-import { useTokenTVLQuery } from '../token/useTokenTVL'
+import { useTokenMarketQuery } from '../token/useTokenMarket'
 
 const client = new ApolloClient({
   uri: 'https://uniswap-assets.agnostic.dev/graphql',
@@ -60,23 +60,57 @@ export function useTokenQuery(options: QueryHookOptions<Query, Variables>) {
     ...options,
     client,
   })
-  const { data: tvl } = useTokenTVLQuery({ variables: { token: options.variables?.address } })
+  const { data: market } = useTokenMarketQuery(options.variables?.address)
+
   return {
     ...rest,
-    data: useMemo(() => {
-      return {
-        token: {
-          ...data?.token,
-          market: {
-            id: window.btoa(`TokenMarket:ETHEREUM_${data?.token?.address}_USD`),
-            totalValueLocked: {
-              id: window.btoa(`Amount:${tvl?.explore_token_tvl.total_value_locked.usd}_USD`),
-              value: tvl?.explore_token_tvl.total_value_locked.usd,
-              currency: 'USD',
-            },
-          },
+    data: useMemo(() => transform(data?.token, market), [data?.token, market]),
+  }
+}
+
+function transform(
+  token?: Query['token'],
+  market?: ReturnType<typeof useTokenMarketQuery>['data']
+): TokenQuery | undefined {
+  if (!token || !market) return undefined
+
+  return {
+    token: {
+      id: token.id,
+      chain: token.chain,
+      address: token.address,
+      decimals: token.decimals,
+      name: token.name,
+      standard: token.standard,
+      symbol: token.symbol,
+      market: {
+        id: market.id,
+        price: {
+          id: window.btoa(`Amount:${market.price}_USD`),
+          value: market.price,
+          currency: Currency.Usd,
         },
-      }
-    }, [data?.token, tvl?.explore_token_tvl.total_value_locked.usd]),
+        priceHigh52W: {
+          id: window.btoa(`Amount:${market.priceHigh52W}_USD`),
+          value: market.priceHigh52W,
+        },
+        priceLow52W: {
+          id: window.btoa(`Amount:${market.priceLow52W}_USD`),
+          value: market.priceLow52W,
+        },
+        totalValueLocked: {
+          id: window.btoa(`Amount:${market.totalValueLocked}_USD`),
+          value: market.totalValueLocked,
+        },
+        volume24H: {
+          id: window.btoa(`Amount:${market.volume24H}_USD`),
+          value: market.volume24H,
+        },
+      },
+      project: {
+        ...token.project,
+        tokens: [token],
+      },
+    },
   }
 }

apps/web/src/graphql/agnostic/token/useTokenMarket.ts

@@ -0,0 +1,80 @@
+import { useQuery } from '@apollo/client'
+import { ChainId } from '@uniswap/sdk-core'
+import { WETH_ADDRESS } from '@uniswap/universal-router-sdk'
+import { gql } from 'graphql-tag'
+import { useMemo } from 'react'
+import { client } from '../client'
+
+const TOKEN_MARKET_QUERY = gql`
+  query TokenMarketQuery($address: String!) {
+    explore_token(token_address: $address) {
+      address
+      name
+      symbol
+      decimals
+      price_USD
+      current_year_min_USD_price
+      current_year_max_USD_price
+    }
+
+    explore_token_volume(token_address: $address) {
+      volume_24h_usd
+    }
+
+    explore_token_tvl(token_address: $address) {
+      total_value_locked
+      tvl_usd
+    }
+  }
+`
+
+type TokenMarketQuery = {
+  explore_token?: [
+    {
+      address: string
+      name: string
+      symbol: string
+      decimals: string
+      price_USD: string
+      current_year_min_USD_price: string
+      current_year_max_USD_price: string
+    }
+  ]
+  explore_token_volume?: [{ volume_24h_usd: string }]
+  explore_token_tvl?: [{ total_value_locked: string; tvl_usd: string }]
+}
+
+type TokenMarketVariables = {
+  address: string
+}
+
+// eslint-disable-next-line import/no-unused-modules
+export function useTokenMarketQuery(address: string = WETH_ADDRESS(ChainId.MAINNET)) {
+  const { data, error, loading } = useQuery<TokenMarketQuery, TokenMarketVariables>(TOKEN_MARKET_QUERY, {
+    client,
+    variables: { address },
+  })
+
+  return {
+    data: useMemo(() => transform(data), [data]),
+    error,
+    loading,
+  }
+}
+
+function transform(data?: TokenMarketQuery) {
+  const token = data?.explore_token?.[0]
+  const volume = data?.explore_token_volume?.[0]
+  const tvl = data?.explore_token_tvl?.[0]
+  if (!token || !volume || !tvl) return undefined
+
+  return {
+    id: window.btoa(`Token:${token.address}`),
+    address: token.address,
+    price: parseFloat(token.price_USD),
+    priceHigh52W: parseFloat(token.current_year_max_USD_price),
+    priceLow52W: parseFloat(token.current_year_min_USD_price),
+    volume24H: parseFloat(volume.volume_24h_usd),
+    totalValueLocked: parseFloat(tvl.tvl_usd),
+  }
+}

apps/web/src/graphql/agnostic/token/useTokenPrice.ts

@@ -63,7 +63,6 @@ type Input = {
 }
 
 export function useTokenPriceQuery(options: Input) {
-  console.log(!options.variables.address)
   const { data, loading } = useQuery<TokenPriceQuery, TokenPriceVariables>(TOKEN_PRICE_QUERY, {
     client,
     variables: {

apps/web/src/pages/TokenDetails/index.tsx

@@ -1,4 +1,5 @@
 import { ChainId } from '@uniswap/sdk-core'
+import { WETH_ADDRESS } from '@uniswap/universal-router-sdk'
 import { useWeb3React } from '@web3-react/core'
 import PrefetchBalancesWrapper, {
   useCachedPortfolioBalancesQuery,
@@ -9,7 +10,8 @@ import InvalidTokenDetails from 'components/Tokens/TokenDetails/InvalidTokenDeta
 import { TokenDetailsPageSkeleton } from 'components/Tokens/TokenDetails/Skeleton'
 import { checkWarning } from 'constants/tokenSafety'
 import { NATIVE_CHAIN_ID, nativeOnChain } from 'constants/tokens'
-import { useTokenQuery } from 'graphql/data/__generated__/types-and-hooks'
+import { useTokenQuery } from 'graphql/agnostic/assets/token'
+import { Chain } from 'graphql/data/__generated__/types-and-hooks'
 import { gqlToCurrency, supportedChainIdFromGQLChain, validateUrlChainParam } from 'graphql/data/util'
 import { useCurrency } from 'hooks/Tokens'
 import { useSrcColor } from 'hooks/useColor'
@@ -95,7 +97,12 @@ function useCreateTDPContext(): PendingTDPContext | LoadedTDPContext {
 
   const tokenDBAddress = isNative ? getNativeTokenDBAddress(currencyChain) : tokenAddress
 
-  const tokenQuery = useTokenQuery({ variables: { address: tokenDBAddress, chain: currencyChain }, errorPolicy: 'all' })
+  // const tokenQuery = useTokenQuery({ variables: { address: tokenDBAddress, chain: currencyChain }, errorPolicy: 'all' })
+  const tokenQuery = useTokenQuery({
+    variables: { address: tokenDBAddress ?? WETH_ADDRESS(ChainId.MAINNET) },
+    skip: currencyChain !== Chain.Ethereum,
+    errorPolicy: 'all',
+  })
   const chartState = useCreateTDPChartState(tokenDBAddress, currencyChain)
 
   const multiChainMap = useMultiChainMap(tokenQuery)
@@ -118,7 +125,7 @@ function useCreateTDPContext(): PendingTDPContext | LoadedTDPContext {
       // `currency.address` is checksummed, whereas the `tokenAddress` url param may not be
       address: (currency?.isNative ? NATIVE_CHAIN_ID : currency?.address) ?? tokenAddress,
       currencyWasFetchedOnChain,
-      tokenQuery,
+      tokenQuery: tokenQuery as any,
       chartState,
       warning,
       multiChainMap,