From 9ebb87eb636e638d875dbd5ba994d01222b1b01d Mon Sep 17 00:00:00 2001 From: WindzLord Date: Fri, 8 Dec 2023 15:01:09 +0700 Subject: [PATCH 1/8] Receive "enableTip" --- src/components/SwapForm/hooks/useGetRoute.ts | 8 +++++--- src/pages/PartnerSwap/index.tsx | 2 +- src/services/route/types/getRoute.ts | 11 +++-------- src/types/route.ts | 2 +- 4 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/SwapForm/hooks/useGetRoute.ts b/src/components/SwapForm/hooks/useGetRoute.ts index bd4f9bcea9..9e7e86bea6 100644 --- a/src/components/SwapForm/hooks/useGetRoute.ts +++ b/src/components/SwapForm/hooks/useGetRoute.ts @@ -84,19 +84,21 @@ const useGetRoute = (args: ArgsGetRoute) => { const feeAmount = searchParams.get('feeAmount') || '' const chargeFeeBy = (searchParams.get('chargeFeeBy') as ChargeFeeBy) || ChargeFeeBy.NONE + const enableTip = searchParams.get('enableTip') || '' const isInBps = searchParams.get('isInBps') || '' const feeReceiver = searchParams.get('feeReceiver') || '' const feeConfigFromUrl = useMemo(() => { - if (feeAmount && chargeFeeBy && isInBps && feeReceiver) + if (feeAmount && chargeFeeBy && (enableTip || isInBps) && feeReceiver) return { feeAmount, chargeFeeBy, - isInBps, + enableTip, + isInBps: enableTip ? '1' : isInBps, feeReceiver, } return null - }, [feeAmount, chargeFeeBy, isInBps, feeReceiver]) + }, [feeAmount, chargeFeeBy, enableTip, isInBps, feeReceiver]) const [trigger, _result] = routeApi.useLazyGetRouteQuery() const aggregatorDomain = useRouteApiDomain() diff --git a/src/pages/PartnerSwap/index.tsx b/src/pages/PartnerSwap/index.tsx index 3ebd814119..b7857f30b9 100644 --- a/src/pages/PartnerSwap/index.tsx +++ b/src/pages/PartnerSwap/index.tsx @@ -87,7 +87,7 @@ export const RoutingIconWrapper = styled(RoutingIcon)` } ` -export default function Swap() { +export default function PartnerSwap() { const { account, chainId: walletChainId } = useActiveWeb3React() const { changeNetwork } = useChangeNetwork() const [searchParams, setSearchParams] = useSearchParams() diff --git a/src/services/route/types/getRoute.ts b/src/services/route/types/getRoute.ts index 46b054b0d4..6a39fa7e0d 100644 --- a/src/services/route/types/getRoute.ts +++ b/src/services/route/types/getRoute.ts @@ -1,4 +1,4 @@ -import { ChargeFeeBy, Route } from 'types/route' +import { ChargeFeeBy, ExtraFeeConfig, Route } from 'types/route' export type GetRouteParams = { tokenIn: string @@ -12,6 +12,7 @@ export type GetRouteParams = { gasPrice?: string feeAmount?: string chargeFeeBy?: ChargeFeeBy + enableTip?: string isInBps?: string feeReceiver?: string debug?: string @@ -31,13 +32,7 @@ export type RouteSummary = { gasUsd: string gasPrice: string - extraFee: { - feeAmount: string - chargeFeeBy: ChargeFeeBy - isInBps: boolean - feeReceiver: string - feeAmountUsd: string - } + extraFee: ExtraFeeConfig route: Route[][] } diff --git a/src/types/route.ts b/src/types/route.ts index bbd86f7758..6d36706083 100644 --- a/src/types/route.ts +++ b/src/types/route.ts @@ -22,7 +22,7 @@ export enum ChargeFeeBy { NONE = '', } -type ExtraFeeConfig = { +export type ExtraFeeConfig = { feeAmount: string feeAmountUsd: string chargeFeeBy: ChargeFeeBy From 6b165efa866862ac01dac0bb6068d08248d92eeb Mon Sep 17 00:00:00 2001 From: WindzLord Date: Fri, 8 Dec 2023 16:09:22 +0700 Subject: [PATCH 2/8] Add FeeControlGroup --- .../FeeControlGroup/CustomFeeInput.tsx | 156 ++++++++++++++++++ src/components/FeeControlGroup/index.tsx | 118 +++++++++++++ .../SlippageControl/CustomSlippageInput.tsx | 15 -- .../SwapForm/hooks/useGetFeeConfig.tsx | 30 ++++ src/components/SwapForm/hooks/useGetRoute.ts | 22 +-- src/components/SwapForm/index.tsx | 2 + src/constants/index.ts | 1 + 7 files changed, 309 insertions(+), 35 deletions(-) create mode 100644 src/components/FeeControlGroup/CustomFeeInput.tsx create mode 100644 src/components/FeeControlGroup/index.tsx create mode 100644 src/components/SwapForm/hooks/useGetFeeConfig.tsx diff --git a/src/components/FeeControlGroup/CustomFeeInput.tsx b/src/components/FeeControlGroup/CustomFeeInput.tsx new file mode 100644 index 0000000000..1cfc7a9e86 --- /dev/null +++ b/src/components/FeeControlGroup/CustomFeeInput.tsx @@ -0,0 +1,156 @@ +import { t } from '@lingui/macro' +import React, { useEffect, useRef, useState } from 'react' +import { Text } from 'rebass' +import styled, { css } from 'styled-components' + +import { DEFAULT_TIPS } from 'constants/index' +import { formatSlippage } from 'utils/slippage' + +const parseTipInput = (str: string): number => Math.round(Number.parseFloat(str) * 100) + +const getFeeText = (fee: number) => { + const isCustom = !DEFAULT_TIPS.includes(fee) + if (!isCustom) { + return '' + } + return formatSlippage(fee, false) +} + +const feeOptionCSS = css` + height: 100%; + padding: 0; + border-radius: 20px; + border: 1px solid transparent; + + background-color: ${({ theme }) => theme.tabBackground}; + color: ${({ theme }) => theme.subText}; + text-align: center; + + font-size: 12px; + font-weight: 400; + line-height: 16px; + + outline: none; + cursor: pointer; + + :hover { + border-color: ${({ theme }) => theme.bg4}; + } + :focus { + border-color: ${({ theme }) => theme.bg4}; + } + + &[data-active='true'] { + background-color: ${({ theme }) => theme.tabActive}; + color: ${({ theme }) => theme.text}; + border-color: ${({ theme }) => theme.primary}; + + font-weight: 500; + } +` + +const CustomFeeOption = styled.div` + ${feeOptionCSS}; + + flex: 0 0 24%; + + display: inline-flex; + align-items: center; + padding: 0 4px; + column-gap: 2px; + flex: 1; + + transition: all 150ms linear; + + &[data-active='true'] { + color: ${({ theme }) => theme.text}; + font-weight: 500; + } +` + +const CustomInput = styled.input` + width: 100%; + height: 100%; + border: 0px; + border-radius: inherit; + + color: inherit; + background: transparent; + outline: none; + text-align: right; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + } + &::placeholder { + font-size: 12px; + } + @media only screen and (max-width: 375px) { + font-size: 10px; + } +` + +export type Props = { + fee: number + onFeeChange: (value: number) => void +} + +const CustomFeeInput = ({ fee, onFeeChange }: Props) => { + const [text, setText] = useState(getFeeText(fee)) + + const inputRef = useRef(null) + const isCustomOptionActive = !DEFAULT_TIPS.includes(fee) + + const handleChangeInput = (e: React.ChangeEvent) => { + const value = e.target.value + + if (value === '') { + setText(value) + onFeeChange(50) + return + } + + const numberRegex = /^(\d+)\.?(\d{1,2})?$/ + if (!value.match(numberRegex)) { + e.preventDefault() + return + } + + const parsedValue = parseTipInput(value) + if (Number.isNaN(parsedValue)) { + e.preventDefault() + return + } + + setText(value) + onFeeChange(parsedValue) + } + + const handleCommitChange = () => { + setText(getFeeText(fee)) + } + + useEffect(() => { + if (inputRef.current !== document.activeElement) { + setText(getFeeText(fee)) + } + }, [fee]) + + return ( + + + + % + + + ) +} + +export default CustomFeeInput diff --git a/src/components/FeeControlGroup/index.tsx b/src/components/FeeControlGroup/index.tsx new file mode 100644 index 0000000000..514b864ed9 --- /dev/null +++ b/src/components/FeeControlGroup/index.tsx @@ -0,0 +1,118 @@ +import { useEffect, useState } from 'react' +import { useSearchParams } from 'react-router-dom' +import { Flex, Text } from 'rebass' +import styled, { css } from 'styled-components' + +import useGetFeeConfig from 'components/SwapForm/hooks/useGetFeeConfig' +import { DEFAULT_TIPS } from 'constants/index' +import useTheme from 'hooks/useTheme' + +import CustomFeeInput from './CustomFeeInput' + +const feeOptionCSS = css` + height: 100%; + padding: 0; + border-radius: 20px; + border: 1px solid transparent; + + background-color: ${({ theme }) => theme.tabBackground}; + color: ${({ theme }) => theme.subText}; + text-align: center; + + font-size: 12px; + font-weight: 400; + line-height: 16px; + + outline: none; + cursor: pointer; + + :hover { + border-color: ${({ theme }) => theme.bg4}; + } + :focus { + border-color: ${({ theme }) => theme.bg4}; + } + + &[data-active='true'] { + background-color: ${({ theme }) => theme.tabActive}; + color: ${({ theme }) => theme.text}; + border-color: ${({ theme }) => theme.primary}; + + font-weight: 500; + } +` + +const DefaultFeeOption = styled.button` + ${feeOptionCSS}; + flex: 0 0 18%; + + @media only screen and (max-width: 375px) { + font-size: 10px; + flex: 0 0 15%; + } +` + +const FeeControlGroup = () => { + const theme = useTheme() + const { feeAmount, enableTip } = useGetFeeConfig() ?? {} + const [searchParams, setSearchParams] = useSearchParams() + + const [feeValue, setFee] = useState(Math.round(Number.parseFloat(feeAmount ?? '0')) || 0) + + useEffect(() => { + if (enableTip) { + searchParams.set('feeAmount', feeValue.toString()) + setSearchParams(searchParams) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [enableTip, feeValue]) + + if (!enableTip) { + return null + } + + return ( + + + Tip : + + + No hidden fees - Your optional tips support DEX Screener! + + + + {DEFAULT_TIPS.map(tip => ( + { + setFee(tip) + }} + data-active={tip === feeValue} + > + {tip ? `${tip / 100}%` : 'No tip'} + + ))} + + + + ) +} + +export default FeeControlGroup diff --git a/src/components/SlippageControl/CustomSlippageInput.tsx b/src/components/SlippageControl/CustomSlippageInput.tsx index a3bd47c46a..d370b21ca3 100644 --- a/src/components/SlippageControl/CustomSlippageInput.tsx +++ b/src/components/SlippageControl/CustomSlippageInput.tsx @@ -171,20 +171,6 @@ const CustomSlippageInput: React.FC = ({ rawSlippage, setRawSlippage, isW mixpanelHandler(MIXPANEL_TYPE.SLIPPAGE_CHANGED, { new_slippage: Number(formatSlippage(rawSlippage, false)) }) } - const handleKeyPressInput = (e: React.KeyboardEvent) => { - const key = e.key - if (key === '.' || ('0' <= key && key <= '9')) { - return - } - - if (key === 'Enter') { - inputRef.current?.blur() - return - } - - e.preventDefault() - } - useEffect(() => { if (inputRef.current !== document.activeElement) { setRawText(getSlippageText(rawSlippage)) @@ -207,7 +193,6 @@ const CustomSlippageInput: React.FC = ({ rawSlippage, setRawSlippage, isW placeholder={t`Custom`} value={rawText} onChange={handleChangeInput} - onKeyPress={handleKeyPressInput} onBlur={handleCommitChange} /> { + const [searchParams] = useSearchParams() + + const feeAmount = searchParams.get('feeAmount') || '' + const chargeFeeBy = (searchParams.get('chargeFeeBy') as ChargeFeeBy) || ChargeFeeBy.NONE + const enableTip = searchParams.get('enableTip') || '' + const isInBps = searchParams.get('isInBps') || '' + const feeReceiver = searchParams.get('feeReceiver') || '' + + const feeConfigFromUrl = useMemo(() => { + if (feeAmount && chargeFeeBy && (enableTip || isInBps) && feeReceiver) + return { + feeAmount, + chargeFeeBy, + enableTip, + isInBps: enableTip ? '1' : isInBps, + feeReceiver, + } + return null + }, [feeAmount, chargeFeeBy, enableTip, isInBps, feeReceiver]) + + return feeConfigFromUrl +} + +export default useGetFeeConfig diff --git a/src/components/SwapForm/hooks/useGetRoute.ts b/src/components/SwapForm/hooks/useGetRoute.ts index 9e7e86bea6..f0d02e35ac 100644 --- a/src/components/SwapForm/hooks/useGetRoute.ts +++ b/src/components/SwapForm/hooks/useGetRoute.ts @@ -1,10 +1,10 @@ import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core' import debounce from 'lodash/debounce' import { useCallback, useEffect, useMemo, useRef } from 'react' -import { useSearchParams } from 'react-router-dom' import routeApi from 'services/route' import { GetRouteParams } from 'services/route/types/getRoute' +import useGetFeeConfig from 'components/SwapForm/hooks/useGetFeeConfig' import useGetSwapFeeConfig, { SwapFeeConfig } from 'components/SwapForm/hooks/useGetSwapFeeConfig' import useSelectedDexes from 'components/SwapForm/hooks/useSelectedDexes' import { AGGREGATOR_API } from 'constants/env' @@ -80,25 +80,7 @@ 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 enableTip = searchParams.get('enableTip') || '' - const isInBps = searchParams.get('isInBps') || '' - const feeReceiver = searchParams.get('feeReceiver') || '' - - const feeConfigFromUrl = useMemo(() => { - if (feeAmount && chargeFeeBy && (enableTip || isInBps) && feeReceiver) - return { - feeAmount, - chargeFeeBy, - enableTip, - isInBps: enableTip ? '1' : isInBps, - feeReceiver, - } - return null - }, [feeAmount, chargeFeeBy, enableTip, isInBps, feeReceiver]) + const feeConfigFromUrl = useGetFeeConfig() const [trigger, _result] = routeApi.useLazyGetRouteQuery() const aggregatorDomain = useRouteApiDomain() diff --git a/src/components/SwapForm/index.tsx b/src/components/SwapForm/index.tsx index d3be063070..aa3ef684f1 100644 --- a/src/components/SwapForm/index.tsx +++ b/src/components/SwapForm/index.tsx @@ -10,6 +10,7 @@ import { parseGetRouteResponse } from 'services/route/utils' import styled from 'styled-components' import AddressInputPanel from 'components/AddressInputPanel' +import FeeControlGroup from 'components/FeeControlGroup' import { Clock } from 'components/Icons' import { NetworkSelector } from 'components/NetworkSelector' import { AutoRow } from 'components/Row' @@ -261,6 +262,7 @@ const SwapForm: React.FC = props => { )} + diff --git a/src/constants/index.ts b/src/constants/index.ts index 1703e63178..60ef14fd15 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -134,6 +134,7 @@ export const SWR_KEYS = { export const MAX_NORMAL_SLIPPAGE_IN_BIPS = 1999 export const MAX_DEGEN_SLIPPAGE_IN_BIPS = 5000 export const DEFAULT_SLIPPAGES = [5, 10, 50, 100] +export const DEFAULT_TIPS = [0, 10, 50, 100] export const DEFAULT_SLIPPAGE = 50 export const DEFAULT_SLIPPAGE_STABLE_PAIR_SWAP = 5 From 92ac7672e4252ea7a4a65ae79b597a8749aaa77e Mon Sep 17 00:00:00 2001 From: WindzLord Date: Mon, 11 Dec 2023 16:32:35 +0700 Subject: [PATCH 3/8] Resolve comment --- .../FeeControlGroup/CustomFeeInput.tsx | 39 ++++++++++++------- .../SwapForm/hooks/useGetFeeConfig.tsx | 3 +- src/services/route/types/getRoute.ts | 1 - src/utils/string.ts | 5 +++ 4 files changed, 33 insertions(+), 15 deletions(-) diff --git a/src/components/FeeControlGroup/CustomFeeInput.tsx b/src/components/FeeControlGroup/CustomFeeInput.tsx index 1cfc7a9e86..fde581be1f 100644 --- a/src/components/FeeControlGroup/CustomFeeInput.tsx +++ b/src/components/FeeControlGroup/CustomFeeInput.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react' import { Text } from 'rebass' import styled, { css } from 'styled-components' +import Tooltip from 'components/Tooltip' import { DEFAULT_TIPS } from 'constants/index' import { formatSlippage } from 'utils/slippage' @@ -98,11 +99,12 @@ export type Props = { const CustomFeeInput = ({ fee, onFeeChange }: Props) => { const [text, setText] = useState(getFeeText(fee)) - + const [tooltip, setTooltip] = useState('') const inputRef = useRef(null) const isCustomOptionActive = !DEFAULT_TIPS.includes(fee) const handleChangeInput = (e: React.ChangeEvent) => { + setTooltip('') const value = e.target.value if (value === '') { @@ -123,11 +125,20 @@ const CustomFeeInput = ({ fee, onFeeChange }: Props) => { return } + const maxCustomFee = 2000 + if (parsedValue > maxCustomFee) { + const format = formatSlippage(maxCustomFee) + setTooltip(t`Max is ${format}`) + e.preventDefault() + return + } + setText(value) onFeeChange(parsedValue) } const handleCommitChange = () => { + setTooltip('') setText(getFeeText(fee)) } @@ -138,18 +149,20 @@ const CustomFeeInput = ({ fee, onFeeChange }: Props) => { }, [fee]) return ( - - - - % - - + + + + + % + + + ) } diff --git a/src/components/SwapForm/hooks/useGetFeeConfig.tsx b/src/components/SwapForm/hooks/useGetFeeConfig.tsx index e284df3ba0..a0a5400ce2 100644 --- a/src/components/SwapForm/hooks/useGetFeeConfig.tsx +++ b/src/components/SwapForm/hooks/useGetFeeConfig.tsx @@ -2,13 +2,14 @@ import { useMemo } from 'react' import { useSearchParams } from 'react-router-dom' import { ChargeFeeBy } from 'types/route' +import { convertStringToBoolean } from 'utils/string' const useGetFeeConfig = () => { const [searchParams] = useSearchParams() const feeAmount = searchParams.get('feeAmount') || '' const chargeFeeBy = (searchParams.get('chargeFeeBy') as ChargeFeeBy) || ChargeFeeBy.NONE - const enableTip = searchParams.get('enableTip') || '' + const enableTip = convertStringToBoolean(searchParams.get('enableTip') || '') const isInBps = searchParams.get('isInBps') || '' const feeReceiver = searchParams.get('feeReceiver') || '' diff --git a/src/services/route/types/getRoute.ts b/src/services/route/types/getRoute.ts index 6a39fa7e0d..40ad3bd645 100644 --- a/src/services/route/types/getRoute.ts +++ b/src/services/route/types/getRoute.ts @@ -12,7 +12,6 @@ export type GetRouteParams = { gasPrice?: string feeAmount?: string chargeFeeBy?: ChargeFeeBy - enableTip?: string isInBps?: string feeReceiver?: string debug?: string diff --git a/src/utils/string.ts b/src/utils/string.ts index 3e0f7d6358..e782e1ec4e 100644 --- a/src/utils/string.ts +++ b/src/utils/string.ts @@ -49,3 +49,8 @@ export function capitalizeFirstLetter(str?: string) { const string = str || '' return string.charAt(0).toUpperCase() + string.slice(1) } + +export function convertStringToBoolean(value?: string) { + if (!value) return false + return ['1', 'true', 'yes'].includes(value.toLowerCase()) +} From 5d3701b6589827bb8c43edc983d9b74b2759f6d4 Mon Sep 17 00:00:00 2001 From: WindzLord Date: Mon, 11 Dec 2023 16:54:34 +0700 Subject: [PATCH 4/8] Update max fee --- src/components/FeeControlGroup/CustomFeeInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FeeControlGroup/CustomFeeInput.tsx b/src/components/FeeControlGroup/CustomFeeInput.tsx index fde581be1f..38e6b85d51 100644 --- a/src/components/FeeControlGroup/CustomFeeInput.tsx +++ b/src/components/FeeControlGroup/CustomFeeInput.tsx @@ -125,7 +125,7 @@ const CustomFeeInput = ({ fee, onFeeChange }: Props) => { return } - const maxCustomFee = 2000 + const maxCustomFee = 9999 if (parsedValue > maxCustomFee) { const format = formatSlippage(maxCustomFee) setTooltip(t`Max is ${format}`) From a61a92b70702cd9270ad6b16b4fe7f34cc860709 Mon Sep 17 00:00:00 2001 From: WindzLord Date: Tue, 12 Dec 2023 10:37:06 +0700 Subject: [PATCH 5/8] Update slippage when swap stable coin --- src/components/SwapForm/index.tsx | 2 ++ src/pages/SwapV3/PopulatedSwapForm.tsx | 3 --- .../SwapV3/useUpdateSlippageInStableCoinSwap.tsx | 15 +++++++++++---- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/SwapForm/index.tsx b/src/components/SwapForm/index.tsx index aa3ef684f1..629a2b19ad 100644 --- a/src/components/SwapForm/index.tsx +++ b/src/components/SwapForm/index.tsx @@ -33,6 +33,7 @@ import { useActiveWeb3React } from 'hooks' import useTheme from 'hooks/useTheme' import useWrapCallback, { WrapType } from 'hooks/useWrapCallback' import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const' +import useUpdateSlippageInStableCoinSwap from 'pages/SwapV3/useUpdateSlippageInStableCoinSwap' import { Field } from 'state/swap/actions' import { useSwapActionHandlers, useSwapState } from 'state/swap/hooks' import { MEDIA_WIDTHS } from 'theme' @@ -115,6 +116,7 @@ const SwapForm: React.FC = props => { const [isSaveGas, setSaveGas] = useState(false) const theme = useTheme() const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`) + useUpdateSlippageInStableCoinSwap() const { onUserInput: updateInputAmount } = useSwapActionHandlers() const onUserInput = useCallback( diff --git a/src/pages/SwapV3/PopulatedSwapForm.tsx b/src/pages/SwapV3/PopulatedSwapForm.tsx index 4b30877ddf..c9d6c20f06 100644 --- a/src/pages/SwapV3/PopulatedSwapForm.tsx +++ b/src/pages/SwapV3/PopulatedSwapForm.tsx @@ -5,7 +5,6 @@ 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' import { Field } from 'state/swap/actions' import { useInputCurrency, useOutputCurrency, useSwapActionHandlers } from 'state/swap/hooks' @@ -43,8 +42,6 @@ const PopulatedSwapForm: React.FC = ({ const { onCurrencySelection, onResetSelectCurrency } = useSwapActionHandlers() - useUpdateSlippageInStableCoinSwap() - const { pathname } = useLocation() const [searchParams, setSearchParams] = useSearchParams() const isPartnerSwap = pathname.startsWith(APP_PATHS.PARTNER_SWAP) diff --git a/src/pages/SwapV3/useUpdateSlippageInStableCoinSwap.tsx b/src/pages/SwapV3/useUpdateSlippageInStableCoinSwap.tsx index 32552c8bef..5197593010 100644 --- a/src/pages/SwapV3/useUpdateSlippageInStableCoinSwap.tsx +++ b/src/pages/SwapV3/useUpdateSlippageInStableCoinSwap.tsx @@ -1,5 +1,6 @@ import { useEffect, useRef } from 'react' import { useSelector } from 'react-redux' +import { useSearchParams } from 'react-router-dom' import { usePrevious } from 'react-use' import { DEFAULT_SLIPPAGE, DEFAULT_SLIPPAGE_STABLE_PAIR_SWAP } from 'constants/index' @@ -12,12 +13,18 @@ import { useUserSlippageTolerance } from 'state/user/hooks' const useUpdateSlippageInStableCoinSwap = () => { const { chainId } = useActiveWeb3React() const { isStableCoin } = useStableCoins(chainId) - const inputCurrencyId = useSelector((state: AppState) => state.swap[Field.INPUT].currencyId) - const previousInputCurrencyId = usePrevious(inputCurrencyId) - const outputCurrencyId = useSelector((state: AppState) => state.swap[Field.OUTPUT].currencyId) - const previousOutputCurrencyId = usePrevious(outputCurrencyId) + + const [searchParams] = useSearchParams() const [slippage, setSlippage] = useUserSlippageTolerance() + const inputTokenFromParam = searchParams.get('inputCurrency') ?? '' + const outputTokenFromParam = searchParams.get('outputCurrency') ?? '' + + const inputCurrencyId = useSelector((state: AppState) => state.swap[Field.INPUT].currencyId) || inputTokenFromParam + const outputCurrencyId = useSelector((state: AppState) => state.swap[Field.OUTPUT].currencyId) || outputTokenFromParam + + const previousInputCurrencyId = usePrevious(inputCurrencyId) + const previousOutputCurrencyId = usePrevious(outputCurrencyId) const rawSlippageRef = useRef(slippage) rawSlippageRef.current = slippage From 9ae201dadf16850b1f0adc2b267fdcd5640fb882 Mon Sep 17 00:00:00 2001 From: WindzLord Date: Tue, 12 Dec 2023 13:41:39 +0700 Subject: [PATCH 6/8] Add Trans --- src/components/FeeControlGroup/index.tsx | 7 ++++--- src/components/SwapForm/SlippageSetting.tsx | 3 +-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/FeeControlGroup/index.tsx b/src/components/FeeControlGroup/index.tsx index 514b864ed9..4332174ca8 100644 --- a/src/components/FeeControlGroup/index.tsx +++ b/src/components/FeeControlGroup/index.tsx @@ -1,3 +1,4 @@ +import { Trans } from '@lingui/macro' import { useEffect, useState } from 'react' import { useSearchParams } from 'react-router-dom' import { Flex, Text } from 'rebass' @@ -80,10 +81,10 @@ const FeeControlGroup = () => { }} > - Tip : + Tip: - No hidden fees - Your optional tips support DEX Screener! + No hidden fees - Your optional tips support DEX Screener! { }} data-active={tip === feeValue} > - {tip ? `${tip / 100}%` : 'No tip'} + {tip ? `${tip / 100}%` : No tip} ))} diff --git a/src/components/SwapForm/SlippageSetting.tsx b/src/components/SwapForm/SlippageSetting.tsx index 2eb8ceffc3..efe2d8c844 100644 --- a/src/components/SwapForm/SlippageSetting.tsx +++ b/src/components/SwapForm/SlippageSetting.tsx @@ -83,10 +83,9 @@ const SlippageSetting = ({ isStablePairSwap, rightComponent, tooltip }: Props) = ) } > - Max Slippage + Max Slippage: - : Date: Tue, 12 Dec 2023 13:55:23 +0700 Subject: [PATCH 7/8] Remove handle state --- src/components/FeeControlGroup/index.tsx | 26 +++++++++++++----------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/FeeControlGroup/index.tsx b/src/components/FeeControlGroup/index.tsx index 4332174ca8..bc318da786 100644 --- a/src/components/FeeControlGroup/index.tsx +++ b/src/components/FeeControlGroup/index.tsx @@ -1,5 +1,5 @@ import { Trans } from '@lingui/macro' -import { useEffect, useState } from 'react' +import { useCallback } from 'react' import { useSearchParams } from 'react-router-dom' import { Flex, Text } from 'rebass' import styled, { css } from 'styled-components' @@ -57,16 +57,18 @@ const FeeControlGroup = () => { const theme = useTheme() const { feeAmount, enableTip } = useGetFeeConfig() ?? {} const [searchParams, setSearchParams] = useSearchParams() - - const [feeValue, setFee] = useState(Math.round(Number.parseFloat(feeAmount ?? '0')) || 0) - - useEffect(() => { - if (enableTip) { - searchParams.set('feeAmount', feeValue.toString()) - setSearchParams(searchParams) - } + const feeValue = Number.parseFloat(feeAmount ?? '0') + + const handleFeeChange = useCallback( + (feeValue: number) => { + if (enableTip) { + searchParams.set('feeAmount', feeValue.toString()) + setSearchParams(searchParams) + } + }, // eslint-disable-next-line react-hooks/exhaustive-deps - }, [enableTip, feeValue]) + [enableTip], + ) if (!enableTip) { return null @@ -103,14 +105,14 @@ const FeeControlGroup = () => { { - setFee(tip) + handleFeeChange(tip) }} data-active={tip === feeValue} > {tip ? `${tip / 100}%` : No tip} ))} - + ) From d765d52a65404b765f8902025b576be518b0a18b Mon Sep 17 00:00:00 2001 From: WindzLord Date: Tue, 12 Dec 2023 14:04:07 +0700 Subject: [PATCH 8/8] Remove useCallback --- src/components/FeeControlGroup/index.tsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/components/FeeControlGroup/index.tsx b/src/components/FeeControlGroup/index.tsx index bc318da786..c427af397d 100644 --- a/src/components/FeeControlGroup/index.tsx +++ b/src/components/FeeControlGroup/index.tsx @@ -1,5 +1,4 @@ import { Trans } from '@lingui/macro' -import { useCallback } from 'react' import { useSearchParams } from 'react-router-dom' import { Flex, Text } from 'rebass' import styled, { css } from 'styled-components' @@ -59,16 +58,12 @@ const FeeControlGroup = () => { const [searchParams, setSearchParams] = useSearchParams() const feeValue = Number.parseFloat(feeAmount ?? '0') - const handleFeeChange = useCallback( - (feeValue: number) => { - if (enableTip) { - searchParams.set('feeAmount', feeValue.toString()) - setSearchParams(searchParams) - } - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [enableTip], - ) + const handleFeeChange = (feeValue: number) => { + if (enableTip) { + searchParams.set('feeAmount', feeValue.toString()) + setSearchParams(searchParams) + } + } if (!enableTip) { return null