add ZOO network in tokenTable, update ZOO token lists

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,12 +17,12 @@ export default function QueryTokenLogo(
 
   return (
     <AssetLogo
-      isNative={props.token?.address === NATIVE_CHAIN_ID}
+      isNative={(chainId == 200200 && props.token?.address == '0x4888e4a2ee0f03051c72d2bd3acf755ed3498b3e') ? true : props.token?.address === NATIVE_CHAIN_ID}
       chainId={chainId}
       address={props.token?.address}
       symbol={props.token?.symbol}
       backupImg={props.token?.project?.logoUrl}
       {...props}
     />
   )
-}
+}

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() {
       </ContentWrapper>
     </RootWrapper>
   ) : null
-}
+}

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() {
     </GridContainer>
   );
 
-  if (chainName !== 'LUX') {
+  if (chainName != 'LUX' && chainName != 'ZOO') {
     if (loadingTokens && !tokens) return <LoadingTokenTable rowCount={PAGE_SIZE} />;
     if (!tokens) return renderErrorOrEmptyState("An error occurred loading tokens. Please try again.");
     if (tokens.length == 0) return <NoTokensState message={<Trans>No tokens found</Trans>} />;
     return renderTokens(tokens, tokenVolumeRank);
-  } else {
+  } else if (chainName == 'LUX') {
+    if (luxLoading || !sortedTokens) return <LoadingTokenTable rowCount={PAGE_SIZE} />;
+    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 <LoadingTokenTable rowCount={PAGE_SIZE} />;
     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);
   }
 }

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
-}
+}

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
   }
-}
+}

src/graphql/thegraph/apollo.ts

@@ -17,7 +17,7 @@ const CHAIN_SUBGRAPH_URL: Record<number, string> = {
 
   [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(),
+})

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])
-}
+}