diff --git a/apps/web/src/hooks/useStablecoinPrice.ts b/apps/web/src/hooks/useStablecoinPrice.ts index eda5518a87333..45fd01ef31e2a 100644 --- a/apps/web/src/hooks/useStablecoinPrice.ts +++ b/apps/web/src/hooks/useStablecoinPrice.ts @@ -7,7 +7,7 @@ import { useCakePrice } from 'hooks/useCakePrice' import { useMemo } from 'react' import { warningSeverity } from 'utils/exchange' import { multiplyPriceByAmount } from 'utils/prices' -import { computeTradePriceBreakdown } from 'views/Swap/V3Swap/utils/exchange' +import { computeTradePriceBreakdown } from 'views/Swap/utils/exchange' import { useActiveChainId } from './useActiveChainId' import { useBestAMMTrade } from './useBestAMMTrade' import { useCurrencyUsdPrice } from './useCurrencyUsdPrice' diff --git a/apps/web/src/pages/swap/index.tsx b/apps/web/src/pages/swap/index.tsx index c7c4d0af2450d..6e074041d248c 100644 --- a/apps/web/src/pages/swap/index.tsx +++ b/apps/web/src/pages/swap/index.tsx @@ -1,12 +1,6 @@ import { CHAIN_IDS } from 'utils/wagmi' -import SwapLayout from 'views/Swap/SwapLayout' -import Swap from 'views/Swap' -const SwapPage = () => ( - - - -) +const SwapPage = () => <> SwapPage.chains = CHAIN_IDS SwapPage.screen = true diff --git a/apps/web/src/state/swap/fetch/fetchBestPriceWithRouter.ts b/apps/web/src/state/swap/fetch/fetchBestPriceWithRouter.ts deleted file mode 100644 index f86b7707b9622..0000000000000 --- a/apps/web/src/state/swap/fetch/fetchBestPriceWithRouter.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { TradeType } from '@pancakeswap/sdk' -import { LegacyRouteType as RouteType } from '@pancakeswap/smart-router/legacy-router' - -export interface RequestBody { - networkId: number - baseToken: string - baseTokenName: string - baseTokenNumDecimals: number - quoteToken: string - quoteTokenName: string - quoteTokenNumDecimals: number - baseTokenAmount?: string - quoteTokenAmount?: string - trader: string -} - -interface Token { - address: string - chainId: number - decimals: number - symbol: string -} - -interface Pair { - liquidityToken?: Token - stableSwapAddress?: string - token0: Token - token1: Token - reserve0: string - reserve1: string -} - -export interface SmartRouterResponse { - tradeType: TradeType - route: { - input: Token - output: Token - routeType: RouteType - pairs: Pair[] - path: Token[] - } - outputAmount: string - inputAmount: string -} - -const headers = { - 'Content-Type': 'application/json', - Accept: 'application/json', -} - -export const getBestPriceWithRouter = (requestBody: RequestBody): Promise => - fetch('/smartRouter', { - method: 'POST', - headers, - body: JSON.stringify(requestBody), - }).then((response) => response.json()) diff --git a/apps/web/src/state/swap/normalizers.ts b/apps/web/src/state/swap/normalizers.ts deleted file mode 100644 index 7c1cc390bbf6a..0000000000000 --- a/apps/web/src/state/swap/normalizers.ts +++ /dev/null @@ -1,44 +0,0 @@ -import dayjs from 'dayjs' -import fromPairs from 'lodash/fromPairs' -import { DerivedPairDataNormalized, PairPricesNormalized } from './types' - -export const normalizeDerivedChartData = (data: any) => { - if (!data?.token0DerivedUSD || data?.token0DerivedUSD.length === 0) { - return [] - } - - const token1DerivedUSDEntryMap: any = fromPairs( - data?.token1DerivedUSD?.map((entry) => [entry.timestamp, entry]) ?? [], - ) - - return data?.token0DerivedUSD.reduce((acc, token0DerivedUSDEntry) => { - const token1DerivedUSDEntry = token1DerivedUSDEntryMap[token0DerivedUSDEntry.timestamp] - if (token1DerivedUSDEntry) { - acc.push({ - time: parseInt(token0DerivedUSDEntry.timestamp, 10), - token0Id: token0DerivedUSDEntry.tokenAddress, - token1Id: token1DerivedUSDEntry.tokenAddress, - token0DerivedUSD: token0DerivedUSDEntry.derivedUSD, - token1DerivedUSD: token1DerivedUSDEntry.derivedUSD, - }) - } - return acc - }, []) -} - -type normalizeDerivedPairDataByActiveTokenParams = { - pairData: DerivedPairDataNormalized - activeToken: string -} - -export const normalizeDerivedPairDataByActiveToken = ({ - pairData, - activeToken, -}: normalizeDerivedPairDataByActiveTokenParams): PairPricesNormalized => - pairData?.map((pairPrice) => ({ - time: dayjs.unix(pairPrice.time).toDate(), - value: - activeToken === pairPrice?.token0Id - ? pairPrice.token0DerivedUSD / pairPrice.token1DerivedUSD - : pairPrice.token1DerivedUSD / pairPrice.token0DerivedUSD, - })) diff --git a/apps/web/src/state/swap/types.ts b/apps/web/src/state/swap/types.ts index 6d6d38c9c9071..3a68afe7b9c9c 100644 --- a/apps/web/src/state/swap/types.ts +++ b/apps/web/src/state/swap/types.ts @@ -13,16 +13,3 @@ export type DerivedPairDataNormalized = { token0DerivedUSD: number token1DerivedUSD: number }[] - -export type PairPricesNormalized = { - time: Date - value: number -}[] - -export enum TradeState { - INVALID, - LOADING, - NO_ROUTE_FOUND, - SYNCING, - VALID, -} diff --git a/apps/web/src/views/AddLiquidity/ChoosePair.tsx b/apps/web/src/views/AddLiquidity/ChoosePair.tsx deleted file mode 100644 index 4d5a5fb3b58f4..0000000000000 --- a/apps/web/src/views/AddLiquidity/ChoosePair.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { useTranslation } from '@pancakeswap/localization' -import { Currency } from '@pancakeswap/sdk' -import { AddIcon, Box, CardBody, CardFooter, FlexGap, Text, TooltipText, useTooltip } from '@pancakeswap/uikit' -import { CommitButton } from 'components/CommitButton' -import ConnectWalletButton from 'components/ConnectWalletButton' -import { CurrencySelect } from 'components/CurrencySelect' -import { RowBetween } from 'components/Layout/Row' -import { useV2Pair } from 'hooks/usePairs' -import { useLPApr } from 'state/swap/useLPApr' -import { formatAmount } from 'utils/formatInfoNumbers' -import { useAccount } from 'wagmi' -import { AppHeader } from '../../components/App' -import { CommonBasesType } from '../../components/SearchModal/types' -import { useCurrencySelectRoute } from './useCurrencySelectRoute' - -export function ChoosePair({ - currencyA, - currencyB, - error, - onNext, -}: { - currencyA?: Currency - currencyB?: Currency - error?: string - onNext?: () => void -}) { - const { address: account } = useAccount() - const { t } = useTranslation() - const isValid = !error - const { handleCurrencyASelect, handleCurrencyBSelect } = useCurrencySelectRoute() - const [, pair] = useV2Pair(currencyA, currencyB) - const poolData = useLPApr('v2', pair) - const { targetRef, tooltip, tooltipVisible } = useTooltip( - t(`Based on last 24 hours' performance. Does not account for impermanent loss`), - { - placement: 'bottom', - }, - ) - - return ( - <> - - - - - {t('Choose a valid pair')} - - - - - - - {pair && poolData && ( - - - {t('LP reward APR')} - - {tooltipVisible && tooltip} - - {formatAmount(poolData.lpApr)}% - - - )} - - - - {!account ? ( - - ) : ( - - {error ?? t('Add Liquidity')} - - )} - - - ) -} diff --git a/apps/web/src/views/AddLiquidityV3/components/AprCalculator.tsx b/apps/web/src/views/AddLiquidityV3/components/AprCalculator.tsx deleted file mode 100644 index 0c39086103f39..0000000000000 --- a/apps/web/src/views/AddLiquidityV3/components/AprCalculator.tsx +++ /dev/null @@ -1,413 +0,0 @@ -import { useTranslation } from '@pancakeswap/localization' -import { Currency, CurrencyAmount, Price, Token, ZERO } from '@pancakeswap/sdk' -import { - CalculateIcon, - Flex, - IconButton, - PairDataTimeWindowEnum, - QuestionHelper, - RocketIcon, - Text, - TooltipText, -} from '@pancakeswap/uikit' -import { BIG_ZERO } from '@pancakeswap/utils/bigNumber' -import { formatPrice } from '@pancakeswap/utils/formatFractions' -import { - FeeCalculator, - Pool, - encodeSqrtRatioX96, - isPoolTickInRange, - parseProtocolFees, - TickMath, -} from '@pancakeswap/v3-sdk' -import { - RoiCalculatorModalV2, - RoiCalculatorPositionInfo, - useAmountsByUsdValue, - useRoi, -} from '@pancakeswap/widgets-internal/roi' -import { useCakePrice } from 'hooks/useCakePrice' -import { useRouter } from 'next/router' -import { useCallback, useMemo, useState } from 'react' -import { styled } from 'styled-components' - -import { PositionDetails, getPositionFarmApr, getPositionFarmAprFactor } from '@pancakeswap/farms' -import { Bound } from 'config/constants/types' -import { useFarm } from 'hooks/useFarm' -import { usePoolAvgTradingVolume } from 'hooks/usePoolTradingVolume' -import { useStablecoinPrice } from 'hooks/useStablecoinPrice' -import { useDerivedPositionInfo } from 'hooks/v3/useDerivedPositionInfo' -import { usePairTokensPrice } from 'hooks/v3/usePairTokensPrice' -import { useAllV3Ticks } from 'hooks/v3/usePoolTickData' -import useV3DerivedInfo from 'hooks/v3/useV3DerivedInfo' -import { batch } from 'react-redux' -import { CurrencyField as Field } from 'utils/types' -import currencyId from 'utils/currencyId' - -import { useUserPositionInfo } from 'views/Farms/components/YieldBooster/hooks/bCakeV3/useBCakeV3Info' -import { BoostStatus, useBoostStatus } from 'views/Farms/components/YieldBooster/hooks/bCakeV3/useBoostStatus' -import { getActiveTick } from 'utils/getActiveTick' -import { useV3MintActionHandlers } from '../formViews/V3FormView/form/hooks/useV3MintActionHandlers' -import { useV3FormState } from '../formViews/V3FormView/form/reducer' - -interface Props { - baseCurrency?: Currency | null - quoteCurrency?: Currency | null - feeAmount?: number - showTitle?: boolean - showQuestion?: boolean - allowApply?: boolean - positionDetails?: PositionDetails - defaultDepositUsd?: string - tokenAmount0?: CurrencyAmount - tokenAmount1?: CurrencyAmount -} - -const AprButtonContainer = styled(Flex)` - cursor: pointer; -` - -const deriveUSDPrice = (baseUSDPrice?: Price, pairPrice?: Price) => { - if (baseUSDPrice && pairPrice && pairPrice.greaterThan(ZERO)) { - const baseUSDPriceFloat = parseFloat(formatPrice(baseUSDPrice, 6) || '0') - return baseUSDPriceFloat / parseFloat(formatPrice(pairPrice, 6) || '0') - } - return undefined -} - -export function AprCalculator({ - baseCurrency, - quoteCurrency, - feeAmount, - showTitle = true, - showQuestion = false, - allowApply = true, - positionDetails, - defaultDepositUsd, - tokenAmount0, - tokenAmount1, -}: Props) { - const { t } = useTranslation() - const [isOpen, setOpen] = useState(false) - const [priceSpan, setPriceSpan] = useState(PairDataTimeWindowEnum.DAY) - const { data: farm } = useFarm({ currencyA: baseCurrency, currencyB: quoteCurrency, feeAmount }) - const cakePrice = useCakePrice() - - const formState = useV3FormState() - - const { position: existingPosition } = useDerivedPositionInfo(positionDetails) - const { pool, ticks, price, pricesAtTicks, parsedAmounts, currencyBalances } = useV3DerivedInfo( - baseCurrency ?? undefined, - quoteCurrency ?? undefined, - feeAmount, - baseCurrency ?? undefined, - existingPosition, - formState, - ) - const router = useRouter() - const poolAddress = useMemo(() => (pool ? Pool.getAddress(pool.token0, pool.token1, pool.fee) : undefined), [pool]) - - const prices = usePairTokensPrice(poolAddress, priceSpan, baseCurrency?.chainId, isOpen) - const sqrtRatioX96 = useMemo(() => price && encodeSqrtRatioX96(price.numerator, price.denominator), [price]) - const tickCurrent = useMemo( - () => (sqrtRatioX96 ? TickMath.getTickAtSqrtRatio(sqrtRatioX96) : undefined), - [sqrtRatioX96], - ) - const activeTick = useMemo(() => getActiveTick(tickCurrent, feeAmount), [tickCurrent, feeAmount]) - const { ticks: data } = useAllV3Ticks({ currencyA: baseCurrency, currencyB: quoteCurrency, feeAmount, activeTick }) - const volume24H = usePoolAvgTradingVolume({ - address: poolAddress, - chainId: pool?.token0.chainId, - }) - const { [Bound.LOWER]: tickLower, [Bound.UPPER]: tickUpper } = ticks - const { [Bound.LOWER]: priceLower, [Bound.UPPER]: priceUpper } = pricesAtTicks - const { [Field.CURRENCY_A]: amountA, [Field.CURRENCY_B]: amountB } = parsedAmounts - - const tokenA = (baseCurrency ?? undefined)?.wrapped - const tokenB = (quoteCurrency ?? undefined)?.wrapped - - const inverted = useMemo( - () => Boolean(tokenA && tokenB && tokenA?.address !== tokenB?.address && tokenB.sortsBefore(tokenA)), - [tokenA, tokenB], - ) - - const baseUSDPrice = useStablecoinPrice(baseCurrency) - const quoteUSDPrice = useStablecoinPrice(quoteCurrency) - const currencyAUsdPrice = useMemo( - () => - baseUSDPrice - ? parseFloat(formatPrice(baseUSDPrice, 6) || '0') - : deriveUSDPrice( - quoteUSDPrice, - quoteCurrency && price?.baseCurrency.equals(quoteCurrency.wrapped) ? price : price?.invert(), - ), - [baseUSDPrice, quoteUSDPrice, price, quoteCurrency], - ) - const currencyBUsdPrice = useMemo( - () => - baseUSDPrice && - (deriveUSDPrice( - baseUSDPrice, - baseCurrency && price?.baseCurrency.equals(baseCurrency.wrapped) ? price : price?.invert(), - ) || - parseFloat(formatPrice(quoteUSDPrice, 6) || '0')), - [baseUSDPrice, quoteUSDPrice, price, baseCurrency], - ) - - const depositUsd = useMemo( - () => - amountA && - amountB && - currencyAUsdPrice && - currencyBUsdPrice && - String(parseFloat(amountA.toExact()) * currencyAUsdPrice + parseFloat(amountB.toExact()) * currencyBUsdPrice), - [amountA, amountB, currencyAUsdPrice, currencyBUsdPrice], - ) - - // For now the protocol fee is the same on both tokens so here we just use the fee on token0 - const [protocolFee] = useMemo( - () => (pool?.feeProtocol && parseProtocolFees(pool.feeProtocol)) || [], - [pool?.feeProtocol], - ) - - const applyProtocolFee = defaultDepositUsd ? undefined : protocolFee - - const { amountA: aprAmountA, amountB: aprAmountB } = useAmountsByUsdValue({ - usdValue: '1', - currencyA: inverted ? tokenB : tokenA, - currencyB: inverted ? tokenA : tokenB, - price, - priceLower, - priceUpper, - sqrtRatioX96, - currencyAUsdPrice: inverted ? currencyBUsdPrice : currencyAUsdPrice, - currencyBUsdPrice: inverted ? currencyAUsdPrice : currencyBUsdPrice, - }) - - const validAmountA = amountA || (inverted ? tokenAmount1 : tokenAmount0) || (inverted ? aprAmountB : aprAmountA) - const validAmountB = amountB || (inverted ? tokenAmount0 : tokenAmount1) || (inverted ? aprAmountA : aprAmountB) - const { apr } = useRoi({ - tickLower, - tickUpper, - sqrtRatioX96, - fee: feeAmount, - mostActiveLiquidity: pool?.liquidity, - amountA: validAmountA, - amountB: validAmountB, - compoundOn: false, - currencyAUsdPrice, - currencyBUsdPrice, - volume24H, - protocolFee: applyProtocolFee, - }) - - const positionLiquidity = useMemo( - () => - existingPosition?.liquidity || - (validAmountA && - validAmountB && - sqrtRatioX96 && - typeof tickLower === 'number' && - typeof tickUpper === 'number' && - tickLower < tickUpper && - FeeCalculator.getLiquidityByAmountsAndPrice({ - amountA: validAmountA, - amountB: validAmountB, - tickUpper, - tickLower, - sqrtRatioX96, - })), - [existingPosition, validAmountA, validAmountB, tickUpper, tickLower, sqrtRatioX96], - ) - const [amount0, amount1] = inverted ? [validAmountB, validAmountA] : [validAmountA, validAmountB] - const inRange = useMemo(() => isPoolTickInRange(pool, tickLower, tickUpper), [pool, tickLower, tickUpper]) - const { positionFarmApr, positionFarmAprFactor } = useMemo(() => { - if (!farm || !cakePrice || !positionLiquidity || !amount0 || !amount1 || !inRange) { - return { - positionFarmApr: '0', - positionFarmAprFactor: BIG_ZERO, - } - } - const { farm: farmDetail, cakePerSecond } = farm - const { poolWeight, token, quoteToken, tokenPriceBusd, quoteTokenPriceBusd, lmPoolLiquidity } = farmDetail - const [token0Price, token1Price] = token.sortsBefore(quoteToken) - ? [tokenPriceBusd, quoteTokenPriceBusd] - : [quoteTokenPriceBusd, tokenPriceBusd] - const positionTvlUsd = +amount0.toExact() * +token0Price + +amount1.toExact() * +token1Price - return { - positionFarmApr: getPositionFarmApr({ - poolWeight, - positionTvlUsd, - cakePriceUsd: cakePrice, - liquidity: positionLiquidity, - cakePerSecond, - totalStakedLiquidity: lmPoolLiquidity, - }), - positionFarmAprFactor: getPositionFarmAprFactor({ - poolWeight, - cakePriceUsd: cakePrice, - liquidity: positionLiquidity, - cakePerSecond, - totalStakedLiquidity: lmPoolLiquidity, - }), - } - }, [farm, cakePrice, positionLiquidity, amount0, amount1, inRange]) - - // NOTE: Assume no liquidity when opening modal - const { onFieldAInput, onBothRangeInput, onSetFullRange } = useV3MintActionHandlers(false) - - const tokenId = useMemo(() => positionDetails?.tokenId?.toString() ?? '-1', [positionDetails?.tokenId]) - const pid = useMemo(() => farm?.farm?.pid ?? -1, [farm?.farm.pid]) - const { - data: { boostMultiplier }, - } = useUserPositionInfo(positionDetails?.tokenId?.toString() ?? '-1') - - const { status: boostedStatus } = useBoostStatus(pid, tokenId) - const isBoosted = useMemo(() => boostedStatus === BoostStatus.Boosted, [boostedStatus]) - - const closeModal = useCallback(() => setOpen(false), []) - const onApply = useCallback( - (position: RoiCalculatorPositionInfo) => { - batch(() => { - const isToken0Price = - position.amountA?.wrapped?.currency && - position.amountB?.wrapped?.currency && - position.amountA.wrapped.currency.sortsBefore(position.amountB.wrapped.currency) - if (position.fullRange) { - onSetFullRange() - } else { - onBothRangeInput({ - leftTypedValue: isToken0Price ? position.priceLower : position?.priceUpper?.invert(), - rightTypedValue: isToken0Price ? position.priceUpper : position?.priceLower?.invert(), - }) - } - - onFieldAInput(position.amountA?.toExact() || '') - }) - router.replace( - { - pathname: router.pathname, - query: { - ...router.query, - currency: [ - position.amountA ? currencyId(position.amountA.currency) : '', - position.amountB ? currencyId(position.amountB.currency) : '', - feeAmount ? feeAmount.toString() : '', - ], - }, - }, - undefined, - { - shallow: true, - }, - ) - closeModal() - }, - [closeModal, feeAmount, onBothRangeInput, onFieldAInput, onSetFullRange, router], - ) - - if (!data || !data.length) { - return null - } - - const hasFarmApr = positionFarmApr && +positionFarmApr > 0 - const combinedApr = hasFarmApr ? +apr.toSignificant(6) + +positionFarmApr : +apr.toSignificant(6) - const combinedAprWithBoosted = hasFarmApr - ? +apr.toSignificant(6) + +positionFarmApr * (isBoosted ? boostMultiplier : 1) - : +apr.toSignificant(6) - const aprDisplay = combinedApr.toLocaleString(undefined, { - maximumFractionDigits: 2, - minimumFractionDigits: 0, - }) - - const boostedAprDisplay = combinedAprWithBoosted.toLocaleString(undefined, { - maximumFractionDigits: 2, - minimumFractionDigits: 0, - }) - const farmAprTips = hasFarmApr ? ( - <> - {t('This position must be staking in farm to apply the combined APR with farming rewards.')} -
- - ) : null - const AprText = hasFarmApr ? TooltipText : Text - - return ( - <> - - {showTitle && ( - - {hasFarmApr ? t('APR (with farming)') : t('APR')} - - )} - - setOpen(true)}> - - {isBoosted && ( - <> - - - {boostedAprDisplay}% - - - )} - - {aprDisplay}% - - - - setOpen(true)}> - - - {showQuestion ? ( - - {farmAprTips} - {t( - 'Calculated at the current rates with historical trading volume data, and subject to change based on various external variables.', - )} -
-
- {t( - 'This figure is provided for your convenience only, and by no means represents guaranteed returns.', - )} - - } - size="20px" - placement="top" - /> - ) : null} -
-
- - - ) -} diff --git a/apps/web/src/views/GaugesVoting/components/GaugesFilter/FilterOption.tsx b/apps/web/src/views/GaugesVoting/components/GaugesFilter/FilterOption.tsx index 23a75aa6b644e..50c16a37ee79f 100644 --- a/apps/web/src/views/GaugesVoting/components/GaugesFilter/FilterOption.tsx +++ b/apps/web/src/views/GaugesVoting/components/GaugesFilter/FilterOption.tsx @@ -4,7 +4,7 @@ import { Trans, useTranslation } from '@pancakeswap/localization' import { AutoRow, Checkbox, FlexGap, GroupsIcon, RocketIcon, Tag, Text, VoteIcon } from '@pancakeswap/uikit' import { FeeAmount } from '@pancakeswap/v3-sdk' import styled from 'styled-components' -import { v3FeeToPercent } from 'views/Swap/V3Swap/utils/exchange' +import { v3FeeToPercent } from 'views/Swap/utils/exchange' import { NetworkBadge } from '../NetworkBadge' import { Gauges, OptionsType } from './type' diff --git a/apps/web/src/views/Idos/hooks/ido/useIDODepositCallback.tsx b/apps/web/src/views/Idos/hooks/ido/useIDODepositCallback.tsx index 839389c8ba833..e55e082144691 100644 --- a/apps/web/src/views/Idos/hooks/ido/useIDODepositCallback.tsx +++ b/apps/web/src/views/Idos/hooks/ido/useIDODepositCallback.tsx @@ -8,8 +8,8 @@ import { useCallback } from 'react' import { useLatestTxReceipt } from 'state/farmsV4/state/accountPositions/hooks/useLatestTxReceipt' import { isAddressEqual } from 'utils' import { WriteContractReturnType, erc20Abi, zeroAddress } from 'viem' -import { userRejectedError } from 'views/Swap/V3Swap/hooks/useSendSwapTransaction' import { useWriteContract } from 'wagmi' +import { userRejectedError } from 'views/Swap/hooks/useSendSwapTransaction' import { useW3WAccountSign } from '../w3w/useW3WAccountSign' import { useIDOContract } from './useIDOContract' import { useIDOPoolInfo } from './useIDOPoolInfo' diff --git a/apps/web/src/views/Swap/Twap/Twap.tsx b/apps/web/src/views/Swap/Twap/Twap.tsx index 7beb531970cd8..1d85ca226df52 100644 --- a/apps/web/src/views/Swap/Twap/Twap.tsx +++ b/apps/web/src/views/Swap/Twap/Twap.tsx @@ -227,15 +227,6 @@ const FlipButtonWrapper = styled.div` } ` -export const Line = styled.div` - position: absolute; - left: -16px; - right: -16px; - height: 1px; - background-color: ${({ theme }) => theme.colors.cardBorder}; - top: calc(50% + 6px); -` - const FlipButton = memo(function FlipButton({ onClick }: { onClick: () => void }) { const flipButtonRef = useRef(null) const lottieRef = useRef(null) diff --git a/apps/web/src/views/Swap/V3Swap/components/FormContainer.tsx b/apps/web/src/views/Swap/V3Swap/components/FormContainer.tsx deleted file mode 100644 index 19378380a8829..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/components/FormContainer.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { PropsWithChildren, memo } from 'react' -import { Column } from '@pancakeswap/uikit' - -import { Wrapper } from '../../components/styleds' - -export const FormContainer = memo(function FormContainer({ children }: PropsWithChildren) { - return ( - - {children} - - ) -}) diff --git a/apps/web/src/views/Swap/V3Swap/components/RoutesBreakdown.tsx b/apps/web/src/views/Swap/V3Swap/components/RoutesBreakdown.tsx deleted file mode 100644 index 3f42a85bafd22..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/components/RoutesBreakdown.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { useDebounce } from '@pancakeswap/hooks' -import { useTranslation } from '@pancakeswap/localization' -import { Route } from '@pancakeswap/smart-router' -import { Box, IconButton, QuestionHelper, SearchIcon, Text, useModalV2 } from '@pancakeswap/uikit' -import { memo } from 'react' -import { styled } from 'styled-components' - -import { RowBetween } from 'components/Layout/Row' -import SwapRoute from 'views/Swap/components/SwapRoute' -import { useWallchainStatus } from '../hooks/useWallchain' -import { RouteDisplayEssentials, RouteDisplayModal } from './RouteDisplayModal' - -interface Props { - routes?: RouteDisplayEssentials[] - wrapperStyle?: React.CSSProperties -} - -const RouteInfoContainer = styled(RowBetween)` - padding: 4px 24px 0; -` - -export const RoutesBreakdown = memo(function RoutesBreakdown({ routes = [], wrapperStyle }: Props) { - const [wallchainStatus] = useWallchainStatus() - const { t } = useTranslation() - const routeDisplayModal = useModalV2() - const deferWallchainStatus = useDebounce(wallchainStatus, 500) - - if (!routes.length) { - return null - } - - const count = routes.length - - return ( - <> - - - - {deferWallchainStatus === 'found' ? t('Bonus Route') : t('Route')} - - - - - - {count > 1 ? ( - {t('%count% Separate Routes', { count })} - ) : ( - - )} - - - - - - - - - ) -}) - -export const XRoutesBreakdown = memo(function XRoutesBreakdown({ wrapperStyle }: Props) { - const { t } = useTranslation() - - return ( - <> - - - - {t('Route')} - - - - - - - PancakeSwap X - - - - - - ) -}) - -interface RouteProps { - route: Pick -} - -function RouteComp({ route }: RouteProps) { - const { path } = route - - return ( - - - - ) -} diff --git a/apps/web/src/views/Swap/V3Swap/components/SwapModalFooter.tsx b/apps/web/src/views/Swap/V3Swap/components/SwapModalFooter.tsx deleted file mode 100644 index 22ea989f73680..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/components/SwapModalFooter.tsx +++ /dev/null @@ -1,289 +0,0 @@ -import { useTranslation } from '@pancakeswap/localization' -import { Currency, CurrencyAmount, Percent, TradeType } from '@pancakeswap/sdk' -import { SmartRouter } from '@pancakeswap/smart-router' -import { - AutoColumn, - BackForwardIcon, - Box, - Button, - Flex, - Link, - QuestionHelper, - Text, - WarningIcon, - useTooltip, -} from '@pancakeswap/uikit' -import { formatAmount } from '@pancakeswap/utils/formatFractions' -import { CurrencyLogo as CurrencyLogoWidget } from '@pancakeswap/widgets-internal' -import { AutoRow, RowBetween, RowFixed } from 'components/Layout/Row' -import { useGasToken } from 'hooks/useGasToken' -import { memo, useMemo, useState } from 'react' -import { Field } from 'state/swap/actions' -import { styled } from 'styled-components' -import { warningSeverity } from 'utils/exchange' - -import { paymasterInfo } from 'config/paymaster' -import { usePaymaster } from 'hooks/usePaymaster' -import { InterfaceOrder, isXOrder } from 'views/Swap/utils' -import { isAddressEqual } from 'utils' -import FormattedPriceImpact from '../../components/FormattedPriceImpact' -import { StyledBalanceMaxMini, SwapCallbackError } from '../../components/styleds' -import { SlippageAdjustedAmounts, formatExecutionPrice } from '../utils/exchange' - -const SwapModalFooterContainer = styled(AutoColumn)` - margin-top: 24px; - padding: 16px; - border-radius: ${({ theme }) => theme.radii.default}; - border: 1px solid ${({ theme }) => theme.colors.cardBorder}; - background-color: ${({ theme }) => theme.colors.background}; -` - -const SameTokenWarningBox = styled(Box)` - font-size: 13px; - background-color: #ffb2371a; - padding: 10px; - margin-top: 12px; - color: ${({ theme }) => theme.colors.yellow}; - border: 1px solid ${({ theme }) => theme.colors.yellow}; - border-radius: ${({ theme }) => theme.radii['12px']}; -` - -const StyledWarningIcon = styled(WarningIcon)` - fill: ${({ theme }) => theme.colors.yellow}; -` - -const Badge = styled.span` - font-size: 14px; - padding: 1px 6px; - user-select: none; - border-radius: ${({ theme }) => theme.radii['32px']}; - color: ${({ theme }) => theme.colors.invertedContrast}; - background-color: ${({ theme }) => theme.colors.success}; -` - -export const SwapModalFooter = memo(function SwapModalFooter({ - priceImpact: priceImpactWithoutFee, - lpFee: realizedLPFee, - inputAmount, - outputAmount, - order, - tradeType, - slippageAdjustedAmounts, - isEnoughInputBalance, - onConfirm, - swapErrorMessage, - disabledConfirm, -}: { - order?: InterfaceOrder - tradeType: TradeType - lpFee?: CurrencyAmount - inputAmount: CurrencyAmount - outputAmount: CurrencyAmount - priceImpact?: Percent - slippageAdjustedAmounts: SlippageAdjustedAmounts | undefined | null - isEnoughInputBalance?: boolean - swapErrorMessage?: string | undefined - disabledConfirm: boolean - onConfirm: () => void -}) { - const { t } = useTranslation() - const [showInverted, setShowInverted] = useState(false) - - const [gasToken] = useGasToken() - const { isPaymasterAvailable, isPaymasterTokenActive } = usePaymaster() - const gasTokenInfo = paymasterInfo[gasToken.isToken ? gasToken?.wrapped.address : ''] - - const showSameTokenWarning = useMemo( - () => - isPaymasterAvailable && - isPaymasterTokenActive && - gasTokenInfo?.discount !== 'FREE' && - inputAmount.currency?.wrapped.address && - !inputAmount.currency.isNative && - gasToken.isToken && - isAddressEqual(inputAmount.currency.wrapped.address, gasToken.wrapped.address), - [inputAmount, gasToken, isPaymasterAvailable, isPaymasterTokenActive, gasTokenInfo], - ) - - const { targetRef, tooltip, tooltipVisible } = useTooltip( - gasTokenInfo?.discount && - (gasTokenInfo.discount === 'FREE' - ? t('Gas fees is fully sponsored') - : t('%discount% discount on this gas fee token', { discount: gasTokenInfo.discount })), - ) - - const severity = warningSeverity(priceImpactWithoutFee) - - const executionPriceDisplay = useMemo(() => { - const price = SmartRouter.getExecutionPrice(order?.trade) ?? undefined - return formatExecutionPrice(price, inputAmount, outputAmount, showInverted) - }, [order, inputAmount, outputAmount, showInverted]) - - return ( - <> - - - {t('Price')} - - {executionPriceDisplay} - setShowInverted(!showInverted)}> - - - - - - - - {tradeType === TradeType.EXACT_INPUT ? t('Minimum received') : t('Maximum sold')} - - - - - - {tradeType === TradeType.EXACT_INPUT - ? formatAmount(slippageAdjustedAmounts?.[Field.OUTPUT], 4) ?? '-' - : formatAmount(slippageAdjustedAmounts?.[Field.INPUT], 4) ?? '-'} - - - {tradeType === TradeType.EXACT_INPUT ? outputAmount.currency.symbol : inputAmount.currency.symbol} - - - - - - {t('Price Impact')} - {t('The difference between the market price and your price due to trade size.')}} - /> - - - - - - {t('Trading Fee')} - - - {t( - 'Fee ranging from 0.1% to 0.01% depending on the pool fee tier. You can check the fee tier by clicking the magnifier icon under the “Route” section.', - )} - - - - {t('Fee Breakdown and Tokenomics')} - - - - } - /> - - {realizedLPFee || isXOrder(order) ? ( - - {isXOrder(order) ? ( - - 0 {inputAmount.currency.symbol} - - ) : null} - {!isXOrder(order) && realizedLPFee && ( - - {`${formatAmount(realizedLPFee, 6)} ${inputAmount.currency.symbol}`} - - )} - - ) : ( - - - - - )} - - {isPaymasterAvailable && isPaymasterTokenActive && ( - - - {t('Gas Token')} - {gasTokenInfo && gasTokenInfo.discount && ( - - ⛽️ {gasTokenInfo.discountLabel ?? gasTokenInfo.discount} - - )} - {tooltipVisible && tooltip} - - - - - {(gasToken && gasToken.symbol && gasToken.symbol.length > 10 - ? `${gasToken.symbol.slice(0, 4)}...${gasToken.symbol.slice( - gasToken.symbol.length - 5, - gasToken.symbol.length, - )}` - : gasToken?.symbol) || 'ETH'} - - -
- -

⛽️

-
-
-
- )} -
- - {showSameTokenWarning && ( - - - - - {t( - 'Please ensure you leave enough tokens for gas fees when selecting the same token for gas as the input token', - )} - - - - )} - - - - - {swapErrorMessage ? : null} - - - ) -}) diff --git a/apps/web/src/views/Swap/V3Swap/components/TransactionConfirmSwapContent.tsx b/apps/web/src/views/Swap/V3Swap/components/TransactionConfirmSwapContent.tsx deleted file mode 100644 index 3b892d110b503..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/components/TransactionConfirmSwapContent.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import { Currency, CurrencyAmount, TradeType } from '@pancakeswap/sdk' -import { ConfirmationModalContent } from '@pancakeswap/widgets-internal' -import { memo, useCallback, useMemo } from 'react' -import { Field } from 'state/swap/actions' -import { maxAmountSpend } from 'utils/maxAmountSpend' -import { InterfaceOrder, isXOrder } from 'views/Swap/utils' -import SwapModalHeader from '../../components/SwapModalHeader' -import { - computeSlippageAdjustedAmounts as computeSlippageAdjustedAmountsWithSmartRouter, - computeTradePriceBreakdown as computeTradePriceBreakdownWithSmartRouter, -} from '../utils/exchange' -import { SwapModalFooter } from './SwapModalFooter' - -/** - * Returns true if the trade requires a confirmation of details before we can submit it - * @param tradeA trade A - * @param tradeB trade B - */ -function tradeMeaningfullyDiffers(tradeA: InterfaceOrder['trade'], tradeB: InterfaceOrder['trade']): boolean { - return ( - tradeA.tradeType !== tradeB.tradeType || - !tradeA.inputAmount.currency.equals(tradeB.inputAmount.currency) || - !tradeA.inputAmount.equalTo(tradeB.inputAmount) || - !tradeA.outputAmount.currency.equals(tradeB.outputAmount.currency) || - !tradeA.outputAmount.equalTo(tradeB.outputAmount) - ) -} - -interface TransactionConfirmSwapContentProps { - order: InterfaceOrder | undefined | null - originalOrder: InterfaceOrder | undefined | null - // trade: Trade | undefined | null - // originalTrade: Trade | undefined | null - onAcceptChanges: () => void - allowedSlippage: number - onConfirm: () => void - recipient?: string | null - currencyBalances?: { - INPUT?: CurrencyAmount - OUTPUT?: CurrencyAmount - } -} - -export const TransactionConfirmSwapContent = memo( - function TransactionConfirmSwapContentComp({ - order, - recipient, - originalOrder, - allowedSlippage, - currencyBalances, - onConfirm, - onAcceptChanges, - }) { - const showAcceptChanges = useMemo( - () => Boolean(order && originalOrder && tradeMeaningfullyDiffers(order.trade, originalOrder.trade)), - [originalOrder, order], - ) - - const slippageAdjustedAmounts = useMemo( - () => computeSlippageAdjustedAmountsWithSmartRouter(order, allowedSlippage), - [order, allowedSlippage], - ) - const { priceImpactWithoutFee, lpFeeAmount } = useMemo( - () => computeTradePriceBreakdownWithSmartRouter(isXOrder(order) ? undefined : order?.trade), - [order], - ) - - const isEnoughInputBalance = useMemo(() => { - if (order?.trade?.tradeType !== TradeType.EXACT_OUTPUT) return null - - const isInputBalanceExist = !!(currencyBalances && currencyBalances[Field.INPUT]) - const isInputBalanceBNB = isInputBalanceExist && currencyBalances[Field.INPUT]?.currency.isNative - const inputCurrencyAmount = isInputBalanceExist - ? isInputBalanceBNB - ? maxAmountSpend(currencyBalances[Field.INPUT]) - : currencyBalances[Field.INPUT] - : null - return inputCurrencyAmount && slippageAdjustedAmounts && slippageAdjustedAmounts[Field.INPUT] - ? inputCurrencyAmount.greaterThan(slippageAdjustedAmounts[Field.INPUT]) || - inputCurrencyAmount.equalTo(slippageAdjustedAmounts[Field.INPUT]) - : false - }, [order?.trade?.tradeType, currencyBalances, slippageAdjustedAmounts]) - - const modalHeader = useCallback(() => { - return order ? ( - - ) : null - }, [ - order, - currencyBalances, - priceImpactWithoutFee, - allowedSlippage, - slippageAdjustedAmounts, - isEnoughInputBalance, - recipient, - showAcceptChanges, - onAcceptChanges, - ]) - - const modalBottom = useCallback(() => { - return order ? ( - - ) : null - }, [ - order, - lpFeeAmount, - priceImpactWithoutFee, - showAcceptChanges, - slippageAdjustedAmounts, - isEnoughInputBalance, - onConfirm, - ]) - - return - }, -) diff --git a/apps/web/src/views/Swap/V3Swap/components/index.ts b/apps/web/src/views/Swap/V3Swap/components/index.ts deleted file mode 100644 index 1bb15db4e47a7..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/components/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './FormContainer' -export * from './RoutesBreakdown' -export * from './TransactionConfirmSwapContent' -export * from './SwapModalFooter' -export * from './RouteDisplayModal' diff --git a/apps/web/src/views/Swap/V3Swap/containers/BuyCryptoLink.tsx b/apps/web/src/views/Swap/V3Swap/containers/BuyCryptoLink.tsx deleted file mode 100644 index 58f1aef27947d..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/BuyCryptoLink.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Currency } from '@pancakeswap/sdk' -import { memo } from 'react' -import { Row, Text } from '@pancakeswap/uikit' -import { useTranslation } from '@pancakeswap/localization' - -import InternalLink from 'components/Links' -import { useActiveChainId } from 'hooks/useActiveChainId' -import { useCanBuyCrypto } from 'hooks/useCanBuyCrypto' - -interface Props { - currency?: Currency | null -} - -export const BuyCryptoLink = memo(function BuyCryptoInstruction({ currency }: Props) { - const { t } = useTranslation() - const { chainId } = useActiveChainId() - const canBuyCrypto = useCanBuyCrypto({ chainId, currencySymbol: currency?.symbol }) - - if (!currency || !canBuyCrypto) { - return null - } - - return ( - - - {t('Insufficient Funds?')}{' '} - - {t('Buy Crypto here.')} - - - - ) -}) diff --git a/apps/web/src/views/Swap/V3Swap/containers/CommitButton.tsx b/apps/web/src/views/Swap/V3Swap/containers/CommitButton.tsx deleted file mode 100644 index cdedab345ae79..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/CommitButton.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { InterfaceOrder } from 'views/Swap/utils' -import { SwapCommitButton } from './SwapCommitButton' - -export type CommitButtonProps = { - order: InterfaceOrder | undefined - tradeError?: Error | null - tradeLoaded: boolean - beforeCommit?: () => void - afterCommit?: () => void -} - -export const CommitButton: React.FC = ({ - order, - tradeError, - tradeLoaded, - beforeCommit, - afterCommit, -}) => { - return ( - - ) -} diff --git a/apps/web/src/views/Swap/V3Swap/containers/ConfirmSwapModal.tsx b/apps/web/src/views/Swap/V3Swap/containers/ConfirmSwapModal.tsx deleted file mode 100644 index e9261bd256fff..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/ConfirmSwapModal.tsx +++ /dev/null @@ -1,312 +0,0 @@ -import { useTranslation } from '@pancakeswap/localization' -import { ChainId, Currency, CurrencyAmount, Token, TradeType } from '@pancakeswap/sdk' -import { useCallback, useMemo } from 'react' - -import { WrappedTokenInfo } from '@pancakeswap/token-lists' -import { Box, BscScanIcon, Flex, InjectedModalProps, Link } from '@pancakeswap/uikit' -import { formatAmount } from '@pancakeswap/utils/formatFractions' -import truncateHash from '@pancakeswap/utils/truncateHash' -import { useUserSlippage } from '@pancakeswap/utils/user' -import { - ApproveModalContent, - ConfirmModalState, - SwapPendingModalContent, - SwapTransactionReceiptModalContent, -} from '@pancakeswap/widgets-internal' -import AddToWalletButton, { AddToWalletTextOptions } from 'components/AddToWallet/AddToWalletButton' -import { useActiveChainId } from 'hooks/useActiveChainId' -import { Field } from 'state/swap/actions' -import { useSwapState } from 'state/swap/hooks' -import { getBlockExploreLink, getBlockExploreName } from 'utils' -import { wrappedCurrency } from 'utils/wrappedCurrency' -import ConfirmSwapModalContainer from 'views/Swap/components/ConfirmSwapModalContainer' -import { SwapTransactionErrorContent } from 'views/Swap/components/SwapTransactionErrorContent' - -import { Hash } from 'viem' -import { InterfaceOrder, isXOrder } from 'views/Swap/utils' -import { TransactionConfirmSwapContent } from '../components' -import { ConfirmAction } from '../hooks/useConfirmModalState' -import { AllowedAllowanceState } from '../types' -import { ApproveStepFlow } from './ApproveStepFlow' -import { useSlippageAdjustedAmounts } from '../hooks' - -export const useApprovalPhaseStepTitles: ({ trade }: { trade: InterfaceOrder['trade'] | undefined }) => { - [step in AllowedAllowanceState]: string -} = ({ trade }) => { - const { t } = useTranslation() - return useMemo(() => { - return { - [ConfirmModalState.RESETTING_APPROVAL]: t('Reset approval on USDT.'), - [ConfirmModalState.APPROVING_TOKEN]: t('Approve %symbol%', { - symbol: trade ? trade.inputAmount.currency.symbol : '', - }), - [ConfirmModalState.PERMITTING]: t('Permit %symbol%', { symbol: trade ? trade.inputAmount.currency.symbol : '' }), - } - }, [t, trade]) -} - -type ConfirmSwapModalProps = InjectedModalProps & { - customOnDismiss?: () => void - onDismiss?: () => void - confirmModalState: ConfirmModalState - pendingModalSteps: ConfirmAction[] - order?: InterfaceOrder | null - originalOrder?: InterfaceOrder | null - currencyBalances?: { [field in Field]?: CurrencyAmount } - txHash?: string - orderHash?: Hash - swapErrorMessage?: string - onAcceptChanges: () => void - onConfirm: (setConfirmModalState?: () => void) => void - openSettingModal?: () => void -} - -export const ConfirmSwapModal: React.FC = ({ - confirmModalState, - pendingModalSteps, - order, - originalOrder, - currencyBalances, - swapErrorMessage, - onDismiss, - customOnDismiss, - txHash, - orderHash, - openSettingModal, - onAcceptChanges, - onConfirm, -}) => { - const { t } = useTranslation() - const { chainId } = useActiveChainId() - const [allowedSlippage] = useUserSlippage() - const slippageAdjustedAmounts = useSlippageAdjustedAmounts(originalOrder) - const { recipient } = useSwapState() - const loadingAnimationVisible = useMemo(() => { - return [ - ConfirmModalState.RESETTING_APPROVAL, - ConfirmModalState.APPROVING_TOKEN, - ConfirmModalState.PERMITTING, - ].includes(confirmModalState) - }, [confirmModalState]) - const hasError = useMemo(() => swapErrorMessage !== undefined, [swapErrorMessage]) - const stepsVisible = useMemo(() => { - if (swapErrorMessage) return false - if (confirmModalState === ConfirmModalState.REVIEWING || confirmModalState === ConfirmModalState.COMPLETED) - return false - if (confirmModalState === ConfirmModalState.PENDING_CONFIRMATION && txHash) return false - return pendingModalSteps.length > 0 && pendingModalSteps.some((step) => step.showIndicator) - }, [confirmModalState, pendingModalSteps, swapErrorMessage, txHash]) - - const stepContents = useApprovalPhaseStepTitles({ trade: originalOrder?.trade }) - const token: Token | undefined = useMemo( - () => wrappedCurrency(originalOrder?.trade?.outputAmount?.currency, chainId), - [chainId, originalOrder?.trade?.outputAmount?.currency], - ) - - const showAddToWalletButton = useMemo(() => { - if (token && originalOrder?.trade?.outputAmount?.currency) { - return !originalOrder?.trade?.outputAmount?.currency?.isNative - } - return false - }, [token, originalOrder]) - - const handleDismiss = useCallback(() => { - if (typeof customOnDismiss === 'function') { - customOnDismiss() - } - - onDismiss?.() - }, [customOnDismiss, onDismiss]) - - const modalContent = useMemo(() => { - const isExactIn = originalOrder?.trade.tradeType === TradeType.EXACT_INPUT - const currencyA = currencyBalances?.INPUT?.currency ?? originalOrder?.trade?.inputAmount?.currency - const currencyB = currencyBalances?.OUTPUT?.currency ?? originalOrder?.trade?.outputAmount?.currency - const amountAWithSlippage = formatAmount(slippageAdjustedAmounts[Field.INPUT], 6) ?? '' - const amountBWithSlippage = formatAmount(slippageAdjustedAmounts[Field.OUTPUT], 6) ?? '' - const amountA = isExactIn ? amountAWithSlippage : `Max ${amountAWithSlippage}` - const amountB = isExactIn ? `Min ${amountBWithSlippage}` : amountBWithSlippage - - if (swapErrorMessage) { - return ( - - - - ) - } - if ( - confirmModalState === ConfirmModalState.APPROVING_TOKEN || - confirmModalState === ConfirmModalState.PERMITTING || - confirmModalState === ConfirmModalState.RESETTING_APPROVAL - ) { - return ( - step.step) as any} - /> - ) - } - - // TODO: x wrap flow - if (confirmModalState === ConfirmModalState.WRAPPING) { - return ( - - {showAddToWalletButton && (txHash || orderHash) ? ( - - ) : null} - - ) - } - - if (confirmModalState === ConfirmModalState.PENDING_CONFIRMATION) { - let title = txHash ? t('Transaction Submitted') : t('Confirm Swap') - - if (isXOrder(originalOrder)) { - title = txHash ? t('Order Filled') : orderHash ? t('Order Submitted') : t('Confirm Swap') - } - return ( - - {showAddToWalletButton && (txHash || orderHash) ? ( - - ) : null} - - ) - } - - if (confirmModalState === ConfirmModalState.COMPLETED && txHash) { - return ( - - {t('View on %site%', { site: getBlockExploreName(chainId) })}: {truncateHash(txHash, 8, 0)} - {chainId === ChainId.BSC && } - - ) : ( - <> - ) - } - > - {showAddToWalletButton && ( - - )} - - ) - } - - return ( - - ) - }, [ - slippageAdjustedAmounts, - currencyBalances, - order, - swapErrorMessage, - confirmModalState, - txHash, - recipient, - originalOrder, - allowedSlippage, - onConfirm, - onAcceptChanges, - chainId, - t, - handleDismiss, - openSettingModal, - stepContents, - pendingModalSteps, - showAddToWalletButton, - orderHash, - token, - ]) - - if (!chainId) return null - - return ( - - {modalContent} - {stepsVisible ? ( - step.step) as any} - /> - ) : null} - - ) -} diff --git a/apps/web/src/views/Swap/V3Swap/containers/FlipButton.tsx b/apps/web/src/views/Swap/V3Swap/containers/FlipButton.tsx deleted file mode 100644 index c75951f61a119..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/FlipButton.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { AutoColumn, Button } from '@pancakeswap/uikit' -import { Swap as SwapUI } from '@pancakeswap/widgets-internal' - -import { useCallback, memo } from 'react' -import replaceBrowserHistoryMultiple from '@pancakeswap/utils/replaceBrowserHistoryMultiple' -import { useTranslation } from '@pancakeswap/localization' - -import { useExpertMode } from '@pancakeswap/utils/user' -import { useSwapActionHandlers } from 'state/swap/useSwapActionHandlers' -import { useSwapState } from 'state/swap/hooks' -import { Field } from 'state/swap/actions' -import { AutoRow } from 'components/Layout/Row' - -import { useAllowRecipient } from '../hooks' - -export const FlipButton = memo(function FlipButton() { - const { t } = useTranslation() - const [isExpertMode] = useExpertMode() - const { onSwitchTokens, onChangeRecipient } = useSwapActionHandlers() - const { - recipient, - [Field.INPUT]: { currencyId: inputCurrencyId }, - [Field.OUTPUT]: { currencyId: outputCurrencyId }, - } = useSwapState() - const allowRecipient = useAllowRecipient() - - const onFlip = useCallback(() => { - onSwitchTokens() - replaceBrowserHistoryMultiple({ - inputCurrency: outputCurrencyId, - outputCurrency: inputCurrencyId, - }) - }, [onSwitchTokens, inputCurrencyId, outputCurrencyId]) - - return ( - - - - {allowRecipient && recipient === null ? ( - - ) : null} - - - ) -}) diff --git a/apps/web/src/views/Swap/V3Swap/containers/FormHeader.tsx b/apps/web/src/views/Swap/V3Swap/containers/FormHeader.tsx deleted file mode 100644 index 6a5ef65c93353..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/FormHeader.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useTranslation } from '@pancakeswap/localization' -import { FC, useCallback } from 'react' - -import CurrencyInputHeader from '../../components/CurrencyInputHeader' - -export const FormHeader: FC<{ refreshDisabled: boolean; onRefresh: () => void }> = ({ refreshDisabled, onRefresh }) => { - const { t } = useTranslation() - - const handleRefresh = useCallback(() => { - if (refreshDisabled) { - return - } - onRefresh() - }, [onRefresh, refreshDisabled]) - - return ( - - ) -} diff --git a/apps/web/src/views/Swap/V3Swap/containers/FormMain.tsx b/apps/web/src/views/Swap/V3Swap/containers/FormMain.tsx deleted file mode 100644 index 3462a1f73f834..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/FormMain.tsx +++ /dev/null @@ -1,157 +0,0 @@ -import { useTranslation } from '@pancakeswap/localization' -import { Currency, CurrencyAmount, Percent } from '@pancakeswap/sdk' -import { formatAmount } from '@pancakeswap/utils/formatFractions' -import replaceBrowserHistoryMultiple from '@pancakeswap/utils/replaceBrowserHistoryMultiple' -import { ReactNode, useCallback, useMemo } from 'react' - -import CurrencyInputPanel from 'components/CurrencyInputPanel' -import { CommonBasesType } from 'components/SearchModal/types' -import { useCurrency } from 'hooks/Tokens' -import { Field } from 'state/swap/actions' -import { useDefaultsFromURLSearch, useSwapState } from 'state/swap/hooks' -import { useSwapActionHandlers } from 'state/swap/useSwapActionHandlers' -import { useCurrencyBalances } from 'state/wallet/hooks' -import { currencyId } from 'utils/currencyId' -import { maxAmountSpend } from 'utils/maxAmountSpend' - -import { useAccount } from 'wagmi' -import useWarningImport from '../../hooks/useWarningImport' -import { FormContainer } from '../components' -import { useIsWrapping } from '../hooks' -import { FlipButton } from './FlipButton' -import { Recipient } from './Recipient' -import { RiskCheck } from './RiskCheck' - -interface Props { - inputAmount?: CurrencyAmount - outputAmount?: CurrencyAmount - tradeLoading?: boolean - pricingAndSlippage?: ReactNode - swapCommitButton?: ReactNode -} - -export function FormMain({ pricingAndSlippage, inputAmount, outputAmount, tradeLoading, swapCommitButton }: Props) { - const { address: account } = useAccount() - const { t } = useTranslation() - const warningSwapHandler = useWarningImport() - const { - independentField, - typedValue, - [Field.INPUT]: { currencyId: inputCurrencyId }, - [Field.OUTPUT]: { currencyId: outputCurrencyId }, - } = useSwapState() - const isWrapping = useIsWrapping() - const inputCurrency = useCurrency(inputCurrencyId) - const outputCurrency = useCurrency(outputCurrencyId) - const { onCurrencySelection, onUserInput } = useSwapActionHandlers() - const [inputBalance] = useCurrencyBalances(account, [inputCurrency, outputCurrency]) - const maxAmountInput = useMemo(() => maxAmountSpend(inputBalance), [inputBalance]) - const loadedUrlParams = useDefaultsFromURLSearch() - const handleTypeInput = useCallback((value: string) => onUserInput(Field.INPUT, value), [onUserInput]) - const handleTypeOutput = useCallback((value: string) => onUserInput(Field.OUTPUT, value), [onUserInput]) - - const handlePercentInput = useCallback( - (percent: number) => { - if (maxAmountInput) { - onUserInput(Field.INPUT, maxAmountInput.multiply(new Percent(percent, 100)).toExact()) - } - }, - [maxAmountInput, onUserInput], - ) - - const handleMaxInput = useCallback(() => { - if (maxAmountInput) { - onUserInput(Field.INPUT, maxAmountInput.toExact()) - } - }, [maxAmountInput, onUserInput]) - - const handleCurrencySelect = useCallback( - ( - newCurrency: Currency, - field: Field, - currentInputCurrencyId: string | undefined, - currentOutputCurrencyId: string | undefined, - ) => { - onCurrencySelection(field, newCurrency) - - warningSwapHandler(newCurrency) - - const isInput = field === Field.INPUT - const oldCurrencyId = isInput ? currentInputCurrencyId : currentOutputCurrencyId - const otherCurrencyId = isInput ? currentOutputCurrencyId : currentInputCurrencyId - const newCurrencyId = currencyId(newCurrency) - replaceBrowserHistoryMultiple({ - ...(newCurrencyId === otherCurrencyId && { [isInput ? 'outputCurrency' : 'inputCurrency']: oldCurrencyId }), - [isInput ? 'inputCurrency' : 'outputCurrency']: newCurrencyId, - }) - }, - [onCurrencySelection, warningSwapHandler], - ) - const handleInputSelect = useCallback( - (newCurrency: Currency) => - handleCurrencySelect(newCurrency, Field.INPUT, inputCurrencyId || '', outputCurrencyId || ''), - [handleCurrencySelect, inputCurrencyId, outputCurrencyId], - ) - const handleOutputSelect = useCallback( - (newCurrency: Currency) => - handleCurrencySelect(newCurrency, Field.OUTPUT, inputCurrencyId || '', outputCurrencyId || ''), - [handleCurrencySelect, inputCurrencyId, outputCurrencyId], - ) - - const isTypingInput = independentField === Field.INPUT - const inputValue = useMemo( - () => typedValue && (isTypingInput ? typedValue : formatAmount(inputAmount) || ''), - [typedValue, isTypingInput, inputAmount], - ) - const outputValue = useMemo( - () => typedValue && (isTypingInput ? formatAmount(outputAmount) || '' : typedValue), - [typedValue, isTypingInput, outputAmount], - ) - const inputLoading = typedValue ? !isTypingInput && tradeLoading : false - const outputLoading = typedValue ? isTypingInput && tradeLoading : false - - return ( - - - - - - - - {pricingAndSlippage} - {swapCommitButton} - - ) -} diff --git a/apps/web/src/views/Swap/V3Swap/containers/PricingAndSlippage.tsx b/apps/web/src/views/Swap/V3Swap/containers/PricingAndSlippage.tsx deleted file mode 100644 index 076d3e8aae3c9..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/PricingAndSlippage.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useModal } from '@pancakeswap/uikit' -import { Swap as SwapUI } from '@pancakeswap/widgets-internal' - -import { useTranslation } from '@pancakeswap/localization' -import { Price, Currency } from '@pancakeswap/sdk' -import { useUserSlippage } from '@pancakeswap/utils/user' -import { memo } from 'react' - -import SettingsModal from '../../../../components/Menu/GlobalSettings/SettingsModal' -import { SettingsMode } from '../../../../components/Menu/GlobalSettings/types' -import { useIsWrapping } from '../hooks' - -interface Props { - showSlippage?: boolean - priceLoading?: boolean - price?: Price -} - -export const PricingAndSlippage = memo(function PricingAndSlippage({ - priceLoading, - price, - showSlippage = true, -}: Props) { - const { t } = useTranslation() - const [allowedSlippage] = useUserSlippage() - const isWrapping = useIsWrapping() - const [onPresentSettingsModal] = useModal() - - if (isWrapping) { - return null - } - - const priceNode = price ? ( - <> - {t('Price')} - - - ) : null - - return ( - - ) -}) diff --git a/apps/web/src/views/Swap/V3Swap/containers/Recipient.tsx b/apps/web/src/views/Swap/V3Swap/containers/Recipient.tsx deleted file mode 100644 index 04dff30e665df..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/Recipient.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { ArrowDownIcon, Button } from '@pancakeswap/uikit' -import { useTranslation } from '@pancakeswap/localization' -import { memo } from 'react' - -import { useSwapActionHandlers } from 'state/swap/useSwapActionHandlers' -import { useSwapState } from 'state/swap/hooks' -import { AutoRow } from 'components/Layout/Row' - -import AddressInputPanel from '../../components/AddressInputPanel' -import { ArrowWrapper } from '../../components/styleds' -import { useAllowRecipient } from '../hooks' - -export const Recipient = memo(function Recipient() { - const { t } = useTranslation() - const { recipient } = useSwapState() - const { onChangeRecipient } = useSwapActionHandlers() - const allowRecipient = useAllowRecipient() - - if (!allowRecipient || recipient === null) { - return null - } - - return ( - <> - - - - - - - - - ) -}) diff --git a/apps/web/src/views/Swap/V3Swap/containers/RiskCheck.tsx b/apps/web/src/views/Swap/V3Swap/containers/RiskCheck.tsx deleted file mode 100644 index 2629a44cc1f9b..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/RiskCheck.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Box } from '@pancakeswap/uikit' -import { memo, useContext } from 'react' - -import AccessRisk from 'components/AccessRisk' - -import { UnsafeCurrency } from 'config/constants/types' -import { SwapFeaturesContext } from '../../SwapFeaturesContext' - -interface Props { - currency?: UnsafeCurrency -} - -export const RiskCheck = memo(function RiskCheck({ currency }: Props) { - const { isAccessTokenSupported } = useContext(SwapFeaturesContext) - - if (!isAccessTokenSupported || !currency?.isToken) { - return null - } - - return ( - - - - ) -}) diff --git a/apps/web/src/views/Swap/V3Swap/containers/SwapCommitButton.tsx b/apps/web/src/views/Swap/V3Swap/containers/SwapCommitButton.tsx deleted file mode 100644 index ed0d3cc5ba216..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/SwapCommitButton.tsx +++ /dev/null @@ -1,316 +0,0 @@ -import { Currency } from '@pancakeswap/swap-sdk-core' -import { AutoColumn, Box, Button, Dots, Message, MessageText, Text, useModal } from '@pancakeswap/uikit' -import React, { memo, useCallback, useEffect, useMemo, useState } from 'react' - -import { useTranslation } from '@pancakeswap/localization' -import { PriceOrder } from '@pancakeswap/price-api-sdk' -import { getUniversalRouterAddress } from '@pancakeswap/universal-router-sdk' -import { ConfirmModalState } from '@pancakeswap/widgets-internal' -import { GreyCard } from 'components/Card' -import { CommitButton } from 'components/CommitButton' -import ConnectWalletButton from 'components/ConnectWalletButton' -import { AutoRow } from 'components/Layout/Row' -import SettingsModal, { RoutingSettingsButton, withCustomOnDismiss } from 'components/Menu/GlobalSettings/SettingsModal' -import { SettingsMode } from 'components/Menu/GlobalSettings/types' -import { BIG_INT_ZERO } from 'config/constants/exchange' -import { useCurrency } from 'hooks/Tokens' -import { useIsTransactionUnsupported } from 'hooks/Trades' -import useWrapCallback, { WrapType } from 'hooks/useWrapCallback' -import { Field } from 'state/swap/actions' -import { useSwapState } from 'state/swap/hooks' -import { useSwapActionHandlers } from 'state/swap/useSwapActionHandlers' -import { useRoutingSettingChanged } from 'state/user/smartRouter' -import { useCurrencyBalances } from 'state/wallet/hooks' -import { logGTMClickSwapConfirmEvent, logGTMClickSwapEvent } from 'utils/customGTMEventTracking' -import { warningSeverity } from 'utils/exchange' -import { isClassicOrder, isXOrder } from 'views/Swap/utils' -import { useAccount, useChainId } from 'wagmi' -import { useParsedAmounts, useSlippageAdjustedAmounts, useSwapInputError } from '../hooks' -import { useConfirmModalState } from '../hooks/useConfirmModalState' -import { useSwapConfig } from '../hooks/useSwapConfig' -import { useSwapCurrency } from '../hooks/useSwapCurrency' -import { CommitButtonProps } from '../types' -import { computeTradePriceBreakdown } from '../utils/exchange' -import { ConfirmSwapModal } from './ConfirmSwapModal' - -const SettingsModalWithCustomDismiss = withCustomOnDismiss(SettingsModal) - -interface SwapCommitButtonPropsType { - order?: PriceOrder - tradeError?: Error | null - tradeLoading?: boolean -} - -const useSettingModal = (onDismiss) => { - const [openSettingsModal] = useModal( - , - ) - return openSettingsModal -} - -const useSwapCurrencies = () => { - const { - [Field.INPUT]: { currencyId: inputCurrencyId }, - [Field.OUTPUT]: { currencyId: outputCurrencyId }, - } = useSwapState() - const inputCurrency = useCurrency(inputCurrencyId) as Currency - const outputCurrency = useCurrency(outputCurrencyId) as Currency - return { inputCurrency, outputCurrency } -} - -const WrapCommitButtonReplace: React.FC = ({ children }) => { - const { t } = useTranslation() - const { inputCurrency, outputCurrency } = useSwapCurrencies() - const { typedValue } = useSwapState() - const { - wrapType, - execute: onWrap, - inputError: wrapInputError, - } = useWrapCallback(inputCurrency, outputCurrency, typedValue) - const showWrap = wrapType !== WrapType.NOT_APPLICABLE - - if (!showWrap) return children - - return ( - - {wrapInputError ?? (wrapType === WrapType.WRAP ? t('Wrap') : wrapType === WrapType.UNWRAP ? t('Unwrap') : null)} - - ) -} - -const ConnectButtonReplace = ({ children }) => { - const { address: account } = useAccount() - - if (!account) { - return - } - return children -} - -const UnsupportedSwapButtonReplace = ({ children }) => { - const { t } = useTranslation() - const { inputCurrency, outputCurrency } = useSwapCurrencies() - const swapIsUnsupported = useIsTransactionUnsupported(inputCurrency, outputCurrency) - - if (swapIsUnsupported) { - return ( - - ) - } - return children -} - -const SwapCommitButtonComp: React.FC = (props) => { - return ( - - - - - - - - ) -} - -export const SwapCommitButton = memo(SwapCommitButtonComp) - -const SwapCommitButtonInner = memo(function SwapCommitButtonInner({ - order, - tradeError, - tradeLoading, - beforeCommit, - afterCommit, -}: SwapCommitButtonPropsType & CommitButtonProps) { - const { address: account } = useAccount() - const { t } = useTranslation() - const chainId = useChainId() - // form data - const { independentField } = useSwapState() - const [inputCurrency, outputCurrency] = useSwapCurrency() - const { isExpertMode } = useSwapConfig() - - const tradePriceBreakdown = useMemo( - () => computeTradePriceBreakdown(isXOrder(order) ? undefined : order?.trade), - [order], - ) - - // warnings on slippage - const priceImpactSeverity = warningSeverity( - tradePriceBreakdown ? tradePriceBreakdown.priceImpactWithoutFee : undefined, - ) - - const relevantTokenBalances = useCurrencyBalances(account ?? undefined, [ - inputCurrency ?? undefined, - outputCurrency ?? undefined, - ]) - const currencyBalances = { - [Field.INPUT]: relevantTokenBalances[0], - [Field.OUTPUT]: relevantTokenBalances[1], - } - const parsedAmounts = useParsedAmounts(order?.trade, currencyBalances, false) - const parsedIndependentFieldAmount = parsedAmounts[independentField] - const swapInputError = useSwapInputError(order, currencyBalances) - const [tradeToConfirm, setTradeToConfirm] = useState(undefined) - const [indirectlyOpenConfirmModalState, setIndirectlyOpenConfirmModalState] = useState(false) - - // FIXME: using order as fallback here simply to avoid empty permit2 detail - // Need to fetch permit2 information on the fly instead - const orderToExecute = useMemo( - () => (isExpertMode ? order : tradeToConfirm?.trade ? tradeToConfirm : order), - [isExpertMode, order, tradeToConfirm], - ) - const slippageAdjustedAmounts = useSlippageAdjustedAmounts(orderToExecute) - const amountToApprove = useMemo( - () => - inputCurrency?.isNative - ? isXOrder(orderToExecute) - ? slippageAdjustedAmounts[Field.INPUT] - : undefined - : slippageAdjustedAmounts[Field.INPUT], - [inputCurrency?.isNative, orderToExecute, slippageAdjustedAmounts], - ) - - const { callToAction, confirmState, txHash, orderHash, confirmActions, errorMessage, resetState } = - useConfirmModalState(orderToExecute, amountToApprove?.wrapped, getUniversalRouterAddress(chainId)) - - const { onUserInput } = useSwapActionHandlers() - const reset = useCallback(() => { - afterCommit?.() - setTradeToConfirm(undefined) - if (confirmState === ConfirmModalState.COMPLETED) { - onUserInput(Field.INPUT, '') - } - resetState() - }, [afterCommit, confirmState, onUserInput, resetState]) - - const handleAcceptChanges = useCallback(() => { - setTradeToConfirm(order) - }, [order]) - - const noRoute = useMemo( - () => (isClassicOrder(order) && !((order.trade?.routes?.length ?? 0) > 0)) || tradeError, - [order, tradeError], - ) - const isValid = useMemo(() => !swapInputError && !tradeLoading, [swapInputError, tradeLoading]) - const disabled = useMemo( - () => !isValid || (priceImpactSeverity > 3 && !isExpertMode), - [isExpertMode, isValid, priceImpactSeverity], - ) - - const userHasSpecifiedInputOutput = Boolean( - inputCurrency && outputCurrency && parsedIndependentFieldAmount?.greaterThan(BIG_INT_ZERO), - ) - - const onConfirm = useCallback(() => { - beforeCommit?.() - logGTMClickSwapConfirmEvent() - callToAction() - }, [beforeCommit, callToAction]) - - // modals - const onSettingModalDismiss = useCallback(() => { - setIndirectlyOpenConfirmModalState(true) - }, []) - const openSettingModal = useSettingModal(onSettingModalDismiss) - const [openConfirmSwapModal] = useModal( - , - true, - true, - 'confirmSwapModal', - ) - - const handleSwap = useCallback(() => { - setTradeToConfirm(order) - resetState() - - // if expert mode turn-on, will not show preview modal - // start swap directly - if (isExpertMode) { - onConfirm() - } - - openConfirmSwapModal() - logGTMClickSwapEvent() - }, [isExpertMode, onConfirm, openConfirmSwapModal, resetState, order]) - - useEffect(() => { - if (indirectlyOpenConfirmModalState) { - setIndirectlyOpenConfirmModalState(false) - openConfirmSwapModal() - } - }, [indirectlyOpenConfirmModalState, openConfirmSwapModal]) - - if (noRoute && userHasSpecifiedInputOutput && !tradeLoading) { - return - } - - return ( - - 2 && !errorMessage ? 'danger' : 'primary'} - disabled={disabled} - onClick={handleSwap} - > - {swapInputError || - (tradeLoading && {t('Searching For The Best Price')}) || - (priceImpactSeverity > 3 && !isExpertMode - ? t('Price Impact Too High') - : priceImpactSeverity > 2 - ? t('Swap Anyway') - : t('Swap'))} - - - ) -}) - -const ResetRoutesButton = () => { - const { t } = useTranslation() - const [isRoutingSettingChange, resetRoutingSetting] = useRoutingSettingChanged() - return ( - - - {t('Insufficient liquidity for this trade.')} - - {isRoutingSettingChange && ( - }> - - {t('Unable to establish trading route due to customized routing.')} - - - {t('Check your settings')} - - {t('or')} - - - - - )} - - ) -} diff --git a/apps/web/src/views/Swap/V3Swap/containers/TradeDetails.tsx b/apps/web/src/views/Swap/V3Swap/containers/TradeDetails.tsx deleted file mode 100644 index 0ab321d1e4403..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/TradeDetails.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { SmartRouter } from '@pancakeswap/smart-router' -import { AutoColumn } from '@pancakeswap/uikit' -import { memo, useMemo } from 'react' - -import { TradeSummary } from 'views/Swap/components/AdvancedSwapDetails' -import { AdvancedDetailsFooter } from 'views/Swap/components/AdvancedSwapDetailsDropdown' - -import { PriceOrder } from '@pancakeswap/price-api-sdk' -import { GasTokenSelector } from 'components/Paymaster/GasTokenSelector' -import { usePaymaster } from 'hooks/usePaymaster' -import { isClassicOrder, isXOrder } from 'views/Swap/utils' -import { RoutesBreakdown, XRoutesBreakdown } from '../components' -import { useIsWrapping, useSlippageAdjustedAmounts } from '../hooks' -import { computeTradePriceBreakdown } from '../utils/exchange' - -interface Props { - loaded: boolean - order?: PriceOrder -} - -export const TradeDetails = memo(function TradeDetails({ loaded, order }: Props) { - const slippageAdjustedAmounts = useSlippageAdjustedAmounts(order) - const isWrapping = useIsWrapping() - const { priceImpactWithoutFee, lpFeeAmount } = useMemo( - () => computeTradePriceBreakdown(isXOrder(order) ? order.ammTrade : order?.trade), - [order], - ) - const hasStablePool = useMemo( - () => - isClassicOrder(order) - ? order.trade?.routes.some((route) => route.pools.some(SmartRouter.isStablePool)) - : undefined, - [order], - ) - - const { isPaymasterAvailable } = usePaymaster() - - if (isWrapping || !loaded || !order || !slippageAdjustedAmounts || !order.trade) { - return null - } - - const { inputAmount, outputAmount, tradeType } = order.trade - - return ( - - - - } - /> - {isXOrder(order) ? : } - - - ) -}) diff --git a/apps/web/src/views/Swap/V3Swap/containers/index.ts b/apps/web/src/views/Swap/V3Swap/containers/index.ts deleted file mode 100644 index 31db0702a350b..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/containers/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './BuyCryptoLink' -export * from './FormHeader' -export * from './FormMain' -export * from './PricingAndSlippage' -export * from './SwapCommitButton' -export * from './TradeDetails' diff --git a/apps/web/src/views/Swap/V3Swap/hooks/index.ts b/apps/web/src/views/Swap/V3Swap/hooks/index.ts deleted file mode 100644 index e4b40689401ec..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/hooks/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export * from './useAllowRecipient' -export * from './useIsWrapping' -export * from './useParsedAmounts' -export * from './useRouterAddress' -export * from './useSlippageAdjustedAmounts' -export * from './useSwapBestTrade' -export * from './useSwapCallback' -export * from './useSwapInputError' diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useCheckSufficient.ts b/apps/web/src/views/Swap/V3Swap/hooks/useCheckSufficient.ts deleted file mode 100644 index 30b5c328abe4f..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/hooks/useCheckSufficient.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { useAccount } from 'wagmi' - -import { useCurrency } from 'hooks/Tokens' -import first from 'lodash/first' -import { Field } from 'state/swap/actions' -import { useSwapState } from 'state/swap/hooks' -import { useCurrencyBalances } from 'state/wallet/hooks' - -import { InterfaceOrder } from 'views/Swap/utils' -import { useSlippageAdjustedAmounts } from './useSlippageAdjustedAmounts' - -export function useCheckInsufficientError(order?: InterfaceOrder | null | undefined) { - const { address: account } = useAccount() - - const { - [Field.INPUT]: { currencyId: inputCurrencyId }, - [Field.OUTPUT]: { currencyId: outputCurrencyId }, - } = useSwapState() - - const inputCurrency = useCurrency(inputCurrencyId) - const outputCurrency = useCurrency(outputCurrencyId) - - const slippageAdjustedAmounts = useSlippageAdjustedAmounts(order) - - const currencyBalances = useCurrencyBalances(account ?? undefined, [ - inputCurrency ?? undefined, - outputCurrency ?? undefined, - ]) - - const [balanceIn, amountIn] = [ - first(currencyBalances), - slippageAdjustedAmounts ? slippageAdjustedAmounts[Field.INPUT] : null, - ] - - return balanceIn && amountIn && balanceIn.lessThan(amountIn) ? inputCurrency : undefined -} diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useRouterAddress.ts b/apps/web/src/views/Swap/V3Swap/hooks/useRouterAddress.ts deleted file mode 100644 index 533f6f446fdee..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/hooks/useRouterAddress.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { TradeType } from '@pancakeswap/sdk' -import { SmartRouterTrade, RouteType, SMART_ROUTER_ADDRESSES } from '@pancakeswap/smart-router' - -import { V2_ROUTER_ADDRESS } from 'config/constants/exchange' - -export function useRouterAddress(trade?: SmartRouterTrade) { - if (!trade) { - return '' - } - - const { routes, inputAmount } = trade - const { - currency: { chainId }, - } = inputAmount - if (routes.length === 1 && routes[0].type === RouteType.V2) { - return V2_ROUTER_ADDRESS[chainId] - } - return SMART_ROUTER_ADDRESSES[chainId] -} diff --git a/apps/web/src/views/Swap/V3Swap/index.tsx b/apps/web/src/views/Swap/V3Swap/index.tsx deleted file mode 100644 index fd10435dc8929..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/index.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { SmartRouter } from '@pancakeswap/smart-router/evm' -import { useMemo } from 'react' -import { OrderType } from '@pancakeswap/price-api-sdk' - -import { logger } from 'utils/datadog' -import { useCurrencyUsdPrice } from 'hooks/useCurrencyUsdPrice' - -import { BuyCryptoLink, FormHeader, FormMain, PricingAndSlippage, TradeDetails } from './containers' -import { CommitButton } from './containers/CommitButton' -import { useAllTypeBestTrade } from './hooks/useAllTypeBestTrade' -import { useCheckInsufficientError } from './hooks/useCheckSufficient' - -export function V3SwapForm() { - const { - betterOrder, - bestOrder, - refreshOrder, - tradeError, - tradeLoaded, - refreshDisabled, - pauseQuoting, - resumeQuoting, - xOrder, - ammOrder, - } = useAllTypeBestTrade() - const { data: inputUsdPrice } = useCurrencyUsdPrice(bestOrder?.trade?.inputAmount.currency) - const { data: outputUsdPrice } = useCurrencyUsdPrice(bestOrder?.trade?.outputAmount.currency) - - const executionPrice = useMemo( - () => (bestOrder?.trade ? SmartRouter.getExecutionPrice(bestOrder.trade) : undefined), - [bestOrder?.trade], - ) - const insufficientFundCurrency = useCheckInsufficientError(bestOrder) - const commitHooks = useMemo(() => { - return { - beforeCommit: () => { - pauseQuoting() - try { - const validTrade = ammOrder?.trade ?? xOrder?.trade - if (!validTrade) { - throw new Error('No valid trade to log') - } - const { inputAmount, tradeType, outputAmount } = validTrade - const { currency: inputCurrency } = inputAmount - const { currency: outputCurrency } = outputAmount - const { chainId } = inputCurrency - const ammInputAmount = ammOrder?.trade?.inputAmount.toExact() - const ammOutputAmount = ammOrder?.trade?.outputAmount.toExact() - const xInputAmount = xOrder?.trade?.inputAmount.toExact() - const xOutputAmount = xOrder?.trade?.outputAmount.toExact() - logger.info('X/AMM Quote Comparison', { - chainId, - tradeType, - inputNative: inputCurrency.isNative, - outputNative: outputCurrency.isNative, - inputToken: inputCurrency.wrapped.address, - outputToken: outputCurrency.wrapped.address, - bestOrderType: betterOrder?.type, - ammOrder: { - type: ammOrder?.type, - inputAmount: ammInputAmount, - outputAmount: ammOutputAmount, - inputUsdValue: inputUsdPrice && ammInputAmount ? Number(ammInputAmount) * inputUsdPrice : undefined, - outputUsdValue: outputUsdPrice && ammOutputAmount ? Number(ammOutputAmount) * outputUsdPrice : undefined, - }, - xOrder: xOrder - ? { - filler: xOrder.type === OrderType.DUTCH_LIMIT ? xOrder.trade.orderInfo.exclusiveFiller : undefined, - type: xOrder.type, - inputAmount: xInputAmount, - outputAmount: xOutputAmount, - inputUsdValue: inputUsdPrice && xInputAmount ? Number(xInputAmount) * inputUsdPrice : undefined, - outputUsdValue: outputUsdPrice && xOutputAmount ? Number(xOutputAmount) * outputUsdPrice : undefined, - } - : undefined, - }) - } catch (error) { - // - } - }, - afterCommit: resumeQuoting, - } - }, [pauseQuoting, resumeQuoting, xOrder, ammOrder, inputUsdPrice, outputUsdPrice, betterOrder?.type]) - - return ( - <> - - - } - inputAmount={bestOrder?.trade?.inputAmount} - outputAmount={bestOrder?.trade?.outputAmount} - swapCommitButton={ - - } - /> - - - - - - ) -} diff --git a/apps/web/src/views/Swap/V3Swap/types.ts b/apps/web/src/views/Swap/V3Swap/types.ts deleted file mode 100644 index 6126b70301eba..0000000000000 --- a/apps/web/src/views/Swap/V3Swap/types.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { ConfirmModalState } from '@pancakeswap/widgets-internal' - -export enum ConfirmModalStateV1 { - REVIEWING, - RESETTING_APPROVAL, - APPROVING_TOKEN, - APPROVE_PENDING, - PENDING_CONFIRMATION, - COMPLETED, -} - -export type PendingConfirmModalStateV1 = Extract< - ConfirmModalStateV1, - | ConfirmModalStateV1.RESETTING_APPROVAL - | ConfirmModalStateV1.APPROVING_TOKEN - | ConfirmModalStateV1.APPROVE_PENDING - | ConfirmModalStateV1.PENDING_CONFIRMATION -> - -export type PendingConfirmModalState = Extract< - ConfirmModalState, - | ConfirmModalState.APPROVING_TOKEN - | ConfirmModalState.PERMITTING - | ConfirmModalState.PENDING_CONFIRMATION - | ConfirmModalState.WRAPPING - | ConfirmModalState.RESETTING_APPROVAL -> - -export type AllowedAllowanceState = - | ConfirmModalState.RESETTING_APPROVAL - | ConfirmModalState.APPROVING_TOKEN - | ConfirmModalState.PERMITTING - -export type CommitButtonProps = { - beforeCommit?: () => void - afterCommit?: () => void -} diff --git a/apps/web/src/views/Swap/components/AdvancedSwapDetails.tsx b/apps/web/src/views/Swap/components/AdvancedSwapDetails.tsx deleted file mode 100644 index 517eeb2582cec..0000000000000 --- a/apps/web/src/views/Swap/components/AdvancedSwapDetails.tsx +++ /dev/null @@ -1,279 +0,0 @@ -import { useTranslation } from '@pancakeswap/localization' -import { Currency, CurrencyAmount, Percent, TradeType } from '@pancakeswap/sdk' -import { LegacyPair as Pair } from '@pancakeswap/smart-router/legacy-router' -import { AutoColumn, Flex, Link, Modal, ModalV2, QuestionHelper, SearchIcon, Text } from '@pancakeswap/uikit' -import { formatAmount, formatFraction } from '@pancakeswap/utils/formatFractions' -import React, { memo, useState } from 'react' - -import { NumberDisplay } from '@pancakeswap/widgets-internal' -import { RowBetween, RowFixed } from 'components/Layout/Row' -import { RoutingSettingsButton } from 'components/Menu/GlobalSettings/SettingsModal' -import { Field } from 'state/swap/actions' -import { SlippageAdjustedAmounts } from '../V3Swap/utils/exchange' -import { useFeeSaved } from '../hooks/useFeeSaved' -import FormattedPriceImpact from './FormattedPriceImpact' -import { RouterViewer } from './RouterViewer' -import SwapRoute from './SwapRoute' - -export const TradeSummary = memo(function TradeSummary({ - inputAmount, - outputAmount, - tradeType, - slippageAdjustedAmounts, - priceImpactWithoutFee, - realizedLPFee, - gasTokenSelector, - isX = false, -}: { - hasStablePair?: boolean - inputAmount?: CurrencyAmount - outputAmount?: CurrencyAmount - tradeType?: TradeType - slippageAdjustedAmounts: SlippageAdjustedAmounts - priceImpactWithoutFee?: Percent | null - realizedLPFee?: CurrencyAmount | null - gasTokenSelector?: React.ReactNode - isX?: boolean -}) { - const { t } = useTranslation() - const isExactIn = tradeType === TradeType.EXACT_INPUT - const { feeSavedAmount, feeSavedUsdValue } = useFeeSaved(inputAmount, outputAmount) - - return ( - - {gasTokenSelector} - - - - {isExactIn ? t('Minimum received') : t('Maximum sold')} - - - - - - {isExactIn - ? `${formatAmount(slippageAdjustedAmounts[Field.OUTPUT], 4) ?? '-'} ${outputAmount?.currency?.symbol}` - : `${formatAmount(slippageAdjustedAmounts[Field.INPUT], 4) ?? '-'} ${inputAmount?.currency?.symbol}`} - - - - {feeSavedAmount ? ( - - - - {t('Fee saved')} - - - {t('Fees saved on PancakeSwap compared to major DEXs charging interface fees')} - - } - ml="4px" - placement="top" - /> - - - - - - - ) : null} - {priceImpactWithoutFee && ( - - - - {t('Price Impact')} - - - - - {t('AMM')} - - {`: ${t('The difference between the market price and estimated price due to trade size.')}`} - - - - {t('MM')} - - {`: ${t('No slippage against quote from market maker')}`} - - - } - ml="4px" - placement="top" - /> - - - {isX ? 0% : } - - )} - {(realizedLPFee || isX) && ( - - - - {t('Trading Fee')} - - - - - {t('AMM')} - - :{' '} - {t( - 'Fee ranging from 0.1% to 0.01% depending on the pool fee tier. You can check the fee tier by clicking the magnifier icon under the “Route” section.', - )} - - - - {t('Fee Breakdown and Tokenomics')} - - - - - {t('MM')} - - :{' '} - {t( - 'PancakeSwap does not charge any fees for trades. However, the market makers charge an implied fee of 0.05% - 0.25% (non-stablecoin) / 0.01% (stablecoin) factored into the quotes provided by them.', - )} - - - } - ml="4px" - placement="top" - /> - - {isX ? ( - - 0 {inputAmount?.currency?.symbol} - - ) : ( - {`${formatAmount(realizedLPFee, 4)} ${inputAmount?.currency?.symbol}`} - )} - - )} - - ) -}) - -export interface AdvancedSwapDetailsProps { - hasStablePair?: boolean - pairs?: Pair[] - path?: Currency[] - priceImpactWithoutFee?: Percent - realizedLPFee?: CurrencyAmount | null - slippageAdjustedAmounts: SlippageAdjustedAmounts - inputAmount?: CurrencyAmount - outputAmount?: CurrencyAmount - tradeType?: TradeType -} - -export const AdvancedSwapDetails = memo(function AdvancedSwapDetails({ - pairs, - path, - priceImpactWithoutFee, - realizedLPFee, - slippageAdjustedAmounts, - inputAmount, - outputAmount, - tradeType, - hasStablePair, -}: AdvancedSwapDetailsProps) { - const { t } = useTranslation() - const [isModalOpen, setIsModalOpen] = useState(false) - const showRoute = Boolean(path && path.length > 1) - return ( - - {inputAmount && ( - <> - - {showRoute && ( - <> - - - - {t('MM Route')} - - - - {path ? : null} - setIsModalOpen(true)} /> - setIsModalOpen(false)}> - - {t('Route')}{' '} - - - } - onDismiss={() => setIsModalOpen(false)} - > - - - - - - - - - )} - - )} - - ) -}) diff --git a/apps/web/src/views/Swap/components/AdvancedSwapDetailsDropdown.tsx b/apps/web/src/views/Swap/components/AdvancedSwapDetailsDropdown.tsx deleted file mode 100644 index ca031d11294bc..0000000000000 --- a/apps/web/src/views/Swap/components/AdvancedSwapDetailsDropdown.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { styled } from 'styled-components' - -export const AdvancedDetailsFooter = styled.div<{ show: boolean }>` - margin-top: ${({ show }) => (show ? '16px' : 0)}; - padding-top: 16px; - padding-bottom: 16px; - width: 100%; - max-width: 400px; - border-radius: 20px; - background-color: ${({ theme }) => theme.colors.invertedContrast}; - - transform: ${({ show }) => (show ? 'translateY(0%)' : 'translateY(-100%)')}; - transition: transform 300ms ease-in-out; -` diff --git a/apps/web/src/views/Swap/V3Swap/components/RouteDisplayModal.tsx b/apps/web/src/views/Swap/components/RouteDisplayModal.tsx similarity index 98% rename from apps/web/src/views/Swap/V3Swap/components/RouteDisplayModal.tsx rename to apps/web/src/views/Swap/components/RouteDisplayModal.tsx index ed1aa6e16c443..0852490c9d029 100644 --- a/apps/web/src/views/Swap/V3Swap/components/RouteDisplayModal.tsx +++ b/apps/web/src/views/Swap/components/RouteDisplayModal.tsx @@ -17,7 +17,7 @@ import { memo, useMemo } from 'react' import { RoutingSettingsButton } from 'components/Menu/GlobalSettings/SettingsModalV2' import { CurrencyLogoWrapper, RouterBox, RouterPoolBox, RouterTypeText } from 'views/Swap/components/RouterViewer' -import { v3FeeToPercent } from '../utils/exchange' +import { v3FeeToPercent } from 'views/Swap/utils/exchange' type Pair = [Currency, Currency] diff --git a/apps/web/src/views/Swap/V3Swap/components/SlippageButton.tsx b/apps/web/src/views/Swap/components/SlippageButton.tsx similarity index 100% rename from apps/web/src/views/Swap/V3Swap/components/SlippageButton.tsx rename to apps/web/src/views/Swap/components/SlippageButton.tsx diff --git a/apps/web/src/views/Swap/V3Swap/components/SwapModalFooterV2.tsx b/apps/web/src/views/Swap/components/SwapModalFooterV2.tsx similarity index 97% rename from apps/web/src/views/Swap/V3Swap/components/SwapModalFooterV2.tsx rename to apps/web/src/views/Swap/components/SwapModalFooterV2.tsx index 23d1bafb6c8c1..8ebf279bcef0f 100644 --- a/apps/web/src/views/Swap/V3Swap/components/SwapModalFooterV2.tsx +++ b/apps/web/src/views/Swap/components/SwapModalFooterV2.tsx @@ -29,9 +29,9 @@ import { paymasterInfo } from 'config/paymaster' import { usePaymaster } from 'hooks/usePaymaster' import { isAddressEqual } from 'utils' import { InterfaceOrder, isXOrder } from 'views/Swap/utils' -import FormattedPriceImpact from '../../components/FormattedPriceImpact' -import { StyledBalanceMaxMini, SwapCallbackError } from '../../components/styleds' -import { SlippageAdjustedAmounts, formatExecutionPrice } from '../utils/exchange' +import { SlippageAdjustedAmounts, formatExecutionPrice } from 'views/Swap/utils/exchange' +import FormattedPriceImpact from './FormattedPriceImpact' +import { StyledBalanceMaxMini, SwapCallbackError } from './styleds' import { SlippageButton } from './SlippageButton' const SwapModalFooterContainer = styled(AutoColumn)` diff --git a/apps/web/src/views/Swap/components/SwapModalHeader.tsx b/apps/web/src/views/Swap/components/SwapModalHeader.tsx index 46bbddd6ce3ef..1f810bed70851 100644 --- a/apps/web/src/views/Swap/components/SwapModalHeader.tsx +++ b/apps/web/src/views/Swap/components/SwapModalHeader.tsx @@ -8,7 +8,7 @@ import { CurrencyLogo } from 'components/Logo' import { ReactElement, useMemo } from 'react' import { Field } from 'state/swap/actions' import { basisPointsToPercent, warningSeverity } from 'utils/exchange' -import { SlippageAdjustedAmounts } from '../V3Swap/utils/exchange' +import { SlippageAdjustedAmounts } from 'views/Swap/utils/exchange' import { SwapShowAcceptChanges, TruncatedText } from './styleds' export default function SwapModalHeader({ diff --git a/apps/web/src/views/Swap/components/SwapSelection.tsx b/apps/web/src/views/Swap/components/SwapSelection.tsx deleted file mode 100644 index aeca2b7af1d6b..0000000000000 --- a/apps/web/src/views/Swap/components/SwapSelection.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { ButtonMenu, ButtonMenuItem } from '@pancakeswap/uikit' -import { useActiveChainId } from 'hooks/useActiveChainId' -import { useRouter } from 'next/router' -import { useCallback } from 'react' -import { SwapType } from '../types' -import { isTwapSupported } from '../utils' - -export const SwapSelection = ({ swapType }: { swapType: SwapType }) => { - const router = useRouter() - - const onSelect = useCallback( - (value: SwapType) => { - let url = '' - switch (value) { - case SwapType.LIMIT: - url = '/swap/limit' - break - case SwapType.TWAP: - url = '/swap/twap' - break - case SwapType.MARKET: - url = '/swap' - break - default: - break - } - router.push(url) - }, - [router], - ) - - const { chainId } = useActiveChainId() - if (!isTwapSupported(chainId)) return null - return ( - onSelect(index)} - variant="subtle" - > - MARKET - TWAP - LIMIT - - ) -} diff --git a/apps/web/src/views/Swap/V3Swap/components/TransactionConfirmSwapContentV2.tsx b/apps/web/src/views/Swap/components/TransactionConfirmSwapContentV2.tsx similarity index 99% rename from apps/web/src/views/Swap/V3Swap/components/TransactionConfirmSwapContentV2.tsx rename to apps/web/src/views/Swap/components/TransactionConfirmSwapContentV2.tsx index 840aa275c0682..cf11deddfb28b 100644 --- a/apps/web/src/views/Swap/V3Swap/components/TransactionConfirmSwapContentV2.tsx +++ b/apps/web/src/views/Swap/components/TransactionConfirmSwapContentV2.tsx @@ -8,7 +8,7 @@ import { InterfaceOrder, isXOrder } from 'views/Swap/utils' import { computeSlippageAdjustedAmounts as computeSlippageAdjustedAmountsWithSmartRouter, computeTradePriceBreakdown as computeTradePriceBreakdownWithSmartRouter, -} from '../utils/exchange' +} from 'views/Swap/utils/exchange' import { SwapModalFooterV2 } from './SwapModalFooterV2' /** diff --git a/apps/web/src/views/Swap/components/styleds.tsx b/apps/web/src/views/Swap/components/styleds.tsx index e8281205a6283..84664f4a3bdee 100644 --- a/apps/web/src/views/Swap/components/styleds.tsx +++ b/apps/web/src/views/Swap/components/styleds.tsx @@ -1,5 +1,5 @@ import { AutoColumn, ErrorIcon, Flex, Text } from '@pancakeswap/uikit' -import { css, styled } from 'styled-components' +import { styled } from 'styled-components' export const Wrapper = styled(Flex)` position: relative; @@ -8,20 +8,6 @@ export const Wrapper = styled(Flex)` padding: 1rem; ` -export const ArrowWrapper = styled.div<{ clickable: boolean }>` - padding: 2px; - - ${({ clickable }) => - clickable - ? css` - &:hover { - cursor: pointer; - opacity: 0.8; - } - ` - : null} -` - export const ErrorText = styled(Text)<{ severity?: 0 | 1 | 2 | 3 | 4 }>` color: ${({ theme, severity }) => severity === 3 || severity === 4 diff --git a/apps/web/src/views/Swap/V3Swap/containers/ApproveStepFlow.tsx b/apps/web/src/views/Swap/containers/ApproveStepFlow.tsx similarity index 100% rename from apps/web/src/views/Swap/V3Swap/containers/ApproveStepFlow.tsx rename to apps/web/src/views/Swap/containers/ApproveStepFlow.tsx diff --git a/apps/web/src/views/Swap/V3Swap/containers/ConfirmSwapModalV2.tsx b/apps/web/src/views/Swap/containers/ConfirmSwapModalV2.tsx similarity index 99% rename from apps/web/src/views/Swap/V3Swap/containers/ConfirmSwapModalV2.tsx rename to apps/web/src/views/Swap/containers/ConfirmSwapModalV2.tsx index 5478a54faa24b..23be94c7a5fe9 100644 --- a/apps/web/src/views/Swap/V3Swap/containers/ConfirmSwapModalV2.tsx +++ b/apps/web/src/views/Swap/containers/ConfirmSwapModalV2.tsx @@ -24,8 +24,8 @@ import { SwapTransactionErrorContent } from 'views/Swap/components/SwapTransacti import { Hash } from 'viem' import { InterfaceOrder, isXOrder } from 'views/Swap/utils' +import { useSlippageAdjustedAmounts } from 'views/Swap/hooks/useSlippageAdjustedAmounts' import { TransactionConfirmSwapContentV2 } from '../components/TransactionConfirmSwapContentV2' -import { useSlippageAdjustedAmounts } from '../hooks' import { ConfirmAction } from '../hooks/useConfirmModalState' import { AllowedAllowanceState } from '../types' import { ApproveStepFlow } from './ApproveStepFlow' diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useAllTypeBestTrade.ts b/apps/web/src/views/Swap/hooks/useAllTypeBestTrade.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useAllTypeBestTrade.ts rename to apps/web/src/views/Swap/hooks/useAllTypeBestTrade.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useAllowRecipient.ts b/apps/web/src/views/Swap/hooks/useAllowRecipient.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useAllowRecipient.ts rename to apps/web/src/views/Swap/hooks/useAllowRecipient.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useConfirmModalState.tsx b/apps/web/src/views/Swap/hooks/useConfirmModalState.tsx similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useConfirmModalState.tsx rename to apps/web/src/views/Swap/hooks/useConfirmModalState.tsx diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useIsWrapping.ts b/apps/web/src/views/Swap/hooks/useIsWrapping.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useIsWrapping.ts rename to apps/web/src/views/Swap/hooks/useIsWrapping.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useParsedAmounts.ts b/apps/web/src/views/Swap/hooks/useParsedAmounts.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useParsedAmounts.ts rename to apps/web/src/views/Swap/hooks/useParsedAmounts.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useSendSwapTransaction.ts b/apps/web/src/views/Swap/hooks/useSendSwapTransaction.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useSendSwapTransaction.ts rename to apps/web/src/views/Swap/hooks/useSendSwapTransaction.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useSlippageAdjustedAmounts.ts b/apps/web/src/views/Swap/hooks/useSlippageAdjustedAmounts.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useSlippageAdjustedAmounts.ts rename to apps/web/src/views/Swap/hooks/useSlippageAdjustedAmounts.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useSwapBestTrade.ts b/apps/web/src/views/Swap/hooks/useSwapBestTrade.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useSwapBestTrade.ts rename to apps/web/src/views/Swap/hooks/useSwapBestTrade.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useSwapCallArguments.ts b/apps/web/src/views/Swap/hooks/useSwapCallArguments.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useSwapCallArguments.ts rename to apps/web/src/views/Swap/hooks/useSwapCallArguments.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useSwapCallback.ts b/apps/web/src/views/Swap/hooks/useSwapCallback.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useSwapCallback.ts rename to apps/web/src/views/Swap/hooks/useSwapCallback.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useSwapConfig.ts b/apps/web/src/views/Swap/hooks/useSwapConfig.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useSwapConfig.ts rename to apps/web/src/views/Swap/hooks/useSwapConfig.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useSwapCurrency.ts b/apps/web/src/views/Swap/hooks/useSwapCurrency.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useSwapCurrency.ts rename to apps/web/src/views/Swap/hooks/useSwapCurrency.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useSwapInputError.ts b/apps/web/src/views/Swap/hooks/useSwapInputError.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useSwapInputError.ts rename to apps/web/src/views/Swap/hooks/useSwapInputError.ts diff --git a/apps/web/src/views/Swap/V3Swap/hooks/useWallchain.ts b/apps/web/src/views/Swap/hooks/useWallchain.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/hooks/useWallchain.ts rename to apps/web/src/views/Swap/hooks/useWallchain.ts diff --git a/apps/web/src/views/Swap/index.tsx b/apps/web/src/views/Swap/index.tsx deleted file mode 100644 index efc712ca76a4a..0000000000000 --- a/apps/web/src/views/Swap/index.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { Currency } from '@pancakeswap/sdk' -import { BottomDrawer, Flex, useMatchBreakpoints } from '@pancakeswap/uikit' -import { useRouter } from 'next/router' -import { useContext, useEffect, useState } from 'react' - -import { useCurrency } from 'hooks/Tokens' -import { useSwapHotTokenDisplay } from 'hooks/useSwapHotTokenDisplay' -import { Field } from 'state/swap/actions' -import { useSingleTokenSwapInfo, useSwapState } from 'state/swap/hooks' -import Page from '../Page' -import PriceChartContainer from './components/Chart/PriceChartContainer' -import { SwapFeaturesContext } from './SwapFeaturesContext' - -export default function Swap() { - const { query } = useRouter() - const { isDesktop } = useMatchBreakpoints() - const { isChartExpanded, isChartDisplayed, setIsChartDisplayed, setIsChartExpanded, isChartSupported } = - useContext(SwapFeaturesContext) - const [isSwapHotTokenDisplay, setIsSwapHotTokenDisplay] = useSwapHotTokenDisplay() - const [firstTime, setFirstTime] = useState(true) - - useEffect(() => { - if (firstTime && query.showTradingReward) { - setFirstTime(false) - setIsSwapHotTokenDisplay(true) - - if (!isSwapHotTokenDisplay && isChartDisplayed) { - setIsChartDisplayed?.((currentIsChartDisplayed) => !currentIsChartDisplayed) - } - } - }, [firstTime, isChartDisplayed, isSwapHotTokenDisplay, query, setIsSwapHotTokenDisplay, setIsChartDisplayed]) - - // swap state & price data - const { - [Field.INPUT]: { currencyId: inputCurrencyId }, - [Field.OUTPUT]: { currencyId: outputCurrencyId }, - } = useSwapState() - const inputCurrency = useCurrency(inputCurrencyId) - const outputCurrency = useCurrency(outputCurrencyId) - - const currencies: { [field in Field]?: Currency } = { - [Field.INPUT]: inputCurrency ?? undefined, - [Field.OUTPUT]: outputCurrency ?? undefined, - } - - const singleTokenPrice = useSingleTokenSwapInfo( - inputCurrencyId, - inputCurrency, - outputCurrencyId, - outputCurrency, - isChartSupported, - ) - - return ( - - - {isDesktop && isChartSupported && ( - - )} - {!isDesktop && isChartSupported && ( - - } - isOpen={isChartDisplayed} - setIsOpen={(isOpen) => setIsChartDisplayed?.(isOpen)} - /> - )} - {/* - - - - - - - - - */} - - - ) -} diff --git a/apps/web/src/views/Swap/styles.tsx b/apps/web/src/views/Swap/styles.tsx index 993dca4145ade..f55410ceebcb0 100644 --- a/apps/web/src/views/Swap/styles.tsx +++ b/apps/web/src/views/Swap/styles.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@pancakeswap/uikit' +import { Flex } from '@pancakeswap/uikit' import { styled } from 'styled-components' export const StyledSwapContainer = styled(Flex)<{ $isChartExpanded: boolean }>` @@ -17,7 +17,3 @@ export const StyledSwapContainer = styled(Flex)<{ $isChartExpanded: boolean }>` ${({ $isChartExpanded }) => ($isChartExpanded ? 'padding: 0 120px' : 'padding: 0 40px')}; } ` - -export const StyledInputCurrencyWrapper = styled(Box)` - width: 328px; -` diff --git a/apps/web/src/views/Swap/types.ts b/apps/web/src/views/Swap/types.ts index 4bff29ed02e00..3791d45b771ae 100644 --- a/apps/web/src/views/Swap/types.ts +++ b/apps/web/src/views/Swap/types.ts @@ -1,5 +1,26 @@ +import { ConfirmModalState } from '@pancakeswap/widgets-internal' + export enum SwapType { MARKET, TWAP, LIMIT, } + +export type PendingConfirmModalState = Extract< + ConfirmModalState, + | ConfirmModalState.APPROVING_TOKEN + | ConfirmModalState.PERMITTING + | ConfirmModalState.PENDING_CONFIRMATION + | ConfirmModalState.WRAPPING + | ConfirmModalState.RESETTING_APPROVAL +> + +export type AllowedAllowanceState = + | ConfirmModalState.RESETTING_APPROVAL + | ConfirmModalState.APPROVING_TOKEN + | ConfirmModalState.PERMITTING + +export type CommitButtonProps = { + beforeCommit?: () => void + afterCommit?: () => void +} diff --git a/apps/web/src/views/Swap/V3Swap/utils/exchange.ts b/apps/web/src/views/Swap/utils/exchange.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/utils/exchange.ts rename to apps/web/src/views/Swap/utils/exchange.ts diff --git a/apps/web/src/views/Swap/V3Swap/utils/isZero.ts b/apps/web/src/views/Swap/utils/isZero.ts similarity index 100% rename from apps/web/src/views/Swap/V3Swap/utils/isZero.ts rename to apps/web/src/views/Swap/utils/isZero.ts diff --git a/apps/web/src/views/SwapSimplify/V4Swap/AdvancedSwapDetails.tsx b/apps/web/src/views/SwapSimplify/V4Swap/AdvancedSwapDetails.tsx index bb63025876460..889c9e7e56848 100644 --- a/apps/web/src/views/SwapSimplify/V4Swap/AdvancedSwapDetails.tsx +++ b/apps/web/src/views/SwapSimplify/V4Swap/AdvancedSwapDetails.tsx @@ -22,12 +22,12 @@ import { RowBetween, RowFixed } from 'components/Layout/Row' import { RoutingSettingsButton } from 'components/Menu/GlobalSettings/SettingsModalV2' import { Field } from 'state/swap/actions' import { styled } from 'styled-components' -import FormattedPriceImpact from '../../Swap/components/FormattedPriceImpact' -import { RouterViewer } from '../../Swap/components/RouterViewer' -import SwapRoute from '../../Swap/components/SwapRoute' -import { useFeeSaved } from '../../Swap/hooks/useFeeSaved' -import { SlippageButton } from '../../Swap/V3Swap/components/SlippageButton' -import { SlippageAdjustedAmounts } from '../../Swap/V3Swap/utils/exchange' +import { SlippageAdjustedAmounts } from 'views/Swap/utils/exchange' +import FormattedPriceImpact from 'views/Swap/components/FormattedPriceImpact' +import { RouterViewer } from 'views/Swap/components/RouterViewer' +import SwapRoute from 'views/Swap/components/SwapRoute' +import { useFeeSaved } from 'views/Swap/hooks/useFeeSaved' +import { SlippageButton } from 'views/Swap/components/SlippageButton' const DetailsTitle = styled(Text)` text-decoration: underline dotted; @@ -236,95 +236,3 @@ export const TradeSummary = memo(function TradeSummary({ ) }) - -export interface AdvancedSwapDetailsProps { - hasStablePair?: boolean - pairs?: Pair[] - path?: Currency[] - priceImpactWithoutFee?: Percent - realizedLPFee?: CurrencyAmount | null - slippageAdjustedAmounts: SlippageAdjustedAmounts - inputAmount?: CurrencyAmount - outputAmount?: CurrencyAmount - tradeType?: TradeType -} - -export const AdvancedSwapDetails = memo(function AdvancedSwapDetails({ - pairs, - path, - priceImpactWithoutFee, - realizedLPFee, - slippageAdjustedAmounts, - inputAmount, - outputAmount, - tradeType, - hasStablePair, -}: AdvancedSwapDetailsProps) { - const { t } = useTranslation() - const [isModalOpen, setIsModalOpen] = useState(false) - const showRoute = Boolean(path && path.length > 1) - return ( - - {inputAmount && ( - <> - - {showRoute && ( - <> - - - - {t('MM Route')} - - - - {path ? : null} - setIsModalOpen(true)} /> - setIsModalOpen(false)}> - - {t('Route')}{' '} - - - } - onDismiss={() => setIsModalOpen(false)} - > - - - - - - - - - )} - - )} - - ) -}) diff --git a/apps/web/src/views/SwapSimplify/V4Swap/FlipButton.tsx b/apps/web/src/views/SwapSimplify/V4Swap/FlipButton.tsx index f942682f7ec0f..e6a2d6be290a8 100644 --- a/apps/web/src/views/SwapSimplify/V4Swap/FlipButton.tsx +++ b/apps/web/src/views/SwapSimplify/V4Swap/FlipButton.tsx @@ -15,7 +15,7 @@ import { keyframes, styled } from 'styled-components' import { useTheme } from '@pancakeswap/hooks' import { SwapUIV2 } from '@pancakeswap/widgets-internal' import { LottieRefCurrentProps } from 'lottie-react' -import { useAllowRecipient } from '../../Swap/V3Swap/hooks' +import { useAllowRecipient } from 'views/Swap/hooks/useAllowRecipient' import ArrowDark from '../../../../public/images/swap/arrow_dark.json' assert { type: 'json' } import ArrowLight from '../../../../public/images/swap/arrow_light.json' assert { type: 'json' } diff --git a/apps/web/src/views/SwapSimplify/V4Swap/FormMainV4.tsx b/apps/web/src/views/SwapSimplify/V4Swap/FormMainV4.tsx index 862b23eb21e47..d7f19070606ab 100644 --- a/apps/web/src/views/SwapSimplify/V4Swap/FormMainV4.tsx +++ b/apps/web/src/views/SwapSimplify/V4Swap/FormMainV4.tsx @@ -16,8 +16,8 @@ import { currencyId } from 'utils/currencyId' import { maxAmountSpend } from 'utils/maxAmountSpend' import { useAccount } from 'wagmi' -import useWarningImport from '../../Swap/hooks/useWarningImport' -import { useIsWrapping } from '../../Swap/V3Swap/hooks' +import useWarningImport from 'views/Swap/hooks/useWarningImport' +import { useIsWrapping } from 'views/Swap/hooks/useIsWrapping' import { AssignRecipientButton, FlipButton } from './FlipButton' import { FormContainer } from './FormContainer' import { Recipient } from './Recipient' diff --git a/apps/web/src/views/SwapSimplify/V4Swap/PricingAndSlippage.tsx b/apps/web/src/views/SwapSimplify/V4Swap/PricingAndSlippage.tsx index 6c01971df5d91..b986abdd79a91 100644 --- a/apps/web/src/views/SwapSimplify/V4Swap/PricingAndSlippage.tsx +++ b/apps/web/src/views/SwapSimplify/V4Swap/PricingAndSlippage.tsx @@ -7,7 +7,7 @@ import { memo } from 'react' import SettingsModal from 'components/Menu/GlobalSettings/SettingsModal' import { SettingsMode } from 'components/Menu/GlobalSettings/types' -import { useIsWrapping } from '../../Swap/V3Swap/hooks' +import { useIsWrapping } from 'views/Swap/hooks/useIsWrapping' interface Props { showSlippage?: boolean diff --git a/apps/web/src/views/SwapSimplify/V4Swap/Recipient.tsx b/apps/web/src/views/SwapSimplify/V4Swap/Recipient.tsx index ddc39d0c7637a..27e9fd7c30318 100644 --- a/apps/web/src/views/SwapSimplify/V4Swap/Recipient.tsx +++ b/apps/web/src/views/SwapSimplify/V4Swap/Recipient.tsx @@ -3,7 +3,7 @@ import { memo } from 'react' import { useSwapState } from 'state/swap/hooks' import { useSwapActionHandlers } from 'state/swap/useSwapActionHandlers' -import { useAllowRecipient } from '../../Swap/V3Swap/hooks' +import { useAllowRecipient } from 'views/Swap/hooks/useAllowRecipient' import AddressInputPanel from './AddressInputPanel' export const Recipient = memo(function Recipient() { diff --git a/apps/web/src/views/SwapSimplify/V4Swap/RoutesBreakdown.tsx b/apps/web/src/views/SwapSimplify/V4Swap/RoutesBreakdown.tsx index 27b825395e47a..ab9d068187adf 100644 --- a/apps/web/src/views/SwapSimplify/V4Swap/RoutesBreakdown.tsx +++ b/apps/web/src/views/SwapSimplify/V4Swap/RoutesBreakdown.tsx @@ -7,8 +7,8 @@ import { styled } from 'styled-components' import { RowBetween } from 'components/Layout/Row' import SwapRoute from 'views/Swap/components/SwapRoute' -import { RouteDisplayEssentials, RouteDisplayModal } from '../../Swap/V3Swap/components/RouteDisplayModal' -import { useWallchainStatus } from '../../Swap/V3Swap/hooks/useWallchain' +import { RouteDisplayEssentials, RouteDisplayModal } from 'views/Swap/components/RouteDisplayModal' +import { useWallchainStatus } from 'views/Swap/hooks/useWallchain' interface Props { routes?: RouteDisplayEssentials[] diff --git a/apps/web/src/views/SwapSimplify/V4Swap/SwapCommitButton.tsx b/apps/web/src/views/SwapSimplify/V4Swap/SwapCommitButton.tsx index bebdf2d6bd7be..a457b043dbc2a 100644 --- a/apps/web/src/views/SwapSimplify/V4Swap/SwapCommitButton.tsx +++ b/apps/web/src/views/SwapSimplify/V4Swap/SwapCommitButton.tsx @@ -28,15 +28,17 @@ import { useCurrencyBalances } from 'state/wallet/hooks' import { logGTMClickSwapConfirmEvent, logGTMClickSwapEvent } from 'utils/customGTMEventTracking' import { warningSeverity } from 'utils/exchange' import { isClassicOrder, isXOrder } from 'views/Swap/utils' -import { ConfirmSwapModalV2 } from 'views/Swap/V3Swap/containers/ConfirmSwapModalV2' +import { ConfirmSwapModalV2 } from 'views/Swap/containers/ConfirmSwapModalV2' import { useAccount, useChainId } from 'wagmi' import { NoValidRouteError } from 'hooks/useBestAMMTrade' -import { useParsedAmounts, useSlippageAdjustedAmounts, useSwapInputError } from '../../Swap/V3Swap/hooks' -import { useConfirmModalState } from '../../Swap/V3Swap/hooks/useConfirmModalState' -import { useSwapConfig } from '../../Swap/V3Swap/hooks/useSwapConfig' -import { useSwapCurrency } from '../../Swap/V3Swap/hooks/useSwapCurrency' -import { CommitButtonProps } from '../../Swap/V3Swap/types' -import { computeTradePriceBreakdown } from '../../Swap/V3Swap/utils/exchange' +import { computeTradePriceBreakdown } from 'views/Swap/utils/exchange' +import { useParsedAmounts } from 'views/Swap/hooks/useParsedAmounts' +import { useSwapInputError } from 'views/Swap/hooks/useSwapInputError' +import { useSlippageAdjustedAmounts } from 'views/Swap/hooks/useSlippageAdjustedAmounts' +import { useConfirmModalState } from 'views/Swap/hooks/useConfirmModalState' +import { useSwapConfig } from 'views/Swap/hooks/useSwapConfig' +import { useSwapCurrency } from 'views/Swap/hooks/useSwapCurrency' +import { CommitButtonProps } from 'views/Swap/types' import { useIsRecipientError } from '../hooks/useIsRecipientError' const SettingsModalWithCustomDismiss = withCustomOnDismiss(SettingsModalV2) diff --git a/apps/web/src/views/SwapSimplify/V4Swap/SwapSelectionTab.tsx b/apps/web/src/views/SwapSimplify/V4Swap/SwapSelectionTab.tsx index 330532a3c8aa3..a2dddf4f7828e 100644 --- a/apps/web/src/views/SwapSimplify/V4Swap/SwapSelectionTab.tsx +++ b/apps/web/src/views/SwapSimplify/V4Swap/SwapSelectionTab.tsx @@ -5,9 +5,9 @@ import { useActiveChainId } from 'hooks/useActiveChainId' import { useRouter } from 'next/router' import { useCallback, useMemo } from 'react' import { styled } from 'styled-components' +import { SwapType } from 'views/Swap/types' +import { isTwapSupported } from 'views/Swap/utils' import { SettingsMode } from '../../../components/Menu/GlobalSettings/types' -import { SwapType } from '../../Swap/types' -import { isTwapSupported } from '../../Swap/utils' // const ColoredIconButton = styled(IconButton)` // color: ${({ theme }) => theme.colors.textSubtle}; diff --git a/apps/web/src/views/SwapSimplify/V4Swap/TradeDetails.tsx b/apps/web/src/views/SwapSimplify/V4Swap/TradeDetails.tsx index 9dcc2c785b695..ae2c22b53ae24 100644 --- a/apps/web/src/views/SwapSimplify/V4Swap/TradeDetails.tsx +++ b/apps/web/src/views/SwapSimplify/V4Swap/TradeDetails.tsx @@ -7,8 +7,9 @@ import { styled } from 'styled-components' import { PriceOrder } from '@pancakeswap/price-api-sdk' import { MevSwapDetail } from 'views/Mev/MevSwapDetail' import { isClassicOrder, isXOrder } from 'views/Swap/utils' -import { useIsWrapping, useSlippageAdjustedAmounts } from '../../Swap/V3Swap/hooks' -import { computeTradePriceBreakdown } from '../../Swap/V3Swap/utils/exchange' +import { computeTradePriceBreakdown } from 'views/Swap/utils/exchange' +import { useSlippageAdjustedAmounts } from 'views/Swap/hooks/useSlippageAdjustedAmounts' +import { useIsWrapping } from 'views/Swap/hooks/useIsWrapping' import { TradeSummary } from './AdvancedSwapDetails' import { RoutesBreakdown, XRoutesBreakdown } from './RoutesBreakdown' diff --git a/apps/web/src/views/SwapSimplify/V4Swap/TradingFee.tsx b/apps/web/src/views/SwapSimplify/V4Swap/TradingFee.tsx index 85e1905e64cc8..1c6a77223ba3f 100644 --- a/apps/web/src/views/SwapSimplify/V4Swap/TradingFee.tsx +++ b/apps/web/src/views/SwapSimplify/V4Swap/TradingFee.tsx @@ -4,8 +4,9 @@ import { FlexGap, SkeletonV2, Text } from '@pancakeswap/uikit' import { formatAmount } from '@pancakeswap/utils/formatFractions' import { memo, useMemo } from 'react' import { isXOrder } from 'views/Swap/utils' -import { useIsWrapping, useSlippageAdjustedAmounts } from '../../Swap/V3Swap/hooks' -import { computeTradePriceBreakdown } from '../../Swap/V3Swap/utils/exchange' +import { computeTradePriceBreakdown } from 'views/Swap/utils/exchange' +import { useIsWrapping } from 'views/Swap/hooks/useIsWrapping' +import { useSlippageAdjustedAmounts } from 'views/Swap/hooks/useSlippageAdjustedAmounts' interface TradingFeeProps { loaded: boolean diff --git a/apps/web/src/views/SwapSimplify/V4Swap/index.tsx b/apps/web/src/views/SwapSimplify/V4Swap/index.tsx index fd254143d55cd..571f217e0ba72 100644 --- a/apps/web/src/views/SwapSimplify/V4Swap/index.tsx +++ b/apps/web/src/views/SwapSimplify/V4Swap/index.tsx @@ -15,9 +15,9 @@ import { Field } from 'state/swap/actions' import { useSwapState } from 'state/swap/hooks' import { logger } from 'utils/datadog' import { MevToggle } from 'views/Mev/MevToggle' -import { SwapType } from '../../Swap/types' -import { useIsWrapping } from '../../Swap/V3Swap/hooks' -import { useAllTypeBestTrade } from '../../Swap/V3Swap/hooks/useAllTypeBestTrade' +import { useIsWrapping } from 'views/Swap/hooks/useIsWrapping' +import { SwapType } from 'views/Swap/types' +import { useAllTypeBestTrade } from 'views/Swap/hooks/useAllTypeBestTrade' import { useBuyCryptoInfo } from '../hooks/useBuyCryptoInfo' import { useIsPriceImpactTooHigh } from '../hooks/useIsPriceImpactTooHigh' import { useUserInsufficientBalance } from '../hooks/useUserInsufficientBalance' diff --git a/apps/web/src/views/SwapSimplify/hooks/useBuyCryptoInfo.ts b/apps/web/src/views/SwapSimplify/hooks/useBuyCryptoInfo.ts index ffe250778dd95..49dee753e8bb4 100644 --- a/apps/web/src/views/SwapSimplify/hooks/useBuyCryptoInfo.ts +++ b/apps/web/src/views/SwapSimplify/hooks/useBuyCryptoInfo.ts @@ -2,7 +2,7 @@ import { PriceOrder } from '@pancakeswap/price-api-sdk' import { useActiveChainId } from 'hooks/useActiveChainId' import { useCanBuyCrypto } from 'hooks/useCanBuyCrypto' import { useMemo } from 'react' -import { useSwapCurrency } from '../../Swap/V3Swap/hooks/useSwapCurrency' +import { useSwapCurrency } from 'views/Swap/hooks/useSwapCurrency' import { useUserInsufficientBalance } from './useUserInsufficientBalance' export function useBuyCryptoInfo(order: PriceOrder | undefined): { diff --git a/apps/web/src/views/SwapSimplify/hooks/useIsPriceImpactTooHigh.ts b/apps/web/src/views/SwapSimplify/hooks/useIsPriceImpactTooHigh.ts index 75a8042bf19c0..ba429098cd5e3 100644 --- a/apps/web/src/views/SwapSimplify/hooks/useIsPriceImpactTooHigh.ts +++ b/apps/web/src/views/SwapSimplify/hooks/useIsPriceImpactTooHigh.ts @@ -3,7 +3,7 @@ import { useMemo, useRef } from 'react' import { warningSeverity } from 'utils/exchange' import { InterfaceOrder, isXOrder } from 'views/Swap/utils' -import { computeTradePriceBreakdown } from '../../Swap/V3Swap/utils/exchange' +import { computeTradePriceBreakdown } from 'views/Swap/utils/exchange' export const useIsPriceImpactTooHigh = (bestOrder: InterfaceOrder | undefined, isLoading?: boolean) => { const { chainId } = useActiveChainId() diff --git a/apps/web/src/views/SwapSimplify/hooks/useIsRecipientError.ts b/apps/web/src/views/SwapSimplify/hooks/useIsRecipientError.ts index 68b3aac9694a9..5523a06b7499c 100644 --- a/apps/web/src/views/SwapSimplify/hooks/useIsRecipientError.ts +++ b/apps/web/src/views/SwapSimplify/hooks/useIsRecipientError.ts @@ -3,7 +3,7 @@ import { useGetENSAddressByName } from 'hooks/useGetENSAddressByName' import { useMemo } from 'react' import { useSwapState } from 'state/swap/hooks' import { safeGetAddress } from 'utils' -import { useAllowRecipient } from '../../Swap/V3Swap/hooks' +import { useAllowRecipient } from 'views/Swap/hooks/useAllowRecipient' export const useIsRecipientError = () => { const { recipient } = useSwapState() diff --git a/apps/web/src/views/SwapSimplify/hooks/useUserInsufficientBalance.ts b/apps/web/src/views/SwapSimplify/hooks/useUserInsufficientBalance.ts index 606afd77130c8..61c221b612f85 100644 --- a/apps/web/src/views/SwapSimplify/hooks/useUserInsufficientBalance.ts +++ b/apps/web/src/views/SwapSimplify/hooks/useUserInsufficientBalance.ts @@ -5,9 +5,9 @@ import { Field } from 'state/swap/actions' import { PriceOrder } from '@pancakeswap/price-api-sdk' import { useCurrencyBalances } from 'state/wallet/hooks' import { useAccount } from 'wagmi' -import { useAllTypeBestTrade } from '../../Swap/V3Swap/hooks/useAllTypeBestTrade' -import { useSlippageAdjustedAmounts } from '../../Swap/V3Swap/hooks/useSlippageAdjustedAmounts' -import { useSwapCurrency } from '../../Swap/V3Swap/hooks/useSwapCurrency' +import { useAllTypeBestTrade } from 'views/Swap/hooks/useAllTypeBestTrade' +import { useSlippageAdjustedAmounts } from 'views/Swap/hooks/useSlippageAdjustedAmounts' +import { useSwapCurrency } from 'views/Swap/hooks/useSwapCurrency' export function useUserInsufficientBalance(order: PriceOrder | undefined): boolean { const [inputCurrency, outputCurrency] = useSwapCurrency() diff --git a/packages/localization/src/config/translations.json b/packages/localization/src/config/translations.json index 1b1c7184c8485..45544c4817fc7 100644 --- a/packages/localization/src/config/translations.json +++ b/packages/localization/src/config/translations.json @@ -818,8 +818,6 @@ "From": "From", "To (estimated)": "To (estimated)", "To": "To", - "+ Add a send (optional)": "+ Add a send (optional)", - "- Remove send": "- Remove send", "Slippage Tolerance": "Slippage Tolerance", "Insufficient liquidity for this trade.": "Insufficient liquidity for this trade.", "Price Impact High": "Price Impact High", @@ -2014,10 +2012,7 @@ "Choose “Default” to use the settings from your current blockchain RPC node.": "Choose “Default” to use the settings from your current blockchain RPC node.", "Participate in our next IFO.": "Participate in our next IFO.", "AMM": "AMM", - "MM": "MM", "Amount of Liquidity to Remove": "Amount of Liquidity to Remove", - "No slippage against quote from market maker": "No slippage against quote from market maker", - "PancakeSwap does not charge any fees for trades. However, the market makers charge an implied fee of 0.05% - 0.25% (non-stablecoin) / 0.01% (stablecoin) factored into the quotes provided by them.": "PancakeSwap does not charge any fees for trades. However, the market makers charge an implied fee of 0.05% - 0.25% (non-stablecoin) / 0.01% (stablecoin) factored into the quotes provided by them.", "Trading Fee": "Trading Fee", "PancakeSwap V3": "PancakeSwap V3", "Quick Start": "Quick Start", @@ -2037,8 +2032,6 @@ "Unstaking from V2 Farms": "Unstaking from V2 Farms", "Next Steps": "Next Steps", "Inactive positions will NOT earn CAKE rewards from farm.": "Inactive positions will NOT earn CAKE rewards from farm.", - "This figure is provided for your convenience only, and by no means represents guaranteed returns.": "This figure is provided for your convenience only, and by no means represents guaranteed returns.", - "Calculated at the current rates with historical trading volume data, and subject to change based on various external variables.": "Calculated at the current rates with historical trading volume data, and subject to change based on various external variables.", "Inactive positions will": "Inactive positions will", "NOT": "NOT", "earn CAKE rewards from farm.": "earn CAKE rewards from farm.", @@ -2355,7 +2348,6 @@ "Affiliate program registration is paused at the moment. Please check back after subgraph status is restored": "Affiliate program registration is paused at the moment. Please check back after subgraph status is restored", "Go to Farms": "Go to Farms", "has an active PancakeSwap farm. Stake your position in the farm to start earning with the indicated APR with CAKE farming.": "has an active PancakeSwap farm. Stake your position in the farm to start earning with the indicated APR with CAKE farming.", - "This position must be staking in farm to apply the combined APR with farming rewards.": "This position must be staking in farm to apply the combined APR with farming rewards.", "APR (with farming)": "APR (with farming)", "Include farming rewards": "Include farming rewards", "Join Pancake Protectors": "Join Pancake Protectors", @@ -2411,7 +2403,6 @@ "#300 or less": "#300 or less", "and maintain till the end of the campaign to win and claim your rewards.": "and maintain till the end of the campaign to win and claim your rewards.", "Campaign ending": "Campaign ending", - "Insufficient Funds?": "Insufficient Funds?", "PancakeSwap Now Live on Polygon zkEVM!": "PancakeSwap Now Live on Polygon zkEVM!", "Polygon zkEVM is LIVE!": "Polygon zkEVM is LIVE!", "Swap, LP, and Farms on Polygon zkEVM now": "Swap, LP, and Farms on Polygon zkEVM now", @@ -2527,9 +2518,7 @@ "USDT on Ethereum requires resetting approval when spending allowances are too low.": "USDT on Ethereum requires resetting approval when spending allowances are too low.", "Happy Birthday!": "Happy Birthday!", "Let’s celebrate our 3rd Birthday with some juicy profile points and achievements. Check out our social channels for other exciting campaigns and community events.": "Let’s celebrate our 3rd Birthday with some juicy profile points and achievements. Check out our social channels for other exciting campaigns and community events.", - "MM Route": "MM Route", "Bonus Route": "Bonus Route", - "The Market Maker (MM) route is automatically selected for your trade to achieve the best price for your trade.": "The Market Maker (MM) route is automatically selected for your trade to achieve the best price for your trade.", "A Bonus route provided by API is automatically selected for your trade to achieve the best price for your trade.": "A Bonus route provided by API is automatically selected for your trade to achieve the best price for your trade.", "0% Provider Fee until Sep 12th!": "0% Provider Fee until Sep 12th!", "Show all positions": "Show all positions", @@ -3108,7 +3097,6 @@ "Choose a provider": "Choose a provider", "The min amount is %minAmount% %fiatCurrency% / %minCryptoAmount% %cryptoCurrency%": "The min amount is %minAmount% %fiatCurrency% / %minCryptoAmount% %cryptoCurrency%", "The max amount is %maxAmount% %fiatCurrency% / %maxCryptoAmount% %cryptoCurrency%": "The max amount is %maxAmount% %fiatCurrency% / %maxCryptoAmount% %cryptoCurrency%", - "Buy Crypto here.": "Buy Crypto here.", "Fast routing (BETA)": "Fast routing (BETA)", "Increase the speed of finding best swapping routes": "Increase the speed of finding best swapping routes", "Blocked address": "Blocked address",