From a903938ca7bcd4200e6e384e251c6047e041bff8 Mon Sep 17 00:00:00 2001 From: foxier25 Date: Tue, 12 Nov 2024 03:50:07 -0600 Subject: [PATCH] update token detailed page --- src/components/Tokens/TokenDetails/index.tsx | 12 +- .../Tokens/TokenTable/TokenTable.tsx | 5 - src/graphql/data/Token.ts | 3 +- src/pages/TokenDetails/index.tsx | 131 +++++++++++++++++- 4 files changed, 139 insertions(+), 12 deletions(-) diff --git a/src/components/Tokens/TokenDetails/index.tsx b/src/components/Tokens/TokenDetails/index.tsx index 2a7785e9d..aa1343866 100644 --- a/src/components/Tokens/TokenDetails/index.tsx +++ b/src/components/Tokens/TokenDetails/index.tsx @@ -42,6 +42,7 @@ import { isAddress } from 'utils' import { OnChangeTimePeriod } from './ChartSection' import InvalidTokenDetails from './InvalidTokenDetails' +import Swap from 'pages/Swap' const TokenSymbol = styled.span` text-transform: uppercase; @@ -120,7 +121,7 @@ export default function TokenDetails({ }, {} as { [key: string]: string | undefined }) ?? {}, [tokenQueryData] ) - + const { token, didFetchFromChain } = useRelevantToken(address, pageChainId, tokenQueryData) const tokenWarning = address ? checkWarning(address) : null @@ -195,7 +196,7 @@ export default function TokenDetails({ - + {/* */} + {token?.chainId == 96369? : - {tokenWarning && } - {token && } + /> } + {tokenWarning && token?.chainId != 96369 && } + {token && token?.chainId != 96369 && } {token && } diff --git a/src/components/Tokens/TokenTable/TokenTable.tsx b/src/components/Tokens/TokenTable/TokenTable.tsx index 57353c124..a8806437a 100644 --- a/src/components/Tokens/TokenTable/TokenTable.tsx +++ b/src/components/Tokens/TokenTable/TokenTable.tsx @@ -113,7 +113,6 @@ function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number }) { export default function TokenTable() { const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName) - console.log("success"); const { data: luxData, loading: luxLoading } = useQuery(MyQuery, { client: luxClient, }) @@ -170,10 +169,6 @@ export default function TokenTable() { console.log("Transformed Tokens:", transformedTokens); const { tokens, tokenVolumeRank, loadingTokens, sparklines } = useTopTokens(chainName) - console.log("tokens= ", tokens); - console.log("tokenVolumeRank= ", tokenVolumeRank); - console.log("loadingTokens= ", loadingTokens); - console.log("sparklines= ", sparklines); if(chainName != "LUX") { /* loading and error state */ diff --git a/src/graphql/data/Token.ts b/src/graphql/data/Token.ts index fab817d94..5830116cc 100644 --- a/src/graphql/data/Token.ts +++ b/src/graphql/data/Token.ts @@ -64,7 +64,8 @@ gql` } ` -export type { Chain, TokenQuery } from './__generated__/types-and-hooks' +export type { TokenQuery } from './__generated__/types-and-hooks' +export { Chain, Currency } from './__generated__/types-and-hooks' export type TokenQueryData = TokenQuery['token'] diff --git a/src/pages/TokenDetails/index.tsx b/src/pages/TokenDetails/index.tsx index 8e19ffe48..149d32c0c 100644 --- a/src/pages/TokenDetails/index.tsx +++ b/src/pages/TokenDetails/index.tsx @@ -8,6 +8,47 @@ import { atomWithStorage } from 'jotai/utils' import { useEffect, useMemo, useState } from 'react' import { useParams } from 'react-router-dom' import { getNativeTokenDBAddress } from 'utils/nativeTokens' +import { useQuery } from '@apollo/client' +import gql from 'graphql-tag' +import { luxClient } from 'graphql/thegraph/apollo' +import { Chain, TokenQuery, Currency, TokenQueryData } from 'graphql/data/Token' + +const GetTokenInfo = gql` +query GetTokenInfo($tokenAddress: String!) { + token(id: $tokenAddress) { + id + decimals + name + symbol + totalValueLockedUSD # The USD value locked in pools for this token + volumeUSD # Lifetime trading volume in USD for this token + + # Get daily data for more detailed metrics + tokenDayData(first: 365, orderBy: date, orderDirection: desc) { + id + date + priceUSD # The price of the token in USD for the day + totalValueLockedUSD + volumeUSD + } + + # Get all pools involving this token for liquidity details + whitelistPools { + id + totalValueLockedUSD + volumeUSD + token0 { + id + symbol + } + token1 { + id + symbol + } + } + } +} +` export const pageTimePeriodAtom = atomWithStorage('tokenDetailsTimePeriod', TimePeriod.DAY) @@ -38,14 +79,102 @@ export default function TokenDetailsPage() { }, }) + const { data: luxData, loading: luxLoading } = useQuery(GetTokenInfo, { + client: luxClient, + variables: { + tokenAddress: address, + }, + }) + if (luxLoading) { + console.log("Loading data..."); + } else { + console.log("Data loaded:", luxData); + } + + // Extract daily prices from the response + const dailyPrices = luxData?.token?.tokenDayData?.map((day: any) => parseFloat(day.priceUSD)); + + // Calculate the 52-week high and low + const priceHigh52W = dailyPrices && Math.max(...dailyPrices); + const priceLow52W = dailyPrices && Math.min(...dailyPrices); + + + console.log("price High and Low",priceHigh52W, priceLow52W); + console.log("tokenQuery = ",tokenQuery); + console.log("tokenPriceQuery = ", tokenPriceQuery); + + const token = luxData?.token; + console.log("token = ", token); + + // Now, you can assign the JSON data to a variable of type TokenQuery +const transformedTokenDetail: TokenQuery = { + token: { + id: "VG9rZW46RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4", + decimals: 18, + name: token?.name, + chain: Chain.Lux, + address: token?.id, + symbol: token?.symbol, + market: { + id: "VG9rZW5NYXJrZXQ6RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4X1VTRA==", + totalValueLocked: { + id: "QW1vdW50OjM0MDUwMDg5OS41NTQyMzk5X1VTRA==", + value: 340500899.5542399, + currency: Currency.Usd + }, + price: { + id: "QW1vdW50OjFfVVNE", + value: 1, + currency: Currency.Usd + }, + volume24H: { + id: "QW1vdW50OjY5MzIwODE3Ny45NDM0MDUyX1VTRA==", + value: 693208177.9434052, + currency: Currency.Usd + }, + priceHigh52W: { + id: "QW1vdW50OjEuMDAwMDAwMDAwMDAwMDAwMl9VU0Q=", + value: priceHigh52W + }, + priceLow52W: { + id: "QW1vdW50OjFfVVNE", + value: priceLow52W + } + }, + project: { + id: "VG9rZW5Qcm9qZWN0OkVUSEVSRVVNXzB4YTBiODY5OTFjNjIxOGIzNmMxZDE5ZDRhMmU5ZWIwY2UzNjA2ZWI0OF9VU0RD", + description: token?.name + " - " + token?.id, + homepageUrl: "https://www.circle.com/en/usdc", + twitterName: "circle", + logoUrl: "", + tokens: [] + } + } +}; + // Saves already-loaded chart data into state to display while tokenPriceQuery is undefined timePeriod input changes const [currentPriceQuery, setCurrentPriceQuery] = useState(tokenPriceQuery) useEffect(() => { if (tokenPriceQuery) setCurrentPriceQuery(tokenPriceQuery) }, [setCurrentPriceQuery, tokenPriceQuery]) - if (!tokenQuery) return + console.log("query",tokenQuery, transformedTokenDetail); + if (!tokenQuery && !transformedTokenDetail) return + console.log("chain", chain); + + if(chain == "LUX") { + return ( + + ) + } + if (!tokenQuery) return return (