Merge remote-tracking branch 'origin/main' into support-video-ann

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.

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,59 +190,74 @@ 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>
         ) : (
           <>
             <HeaderElement style={{ justifyContent: 'flex-start' }}>
               <SelectNetwork />
               <SelectWallet />
             </HeaderElement>
-            <HeaderElement style={{ justifyContent: 'flex-end' }}>
-              {menu}
-              <SignWallet />
-            </HeaderElement>
+            {!isPartnerSwap && (
+              <HeaderElement style={{ justifyContent: 'flex-end' }}>
+                {menu}
+                <SignWallet />
+              </HeaderElement>
+            )}
           </>
         )}
       </HeaderControls>

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

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

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

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,

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 }