From f92279d2aa6fb3ed72a735ca946337f02d228afa Mon Sep 17 00:00:00 2001
From: Nguyen Van Viet <vietnv1304@gmail.com>
Date: Mon, 30 Oct 2023 14:24:39 +0700
Subject: [PATCH] Partner swap (#2335)

* feat: partner swap

* fix: setting modal

* feat: handle show/hide features

* fix: fee and remove gas refund

* fix: lo tab

* fix: network

* fix: setting

* fix: remove scribe btn

* fix: lo filter

* remove test domain
---
 index.html                                    |  15 +-
 src/components/Header/index.tsx               |  94 +++---
 .../SwapForm/SlippageSettingGroup.tsx         |   4 +-
 .../SwapForm/SwapModal/SwapDetails/index.tsx  |   8 +-
 src/components/SwapForm/TradeSummary.tsx      |  23 +-
 .../SwapForm/hooks/useBuildRoute.tsx          |   6 +-
 src/components/SwapForm/hooks/useGetRoute.ts  |  23 +-
 src/components/SwapForm/index.tsx             |  42 +--
 .../swapv2/LimitOrder/ListOrder/index.tsx     |   7 +-
 src/components/swapv2/LimitOrder/index.tsx    |   5 +-
 .../swapv2/SwapSettingsPanel/index.tsx        |  47 +--
 src/constants/index.ts                        |   1 +
 src/pages/App.tsx                             |   5 +-
 .../CrossChain/TransfersHistory/index.tsx     |  11 +-
 src/pages/PartnerSwap/index.tsx               | 298 ++++++++++++++++++
 src/pages/SwapV3/Header.tsx                   |  10 +-
 src/pages/SwapV3/HeaderRightMenu.tsx          |   4 +-
 src/pages/SwapV3/PopulatedSwapForm.tsx        |  30 +-
 src/pages/SwapV3/Tabs/LimitTab.tsx            |   5 +-
 src/pages/SwapV3/Tabs/index.tsx               |  45 ++-
 src/pages/SwapV3/index.tsx                    |   3 +
 src/pages/SwapV3/useCurrenciesByPage.ts       |   2 +-
 src/services/route/index.ts                   |   7 +-
 src/services/route/types/buildRoute.ts        |   2 +-
 src/services/route/utils.ts                   |   4 +-
 src/state/swap/hooks.ts                       |   6 +-
 src/utils/fee.ts                              |   5 +-
 27 files changed, 575 insertions(+), 137 deletions(-)
 create mode 100644 src/pages/PartnerSwap/index.tsx

diff --git a/index.html b/index.html
index 375040fd08..745dafecb9 100644
--- a/index.html
+++ b/index.html
@@ -196,7 +196,20 @@
       },
     }
   </script>
-  <script async src="/libs/zenddesk.js?key=a73faacd-ba50-493a-8bf5-4b6878035346&v=1" id="ze-snippet"></script>
+
+  <script>
+      ; (function () {
+        const isPartnerSwap = window.location.pathname.startsWith('/partner-swap')
+        if (!isPartnerSwap) {
+          const script = document.createElement('script')
+          script.async = true
+          script.id = 'ze-snippet'
+          script.src = '/libs/zenddesk.js?key=a73faacd-ba50-493a-8bf5-4b6878035346&v=1'
+
+          document.body.appendChild(script)
+        }
+      })()
+  </script>
   <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index f5d5b8b5f8..c2c36e709f 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { lighten } from 'polished'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import styled from 'styled-components'
 
@@ -178,6 +178,9 @@ export default function Header() {
   const { networkInfo } = useActiveWeb3React()
   const [holidayMode] = useHolidayMode()
   const theme = useTheme()
+  const { pathname } = useLocation()
+  const isPartnerSwap = pathname.startsWith(APP_PATHS.PARTNER_SWAP)
+
   const { mixpanelHandler } = useMixpanel()
   const upToXXSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToXXSmall}px)`)
   const menu = (
@@ -187,48 +190,61 @@ export default function Header() {
       <Menu />
     </HeaderElementWrap>
   )
+
   return (
     <HeaderFrame>
       <HeaderRow>
-        <Title to={`${APP_PATHS.SWAP}/${networkInfo.route}`}>
-          {holidayMode ? (
-            <LogoIcon>
-              <IconImage isChristmas src={'/christmas-logo-dark.svg'} alt="logo" />
-            </LogoIcon>
-          ) : (
-            <LogoIcon>
-              <IconImage src={'/logo-dark.svg'} alt="logo" />
-            </LogoIcon>
-          )}
-        </Title>
-        <HeaderLinks>
-          <SwapNavGroup />
-          <EarnNavGroup />
-          <KyberAINavItem />
-          <CampaignNavGroup />
-          <KyberDAONavGroup />
-          <AnalyticNavGroup />
-          <AboutNavGroup />
-          <BlogWrapper>
-            <StyledNavExternalLink
-              onClick={() => {
-                mixpanelHandler(MIXPANEL_TYPE.BLOG_MENU_CLICKED)
-              }}
-              target="_blank"
-              href="https://blog.kyberswap.com"
-            >
-              <Trans>Blog</Trans>
-            </StyledNavExternalLink>
-          </BlogWrapper>
-        </HeaderLinks>
+        {isPartnerSwap ? (
+          <LogoIcon>
+            <IconImage src={'/logo-dark.svg'} alt="logo" />
+          </LogoIcon>
+        ) : (
+          <Title to={`${APP_PATHS.SWAP}/${networkInfo.route}`}>
+            {holidayMode ? (
+              <LogoIcon>
+                <IconImage isChristmas src={'/christmas-logo-dark.svg'} alt="logo" />
+              </LogoIcon>
+            ) : (
+              <LogoIcon>
+                <IconImage src={'/logo-dark.svg'} alt="logo" />
+              </LogoIcon>
+            )}
+          </Title>
+        )}
+        {!isPartnerSwap && (
+          <HeaderLinks>
+            <SwapNavGroup />
+            <EarnNavGroup />
+            <KyberAINavItem />
+            <CampaignNavGroup />
+            <KyberDAONavGroup />
+            <AnalyticNavGroup />
+            <AboutNavGroup />
+            <BlogWrapper>
+              <StyledNavExternalLink
+                onClick={() => {
+                  mixpanelHandler(MIXPANEL_TYPE.BLOG_MENU_CLICKED)
+                }}
+                target="_blank"
+                href="https://blog.kyberswap.com"
+              >
+                <Trans>Blog</Trans>
+              </StyledNavExternalLink>
+            </BlogWrapper>
+          </HeaderLinks>
+        )}
       </HeaderRow>
       <HeaderControls>
         {upToXXSmall ? (
           <HeaderElement>
             <SelectNetwork />
             <SelectWallet />
-            {menu}
-            <SignWallet />
+            {!isPartnerSwap && (
+              <>
+                {menu}
+                <SignWallet />
+              </>
+            )}
           </HeaderElement>
         ) : (
           <>
@@ -236,10 +252,12 @@ export default function Header() {
               <SelectNetwork />
               <SelectWallet />
             </HeaderElement>
-            <HeaderElement style={{ justifyContent: 'flex-end' }}>
-              {menu}
-              <SignWallet />
-            </HeaderElement>
+            {!isPartnerSwap && (
+              <HeaderElement style={{ justifyContent: 'flex-end' }}>
+                {menu}
+                <SignWallet />
+              </HeaderElement>
+            )}
           </>
         )}
       </HeaderControls>
diff --git a/src/components/SwapForm/SlippageSettingGroup.tsx b/src/components/SwapForm/SlippageSettingGroup.tsx
index c110b4dc4f..6bc12c4e06 100644
--- a/src/components/SwapForm/SlippageSettingGroup.tsx
+++ b/src/components/SwapForm/SlippageSettingGroup.tsx
@@ -8,6 +8,7 @@ import styled from 'styled-components'
 
 import { Shield } from 'components/Icons'
 import SlippageSetting from 'components/SwapForm/SlippageSetting'
+import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
@@ -49,8 +50,9 @@ export default function SlippageSettingGroup({
     setShowMevModal(false)
   }, [])
 
+  const isPartnerSwap = window.location.pathname.startsWith(APP_PATHS.PARTNER_SWAP)
   const rightButton =
-    chainId === ChainId.MAINNET && walletEVM.isConnected ? (
+    chainId === ChainId.MAINNET && walletEVM.isConnected && !isPartnerSwap ? (
       <PriceAlertButton onClick={addMevProtectionHandler}>
         <Shield size={14} color={theme.subText} />
         <Text color={theme.subText} style={{ whiteSpace: 'nowrap' }}>
diff --git a/src/components/SwapForm/SwapModal/SwapDetails/index.tsx b/src/components/SwapForm/SwapModal/SwapDetails/index.tsx
index 0b462a73b7..3ce858bc41 100644
--- a/src/components/SwapForm/SwapModal/SwapDetails/index.tsx
+++ b/src/components/SwapForm/SwapModal/SwapDetails/index.tsx
@@ -18,7 +18,7 @@ import { TooltipTextOfSwapFee } from 'components/SwapForm/TradeSummary'
 import useCheckStablePairSwap from 'components/SwapForm/hooks/useCheckStablePairSwap'
 import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
 import { StyledBalanceMaxMini } from 'components/swapv2/styleds'
-import { CHAINS_SUPPORT_FEE_CONFIGS } from 'constants/index'
+import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import { isSupportKyberDao, useGasRefundTier } from 'hooks/kyberdao'
 import useTheme from 'hooks/useTheme'
@@ -107,6 +107,8 @@ export default function SwapDetails({
   const feeAmountWithSymbol =
     feeAmountFromBuild && currencyFromBuild?.symbol ? `${feeAmountFromBuild} ${currencyFromBuild.symbol}` : ''
 
+  const isPartnerSwap = window.location.pathname.includes(APP_PATHS.PARTNER_SWAP)
+
   return (
     <>
       <AutoColumn
@@ -245,7 +247,7 @@ export default function SwapDetails({
           </RowBetween>
         )}
 
-        {CHAINS_SUPPORT_FEE_CONFIGS.includes(chainId) && (
+        {!!routeSummary?.extraFee?.feeAmount && (
           <RowBetween height="20px" style={{ gap: '16px' }}>
             <RowFixed>
               <TextDashed fontSize={12} fontWeight={400} color={theme.subText}>
@@ -326,7 +328,7 @@ export default function SwapDetails({
           </TYPE.black>
         </RowBetween>
 
-        {isSupportKyberDao(chainId) && account && Number(routeSummary?.amountInUsd || 0) > 200 && (
+        {!isPartnerSwap && isSupportKyberDao(chainId) && account && Number(routeSummary?.amountInUsd || 0) > 200 && (
           <RowBetween height="20px" style={{ gap: '16px' }}>
             <RowFixed>
               <TextDashed fontSize={12} fontWeight={400} color={theme.subText}>
diff --git a/src/components/SwapForm/TradeSummary.tsx b/src/components/SwapForm/TradeSummary.tsx
index ed6d32d564..3cc23f9ca3 100644
--- a/src/components/SwapForm/TradeSummary.tsx
+++ b/src/components/SwapForm/TradeSummary.tsx
@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import React, { useEffect, useState } from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useSearchParams } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components'
 
@@ -11,7 +11,7 @@ import Divider from 'components/Divider'
 import { RowBetween, RowFixed } from 'components/Row'
 import { useSwapFormContext } from 'components/SwapForm/SwapFormContext'
 import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
-import { APP_PATHS, BIPS_BASE, CHAINS_SUPPORT_FEE_CONFIGS } from 'constants/index'
+import { APP_PATHS, BIPS_BASE } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import { isSupportKyberDao, useGasRefundTier } from 'hooks/kyberdao'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
@@ -70,6 +70,9 @@ type TooltipTextOfSwapFeeProps = {
   feeAmountText: string
 }
 export const TooltipTextOfSwapFee: React.FC<TooltipTextOfSwapFeeProps> = ({ feeBips, feeAmountText }) => {
+  const [searchParams] = useSearchParams()
+  const clientId = searchParams.get('clientId')
+
   const feePercent = formatDisplayNumber(Number(feeBips) / Number(BIPS_BASE.toString()), {
     style: 'percent',
     fractionDigits: 2,
@@ -86,6 +89,10 @@ export const TooltipTextOfSwapFee: React.FC<TooltipTextOfSwapFeeProps> = ({ feeB
     return <Trans>Read more about the fees {hereLink}</Trans>
   }
 
+  if (clientId) {
+    return <Trans>Swap fees charged by {clientId}.</Trans>
+  }
+
   return (
     <Trans>
       A {feePercent} fee ({feeAmountText}) will incur on this swap. The Est. Output amount you see above is inclusive of
@@ -95,20 +102,19 @@ export const TooltipTextOfSwapFee: React.FC<TooltipTextOfSwapFeeProps> = ({ feeB
 }
 
 const SwapFee: React.FC = () => {
-  const { chainId } = useActiveWeb3React()
   const theme = useTheme()
   const { routeSummary } = useSwapFormContext()
 
-  if (!CHAINS_SUPPORT_FEE_CONFIGS.includes(chainId)) {
-    return null
-  }
-
   const {
     formattedAmount: feeAmount = '',
     formattedAmountUsd: feeAmountUsd = '',
     currency = undefined,
   } = routeSummary?.fee || {}
 
+  if (!feeAmount) {
+    return null
+  }
+
   const feeAmountWithSymbol = feeAmount && currency?.symbol ? `${feeAmount} ${currency.symbol}` : ''
 
   return (
@@ -180,6 +186,7 @@ const TradeSummary: React.FC<Props> = ({ routeSummary, slippage }) => {
     }
   }, [hasTrade])
 
+  const isPartnerSwap = window.location.pathname.includes(APP_PATHS.PARTNER_SWAP)
   return (
     <Wrapper $visible={alreadyVisible} $disabled={!hasTrade}>
       <AutoColumn>
@@ -260,7 +267,7 @@ const TradeSummary: React.FC<Props> = ({ routeSummary, slippage }) => {
             </TYPE.black>
           </RowBetween>
 
-          {isSupportKyberDao(chainId) && (
+          {!isPartnerSwap && isSupportKyberDao(chainId) && (
             <RowBetween>
               <RowFixed>
                 <TextDashed fontSize={12} fontWeight={400} color={theme.subText}>
diff --git a/src/components/SwapForm/hooks/useBuildRoute.tsx b/src/components/SwapForm/hooks/useBuildRoute.tsx
index 4b759650af..5bb65c84f3 100644
--- a/src/components/SwapForm/hooks/useBuildRoute.tsx
+++ b/src/components/SwapForm/hooks/useBuildRoute.tsx
@@ -1,5 +1,6 @@
 import { t } from '@lingui/macro'
 import { useCallback, useRef } from 'react'
+import { useSearchParams } from 'react-router-dom'
 import routeApi from 'services/route'
 import { BuildRouteData, BuildRoutePayload } from 'services/route/types/buildRoute'
 import { RouteSummary } from 'services/route/types/getRoute'
@@ -31,6 +32,8 @@ type Args = {
 
 const useBuildRoute = (args: Args) => {
   const { recipient, routeSummary, slippage, transactionTimeout, permit } = args
+  const [searchParams] = useSearchParams()
+  const clientId = searchParams.get('clientId')
   const { chainId, account } = useActiveWeb3React()
   const abortControllerRef = useRef(new AbortController())
   const { isEnableAuthenAggregator } = useKyberswapGlobalConfig()
@@ -58,7 +61,7 @@ const useBuildRoute = (args: Args) => {
       slippageTolerance: slippage,
       sender: account,
       recipient: to || account,
-      source: 'kyberswap',
+      source: clientId || 'kyberswap',
       skipSimulateTx: false,
       permit,
     }
@@ -90,6 +93,7 @@ const useBuildRoute = (args: Args) => {
       }
     }
   }, [
+    clientId,
     account,
     aggregatorDomain,
     chainId,
diff --git a/src/components/SwapForm/hooks/useGetRoute.ts b/src/components/SwapForm/hooks/useGetRoute.ts
index 34e26cfb2d..6afe1262d5 100644
--- a/src/components/SwapForm/hooks/useGetRoute.ts
+++ b/src/components/SwapForm/hooks/useGetRoute.ts
@@ -1,6 +1,7 @@
 import { ChainId, Currency, CurrencyAmount, Price, WETH } from '@kyberswap/ks-sdk-core'
 import debounce from 'lodash/debounce'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
 import routeApi from 'services/route'
 import { GetRouteParams } from 'services/route/types/getRoute'
 
@@ -91,6 +92,24 @@ const useGetRoute = (args: ArgsGetRoute) => {
   const { chainId: currentChain } = useActiveWeb3React()
   const chainId = customChain || currentChain
 
+  const [searchParams] = useSearchParams()
+
+  const feeAmount = searchParams.get('feeAmount') || ''
+  const chargeFeeBy = (searchParams.get('chargeFeeBy') as ChargeFeeBy) || ChargeFeeBy.NONE
+  const isInBps = searchParams.get('isInBps') || ''
+  const feeReceiver = searchParams.get('feeReceiver') || ''
+
+  const feeConfigFromUrl = useMemo(() => {
+    if (feeAmount && chargeFeeBy && isInBps && feeReceiver)
+      return {
+        feeAmount,
+        chargeFeeBy,
+        isInBps,
+        feeReceiver,
+      }
+    return null
+  }, [feeAmount, chargeFeeBy, isInBps, feeReceiver])
+
   const [trigger, _result] = routeApi.useLazyGetRouteQuery()
   const aggregatorDomain = useRouteApiDomain()
 
@@ -156,8 +175,7 @@ const useGetRoute = (args: ArgsGetRoute) => {
     const tokenOutAddress = getRouteTokenAddressParam(currencyOut)
 
     const swapFeeConfig = await getSwapFeeConfig(chainId, tokenInAddress, tokenOutAddress)
-
-    const feeConfigParams = getFeeConfigParams(swapFeeConfig, tokenInAddress, tokenOutAddress)
+    const feeConfigParams = feeConfigFromUrl || getFeeConfigParams(swapFeeConfig, tokenInAddress, tokenOutAddress)
 
     const params: GetRouteParams = {
       tokenIn: tokenInAddress,
@@ -196,6 +214,7 @@ const useGetRoute = (args: ArgsGetRoute) => {
     parsedAmount?.currency,
     parsedAmount?.quotient,
     triggerDebounced,
+    feeConfigFromUrl,
   ])
 
   return { fetcher, result }
diff --git a/src/components/SwapForm/index.tsx b/src/components/SwapForm/index.tsx
index cf2b33be39..4f8289124e 100644
--- a/src/components/SwapForm/index.tsx
+++ b/src/components/SwapForm/index.tsx
@@ -3,7 +3,7 @@ import { Trans } from '@lingui/macro'
 import { rgba } from 'polished'
 import { stringify } from 'querystring'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import { Box, Flex, Text } from 'rebass'
 import { parseGetRouteResponse } from 'services/route/utils'
@@ -81,6 +81,8 @@ export type SwapFormProps = {
 }
 
 const SwapForm: React.FC<SwapFormProps> = props => {
+  const { pathname } = useLocation()
+  const isPartnerSwap = pathname.startsWith(APP_PATHS.PARTNER_SWAP)
   const {
     hidden,
     currencyIn,
@@ -216,24 +218,26 @@ const SwapForm: React.FC<SwapFormProps> = props => {
               </Flex>
 
               <Flex sx={{ gap: '12px' }}>
-                <PriceAlertButton
-                  onClick={() =>
-                    navigate(
-                      `${APP_PATHS.PROFILE_MANAGE}${PROFILE_MANAGE_ROUTES.CREATE_ALERT}?${stringify({
-                        amount: typedValue || undefined,
-                        inputCurrency: currencyId(currencyIn, chainId),
-                        outputCurrency: currencyId(currencyOut, chainId),
-                      })}`,
-                    )
-                  }
-                >
-                  <Clock size={14} color={theme.subText} />
-                  {upToExtraSmall ? null : (
-                    <Text color={theme.subText} style={{ whiteSpace: 'nowrap' }}>
-                      <Trans>Price Alert</Trans>
-                    </Text>
-                  )}
-                </PriceAlertButton>
+                {!isPartnerSwap && (
+                  <PriceAlertButton
+                    onClick={() =>
+                      navigate(
+                        `${APP_PATHS.PROFILE_MANAGE}${PROFILE_MANAGE_ROUTES.CREATE_ALERT}?${stringify({
+                          amount: typedValue || undefined,
+                          inputCurrency: currencyId(currencyIn, chainId),
+                          outputCurrency: currencyId(currencyOut, chainId),
+                        })}`,
+                      )
+                    }
+                  >
+                    <Clock size={14} color={theme.subText} />
+                    {upToExtraSmall ? null : (
+                      <Text color={theme.subText} style={{ whiteSpace: 'nowrap' }}>
+                        <Trans>Price Alert</Trans>
+                      </Text>
+                    )}
+                  </PriceAlertButton>
+                )}
                 <ReverseTokenSelectionButton onClick={() => currencyIn && handleChangeCurrencyOut(currencyIn)} />
               </Flex>
             </AutoRow>
diff --git a/src/components/swapv2/LimitOrder/ListOrder/index.tsx b/src/components/swapv2/LimitOrder/ListOrder/index.tsx
index 6369499677..834cd4c34c 100644
--- a/src/components/swapv2/LimitOrder/ListOrder/index.tsx
+++ b/src/components/swapv2/LimitOrder/ListOrder/index.tsx
@@ -19,7 +19,7 @@ import SearchInput from 'components/SearchInput'
 import Select from 'components/Select'
 import SubscribeNotificationButton from 'components/SubscribeButton'
 import useRequestCancelOrder from 'components/swapv2/LimitOrder/ListOrder/useRequestCancelOrder'
-import { EMPTY_ARRAY, RTK_QUERY_TAGS, TRANSACTION_STATE_DEFAULT } from 'constants/index'
+import { APP_PATHS, EMPTY_ARRAY, RTK_QUERY_TAGS, TRANSACTION_STATE_DEFAULT } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import { useInvalidateTagLimitOrder } from 'hooks/useInvalidateTags'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
@@ -191,7 +191,8 @@ export default function ListLimitOrder() {
   const onSelectTab = (type: LimitOrderStatus) => {
     setOrderType(type)
     onReset()
-    navigate({ search: stringify(qs) }, { replace: true })
+    if (!window.location.pathname.includes(APP_PATHS.PARTNER_SWAP))
+      navigate({ search: stringify(qs) }, { replace: true })
   }
 
   const onChangeKeyword = (val: string) => {
@@ -293,7 +294,7 @@ export default function ListLimitOrder() {
   }, [totalOrderNotCancelling, orders, ordersUpdating])
 
   const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
-  const subscribeBtn = (
+  const subscribeBtn = !window.location.pathname.includes(APP_PATHS.PARTNER_SWAP) && (
     <SubscribeNotificationButton
       iconOnly={false}
       style={{ margin: upToSmall ? 0 : '12px 12px 0px 12px' }}
diff --git a/src/components/swapv2/LimitOrder/index.tsx b/src/components/swapv2/LimitOrder/index.tsx
index 39950ec025..9fef316119 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 { TRANSACTION_STATE_DEFAULT } from 'constants/index'
+import { APP_PATHS, TRANSACTION_STATE_DEFAULT } from 'constants/index'
 import useSyncTokenSymbolToUrl from 'hooks/useSyncTokenSymbolToUrl'
 import { useLimitActionHandlers, useLimitState } from 'state/limit/hooks'
 import { TransactionFlowState } from 'types/TransactionFlowState'
@@ -20,7 +20,8 @@ function LimitOrderComp({ setIsSelectCurrencyManual, isSelectCurrencyManual }: P
 
   const { currencyIn, currencyOut } = useLimitState()
 
-  useSyncTokenSymbolToUrl(currencyIn, currencyOut, onSelectPair, isSelectCurrencyManual)
+  const isPartnerSwap = window.location.pathname.startsWith(APP_PATHS.PARTNER_SWAP)
+  useSyncTokenSymbolToUrl(currencyIn, currencyOut, onSelectPair, isSelectCurrencyManual, isPartnerSwap)
 
   const [showTutorial, setShowTutorial] = useState(!localStorage.getItem(TutorialKeys.SHOWED_LO_GUIDE))
 
diff --git a/src/components/swapv2/SwapSettingsPanel/index.tsx b/src/components/swapv2/SwapSettingsPanel/index.tsx
index 1dbfed5979..38b7d9c9e2 100644
--- a/src/components/swapv2/SwapSettingsPanel/index.tsx
+++ b/src/components/swapv2/SwapSettingsPanel/index.tsx
@@ -10,6 +10,7 @@ import { RowBetween, RowFixed } from 'components/Row'
 import Toggle from 'components/Toggle'
 import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
 import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant'
+import { APP_PATHS } from 'constants/index'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
@@ -87,6 +88,8 @@ const SettingsPanel: React.FC<Props> = ({
   const containerRef = useRef<HTMLDivElement>(null)
   useOnClickOutside([containerRef, swapActionsRef], () => !showConfirmation && onBack())
 
+  const isPartnerSwap = window.location.pathname.includes(APP_PATHS.PARTNER_SWAP)
+
   return (
     <Box width="100%" className={className} id={TutorialIds.TRADING_SETTING_CONTENT} ref={containerRef}>
       <Flex width={'100%'} flexDirection={'column'} marginBottom="4px">
@@ -138,26 +141,30 @@ const SettingsPanel: React.FC<Props> = ({
               <Trans>Display Settings</Trans>
             </Text>
             <AutoColumn gap="md">
-              <RowBetween>
-                <RowFixed>
-                  <TextDashed fontSize={12} fontWeight={400} color={theme.subText} underlineColor={theme.border}>
-                    <MouseoverTooltip text={<Trans>Turn on to display KyberAI banner.</Trans>} placement="right">
-                      <Trans>KyberAI Banner</Trans>
-                    </MouseoverTooltip>
-                  </TextDashed>
-                </RowFixed>
-                <Toggle isActive={isShowKyberAIBanner} toggle={toggleKyberAIBanner} />
-              </RowBetween>
-              <RowBetween>
-                <RowFixed>
-                  <TextDashed fontSize={12} fontWeight={400} color={theme.subText} underlineColor={theme.border}>
-                    <MouseoverTooltip text={<Trans>Turn on to display live chart.</Trans>} placement="right">
-                      <Trans>Live Chart</Trans>
-                    </MouseoverTooltip>
-                  </TextDashed>
-                </RowFixed>
-                <Toggle isActive={isShowLiveChart} toggle={handleToggleLiveChart} />
-              </RowBetween>
+              {!isPartnerSwap && (
+                <RowBetween>
+                  <RowFixed>
+                    <TextDashed fontSize={12} fontWeight={400} color={theme.subText} underlineColor={theme.border}>
+                      <MouseoverTooltip text={<Trans>Turn on to display KyberAI banner.</Trans>} placement="right">
+                        <Trans>KyberAI Banner</Trans>
+                      </MouseoverTooltip>
+                    </TextDashed>
+                  </RowFixed>
+                  <Toggle isActive={isShowKyberAIBanner} toggle={toggleKyberAIBanner} />
+                </RowBetween>
+              )}
+              {!isPartnerSwap && (
+                <RowBetween>
+                  <RowFixed>
+                    <TextDashed fontSize={12} fontWeight={400} color={theme.subText} underlineColor={theme.border}>
+                      <MouseoverTooltip text={<Trans>Turn on to display live chart.</Trans>} placement="right">
+                        <Trans>Live Chart</Trans>
+                      </MouseoverTooltip>
+                    </TextDashed>
+                  </RowFixed>
+                  <Toggle isActive={isShowLiveChart} toggle={handleToggleLiveChart} />
+                </RowBetween>
+              )}
               {(isSwapPage || isCrossChainPage) && (
                 <>
                   <RowBetween>
diff --git a/src/constants/index.ts b/src/constants/index.ts
index f3720bdf37..eeed252045 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -205,6 +205,7 @@ export const AGGREGATOR_WAITING_TIME = 1700 // 1700 means that we at least show
 export const APP_PATHS = {
   ABOUT: '/about',
   SWAP: '/swap',
+  PARTNER_SWAP: '/partner-swap',
   CAMPAIGN: '/campaigns',
   FIND_POOL: '/find',
   POOLS: '/pools',
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 7436172284..3aee2286de 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -50,6 +50,7 @@ const Consent = lazy(() => import('./Oauth/Consent'))
 const ElasticSwap = lazy(() => import('./ElasticSwap'))
 const SwapV2 = lazy(() => import('./SwapV2'))
 const SwapV3 = lazy(() => import('./SwapV3'))
+const PartnerSwap = lazy(() => import('./PartnerSwap'))
 // const Bridge = lazy(() => import('./Bridge'))
 const Pools = lazy(() => import('./Pools'))
 const MyPool = lazy(() => import('./MyPool'))
@@ -247,7 +248,7 @@ export default function App() {
   const theme = useTheme()
 
   useGlobalMixpanelEvents()
-  const showFooter = !pathname.includes(APP_PATHS.ABOUT)
+  const showFooter = !pathname.includes(APP_PATHS.ABOUT) && !pathname.includes(APP_PATHS.PARTNER_SWAP)
   const [holidayMode] = useHolidayMode()
 
   const snowflake = new Image()
@@ -319,6 +320,7 @@ export default function App() {
                   <Routes>
                     {/* From react-router-dom@6.5.0, :fromCurrency-to-:toCurrency no long works, need to manually parse the params */}
                     <Route path={`${APP_PATHS.SWAP}/:network/:currency?`} element={<SwapPage />} />
+                    <Route path={`${APP_PATHS.PARTNER_SWAP}`} element={<PartnerSwap />} />
                     {CHAINS_SUPPORT_CROSS_CHAIN.includes(chainId) && (
                       <Route path={`${APP_PATHS.CROSS_CHAIN}`} element={<SwapV3 />} />
                     )}
@@ -437,6 +439,7 @@ export default function App() {
                 </Web3ReactManager>
               </BodyWrapper>
               {showFooter && <Footer />}
+              {!showFooter && <div style={{ marginBottom: '4rem' }} />}
 
               <TruesightFooter />
             </Suspense>
diff --git a/src/pages/CrossChain/TransfersHistory/index.tsx b/src/pages/CrossChain/TransfersHistory/index.tsx
index 6003430af3..57ce2677eb 100644
--- a/src/pages/CrossChain/TransfersHistory/index.tsx
+++ b/src/pages/CrossChain/TransfersHistory/index.tsx
@@ -6,6 +6,7 @@ import styled from 'styled-components'
 
 import { RowBetween } from 'components/Row'
 import SubscribeNotificationButton from 'components/SubscribeButton'
+import { APP_PATHS } from 'constants/index'
 import { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import useTheme from 'hooks/useTheme'
@@ -35,10 +36,12 @@ const BridgeHistory: React.FC<Props> = ({ className }) => {
     <div className={className}>
       <RowBetween>
         <TabSelector activeTab={activeTab} setTab={onClickTab} isShowTradeRoutes={isShowTradeRoutes} />
-        <SubscribeNotificationButton
-          subscribeTooltip={t`Subscribe to receive notifications on your cross-chain transaction.`}
-          trackingEvent={MIXPANEL_TYPE.CROSS_CHAIN_CLICK_SUBSCRIBE}
-        />
+        {!window.location.pathname.includes(APP_PATHS.PARTNER_SWAP) && (
+          <SubscribeNotificationButton
+            subscribeTooltip={t`Subscribe to receive notifications on your cross-chain transaction.`}
+            trackingEvent={MIXPANEL_TYPE.CROSS_CHAIN_CLICK_SUBSCRIBE}
+          />
+        )}
       </RowBetween>
       {activeTab === CrossChainTab.HISTORY || !isShowTradeRoutes ? (
         <HistoryCrossChain />
diff --git a/src/pages/PartnerSwap/index.tsx b/src/pages/PartnerSwap/index.tsx
new file mode 100644
index 0000000000..8c5a7b7ed6
--- /dev/null
+++ b/src/pages/PartnerSwap/index.tsx
@@ -0,0 +1,298 @@
+import { Currency } from '@kyberswap/ks-sdk-core'
+import { Trans } 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'
+import { usePreviousDistinct } from 'react-use'
+import { Flex, Text } from 'rebass'
+import styled from 'styled-components'
+
+import { ReactComponent as RoutingIcon } from 'assets/svg/routing-icon.svg'
+import Banner from 'components/Banner'
+import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
+import TokenWarningModal from 'components/TokenWarningModal'
+import GasPriceTrackerPanel from 'components/swapv2/GasPriceTrackerPanel'
+import LimitOrder from 'components/swapv2/LimitOrder'
+import ListLimitOrder from 'components/swapv2/LimitOrder/ListOrder'
+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 {
+  Container,
+  InfoComponentsWrapper,
+  PageWrapper,
+  RoutesWrapper,
+  SwapFormWrapper,
+  highlight,
+} from 'components/swapv2/styleds'
+import { SUPPORTED_NETWORKS } from 'constants/networks'
+import { useActiveWeb3React } from 'hooks'
+import { useAllTokens, useIsLoadedTokenDefault } 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 { Field } from 'state/swap/actions'
+import { useDefaultsFromURLSearch, useSwapActionHandlers } from 'state/swap/hooks'
+import { useShowTradeRoutes } from 'state/user/hooks'
+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[] }) => {
+  return children.filter(Boolean).length ? <InfoComponentsWrapper>{children}</InfoComponentsWrapper> : null
+}
+
+export const AppBodyWrapped = styled(BodyWrapper)`
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+  padding: 16px;
+  margin-top: 0;
+
+  &[data-highlight='true'] {
+    animation: ${({ theme }) => highlight(theme)} 2s 2 alternate ease-in-out;
+  }
+`
+
+export const SwitchLocaleLinkWrapper = styled.div`
+  margin-bottom: 30px;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+  margin-bottom: 0px;
+`}
+`
+
+export const RoutingIconWrapper = styled(RoutingIcon)`
+  height: 27px;
+  width: 27px;
+  margin-right: 10px;
+  path {
+    fill: ${({ theme }) => theme.subText} !important;
+  }
+`
+
+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 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(
+    (tab: TAB) => {
+      searchParams.set('tab', tab)
+      setSearchParams(searchParams)
+    },
+    [searchParams, setSearchParams],
+  )
+
+  const navigate = useNavigate()
+  const clientId = searchParams.get('clientId')
+  useEffect(() => {
+    if (!clientId) navigate('/')
+  }, [clientId, navigate])
+
+  const isSetting = isSettingTab(activeTab)
+  const previousTab = usePreviousDistinct(!isSetting ? activeTab : undefined)
+
+  const isSwapPage = activeTab === TAB.SWAP || (previousTab === TAB.SWAP && isSetting)
+  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 handleTypeInput = useCallback(
+    (value: string) => {
+      onUserInput(Field.INPUT, value)
+    },
+    [onUserInput],
+  )
+
+  // 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)
+      }
+    },
+    [isLimitPage, onSelectPairLimit, showingPairSuggestionImport, handleDismissTokenWarning],
+  )
+
+  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)
+    },
+    [handleTypeInput, onCurrencySelection, onSelectPairLimit, isLimitPage],
+  )
+
+  const isLoadedTokenDefault = useIsLoadedTokenDefault()
+
+  const onBackToSwapTab = () => setActiveTab(previousTab || TAB.SWAP)
+
+  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)
+
+  return (
+    <>
+      <TokenWarningModal
+        isOpen={isShowModalImportToken}
+        tokens={importTokensNotInDefault}
+        onConfirm={handleConfirmTokenWarning}
+      />
+      <PageWrapper>
+        <Banner />
+        <Container>
+          <SwapFormWrapper isShowTutorial={false}>
+            <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}
+                />
+              )}
+              {activeTab === TAB.INFO && <TokenInfoTab currencies={currencies} onBack={onBackToSwapTab} />}
+              {activeTab === TAB.SETTINGS && (
+                <SettingsPanel
+                  isCrossChainPage={isCrossChainPage}
+                  isLimitOrder={isLimitPage}
+                  isSwapPage={isSwapPage}
+                  onBack={onBackToSwapTab}
+                  onClickLiquiditySources={() => setActiveTab(TAB.LIQUIDITY_SOURCES)}
+                  onClickGasPriceTracker={() => setActiveTab(TAB.GAS_PRICE_TRACKER)}
+                  swapActionsRef={swapActionsRef}
+                />
+              )}
+              {activeTab === TAB.GAS_PRICE_TRACKER && (
+                <GasPriceTrackerPanel onBack={() => setActiveTab(TAB.SETTINGS)} />
+              )}
+              {activeTab === TAB.LIQUIDITY_SOURCES && (
+                <LiquiditySourcesPanel onBack={() => setActiveTab(TAB.SETTINGS)} />
+              )}
+              {activeTab === TAB.LIMIT && (
+                <LimitOrder
+                  isSelectCurrencyManual={isSelectCurrencyManually}
+                  setIsSelectCurrencyManual={setIsSelectCurrencyManually}
+                />
+              )}
+              {isCrossChainPage && <CrossChain visible={activeTab === TAB.CROSS_CHAIN} />}
+            </AppBodyWrapped>
+            {isCrossChainPage && <CrossChainLink isBridge />}
+          </SwapFormWrapper>
+
+          <InfoComponents>
+            {isShowTradeRoutes && isSwapPage && (
+              <RoutesWrapper isOpenChart={false}>
+                <Flex flexDirection="column" width="100%">
+                  <Flex alignItems={'center'}>
+                    <RoutingIconWrapper />
+                    <Text fontSize={20} fontWeight={500} color={theme.subText}>
+                      <Trans>Your trade route</Trans>
+                    </Text>
+                  </Flex>
+                  <Suspense
+                    fallback={
+                      <Skeleton
+                        height="100px"
+                        baseColor={theme.background}
+                        highlightColor={theme.buttonGray}
+                        borderRadius="1rem"
+                      />
+                    }
+                  >
+                    <TradeRouting
+                      tradeComposition={tradeRouteComposition}
+                      currencyIn={currencyIn}
+                      currencyOut={currencyOut}
+                      inputAmount={routeSummary?.parsedAmountIn}
+                      outputAmount={routeSummary?.parsedAmountOut}
+                    />
+                  </Suspense>
+                </Flex>
+              </RoutesWrapper>
+            )}
+            {isLimitPage && <ListLimitOrder />}
+            {isCrossChainPage && <CrossChainTransfersHistory />}
+          </InfoComponents>
+        </Container>
+        <Flex justifyContent="center">
+          <SwitchLocaleLinkWrapper>
+            <SwitchLocaleLink />
+          </SwitchLocaleLinkWrapper>
+        </Flex>
+      </PageWrapper>
+    </>
+  )
+}
diff --git a/src/pages/SwapV3/Header.tsx b/src/pages/SwapV3/Header.tsx
index 6cf5e23fe8..9427f5c2b0 100644
--- a/src/pages/SwapV3/Header.tsx
+++ b/src/pages/SwapV3/Header.tsx
@@ -1,6 +1,6 @@
 import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
-import { Dispatch, RefObject, SetStateAction, useState } from 'react'
+import { RefObject, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components'
@@ -27,7 +27,7 @@ export default function Header({
   swapActionsRef,
 }: {
   activeTab: TAB
-  setActiveTab: Dispatch<SetStateAction<TAB>>
+  setActiveTab: (tab: TAB) => void
   swapActionsRef: RefObject<HTMLDivElement>
 }) {
   const theme = useTheme()
@@ -35,14 +35,14 @@ export default function Header({
   const [isShowDegenBanner, setShowDegenBanner] = useState(true)
   const { pathname } = useLocation()
 
-  const isLimitPage = pathname.startsWith(APP_PATHS.LIMIT)
-  const isSwapPage = pathname.startsWith(APP_PATHS.SWAP)
+  const isLimitPage = pathname.startsWith(APP_PATHS.LIMIT) || activeTab === TAB.LIMIT
+  const isSwapPage = pathname.startsWith(APP_PATHS.SWAP) || activeTab == TAB.SWAP
 
   return (
     <>
       <ColumnCenter gap="sm">
         <RowBetween>
-          <Tabs activeTab={activeTab} />
+          <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
           <HeaderRightMenu activeTab={activeTab} setActiveTab={setActiveTab} swapActionsRef={swapActionsRef} />
         </RowBetween>
         <RowBetween>
diff --git a/src/pages/SwapV3/HeaderRightMenu.tsx b/src/pages/SwapV3/HeaderRightMenu.tsx
index db76781fec..c0dce070e5 100644
--- a/src/pages/SwapV3/HeaderRightMenu.tsx
+++ b/src/pages/SwapV3/HeaderRightMenu.tsx
@@ -1,5 +1,5 @@
 import { Trans, t } from '@lingui/macro'
-import { Dispatch, RefObject, SetStateAction, useState } from 'react'
+import { RefObject, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { MoreHorizontal } from 'react-feather'
 import { useLocation } from 'react-router-dom'
@@ -64,7 +64,7 @@ export default function HeaderRightMenu({
   swapActionsRef,
 }: {
   activeTab: TAB
-  setActiveTab: Dispatch<SetStateAction<TAB>>
+  setActiveTab: (tab: TAB) => void
   swapActionsRef: RefObject<HTMLDivElement>
 }) {
   const theme = useTheme()
diff --git a/src/pages/SwapV3/PopulatedSwapForm.tsx b/src/pages/SwapV3/PopulatedSwapForm.tsx
index 8d4821319b..4b30877ddf 100644
--- a/src/pages/SwapV3/PopulatedSwapForm.tsx
+++ b/src/pages/SwapV3/PopulatedSwapForm.tsx
@@ -1,7 +1,9 @@
 import { Currency } from '@kyberswap/ks-sdk-core'
 import { useCallback, useMemo } from 'react'
+import { useLocation, useSearchParams } from 'react-router-dom'
 
 import SwapForm, { SwapFormProps } from 'components/SwapForm'
+import { APP_PATHS } from 'constants/index'
 import useSyncTokenSymbolToUrl from 'hooks/useSyncTokenSymbolToUrl'
 import useUpdateSlippageInStableCoinSwap from 'pages/SwapV3/useUpdateSlippageInStableCoinSwap'
 import { useAppSelector } from 'state/hooks'
@@ -43,21 +45,39 @@ const PopulatedSwapForm: React.FC<Props> = ({
 
   useUpdateSlippageInStableCoinSwap()
 
-  useSyncTokenSymbolToUrl(currencyIn, currencyOut, onSelectSuggestedPair, isSelectTokenManually)
+  const { pathname } = useLocation()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const isPartnerSwap = pathname.startsWith(APP_PATHS.PARTNER_SWAP)
+  useSyncTokenSymbolToUrl(currencyIn, currencyOut, onSelectSuggestedPair, isSelectTokenManually, isPartnerSwap)
   useResetCurrenciesOnRemoveImportedTokens(currencyIn, currencyOut, onResetSelectCurrency)
 
+  const outId =
+    searchParams.get('outputCurrency') || (currencyOut?.isNative ? currencyOut.symbol : currencyOut?.wrapped.address)
+  const inId =
+    searchParams.get('inputCurrency') || (currencyIn?.isNative ? currencyIn.symbol : currencyIn?.wrapped.address)
+
   const onChangeCurrencyIn = useCallback(
     (c: Currency) => {
-      onCurrencySelection(Field.INPUT, c)
+      if (isPartnerSwap) {
+        const value = c.isNative ? c.symbol || c.wrapped.address : c.wrapped.address
+        if (value === outId) searchParams.set('outputCurrency', inId || '')
+        searchParams.set('inputCurrency', value)
+        setSearchParams(searchParams)
+      } else onCurrencySelection(Field.INPUT, c)
     },
-    [onCurrencySelection],
+    [searchParams, setSearchParams, isPartnerSwap, onCurrencySelection, inId, outId],
   )
 
   const onChangeCurrencyOut = useCallback(
     (c: Currency) => {
-      onCurrencySelection(Field.OUTPUT, c)
+      if (isPartnerSwap) {
+        const value = c.isNative ? c.symbol || c.wrapped.address : c.wrapped.address
+        if (value === inId) searchParams.set('inputCurrency', outId || '')
+        searchParams.set('outputCurrency', value)
+        setSearchParams(searchParams)
+      } else onCurrencySelection(Field.OUTPUT, c)
     },
-    [onCurrencySelection],
+    [searchParams, setSearchParams, isPartnerSwap, onCurrencySelection, inId, outId],
   )
 
   const props: SwapFormProps = {
diff --git a/src/pages/SwapV3/Tabs/LimitTab.tsx b/src/pages/SwapV3/Tabs/LimitTab.tsx
index 8cc91e251a..a1ff2a53d2 100644
--- a/src/pages/SwapV3/Tabs/LimitTab.tsx
+++ b/src/pages/SwapV3/Tabs/LimitTab.tsx
@@ -24,8 +24,9 @@ const WarningBadge = styled.span`
 
 type Props = {
   onClick: () => void
+  active?: boolean
 }
-export default function LimitTab({ onClick }: Props) {
+export default function LimitTab({ onClick, active }: Props) {
   const { chainId, account } = useActiveWeb3React()
   const { pathname } = useLocation()
 
@@ -48,7 +49,7 @@ export default function LimitTab({ onClick }: Props) {
       id="limit-button"
       data-testid="limit-button"
       onClick={onClick}
-      isActive={isLimitPage}
+      isActive={active || isLimitPage}
       style={{ display: 'flex', gap: '4px', fontSize: '20px', fontWeight: '500' }}
     >
       <Trans>Limit</Trans>{' '}
diff --git a/src/pages/SwapV3/Tabs/index.tsx b/src/pages/SwapV3/Tabs/index.tsx
index a2f2f52f39..ce0085161e 100644
--- a/src/pages/SwapV3/Tabs/index.tsx
+++ b/src/pages/SwapV3/Tabs/index.tsx
@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { stringify } from 'querystring'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components'
 
@@ -66,8 +66,9 @@ export const Tab = styled(ButtonEmpty)<{ isActive: boolean }>`
 
 type Props = {
   activeTab: TAB
+  setActiveTab: (tab: TAB) => void
 }
-export default function Tabs({ activeTab }: Props) {
+export default function Tabs({ activeTab, setActiveTab }: Props) {
   const navigateFn = useNavigate()
   const { networkInfo, chainId } = useActiveWeb3React()
   const qs = useParsedQueryString<{
@@ -77,12 +78,24 @@ export default function Tabs({ activeTab }: Props) {
 
   const { pathname } = useLocation()
 
-  const isSwapPage = pathname.startsWith(APP_PATHS.SWAP)
-  const isCrossChainPage = pathname.startsWith(APP_PATHS.CROSS_CHAIN)
+  const isParnerSwap = pathname.startsWith(APP_PATHS.PARTNER_SWAP)
+
+  const [searchParams] = useSearchParams()
+  let features = (searchParams.get('features') || '')
+    .split(',')
+    .filter(item => [TAB.SWAP, TAB.LIMIT, TAB.CROSS_CHAIN].includes(item))
+  if (!features.length) features = [TAB.SWAP, TAB.LIMIT, TAB.CROSS_CHAIN]
+
+  const show = (tab: TAB) => (isParnerSwap ? features.includes(tab) : true)
+
   const onClickTab = (tab: TAB) => {
     if (activeTab === tab) {
       return
     }
+    if (isParnerSwap) {
+      setActiveTab(tab)
+      return
+    }
 
     const { inputCurrency, outputCurrency, ...newQs } = qs
     navigateFn({
@@ -97,14 +110,22 @@ export default function Tabs({ activeTab }: Props) {
   return (
     <TabContainer>
       <TabWrapper>
-        <Tab onClick={() => onClickTab(TAB.SWAP)} isActive={isSwapPage}>
-          <Text fontSize={20} fontWeight={500}>
-            <Trans>Swap</Trans>
-          </Text>
-        </Tab>
-        {isSupportLimitOrder(chainId) && <LimitTab onClick={() => onClickTab(TAB.LIMIT)} />}
-        {CHAINS_SUPPORT_CROSS_CHAIN.includes(chainId) && (
-          <Tab onClick={() => onClickTab(TAB.CROSS_CHAIN)} isActive={isCrossChainPage} data-testid="cross-chain-tab">
+        {show(TAB.SWAP) && (
+          <Tab onClick={() => onClickTab(TAB.SWAP)} isActive={TAB.SWAP === activeTab}>
+            <Text fontSize={20} fontWeight={500}>
+              <Trans>Swap</Trans>
+            </Text>
+          </Tab>
+        )}
+        {show(TAB.LIMIT) && isSupportLimitOrder(chainId) && (
+          <LimitTab onClick={() => onClickTab(TAB.LIMIT)} active={activeTab === TAB.LIMIT} />
+        )}
+        {show(TAB.CROSS_CHAIN) && CHAINS_SUPPORT_CROSS_CHAIN.includes(chainId) && (
+          <Tab
+            onClick={() => onClickTab(TAB.CROSS_CHAIN)}
+            isActive={activeTab === TAB.CROSS_CHAIN}
+            data-testid="cross-chain-tab"
+          >
             <Text fontSize={20} fontWeight={500}>
               <Trans>Cross-Chain</Trans>
             </Text>
diff --git a/src/pages/SwapV3/index.tsx b/src/pages/SwapV3/index.tsx
index cb2648154e..8f99cfa059 100644
--- a/src/pages/SwapV3/index.tsx
+++ b/src/pages/SwapV3/index.tsx
@@ -72,6 +72,9 @@ export enum TAB {
   CROSS_CHAIN = 'cross_chain',
 }
 
+export const isSettingTab = (tab: TAB) =>
+  [TAB.INFO, TAB.SETTINGS, TAB.GAS_PRICE_TRACKER, TAB.LIQUIDITY_SOURCES].includes(tab)
+
 export const AppBodyWrapped = styled(BodyWrapper)`
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
   padding: 16px;
diff --git a/src/pages/SwapV3/useCurrenciesByPage.ts b/src/pages/SwapV3/useCurrenciesByPage.ts
index 7ea99c705d..654298ead6 100644
--- a/src/pages/SwapV3/useCurrenciesByPage.ts
+++ b/src/pages/SwapV3/useCurrenciesByPage.ts
@@ -13,7 +13,7 @@ import { currencyId } from 'utils/currencyId'
 const useCurrenciesByPage = () => {
   const { pathname } = useLocation()
   const { networkInfo, chainId } = useActiveWeb3React()
-  const isSwapPage = pathname.startsWith(APP_PATHS.SWAP)
+  const isSwapPage = pathname.startsWith(APP_PATHS.SWAP) || pathname.startsWith(APP_PATHS.PARTNER_SWAP)
   const isCrossChainPage = pathname.startsWith(APP_PATHS.CROSS_CHAIN)
 
   const currencyInSwap = useInputCurrency()
diff --git a/src/services/route/index.ts b/src/services/route/index.ts
index 45ba974cc5..7103920500 100644
--- a/src/services/route/index.ts
+++ b/src/services/route/index.ts
@@ -16,14 +16,15 @@ const routeApi = createApi({
         url: string
         params: GetRouteParams
         authentication: boolean
+        clientId?: string
       }
     >({
-      query: ({ params, url, authentication }) => ({
+      query: ({ params, url, authentication, clientId }) => ({
         url,
         params,
         authentication,
         headers: {
-          'x-client-id': 'kyberswap',
+          'x-client-id': clientId || 'kyberswap',
         },
       }),
     }),
@@ -38,7 +39,7 @@ const routeApi = createApi({
         signal,
         authentication,
         headers: {
-          'x-client-id': 'kyberswap',
+          'x-client-id': payload.source || 'kyberswap',
         },
       }),
     }),
diff --git a/src/services/route/types/buildRoute.ts b/src/services/route/types/buildRoute.ts
index 5479a6605f..36b209d31f 100644
--- a/src/services/route/types/buildRoute.ts
+++ b/src/services/route/types/buildRoute.ts
@@ -6,7 +6,7 @@ export type BuildRoutePayload = {
   slippageTolerance: number
   sender: string
   recipient: string
-  source: 'kyberswap'
+  source: string
   skipSimulateTx: boolean
   permit?: string
 }
diff --git a/src/services/route/utils.ts b/src/services/route/utils.ts
index b580799382..1e32415680 100644
--- a/src/services/route/utils.ts
+++ b/src/services/route/utils.ts
@@ -25,7 +25,9 @@ const calculateFee = (
     parseUnits(routeSummary.extraFee.feeAmount, RESERVE_USD_DECIMALS).toString(),
     JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(RESERVE_USD_DECIMALS)),
   ).divide(BIPS_BASE)
-  const feeCurrencyAmount = currencyAmountToTakeFee.multiply(feeAmountFraction)
+  const feeCurrencyAmount = routeSummary.extraFee.isInBps
+    ? currencyAmountToTakeFee.multiply(feeAmountFraction)
+    : CurrencyAmount.fromRawAmount(currencyAmountToTakeFee.currency, routeSummary.extraFee.feeAmount)
 
   const feeAmountUsd = routeSummary.extraFee.feeAmountUsd
   return {
diff --git a/src/state/swap/hooks.ts b/src/state/swap/hooks.ts
index 1e2022a95f..03677c7de2 100644
--- a/src/state/swap/hooks.ts
+++ b/src/state/swap/hooks.ts
@@ -373,7 +373,11 @@ export const useDefaultsFromURLSearch = ():
       return
     }
 
-    const parsed = queryParametersToSwapState(parsedQs, chainId, refPathname.current.startsWith(APP_PATHS.SWAP))
+    const parsed = queryParametersToSwapState(
+      parsedQs,
+      chainId,
+      refPathname.current.startsWith(APP_PATHS.SWAP) || refPathname.current.startsWith(APP_PATHS.PARTNER_SWAP),
+    )
 
     const outputCurrencyAddress = DEFAULT_OUTPUT_TOKEN_BY_CHAIN[chainId]?.address || ''
 
diff --git a/src/utils/fee.ts b/src/utils/fee.ts
index daba1d412a..6fb43a279d 100644
--- a/src/utils/fee.ts
+++ b/src/utils/fee.ts
@@ -36,7 +36,10 @@ export const calculateFeeFromBuildData = (
     JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(RESERVE_USD_DECIMALS)),
   ).divide(BIPS_BASE)
 
-  const fee = currencyAmountToTakeFee.multiply(feeAmountFraction).toSignificant(RESERVE_USD_DECIMALS)
+  const fee = routeSummary.extraFee.isInBps
+    ? currencyAmountToTakeFee.multiply(feeAmountFraction).toSignificant(RESERVE_USD_DECIMALS)
+    : CurrencyAmount.fromRawAmount(currencyAmountToTakeFee.currency, routeSummary.extraFee.feeAmount)
+
   const feeUsd = buildData.feeUsd
 
   return {