update token detailed page

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({
                 <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}
@@ -218,14 +219,15 @@ export default function TokenDetails({
         )}
 
         <RightPanel>
+          {token?.chainId == 96369? <Swap/> : 
           <Widget
             token={token ?? undefined}
             defaultField={Field.OUTPUT}
             onTokenChange={navigateToWidgetSelectedToken}
             onReviewSwapClick={onReviewSwapClick}
-          />
-          {tokenWarning && <TokenSafetyMessage tokenAddress={address} warning={tokenWarning} />}
-          {token && <BalanceSummary token={token} />}
+          /> }
+          {tokenWarning && token?.chainId != 96369 && <TokenSafetyMessage tokenAddress={address} warning={tokenWarning} />}
+          {token && token?.chainId != 96369 && <BalanceSummary token={token} />}
         </RightPanel>
         {token && <MobileBalanceSummaryFooter token={token} />}
 

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 */

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']
 

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<TimePeriod>('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 <TokenDetailsPageSkeleton />
+  console.log("query",tokenQuery, transformedTokenDetail);
+  if (!tokenQuery && !transformedTokenDetail) return <TokenDetailsPageSkeleton />
 
+  console.log("chain", chain);
+
+  if(chain == "LUX") {
+    return (
+      <TokenDetails
+        urlAddress={tokenAddress}
+        chain={chain}
+        tokenQuery={transformedTokenDetail}
+        tokenPriceQuery={currentPriceQuery}
+        onChangeTimePeriod={setTimePeriod}
+      />
+    )
+  }
+  if (!tokenQuery) return <TokenDetailsPageSkeleton />
   return (
     <TokenDetails
       urlAddress={tokenAddress}