Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Partner swap #2335

Merged
merged 14 commits into from
Oct 30, 2023
15 changes: 14 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
94 changes: 56 additions & 38 deletions src/components/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -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 = (
Expand All @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion src/components/SwapForm/SlippageSettingGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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' }}>
Expand Down
8 changes: 5 additions & 3 deletions src/components/SwapForm/SwapModal/SwapDetails/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -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}>
Expand Down
23 changes: 15 additions & 8 deletions src/components/SwapForm/TradeSummary.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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'
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand All @@ -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 (
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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}>
Expand Down
6 changes: 5 additions & 1 deletion src/components/SwapForm/hooks/useBuildRoute.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -58,7 +61,7 @@ const useBuildRoute = (args: Args) => {
slippageTolerance: slippage,
sender: account,
recipient: to || account,
source: 'kyberswap',
source: clientId || 'kyberswap',
skipSimulateTx: false,
permit,
}
Expand Down Expand Up @@ -90,6 +93,7 @@ const useBuildRoute = (args: Args) => {
}
}
}, [
clientId,
account,
aggregatorDomain,
chainId,
Expand Down
23 changes: 21 additions & 2 deletions src/components/SwapForm/hooks/useGetRoute.ts
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -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()

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -196,6 +214,7 @@ const useGetRoute = (args: ArgsGetRoute) => {
parsedAmount?.currency,
parsedAmount?.quotient,
triggerDebounced,
feeConfigFromUrl,
])

return { fetcher, result }
Expand Down
Loading
Loading