diff --git a/src/components/Tokens/TokenTable/TokenRow.tsx b/src/components/Tokens/TokenTable/TokenRow.tsx index 9cf4cbab5..d7f809098 100644 --- 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 - sparklineMap: SparklineMap + // sparklineMap: SparklineMap volumeRank: number } @@ -498,23 +498,23 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef{formatNumber(token.market?.volume?.value, NumberType.FiatTokenStats)} } - sparkLine={ - - - {({ width, height }) => - props.sparklineMap && ( - - ) - } - - - } + // sparkLine={ + // + // + // {({ width, height }) => + // props.sparklineMap && ( + // + // ) + // } + // + // + // } first={tokenListIndex === 0} last={tokenListIndex === tokenListLength - 1} /> diff --git a/src/components/Tokens/TokenTable/TokenTable.tsx b/src/components/Tokens/TokenTable/TokenTable.tsx index 66dedfd95..57353c124 100644 --- 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 @@ -108,7 +205,43 @@ export default function TokenTable() { tokenListIndex={index} tokenListLength={tokens.length} token={token} - sparklineMap={sparklines} + // sparklineMap={sparklines} + volumeRank={tokenVolumeRank[token.address]} + /> + ) + )} + + + ) + } +} +else { + if (!transformedTokens) { + return ( + + + An error occurred loading tokens. Please try again. + + } + /> + ) + } + else { + return ( + + + + {transformedTokens?.map( + (token: any, index: number) => + token?.address && ( + ) @@ -118,3 +251,4 @@ export default function TokenTable() { ) } } +} diff --git a/src/graphql/thegraph/apollo.ts b/src/graphql/thegraph/apollo.ts index 07b884d3d..f194e9832 100644 --- 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 index 9159686cf..0727ffe61 100644 --- 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 (