diff --git a/src/assets/images/zoo-Logo.png b/src/assets/images/zoo-Logo.png new file mode 100644 index 000000000..b19cea4f9 Binary files /dev/null and b/src/assets/images/zoo-Logo.png differ diff --git a/src/assets/svg/zoo_logo.svg b/src/assets/svg/zoo_logo.svg new file mode 100644 index 000000000..73b6075d7 --- /dev/null +++ b/src/assets/svg/zoo_logo.svg @@ -0,0 +1,6 @@ + + + + + + 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