From 4ae83c54ed6e5535d58805b876cdd7176ce84f2d Mon Sep 17 00:00:00 2001 From: Yann Amsellem Date: Tue, 21 May 2024 20:16:55 +0200 Subject: [PATCH] chore(token): use token info from agnostic --- .../src/components/TopLevelModals/index.tsx | 2 +- apps/web/src/graphql/agnostic/assets/token.ts | 68 ++++++++++++---- .../graphql/agnostic/token/useTokenMarket.ts | 80 +++++++++++++++++++ .../graphql/agnostic/token/useTokenPrice.ts | 1 - .../src/graphql/agnostic/token/useTokenTVL.ts | 45 ----------- apps/web/src/pages/TokenDetails/index.tsx | 13 ++- 6 files changed, 142 insertions(+), 67 deletions(-) create mode 100644 apps/web/src/graphql/agnostic/token/useTokenMarket.ts delete mode 100644 apps/web/src/graphql/agnostic/token/useTokenTVL.ts diff --git a/apps/web/src/components/TopLevelModals/index.tsx b/apps/web/src/components/TopLevelModals/index.tsx index e5e9e2b2373..b9166b50e07 100644 --- a/apps/web/src/components/TopLevelModals/index.tsx +++ b/apps/web/src/components/TopLevelModals/index.tsx @@ -36,7 +36,7 @@ export default function TopLevelModals() { - + {shouldShowDevFlags && } diff --git a/apps/web/src/graphql/agnostic/assets/token.ts b/apps/web/src/graphql/agnostic/assets/token.ts index 7cb9f453096..0deaa6cbbdc 100644 --- a/apps/web/src/graphql/agnostic/assets/token.ts +++ b/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) { ...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['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], + }, + }, } } diff --git a/apps/web/src/graphql/agnostic/token/useTokenMarket.ts b/apps/web/src/graphql/agnostic/token/useTokenMarket.ts new file mode 100644 index 00000000000..ee4e4ef2317 --- /dev/null +++ b/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(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), + } +} diff --git a/apps/web/src/graphql/agnostic/token/useTokenPrice.ts b/apps/web/src/graphql/agnostic/token/useTokenPrice.ts index 8bd8fb2ae98..7e72c463710 100644 --- a/apps/web/src/graphql/agnostic/token/useTokenPrice.ts +++ b/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(TOKEN_PRICE_QUERY, { client, variables: { diff --git a/apps/web/src/graphql/agnostic/token/useTokenTVL.ts b/apps/web/src/graphql/agnostic/token/useTokenTVL.ts deleted file mode 100644 index 5e223ae7026..00000000000 --- a/apps/web/src/graphql/agnostic/token/useTokenTVL.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { QueryHookOptions, useQuery } from '@apollo/client' -import { gql } from 'graphql-tag' -import { useMemo } from 'react' -import { client } from '../client' - -const TOKEN_TVL_QUERY = gql` - query TokenTVLQuery($token: String = "") { - explore_token_tvl(token_address: $token) { - total_value_locked - tvl_usd - } - } -` - -type TokenTVLQuery = { - explore_token_tvl?: [{ total_value_locked: string; tvl_usd: string }] -} - -type TokenTVLVariables = { - token?: string -} - -// eslint-disable-next-line import/no-unused-modules -export function useTokenTVLQuery(options?: Omit, 'client'>) { - const { data, ...rest } = useQuery(TOKEN_TVL_QUERY, { - ...options, - client, - }) - - return { - ...rest, - data: useMemo(() => { - if (!data?.explore_token_tvl?.length) return undefined - return { - explore_token_tvl: { - token: options?.variables?.token, - total_value_locked: { - amount: parseFloat(data.explore_token_tvl[0].total_value_locked), - usd: parseFloat(data.explore_token_tvl[0].tvl_usd), - }, - }, - } - }, [data, options?.variables?.token]), - } -} diff --git a/apps/web/src/pages/TokenDetails/index.tsx b/apps/web/src/pages/TokenDetails/index.tsx index bc4dac676d2..2467c0e653e 100644 --- a/apps/web/src/pages/TokenDetails/index.tsx +++ b/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,