update tokens dashboard

luxfi · Nov 8, 2024 · 8077501 · 8077501
1 parent ae513d8
commit 8077501
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 20 deletions.
diff --git a/src/components/Tokens/TokenTable/TokenRow.tsx b/src/components/Tokens/TokenTable/TokenRow.tsx
@@ -423,7 +423,7 @@ interface LoadedRowProps {
   tokenListIndex: number
   tokenListLength: number
   token: NonNullable<TopToken>
-  sparklineMap: SparklineMap
+  // sparklineMap: SparklineMap
   volumeRank: number
 }
 
@@ -498,23 +498,23 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
           volume={
             <ClickableContent>{formatNumber(token.market?.volume?.value, NumberType.FiatTokenStats)}</ClickableContent>
           }
-          sparkLine={
-            <SparkLine>
-              <ParentSize>
-                {({ width, height }) =>
-                  props.sparklineMap && (
-                    <SparklineChart
-                      width={width}
-                      height={height}
-                      tokenData={token}
-                      pricePercentChange={token.market?.pricePercentChange?.value}
-                      sparklineMap={props.sparklineMap}
-                    />
-                  )
-                }
-              </ParentSize>
-            </SparkLine>
-          }
+          // sparkLine={
+          //   <SparkLine>
+          //     <ParentSize>
+          //       {({ width, height }) =>
+          //         props.sparklineMap && (
+          //           <SparklineChart
+          //             width={width}
+          //             height={height}
+          //             tokenData={token}
+          //             pricePercentChange={token.market?.pricePercentChange?.value}
+          //             sparklineMap={props.sparklineMap}
+          //           />
+          //         )
+          //       }
+          //     </ParentSize>
+          //   </SparkLine>
+          // }
           first={tokenListIndex === 0}
           last={tokenListIndex === tokenListLength - 1}
         />

diff --git a/src/components/Tokens/TokenTable/TokenTable.tsx b/src/components/Tokens/TokenTable/TokenTable.tsx
@@ -8,6 +8,41 @@ import styled from 'styled-components/macro'
 
 import { MAX_WIDTH_MEDIA_BREAKPOINT } from '../constants'
 import { HeaderRow, LoadedRow, LoadingRow } from './TokenRow'
+import { useQuery } from '@apollo/client'
+import gql from 'graphql-tag'
+import { luxClient } from 'graphql/thegraph/apollo'
+
+const MyQuery = gql`
+query MyQuery {
+  factories(first: 10) {
+    poolCount
+    totalFeesETH
+    totalFeesUSD
+    totalValueLockedETH
+    totalValueLockedETHUntracked
+    totalValueLockedUSD
+    totalValueLockedUSDUntracked
+    totalVolumeETH
+    totalVolumeUSD
+    txCount
+    untrackedVolumeUSD
+  }
+  pools(first: 10) {
+    collectedFeesToken0
+    collectedFeesToken1
+    id
+  }
+  tokens(first: 10) {
+    volume
+    volumeUSD
+    totalValueLocked
+    totalValueLockedUSD
+    id
+    name
+    symbol
+  }
+}
+`
 
 const GridContainer = styled.div`
   display: flex;
@@ -76,9 +111,71 @@ 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,
+  })
+  if (luxLoading) {
+    console.log("Loading data...");
+  } else {
+    console.log("Data loaded:", luxData);
+  }
+  const transformedTokens = luxData?.tokens.map((token: any) => ({
+      __typename: "Token",
+      id: `VG9rZW46RVRIRVJFVU1f${typeof token.id === 'string' ? Buffer.from(token.id).toString("base64") : token.id}`, // Only apply Buffer if it's a string
+      name: token.name, // You can adjust this based on your data
+      chain: "LUX", // Assuming all tokens are from Ethereum
+      address: token.id, // Assuming native token for now
+      symbol: token.symbol, // Assuming ETH token, adjust if needed
+      market: {
+        __typename: "TokenMarket",
+        id: `VG9rZW5NYXJrZXQ6RVRIRVJFVU1f${typeof token.id === 'string' ? Buffer.from(token.id).toString("base64") : token.id}`,
+        totalValueLocked: {
+          __typename: "Amount",
+          id: `QW1vdW50OjE2MjA0NzYwNjkuOTA4MzkzMV9VU0Q=`, // Adjust ID for Amount
+          value: parseFloat(token.totalValueLocked),
+          currency: "USD",
+        },
+        price: {
+          __typename: "Amount",
+          id: `QW1vdW50OjI5MDguMTM4MTcwMjkzNjg0N19VU0Q=`,
+          value: 2908.1381702936847,
+          currency: "USD",
+        },
+        pricePercentChange: {
+          __typename: "Amount",
+          id: `QW1vdW50OjMuMDMxMTQxNzU0Nzc1OTEyN19VU0Q=`,
+          value: 3.0311417547759127,
+          currency: "USD",
+        },
+        volume: {
+          __typename: "Amount",
+          id: `QW1vdW50OjE0NTI2MTcwMzYuNjg3ODY2Ml9VU0Q=`,
+          value: parseFloat(token.volume),
+          currency: "USD",
+        },
+      },
+      project: {
+        __typename: "TokenProject",
+        id: "VG9rZW5Qcm9qZWN0OkVUSEVSRVVNXzB4YzAyYWFhMzliMjIzZmU4ZDBhMGU1YzRmMjdlYWQ5MDgzYzc1NmNjMl9XRVRI",
+        logoUrl: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png",
+      },
+      chainId: 1,
+      decimals: 18,
+      isNative: true,
+      isToken: false,
+    }));
+  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 */
   if (loadingTokens && !tokens) {
     return <LoadingTokenTable rowCount={PAGE_SIZE} />
@@ -108,7 +205,43 @@ export default function TokenTable() {
                   tokenListIndex={index}
                   tokenListLength={tokens.length}
                   token={token}
-                  sparklineMap={sparklines}
+                  // sparklineMap={sparklines}
+                  volumeRank={tokenVolumeRank[token.address]}
+                />
+              )
+          )}
+        </TokenDataContainer>
+      </GridContainer>
+    )
+  }
+}
+else {
+  if (!transformedTokens) {
+    return (
+      <NoTokensState
+        message={
+          <>
+            <AlertTriangle size={16} />
+            <Trans>An error occurred loading tokens. Please try again.</Trans>
+          </>
+        }
+      />
+    )
+  }
+  else {
+    return (
+      <GridContainer>
+        <HeaderRow />
+        <TokenDataContainer>
+          {transformedTokens?.map(
+            (token: any, index: number) =>
+              token?.address && (
+                <LoadedRow
+                  key={token.address}
+                  tokenListIndex={index}
+                  tokenListLength={transformedTokens.length}
+                  token={token}
+                  // sparklineMap={sparklines}
                   volumeRank={tokenVolumeRank[token.address]}
                 />
               )
@@ -118,3 +251,4 @@ export default function TokenTable() {
     )
   }
 }
+}
diff --git a/src/graphql/thegraph/apollo.ts b/src/graphql/thegraph/apollo.ts
@@ -40,3 +40,10 @@ export const apolloClient = new ApolloClient({
   cache: new InMemoryCache(),
   link: concat(authMiddleware, httpLink),
 })
+
+export const luxClient = new ApolloClient({
+  link: new HttpLink({
+    uri: "https://graph.lux.network/subgraphs/name/lux/uniswap-v3",
+  }),
+  cache: new InMemoryCache(),
+})
diff --git a/src/state/lists/hooks.ts b/src/state/lists/hooks.ts
@@ -45,7 +45,6 @@ function combineMaps(map1: TokenAddressMap, map2: TokenAddressMap): TokenAddress
 // merge tokens contained within lists from urls
 function useCombinedTokenMapFromUrls(urls: string[] | undefined): TokenAddressMap {
   const lists = useAllLists()
-  console.log("lists = ",lists);
   return useMemo(() => {
     if (!urls) return {}
     return (