From e7998f4093709c77717f2d5996a328efdd2bafcc Mon Sep 17 00:00:00 2001 From: viet-nv Date: Fri, 12 Apr 2024 18:09:42 +0700 Subject: [PATCH] feat: revamp swap form --- .../SwapForm/RefreshButton/LoadingIcon.tsx | 2 +- .../SwapForm/ReverseTokenSelectionButton.tsx | 18 +- .../SwapForm/SlippageSettingGroup.tsx | 9 +- src/components/SwapForm/SwapFormContext.tsx | 1 - src/components/SwapForm/TradeSummary.tsx | 204 ++++++++---------- .../SwapForm/TradeTypeSelection.tsx | 52 ----- src/components/SwapForm/hooks/useGetRoute.ts | 5 +- src/components/SwapForm/index.tsx | 150 ++++--------- src/components/swapv2/TradePrice.tsx | 4 +- src/components/swapv2/TradeTypeSelection.tsx | 28 --- src/connection/eagerlyConnect.ts | 1 - src/hooks/Trades.ts | 4 - src/hooks/elasticZap/index.ts | 1 - src/hooks/useMixpanel.ts | 8 +- src/hooks/useSwapCallbackV3.ts | 4 +- src/hooks/useSwapV2Callback.ts | 5 +- .../CreateAlert/CreateAlertForm.tsx | 1 - src/services/route/types/getRoute.ts | 1 - src/state/swap/actions.ts | 1 - src/state/swap/hooks.ts | 12 +- src/state/swap/reducer.ts | 6 - src/utils/aggregator.ts | 4 +- 22 files changed, 159 insertions(+), 362 deletions(-) delete mode 100644 src/components/SwapForm/TradeTypeSelection.tsx delete mode 100644 src/components/swapv2/TradeTypeSelection.tsx diff --git a/src/components/SwapForm/RefreshButton/LoadingIcon.tsx b/src/components/SwapForm/RefreshButton/LoadingIcon.tsx index e2c697bd8a..1455ba9c93 100644 --- a/src/components/SwapForm/RefreshButton/LoadingIcon.tsx +++ b/src/components/SwapForm/RefreshButton/LoadingIcon.tsx @@ -20,7 +20,7 @@ const LoadingIcon = React.forwardRef((props, ref) => { className="arrow-loading" width={size} height={size} - color={theme.subText} + color={theme.text} > void } @@ -16,11 +22,13 @@ const ReverseTokenSelectionButton: React.FC = ({ onClick }) => { } return ( - + + + ) } diff --git a/src/components/SwapForm/SlippageSettingGroup.tsx b/src/components/SwapForm/SlippageSettingGroup.tsx index a35ca0d1f7..f0e97c6ba9 100644 --- a/src/components/SwapForm/SlippageSettingGroup.tsx +++ b/src/components/SwapForm/SlippageSettingGroup.tsx @@ -72,8 +72,15 @@ export default function SlippageSettingGroup({ if (chainId === ChainId.ZKSYNC && !isPartnerSwap) { rightButton = ( + + - + Gas Token diff --git a/src/components/SwapForm/SwapFormContext.tsx b/src/components/SwapForm/SwapFormContext.tsx index cb1f6d85bf..4c5bb61136 100644 --- a/src/components/SwapForm/SwapFormContext.tsx +++ b/src/components/SwapForm/SwapFormContext.tsx @@ -6,7 +6,6 @@ type SwapFormContextProps = { slippage: number routeSummary: DetailedRouteSummary | undefined typedValue: string - isSaveGas: boolean recipient: string | null isStablePairSwap: boolean isAdvancedMode: boolean diff --git a/src/components/SwapForm/TradeSummary.tsx b/src/components/SwapForm/TradeSummary.tsx index 2a799c9116..8714f1f096 100644 --- a/src/components/SwapForm/TradeSummary.tsx +++ b/src/components/SwapForm/TradeSummary.tsx @@ -1,23 +1,20 @@ -import { ChainId } from '@kyberswap/ks-sdk-core' import { Trans } from '@lingui/macro' import React, { useEffect, useState } from 'react' import { NavLink, useSearchParams } from 'react-router-dom' -import { Text } from 'rebass' +import { Flex, Text } from 'rebass' import styled from 'styled-components' -import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg' import { ButtonLight } from 'components/Button' import { AutoColumn } from 'components/Column' -import Divider from 'components/Divider' import { RowBetween, RowFixed } from 'components/Row' import { useSwapFormContext } from 'components/SwapForm/SwapFormContext' import { MouseoverTooltip, TextDashed } from 'components/Tooltip' +import TradePrice from 'components/swapv2/TradePrice' 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' import useTheme from 'hooks/useTheme' -import { usePaymentToken } from 'state/user/hooks' import { ExternalLink, TYPE } from 'theme' import { DetailedRouteSummary } from 'types/route' import { formattedNum } from 'utils' @@ -25,16 +22,7 @@ import { minimumAmountAfterSlippage } from 'utils/currencyAmount' import { formatDisplayNumber } from 'utils/numbers' import { checkPriceImpact, formatPriceImpact } from 'utils/prices' -const IconWrapper = styled.div<{ $flip: boolean }>` - transform: rotate(${({ $flip }) => (!$flip ? '0deg' : '-180deg')}); - transition: transform 300ms; -` -const ContentWrapper = styled(AutoColumn)<{ $expanded: boolean }>` - max-height: ${({ $expanded }) => ($expanded ? '500px' : 0)}; - margin-top: ${({ $expanded }) => ($expanded ? '12px' : 0)}; - transition: margin-top 300ms ease, height 300ms ease; - overflow: hidden; -` +import RefreshButton from './RefreshButton' type WrapperProps = { $visible: boolean @@ -49,7 +37,6 @@ const Wrapper = styled.div.attrs(props => ({ width: 100%; max-width: 425px; border-radius: 16px; - background-color: ${({ theme }) => theme.buttonBlack}; max-height: 0; transition: height 300ms ease-in-out, transform 300ms; border: 1px solid ${({ theme }) => theme.border}; @@ -146,14 +133,15 @@ const SwapFee: React.FC = () => { type Props = { routeSummary: DetailedRouteSummary | undefined slippage: number + disableRefresh: boolean + refreshCallback: () => void } -const TradeSummary: React.FC = ({ routeSummary, slippage }) => { +const TradeSummary: React.FC = ({ routeSummary, slippage, disableRefresh, refreshCallback }) => { const { account, chainId } = useActiveWeb3React() const theme = useTheme() const { gasRefundPercentage } = useGasRefundTier() - const [expanded, setExpanded] = useState(true) const [alreadyVisible, setAlreadyVisible] = useState(false) - const { parsedAmountOut, priceImpact, gasUsd } = routeSummary || {} + const { parsedAmountOut, priceImpact } = routeSummary || {} const hasTrade = !!routeSummary?.route const priceImpactResult = checkPriceImpact(priceImpact) @@ -177,10 +165,6 @@ const TradeSummary: React.FC = ({ routeSummary, slippage }) => { ) const { mixpanelHandler } = useMixpanel() - const handleClickExpand = () => { - setExpanded(prev => !prev) - mixpanelHandler(MIXPANEL_TYPE.SWAP_MORE_INFO_CLICK, { option: expanded ? 'Close' : 'Open' }) - } useEffect(() => { if (hasTrade) { @@ -188,122 +172,106 @@ const TradeSummary: React.FC = ({ routeSummary, slippage }) => { } }, [hasTrade]) - const [paymentToken] = usePaymentToken() - const isHold = paymentToken?.address.toLowerCase() === '0xed4040fD47629e7c8FBB7DA76bb50B3e7695F0f2'.toLowerCase() const isPartnerSwap = window.location.pathname.includes(APP_PATHS.PARTNER_SWAP) return ( - - - - MORE INFORMATION + + + + Rate - - - - - - - - - - You will receive at least this amount or your transaction will revert.} - placement="right" - > - Minimum Received - - - - - - {minimumAmountOutStr || '--'} - - - - - - - Estimated network fee for your transaction.} placement="right"> - {chainId === ChainId.SCROLL ? Est. L2 Gas Fee : Est. Gas Fee} - - - + + + + + + + + + You will receive at least this amount or your transaction will revert.} + placement="right" + > + Minimum Received + + + + - {gasUsd ? formattedNum(isHold ? +gasUsd * 0.8 : gasUsd, true) : '--'} + {minimumAmountOutStr || '--'} - + + + + + + + Estimated change in price due to the size of your transaction. + + + Read more{' '} + + here ↗ + + + + + } + placement="right" + > + Price Impact + + + + + {priceImpactResult.isInvalid || typeof priceImpact !== 'number' ? '--' : formatPriceImpact(priceImpact)} + + + + {!isPartnerSwap && isSupportKyberDao(chainId) && ( - Estimated change in price due to the size of your transaction. - - - Read more{' '} - - here ↗ - - - - + + Stake KNC in KyberDAO to get gas refund. Read more{' '} + + here ↗ + + } placement="right" > - Price Impact + Gas Refund - { + mixpanelHandler(MIXPANEL_TYPE.GAS_REFUND_SOURCE_CLICK, { source: 'Swap_page_more_info' }) + }} > - {priceImpactResult.isInvalid || typeof priceImpact !== 'number' ? '--' : formatPriceImpact(priceImpact)} - + + {account ? gasRefundPercentage * 100 : '--'}% Refund + + - - {!isPartnerSwap && isSupportKyberDao(chainId) && ( - - - - - Stake KNC in KyberDAO to get gas refund. Read more{' '} - - here ↗ - - - } - placement="right" - > - Gas Refund - - - - { - mixpanelHandler(MIXPANEL_TYPE.GAS_REFUND_SOURCE_CLICK, { source: 'Swap_page_more_info' }) - }} - > - - {account ? gasRefundPercentage * 100 : '--'}% Refund - - - - )} - - + )} + ) diff --git a/src/components/SwapForm/TradeTypeSelection.tsx b/src/components/SwapForm/TradeTypeSelection.tsx deleted file mode 100644 index 30c00187f8..0000000000 --- a/src/components/SwapForm/TradeTypeSelection.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { Trans } from '@lingui/macro' -import { Text } from 'rebass/styled-components' -import styled from 'styled-components' - -import { GasStation, MoneyFill } from 'components/Icons' - -const GroupButtonReturnTypes = styled.div` - display: flex; - border-radius: 999px; - background: ${({ theme }) => theme.tabBackground}; - padding: 2px; -` - -const ButtonReturnType = styled.div<{ active?: boolean }>` - border-radius: 999px; - flex: 1; - padding: 8px; - display: flex; - align-items: center; - justify-content: center; - background-color: ${({ theme, active }) => (active ? theme.tabActive : theme.tabBackground)}; - color: ${({ theme, active }) => (active ? theme.text : theme.subText)}; - font-size: 12px; - font-weight: 500; - cursor: pointer; - transition: color 300ms; -` - -type Props = { - isSaveGas: boolean - setSaveGas: React.Dispatch> -} -const TradeTypeSelection: React.FC = ({ isSaveGas, setSaveGas }) => { - return ( - - setSaveGas(false)} active={!isSaveGas} role="button"> - - - Maximum Return - - - setSaveGas(true)} active={isSaveGas} role="button"> - - - Lowest Gas - - - - ) -} - -export default TradeTypeSelection diff --git a/src/components/SwapForm/hooks/useGetRoute.ts b/src/components/SwapForm/hooks/useGetRoute.ts index 4f2df7eb36..2905ae6ff6 100644 --- a/src/components/SwapForm/hooks/useGetRoute.ts +++ b/src/components/SwapForm/hooks/useGetRoute.ts @@ -17,7 +17,6 @@ import { useAppDispatch } from 'state/hooks' import { ChargeFeeBy } from 'types/route' export type ArgsGetRoute = { - isSaveGas: boolean parsedAmount: CurrencyAmount | undefined currencyIn: Currency | undefined currencyOut: Currency | undefined @@ -77,7 +76,7 @@ export const useRouteApiDomain = () => { const useGetRoute = (args: ArgsGetRoute) => { const { isEnableAuthenAggregator } = useKyberswapGlobalConfig() - const { isSaveGas, parsedAmount, currencyIn, currencyOut, customChain, isProcessingSwap, clientId } = args + const { parsedAmount, currencyIn, currencyOut, customChain, isProcessingSwap, clientId } = args const { chainId: currentChain } = useActiveWeb3React() const chainId = customChain || currentChain @@ -148,7 +147,6 @@ const useGetRoute = (args: ArgsGetRoute) => { tokenIn: tokenInAddress, tokenOut: tokenOutAddress, amountIn, - saveGas: String(isSaveGas), includedSources: dexes, gasInclude: 'true', // default gasPrice: '', // default @@ -177,7 +175,6 @@ const useGetRoute = (args: ArgsGetRoute) => { dexes, getSwapFeeConfig, isEnableAuthenAggregator, - isSaveGas, parsedAmount?.currency, parsedAmount?.quotient, triggerDebounced, diff --git a/src/components/SwapForm/index.tsx b/src/components/SwapForm/index.tsx index fba8e67b44..b876f31497 100644 --- a/src/components/SwapForm/index.tsx +++ b/src/components/SwapForm/index.tsx @@ -1,19 +1,12 @@ import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core' -import { Trans } from '@lingui/macro' -import { rgba } from 'polished' -import { stringify } from 'querystring' import { useCallback, useEffect, useMemo, useState } from 'react' -import { useLocation, useNavigate, useSearchParams } from 'react-router-dom' -import { useMedia } from 'react-use' -import { Box, Flex, Text } from 'rebass' +import { useSearchParams } from 'react-router-dom' +import { Box, Flex } from 'rebass' 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' import SlippageWarningNote from 'components/SlippageWarningNote' import InputCurrencyPanel from 'components/SwapForm/InputCurrencyPanel' import OutputCurrencyPanel from 'components/SwapForm/OutputCurrencyPanel' @@ -26,42 +19,18 @@ import useGetInputError from 'components/SwapForm/hooks/useGetInputError' import useGetRoute from 'components/SwapForm/hooks/useGetRoute' import useParsedAmount from 'components/SwapForm/hooks/useParsedAmount' import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant' -import TradePrice from 'components/swapv2/TradePrice' import { Wrapper } from 'components/swapv2/styleds' -import { APP_PATHS } from 'constants/index' 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' import { DetailedRouteSummary } from 'types/route' -import { currencyId } from 'utils/currencyId' import MultichainKNCNote from './MultichainKNCNote' -import RefreshButton from './RefreshButton' import ReverseTokenSelectionButton from './ReverseTokenSelectionButton' import SwapActionButton from './SwapActionButton' import TradeSummary from './TradeSummary' -import TradeTypeSelection from './TradeTypeSelection' - -const PriceAlertButton = styled.div` - background: ${({ theme }) => rgba(theme.subText, 0.2)}; - border-radius: 24px; - display: flex; - align-items: center; - gap: 4px; - padding: 4px 6px; - cursor: pointer; - user-select: none; - font-weight: 500; - font-size: 12px; - color: ${({ theme }) => theme.subText}; - align-items: center; - height: fit-content; -` export type SwapFormProps = { hidden: boolean @@ -88,8 +57,6 @@ export type SwapFormProps = { } const SwapForm: React.FC = props => { - const { pathname } = useLocation() - const isPartnerSwap = pathname.startsWith(APP_PATHS.PARTNER_SWAP) const [searchParams] = useSearchParams() const { hidden, @@ -111,13 +78,9 @@ const SwapForm: React.FC = props => { const { chainId: walletChainId } = useActiveWeb3React() const chainId = customChainId || walletChainId - const navigate = useNavigate() const [isProcessingSwap, setProcessingSwap] = useState(false) const { typedValue } = useSwapState() const [recipient, setRecipient] = useState(null) - const [isSaveGas, setSaveGas] = useState(false) - const theme = useTheme() - const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`) useUpdateSlippageInStableCoinSwap(chainId) const { onUserInput: updateInputAmount } = useSwapActionHandlers() @@ -141,7 +104,6 @@ const SwapForm: React.FC = props => { const { fetcher: getRoute, result } = useGetRoute({ currencyIn, currencyOut, - isSaveGas, parsedAmount, isProcessingSwap, customChain: chainId, @@ -185,7 +147,6 @@ const SwapForm: React.FC = props => { slippage={slippage} routeSummary={routeSummary} typedValue={typedValue} - isSaveGas={isSaveGas} recipient={recipient} isStablePairSwap={isStablePairSwap} isAdvancedMode={isDegenMode} @@ -194,71 +155,37 @@ const SwapForm: React.FC = props => { {omniView ? : null} - - - - - {!isWrapOrUnwrap && ( - <> - - - - )} - - - {!isPartnerSwap && ![ChainId.BLAST, ChainId.MANTLE].includes(chainId) && ( - - navigate( - `${APP_PATHS.PROFILE_MANAGE}${PROFILE_MANAGE_ROUTES.CREATE_ALERT}?${stringify({ - amount: typedValue || undefined, - inputCurrency: currencyId(currencyIn, chainId), - outputCurrency: currencyId(currencyOut, chainId), - })}`, - ) - } - > - - {upToExtraSmall ? null : ( - - Price Alert - - )} - - )} - { - currencyIn && onChangeCurrencyOut(currencyIn) - routeSummary && onUserInput(routeSummary.parsedAmountOut.toExact()) - }} - /> - - - - + + + + { + currencyIn && onChangeCurrencyOut(currencyIn) + routeSummary && onUserInput(routeSummary.parsedAmountOut.toExact()) + }} + /> + + + {isDegenMode && !isWrapOrUnwrap && ( @@ -272,13 +199,20 @@ const SwapForm: React.FC = props => { - - {!isWrapOrUnwrap && } + {!isWrapOrUnwrap && ( + + )} + = props => { swapInputError={swapInputError} customChainId={customChainId} /> - - {!isWrapOrUnwrap && } diff --git a/src/components/swapv2/TradePrice.tsx b/src/components/swapv2/TradePrice.tsx index f9c2244083..66ac582b51 100644 --- a/src/components/swapv2/TradePrice.tsx +++ b/src/components/swapv2/TradePrice.tsx @@ -38,7 +38,7 @@ export default function TradePrice({ price, label, icon, style = {}, color }: Tr setShowInverted(!showInverted)} height="22px" @@ -46,7 +46,7 @@ export default function TradePrice({ price, label, icon, style = {}, color }: Tr {show ? ( <> {label && <>{label} } {value} - {icon || } + {icon || } ) : ( diff --git a/src/components/swapv2/TradeTypeSelection.tsx b/src/components/swapv2/TradeTypeSelection.tsx deleted file mode 100644 index 96c1a48c0d..0000000000 --- a/src/components/swapv2/TradeTypeSelection.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Trans } from '@lingui/macro' -import { Text } from 'rebass/styled-components' - -import { GasStation, MoneyFill } from 'components/Icons' -import { useSwapActionHandlers, useSwapState } from 'state/swap/hooks' - -import { ButtonReturnType, GroupButtonReturnTypes } from './styleds' - -export default function TradeTypeSelection() { - const { saveGas } = useSwapState() - const { onChooseToSaveGas } = useSwapActionHandlers() - return ( - - onChooseToSaveGas(false)} active={!saveGas} role="button"> - - - Maximum Return - - - onChooseToSaveGas(true)} active={saveGas} role="button"> - - - Lowest Gas - - - - ) -} diff --git a/src/connection/eagerlyConnect.ts b/src/connection/eagerlyConnect.ts index 04fb2b22d9..34faea12f9 100644 --- a/src/connection/eagerlyConnect.ts +++ b/src/connection/eagerlyConnect.ts @@ -47,7 +47,6 @@ connect(networkConnection.connector) // Get the persisted wallet type from the last session. const recentConnectionMeta = getRecentConnectionMeta() -console.log('xxx', recentConnectionMeta) if (recentConnectionMeta?.type && !recentConnectionMeta.disconnected) { const selectedConnection = getConnection(recentConnectionMeta.type) diff --git a/src/hooks/Trades.ts b/src/hooks/Trades.ts index 5e09c562be..a7a169eb0d 100644 --- a/src/hooks/Trades.ts +++ b/src/hooks/Trades.ts @@ -10,7 +10,6 @@ import { useAllCurrencyCombinations } from 'hooks/useAllCurrencyCombinations' import useDebounce from 'hooks/useDebounce' import { AppState } from 'state' import { useAllDexes, useExcludeDexes } from 'state/customizeDexes/hooks' -import { useSwapState } from 'state/swap/hooks' import { useAllTransactions } from 'state/transactions/hooks' import { usePermitData, useUserSlippageTolerance } from 'state/user/hooks' import { isAddress } from 'utils' @@ -113,7 +112,6 @@ export function useTradeExactInV2( const ttl = useSelector(state => state.user.userDeadline) - const { saveGas } = useSwapState() const permitData = usePermitData(currencyAmountIn?.currency.wrapped.address) // refresh aggregator data on new sent tx @@ -142,7 +140,6 @@ export function useTradeExactInV2( aggregatorAPI, debounceCurrencyAmountIn, currencyOut, - saveGas, dexes, allowedSlippage, deadline, @@ -177,7 +174,6 @@ export function useTradeExactInV2( account, ttl, aggregatorAPI, - saveGas, dexes, allowedSlippage, permitData, diff --git a/src/hooks/elasticZap/index.ts b/src/hooks/elasticZap/index.ts index 6c3965297b..f02af69916 100644 --- a/src/hooks/elasticZap/index.ts +++ b/src/hooks/elasticZap/index.ts @@ -85,7 +85,6 @@ export function useZapInPoolResult(params?: { params: { tokenIn, tokenOut, - saveGas: '', amountIn: item.quotient.toString(), excludedPools: poolAddress, gasInclude: 'true', diff --git a/src/hooks/useMixpanel.ts b/src/hooks/useMixpanel.ts index 9353760886..c1870e45e5 100644 --- a/src/hooks/useMixpanel.ts +++ b/src/hooks/useMixpanel.ts @@ -24,7 +24,7 @@ import { AppDispatch } from 'state' import { useETHPrice, useKyberSwapConfig } from 'state/application/hooks' import { RANGE } from 'state/mint/proamm/type' import { Field } from 'state/swap/actions' -import { useInputCurrency, useOutputCurrency, useSwapState } from 'state/swap/hooks' +import { useInputCurrency, useOutputCurrency } from 'state/swap/hooks' import { modifyTransaction } from 'state/transactions/actions' import { TRANSACTION_TYPE, TransactionDetails, TransactionExtraInfo2Token } from 'state/transactions/type' import { useUserSlippageTolerance } from 'state/user/hooks' @@ -263,7 +263,6 @@ type FeeInfo = { export default function useMixpanel(currencies?: { [field in Field]?: Currency }) { const { chainId, account, networkInfo } = useActiveWeb3React() - const { saveGas } = useSwapState() const network = networkInfo.name const inputCurrencyFromHook = useInputCurrency() @@ -336,7 +335,6 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency } input_token: inputSymbol, output_token: outputSymbol, estimated_gas: gasUsd ? Number(gasUsd).toFixed(4) : undefined, - max_return_or_low_gas: saveGas ? 'Lowest Gas' : 'Maximum Return', trade_qty: inputAmount?.toExact(), slippage_setting: allowedSlippage ? allowedSlippage / 100 : 0, price_impact: priceImpact && priceImpact > 0.01 ? priceImpact.toFixed(2) : '<0.01', @@ -372,7 +370,6 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency } input_token: inputSymbol, output_token: outputSymbol, estimated_gas: gasUsd, - max_return_or_low_gas: saveGas ? 'Lowest Gas' : 'Maximum Return', trade_qty: inputAmount?.toExact(), slippage_setting: allowedSlippage ? allowedSlippage / 100 : 0, price_impact: priceImpact && priceImpact > 0.01 ? priceImpact.toFixed(2) : '<0.01', @@ -409,7 +406,6 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency } ethPrice.currentPrice && (actual_gas.toNumber() * parseFloat(formattedGas) * parseFloat(ethPrice.currentPrice)).toFixed(4), tx_hash: tx_hash, - max_return_or_low_gas: arbitrary.saveGas ? 'Lowest Gas' : 'Maximum Return', trade_qty: arbitrary.inputAmount, slippage_setting: arbitrary.slippageSetting, price_impact: arbitrary.priceImpact, @@ -1266,7 +1262,7 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency } } }, /* eslint-disable */ - [currencies, network, saveGas, account, mixpanel.hasOwnProperty('get_distinct_id'), ethPrice?.currentPrice], + [currencies, network, account, mixpanel.hasOwnProperty('get_distinct_id'), ethPrice?.currentPrice], /* eslint-enable */ ) const subgraphMixpanelHandler = useCallback( diff --git a/src/hooks/useSwapCallbackV3.ts b/src/hooks/useSwapCallbackV3.ts index a900bcbcd1..ae18ff332a 100644 --- a/src/hooks/useSwapCallbackV3.ts +++ b/src/hooks/useSwapCallbackV3.ts @@ -23,7 +23,7 @@ const useSwapCallbackV3 = (isPermitSwap?: boolean) => { const { library, connector } = useWeb3React() const { name: walletKey } = getConnection(connector).getProviderInfo() - const { isSaveGas, recipient: recipientAddressOrName, routeSummary } = useSwapFormContext() + const { recipient: recipientAddressOrName, routeSummary } = useSwapFormContext() const { parsedAmountIn: inputAmount, parsedAmountOut: outputAmount, priceImpact } = routeSummary || {} const [allowedSlippage] = useUserSlippageTolerance() @@ -73,7 +73,6 @@ const useSwapCallbackV3 = (isPermitSwap?: boolean) => { inputDecimals: inputAmount.currency.decimals, outputDecimals: outputAmount.currency.decimals, withRecipient, - saveGas: isSaveGas, inputAmount: inputAmount.toExact(), slippageSetting: allowedSlippage ? allowedSlippage / 100 : 0, priceImpact: priceImpact && priceImpact > 0.01 ? priceImpact.toFixed(2) : '<0.01', @@ -95,7 +94,6 @@ const useSwapCallbackV3 = (isPermitSwap?: boolean) => { chainId, inputAmount, isPermitSwap, - isSaveGas, outputAmount, priceImpact, recipient, diff --git a/src/hooks/useSwapV2Callback.ts b/src/hooks/useSwapV2Callback.ts index 305de0c450..f13eee1d93 100644 --- a/src/hooks/useSwapV2Callback.ts +++ b/src/hooks/useSwapV2Callback.ts @@ -31,7 +31,7 @@ export function useSwapV2Callback( const { library, connector } = useWeb3React() const { name: walletKey } = getConnection(connector).getProviderInfo() - const { saveGas, recipient: recipientAddressOrName } = useSwapState() + const { recipient: recipientAddressOrName } = useSwapState() const [allowedSlippage] = useUserSlippageTolerance() @@ -80,14 +80,13 @@ export function useSwapV2Callback( inputDecimals: trade.inputAmount.currency.decimals, outputDecimals: trade.outputAmount.currency.decimals, withRecipient, - saveGas, inputAmount: trade.inputAmount.toExact(), slippageSetting: allowedSlippage ? allowedSlippage / 100 : 0, priceImpact: trade && trade?.priceImpact > 0.01 ? trade?.priceImpact.toFixed(2) : '<0.01', }, } as TransactionExtraInfo2Token, } - }, [account, allowedSlippage, chainId, recipient, recipientAddressOrName, saveGas, trade]) + }, [account, allowedSlippage, chainId, recipient, recipientAddressOrName, trade]) return useMemo(() => { if (!trade || !account) { diff --git a/src/pages/NotificationCenter/CreateAlert/CreateAlertForm.tsx b/src/pages/NotificationCenter/CreateAlert/CreateAlertForm.tsx index 6e34f6fffe..f9df9c09e1 100644 --- a/src/pages/NotificationCenter/CreateAlert/CreateAlertForm.tsx +++ b/src/pages/NotificationCenter/CreateAlert/CreateAlertForm.tsx @@ -101,7 +101,6 @@ export default function CreateAlert({ currencyIn, currencyOut, parsedAmount, - isSaveGas: false, customChain: selectedChain, }) diff --git a/src/services/route/types/getRoute.ts b/src/services/route/types/getRoute.ts index 40ad3bd645..0f8867b4d0 100644 --- a/src/services/route/types/getRoute.ts +++ b/src/services/route/types/getRoute.ts @@ -4,7 +4,6 @@ export type GetRouteParams = { tokenIn: string tokenOut: string amountIn: string - saveGas: string includedSources?: string excludedSources?: string excludedPools?: string diff --git a/src/state/swap/actions.ts b/src/state/swap/actions.ts index 3640cb29a8..2b8fe6c0d5 100644 --- a/src/state/swap/actions.ts +++ b/src/state/swap/actions.ts @@ -10,7 +10,6 @@ export enum Field { export const selectCurrency = createAction<{ field: Field; currencyId: string }>('swap/selectCurrency') export const resetSelectCurrency = createAction<{ field: Field }>('swap/resetSelectCurrency') -export const chooseToSaveGas = createAction<{ saveGas: boolean }>('swap/chooseToSaveGas') export const switchCurrencies = createAction('swap/switchCurrencies') export const switchCurrenciesV2 = createAction('swap/switchCurrenciesV2') export const typeInput = createAction<{ field: Field; typedValue: string }>('swap/typeInput') diff --git a/src/state/swap/hooks.ts b/src/state/swap/hooks.ts index 6ed397337f..9b2c8f4455 100644 --- a/src/state/swap/hooks.ts +++ b/src/state/swap/hooks.ts @@ -17,7 +17,6 @@ import { getUrlMatchParams } from 'hooks/useSyncTokenSymbolToUrl' import { AppDispatch, AppState } from 'state/index' import { Field, - chooseToSaveGas, replaceSwapState, resetSelectCurrency, selectCurrency, @@ -45,7 +44,6 @@ export function useSwapActionHandlers(): { onSwitchTokensV2: () => void onUserInput: (field: Field, typedValue: string) => void onChangeRecipient: (recipient: string | null) => void - onChooseToSaveGas: (saveGas: boolean) => void onResetSelectCurrency: (field: Field) => void onChangeTrade: (trade: Aggregator | undefined) => void } { @@ -103,13 +101,6 @@ export function useSwapActionHandlers(): { [dispatch], ) - const onChooseToSaveGas = useCallback( - (saveGas: boolean) => { - dispatch(chooseToSaveGas({ saveGas })) - }, - [dispatch], - ) - const onChangeTrade = useCallback( (trade: Aggregator | undefined) => { dispatch(setTrade({ trade })) @@ -123,7 +114,6 @@ export function useSwapActionHandlers(): { onCurrencySelection, onUserInput, onChangeRecipient, - onChooseToSaveGas, onResetSelectCurrency, // deselect token in select input: (use cases: remove "imported token") onChangeTrade, } @@ -295,7 +285,7 @@ export function queryParametersToSwapState( parsedQs: ParsedUrlQuery, chainId: ChainId, isMatchPath: boolean, -): Omit { +): SwapState { let inputCurrency = parseCurrencyFromURLParameter(isMatchPath ? parsedQs.inputCurrency : null, chainId) let outputCurrency = parseCurrencyFromURLParameter(isMatchPath ? parsedQs.outputCurrency : null, chainId) if (inputCurrency === outputCurrency) { diff --git a/src/state/swap/reducer.ts b/src/state/swap/reducer.ts index 385f57a4c3..fb92eabab5 100644 --- a/src/state/swap/reducer.ts +++ b/src/state/swap/reducer.ts @@ -6,7 +6,6 @@ import { queryStringToObject } from 'utils/string' import { Field, - chooseToSaveGas, replaceSwapState, resetSelectCurrency, selectCurrency, @@ -29,7 +28,6 @@ export interface SwapState { } // the typed recipient address or ENS name, or null if swap should go to sender readonly recipient: string | null - readonly saveGas: boolean readonly trendingSoonShowed?: boolean readonly trade?: Aggregator @@ -57,7 +55,6 @@ const initialState: SwapState = { currencyId: outputCurrency?.toString() || '', }, recipient: null, - saveGas: false, // Flag to only show animation of trending soon banner 1 time trendingSoonShowed: false, trade: undefined, @@ -141,9 +138,6 @@ export default createReducer(initialState, builder => .addCase(setRecipient, (state, { payload: { recipient } }) => { state.recipient = recipient }) - .addCase(chooseToSaveGas, (state, { payload: { saveGas } }) => { - state.saveGas = saveGas - }) .addCase(setTrendingSoonShowed, state => { state.trendingSoonShowed = true }) diff --git a/src/utils/aggregator.ts b/src/utils/aggregator.ts index 7938aea396..5682f11258 100644 --- a/src/utils/aggregator.ts +++ b/src/utils/aggregator.ts @@ -177,7 +177,6 @@ export class Aggregator { * @param baseURL * @param currencyAmountIn exact amount of input currency to spend * @param currencyOut the desired currency out - * @param saveGas * @param dexes * @param slippageTolerance * @param deadline @@ -189,7 +188,6 @@ export class Aggregator { baseURL: string, currencyAmountIn: CurrencyAmount, currencyOut: Currency, - saveGas = false, dexes = '', slippageTolerance: number, deadline: number | undefined, @@ -209,7 +207,7 @@ export class Aggregator { tokenIn: tokenInAddress, tokenOut: tokenOutAddress, amountIn: currencyAmountIn.quotient?.toString(), - saveGas: saveGas ? '1' : '0', + saveGas: '0', gasInclude: '1', ...(dexes ? { dexes } : {}), slippageTolerance: slippageTolerance?.toString() ?? '',