update token details pages with token price

luxfi · Nov 12, 2024 · 65bb434 · 65bb434
1 parent f339e0d
commit 65bb434
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/src/components/Tokens/TokenDetails/index.tsx b/src/components/Tokens/TokenDetails/index.tsx
@@ -121,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
@@ -196,7 +196,7 @@ export default function TokenDetails({
                 <ShareButton currency={token} />
               </TokenActions>
             </TokenInfoContainer>
-            {/* <ChartSection tokenPriceQuery={tokenPriceQuery} onChangeTimePeriod={onChangeTimePeriod} /> */}
+            <ChartSection tokenPriceQuery={tokenPriceQuery} onChangeTimePeriod={onChangeTimePeriod} />
             <StatsSection
               TVL={tokenQueryData?.market?.totalValueLocked?.value}
               volume24H={tokenQueryData?.market?.volume24H?.value}

diff --git a/src/pages/TokenDetails/index.tsx b/src/pages/TokenDetails/index.tsx
@@ -12,16 +12,21 @@ 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'
+import { TokenPriceQuery } from 'graphql/data/TokenPrice'
 
 const GetTokenInfo = gql`
 query GetTokenInfo($tokenAddress: String!) {
+  bundles(first: 10) {
+    ethPriceUSD
+  }
   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
+    derivedETH
 
     # Get daily data for more detailed metrics
     tokenDayData(first: 365, orderBy: date, orderDirection: desc) {
@@ -63,7 +68,6 @@ export default function TokenDetailsPage() {
     () => [isNative ? getNativeTokenDBAddress(chain) : tokenAddress ?? '', toHistoryDuration(timePeriod)],
     [chain, isNative, timePeriod, tokenAddress]
   )
-
   const { data: tokenQuery } = useTokenQuery({
     variables: {
       address,
@@ -101,15 +105,14 @@ export default function TokenDetailsPage() {
   const priceLow52W = dailyPrices && Math.min(...dailyPrices);
 
 
-  console.log("price High and Low",priceHigh52W, priceLow52W);
-  console.log("tokenQuery = ",tokenQuery);
-  console.log("tokenPriceQuery = ", tokenPriceQuery);
+  // 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 = {
+const transformedTokenDetail: TokenQuery = tokenPriceQuery??{
   token: {
     id: "VG9rZW46RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4",
     decimals: 18,
@@ -153,8 +156,34 @@ const transformedTokenDetail: TokenQuery = {
     }
   }
 };
+const ethPriceUSD = luxData?.bundles[0]?.ethPriceUSD;
+const ethPrice = luxData?.token?.derivedETH;
+
+const transformedTokenPriceHistory:TokenPriceQuery = {
+  token: {
+    __typename: "Token",
+    id: "VG9rZW46RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4", // Encoded version of the token ID
+    address: luxData?.token?.id,
+    chain: Chain.Lux,
+    market: {
+      __typename: "TokenMarket",
+      id: "VG9rZW5NYXJrZXQ6RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4X1VTRA==", // Encoded ID for the market
+      price: {
+        __typename: "Amount",
+        id: "QW1vdW50OjFfVVNE", // Encoded amount ID
+        value: parseFloat(ethPriceUSD) * parseFloat(ethPrice),
+      },
+      priceHistory: luxData?.token?.tokenDayData.map((data: any) => ({
+        __typename: "TimestampedAmount",
+        id: `VGltZXN0YW1wZWRBbW91bnQ6MV8x${data.date}_VVNE`, // Encoded version of the timestamped amount
+        timestamp: data.date,
+        value: parseFloat(data.priceUSD),
+      })),
+    },
+  },
+};
 
-const renderTokenDetail = (tokenAddress: any, chain: any, tokenQuery: any, tokenPriceQuery: any) => (
+const renderTokenDetail = (tokenAddress: any, chain: any, tokenQuery: any) => (
   <TokenDetails
   urlAddress={tokenAddress}
   chain={chain}
@@ -168,11 +197,12 @@ const renderTokenDetail = (tokenAddress: any, chain: any, tokenQuery: any, token
   const [currentPriceQuery, setCurrentPriceQuery] = useState(tokenPriceQuery)
   useEffect(() => {
     if (tokenPriceQuery) setCurrentPriceQuery(tokenPriceQuery)
-  }, [setCurrentPriceQuery, tokenPriceQuery])
+    else if(chain == "LUX") setCurrentPriceQuery(transformedTokenPriceHistory)
+  }, [luxData, tokenPriceQuery])
   if (!tokenQuery && !transformedTokenDetail) return <TokenDetailsPageSkeleton />
   if(chain == "LUX") {
-    return renderTokenDetail(tokenAddress, chain, transformedTokenDetail, tokenPriceQuery)
+    return renderTokenDetail(tokenAddress, chain, transformedTokenDetail)
   }
   if (!tokenQuery) return <TokenDetailsPageSkeleton />
-  return renderTokenDetail(tokenAddress, chain, tokenQuery, tokenPriceQuery)
+  return renderTokenDetail(tokenAddress, chain, tokenQuery)
 }