diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
index 5fe958ce7c..2e865df91c 100644
--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
@@ -248,14 +248,14 @@ export default function CurrencyInputPanel({
 }: CurrencyInputPanelProps) {
   const tight = Boolean(tightProp && !currency)
   const [modalOpen, setModalOpen] = useState(false)
-  const { chainId, account } = useActiveWeb3React()
+  const { account } = useActiveWeb3React()
 
-  const selectedCurrencyBalance = useCurrencyBalance(currency ?? undefined)
+  const selectedCurrencyBalance = useCurrencyBalance(currency ?? undefined, customChainId)
   const balanceRef = useRef(selectedCurrencyBalance?.toSignificant(10))
 
   useEffect(() => {
     balanceRef.current = undefined
-  }, [chainId])
+  }, [customChainId])
 
   // Keep previous value of balance if rpc node was down
   useEffect(() => {
diff --git a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx
index 27785191d8..2cb3e219ea 100644
--- a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx
+++ b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx
@@ -162,10 +162,10 @@ export default function DraggableNetworkButton({
       customOnSelectNetwork(chainId)
     } else if (getChainType(chainId) === getChainType(chainId)) {
       changeNetwork(chainId, () => {
-        const { inputCurrency, outputCurrency, ...rest } = qs
+        // const { inputCurrency, outputCurrency, ...rest } = qs
         navigate(
           {
-            search: stringify(rest),
+            search: stringify(qs),
           },
           { replace: true },
         )
diff --git a/src/components/SwapForm/InputCurrencyPanel.tsx b/src/components/SwapForm/InputCurrencyPanel.tsx
index f0bc5ee572..7498cf7ee2 100644
--- a/src/components/SwapForm/InputCurrencyPanel.tsx
+++ b/src/components/SwapForm/InputCurrencyPanel.tsx
@@ -1,4 +1,4 @@
-import { Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
+import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { useEffect } from 'react'
 
 import CurrencyInputPanel from 'components/CurrencyInputPanel'
@@ -16,6 +16,7 @@ type Props = {
   balanceIn: CurrencyAmount<Currency> | undefined
   onChangeCurrencyIn: (c: Currency) => void
   setTypedValue: (v: string) => void
+  customChainId?: ChainId
 }
 const InputCurrencyPanel: React.FC<Props> = ({
   wrapType,
@@ -25,6 +26,7 @@ const InputCurrencyPanel: React.FC<Props> = ({
   currencyOut,
   balanceIn,
   onChangeCurrencyIn,
+  customChainId,
 }) => {
   const { isSolana } = useActiveWeb3React()
 
@@ -64,6 +66,7 @@ const InputCurrencyPanel: React.FC<Props> = ({
       dataTestId="swap-currency-input"
       showCommonBases={true}
       estimatedUsd={trade?.amountInUsd ? `${formattedNum(trade.amountInUsd.toString(), true)}` : undefined}
+      customChainId={customChainId}
     />
   )
 }
diff --git a/src/components/SwapForm/OutputCurrencyPanel.tsx b/src/components/SwapForm/OutputCurrencyPanel.tsx
index 1d59af0b81..7216a1affe 100644
--- a/src/components/SwapForm/OutputCurrencyPanel.tsx
+++ b/src/components/SwapForm/OutputCurrencyPanel.tsx
@@ -1,4 +1,4 @@
-import { Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
+import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import React from 'react'
 import { Text } from 'rebass'
@@ -27,6 +27,7 @@ type Props = {
   amountOutUsd: string | undefined
 
   onChangeCurrencyOut: (c: Currency) => void
+  customChainId?: ChainId
 }
 
 const OutputCurrencyPanel: React.FC<Props> = ({
@@ -37,8 +38,10 @@ const OutputCurrencyPanel: React.FC<Props> = ({
   currencyOut,
   amountOutUsd,
   onChangeCurrencyOut,
+  customChainId,
 }) => {
-  const { chainId } = useActiveWeb3React()
+  const { chainId: walletChainId } = useActiveWeb3React()
+  const chainId = customChainId || walletChainId
 
   // showWrap = true if this swap is either WRAP or UNWRAP
   const showWrap: boolean = wrapType !== WrapType.NOT_APPLICABLE
@@ -101,6 +104,7 @@ const OutputCurrencyPanel: React.FC<Props> = ({
         </Label>
       }
       positionLabel="in"
+      customChainId={customChainId}
     />
   )
 }
diff --git a/src/components/SwapForm/SwapActionButton/index.tsx b/src/components/SwapForm/SwapActionButton/index.tsx
index a6557f8303..65073d0139 100644
--- a/src/components/SwapForm/SwapActionButton/index.tsx
+++ b/src/components/SwapForm/SwapActionButton/index.tsx
@@ -1,4 +1,4 @@
-import { Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
+import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
@@ -14,10 +14,12 @@ import { BuildRouteResult } from 'components/SwapForm/hooks/useBuildRoute'
 import { SwapCallbackError } from 'components/swapv2/styleds'
 import { useActiveWeb3React } from 'hooks'
 import { ApprovalState, useApproveCallback } from 'hooks/useApproveCallback'
+import { NETWORKS_INFO } from 'hooks/useChainsConfig'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import { PermitState, usePermit } from 'hooks/usePermit'
 import useTheme from 'hooks/useTheme'
 import { WrapType } from 'hooks/useWrapCallback'
+import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import ApprovalModal from 'pages/SwapV3/ApprovalModal'
 import { ApplicationModal } from 'state/application/actions'
 import { useToggleModal, useWalletModalToggle } from 'state/application/hooks'
@@ -57,6 +59,7 @@ type Props = {
   setProcessingSwap: React.Dispatch<React.SetStateAction<boolean>>
   onWrap: (() => Promise<string | undefined>) | undefined
   buildRoute: () => Promise<BuildRouteResult>
+  customChainId?: ChainId
 }
 
 const SwapActionButton: React.FC<Props> = ({
@@ -80,9 +83,11 @@ const SwapActionButton: React.FC<Props> = ({
   setProcessingSwap,
   onWrap,
   buildRoute,
+  customChainId,
 }) => {
   const theme = useTheme()
-  const { account, walletKey } = useActiveWeb3React()
+  const { changeNetwork } = useChangeNetwork()
+  const { account, walletKey, chainId } = useActiveWeb3React()
   const { mixpanelHandler } = useMixpanel()
   const [errorWhileSwap, setErrorWhileSwap] = useState('')
   const noRouteFound = routeSummary && !routeSummary.route
@@ -199,6 +204,14 @@ const SwapActionButton: React.FC<Props> = ({
       )
     }
 
+    if (customChainId && customChainId !== chainId) {
+      return (
+        <ButtonLight onClick={() => changeNetwork(customChainId)}>
+          <Trans>Swich to {NETWORKS_INFO[customChainId].name}</Trans>
+        </ButtonLight>
+      )
+    }
+
     if (wrapInputError) {
       return <CustomPrimaryButton disabled>{wrapInputError}</CustomPrimaryButton>
     }
diff --git a/src/components/SwapForm/index.tsx b/src/components/SwapForm/index.tsx
index 8f3b5e1fe7..1bae6d7326 100644
--- a/src/components/SwapForm/index.tsx
+++ b/src/components/SwapForm/index.tsx
@@ -1,15 +1,17 @@
-import { Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
+import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import { rgba } from 'polished'
 import { stringify } from 'querystring'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import { Box, Flex, Text } from 'rebass'
 import { parseGetRouteResponse } from 'services/route/utils'
 import styled from 'styled-components'
 
+import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import AddressInputPanel from 'components/AddressInputPanel'
+import NetworkModal from 'components/Header/web3/NetworkModal'
 import { Clock } from 'components/Icons'
 import { AutoRow } from 'components/Row'
 import SlippageWarningNote from 'components/SlippageWarningNote'
@@ -28,6 +30,7 @@ import TradePrice from 'components/swapv2/TradePrice'
 import { Wrapper } from 'components/swapv2/styleds'
 import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
+import { NETWORKS_INFO } from 'hooks/useChainsConfig'
 import useTheme from 'hooks/useTheme'
 import useWrapCallback, { WrapType } from 'hooks/useWrapCallback'
 import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const'
@@ -59,6 +62,21 @@ const PriceAlertButton = styled.div`
   align-items: center;
   height: fit-content;
 `
+
+const SelectNetwork = styled.div`
+  border: 999px;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: ${({ theme }) => theme.subText};
+  background: ${({ theme }) => theme.buttonBlack};
+  border-radius: 999px;
+  cursor: pointer;
+`
+
 export type SwapFormProps = {
   hidden: boolean
 
@@ -79,6 +97,8 @@ export type SwapFormProps = {
   onChangeCurrencyIn: (c: Currency) => void
   onChangeCurrencyOut: (c: Currency) => void
   goToSettingsView: () => void
+  customChainId?: ChainId
+  omniView?: boolean
 }
 
 const SwapForm: React.FC<SwapFormProps> = props => {
@@ -97,9 +117,12 @@ const SwapForm: React.FC<SwapFormProps> = props => {
     permit,
     onChangeCurrencyIn,
     onChangeCurrencyOut,
+    customChainId,
+    omniView,
   } = props
 
-  const { isEVM, isSolana, chainId } = useActiveWeb3React()
+  const { isEVM, isSolana, chainId: walletChainId } = useActiveWeb3React()
+  const chainId = customChainId || walletChainId
   const navigate = useNavigate()
   const [isProcessingSwap, setProcessingSwap] = useState(false)
   const { typedValue } = useSwapState()
@@ -120,7 +143,11 @@ const SwapForm: React.FC<SwapFormProps> = props => {
   }, [onUserInput])
 
   const parsedAmount = useParsedAmount(currencyIn, typedValue)
-  const { wrapType, inputError: wrapInputError, execute: onWrap } = useWrapCallback(currencyIn, currencyOut, typedValue)
+  const {
+    wrapType,
+    inputError: wrapInputError,
+    execute: onWrap,
+  } = useWrapCallback(currencyIn, currencyOut, typedValue, false, customChainId)
   const isWrapOrUnwrap = wrapType !== WrapType.NOT_APPLICABLE
 
   const isStablePairSwap = useCheckStablePairSwap(currencyIn, currencyOut)
@@ -131,6 +158,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
     isSaveGas,
     parsedAmount,
     isProcessingSwap,
+    customChain: chainId,
   })
 
   const { data: getRouteRawResponse, isFetching: isGettingRoute, error: getRouteError } = result
@@ -161,14 +189,6 @@ const SwapForm: React.FC<SwapFormProps> = props => {
     parsedAmountFromTypedValue: parsedAmount,
   })
 
-  const handleChangeCurrencyIn = (c: Currency) => {
-    onChangeCurrencyIn(c)
-  }
-
-  const handleChangeCurrencyOut = (c: Currency) => {
-    onChangeCurrencyOut(c)
-  }
-
   const isSolanaUnwrap = isSolana && wrapType === WrapType.UNWRAP
   useEffect(() => {
     // reset value for unwrapping WSOL
@@ -181,6 +201,9 @@ const SwapForm: React.FC<SwapFormProps> = props => {
     setRouteSummary(routeSummary)
   }, [routeSummary, setRouteSummary])
 
+  const [isOpenNetworkModal, setIsOpenNetworkModal] = useState(false)
+  const [searchParams, setSearchParams] = useSearchParams()
+
   return (
     <SwapFormContextProvider
       slippage={slippage}
@@ -191,9 +214,32 @@ const SwapForm: React.FC<SwapFormProps> = props => {
       isStablePairSwap={isStablePairSwap}
       isAdvancedMode={isDegenMode}
     >
+      <NetworkModal
+        selectedId={chainId}
+        customOnSelectNetwork={chain => {
+          searchParams.set('chainId', chain.toString())
+          setSearchParams(searchParams)
+        }}
+        isOpen={isOpenNetworkModal}
+        customToggleModal={() => setIsOpenNetworkModal(prev => !prev)}
+      />
+
       <Box sx={{ flexDirection: 'column', gap: '16px', display: hidden ? 'none' : 'flex' }}>
         <Wrapper id={TutorialIds.SWAP_FORM_CONTENT}>
           <Flex flexDirection="column" sx={{ gap: '0.75rem' }}>
+            {omniView ? (
+              <Flex justifyContent="space-between" alignItems="center">
+                <Text fontSize={12} fontWeight="500" color={theme.subText}>
+                  <Trans>Choose a chain</Trans>
+                </Text>
+
+                <SelectNetwork role="button" onClick={() => setIsOpenNetworkModal(true)}>
+                  <img src={NETWORKS_INFO[chainId].icon} alt="Network" style={{ height: '20px', width: '20px' }} />
+                  <Text>{NETWORKS_INFO[chainId].name}</Text>
+                  <DropdownSVG />
+                </SelectNetwork>
+              </Flex>
+            ) : null}
             <InputCurrencyPanel
               wrapType={wrapType}
               typedValue={typedValue}
@@ -201,7 +247,8 @@ const SwapForm: React.FC<SwapFormProps> = props => {
               currencyIn={currencyIn}
               currencyOut={currencyOut}
               balanceIn={balanceIn}
-              onChangeCurrencyIn={handleChangeCurrencyIn}
+              onChangeCurrencyIn={onChangeCurrencyIn}
+              customChainId={customChainId}
             />
 
             <AutoRow justify="space-between">
@@ -239,7 +286,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
                     )}
                   </PriceAlertButton>
                 )}
-                <ReverseTokenSelectionButton onClick={() => currencyIn && handleChangeCurrencyOut(currencyIn)} />
+                <ReverseTokenSelectionButton onClick={() => currencyIn && onChangeCurrencyOut(currencyIn)} />
               </Flex>
             </AutoRow>
 
@@ -250,7 +297,8 @@ const SwapForm: React.FC<SwapFormProps> = props => {
               currencyIn={currencyIn}
               currencyOut={currencyOut}
               amountOutUsd={routeSummary?.amountOutUsd}
-              onChangeCurrencyOut={handleChangeCurrencyOut}
+              onChangeCurrencyOut={onChangeCurrencyOut}
+              customChainId={customChainId}
             />
 
             {isDegenMode && isEVM && !isWrapOrUnwrap && (
@@ -284,6 +332,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
             onWrap={onWrap}
             buildRoute={buildRoute}
             swapInputError={swapInputError}
+            customChainId={customChainId}
           />
 
           {!isWrapOrUnwrap && <TradeSummary routeSummary={routeSummary} slippage={slippage} />}
diff --git a/src/components/TradeRouting/index.tsx b/src/components/TradeRouting/index.tsx
index ff0b8ebf6b..7ea22b3387 100644
--- a/src/components/TradeRouting/index.tsx
+++ b/src/components/TradeRouting/index.tsx
@@ -122,10 +122,20 @@ interface RoutingProps {
   currencyOut: Currency | undefined
   inputAmount: CurrencyAmount<Currency> | undefined
   outputAmount: CurrencyAmount<Currency> | undefined
+  customChainId?: ChainId
 }
 
-const Routing = ({ tradeComposition, maxHeight, inputAmount, outputAmount, currencyIn, currencyOut }: RoutingProps) => {
-  const { chainId } = useActiveWeb3React()
+const Routing = ({
+  customChainId,
+  tradeComposition,
+  maxHeight,
+  inputAmount,
+  outputAmount,
+  currencyIn,
+  currencyOut,
+}: RoutingProps) => {
+  const { chainId: walletChainId } = useActiveWeb3React()
+  const chainId = customChainId || walletChainId
   const shadowRef = useRef<HTMLDivElement>(null)
   const wrapperRef = useRef<HTMLDivElement>(null)
   const contentRef = useRef<HTMLDivElement>(null)
@@ -197,7 +207,7 @@ const Routing = ({ tradeComposition, maxHeight, inputAmount, outputAmount, curre
 }
 
 const TokenRoute = ({ token }: { token: Token }) => {
-  const currency = useCurrencyV2(token.wrapped.address)
+  const currency = useCurrencyV2(token.wrapped.address, token.chainId)
   return (
     <StyledToken
       style={{ marginRight: 0 }}
diff --git a/src/components/swapv2/LimitOrder/LimitOrderForm.tsx b/src/components/swapv2/LimitOrder/LimitOrderForm.tsx
index 02eba4651b..804690964c 100644
--- a/src/components/swapv2/LimitOrder/LimitOrderForm.tsx
+++ b/src/components/swapv2/LimitOrder/LimitOrderForm.tsx
@@ -89,6 +89,7 @@ type Props = {
   zIndexToolTip?: number
   defaultRate?: RateInfo
   editOrderInfo?: EditOrderInfo
+  useUrlParams?: boolean
 }
 
 const InputWrapper = styled.div`
@@ -128,6 +129,7 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
     setFlowState,
     zIndexToolTip = Z_INDEXS.TOOL_TIP_ERROR_INPUT_SWAP_FORM,
     editOrderInfo,
+    // useUrlParams,
   },
   ref,
 ) {
@@ -147,6 +149,7 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
     setOrderEditing,
     setInputValue: setInputValueGlobal,
   } = useLimitActionHandlers()
+
   const { ordersNeedCreated, inputAmount: inputAmountGlobal } = useLimitState()
 
   const [inputAmount, setInputAmount] = useState(defaultInputAmount)
@@ -493,18 +496,7 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
       outputAmount,
       expiredAt,
     })
-  }, [
-    setOrderEditing,
-    account,
-    chainId,
-    currencyIn,
-    currencyOut,
-    inputAmount,
-    outputAmount,
-    expiredAt,
-    orderInfo?.id,
-    isEdit,
-  ])
+  }, [setOrderEditing, account, chainId, currencyIn, currencyOut, inputAmount, outputAmount, expiredAt, orderInfo?.id, isEdit])
 
   // use ref to prevent too many api call when firebase update status
   const refSubmitCreateOrder = useRef(onSubmitCreateOrder)
diff --git a/src/components/swapv2/LimitOrder/index.tsx b/src/components/swapv2/LimitOrder/index.tsx
index 9fef316119..39950ec025 100644
--- a/src/components/swapv2/LimitOrder/index.tsx
+++ b/src/components/swapv2/LimitOrder/index.tsx
@@ -3,7 +3,7 @@ import { memo, useState } from 'react'
 
 import { TutorialKeys } from 'components/Tutorial/TutorialSwap'
 import Tutorial from 'components/swapv2/LimitOrder/Tutorial'
-import { APP_PATHS, TRANSACTION_STATE_DEFAULT } from 'constants/index'
+import { TRANSACTION_STATE_DEFAULT } from 'constants/index'
 import useSyncTokenSymbolToUrl from 'hooks/useSyncTokenSymbolToUrl'
 import { useLimitActionHandlers, useLimitState } from 'state/limit/hooks'
 import { TransactionFlowState } from 'types/TransactionFlowState'
@@ -20,8 +20,7 @@ function LimitOrderComp({ setIsSelectCurrencyManual, isSelectCurrencyManual }: P
 
   const { currencyIn, currencyOut } = useLimitState()
 
-  const isPartnerSwap = window.location.pathname.startsWith(APP_PATHS.PARTNER_SWAP)
-  useSyncTokenSymbolToUrl(currencyIn, currencyOut, onSelectPair, isSelectCurrencyManual, isPartnerSwap)
+  useSyncTokenSymbolToUrl(currencyIn, currencyOut, onSelectPair, isSelectCurrencyManual)
 
   const [showTutorial, setShowTutorial] = useState(!localStorage.getItem(TutorialKeys.SHOWED_LO_GUIDE))
 
diff --git a/src/hooks/useWrapCallback.ts b/src/hooks/useWrapCallback.ts
index 772e550233..dcce0b7d2f 100644
--- a/src/hooks/useWrapCallback.ts
+++ b/src/hooks/useWrapCallback.ts
@@ -1,4 +1,4 @@
-import { Currency, WETH } from '@kyberswap/ks-sdk-core'
+import { ChainId, Currency, WETH } from '@kyberswap/ks-sdk-core'
 import { t } from '@lingui/macro'
 import { PublicKey, Transaction } from '@solana/web3.js'
 import { useMemo } from 'react'
@@ -36,13 +36,15 @@ export default function useWrapCallback(
   outputCurrency: Currency | undefined | null,
   typedValue: string | undefined,
   forceWrap = false,
+  customChainId?: ChainId,
 ): {
   wrapType: WrapType
   execute?: undefined | (() => Promise<string | undefined>)
   inputError?: string
   allowUnwrap?: boolean
 } {
-  const { chainId, isEVM, isSolana, account } = useActiveWeb3React()
+  const { chainId: walletChainId, isEVM, isSolana, account } = useActiveWeb3React()
+  const chainId = customChainId || walletChainId
   const provider = useProvider()
   const wethContract = useWETHContract()
   const balance = useCurrencyBalance(inputCurrency ?? undefined)
diff --git a/src/pages/PartnerSwap/index.tsx b/src/pages/PartnerSwap/index.tsx
index 8c5a7b7ed6..62939c667a 100644
--- a/src/pages/PartnerSwap/index.tsx
+++ b/src/pages/PartnerSwap/index.tsx
@@ -1,5 +1,5 @@
-import { Currency } from '@kyberswap/ks-sdk-core'
-import { Trans } from '@lingui/macro'
+import { ChainId, Currency } from '@kyberswap/ks-sdk-core'
+import { Trans, t } from '@lingui/macro'
 import { ReactNode, Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useNavigate, useSearchParams } from 'react-router-dom'
@@ -9,13 +9,15 @@ import styled from 'styled-components'
 
 import { ReactComponent as RoutingIcon } from 'assets/svg/routing-icon.svg'
 import Banner from 'components/Banner'
+import SwapForm, { SwapFormProps } from 'components/SwapForm'
 import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
-import TokenWarningModal from 'components/TokenWarningModal'
+import { TutorialKeys } from 'components/Tutorial/TutorialSwap'
+// import TokenWarningModal from 'components/TokenWarningModal'
 import GasPriceTrackerPanel from 'components/swapv2/GasPriceTrackerPanel'
-import LimitOrder from 'components/swapv2/LimitOrder'
+import LimitOrderForm from 'components/swapv2/LimitOrder/LimitOrderForm'
 import ListLimitOrder from 'components/swapv2/LimitOrder/ListOrder'
+import Tutorial from 'components/swapv2/LimitOrder/Tutorial'
 import LiquiditySourcesPanel from 'components/swapv2/LiquiditySourcesPanel'
-import { PairSuggestionHandle } from 'components/swapv2/PairSuggestion'
 import SettingsPanel from 'components/swapv2/SwapSettingsPanel'
 import TokenInfoTab from 'components/swapv2/TokenInfo'
 import {
@@ -26,28 +28,31 @@ import {
   SwapFormWrapper,
   highlight,
 } from 'components/swapv2/styleds'
+import { TRANSACTION_STATE_DEFAULT } from 'constants/index'
 import { SUPPORTED_NETWORKS } from 'constants/networks'
-import { useActiveWeb3React } from 'hooks'
-import { useAllTokens, useIsLoadedTokenDefault } from 'hooks/Tokens'
+import { DEFAULT_OUTPUT_TOKEN_BY_CHAIN, NativeCurrencies } from 'constants/tokens'
+import { useAllTokens, useCurrencyV2 } from 'hooks/Tokens'
 import useTheme from 'hooks/useTheme'
-import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import { BodyWrapper } from 'pages/AppBody'
 import CrossChain from 'pages/CrossChain'
 import CrossChainLink from 'pages/CrossChain/CrossChainLink'
 import CrossChainTransfersHistory from 'pages/CrossChain/TransfersHistory'
 import { TAB, isSettingTab } from 'pages/SwapV3'
 import Header from 'pages/SwapV3/Header'
-import useCurrenciesByPage from 'pages/SwapV3/useCurrenciesByPage'
-import useTokenNotInDefault from 'pages/SwapV3/useTokenNotInDefault'
-import { useLimitActionHandlers } from 'state/limit/hooks'
+import Updater from 'state/customizeDexes/updater'
 import { Field } from 'state/swap/actions'
-import { useDefaultsFromURLSearch, useSwapActionHandlers } from 'state/swap/hooks'
-import { useShowTradeRoutes } from 'state/user/hooks'
+import {
+  useDegenModeManager,
+  usePermitData,
+  useShowTradeRoutes,
+  useUserSlippageTolerance,
+  useUserTransactionTTL,
+} from 'state/user/hooks'
+import { useCurrencyBalances } from 'state/wallet/hooks'
+import { TransactionFlowState } from 'types/TransactionFlowState'
 import { DetailedRouteSummary } from 'types/route'
 import { getTradeComposition } from 'utils/aggregationRouting'
 
-import PopulatedSwapForm from '../SwapV3/PopulatedSwapForm'
-
 const TradeRouting = lazy(() => import('components/TradeRouting'))
 
 export const InfoComponents = ({ children }: { children: ReactNode[] }) => {
@@ -81,34 +86,30 @@ export const RoutingIconWrapper = styled(RoutingIcon)`
 `
 
 export default function Swap() {
-  const { chainId } = useActiveWeb3React()
   const [searchParams, setSearchParams] = useSearchParams()
 
-  const requestChainId = searchParams.get('chainId')
-  const { changeNetwork } = useChangeNetwork()
-
-  const [triedToChangeNetwork, setTriedToChangeNetwork] = useState(false)
-
-  useEffect(() => {
-    // if wallet has already connected, request connect onnce
-    if (
-      !triedToChangeNetwork &&
-      requestChainId &&
-      SUPPORTED_NETWORKS.includes(+requestChainId) &&
-      chainId !== +requestChainId
-    ) {
-      setTriedToChangeNetwork(true)
-      changeNetwork(+requestChainId)
-    }
-  }, [chainId, requestChainId, changeNetwork, triedToChangeNetwork])
+  const chainIdFromParam = searchParams.get('chainId')
+  const inputTokenFromParam = searchParams.get('inputCurrency')
+  const outputTokenFromParam = searchParams.get('outputCurrency')
+  const expectedChainId =
+    chainIdFromParam && SUPPORTED_NETWORKS.includes(+chainIdFromParam) ? +chainIdFromParam : ChainId.MAINNET
+
+  const currencyIn =
+    useCurrencyV2(inputTokenFromParam || undefined, expectedChainId) || NativeCurrencies[expectedChainId as ChainId]
+  const currencyOut =
+    useCurrencyV2(outputTokenFromParam || undefined, expectedChainId) ||
+    DEFAULT_OUTPUT_TOKEN_BY_CHAIN[expectedChainId as ChainId]
+
+  const currencies = useMemo(
+    () => ({
+      [Field.INPUT]: currencyIn || undefined,
+      [Field.OUTPUT]: currencyOut || undefined,
+    }),
+    [currencyIn, currencyOut],
+  )
 
   const isShowTradeRoutes = useShowTradeRoutes()
   const [routeSummary, setRouteSummary] = useState<DetailedRouteSummary>()
-  const [isSelectCurrencyManually, setIsSelectCurrencyManually] = useState(false) // true when: select token input, output manually or click rotate token.
-
-  const refSuggestPair = useRef<PairSuggestionHandle>(null)
-
-  const [showingPairSuggestionImport, setShowingPairSuggestionImport] = useState<boolean>(false) // show modal import when click pair suggestion
 
   const activeTab = Object.values(TAB).includes(searchParams.get('tab')) ? (searchParams.get('tab') as TAB) : TAB.SWAP
   const setActiveTab = useCallback(
@@ -132,81 +133,85 @@ export default function Swap() {
   const isLimitPage = activeTab === TAB.LIMIT || (previousTab === TAB.LIMIT && isSetting)
   const isCrossChainPage = activeTab === TAB.CROSS_CHAIN || (previousTab === TAB.CROSS_CHAIN && isSetting)
 
-  const { onSelectPair: onSelectPairLimit } = useLimitActionHandlers()
-
-  useDefaultsFromURLSearch()
-
   const theme = useTheme()
 
-  const { onCurrencySelection, onUserInput } = useSwapActionHandlers()
-  const { currencies, currencyIn, currencyOut } = useCurrenciesByPage()
-
   // dismiss warning if all imported tokens are in active lists
-  const defaultTokens = useAllTokens()
-  const importTokensNotInDefault = useTokenNotInDefault()
+  const allTokens = useAllTokens()
+
+  // const handleConfirmTokenWarning = useCallback(
+  //   (tokens: Currency[]) => {
+  //     // handleDismissTokenWarning()
+  //     if (isLimitPage) {
+  //       onSelectPairLimit(tokens[0], tokens[1])
+  //       setIsSelectCurrencyManually(true)
+  //     }
+  //   },
+  //   [isLimitPage, onSelectPairLimit],
+  // )
 
-  const handleTypeInput = useCallback(
-    (value: string) => {
-      onUserInput(Field.INPUT, value)
-    },
-    [onUserInput],
+  const onBackToSwapTab = () => setActiveTab(previousTab || TAB.SWAP)
+
+  const tradeRouteComposition = useMemo(() => {
+    return getTradeComposition(expectedChainId, routeSummary?.parsedAmountIn, undefined, routeSummary?.route, allTokens)
+  }, [expectedChainId, allTokens, routeSummary])
+  const swapActionsRef = useRef(null)
+
+  const [balanceIn, balanceOut] = useCurrencyBalances(
+    useMemo(() => [currencyIn ?? undefined, currencyOut ?? undefined], [currencyIn, currencyOut]),
+    expectedChainId,
   )
 
-  // reset if they close warning without tokens in params
-  const handleDismissTokenWarning = useCallback(() => {
-    if (showingPairSuggestionImport) {
-      setShowingPairSuggestionImport(false)
-    }
-  }, [showingPairSuggestionImport])
-
-  const handleConfirmTokenWarning = useCallback(
-    (tokens: Currency[]) => {
-      handleDismissTokenWarning()
-      if (showingPairSuggestionImport) {
-        refSuggestPair.current?.onConfirmImportToken() // callback from children
-      }
-      if (isLimitPage) {
-        onSelectPairLimit(tokens[0], tokens[1])
-        setIsSelectCurrencyManually(true)
-      }
+  const [ttl] = useUserTransactionTTL()
+  const [isDegenMode] = useDegenModeManager()
+  const [slippage] = useUserSlippageTolerance()
+  const permitData = usePermitData(currencyIn?.wrapped.address)
+
+  const onChangeCurrencyIn = useCallback(
+    (c: Currency) => {
+      const value = c.isNative ? c.symbol || c.wrapped.address : c.wrapped.address
+      if (value === outputTokenFromParam) searchParams.set('outputCurrency', inputTokenFromParam || '')
+      searchParams.set('inputCurrency', value)
+      setSearchParams(searchParams)
     },
-    [isLimitPage, onSelectPairLimit, showingPairSuggestionImport, handleDismissTokenWarning],
+    [searchParams, setSearchParams, inputTokenFromParam, outputTokenFromParam],
   )
 
-  const onSelectSuggestedPair = useCallback(
-    (fromToken: Currency | undefined, toToken: Currency | undefined, amount?: string) => {
-      if (isLimitPage) {
-        onSelectPairLimit(fromToken, toToken)
-        setIsSelectCurrencyManually(true)
-        return
-      }
-
-      if (fromToken) onCurrencySelection(Field.INPUT, fromToken)
-      if (toToken) onCurrencySelection(Field.OUTPUT, toToken)
-      if (amount) handleTypeInput(amount)
+  const onChangeCurrencyOut = useCallback(
+    (c: Currency) => {
+      const value = c.isNative ? c.symbol || c.wrapped.address : c.wrapped.address
+      if (value === inputTokenFromParam) searchParams.set('inputCurrency', outputTokenFromParam || '')
+      searchParams.set('outputCurrency', value)
+      setSearchParams(searchParams)
     },
-    [handleTypeInput, onCurrencySelection, onSelectPairLimit, isLimitPage],
+    [searchParams, setSearchParams, inputTokenFromParam, outputTokenFromParam],
   )
 
-  const isLoadedTokenDefault = useIsLoadedTokenDefault()
+  const props: SwapFormProps = {
+    hidden: activeTab !== TAB.SWAP,
+    routeSummary,
+    setRouteSummary,
+    currencyIn: currencyIn || undefined,
+    currencyOut: currencyOut || undefined,
+    balanceIn,
+    balanceOut,
+    isDegenMode,
+    slippage,
+    transactionTimeout: ttl,
+    permit: permitData?.rawSignature,
+    onChangeCurrencyIn,
+    onChangeCurrencyOut,
+    goToSettingsView: () => setActiveTab(TAB.SETTINGS),
+    customChainId: expectedChainId,
+    omniView: true,
+  }
 
-  const onBackToSwapTab = () => setActiveTab(previousTab || TAB.SWAP)
+  const [showTutorial, setShowTutorial] = useState(!localStorage.getItem(TutorialKeys.SHOWED_LO_GUIDE))
 
-  const isShowModalImportToken =
-    !isCrossChainPage && isLoadedTokenDefault && importTokensNotInDefault.length > 0 && showingPairSuggestionImport
-
-  const tradeRouteComposition = useMemo(() => {
-    return getTradeComposition(chainId, routeSummary?.parsedAmountIn, undefined, routeSummary?.route, defaultTokens)
-  }, [chainId, defaultTokens, routeSummary])
-  const swapActionsRef = useRef(null)
+  // modal and loading
+  const [flowState, setFlowState] = useState<TransactionFlowState>(TRANSACTION_STATE_DEFAULT)
 
   return (
     <>
-      <TokenWarningModal
-        isOpen={isShowModalImportToken}
-        tokens={importTokensNotInDefault}
-        onConfirm={handleConfirmTokenWarning}
-      />
       <PageWrapper>
         <Banner />
         <Container>
@@ -214,15 +219,7 @@ export default function Swap() {
             <Header activeTab={activeTab} setActiveTab={setActiveTab} swapActionsRef={swapActionsRef} />
 
             <AppBodyWrapped style={[TAB.INFO, TAB.LIMIT].includes(activeTab) ? { padding: 0 } : undefined}>
-              {isSwapPage && (
-                <PopulatedSwapForm
-                  onSelectSuggestedPair={onSelectSuggestedPair}
-                  routeSummary={routeSummary}
-                  setRouteSummary={setRouteSummary}
-                  goToSettingsView={() => setActiveTab(TAB.SETTINGS)}
-                  hidden={activeTab !== TAB.SWAP}
-                />
-              )}
+              {isSwapPage && <SwapForm {...props} />}
               {activeTab === TAB.INFO && <TokenInfoTab currencies={currencies} onBack={onBackToSwapTab} />}
               {activeTab === TAB.SETTINGS && (
                 <SettingsPanel
@@ -241,12 +238,30 @@ export default function Swap() {
               {activeTab === TAB.LIQUIDITY_SOURCES && (
                 <LiquiditySourcesPanel onBack={() => setActiveTab(TAB.SETTINGS)} />
               )}
-              {activeTab === TAB.LIMIT && (
-                <LimitOrder
-                  isSelectCurrencyManual={isSelectCurrencyManually}
-                  setIsSelectCurrencyManual={setIsSelectCurrencyManually}
-                />
-              )}
+              {activeTab === TAB.LIMIT &&
+                (showTutorial ? (
+                  <Tutorial
+                    onClose={() => {
+                      setShowTutorial(false)
+                      localStorage.setItem(TutorialKeys.SHOWED_LO_GUIDE, '1')
+                    }}
+                  />
+                ) : (
+                  <div style={{ padding: '16px' }}>
+                    <LimitOrderForm
+                      flowState={flowState}
+                      setFlowState={setFlowState}
+                      currencyIn={currencyIn}
+                      currencyOut={currencyOut}
+                      note={
+                        currencyOut?.isNative
+                          ? t`Note: Once your order is filled, you will receive ${currencyOut?.wrapped.name} (${currencyOut?.wrapped.symbol})`
+                          : undefined
+                      }
+                      useUrlParams
+                    />
+                  </div>
+                ))}
               {isCrossChainPage && <CrossChain visible={activeTab === TAB.CROSS_CHAIN} />}
             </AppBodyWrapped>
             {isCrossChainPage && <CrossChainLink isBridge />}
@@ -274,10 +289,11 @@ export default function Swap() {
                   >
                     <TradeRouting
                       tradeComposition={tradeRouteComposition}
-                      currencyIn={currencyIn}
-                      currencyOut={currencyOut}
+                      currencyIn={currencyIn || undefined}
+                      currencyOut={currencyOut || undefined}
                       inputAmount={routeSummary?.parsedAmountIn}
                       outputAmount={routeSummary?.parsedAmountOut}
+                      customChainId={expectedChainId}
                     />
                   </Suspense>
                 </Flex>
@@ -293,6 +309,8 @@ export default function Swap() {
           </SwitchLocaleLinkWrapper>
         </Flex>
       </PageWrapper>
+
+      <Updater customChainId={expectedChainId} />
     </>
   )
 }
diff --git a/src/state/customizeDexes/updater.tsx b/src/state/customizeDexes/updater.tsx
index 7c8b15863e..ed7bd38e61 100644
--- a/src/state/customizeDexes/updater.tsx
+++ b/src/state/customizeDexes/updater.tsx
@@ -1,3 +1,4 @@
+import { ChainId } from '@kyberswap/ks-sdk-core'
 import { useEffect, useMemo } from 'react'
 import { useDispatch } from 'react-redux'
 
@@ -10,10 +11,11 @@ import { uniqueArray } from 'utils/array'
 
 import { Dex, updateAllDexes } from '.'
 
-export default function Updater(): null {
+export default function Updater({ customChainId }: { customChainId?: ChainId }): null {
   const dispatch = useDispatch<AppDispatch>()
 
-  const { chainId } = useActiveWeb3React()
+  const { chainId: walletChainId } = useActiveWeb3React()
+  const chainId = customChainId || walletChainId
   const { data: dexes } = useLiquiditySources(chainId)
 
   // filterout kyberswap dexes, will hardcode
diff --git a/src/state/wallet/hooks.ts b/src/state/wallet/hooks.ts
index 4e34e0e433..362203dfa4 100644
--- a/src/state/wallet/hooks.ts
+++ b/src/state/wallet/hooks.ts
@@ -184,8 +184,11 @@ export function useCurrencyBalances(
   )
 }
 
-export function useCurrencyBalance(currency?: Currency): CurrencyAmount<Currency> | undefined {
-  return useCurrencyBalances(useMemo(() => [currency], [currency]))[0]
+export function useCurrencyBalance(currency?: Currency, chainId?: ChainId): CurrencyAmount<Currency> | undefined {
+  return useCurrencyBalances(
+    useMemo(() => [currency], [currency]),
+    chainId,
+  )[0]
 }
 
 // mimics useAllBalances