From c726afed338357b2446226a10bd58b768fd107b8 Mon Sep 17 00:00:00 2001 From: foxier25 Date: Fri, 22 Nov 2024 14:30:45 -0600 Subject: [PATCH] add ZOO network in tokenTable, update ZOO token lists --- src/assets/images/zoo-Logo.png | Bin 0 -> 3756 bytes src/assets/svg/zoo_logo.svg | 6 + src/components/Logo/QueryTokenLogo.tsx | 7 +- src/components/NetworkAlert/NetworkAlert.tsx | 6 +- .../Tokens/TokenTable/TokenTable.tsx | 49 +++--- src/constants/chainInfo.ts | 5 +- src/graphql/data/util.tsx | 5 +- src/graphql/thegraph/apollo.ts | 12 +- src/lib/hooks/useCurrencyLogoURIs.ts | 19 +- src/pages/TokenDetails/index.tsx | 166 +++++++++--------- .../RadialGradientByChainUpdater.ts | 6 +- 11 files changed, 154 insertions(+), 127 deletions(-) create mode 100644 src/assets/images/zoo-Logo.png create mode 100644 src/assets/svg/zoo_logo.svg diff --git a/src/assets/images/zoo-Logo.png b/src/assets/images/zoo-Logo.png new file mode 100644 index 0000000000000000000000000000000000000000..b19cea4f95e6718dacdfa3063445ebe3c188e41e GIT binary patch literal 3756 zcmV;d4pZ@oP)>aKdP-|Mcg z|E*iq@BX@9Ro%K(B}B*|lWb06Bomp+v&>^DYgtDbW$XZ;oHEKNVKv1R@g(;!o?#qM zd*SdzkSw}#0aGaAD|V46+gQ#EQMe(oy37eGiD!0&|X3op;iqf33 zd6+Nop5469WOB%IUXLwH7p`Xk75GglGZ;xLr$BUBvdN{GDw0VBa~VZTr$&t|&A60z zlPpUlJDADoWIAEGQNWJ`k@XaCV7khZ$xs#(Y<^)T$ETYxO&G;$!a^~_(quG83vLeR zi%i8TE=ciSh{lZNJHpCJhLMq~A((M&B;Dc2-0!;H>noM4Ceom0_UW?-*&xupXx!$hVI7}#~n|Fy$+ns-nV+LLXL}|lX=UWTB zY&{vCjI>PK@P=I5;#}=~YK;nd+LY!f*V|ZS6-{kP(=f#|o|C}?w#2#9`O-R746+k{ z-tBzp0pA$!@Sy=8IX`;Dy{6*iIUjl$&dD*`Fz6Pdy=0le`35cm?KxK_D$PLWJI^Vl zU1Evp%bo9h;QmC!8Rz`w3%ltWuQW~g*7?mRUW`|q3C?FeMhlLOZ@0}R=QAHEibtGV zoWFdgum1n$N9Qe{c~w`OYn`u>(C>8Do8P!xfn@N6jyQjGeo6`zbc`*|V&|tMF(r0x znj=|!A7c+T4?7+m z#yj5xfF9AsaoY)lI@{qu_fiW4Yom#Cz4J?8Uu-ONUI_?!_1ADJoL2(EqPpUo<9rer zcGtNQ)5X*RMeQpre7Vimq07UO(zJKO=s>Y7Qk-+0KLSN%M6bi$HtH*}_K9cUxRu2` z#(2gsj59c&OSzW2c#RDfeYJ~aOlKlv8O~tN;S#POpBGs}rC0L&-s;kHDZ<)EZ-4Mw z?xHUl(pnB;JjI6YE9EK9p^3DO){J1b7n_(S*W}ym2%9*|7^aXV^3$DX*ptu`Z6c4R zT5Ysr5f7L$5*~313~C*~R;?#_gBA(5(b3+Hvs0_ZnG+6is<_gy-d=2u z`5Z6M(5Q{JwwA@Ns}|?0aES9)3pMA&c)7hxBjYyO+HvT#>Qg%_!XVDenxnH=pGy_b z@D2M~Y2zr(7ii4!8VA_<7upjiJIdV^8)<2+{(niHpo$Z%wee?jhprJqaB{H3X-ILD z+AmSsG+{KeSxXrkSi%&#C`)&iob&&b(kg>NJjp6HvxyZvMvk&{CQHr35}ATgw!%UB z;hDP?kM&@bx{H;sw9{B$r~EHWB1>VB7c~sDpTgpxC@Fojm4o`;=CR~#!9>5KdSB97 z`bZZ=wK!Yhgo`A1EI+4^r)88rVXC5yZhRNDjg?A4-!OI5iN2o{T~0UY;~W$9V%{}m zN-g@ZOWM*Th2!q8_rE_>5kHe(efo~#Ct$p|JVY?v-&puL(udiH)lqFGDEcSW8sQ#} zmRfeLQ}*8qA*U&y=o&@8^FK3Z{Yfz2PjMzHI^0un`6_dA$f8QqRPscAsjs+(~M`Y;T#%q-E~WYD3=Z+-u^rR|Gq~ zmu9+h5~)T$7Fw^>_AyfXH#H`?PZ|F7ZZ>h-eBoUJ$!~l@GwGKnXKgu(ynSnE$j^ z8}jJijVA7!sXORNfF(4Re(4U1X=iQPOY2ynWiRjXY7#MqOUvA+)rNd1e!GbSpAnK! zurV7IGmM6s9WB5K8m}ce+Z4+UHODdDYWP~piF-+0Z=9jq=f%lR`oy`~DUF*;YtdOH zd`D`%Uqq?rrKS364SJdx{<|ei)*Z^nyA+|2W_VmR-J@6tHd&(RA5rR4MW$$J%r@SX zS~oD8;pYneXER4Q`GZcO+$E$XDUU#Q3uRa3552rZ&1q+SdL$tDTZ(vgR+L3B)uP79lJM*X4pUee zcIM^PJE^U4hjNF^k~q>1^&<^}%c3kvJ*gPp3eJ!6-Ak0a3;OV7l%a}Bn*B}JVwP9$ zGAOqr&1=dm%lNiB)n<<(Zd^TQxs~_X2~_emPb%kFf+mu*i5rwwjTz1SUynfD%p8Wr zc-p5;-C2G4gq{69syt3pabT%prXM*#(AkMFNjmQ8tYO_qYyZwk=E=BItHpWVhB)>z z^rMLbH(9E?x8ikU>%ZSR%1bbAF0U5nCL7`$;juWC%8Y5eaESWyziw+*GOI?Md0`O;V7_9dNERK=i}Pyw5=H1o z_8Dq3KXZcBJKFpc2exrP9kjPGj!ftx11maW+G>tQ2 z%sG1Ux0uTcu>=|sWB%5etK&YrMI%JnDDw7?U8ePIrOe_-mn{@Ag$wA#A+)0rZRo-= zoW+eiXO=`B!7dgtmCMQDa5~V8edtVA`g0YJ@qss|2rhD`u?Lshr?NBIc_cubTw9zR z=aIm$wa)cmWVwr51H-KP$K}s-UI_?e>Weedc_k23(Yd}jE&bR=<%r39(JwbDa-InQ z*G3oTV&|EpQ%R@j;xOlID?#blFHAtl#7$WTIZo8@`U>0@QKbt zN#q2zIGqyCnRS@5QpAE8&P#zC4D1!Bm-A9m*hEti8{T%FN&>eD9o)5)Nnkte^~A|! zmGhR*JScSG0_QDX*-5s(I2jQq#W}p^J`oT6!FkNbpw0gAiIc&H&TBqVAmYWw<}8N> zrL-0CqjmC+!<2C%5jfao6?o1{8i>T;4(C0O86*;geOTxG=OHtN37q9T=;2Uce_;kM zI4^p{XkiNNHEuq2#Lpr!ggGvs%>%Y^sIY^bGd>(vUuk>AX=Svv(ovU}giYw@^_>T4 z#J98)b|K$+)e67RU)Y9B8%IevB94EsDo-1i4{FTIRtC^f<>}$=g)S-27m8eH3-Szi zt2_qbnj?j`xNPbK*~O{CdrWWjO-rg6Dg1zj_Kp=x8zu_BpryunjE))}6n;W$K6XCW z8vlGq|Fp?+R+L30d%bbW~?R=J}1D`qnD|m&*B6-l351a-Po=eIL ztHWcWO?(DQCV23S{vQr$|JgW`qb9c`_Nr zrj!!qbIug01Fb2bA|-?=C6_FbYS5JzL!OfOGX=C3sR~C^7*c_DF^!HQ)u9ishD@OC zJQ(F}j+7PXFdhiW;ryG)*E~fqr3C806uu9%Fe@2L6Opcv#px6V@GR?{6mojVrOwxN10qW$Z!^}@eKetzs5|)y-BfII9WzgIe~m*3A?QgSi{iZJ+mxS}#h5f2j~PnT zlJj_o8?E*#Uondbn8pIuByi1n zIV&h)Dr4wFbLUNO(~d0000 + + + + + diff --git a/src/components/Logo/QueryTokenLogo.tsx b/src/components/Logo/QueryTokenLogo.tsx index 2c88e4e39..d7bbf2374 100644 --- a/src/components/Logo/QueryTokenLogo.tsx +++ b/src/components/Logo/QueryTokenLogo.tsx @@ -4,6 +4,9 @@ import { TopToken } from 'graphql/data/TopTokens' import { CHAIN_NAME_TO_CHAIN_ID } from 'graphql/data/util' import AssetLogo, { AssetLogoBaseProps } from './AssetLogo' +import { SUPPORTED_CHAINS } from '@uniswap/smart-order-router' + +import { supportedChainId } from 'utils/supportedChainId' export default function QueryTokenLogo( props: AssetLogoBaseProps & { @@ -14,7 +17,7 @@ export default function QueryTokenLogo( return ( ) -} +} \ No newline at end of file diff --git a/src/components/NetworkAlert/NetworkAlert.tsx b/src/components/NetworkAlert/NetworkAlert.tsx index c5584b88d..da4d9842e 100644 --- a/src/components/NetworkAlert/NetworkAlert.tsx +++ b/src/components/NetworkAlert/NetworkAlert.tsx @@ -61,7 +61,7 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: { [SupportedChainId.LUX_TESTNET]: 'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0.95) 100%)', [SupportedChainId.ZOO]: - 'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0.95) 100%)', + 'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(25, 25, 25, 0.85) 0%, rgba(5, 5, 5, 0.95) 100%)', [SupportedChainId.OPTIMISM]: 'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.01) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.01) 0%, rgba(235, 0, 255, 0.01) 96%)', [SupportedChainId.OPTIMISM_GOERLI]: @@ -148,7 +148,7 @@ const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = { [SupportedChainId.POLYGON]: 'rgba(130, 71, 229)', [SupportedChainId.POLYGON_MUMBAI]: 'rgba(130, 71, 229)', [SupportedChainId.CELO]: 'rgba(53, 178, 97)', - [SupportedChainId.LUX]: 'rgba(250, 250, 250)', + [SupportedChainId.LUX]: 'rgba(180, 180, 180)', [SupportedChainId.LUX_TESTNET]: 'rgba(200, 200, 200)', [SupportedChainId.ZOO]: 'rgba(250, 250, 250)', [SupportedChainId.CELO_ALFAJORES]: 'rgba(53, 178, 97)', @@ -192,4 +192,4 @@ export function NetworkAlert() { ) : null -} +} \ No newline at end of file diff --git a/src/components/Tokens/TokenTable/TokenTable.tsx b/src/components/Tokens/TokenTable/TokenTable.tsx index b007168ef..6a5fee4dd 100644 --- a/src/components/Tokens/TokenTable/TokenTable.tsx +++ b/src/components/Tokens/TokenTable/TokenTable.tsx @@ -10,7 +10,6 @@ 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'; import { filterStringAtom, @@ -21,6 +20,8 @@ import { } from 'components/Tokens/state' import { useAtomValue } from 'jotai/utils' import { useMemo, useEffect, useState, useCallback, useRef } from 'react' +import { luxNetClient } from 'graphql/thegraph/apollo' +import { zooNetClient } from 'graphql/thegraph/apollo' import { CHAIN_NAME_TO_CHAIN_ID, @@ -167,6 +168,13 @@ const currentHourTime = getCurrentHourTimestamp(); export default function TokenTable() { const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName); + let luxClient; + + if (chainName == 'LUX') { + luxClient = luxNetClient; + } else { + 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 @@ -196,7 +204,7 @@ export default function TokenTable() { 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 ) + 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; @@ -244,38 +252,22 @@ export default function TokenTable() { priceChangePercent = 0; return { - __typename: 'Token', - id: `VG9rZW46RVRIRVJFVU1f${typeof token.id == 'string' ? Buffer.from(token.id).toString('base64') : token.id}`, name: token.name, - chain: 'LUX', + chain: chainName, address: token.id, symbol: token.symbol, market: { - __typename: 'TokenMarket', - id: `VG9rZW5NYXJrZXQ6RVRIRVJFVU1f${typeof token.id == 'string' ? Buffer.from(token.id).toString('base64') : token.id}`, totalValueLocked: { - __typename: 'Amount', - id: 'QW1vdW50OjE2MjA0NzYwNjkuOTA4MzkzMV9VU0Q=', value: parseFloat(token.totalValueLockedUSD), - currency: 'USD', }, price: { - __typename: 'Amount', - id: 'QW1vdW50OjI5MDguMTM4MTcwMjkzNjg0N19VU0Q=', value: ethPriceUSD && token.derivedETH ? parseFloat(ethPriceUSD) * parseFloat(token.derivedETH) : 0, - currency: 'USD', }, pricePercentChange: { - __typename: 'Amount', - id: 'QW1vdW50OjMuMDMxMTQxNzU0Nzc1OTEyN19VU0Q=', value: priceChangePercent, - currency: '%', }, volume: { - __typename: 'Amount', - id: 'QW1vdW50OjE0NTI2MTcwMzYuNjg3ODY2Ml9VU0Q=', value: parseFloat(token.volumeUSD), - currency: 'USD', }, }, project: { @@ -406,14 +398,29 @@ export default function TokenTable() { ); - if (chainName !== 'LUX') { + if (chainName != 'LUX' && chainName != 'ZOO') { if (loadingTokens && !tokens) return ; if (!tokens) return renderErrorOrEmptyState("An error occurred loading tokens. Please try again."); if (tokens.length == 0) return No tokens found} />; return renderTokens(tokens, tokenVolumeRank); - } else { + } else if (chainName == 'LUX') { + if (luxLoading || !sortedTokens) return ; + if (!sortedTokens || sortedTokens.length == 0) + return renderErrorOrEmptyState("No tokens found or an error occurred loading tokens."); + return renderTokens(sortedTokens, transformedTokenVolumeRank); + } else { //chain = ZOO + if (luxLoading && !sortedTokens) return ; if (!sortedTokens || sortedTokens.length == 0) return renderErrorOrEmptyState("No tokens found or an error occurred loading tokens."); + + //must remove + for (let i = 0; i < sortedTokens.length; i++) { + if (sortedTokens[i].symbol == 'WLUX') + sortedTokens[i].isNative = true; + sortedTokens[i].symbol = sortedTokens[i].symbol.replace(/LUX/g, 'ZOO') + sortedTokens[i].name = sortedTokens[i].name.replace(/LUX/g, 'ZOO') + } + return renderTokens(sortedTokens, transformedTokenVolumeRank); } } \ No newline at end of file diff --git a/src/constants/chainInfo.ts b/src/constants/chainInfo.ts index a1738f3c8..af7bfbdf1 100644 --- a/src/constants/chainInfo.ts +++ b/src/constants/chainInfo.ts @@ -1,6 +1,7 @@ import celoCircleLogoUrl from 'assets/images/celoCircle.png' import ethereumLogoUrl from 'assets/images/ethereum-logo.png' import luxLogoUrl from 'assets/images/lux-Logo.png' +import zooLogoUrl from 'assets/images/zoo-Logo.png' import polygonCircleLogoUrl from 'assets/images/polygonCircle.png' import { default as arbitrumCircleLogoUrl, default as arbitrumLogoUrl } from 'assets/svg/arbitrum_logo.svg' import celoLogo from 'assets/svg/celo_logo.svg' @@ -236,7 +237,7 @@ const CHAIN_INFO: ChainInfoMap = { docs: 'https://docs.lux.fi/', explorer: 'https://explore.zoo.network', infoLink: 'https://info.uniswap.org/#/zoo/', - logoUrl: luxLogoUrl, + logoUrl: zooLogoUrl, label: "Zoo", nativeCurrency: { name: 'Zoo', symbol: 'ZOO', decimals: 18 }, }, @@ -278,4 +279,4 @@ export function getChainInfo(chainId: any): any { const MAINNET_INFO = CHAIN_INFO[SupportedChainId.MAINNET] export function getChainInfoOrDefault(chainId: number | undefined) { return getChainInfo(chainId) ?? MAINNET_INFO -} +} \ No newline at end of file diff --git a/src/graphql/data/util.tsx b/src/graphql/data/util.tsx index 8489b2247..5eb63c65d 100644 --- a/src/graphql/data/util.tsx +++ b/src/graphql/data/util.tsx @@ -78,6 +78,7 @@ export function chainIdToBackendName(chainId: number | undefined) { const URL_CHAIN_PARAM_TO_BACKEND: { [key: string]: Chain } = { lux: Chain.Lux, + zoo: Chain.Zoo, ethereum: Chain.Ethereum, polygon: Chain.Polygon, celo: Chain.Celo, @@ -99,7 +100,7 @@ export const CHAIN_NAME_TO_CHAIN_ID: { [key: string]: SupportedChainId } = { OPTIMISM: SupportedChainId.OPTIMISM, } -export const BACKEND_CHAIN_NAMES: Chain[] = [Chain.Lux, Chain.Ethereum, Chain.Polygon, Chain.Optimism, Chain.Arbitrum, Chain.Celo] +export const BACKEND_CHAIN_NAMES: Chain[] = [Chain.Lux, Chain.Zoo, Chain.Ethereum, Chain.Polygon, Chain.Optimism, Chain.Arbitrum, Chain.Celo] export function getTokenDetailsURL(address: string, chainName?: Chain, chainId?: number) { if (address === ZERO_ADDRESS && chainId && chainId === SupportedChainId.MAINNET) { @@ -132,4 +133,4 @@ export function unwrapToken< address: NATIVE_CHAIN_ID, extensions: undefined, // prevents marking cross-chain wrapped tokens as native } -} +} \ No newline at end of file diff --git a/src/graphql/thegraph/apollo.ts b/src/graphql/thegraph/apollo.ts index 1fee2ccf9..2af94cfed 100644 --- a/src/graphql/thegraph/apollo.ts +++ b/src/graphql/thegraph/apollo.ts @@ -17,7 +17,7 @@ const CHAIN_SUBGRAPH_URL: Record = { [SupportedChainId.LUX]: 'https://graph.lux.network/subgraphs/name/lux/uniswap-v3', - [SupportedChainId.ZOO]: 'https://graph.lux.network/subgraphs/name/lux/uniswap-v3', + [SupportedChainId.ZOO]: 'https://graph.zoo.network/subgraphs/name/zoo/uniswap-v3', } const httpLink = new HttpLink({ uri: CHAIN_SUBGRAPH_URL[SupportedChainId.MAINNET] }) @@ -43,9 +43,17 @@ export const apolloClient = new ApolloClient({ link: concat(authMiddleware, httpLink), }) -export const luxClient = new ApolloClient({ +export const luxNetClient = new ApolloClient({ link: new HttpLink({ uri: "https://graph.lux.network/subgraphs/name/lux/uniswap-v3", }), cache: new InMemoryCache(), }) + + +export const zooNetClient = new ApolloClient({ + link: new HttpLink({ + uri: "https://graph.zoo.network/subgraphs/name/zoo/uniswap-v3", + }), + cache: new InMemoryCache(), +}) \ No newline at end of file diff --git a/src/lib/hooks/useCurrencyLogoURIs.ts b/src/lib/hooks/useCurrencyLogoURIs.ts index 27cf5dc62..5fb647f6b 100644 --- a/src/lib/hooks/useCurrencyLogoURIs.ts +++ b/src/lib/hooks/useCurrencyLogoURIs.ts @@ -6,6 +6,7 @@ import { isAddress } from 'utils' import EthereumLogo from '../../assets/images/ethereum-logo.png' import CeloLogo from '../../assets/svg/celo_logo.svg' import LuxLogo from '../../assets/svg/lux_logo.svg' +import ZooLogo from '../../assets/svg/zoo_logo.svg' import MaticLogo from '../../assets/svg/matic-token-icon.svg' import { isCelo, isLUX, isZOO, NATIVE_CHAIN_ID, nativeOnChain } from '../../constants/tokens' @@ -48,7 +49,7 @@ function getTokenLogoURI(address: string, chainId: SupportedChainId = SupportedC } if (isZOO(chainId)) { if (address === nativeOnChain(chainId).wrapped.address) { - return 'https://cdn.lux.network/bridge/currencies/lux.png' + return 'https://cdn.lux.network/bridge/currencies/zoo.png' } } } @@ -65,7 +66,7 @@ export function getNativeLogoURI(chainId: SupportedChainId = SupportedChainId.MA case SupportedChainId.LUX_TESTNET: return LuxLogo case SupportedChainId.ZOO: - return LuxLogo + return ZooLogo default: return EthereumLogo } @@ -74,12 +75,12 @@ export function getNativeLogoURI(chainId: SupportedChainId = SupportedChainId.MA export default function useCurrencyLogoURIs( currency: | { - isNative?: boolean - isToken?: boolean - address?: string - chainId: number - logoURI?: string | null - } + isNative?: boolean + isToken?: boolean + address?: string + chainId: number + logoURI?: string | null + } | null | undefined ): string[] { @@ -99,4 +100,4 @@ export default function useCurrencyLogoURIs( } return logoURIs }, [currency, locations]) -} +} \ No newline at end of file diff --git a/src/pages/TokenDetails/index.tsx b/src/pages/TokenDetails/index.tsx index 79d3f802e..5a4d00176 100644 --- a/src/pages/TokenDetails/index.tsx +++ b/src/pages/TokenDetails/index.tsx @@ -10,7 +10,7 @@ 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 { apolloClient } from 'graphql/thegraph/apollo' import { Chain, TokenQuery, Currency, TokenQueryData } from 'graphql/data/Token' import { TokenPriceQuery } from 'graphql/data/TokenPrice' @@ -65,8 +65,8 @@ query GetTokenInfo($tokenAddress: String!, $days: Int, $hours: Int) { export const pageTimePeriodAtom = atomWithStorage('tokenDetailsTimePeriod', TimePeriod.DAY) -function getQueryParams(timePeriod:any) { - switch(timePeriod) { +function getQueryParams(timePeriod: any) { + switch (timePeriod) { case 0: return [2, 2]; case 1: @@ -109,7 +109,7 @@ export default function TokenDetailsPage() { }, }) const { data: luxData, loading: luxLoading } = useQuery(GetTokenInfo, { - client: luxClient, + client: apolloClient, variables: { tokenAddress: address, days: totalDays, @@ -124,8 +124,8 @@ export default function TokenDetailsPage() { // Extract daily prices from the response const dailyPrices = luxData?.token?.tokenDayData - ?.map((day: any) => parseFloat(day.priceUSD)) - .filter((price: any) => price !== 0); + ?.map((day: any) => parseFloat(day.priceUSD)) + .filter((price: any) => price !== 0); // Calculate the 52-week high and low const priceHigh52W = dailyPrices && Math.max(...dailyPrices); @@ -133,97 +133,97 @@ export default function TokenDetailsPage() { const token = luxData?.token; // Now, you can assign the JSON data to a variable of type TokenQuery -const transformedTokenDetail: TokenQuery = tokenPriceQuery??{ - token: { - id: "VG9rZW46RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4", - decimals: 18, - name: token?.name, - chain: Chain.Lux, - address: token?.id, - symbol: token?.symbol, - market: { - id: "VG9rZW5NYXJrZXQ6RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4X1VTRA==", - totalValueLocked: { - id: "QW1vdW50OjM0MDUwMDg5OS41NTQyMzk5X1VTRA==", - value: token?.totalValueLockedUSD, - currency: Currency.Usd + const transformedTokenDetail: TokenQuery = tokenPriceQuery ?? { + token: { + id: "VG9rZW46RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4", + decimals: 18, + name: token?.name, + chain: Chain.Lux, + address: token?.id, + symbol: token?.symbol, + market: { + id: "VG9rZW5NYXJrZXQ6RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4X1VTRA==", + totalValueLocked: { + id: "QW1vdW50OjM0MDUwMDg5OS41NTQyMzk5X1VTRA==", + value: token?.totalValueLockedUSD, + currency: Currency.Usd + }, + price: { + id: "QW1vdW50OjFfVVNE", + value: 1, + currency: Currency.Usd + }, + volume24H: { + id: "QW1vdW50OjY5MzIwODE3Ny45NDM0MDUyX1VTRA==", + value: token?.volumeUSD, + currency: Currency.Usd + }, + priceHigh52W: { + id: "QW1vdW50OjEuMDAwMDAwMDAwMDAwMDAwMl9VU0Q=", + value: priceHigh52W + }, + priceLow52W: { + id: "QW1vdW50OjFfVVNE", + value: priceLow52W + } }, - price: { - id: "QW1vdW50OjFfVVNE", - value: 1, - currency: Currency.Usd - }, - volume24H: { - id: "QW1vdW50OjY5MzIwODE3Ny45NDM0MDUyX1VTRA==", - value: token?.volumeUSD, - 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: [] } - }, - project: { - id: "VG9rZW5Qcm9qZWN0OkVUSEVSRVVNXzB4YTBiODY5OTFjNjIxOGIzNmMxZDE5ZDRhMmU5ZWIwY2UzNjA2ZWI0OF9VU0RD", - description: token?.name + " - " + token?.id, - homepageUrl: "https://www.circle.com/en/usdc", - twitterName: "circle", - logoUrl: "", - tokens: [] } - } -}; -const ethPriceUSD = luxData?.bundles[0]?.ethPriceUSD; -const ethPrice = luxData?.token?.derivedETH; -const tokenDayData = luxData?.token?.tokenDayData.filter((data: any) => parseFloat(data.priceUSD) !== 0).map((data: any) => ({ - id: `VGltZXN0YW1wZWRBbW91bnQ6MV8x${data.date}_VVNE`, // Encoded version of the timestamped amount - timestamp: data.date, - value: parseFloat(data.priceUSD), -})) -const tokenHourData = luxData?.token?.tokenHourData.filter((data: any) => parseFloat(data.priceUSD) !== 0).map((data: any) => ({ - id: `VGltZXN0YW1wZWRBbW91bnQ6MV8x${data.periodStartUnix}_VVNE`, // Encoded version of the timestamped amount - timestamp: data.periodStartUnix, - value: parseFloat(data.priceUSD), -})) + }; + const ethPriceUSD = luxData?.bundles[0]?.ethPriceUSD; + const ethPrice = luxData?.token?.derivedETH; + const tokenDayData = luxData?.token?.tokenDayData.filter((data: any) => parseFloat(data.priceUSD) !== 0).map((data: any) => ({ + id: `VGltZXN0YW1wZWRBbW91bnQ6MV8x${data.date}_VVNE`, // Encoded version of the timestamped amount + timestamp: data.date, + value: parseFloat(data.priceUSD), + })) + const tokenHourData = luxData?.token?.tokenHourData.filter((data: any) => parseFloat(data.priceUSD) !== 0).map((data: any) => ({ + id: `VGltZXN0YW1wZWRBbW91bnQ6MV8x${data.periodStartUnix}_VVNE`, // Encoded version of the timestamped amount + timestamp: data.periodStartUnix, + value: parseFloat(data.priceUSD), + })) -const transformedTokenPriceHistory:TokenPriceQuery = { - token: { - id: "VG9rZW46RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4", // Encoded version of the token ID - address: luxData?.token?.id, - chain: Chain.Lux, - market: { - id: "VG9rZW5NYXJrZXQ6RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4X1VTRA==", // Encoded ID for the market - price: { - id: "QW1vdW50OjFfVVNE", // Encoded amount ID - value: parseFloat(ethPriceUSD) * parseFloat(ethPrice), + const transformedTokenPriceHistory: TokenPriceQuery = { + token: { + id: "VG9rZW46RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4", // Encoded version of the token ID + address: luxData?.token?.id, + chain: Chain.Lux, + market: { + id: "VG9rZW5NYXJrZXQ6RVRIRVJFVU1fMHhhMGI4Njk5MWM2MjE4YjM2YzFkMTlkNGEyZTllYjBjZTM2MDZlYjQ4X1VTRA==", // Encoded ID for the market + price: { + id: "QW1vdW50OjFfVVNE", // Encoded amount ID + value: parseFloat(ethPriceUSD) * parseFloat(ethPrice), + }, + priceHistory: timePeriod < 3 ? tokenHourData : tokenDayData, }, - priceHistory: timePeriod < 3 ? tokenHourData : tokenDayData, }, - }, -}; + }; -const renderTokenDetail = (tokenAddress: any, chain: any, tokenQuery: any) => ( - -); + const renderTokenDetail = (tokenAddress: any, chain: any, tokenQuery: any) => ( + + ); // 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) - else if(chain == "LUX") setCurrentPriceQuery(transformedTokenPriceHistory) + else if (chain == "LUX") setCurrentPriceQuery(transformedTokenPriceHistory) }, [luxData, tokenPriceQuery]) if (!tokenQuery && !transformedTokenDetail) return - if(chain == "LUX") { + if (chain == "LUX") { return renderTokenDetail(tokenAddress, chain, transformedTokenDetail) } if (!tokenQuery) return diff --git a/src/theme/components/RadialGradientByChainUpdater.ts b/src/theme/components/RadialGradientByChainUpdater.ts index 8bc040fa7..ed18af346 100644 --- a/src/theme/components/RadialGradientByChainUpdater.ts +++ b/src/theme/components/RadialGradientByChainUpdater.ts @@ -99,8 +99,8 @@ export default function RadialGradientByChainUpdater(): null { case SupportedChainId.ZOO: { setBackground(backgroundResetStyles) const luxLightGradient = - 'radial-gradient(100% 100% at 50% 0%, rgba(0, 15, 50, 0.41) 0%, rgba(20, 20, 20, 0.24) 100%), #FFFFFF' - const luxDarkGradient = 'radial-gradient(circle at center, #121212 0%, #000000 100%)' + 'radial-gradient(100% 100% at 50% 0%, rgba(0, 15, 50, 0.25) 0%, rgba(220, 220, 220, 0.6) 100%), #FFFFFF' + const luxDarkGradient = 'radial-gradient(100% 100% at 0% 50%, #2A2A2A 0%, #101010 100%)' backgroundRadialGradientElement.style.background = darkMode ? luxDarkGradient : luxLightGradient break } @@ -114,4 +114,4 @@ export default function RadialGradientByChainUpdater(): null { } }, [darkMode, chainId, isNftPage]) return null -} +} \ No newline at end of file