feat: support zksync info (#7442)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!--
copilot:all
-->
### <samp>🤖 Generated by Copilot at bd096de</samp>

### Summary
🌐🚀🔗

<!--
1. 🌐 - This emoji represents the addition of a new network or chain to
the web app, as well as the subgraph endpoints and clients for querying
data from it.
2. 🚀 - This emoji represents the improvement of scalability and
performance by using a layer 2 solution like zkSync, which reduces gas
fees and transaction times for users.
3. 🔗 - This emoji represents the integration of the network switcher
with the query parameter and the chain name hook, which allows users to
easily switch between different chains and see the relevant data.
-->
This pull request adds support for the zkSync testnet chain to the web
app's info pages and network switcher. It defines the chain's subgraph
endpoints, constants, token logo, and start block. It also updates the
hooks and utils to handle the new chain ID and query parameter.

> _`zkSync` testnet_
> _added to web app and info_
> _a winter scaling_

### Walkthrough
* Add support for the zkSync testnet chain to the info pages and the
network switchers
([link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-7238357db46da6bb48ca41841457ac0e832ee21fb8fd76a6b3c9dbf701ce8c62R32),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-7238357db46da6bb48ca41841457ac0e832ee21fb8fd76a6b3c9dbf701ce8c62R51),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-7238357db46da6bb48ca41841457ac0e832ee21fb8fd76a6b3c9dbf701ce8c62R60),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80L1-R1),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80L14-R16),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R25),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R36),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R45),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R52),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R59),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R66),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R73),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R80),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R87),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R94),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-f2387797bca27b530d156fa7f58d5addb1dc1d2ff995c1bb9b5dd10be464b292R298),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-f05e9516c94df2fdb153da0702487207e38d053b512fcfa96904de30b9488e6bR9),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-9a18c7fa948e0139245c60f3160a24972b35b6960387ac74cbf7b4d9da9e26a5R57),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-ae2fef01f2e4cbfcfafd8be2bd435854da0b178fbbbd7846f8a68194141de72aL25-R25),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-ae2fef01f2e4cbfcfafd8be2bd435854da0b178fbbbd7846f8a68194141de72aL98-R98),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-bb26c7b8dd2db305bc739e7e4f031774af7349a6d30a7bf6431d335abf2a5c0eL22-R22),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-bb26c7b8dd2db305bc739e7e4f031774af7349a6d30a7bf6431d335abf2a5c0eL77-R77),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-77f9b222e9f5de52041b06ae540e3a8cb32c1fd777c20be054eb88990cabc845R61))
* Define new constants for the subgraph endpoints, the chain name, the
main token symbol, the start time, the URL path, the block explorer
name, and the token whitelist and blacklist for the zkSync testnet chain
in `endpoints.ts` and `constant.ts`
([link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-7238357db46da6bb48ca41841457ac0e832ee21fb8fd76a6b3c9dbf701ce8c62R32),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-7238357db46da6bb48ca41841457ac0e832ee21fb8fd76a6b3c9dbf701ce8c62R51),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-7238357db46da6bb48ca41841457ac0e832ee21fb8fd76a6b3c9dbf701ce8c62R60),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80L1-R1),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80L14-R16),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R25),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R36),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R52),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R59),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R66),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R80),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R87),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R94))
* Create new GraphQL client instances for the info and blocks subgraphs
for the zkSync testnet chain and add them to the mapping objects in
`graphql.ts` and `constant.ts`
([link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-7238357db46da6bb48ca41841457ac0e832ee21fb8fd76a6b3c9dbf701ce8c62R60),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80L1-R1),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R45),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-85dec4f2520ab4d031442a39680ae804a521ef025a33f9b42fb151b108015d80R73),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-9a18c7fa948e0139245c60f3160a24972b35b6960387ac74cbf7b4d9da9e26a5R57))
* Update the `useChainNameByQuery` hook to return `ZKSYNC` if the query
parameter is `zksync` in `hooks.ts`
([link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-f2387797bca27b530d156fa7f58d5addb1dc1d2ff995c1bb9b5dd10be464b292R298))
* Update the `getTokenLogoURL` function to use the correct token logo
URL prefix for the zkSync testnet chain in `getTokenLogoURL.ts`
([link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-f05e9516c94df2fdb153da0702487207e38d053b512fcfa96904de30b9488e6bR9))
* Update the `InfoNav` components for the info and v3 info pages to
include the zkSync testnet chain in the `targetChains` array for the
network switcher in `InfoNav/index.tsx` and `Layout/InfoNav.tsx`
([link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-ae2fef01f2e4cbfcfafd8be2bd435854da0b178fbbbd7846f8a68194141de72aL25-R25),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-ae2fef01f2e4cbfcfafd8be2bd435854da0b178fbbbd7846f8a68194141de72aL98-R98),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-bb26c7b8dd2db305bc739e7e4f031774af7349a6d30a7bf6431d335abf2a5c0eL22-R22),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-bb26c7b8dd2db305bc739e7e4f031774af7349a6d30a7bf6431d335abf2a5c0eL77-R77))
* Update the `SUBGRAPH_START_BLOCK` constant for the v3 info pages to
use the start block of the v3 subgraph data for the zkSync testnet chain
in `constants.ts`
([link](https://github.com/pancakeswap/pancake-frontend/pull/7442/files?diff=unified&w=0#diff-77f9b222e9f5de52041b06ae540e3a8cb32c1fd777c20be054eb88990cabc845R61))

apps/web/src/config/constants/endpoints.ts

@@ -29,6 +29,7 @@ export const BLOCKS_CLIENT = 'https://api.thegraph.com/subgraphs/name/pancakeswa
 export const BLOCKS_CLIENT_ETH = 'https://api.thegraph.com/subgraphs/name/blocklytics/ethereum-blocks'
 export const BLOCKS_CLIENT_POLYGON_ZKEVM =
   'https://api.studio.thegraph.com/query/45376/polygon-zkevm-block/version/latest'
+export const BLOCKS_CLIENT_ZKSYNC = 'https://api.studio.thegraph.com/query/45376/blocks-zksync/version/latest'
 export const STABLESWAP_SUBGRAPH_CLIENT = 'https://api.thegraph.com/subgraphs/name/pancakeswap/exchange-stableswap'
 export const GRAPH_API_NFTMARKET = 'https://api.thegraph.com/subgraphs/name/pancakeswap/nft-market'
 export const GRAPH_HEALTH = 'https://api.thegraph.com/index-node/graphql'
@@ -47,6 +48,7 @@ export const INFO_CLIENT_WITH_CHAIN = {
   [ChainId.ETHEREUM]: INFO_CLIENT_ETH,
   [ChainId.POLYGON_ZKEVM]: 'https://api.studio.thegraph.com/query/45376/exchange-v2-polygon-zkevm/version/latest',
   [ChainId.ZKSYNC_TESTNET]: 'https://api.studio.thegraph.com/query/45376/exchange-v2-zksync-testnet/version/latest',
+  [ChainId.ZKSYNC]: ' https://api.studio.thegraph.com/query/45376/exchange-v2-zksync/version/latest',
   [ChainId.LINEA_TESTNET]: 'https://thegraph.goerli.zkevm.consensys.net/subgraphs/name/pancakeswap/exhange-eth/',
   [ChainId.ARBITRUM_ONE]: 'https://thegraph.com/hosted-service/subgraph/chef-jojo/exchange-v2-arb',
 }
@@ -55,6 +57,7 @@ export const BLOCKS_CLIENT_WITH_CHAIN = {
   [ChainId.BSC]: BLOCKS_CLIENT,
   [ChainId.ETHEREUM]: BLOCKS_CLIENT_ETH,
   [ChainId.POLYGON_ZKEVM]: BLOCKS_CLIENT_POLYGON_ZKEVM,
+  [ChainId.ZKSYNC]: BLOCKS_CLIENT_ZKSYNC,
 }
 
 export const ASSET_CDN = 'https://assets.pancakeswap.finance'

apps/web/src/state/info/constant.ts

@@ -1,4 +1,4 @@
-import { BLOCKS_CLIENT, BLOCKS_CLIENT_ETH } from 'config/constants/endpoints'
+import { BLOCKS_CLIENT, BLOCKS_CLIENT_ETH, BLOCKS_CLIENT_ZKSYNC } from 'config/constants/endpoints'
 import { infoClientETH, infoClient, infoStableSwapClient, v2Clients } from 'utils/graphql'
 import { GraphQLClient } from 'graphql-request'
 
@@ -11,9 +11,9 @@ import {
   BSC_TOKEN_WHITELIST,
   ETH_TOKEN_WHITELIST,
 } from 'config/constants/info'
-import { bsc, mainnet, polygonZkEvm } from 'wagmi/chains'
+import { bsc, mainnet, polygonZkEvm, zkSync } from 'wagmi/chains'
 
-export type MultiChainName = 'BSC' | 'ETH' | 'POLYGON_ZKEVM'
+export type MultiChainName = 'BSC' | 'ETH' | 'POLYGON_ZKEVM' | 'ZKSYNC'
 
 export type MultiChainNameExtend = MultiChainName | 'BSC_TESTNET' | 'ZKSYNC_TESTNET'
 
@@ -22,6 +22,7 @@ export const multiChainName: Record<number | string, MultiChainNameExtend> = {
   [ChainId.ETHEREUM]: 'ETH',
   [ChainId.BSC_TESTNET]: 'BSC_TESTNET',
   [ChainId.POLYGON_ZKEVM]: 'POLYGON_ZKEVM',
+  [ChainId.ZKSYNC]: 'ZKSYNC',
 }
 
 export const multiChainShortName: Record<number, string> = {
@@ -32,6 +33,7 @@ export const multiChainQueryMainToken: Record<MultiChainName, string> = {
   BSC: 'BNB',
   ETH: 'ETH',
   POLYGON_ZKEVM: 'ETH',
+  ZKSYNC: 'ETH',
 }
 
 export const multiChainBlocksClient: Record<MultiChainNameExtend, string> = {
@@ -40,48 +42,56 @@ export const multiChainBlocksClient: Record<MultiChainNameExtend, string> = {
   BSC_TESTNET: 'https://api.thegraph.com/subgraphs/name/lengocphuc99/bsc_testnet-blocks',
   POLYGON_ZKEVM: 'https://api.studio.thegraph.com/query/45376/polygon-zkevm-block/version/latest',
   ZKSYNC_TESTNET: 'https://api.studio.thegraph.com/query/45376/blocks-zksync-testnet/version/latest',
+  ZKSYNC: BLOCKS_CLIENT_ZKSYNC,
 }
 
 export const multiChainStartTime = {
   BSC: PCS_V2_START,
   ETH: PCS_ETH_START,
   POLYGON_ZKEVM: 1686236845,
+  ZKSYNC: 1690462800, // Thu Jul 27 2023 13:00:00 UTC+0000
 }
 
 export const multiChainId: Record<MultiChainName, ChainId> = {
   BSC: ChainId.BSC,
   ETH: ChainId.ETHEREUM,
   POLYGON_ZKEVM: ChainId.POLYGON_ZKEVM,
+  ZKSYNC: ChainId.ZKSYNC,
 }
 
 export const multiChainPaths = {
   [ChainId.BSC]: '',
   [ChainId.ETHEREUM]: '/eth',
   [ChainId.POLYGON_ZKEVM]: '/polygon-zkevm',
+  [ChainId.ZKSYNC]: `/zksync`,
 }
 
 export const multiChainQueryClient = {
   BSC: infoClient,
   ETH: infoClientETH,
   POLYGON_ZKEVM: v2Clients[ChainId.POLYGON_ZKEVM],
+  ZKSYNC: v2Clients[ChainId.ZKSYNC],
 }
 
 export const multiChainScan: Record<MultiChainName, string> = {
   BSC: bsc.blockExplorers.etherscan.name,
   ETH: mainnet.blockExplorers.etherscan.name,
   POLYGON_ZKEVM: polygonZkEvm.blockExplorers.default.name,
+  ZKSYNC: zkSync.blockExplorers.default.name,
 }
 
 export const multiChainTokenBlackList: Record<MultiChainName, string[]> = {
   BSC: TOKEN_BLACKLIST,
   ETH: ETH_TOKEN_BLACKLIST,
   POLYGON_ZKEVM: ['0x'],
+  ZKSYNC: ['0x'],
 }
 
 export const multiChainTokenWhiteList: Record<MultiChainName, string[]> = {
   BSC: BSC_TOKEN_WHITELIST,
   ETH: ETH_TOKEN_WHITELIST,
   POLYGON_ZKEVM: [],
+  ZKSYNC: [],
 }
 
 export const getMultiChainQueryEndPointWithStableSwap = (chainName: MultiChainNameExtend): GraphQLClient => {

apps/web/src/state/info/hooks.ts

@@ -295,6 +295,7 @@ export const useChainNameByQuery = (): MultiChainName => {
   const chainName = useMemo(() => {
     if (query?.chainName === 'eth') return 'ETH'
     if (query?.chainName === 'polygon-zkevm') return 'POLYGON_ZKEVM'
+    if (query?.chainName === 'zksync') return 'ZKSYNC'
     return 'BSC'
   }, [query])
   return chainName

apps/web/src/utils/getTokenLogoURL.ts

@@ -6,6 +6,7 @@ const mapping = {
   [ChainId.BSC]: 'smartchain',
   [ChainId.ETHEREUM]: 'ethereum',
   [ChainId.POLYGON_ZKEVM]: 'polygonzkevm',
+  [ChainId.ZKSYNC]: 'zksync',
 }
 
 const getTokenLogoURL = memoize(

apps/web/src/utils/graphql.ts

@@ -54,6 +54,7 @@ export const v2Clients = {
   [ChainId.ETHEREUM]: infoClientETH,
   [ChainId.BSC]: infoClient,
   [ChainId.POLYGON_ZKEVM]: new GraphQLClient(INFO_CLIENT_WITH_CHAIN[ChainId.POLYGON_ZKEVM]),
+  [ChainId.ZKSYNC]: new GraphQLClient(INFO_CLIENT_WITH_CHAIN[ChainId.ZKSYNC]),
 }
 
 export const infoStableSwapClient = new GraphQLClient(STABLESWAP_SUBGRAPH_CLIENT)

apps/web/src/views/Info/components/InfoNav/index.tsx

@@ -22,7 +22,7 @@ import { useMultiChainPath, useChainNameByQuery, useChainIdByQuery } from 'state
 import { multiChainId, multiChainPaths, multiChainShortName } from 'state/info/constant'
 import { chains } from 'utils/wagmi'
 import { ChainLogo } from 'components/Logo/ChainLogo'
-import { bsc, mainnet, polygonZkEvm } from 'wagmi/chains'
+import { bsc, mainnet, polygonZkEvm, zkSync } from 'wagmi/chains'
 import { ASSET_CDN } from 'config/constants/endpoints'
 
 const NavWrapper = styled(Flex)`
@@ -95,7 +95,7 @@ const InfoNav: React.FC<{ isStableSwap: boolean }> = ({ isStableSwap }) => {
   )
 }
 
-const targetChains = [mainnet, bsc, polygonZkEvm]
+const targetChains = [mainnet, bsc, polygonZkEvm, zkSync]
 
 export const NetworkSwitcher: React.FC<{ activeIndex: number }> = ({ activeIndex }) => {
   const { t } = useTranslation()

apps/web/src/views/V3Info/components/Layout/InfoNav.tsx

@@ -19,7 +19,7 @@ import { multiChainId, multiChainPaths, multiChainShortName } from 'state/info/c
 import { useChainNameByQuery, useMultiChainPath } from 'state/info/hooks'
 import styled from 'styled-components'
 import { chains } from 'utils/wagmi'
-import { bsc, mainnet, polygonZkEvm } from 'wagmi/chains'
+import { bsc, mainnet, polygonZkEvm, zkSync } from 'wagmi/chains'
 import { v3InfoPath } from '../../constants'
 import Search from '../Search'
 
@@ -74,7 +74,7 @@ const InfoNav: React.FC<{ isStableSwap: boolean }> = ({ isStableSwap }) => {
   )
 }
 
-const targetChains = [mainnet, bsc, polygonZkEvm]
+const targetChains = [mainnet, bsc, polygonZkEvm, zkSync]
 
 export const NetworkSwitcher: React.FC<{ activeIndex: number }> = ({ activeIndex }) => {
   const { t } = useTranslation()

apps/web/src/views/V3Info/constants.ts

@@ -58,6 +58,7 @@ export const SUBGRAPH_START_BLOCK = {
   [ChainId.BSC]: 26956207,
   [ChainId.ETHEREUM]: 16950686,
   [ChainId.POLYGON_ZKEVM]: 750149,
+  [ChainId.ZKSYNC]: 8639214,
 }
 
 export const NODE_REAL_ADDRESS_LIMIT = 50