feat: omni change add liquidity

src/components/ElasticZap/ZapDetail.tsx

@@ -11,7 +11,7 @@ import Divider from 'components/Divider'
 import { GasStation } from 'components/Icons'
 import { FeeTag } from 'components/YieldPools/ElasticFarmGroup/styleds'
 import { ELASTIC_BASE_FEE_UNIT } from 'constants/index'
-import { useActiveWeb3React } from 'hooks'
+import { useKyberChainId } from 'hooks'
 import { ZapResult, useZapInAction } from 'hooks/elasticZap'
 import useTheme from 'hooks/useTheme'
 import { useKyberSwapConfig } from 'state/application/hooks'
@@ -77,7 +77,7 @@ export const useZapDetail = ({
   tickUpper?: number
   previousTicks?: number[]
 }): ZapDetail => {
-  const { chainId } = useActiveWeb3React()
+  const chainId = useKyberChainId()
   const { readProvider } = useKyberSwapConfig()
 
   const equivalentQuoteAmount =

src/components/Header/web3/SelectNetwork.tsx

@@ -70,7 +70,7 @@ function SelectNetwork(): JSX.Element | null {
   const { chainId, networkInfo } = useActiveWeb3React()
   const networkModalOpen = useModalOpen(ApplicationModal.NETWORK)
   const toggleNetworkModal = useNetworkModalToggle()
-  const userEthBalance = useNativeBalance()
+  const userEthBalance = useNativeBalance(chainId)
   const labelContent = useMemo(() => {
     if (!userEthBalance) return networkInfo.name
     const balanceFixedStr = formatDisplayNumber(userEthBalance, { significantDigits: 6 })

src/hooks/Tokens.ts

@@ -11,7 +11,7 @@ import ERC20_INTERFACE, { ERC20_BYTES32_INTERFACE } from 'constants/abis/erc20'
 import { KS_SETTING_API } from 'constants/env'
 import { ETHER_ADDRESS, ZERO_ADDRESS } from 'constants/index'
 import { NativeCurrencies } from 'constants/tokens'
-import { useActiveWeb3React } from 'hooks/index'
+import { useActiveWeb3React, useKyberChainId } from 'hooks/index'
 import { useBytes32TokenContract, useMulticallContract, useTokenReadingContract } from 'hooks/useContract'
 import { AppState } from 'state'
 import { TokenAddressMap } from 'state/lists/reducer'
@@ -175,8 +175,8 @@ export const useTokens = (addresses: string[]): TokenMap => {
 // null if loading
 // otherwise returns the token
 export function useToken(tokenAddress?: string): Token | NativeCurrency | undefined | null {
-  const { chainId } = useActiveWeb3React()
-  const tokens = useAllTokens()
+  const chainId = useKyberChainId()
+  const tokens = useAllTokens(true, chainId)
 
   const address = isAddress(chainId, tokenAddress)
 
@@ -354,7 +354,7 @@ function useTokenV2(
 }
 
 export function useCurrency(currencyId: string | undefined): Currency | null | undefined {
-  const { chainId } = useActiveWeb3React()
+  const chainId = useKyberChainId()
   const isETH = useMemo(
     () => chainId && currencyId?.toUpperCase() === NativeCurrencies[chainId].symbol?.toUpperCase(),
     [chainId, currencyId],

src/hooks/elasticZap/index.ts

@@ -41,6 +41,7 @@ export function useZapInPoolResult(params?: {
   amountIn: CurrencyAmount<Currency>
   tickLower: number
   tickUpper: number
+  skip?: boolean
 }): {
   loading: boolean
   aggregatorData: RouteSummary | null
@@ -67,13 +68,13 @@ export function useZapInPoolResult(params?: {
 
   const [aggregatorOutputs, setAggregatorOutputs] = useState<Array<RouteSummary>>([])
 
-  const { tokenIn, tokenOut, poolAddress } = params || {}
+  const { tokenIn, tokenOut, poolAddress, skip } = params || {}
 
   const getRoutes = useCallback(() => {
     if (slippage) {
       // added to refresh rate when slippage change, aggregator dont need this
     }
-    if (tokenIn && tokenOut && poolAddress) {
+    if (tokenIn && tokenOut && poolAddress && !skip) {
       setAggregatorOutputs([])
       if (useAggregatorForZap) {
         setLoadingAggregator(true)
@@ -101,7 +102,7 @@ export function useZapInPoolResult(params?: {
           })
       }
     }
-  }, [tokenIn, tokenOut, poolAddress, splitedAmount, getRoute, url, useAggregatorForZap, slippage])
+  }, [tokenIn, tokenOut, poolAddress, splitedAmount, getRoute, url, useAggregatorForZap, slippage, skip])
 
   useEffect(() => {
     getRoutes()

src/hooks/index.ts

@@ -5,7 +5,7 @@ import { useWeb3React as useWeb3ReactCore } from '@web3-react/core'
 import { Connector } from '@web3-react/types'
 import { useMemo } from 'react'
 import { useSelector } from 'react-redux'
-import { useSearchParams } from 'react-router-dom'
+import { useParams, useSearchParams } from 'react-router-dom'
 import { useCheckBlackjackQuery } from 'services/blackjack'
 
 import { blocto, gnosisSafe, krystalWalletConnectV2, walletConnectV2 } from 'constants/connectors/evm'
@@ -17,6 +17,7 @@ import { NETWORKS_INFO } from 'hooks/useChainsConfig'
 import { AppState } from 'state'
 import { useKyberSwapConfig } from 'state/application/hooks'
 import { detectInjectedType, isEVMWallet, isSolanaWallet } from 'utils'
+import { getChainIdFromSlug } from 'utils/string'
 
 export function useActiveWeb3React(): {
   chainId: ChainId
@@ -174,3 +175,16 @@ export const useWeb3Solana = () => {
   const { connection } = useKyberSwapConfig()
   return { connection }
 }
+
+export const useKyberChainId = () => {
+  const { network } = useParams()
+  const { pathname } = location
+  const params = pathname.split('/')
+
+  const networkFromUrl = params.map(item => getChainIdFromSlug(item)).filter(Boolean)
+
+  const { chainId: walletChainId } = useActiveWeb3React()
+  const chainId = getChainIdFromSlug(network) || networkFromUrl?.[0] || walletChainId
+
+  return chainId
+}

src/hooks/useContract.ts

@@ -29,7 +29,7 @@ import ZAP_ABI from 'constants/abis/zap.json'
 import { MULTICALL_ABI } from 'constants/multicall'
 import { NETWORKS_INFO, isEVM } from 'constants/networks'
 import { EVMNetworkInfo } from 'constants/networks/type'
-import { useWeb3React } from 'hooks'
+import { useKyberChainId, useWeb3React } from 'hooks'
 import { useKyberSwapConfig } from 'state/application/hooks'
 import { FairLaunchVersion, RewardLockerVersion } from 'state/farms/classic/types'
 import { useRewardLockerAddressesWithVersion } from 'state/vesting/hooks'
@@ -61,7 +61,8 @@ export function useReadingContract(
   customChainId?: ChainId,
 ): Contract | null {
   const { chainId: curChainId } = useActiveWeb3React()
-  const chainId = customChainId || curChainId
+  const kyberChainId = useKyberChainId()
+  const chainId = customChainId || kyberChainId || curChainId
   const { readProvider } = useKyberSwapConfig(chainId)
 
   return useMemo(() => {
@@ -166,8 +167,8 @@ export function usePairContract(pairAddress?: string): Contract | null {
 }
 
 export function useMulticallContract(customChainId?: ChainId): Contract | null {
-  const { chainId: curChainId } = useActiveWeb3React()
-  const chainId = customChainId || curChainId
+  const kyberChainId = useKyberChainId()
+  const chainId = customChainId || kyberChainId
   return useReadingContract(isEVM(chainId) ? NETWORKS_INFO[chainId].multicall : undefined, MULTICALL_ABI, chainId)
 }
 

src/index.tsx

@@ -73,7 +73,7 @@ if (window.ethereum) {
   window.ethereum.autoRefreshOnNetworkChange = false
 }
 
-function Updaters() {
+export function Updaters() {
   return (
     <>
       <ListsUpdater />