From 0d00d080ffeaf5248bdaff2d904d0a5a6c2d066b Mon Sep 17 00:00:00 2001 From: foxier25 Date: Wed, 27 Nov 2024 00:36:36 -0600 Subject: [PATCH] update token table chart and add liquidity page --- src/components/Tokens/TokenDetails/About.tsx | 9 +- .../Tokens/TokenDetails/ChartSection.tsx | 1 + src/components/Tokens/TokenDetails/index.tsx | 6 +- .../Tokens/TokenTable/TokenTable.tsx | 164 +++++++++--------- src/pages/AddLiquidity/index.tsx | 8 +- src/pages/App.tsx | 6 +- src/pages/TokenDetails/index.tsx | 4 +- 7 files changed, 105 insertions(+), 93 deletions(-) diff --git a/src/components/Tokens/TokenDetails/About.tsx b/src/components/Tokens/TokenDetails/About.tsx index 625ebd132..8e93cab8a 100644 --- a/src/components/Tokens/TokenDetails/About.tsx +++ b/src/components/Tokens/TokenDetails/About.tsx @@ -81,8 +81,11 @@ export function AboutSection({ address, chainId, description, homepageUrl, twitt //must remove let displayTokenDescription = tokenDescription; - if (chainId == 200200 && tokenDescription?.includes("Wrapped LUX")) { - displayTokenDescription = tokenDescription?.replace(/LUX/g, 'ZOO') + if (tokenDescription?.includes("Wrapped LUX")) { + displayTokenDescription = tokenDescription?.replace(/Wrapped LUX/g, 'LUX') + } + if (chainId == 200200 && tokenDescription?.includes("LUX")) { + displayTokenDescription = displayTokenDescription?.replace(/LUX/g, 'ZOO') } const baseExplorerUrl = getChainInfo(chainId).explorer @@ -120,4 +123,4 @@ export function AboutSection({ address, chainId, description, homepageUrl, twitt ) -} +} \ No newline at end of file diff --git a/src/components/Tokens/TokenDetails/ChartSection.tsx b/src/components/Tokens/TokenDetails/ChartSection.tsx index c424335e9..ccd255756 100644 --- a/src/components/Tokens/TokenDetails/ChartSection.tsx +++ b/src/components/Tokens/TokenDetails/ChartSection.tsx @@ -112,6 +112,7 @@ function Chart({ // Initializes time period to global & maintain separate time period for subsequent changes const timePeriod = useAtomValue(pageTimePeriodAtom) const prices = usePriceHistory(tokenPriceQuery, timePeriod) + console.log(tokenPriceQuery, prices); return ( diff --git a/src/components/Tokens/TokenDetails/index.tsx b/src/components/Tokens/TokenDetails/index.tsx index c76ab6499..cad21fa3d 100644 --- a/src/components/Tokens/TokenDetails/index.tsx +++ b/src/components/Tokens/TokenDetails/index.tsx @@ -43,6 +43,7 @@ import { isAddress } from 'utils' import { OnChangeTimePeriod } from './ChartSection' import InvalidTokenDetails from './InvalidTokenDetails' import Swap from 'pages/Swap' +import { to } from 'make-plural' const TokenSymbol = styled.span` text-transform: uppercase; @@ -173,6 +174,7 @@ export default function TokenDetails({ if (token === undefined || !address) { return } + return ( {/* must edit */} - {token.name ? (token?.chainId == 200200 && token?.symbol == "WLUX" ? "Wrapped ZOO" : token?.name) : Name not found} - {token.symbol ? (token?.chainId == 200200 && token?.symbol == "WLUX" ? "WZOO" : token?.symbol) : Symbol not found} + {token.name ? (token?.chainId == 200200 && token?.symbol == "WLUX" ? "ZOO" : (token?.chainId == 96369 && token?.symbol == "WLUX" ? 'LUX' : token?.name)) : Name not found} + {token.symbol ? (token?.chainId == 200200 && token?.symbol == "WLUX" ? "ZOO" : (token?.chainId == 96369 && token?.symbol == "WLUX" ? 'LUX' : token?.symbol)) : Symbol not found} diff --git a/src/components/Tokens/TokenTable/TokenTable.tsx b/src/components/Tokens/TokenTable/TokenTable.tsx index 6a5fee4dd..300f37f9b 100644 --- a/src/components/Tokens/TokenTable/TokenTable.tsx +++ b/src/components/Tokens/TokenTable/TokenTable.tsx @@ -176,8 +176,8 @@ export default function TokenTable() { luxClient = zooNetClient; } const tokenAddresses = TOKENS_LUX_LIST.tokens - .filter((token) => token.chainId === CHAIN_NAME_TO_CHAIN_ID[chainName]) // Filter by chainId - .map((token) => token.address.toUpperCase()); // Extract the address + .filter((token) => token.chainId === CHAIN_NAME_TO_CHAIN_ID[chainName]) // Filter by chainId + .map((token) => token.address.toUpperCase()); // Extract the address const { data: luxData, loading: luxLoading, refetch } = useQuery(getTokenInfoQuery, { client: luxClient, pollInterval: 5000, @@ -192,95 +192,101 @@ export default function TokenTable() { const calculateTransformedTokens = useCallback(() => { refetch(); return luxData?.tokens - ?.filter((token: any) => tokenAddresses.includes(token.id.toUpperCase())).map((token: any) => { - const tokenDayData = token.tokenDayData || []; - const tokenHourData = token.tokenHourData || []; - let nowPrice = 0; - let previousPrice = 0; - let mostRecentData = null; - - if (duration == "HOUR") { - // Process hourly duration logic - mostRecentData = tokenHourData[0] || null; - nowPrice = mostRecentData ? mostRecentData.priceUSD : 0; - previousPrice = nowPrice; - if (tokenHourData[1]?.periodStartUnix && tokenHourData[1].periodStartUnix * 1000 <= new Date(currentHourTime).getTime() - 3600 * 1000 && tokenHourData[1].priceUSD != 0) - previousPrice = tokenHourData[1].priceUSD; - } else { - let i; - let daysPer; - - mostRecentData = tokenDayData[0] || null; - nowPrice = mostRecentData ? mostRecentData.priceUSD : 0; - daysPer = 1; - - if (duration == "DAY") { - daysPer = 1; - } else if (duration == "WEEK") { - daysPer = 7; - } else if (duration == "MONTH") { - daysPer = 31; - } else if (duration == "YEAR") { - daysPer = 365; - } - - if (tokenDayData.length == 0) { + ?.filter((token: any) => tokenAddresses.includes(token.id.toUpperCase())).map((token: any) => { + const tokenDayData = token.tokenDayData || []; + const tokenHourData = token.tokenHourData || []; + let nowPrice = 0; + let previousPrice = 0; + let mostRecentData = null; + + if (duration == "HOUR") { + // Process hourly duration logic + mostRecentData = tokenHourData[0] || null; + nowPrice = mostRecentData ? mostRecentData.priceUSD : 0; previousPrice = nowPrice; + if (tokenHourData[1]?.periodStartUnix && tokenHourData[1].periodStartUnix * 1000 <= new Date(currentHourTime).getTime() - 3600 * 1000 && tokenHourData[1].priceUSD != 0) + previousPrice = tokenHourData[1].priceUSD; } else { - for (i = 0; i < tokenDayData.length; i++) { - if (tokenDayData[i]?.date && tokenDayData[i].date * 1000 <= new Date(todayDate).getTime() - daysPer * 24 * 60 * 60 * 1000) { - previousPrice = tokenDayData[i].priceUSD; - break; - } + let i; + let daysPer; + + mostRecentData = tokenDayData[0] || null; + nowPrice = mostRecentData ? mostRecentData.priceUSD : 0; + daysPer = 1; + + if (duration == "DAY") { + daysPer = 1; + } else if (duration == "WEEK") { + daysPer = 7; + } else if (duration == "MONTH") { + daysPer = 31; + } else if (duration == "YEAR") { + daysPer = 365; } - if (previousPrice == 0) { - for (i = tokenDayData.length - 1; i >= 0; i--) { - if (tokenDayData[i].priceUSD != 0) { + + if (tokenDayData.length == 0) { + previousPrice = nowPrice; + } else { + for (i = 0; i < tokenDayData.length; i++) { + if (tokenDayData[i]?.date && tokenDayData[i].date * 1000 <= new Date(todayDate).getTime() - daysPer * 24 * 60 * 60 * 1000) { previousPrice = tokenDayData[i].priceUSD; break; } } + if (previousPrice == 0) { + for (i = tokenDayData.length - 1; i >= 0; i--) { + if (tokenDayData[i].priceUSD != 0) { + previousPrice = tokenDayData[i].priceUSD; + break; + } + } + } } } - } - let priceChangePercent = previousPrice !== 0 - ? ((ethPriceUSD * parseFloat(token.derivedETH) - previousPrice) / previousPrice) * 100 - : 0; - - if (nowPrice == 0) - priceChangePercent = 0; - - return { - name: token.name, - chain: chainName, - address: token.id, - symbol: token.symbol, - market: { - totalValueLocked: { - value: parseFloat(token.totalValueLockedUSD), - }, - price: { - value: ethPriceUSD && token.derivedETH ? parseFloat(ethPriceUSD) * parseFloat(token.derivedETH) : 0, - }, - pricePercentChange: { - value: priceChangePercent, + let priceChangePercent = previousPrice !== 0 + ? ((ethPriceUSD * parseFloat(token.derivedETH) - previousPrice) / previousPrice) * 100 + : 0; + + if (nowPrice == 0) + priceChangePercent = 0; + + let tokenName = token.name; + let tokenSymbol = token.symbol; + if (token.name == 'Wrapped LUX') { + tokenName = tokenSymbol = 'LUX'; + } + + return { + name: tokenName,//token.name, + chain: chainName, + address: token.id, + symbol: tokenSymbol,//token.symbol, + market: { + totalValueLocked: { + value: parseFloat(token.totalValueLockedUSD), + }, + price: { + value: ethPriceUSD && token.derivedETH ? parseFloat(ethPriceUSD) * parseFloat(token.derivedETH) : 0, + }, + pricePercentChange: { + value: priceChangePercent, + }, + volume: { + value: parseFloat(token.volumeUSD), + }, }, - volume: { - value: parseFloat(token.volumeUSD), + project: { + __typename: 'TokenProject', + id: 'VG9rZW5Qcm9qZWN0OkVUSEVSRVVNXzB4YzAyYWFhMzliMjIzZmU4ZDBhMGU1YzRmMjdlYWQ5MDgzYzc1NmNjMl9XRVRI', + logoUrl: 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png', }, - }, - 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, - }; - }); + chainId: 1, + decimals: 18, + isNative: true, + isToken: false, + }; + }); }, [luxData, ethPriceUSD, duration]); // Update transformed tokens when luxData, ethPriceUSD, or duration changes diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index 4a8550dea..224b89c08 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/src/pages/AddLiquidity/index.tsx @@ -365,7 +365,7 @@ export default function AddLiquidity() { if (idB === undefined) { navigate(`/add/${idA}`) } else { - navigate(`/add/${idA}/${idB}`) + navigate(`/add/${idB}/${idA}`) } }, [handleCurrencySelect, currencyIdB, navigate] @@ -377,7 +377,7 @@ export default function AddLiquidity() { if (idA === undefined) { navigate(`/add/${idB}`) } else { - navigate(`/add/${idA}/${idB}`) + navigate(`/add/${idB}/${idA}`) } }, [handleCurrencySelect, currencyIdA, navigate] @@ -387,7 +387,7 @@ export default function AddLiquidity() { (newFeeAmount: FeeAmount) => { onLeftRangeInput('') onRightRangeInput('') - navigate(`/add/${currencyIdA}/${currencyIdB}/${newFeeAmount}`) + navigate(`/add/${currencyIdB}/${currencyIdA}/${newFeeAmount}`) }, [currencyIdA, currencyIdB, navigate, onLeftRangeInput, onRightRangeInput] ) @@ -568,7 +568,7 @@ export default function AddLiquidity() { onFieldAInput(formattedAmounts[Field.CURRENCY_B] ?? '') } navigate( - `/add/${currencyIdB as string}/${currencyIdA as string}${feeAmount ? '/' + feeAmount : ''}` + `/add/${currencyIdA as string}/${currencyIdB as string}${feeAmount ? '/' + feeAmount : ''}` ) }} /> diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 02b5c6523..5200b09f4 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -227,9 +227,9 @@ export default function App() { }> {/* this is workaround since react-router-dom v6 doesn't support optional parameters any more */} - - - + + + }> diff --git a/src/pages/TokenDetails/index.tsx b/src/pages/TokenDetails/index.tsx index 9e90e9efa..d92f7d8a4 100644 --- a/src/pages/TokenDetails/index.tsx +++ b/src/pages/TokenDetails/index.tsx @@ -76,7 +76,7 @@ function getQueryParams(timePeriod: any) { case 2: return [2, 168]; case 3: - return [30, 2]; + return [2, 720]; case 4: return [365, 2]; } @@ -204,7 +204,7 @@ export default function TokenDetailsPage() { id: "QW1vdW50OjFfVVNE", // Encoded amount ID value: parseFloat(ethPriceUSD) * parseFloat(ethPrice), }, - priceHistory: timePeriod < 3 ? tokenHourData : tokenDayData, + priceHistory: timePeriod < 4 ? tokenHourData : tokenDayData, }, }, };