diff --git a/src/components/Loader/styled.tsx b/src/components/Loader/styled.tsx index f62521c2b0..fee899aa4a 100644 --- a/src/components/Loader/styled.tsx +++ b/src/components/Loader/styled.tsx @@ -32,6 +32,13 @@ export const LoadingRows = styled.div` } ` +export const LoadingRow = styled.div<{ height: number; width: number }>` + ${shimmerMixin} + border-radius: 12px; + height: ${({ height }) => height}px; + width: ${({ width }) => width}px; +` + export const loadingOpacityMixin = css<{ $loading: boolean }>` filter: ${({ $loading }) => ($loading ? 'grayscale(1)' : 'none')}; opacity: ${({ $loading }) => ($loading ? '0.6' : '1')}; diff --git a/src/components/RouterLabel/index.tsx b/src/components/RouterLabel/index.tsx index f57609e4a8..06ad4e0c48 100644 --- a/src/components/RouterLabel/index.tsx +++ b/src/components/RouterLabel/index.tsx @@ -1,10 +1,11 @@ import { QuoteMethod, SubmittableTrade } from 'state/routing/types' import { isUniswapXTrade } from 'state/routing/utils' +import { DefaultTheme } from 'styled-components' import { ThemedText } from 'theme/components' import UniswapXRouterLabel from './UniswapXRouterLabel' -export default function RouterLabel({ trade }: { trade: SubmittableTrade }) { +export default function RouterLabel({ trade, color }: { trade: SubmittableTrade; color?: keyof DefaultTheme }) { if (isUniswapXTrade(trade)) { return ( @@ -13,7 +14,7 @@ export default function RouterLabel({ trade }: { trade: SubmittableTrade }) { ) } if (trade.quoteMethod === QuoteMethod.CLIENT_SIDE || trade.quoteMethod === QuoteMethod.CLIENT_SIDE_FALLBACK) { - return Uniswap Client + return Uniswap Client } - return Uniswap API + return Uniswap API } diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index 45ae56f9d9..e84d047462 100644 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -77,9 +77,11 @@ type MouseoverTooltipProps = Omit & timeout?: number placement?: PopoverProps['placement'] onOpen?: () => void + forceShow?: boolean }> -export function MouseoverTooltip({ text, disabled, children, onOpen, timeout, ...rest }: MouseoverTooltipProps) { +export function MouseoverTooltip(props: MouseoverTooltipProps) { + const { text, disabled, children, onOpen, forceShow, timeout, ...rest } = props const [show, setShow] = useState(false) const open = () => { setShow(true) @@ -101,7 +103,14 @@ export function MouseoverTooltip({ text, disabled, children, onOpen, timeout, .. }, [timeout, show]) return ( - +
{children}
diff --git a/src/components/swap/AdvancedSwapDetails.test.tsx b/src/components/swap/AdvancedSwapDetails.test.tsx deleted file mode 100644 index f402ecd988..0000000000 --- a/src/components/swap/AdvancedSwapDetails.test.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import userEvent from '@testing-library/user-event' -import { TEST_ALLOWED_SLIPPAGE, TEST_TRADE_EXACT_INPUT, TEST_TRADE_EXACT_OUTPUT } from 'test-utils/constants' -import { act, render, screen } from 'test-utils/render' - -import { AdvancedSwapDetails } from './AdvancedSwapDetails' - -describe('AdvancedSwapDetails.tsx', () => { - it('matches base snapshot', () => { - const { asFragment } = render( - - ) - expect(asFragment()).toMatchSnapshot() - }) - - it('renders correct copy on mouseover', async () => { - render() - await act(() => userEvent.hover(screen.getByText('Expected output'))) - expect(await screen.getByText(/The amount you expect to receive at the current market price./i)).toBeVisible() - await act(() => userEvent.hover(screen.getByText(/Minimum output/i))) - expect(await screen.getByText(/The minimum amount you are guaranteed to receive./i)).toBeVisible() - }) - - it('renders correct tooltips for test trade with exact output and gas use estimate USD', async () => { - TEST_TRADE_EXACT_OUTPUT.gasUseEstimateUSD = 1.0 - render() - await act(() => userEvent.hover(screen.getByText(/Maximum input/i))) - expect(await screen.getByText(/The minimum amount you are guaranteed to receive./i)).toBeVisible() - await act(() => userEvent.hover(screen.getByText('Network fee'))) - expect(await screen.getByText(/The fee paid to miners who process your transaction./i)).toBeVisible() - }) - - it('renders loading rows when syncing', async () => { - render( - - ) - expect(screen.getAllByTestId('loading-rows').length).toBeGreaterThan(0) - }) -}) diff --git a/src/components/swap/AdvancedSwapDetails.tsx b/src/components/swap/AdvancedSwapDetails.tsx deleted file mode 100644 index eac9671c07..0000000000 --- a/src/components/swap/AdvancedSwapDetails.tsx +++ /dev/null @@ -1,228 +0,0 @@ -import { Plural, Trans } from '@lingui/macro' -import { InterfaceElementName, SwapEventName } from '@uniswap/analytics-events' -import { Percent, TradeType } from '@uniswap/sdk-core' -import { useWeb3React } from '@web3-react/core' -import { sendAnalyticsEvent } from 'analytics' -import { LoadingRows } from 'components/Loader/styled' -import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains' -import { ZERO_PERCENT } from 'constants/misc' -import useNativeCurrency from 'lib/hooks/useNativeCurrency' -import { ClassicTrade, InterfaceTrade } from 'state/routing/types' -import { getTransactionCount, isClassicTrade, isSubmittableTrade } from 'state/routing/utils' -import { ExternalLink, Separator, ThemedText } from 'theme/components' -import { NumberType, useFormatter } from 'utils/formatNumbers' - -import Column from '../Column' -import RouterLabel from '../RouterLabel' -import { RowBetween, RowFixed } from '../Row' -import { MouseoverTooltip, TooltipSize } from '../Tooltip' -import { GasBreakdownTooltip } from './GasBreakdownTooltip' -import SwapRoute from './SwapRoute' - -interface AdvancedSwapDetailsProps { - trade: InterfaceTrade - allowedSlippage: Percent - syncing?: boolean -} - -function TextWithLoadingPlaceholder({ - syncing, - width, - children, -}: { - syncing: boolean - width: number - children: JSX.Element -}) { - return syncing ? ( - -
- - ) : ( - children - ) -} - -export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }: AdvancedSwapDetailsProps) { - const { chainId } = useWeb3React() - const nativeCurrency = useNativeCurrency(chainId) - const txCount = getTransactionCount(trade) - const { formatCurrencyAmount, formatNumber, formatPriceImpact } = useFormatter() - - const supportsGasEstimate = chainId && SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId) && isSubmittableTrade(trade) - - return ( - - - {supportsGasEstimate && ( - - - The fee paid to miners who process your transaction. This must be paid in {nativeCurrency.symbol}. - - } - > - - - - - } - > - - - {`${trade.totalGasUseEstimateUSD ? '~' : ''}${formatNumber({ - input: trade.totalGasUseEstimateUSD, - type: NumberType.FiatGasPrice, - })}`} - - - - - )} - {isClassicTrade(trade) && ( - <> - - - - The impact your trade has on the market price of this pool.}> - - Price Impact - - - - {formatPriceImpact(trade.priceImpact)} - - - - )} - - - - The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will - revert. - - } - > - - {trade.tradeType === TradeType.EXACT_INPUT ? Minimum output : Maximum input} - - - - - - {trade.tradeType === TradeType.EXACT_INPUT - ? `${formatCurrencyAmount({ - amount: trade.minimumAmountOut(allowedSlippage), - type: NumberType.SwapTradeAmount, - })} ${trade.outputAmount.currency.symbol}` - : `${trade.maximumAmountIn(allowedSlippage).toSignificant(6)} ${trade.inputAmount.currency.symbol}`} - - - - - - - The amount you expect to receive at the current market price. You may receive less or more if the market - price changes while your transaction is pending. - - } - > - - Expected output - - - - - - {`${formatCurrencyAmount({ - amount: trade.postTaxOutputAmount, - type: NumberType.SwapTradeAmount, - })} ${trade.outputAmount.currency.symbol}`} - - - - - {isSubmittableTrade(trade) && ( - - - Order routing - - {isClassicTrade(trade) ? ( - } - onOpen={() => { - sendAnalyticsEvent(SwapEventName.SWAP_AUTOROUTER_VISUALIZATION_EXPANDED, { - element: InterfaceElementName.AUTOROUTER_VISUALIZATION_ROW, - }) - }} - > - - - ) : ( - } - placement="right" - onOpen={() => { - sendAnalyticsEvent(SwapEventName.SWAP_AUTOROUTER_VISUALIZATION_EXPANDED, { - element: InterfaceElementName.AUTOROUTER_VISUALIZATION_ROW, - }) - }} - > - - - )} - - )} - - ) -} - -function TokenTaxLineItem({ - trade, - type, - syncing, -}: { - trade: ClassicTrade - type: 'input' | 'output' - syncing: boolean -}) { - const { formatPriceImpact } = useFormatter() - - if (syncing) return null - - const [currency, percentage] = - type === 'input' ? [trade.inputAmount.currency, trade.inputTax] : [trade.outputAmount.currency, trade.outputTax] - - if (percentage.equalTo(ZERO_PERCENT)) return null - - return ( - - - - Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not - receive any of these fees. - {' '} - - Learn more - - - } - > - {`${currency.symbol} fee`} - - {formatPriceImpact(percentage)} - - ) -} diff --git a/src/components/swap/GasBreakdownTooltip.tsx b/src/components/swap/GasBreakdownTooltip.tsx index 1b5dd8642c..0455a943d5 100644 --- a/src/components/swap/GasBreakdownTooltip.tsx +++ b/src/components/swap/GasBreakdownTooltip.tsx @@ -1,10 +1,12 @@ import { Trans } from '@lingui/macro' +import { Currency } from '@uniswap/sdk-core' import { AutoColumn } from 'components/Column' import UniswapXRouterLabel, { UniswapXGradient } from 'components/RouterLabel/UniswapXRouterLabel' import Row from 'components/Row' +import { nativeOnChain } from 'constants/tokens' import { ReactNode } from 'react' -import { SubmittableTrade } from 'state/routing/types' -import { isClassicTrade, isUniswapXTrade } from 'state/routing/utils' +import { InterfaceTrade } from 'state/routing/types' +import { isPreviewTrade, isUniswapXTrade } from 'state/routing/utils' import styled from 'styled-components' import { Divider, ExternalLink, ThemedText } from 'theme/components' import { NumberType, useFormatter } from 'utils/formatNumbers' @@ -13,99 +15,83 @@ const Container = styled(AutoColumn)` padding: 4px; ` -const InlineLink = styled(ThemedText.BodySmall)` - color: ${({ theme }) => theme.accent1}; - display: inline; - cursor: pointer; - &:hover { - opacity: ${({ theme }) => theme.opacity.hover}; - } -` +type GasCostItemProps = { title: ReactNode; itemValue?: React.ReactNode; amount?: number } -const InlineUniswapXGradient = styled(UniswapXGradient)` - display: inline; -` - -const GasCostItem = ({ - title, - amount, - itemValue, -}: { - title: ReactNode - itemValue?: React.ReactNode - amount?: number -}) => { +const GasCostItem = ({ title, amount, itemValue }: GasCostItemProps) => { const { formatNumber } = useFormatter() + if (!amount && !itemValue) return null + + const value = itemValue ?? formatNumber({ input: amount, type: NumberType.FiatGasPrice }) return ( {title} - - {itemValue ?? - formatNumber({ - input: amount, - type: NumberType.FiatGasPrice, - })} - + {value} ) } -export function GasBreakdownTooltip({ - trade, - hideFees = false, - hideUniswapXDescription = false, -}: { - trade: SubmittableTrade - hideFees?: boolean - hideUniswapXDescription?: boolean -}) { - const swapEstimate = isClassicTrade(trade) ? trade.gasUseEstimateUSD : undefined +const GaslessSwapLabel = () => $0 + +type GasBreakdownTooltipProps = { trade: InterfaceTrade; hideUniswapXDescription?: boolean } + +export function GasBreakdownTooltip({ trade, hideUniswapXDescription }: GasBreakdownTooltipProps) { + const isUniswapX = isUniswapXTrade(trade) + const inputCurrency = trade.inputAmount.currency + const native = nativeOnChain(inputCurrency.chainId) + + if (isPreviewTrade(trade)) return + + const swapEstimate = !isUniswapX ? trade.gasUseEstimateUSD : undefined const approvalEstimate = trade.approveInfo.needsApprove ? trade.approveInfo.approveGasEstimateUSD : undefined - const wrapEstimate = - isUniswapXTrade(trade) && trade.wrapInfo.needsWrap ? trade.wrapInfo.wrapGasEstimateUSD : undefined + const wrapEstimate = isUniswapX && trade.wrapInfo.needsWrap ? trade.wrapInfo.wrapGasEstimateUSD : undefined + const showEstimateDetails = Boolean(wrapEstimate || approvalEstimate) + + const description = + isUniswapX && !hideUniswapXDescription ? : + + if (!showEstimateDetails) return description + return ( - {(wrapEstimate || approvalEstimate) && !hideFees && ( - <> - - {wrapEstimate && Wrap ETH} amount={wrapEstimate} />} - {approvalEstimate && ( - Allow {trade.inputAmount.currency.symbol} (one time)} - amount={approvalEstimate} - /> - )} - {swapEstimate && Swap} amount={swapEstimate} />} - {isUniswapXTrade(trade) && ( - Swap} itemValue={$0} /> - )} - - - - )} - {isUniswapXTrade(trade) && !hideUniswapXDescription ? ( - - - UniswapX aggregates liquidity sources for better prices and - gas free swaps. - {' '} - - - Learn more - - - - ) : ( - - Network Fees are paid to the Ethereum network to secure transactions.{' '} - - - Learn more - - - - )} + + Wrap {native.symbol}} amount={wrapEstimate} /> + Allow {inputCurrency.symbol} (one time)} amount={approvalEstimate} /> + Swap} amount={swapEstimate} /> + {isUniswapX && Swap} itemValue={} />} + + + {description} ) } + +function NetworkFeesDescription({ native }: { native: Currency }) { + return ( + + + The fee paid to the Ethereum network to process your transaction. This must be paid in {native.symbol}. + {' '} + + Learn more + + + ) +} + +const InlineUniswapXGradient = styled(UniswapXGradient)` + display: inline; +` +export function UniswapXDescription() { + return ( + + + UniswapX aggregates liquidity sources for better prices and gas + free swaps. + {' '} + + Learn more + + + ) +} diff --git a/src/components/swap/SwapDetailsDropdown.tsx b/src/components/swap/SwapDetailsDropdown.tsx index d9c3e9c464..f247181afc 100644 --- a/src/components/swap/SwapDetailsDropdown.tsx +++ b/src/components/swap/SwapDetailsDropdown.tsx @@ -12,10 +12,11 @@ import { ChevronDown } from 'react-feather' import { InterfaceTrade } from 'state/routing/types' import { isSubmittableTrade } from 'state/routing/utils' import styled, { useTheme } from 'styled-components' -import { ThemedText } from 'theme/components' +import { Separator, ThemedText } from 'theme/components' +import { useFormatter } from 'utils/formatNumbers' -import { AdvancedSwapDetails } from './AdvancedSwapDetails' import GasEstimateTooltip from './GasEstimateTooltip' +import SwapLineItem, { SwapLineItemType } from './SwapLineItem' import TradePrice from './TradePrice' const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean }>` @@ -29,7 +30,7 @@ const RotatingArrow = styled(ChevronDown)<{ open?: boolean }>` transition: transform 0.1s linear; ` -const SwapDetailsWrapper = styled.div` +const SwapDetailsWrapper = styled(Column)` padding-top: ${({ theme }) => theme.grids.md}; ` @@ -39,14 +40,15 @@ const Wrapper = styled(Column)` padding: 12px 16px; ` -interface SwapDetailsInlineProps { +interface SwapDetailsProps { trade?: InterfaceTrade syncing: boolean loading: boolean allowedSlippage: Percent } -export default function SwapDetailsDropdown({ trade, syncing, loading, allowedSlippage }: SwapDetailsInlineProps) { +export default function SwapDetailsDropdown(props: SwapDetailsProps) { + const { trade, syncing, loading, allowedSlippage } = props const theme = useTheme() const [showDetails, setShowDetails] = useState(false) const trace = useTrace() @@ -88,13 +90,33 @@ export default function SwapDetailsDropdown({ trade, syncing, loading, allowedSl - {trade && ( - - - - - - )} + ) } + +function AdvancedSwapDetails(props: SwapDetailsProps & { open: boolean }) { + const { open, trade, allowedSlippage, syncing = false } = props + const format = useFormatter() + + if (!trade) return null + + const lineItemProps = { trade, allowedSlippage, format, syncing } + + return ( + + + + + + + + + + + + + + + ) +} diff --git a/src/components/swap/SwapLineItem.test.tsx b/src/components/swap/SwapLineItem.test.tsx new file mode 100644 index 0000000000..7db9b23132 --- /dev/null +++ b/src/components/swap/SwapLineItem.test.tsx @@ -0,0 +1,73 @@ +import { InterfaceTrade } from 'state/routing/types' +import { + PREVIEW_EXACT_IN_TRADE, + TEST_ALLOWED_SLIPPAGE, + TEST_DUTCH_TRADE_ETH_INPUT, + TEST_TRADE_EXACT_INPUT, + TEST_TRADE_EXACT_INPUT_API, + TEST_TRADE_EXACT_OUTPUT, + TEST_TRADE_FEE_ON_BUY, + TEST_TRADE_FEE_ON_SELL, +} from 'test-utils/constants' +import { render } from 'test-utils/render' + +// Forces tooltips to render in snapshots +jest.mock('react-dom', () => { + const original = jest.requireActual('react-dom') + return { + ...original, + createPortal: (node: any) => node, + } +}) + +// Prevents uuid from generating unpredictable values in snapshots +jest.mock('uuid', () => ({ + v4: () => 'fixed-uuid-value', +})) + +import SwapLineItem, { SwapLineItemType } from './SwapLineItem' + +const AllLineItemsTypes = Object.keys(SwapLineItemType).map(Number).filter(Boolean) +const lineItemProps = { + syncing: false, + allowedSlippage: TEST_ALLOWED_SLIPPAGE, +} + +function testTradeLineItems(trade: InterfaceTrade, props: Partial = {}) { + const { asFragment } = render( + <> + {AllLineItemsTypes.map((type) => ( + + ))} + + ) + expect(asFragment()).toMatchSnapshot() +} + +/* eslint-disable jest/expect-expect */ // allow expect inside testTradeLineItems +describe('SwapLineItem.tsx', () => { + it('exact input', () => { + testTradeLineItems(TEST_TRADE_EXACT_INPUT) + }) + it('exact output', () => { + testTradeLineItems(TEST_TRADE_EXACT_OUTPUT) + }) + it('fee on buy', () => { + testTradeLineItems(TEST_TRADE_FEE_ON_BUY) + }) + it('fee on sell', () => { + testTradeLineItems(TEST_TRADE_FEE_ON_SELL) + }) + it('exact input api', () => { + testTradeLineItems(TEST_TRADE_EXACT_INPUT_API) + }) + it('dutch order eth input', () => { + testTradeLineItems(TEST_DUTCH_TRADE_ETH_INPUT) + }) + it('syncing', () => { + testTradeLineItems(TEST_TRADE_EXACT_INPUT, { syncing: true }) + }) + it('preview exact in', () => { + testTradeLineItems(PREVIEW_EXACT_IN_TRADE) + }) +}) diff --git a/src/components/swap/SwapLineItem.tsx b/src/components/swap/SwapLineItem.tsx new file mode 100644 index 0000000000..b373ff20da --- /dev/null +++ b/src/components/swap/SwapLineItem.tsx @@ -0,0 +1,252 @@ +import { Plural, t, Trans } from '@lingui/macro' +import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core' +import { LoadingRow } from 'components/Loader/styled' +import RouterLabel from 'components/RouterLabel' +import { RowBetween } from 'components/Row' +import { MouseoverTooltip, TooltipSize } from 'components/Tooltip' +import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains' +import useHoverProps from 'hooks/useHoverProps' +import { useIsMobile } from 'nft/hooks' +import React, { PropsWithChildren, useEffect, useState } from 'react' +import { InterfaceTrade, TradeFillType } from 'state/routing/types' +import { getTransactionCount, isPreviewTrade, isUniswapXTrade } from 'state/routing/utils' +import styled, { DefaultTheme } from 'styled-components' +import { ExternalLink, ThemedText } from 'theme/components' +import { NumberType, useFormatter } from 'utils/formatNumbers' +import { getPriceImpactColor } from 'utils/prices' + +import { GasBreakdownTooltip, UniswapXDescription } from './GasBreakdownTooltip' +import SwapRoute from './SwapRoute' + +export enum SwapLineItemType { + EXCHANGE_RATE, + NETWORK_FEE, + INPUT_TOKEN_FEE_ON_TRANSFER, + OUTPUT_TOKEN_FEE_ON_TRANSFER, + PRICE_IMPACT, + MAXIMUM_INPUT, + MINIMUM_OUTPUT, + EXPECTED_OUTPUT, + ROUTING_INFO, +} + +const DetailRowValue = styled(ThemedText.BodySmall)` + text-align: right; + overflow-wrap: break-word; +` +const LabelText = styled(ThemedText.BodySmall)<{ hasTooltip?: boolean }>` + cursor: ${({ hasTooltip }) => (hasTooltip ? 'help' : 'auto')}; + color: ${({ theme }) => theme.neutral2}; +` +const ColorWrapper = styled.span<{ textColor?: keyof DefaultTheme }>` + ${({ textColor, theme }) => textColor && `color: ${theme[textColor]};`} +` + +function FOTTooltipContent() { + return ( + <> + + Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive + any of these fees. + {' '} + + Learn more + + + ) +} + +function Loading({ width = 50 }: { width?: number }) { + return +} + +function ExchangeRateRow({ trade }: { trade: InterfaceTrade }) { + const { formatNumber } = useFormatter() + const rate = `1 ${trade.executionPrice.quoteCurrency.symbol} = ${formatNumber({ + input: parseFloat(trade.executionPrice.toFixed(9)), + type: NumberType.TokenTx, + })} ${trade.executionPrice.baseCurrency.symbol}` + return <>{rate} +} + +function ColoredPercentRow({ percent }: { percent: Percent }) { + const { formatPriceImpact } = useFormatter() + return {formatPriceImpact(percent)} +} + +function CurrencyAmountRow({ amount }: { amount: CurrencyAmount }) { + const { formatCurrencyAmount } = useFormatter() + const formattedAmount = formatCurrencyAmount({ amount, type: NumberType.SwapDetailsAmount }) + return <>{`${formattedAmount} ${amount.currency.symbol}`} +} + +type LineItemData = { + Label: React.FC + Value: React.FC + TooltipBody?: React.FC + tooltipSize?: TooltipSize + loaderWidth?: number +} + +function useLineItem(props: SwapLineItemProps): LineItemData | undefined { + const { trade, syncing, allowedSlippage, type } = props + const { formatNumber } = useFormatter() + + const isUniswapX = isUniswapXTrade(trade) + const isPreview = isPreviewTrade(trade) + const chainId = trade.inputAmount.currency.chainId + + // Tracks the latest submittable trade's fill type, used to 'guess' whether or not to show price impact during preview + const [lastSubmittableFillType, setLastSubmittableFillType] = useState() + useEffect(() => { + if (trade.fillType !== TradeFillType.None) setLastSubmittableFillType(trade.fillType) + }, [trade.fillType]) + + switch (type) { + case SwapLineItemType.EXCHANGE_RATE: + return { + Label: () => Exchange rate, + Value: () => , + } + case SwapLineItemType.NETWORK_FEE: + if (!SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId)) return + return { + Label: () => , + TooltipBody: () => , + Value: () => { + if (isPreview) return + return <>{formatNumber({ input: trade.totalGasUseEstimateUSD, type: NumberType.FiatGasPrice })} + }, + } + case SwapLineItemType.PRICE_IMPACT: + // Hides price impact row if the current trade is UniswapX or we're expecting a preview trade to result in UniswapX + if (isUniswapX || (isPreview && lastSubmittableFillType === TradeFillType.UniswapX)) return + return { + Label: () => Price impact, + TooltipBody: () => The impact your trade has on the market price of this pool., + Value: () => (isPreview ? : ), + } + case SwapLineItemType.MAXIMUM_INPUT: + if (trade.tradeType === TradeType.EXACT_INPUT) return + return { + Label: () => Maximum input, + TooltipBody: () => ( + + The maximum amount you are guaranteed to spend. If the price slips any further, your transaction will + revert. + + ), + Value: () => , + loaderWidth: 70, + } + case SwapLineItemType.MINIMUM_OUTPUT: + if (trade.tradeType === TradeType.EXACT_OUTPUT) return + return { + Label: () => Minimum output, + TooltipBody: () => ( + + The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will + revert. + + ), + Value: () => , + loaderWidth: 70, + } + case SwapLineItemType.EXPECTED_OUTPUT: + return { + Label: () => Expected output, + TooltipBody: () => ( + + The amount you expect to receive at the current market price. You may receive less or more if the market + price changes while your transaction is pending. + + ), + Value: () => , + loaderWidth: 65, + } + case SwapLineItemType.ROUTING_INFO: + if (isPreview) return { Label: () => Order routing, Value: () => } + return { + Label: () => Order routing, + TooltipBody: () => { + if (isUniswapX) return + return + }, + tooltipSize: isUniswapX ? TooltipSize.Small : TooltipSize.Large, + Value: () => , + } + case SwapLineItemType.INPUT_TOKEN_FEE_ON_TRANSFER: + case SwapLineItemType.OUTPUT_TOKEN_FEE_ON_TRANSFER: + return getFOTLineItem(props) + } +} + +function getFOTLineItem({ type, trade }: SwapLineItemProps): LineItemData | undefined { + const isInput = type === SwapLineItemType.INPUT_TOKEN_FEE_ON_TRANSFER + const currency = isInput ? trade.inputAmount.currency : trade.outputAmount.currency + const tax = isInput ? trade.inputTax : trade.outputTax + if (tax.equalTo(0)) return + + return { + Label: () => <>{t`${currency.symbol ?? currency.name ?? t`Token`} fee`}, + TooltipBody: FOTTooltipContent, + Value: () => , + } +} + +type ValueWrapperProps = PropsWithChildren<{ + lineItem: LineItemData + labelHovered: boolean + syncing: boolean +}> + +function ValueWrapper({ children, lineItem, labelHovered, syncing }: ValueWrapperProps) { + const { TooltipBody, tooltipSize, loaderWidth } = lineItem + const isMobile = useIsMobile() + + if (syncing) return + + if (!TooltipBody) return {children} + + return ( + + + + } + > + {children} + + ) +} + +interface SwapLineItemProps { + trade: InterfaceTrade + syncing: boolean + allowedSlippage: Percent + type: SwapLineItemType +} + +function SwapLineItem(props: SwapLineItemProps) { + const [labelHovered, hoverProps] = useHoverProps() + + const LineItem = useLineItem(props) + if (!LineItem) return null + + return ( + + + + + + + + + ) +} + +export default React.memo(SwapLineItem) diff --git a/src/components/swap/SwapModalFooter.test.tsx b/src/components/swap/SwapModalFooter.test.tsx index 55c58ef2df..a20f65c899 100644 --- a/src/components/swap/SwapModalFooter.test.tsx +++ b/src/components/swap/SwapModalFooter.test.tsx @@ -1,13 +1,4 @@ -import { - PREVIEW_EXACT_IN_TRADE, - TEST_ALLOWED_SLIPPAGE, - TEST_TOKEN_1, - TEST_TOKEN_2, - TEST_TRADE_EXACT_INPUT, - TEST_TRADE_EXACT_OUTPUT, - TEST_TRADE_FEE_ON_BUY, - TEST_TRADE_FEE_ON_SELL, -} from 'test-utils/constants' +import { PREVIEW_EXACT_IN_TRADE, TEST_ALLOWED_SLIPPAGE, TEST_TRADE_EXACT_INPUT } from 'test-utils/constants' import { render, screen, within } from 'test-utils/render' import SwapModalFooter from './SwapModalFooter' @@ -43,7 +34,7 @@ describe('SwapModalFooter.tsx', () => { ) ).toBeInTheDocument() expect( - screen.getByText('The fee paid to miners who process your transaction. This must be paid in $ETH.') + screen.getByText('The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.') ).toBeInTheDocument() expect(screen.getByText('The impact your trade has on the market price of this pool.')).toBeInTheDocument() }) @@ -77,99 +68,6 @@ describe('SwapModalFooter.tsx', () => { expect(within(showAcceptChanges).getByText('Accept')).toBeVisible() }) - it('test trade exact output, no recipient', () => { - render( - - ) - expect( - screen.getByText( - 'The maximum amount you are guaranteed to spend. If the price slips any further, your transaction will revert.' - ) - ).toBeInTheDocument() - expect( - screen.getByText('The fee paid to miners who process your transaction. This must be paid in $ETH.') - ).toBeInTheDocument() - expect(screen.getByText('The impact your trade has on the market price of this pool.')).toBeInTheDocument() - }) - - it('test trade fee on input token transfer', () => { - render( - - ) - expect( - screen.getByText( - 'Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees.' - ) - ).toBeInTheDocument() - expect(screen.getByText(`${TEST_TOKEN_1.symbol} fee`)).toBeInTheDocument() - }) - - it('test trade fee on output token transfer', () => { - render( - - ) - expect( - screen.getByText( - 'Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees.' - ) - ).toBeInTheDocument() - expect(screen.getByText(`${TEST_TOKEN_2.symbol} fee`)).toBeInTheDocument() - }) - it('renders a preview trade while disabling submission', () => { const { asFragment } = render( ` - text-align: right; - overflow-wrap: break-word; - ${({ warningColor, theme }) => warningColor && `color: ${theme[warningColor]};`}; -` - export default function SwapModalFooter({ trade, allowedSlippage, @@ -80,116 +66,19 @@ export default function SwapModalFooter({ const [routerPreference] = useRouterPreference() const routes = isClassicTrade(trade) ? getRoutingDiagramEntries(trade) : undefined const theme = useTheme() - const { chainId } = useWeb3React() - const nativeCurrency = useNativeCurrency(chainId) - const { formatCurrencyAmount, formatNumber, formatPriceImpact } = useFormatter() - const label = `${trade.executionPrice.baseCurrency?.symbol} ` - const labelInverted = `${trade.executionPrice.quoteCurrency?.symbol}` - const formattedPrice = formatNumber({ - input: trade.executionPrice ? parseFloat(trade.executionPrice.toFixed(9)) : undefined, - type: NumberType.TokenTx, - }) - const txCount = getTransactionCount(trade) + const lineItemProps = { trade, allowedSlippage, syncing: false } return ( <> - - - - {`1 ${labelInverted} = ${formattedPrice ?? '-'} ${label}`} - - - - - - The fee paid to miners who process your transaction. This must be paid in ${nativeCurrency.symbol}. - - } - > - - - : undefined} - > - - {isSubmittableTrade(trade) - ? formatNumber({ - input: trade.totalGasUseEstimateUSD, - type: NumberType.FiatGasPrice, - }) - : '-'} - - - - - {(isClassicTrade(trade) || isPreviewTrade(trade)) && ( - <> - - - - - The impact your trade has on the market price of this pool.}> - - - - {isClassicTrade(trade) && trade.priceImpact ? formatPriceImpact(trade.priceImpact) : '-'} - - - - - )} - - - - The minimum amount you are guaranteed to receive. If the price slips any further, your transaction - will revert. - - ) : ( - - The maximum amount you are guaranteed to spend. If the price slips any further, your transaction - will revert. - - ) - } - > - - - - {trade.tradeType === TradeType.EXACT_INPUT - ? `${formatCurrencyAmount({ - amount: trade.minimumAmountOut(allowedSlippage), - type: sixFigsFormatterRules, - })} ${trade.outputAmount.currency.symbol}` - : `${formatCurrencyAmount({ - amount: trade.maximumAmountIn(allowedSlippage), - type: sixFigsFormatterRules, - })} ${trade.inputAmount.currency.symbol}`} - - - + + + + + + + {showAcceptChanges ? ( @@ -251,35 +140,3 @@ export default function SwapModalFooter({ ) } - -function TokenTaxLineItem({ trade, type }: { trade: ClassicTrade | PreviewTrade; type: 'input' | 'output' }) { - const { formatPriceImpact } = useFormatter() - - const [currency, percentage] = - type === 'input' ? [trade.inputAmount.currency, trade.inputTax] : [trade.outputAmount.currency, trade.outputTax] - - if (percentage.equalTo(ZERO_PERCENT)) return null - - return ( - - - - - Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not - receive any of these fees. - {' '} - - Learn more - - - } - > - - - {formatPriceImpact(percentage)} - - - ) -} diff --git a/src/components/swap/SwapModalHeaderAmount.tsx b/src/components/swap/SwapModalHeaderAmount.tsx index 51427b9d6b..7c57c857b4 100644 --- a/src/components/swap/SwapModalHeaderAmount.tsx +++ b/src/components/swap/SwapModalHeaderAmount.tsx @@ -12,7 +12,7 @@ import { BREAKPOINTS } from 'theme' import { ThemedText } from 'theme/components' import { NumberType, useFormatter } from 'utils/formatNumbers' -export const Label = styled(ThemedText.BodySmall)<{ cursor?: string }>` +const Label = styled(ThemedText.BodySmall)<{ cursor?: string }>` cursor: ${({ cursor }) => cursor}; color: ${({ theme }) => theme.neutral2}; margin-right: 8px; diff --git a/src/components/swap/SwapRoute.tsx b/src/components/swap/SwapRoute.tsx index cef1a8a023..c2de7d568e 100644 --- a/src/components/swap/SwapRoute.tsx +++ b/src/components/swap/SwapRoute.tsx @@ -28,7 +28,7 @@ export default function SwapRoute({ trade, syncing }: { trade: ClassicTrade; syn return ( - + {syncing ? ( @@ -49,13 +49,13 @@ export default function SwapRoute({ trade, syncing }: { trade: ClassicTrade; syn
) : ( - + {gasPrice ? Best price route costs ~{gasPrice} in gas. : null}{' '} This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. - + )} )} diff --git a/src/components/swap/__snapshots__/AdvancedSwapDetails.test.tsx.snap b/src/components/swap/__snapshots__/AdvancedSwapDetails.test.tsx.snap deleted file mode 100644 index a9b2c7c972..0000000000 --- a/src/components/swap/__snapshots__/AdvancedSwapDetails.test.tsx.snap +++ /dev/null @@ -1,200 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AdvancedSwapDetails.tsx matches base snapshot 1`] = ` - - .c2 { - box-sizing: border-box; - margin: 0; - min-width: 0; -} - -.c3 { - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -.c4 { - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c8 { - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; -} - -.c6 { - color: #7D7D7D; -} - -.c7 { - color: #222222; -} - -.c1 { - width: 100%; - height: 1px; - background-color: #22222212; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - gap: 12px; -} - -.c5 { - display: inline-block; - height: inherit; -} - -
-
-
-
-
-
- Network fee -
-
-
-
-
-
- ~$1.00 -
-
-
-
-
-
-
-
- Price Impact -
-
-
-
- 105566.373% -
-
-
-
-
-
-
- Minimum output -
-
-
-
-
- 0.00000000000000098 DEF -
-
-
-
-
-
-
- Expected output -
-
-
-
-
- 0.000000000000001 DEF -
-
-
-
-
- Order routing -
-
-
-
- Uniswap Client -
-
-
-
-
- -`; diff --git a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap index 704f42a869..ac4dc2fc9a 100644 --- a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap +++ b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap @@ -91,7 +91,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` justify-content: flex-start; } -.c17 { +.c16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -128,6 +128,16 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` fill: #7D7D7D; } +.c20 { + text-align: right; + overflow-wrap: break-word; +} + +.c19 { + cursor: help; + color: #7D7D7D; +} + .c8 { background-color: transparent; border: none; @@ -178,7 +188,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` transition: transform 0.1s linear; } -.c16 { +.c17 { padding-top: 12px; } @@ -281,126 +291,121 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` >
+
-
-
-
-
- Network fee -
-
-
-
-
-
- ~$1.00 -
-
-
+ Network fee
-
-
-
- Price Impact -
-
-
-
- 105566.373% -
-
-
-
+
-
-
- Minimum output -
-
+ $1.00
-
- 0.00000000000000098 DEF -
+
+
+
+
+ Price impact
-
+
-
-
- Expected output -
-
+ + 105566.373% +
-
- 0.000000000000001 DEF -
+
+
+
+
+ Minimum output
-
-
- Order routing +
+
+ 0.00000000000000098 DEF +
-
-
+
+
+
+
+ Expected output +
+
+
+
+ 0.000000000000001 DEF +
+
+
+
+
+
+
+ Order routing +
+
+
+
Uniswap Client
diff --git a/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap b/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap new file mode 100644 index 0000000000..7db3e07f30 --- /dev/null +++ b/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap @@ -0,0 +1,9031 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SwapLineItem.tsx dutch order eth input 1`] = ` + + .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c10 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c10:hover { + opacity: 0.6; +} + +.c10:active { + opacity: 0.4; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c11 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c11::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c11.arrow-top { + bottom: -4px; +} + +.c11.arrow-top::before { + border-top: none; + border-left: none; +} + +.c11.arrow-bottom { + top: -4px; +} + +.c11.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c11.arrow-left { + right: -4px; +} + +.c11.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c11.arrow-right { + left: -4px; +} + +.c11.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) { + +} + +
+
+ Network fee +
+
+
+
+ $0.00 +
+
+
+
+
+
+
+ The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) { + +} + +
+
+ Minimum output +
+
+
+
+ 0.0000000000000009 DEF +
+
+
+
+
+
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) { + +} + +
+
+ Expected output +
+
+
+
+ 0.000000000000001 DEF +
+
+
+
+
+
+ The amount you expect to receive at the current market price. You may receive less or more if the market price changes while your transaction is pending. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c7 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: auto; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c8 { + width: auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 4px; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c12 { + color: #7D7D7D; +} + +.c14 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c14:hover { + opacity: 0.6; +} + +.c14:active { + opacity: 0.4; +} + +.c9 { + color: #4673fa; +} + +.c10 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c15 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c15::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c15.arrow-top { + bottom: -4px; +} + +.c15.arrow-top::before { + border-top: none; + border-left: none; +} + +.c15.arrow-bottom { + top: -4px; +} + +.c15.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c15.arrow-left { + right: -4px; +} + +.c15.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c15.arrow-right { + left: -4px; +} + +.c15.arrow-right::before { + border-right: none; + border-top: none; +} + +.c11 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c13 { + display: inline; +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) { + .c9 { + background-image: linear-gradient(91.39deg,#4673fa -101.76%,#9646fa 101.76%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +} + +
+
+ Order routing +
+
+
+
+
+ + + + + + + + + +
+
+ Uniswap X +
+
+
+
+
+
+
+
+
+
+
+ UniswapX +
+ aggregates liquidity sources for better prices and gas free swaps. + + Learn more + +
+
+
+
+
+
+ +`; + +exports[`SwapLineItem.tsx exact input 1`] = ` + + .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c10 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c10:hover { + opacity: 0.6; +} + +.c10:active { + opacity: 0.4; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c11 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c11::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c11.arrow-top { + bottom: -4px; +} + +.c11.arrow-top::before { + border-top: none; + border-left: none; +} + +.c11.arrow-bottom { + top: -4px; +} + +.c11.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c11.arrow-left { + right: -4px; +} + +.c11.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c11.arrow-right { + left: -4px; +} + +.c11.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Network fee +
+
+
+
+ $1.00 +
+
+
+
+
+
+
+ The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Price impact +
+
+
+
+ + 105566.373% + +
+
+
+
+
+
+ The impact your trade has on the market price of this pool. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Minimum output +
+
+
+
+ 0.00000000000000098 DEF +
+
+
+
+
+
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Expected output +
+
+
+
+ 0.000000000000001 DEF +
+
+
+
+
+
+ The amount you expect to receive at the current market price. You may receive less or more if the market price changes while your transaction is pending. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c24 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c25 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 1px; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c26 { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: -1px; +} + +.c26 > * { + margin: 1px !important; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c11 { + width: 100%; + height: 1px; + background-color: #22222212; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c32 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c32::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c32.arrow-top { + bottom: -4px; +} + +.c32.arrow-top::before { + border-top: none; + border-left: none; +} + +.c32.arrow-bottom { + top: -4px; +} + +.c32.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c32.arrow-left { + right: -4px; +} + +.c32.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c32.arrow-right { + left: -4px; +} + +.c32.arrow-right::before { + border-right: none; + border-top: none; +} + +.c31 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c8 { + max-width: 400px; + width: calc(100vw - 16px); + cursor: default; + padding: 16px 20px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 12px; +} + +.c20 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: #F9F9F9; + border: unset; + border-radius: 0.5rem; + color: #000; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 4px 6px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-weight: 535; +} + +.c16 { + opacity: 0; + -webkit-transition: opacity 250ms ease-in; + transition: opacity 250ms ease-in; + width: 20px; + height: 20px; + border-radius: 50%; +} + +.c15 { + width: 20px; + height: 20px; + background: #22222212; + -webkit-transition: background-color 250ms ease-in; + transition: background-color 250ms ease-in; + box-shadow: 0 0 1px white; + border-radius: 50%; +} + +.c14 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c28 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c29 { + z-index: 1; +} + +.c30 { + position: absolute; + left: -10px !important; +} + +.c12 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; +} + +.c13 { + display: grid; + grid-template-columns: 24px 1fr 24px; +} + +.c17 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0.1rem 0.5rem; + position: relative; +} + +.c27 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 4px 4px; +} + +.c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: absolute; + width: calc(100%); + z-index: 1; + opacity: 0.5; +} + +.c19 path { + stroke: #22222212; +} + +.c21 { + background-color: #F9F9F9; + border-radius: 8px; + display: grid; + grid-gap: 4px; + grid-auto-flow: column; + -webkit-box-pack: start; + -webkit-justify-content: start; + -ms-flex-pack: start; + justify-content: start; + padding: 4px 6px; + z-index: 1020; +} + +.c22 { + background-color: #F9F9F9; + border-radius: 4px; + color: #7D7D7D; + font-size: 10px; + padding: 2px 4px; + z-index: 1021; +} + +.c23 { + word-break: normal; +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Order routing +
+
+
+
+
+ Uniswap Client +
+
+
+
+
+
+
+
+
+ Uniswap Client +
+
+
+
+
+
+ ABC logo +
+
+
+
+ + dot_line.svg + +
+
+
+
+ V3 +
+
+
+ 100% +
+
+
+
+
+
+
+
+
+
+
+ DEF logo +
+
+
+
+
+
+ ABC logo +
+
+
+
+
+
+ 1% +
+
+
+
+
+
+ ABC/DEF 1% pool +
+
+
+
+
+
+
+ DEF logo +
+
+
+
+
+
+ Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+
+
+
+
+
+
+ +`; + +exports[`SwapLineItem.tsx exact input api 1`] = ` + + .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c10 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c10:hover { + opacity: 0.6; +} + +.c10:active { + opacity: 0.4; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c11 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c11::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c11.arrow-top { + bottom: -4px; +} + +.c11.arrow-top::before { + border-top: none; + border-left: none; +} + +.c11.arrow-bottom { + top: -4px; +} + +.c11.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c11.arrow-left { + right: -4px; +} + +.c11.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c11.arrow-right { + left: -4px; +} + +.c11.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Network fee +
+
+
+
+ $1.00 +
+
+
+
+
+
+
+ The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Price impact +
+
+
+
+ + 105566.373% + +
+
+
+
+
+
+ The impact your trade has on the market price of this pool. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Minimum output +
+
+
+
+ 0.00000000000000098 DEF +
+
+
+
+
+
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Expected output +
+
+
+
+ 0.000000000000001 DEF +
+
+
+
+
+
+ The amount you expect to receive at the current market price. You may receive less or more if the market price changes while your transaction is pending. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c24 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c25 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 1px; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c26 { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: -1px; +} + +.c26 > * { + margin: 1px !important; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c11 { + width: 100%; + height: 1px; + background-color: #22222212; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c32 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c32::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c32.arrow-top { + bottom: -4px; +} + +.c32.arrow-top::before { + border-top: none; + border-left: none; +} + +.c32.arrow-bottom { + top: -4px; +} + +.c32.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c32.arrow-left { + right: -4px; +} + +.c32.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c32.arrow-right { + left: -4px; +} + +.c32.arrow-right::before { + border-right: none; + border-top: none; +} + +.c31 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c8 { + max-width: 400px; + width: calc(100vw - 16px); + cursor: default; + padding: 16px 20px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 12px; +} + +.c20 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: #F9F9F9; + border: unset; + border-radius: 0.5rem; + color: #000; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 4px 6px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-weight: 535; +} + +.c16 { + opacity: 0; + -webkit-transition: opacity 250ms ease-in; + transition: opacity 250ms ease-in; + width: 20px; + height: 20px; + border-radius: 50%; +} + +.c15 { + width: 20px; + height: 20px; + background: #22222212; + -webkit-transition: background-color 250ms ease-in; + transition: background-color 250ms ease-in; + box-shadow: 0 0 1px white; + border-radius: 50%; +} + +.c14 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c28 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c29 { + z-index: 1; +} + +.c30 { + position: absolute; + left: -10px !important; +} + +.c12 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; +} + +.c13 { + display: grid; + grid-template-columns: 24px 1fr 24px; +} + +.c17 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0.1rem 0.5rem; + position: relative; +} + +.c27 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 4px 4px; +} + +.c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: absolute; + width: calc(100%); + z-index: 1; + opacity: 0.5; +} + +.c19 path { + stroke: #22222212; +} + +.c21 { + background-color: #F9F9F9; + border-radius: 8px; + display: grid; + grid-gap: 4px; + grid-auto-flow: column; + -webkit-box-pack: start; + -webkit-justify-content: start; + -ms-flex-pack: start; + justify-content: start; + padding: 4px 6px; + z-index: 1020; +} + +.c22 { + background-color: #F9F9F9; + border-radius: 4px; + color: #7D7D7D; + font-size: 10px; + padding: 2px 4px; + z-index: 1021; +} + +.c23 { + word-break: normal; +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Order routing +
+
+
+
+
+ Uniswap API +
+
+
+
+
+
+
+
+
+ Uniswap API +
+
+
+
+
+
+ ABC logo +
+
+
+
+ + dot_line.svg + +
+
+
+
+ V3 +
+
+
+ 100% +
+
+
+
+
+
+
+
+
+
+
+ DEF logo +
+
+
+
+
+
+ ABC logo +
+
+
+
+
+
+ 1% +
+
+
+
+
+
+ ABC/DEF 1% pool +
+
+
+
+
+
+
+ DEF logo +
+
+
+
+
+
+ Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+
+
+
+
+
+
+ +`; + +exports[`SwapLineItem.tsx exact output 1`] = ` + + .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c10 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c10:hover { + opacity: 0.6; +} + +.c10:active { + opacity: 0.4; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c11 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c11::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c11.arrow-top { + bottom: -4px; +} + +.c11.arrow-top::before { + border-top: none; + border-left: none; +} + +.c11.arrow-bottom { + top: -4px; +} + +.c11.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c11.arrow-left { + right: -4px; +} + +.c11.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c11.arrow-right { + left: -4px; +} + +.c11.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Network fee +
+
+
+
+ - +
+
+
+
+
+
+
+ The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Price impact +
+
+
+
+ + 105566.373% + +
+
+
+
+
+
+ The impact your trade has on the market price of this pool. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Maximum input +
+
+
+
+ 0.00000000000000102 ABC +
+
+
+
+
+
+ The maximum amount you are guaranteed to spend. If the price slips any further, your transaction will revert. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Expected output +
+
+
+
+ 0.000000000000001 GHI +
+
+
+
+
+
+ The amount you expect to receive at the current market price. You may receive less or more if the market price changes while your transaction is pending. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c24 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c25 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 1px; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c26 { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: -1px; +} + +.c26 > * { + margin: 1px !important; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c11 { + width: 100%; + height: 1px; + background-color: #22222212; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c32 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c32::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c32.arrow-top { + bottom: -4px; +} + +.c32.arrow-top::before { + border-top: none; + border-left: none; +} + +.c32.arrow-bottom { + top: -4px; +} + +.c32.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c32.arrow-left { + right: -4px; +} + +.c32.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c32.arrow-right { + left: -4px; +} + +.c32.arrow-right::before { + border-right: none; + border-top: none; +} + +.c31 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c8 { + max-width: 400px; + width: calc(100vw - 16px); + cursor: default; + padding: 16px 20px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 12px; +} + +.c20 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: #F9F9F9; + border: unset; + border-radius: 0.5rem; + color: #000; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 4px 6px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-weight: 535; +} + +.c16 { + opacity: 0; + -webkit-transition: opacity 250ms ease-in; + transition: opacity 250ms ease-in; + width: 20px; + height: 20px; + border-radius: 50%; +} + +.c15 { + width: 20px; + height: 20px; + background: #22222212; + -webkit-transition: background-color 250ms ease-in; + transition: background-color 250ms ease-in; + box-shadow: 0 0 1px white; + border-radius: 50%; +} + +.c14 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c28 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c29 { + z-index: 1; +} + +.c30 { + position: absolute; + left: -10px !important; +} + +.c12 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; +} + +.c13 { + display: grid; + grid-template-columns: 24px 1fr 24px; +} + +.c17 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0.1rem 0.5rem; + position: relative; +} + +.c27 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 4px 4px; +} + +.c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: absolute; + width: calc(100%); + z-index: 1; + opacity: 0.5; +} + +.c19 path { + stroke: #22222212; +} + +.c21 { + background-color: #F9F9F9; + border-radius: 8px; + display: grid; + grid-gap: 4px; + grid-auto-flow: column; + -webkit-box-pack: start; + -webkit-justify-content: start; + -ms-flex-pack: start; + justify-content: start; + padding: 4px 6px; + z-index: 1020; +} + +.c22 { + background-color: #F9F9F9; + border-radius: 4px; + color: #7D7D7D; + font-size: 10px; + padding: 2px 4px; + z-index: 1021; +} + +.c23 { + word-break: normal; +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Order routing +
+
+
+
+
+ Uniswap Client +
+
+
+
+
+
+
+
+
+ Uniswap Client +
+
+
+
+
+
+ ABC logo +
+
+
+
+ + dot_line.svg + +
+
+
+
+ V3 +
+
+
+ 100% +
+
+
+
+
+
+
+
+
+
+
+ GHI logo +
+
+
+
+
+
+ ABC logo +
+
+
+
+
+
+ 0.3% +
+
+
+
+
+
+ ABC/GHI 0.3% pool +
+
+
+
+
+
+
+ GHI logo +
+
+
+
+
+
+ This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+
+
+
+
+
+
+ +`; + +exports[`SwapLineItem.tsx fee on buy 1`] = ` + + .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c10 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c10:hover { + opacity: 0.6; +} + +.c10:active { + opacity: 0.4; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c11 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c11::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c11.arrow-top { + bottom: -4px; +} + +.c11.arrow-top::before { + border-top: none; + border-left: none; +} + +.c11.arrow-bottom { + top: -4px; +} + +.c11.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c11.arrow-left { + right: -4px; +} + +.c11.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c11.arrow-right { + left: -4px; +} + +.c11.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Network fee +
+
+
+
+ $1.00 +
+
+
+
+
+
+
+ The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c10 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c10:hover { + opacity: 0.6; +} + +.c10:active { + opacity: 0.4; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c11 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c11::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c11.arrow-top { + bottom: -4px; +} + +.c11.arrow-top::before { + border-top: none; + border-left: none; +} + +.c11.arrow-bottom { + top: -4px; +} + +.c11.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c11.arrow-left { + right: -4px; +} + +.c11.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c11.arrow-right { + left: -4px; +} + +.c11.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ DEF fee +
+
+
+
+ + -3.000% + +
+
+
+
+
+
+ Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees. + + Learn more + +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Price impact +
+
+
+
+ + 105566.373% + +
+
+
+
+
+
+ The impact your trade has on the market price of this pool. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Minimum output +
+
+
+
+ 0.000000000000000952 DEF +
+
+
+
+
+
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Expected output +
+
+
+
+ 0.00000000000000097 DEF +
+
+
+
+
+
+ The amount you expect to receive at the current market price. You may receive less or more if the market price changes while your transaction is pending. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c24 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c25 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 1px; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c26 { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: -1px; +} + +.c26 > * { + margin: 1px !important; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c11 { + width: 100%; + height: 1px; + background-color: #22222212; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c32 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c32::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c32.arrow-top { + bottom: -4px; +} + +.c32.arrow-top::before { + border-top: none; + border-left: none; +} + +.c32.arrow-bottom { + top: -4px; +} + +.c32.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c32.arrow-left { + right: -4px; +} + +.c32.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c32.arrow-right { + left: -4px; +} + +.c32.arrow-right::before { + border-right: none; + border-top: none; +} + +.c31 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c8 { + max-width: 400px; + width: calc(100vw - 16px); + cursor: default; + padding: 16px 20px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 12px; +} + +.c20 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: #F9F9F9; + border: unset; + border-radius: 0.5rem; + color: #000; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 4px 6px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-weight: 535; +} + +.c16 { + opacity: 0; + -webkit-transition: opacity 250ms ease-in; + transition: opacity 250ms ease-in; + width: 20px; + height: 20px; + border-radius: 50%; +} + +.c15 { + width: 20px; + height: 20px; + background: #22222212; + -webkit-transition: background-color 250ms ease-in; + transition: background-color 250ms ease-in; + box-shadow: 0 0 1px white; + border-radius: 50%; +} + +.c14 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c28 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c29 { + z-index: 1; +} + +.c30 { + position: absolute; + left: -10px !important; +} + +.c12 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; +} + +.c13 { + display: grid; + grid-template-columns: 24px 1fr 24px; +} + +.c17 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0.1rem 0.5rem; + position: relative; +} + +.c27 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 4px 4px; +} + +.c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: absolute; + width: calc(100%); + z-index: 1; + opacity: 0.5; +} + +.c19 path { + stroke: #22222212; +} + +.c21 { + background-color: #F9F9F9; + border-radius: 8px; + display: grid; + grid-gap: 4px; + grid-auto-flow: column; + -webkit-box-pack: start; + -webkit-justify-content: start; + -ms-flex-pack: start; + justify-content: start; + padding: 4px 6px; + z-index: 1020; +} + +.c22 { + background-color: #F9F9F9; + border-radius: 4px; + color: #7D7D7D; + font-size: 10px; + padding: 2px 4px; + z-index: 1021; +} + +.c23 { + word-break: normal; +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Order routing +
+
+
+
+
+ Uniswap API +
+
+
+
+
+
+
+
+
+ Uniswap API +
+
+
+
+
+
+ ABC logo +
+
+
+
+ + dot_line.svg + +
+
+
+
+ V3 +
+
+
+ 100% +
+
+
+
+
+
+
+
+
+
+
+ DEF logo +
+
+
+
+
+
+ ABC logo +
+
+
+
+
+
+ 1% +
+
+
+
+
+
+ ABC/DEF 1% pool +
+
+
+
+
+
+
+ DEF logo +
+
+
+
+
+
+ Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+
+
+
+
+
+
+ +`; + +exports[`SwapLineItem.tsx fee on sell 1`] = ` + + .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c10 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c10:hover { + opacity: 0.6; +} + +.c10:active { + opacity: 0.4; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c11 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c11::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c11.arrow-top { + bottom: -4px; +} + +.c11.arrow-top::before { + border-top: none; + border-left: none; +} + +.c11.arrow-bottom { + top: -4px; +} + +.c11.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c11.arrow-left { + right: -4px; +} + +.c11.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c11.arrow-right { + left: -4px; +} + +.c11.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Network fee +
+
+
+
+ $1.00 +
+
+
+
+
+
+
+ The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c10 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c10:hover { + opacity: 0.6; +} + +.c10:active { + opacity: 0.4; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c11 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c11::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c11.arrow-top { + bottom: -4px; +} + +.c11.arrow-top::before { + border-top: none; + border-left: none; +} + +.c11.arrow-bottom { + top: -4px; +} + +.c11.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c11.arrow-left { + right: -4px; +} + +.c11.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c11.arrow-right { + left: -4px; +} + +.c11.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ ABC fee +
+
+
+
+ + -3.000% + +
+
+
+
+
+
+ Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees. + + Learn more + +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Price impact +
+
+
+
+ + 105566.373% + +
+
+
+
+
+
+ The impact your trade has on the market price of this pool. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Minimum output +
+
+
+
+ 0.000000000000000952 DEF +
+
+
+
+
+
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Expected output +
+
+
+
+ 0.00000000000000097 DEF +
+
+
+
+
+
+ The amount you expect to receive at the current market price. You may receive less or more if the market price changes while your transaction is pending. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c24 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c25 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 1px; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c26 { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: -1px; +} + +.c26 > * { + margin: 1px !important; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c11 { + width: 100%; + height: 1px; + background-color: #22222212; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c32 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c32::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c32.arrow-top { + bottom: -4px; +} + +.c32.arrow-top::before { + border-top: none; + border-left: none; +} + +.c32.arrow-bottom { + top: -4px; +} + +.c32.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c32.arrow-left { + right: -4px; +} + +.c32.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c32.arrow-right { + left: -4px; +} + +.c32.arrow-right::before { + border-right: none; + border-top: none; +} + +.c31 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c8 { + max-width: 400px; + width: calc(100vw - 16px); + cursor: default; + padding: 16px 20px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 12px; +} + +.c20 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: #F9F9F9; + border: unset; + border-radius: 0.5rem; + color: #000; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 4px 6px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-weight: 535; +} + +.c16 { + opacity: 0; + -webkit-transition: opacity 250ms ease-in; + transition: opacity 250ms ease-in; + width: 20px; + height: 20px; + border-radius: 50%; +} + +.c15 { + width: 20px; + height: 20px; + background: #22222212; + -webkit-transition: background-color 250ms ease-in; + transition: background-color 250ms ease-in; + box-shadow: 0 0 1px white; + border-radius: 50%; +} + +.c14 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c28 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c29 { + z-index: 1; +} + +.c30 { + position: absolute; + left: -10px !important; +} + +.c12 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; +} + +.c13 { + display: grid; + grid-template-columns: 24px 1fr 24px; +} + +.c17 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0.1rem 0.5rem; + position: relative; +} + +.c27 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 4px 4px; +} + +.c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: absolute; + width: calc(100%); + z-index: 1; + opacity: 0.5; +} + +.c19 path { + stroke: #22222212; +} + +.c21 { + background-color: #F9F9F9; + border-radius: 8px; + display: grid; + grid-gap: 4px; + grid-auto-flow: column; + -webkit-box-pack: start; + -webkit-justify-content: start; + -ms-flex-pack: start; + justify-content: start; + padding: 4px 6px; + z-index: 1020; +} + +.c22 { + background-color: #F9F9F9; + border-radius: 4px; + color: #7D7D7D; + font-size: 10px; + padding: 2px 4px; + z-index: 1021; +} + +.c23 { + word-break: normal; +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Order routing +
+
+
+
+
+ Uniswap API +
+
+
+
+
+
+
+
+
+ Uniswap API +
+
+
+
+
+
+ ABC logo +
+
+
+
+ + dot_line.svg + +
+
+
+
+ V3 +
+
+
+ 100% +
+
+
+
+
+
+
+
+
+
+
+ DEF logo +
+
+
+
+
+
+ ABC logo +
+
+
+
+
+
+ 1% +
+
+
+
+
+
+ ABC/DEF 1% pool +
+
+
+
+
+
+
+ DEF logo +
+
+
+
+
+
+ Best price route costs ~$1.00 in gas. This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step. +
+
+
+
+
+
+
+ +`; + +exports[`SwapLineItem.tsx preview exact in 1`] = ` + + .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c10 { + color: #7D7D7D; +} + +.c11 { + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 125ms; + transition-duration: 125ms; + color: #FC72FF; + stroke: #FC72FF; + font-weight: 500; +} + +.c11:hover { + opacity: 0.6; +} + +.c11:active { + opacity: 0.4; +} + +.c7 { + -webkit-animation: fAQEyV 1.5s infinite; + animation: fAQEyV 1.5s infinite; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% ); + background-size: 400%; + will-change: background-position; + border-radius: 12px; + height: 15px; + width: 50px; +} + +.c8 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c12 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c12::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c12.arrow-top { + bottom: -4px; +} + +.c12.arrow-top::before { + border-top: none; + border-left: none; +} + +.c12.arrow-bottom { + top: -4px; +} + +.c12.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c12.arrow-left { + right: -4px; +} + +.c12.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c12.arrow-right { + left: -4px; +} + +.c12.arrow-right::before { + border-right: none; + border-top: none; +} + +.c9 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Network fee +
+
+
+
+
+
+
+
+
+
+
+
+ The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. + + Learn more + +
+
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c10 { + color: #7D7D7D; +} + +.c7 { + -webkit-animation: fAQEyV 1.5s infinite; + animation: fAQEyV 1.5s infinite; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% ); + background-size: 400%; + will-change: background-position; + border-radius: 12px; + height: 15px; + width: 50px; +} + +.c8 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c11 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c11::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c11.arrow-top { + bottom: -4px; +} + +.c11.arrow-top::before { + border-top: none; + border-left: none; +} + +.c11.arrow-bottom { + top: -4px; +} + +.c11.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c11.arrow-left { + right: -4px; +} + +.c11.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c11.arrow-right { + left: -4px; +} + +.c11.arrow-right::before { + border-right: none; + border-top: none; +} + +.c9 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Price impact +
+
+
+
+
+
+
+
+
+
+
+ The impact your trade has on the market price of this pool. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Minimum output +
+
+
+
+ 0.00000000000000098 DEF +
+
+
+
+
+
+ The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c9 { + color: #7D7D7D; +} + +.c7 { + z-index: 1070; + pointer-events: none; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 150ms linear,opacity 150ms linear; + transition: visibility 150ms linear,opacity 150ms linear; + color: #7D7D7D; +} + +.c5 { + display: inline-block; + height: inherit; +} + +.c10 { + width: 8px; + height: 8px; + z-index: 9998; +} + +.c10::before { + position: absolute; + width: 8px; + height: 8px; + box-sizing: border-box; + z-index: 9998; + content: ''; + border: 1px solid #22222212; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background: #FFFFFF; +} + +.c10.arrow-top { + bottom: -4px; +} + +.c10.arrow-top::before { + border-top: none; + border-left: none; +} + +.c10.arrow-bottom { + top: -4px; +} + +.c10.arrow-bottom::before { + border-bottom: none; + border-right: none; +} + +.c10.arrow-left { + right: -4px; +} + +.c10.arrow-left::before { + border-bottom: none; + border-left: none; +} + +.c10.arrow-right { + left: -4px; +} + +.c10.arrow-right::before { + border-right: none; + border-top: none; +} + +.c8 { + max-width: 256px; + width: calc(100vw - 16px); + cursor: default; + padding: 12px; + pointer-events: auto; + color: #222222; + font-weight: 485; + font-size: 12px; + line-height: 16px; + word-break: break-word; + background: #FFFFFF; + border-radius: 12px; + border: 1px solid #22222212; + box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1); +} + +.c6 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Expected output +
+
+
+
+ 0.000000000000001 DEF +
+
+
+
+
+
+ The amount you expect to receive at the current market price. You may receive less or more if the market price changes while your transaction is pending. +
+
+
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c6 { + -webkit-animation: fAQEyV 1.5s infinite; + animation: fAQEyV 1.5s infinite; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% ); + background-size: 400%; + will-change: background-position; + border-radius: 12px; + height: 15px; + width: 50px; +} + +.c5 { + text-align: right; + overflow-wrap: break-word; +} + +.c4 { + cursor: auto; + color: #7D7D7D; +} + +
+
+ Order routing +
+
+
+
+
+ +`; + +exports[`SwapLineItem.tsx syncing 1`] = ` + + .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c5 { + -webkit-animation: fAQEyV 1.5s infinite; + animation: fAQEyV 1.5s infinite; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% ); + background-size: 400%; + will-change: background-position; + border-radius: 12px; + height: 15px; + width: 50px; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Network fee +
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c5 { + -webkit-animation: fAQEyV 1.5s infinite; + animation: fAQEyV 1.5s infinite; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% ); + background-size: 400%; + will-change: background-position; + border-radius: 12px; + height: 15px; + width: 50px; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Price impact +
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c5 { + -webkit-animation: fAQEyV 1.5s infinite; + animation: fAQEyV 1.5s infinite; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% ); + background-size: 400%; + will-change: background-position; + border-radius: 12px; + height: 15px; + width: 70px; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Minimum output +
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c5 { + -webkit-animation: fAQEyV 1.5s infinite; + animation: fAQEyV 1.5s infinite; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% ); + background-size: 400%; + will-change: background-position; + border-radius: 12px; + height: 15px; + width: 65px; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Expected output +
+
+
+ .c0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c1 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c2 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + color: #222222; +} + +.c5 { + -webkit-animation: fAQEyV 1.5s infinite; + animation: fAQEyV 1.5s infinite; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% ); + background-size: 400%; + will-change: background-position; + border-radius: 12px; + height: 15px; + width: 50px; +} + +.c4 { + cursor: help; + color: #7D7D7D; +} + +
+
+ Order routing +
+
+
+ +`; diff --git a/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap b/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap index 2b5cf638b9..13a0d3ad39 100644 --- a/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap +++ b/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap @@ -2,31 +2,37 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = ` - .c3 { + .c2 { box-sizing: border-box; margin: 0; min-width: 0; } -.c4 { +.c3 { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c4 { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - gap: 8px; } -.c2 { +.c5 { color: #222222; } @@ -45,131 +51,113 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = gap: 12px; } -.c7 { +.c9 { display: inline-block; height: inherit; } -.c5 { +.c7 { + text-align: right; + overflow-wrap: break-word; +} + +.c6 { + cursor: auto; color: #7D7D7D; - margin-right: 8px; } .c8 { cursor: help; color: #7D7D7D; - margin-right: 8px; } .c1 { padding: 0 8px; } -.c6 { - text-align: right; - overflow-wrap: break-word; -} -
-
- Exchange rate -
-
- 1 DEF = 1.00 ABC -
+ Exchange rate +
+
+ 1 DEF = 1.00 ABC
-
-
-
- Network fee -
-
-
-
-
-
- $1.00 -
+ Network fee +
+
+
+
+ $1.00
-
-
-
+
+
+
+ - Price impact -
+ 105566.373% +
-
- 105566.373% -
-
-
-
- Minimum received -
+ Minimum output +
+
+
+
+ 0.00000000000000098 DEF
-
- 0.00000000000000098 DEF -
@@ -346,31 +334,37 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = exports[`SwapModalFooter.tsx renders a preview trade while disabling submission 1`] = ` - .c3 { + .c2 { box-sizing: border-box; margin: 0; min-width: 0; } -.c4 { +.c3 { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c4 { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - gap: 8px; } -.c2 { +.c5 { color: #222222; } @@ -389,31 +383,43 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission gap: 12px; } -.c7 { +.c10 { + -webkit-animation: fAQEyV 1.5s infinite; + animation: fAQEyV 1.5s infinite; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + background: linear-gradient( to left, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% ); + background-size: 400%; + will-change: background-position; + border-radius: 12px; + height: 15px; + width: 50px; +} + +.c9 { display: inline-block; height: inherit; } -.c5 { +.c7 { + text-align: right; + overflow-wrap: break-word; +} + +.c6 { + cursor: auto; color: #7D7D7D; - margin-right: 8px; } .c8 { cursor: help; color: #7D7D7D; - margin-right: 8px; } .c1 { padding: 0 8px; } -.c6 { - text-align: right; - overflow-wrap: break-word; -} - @media (max-width:960px) { } @@ -422,102 +428,91 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission class="c0 c1" >
-
- Exchange rate -
-
- 1 DEF = 1.00 ABC -
+ Exchange rate +
+
+ 1 DEF = 1.00 ABC
-
-
+ Network fee +
+
+
+
- Network fees -
-
-
-
-
-
- - -
+ class="c10" + data-testid="loading-row" + height="15" + width="50" + />
-
-
+ Price impact +
+
+
+
- Price impact -
+ class="c10" + data-testid="loading-row" + height="15" + width="50" + />
-
- - -
-
-
-
- Minimum received -
+ Minimum output +
+
+
+
+ 0.00000000000000098 DEF
-
- 0.00000000000000098 DEF -
diff --git a/src/hooks/useHoverProps.ts b/src/hooks/useHoverProps.ts new file mode 100644 index 0000000000..c9f7e354c7 --- /dev/null +++ b/src/hooks/useHoverProps.ts @@ -0,0 +1,8 @@ +import { useState } from 'react' + +export default function useHoverProps(): [boolean, { onMouseEnter: () => void; onMouseLeave: () => void }] { + const [hover, setHover] = useState(false) + const hoverProps = { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) } + + return [hover, hoverProps] +} diff --git a/src/state/routing/types.ts b/src/state/routing/types.ts index e3041c4151..5742fc60d7 100644 --- a/src/state/routing/types.ts +++ b/src/state/routing/types.ts @@ -3,6 +3,7 @@ import { ChainId, Currency, CurrencyAmount, Fraction, Percent, Price, Token, Tra import { DutchOrderInfo, DutchOrderInfoJSON, DutchOrderTrade as IDutchOrderTrade } from '@uniswap/uniswapx-sdk' import { Route as V2Route } from '@uniswap/v2-sdk' import { Route as V3Route } from '@uniswap/v3-sdk' +import { ZERO_PERCENT } from 'constants/misc' export enum TradeState { LOADING = 'loading', @@ -280,6 +281,9 @@ export class DutchOrderTrade extends IDutchOrderTrade }, + Caption(props: TextProps) { + return + }, Link(props: TextProps) { return }, diff --git a/src/utils/formatNumbers.ts b/src/utils/formatNumbers.ts index 50eea7d381..1b49e394cb 100644 --- a/src/utils/formatNumbers.ts +++ b/src/utils/formatNumbers.ts @@ -119,7 +119,7 @@ const SIX_SIG_FIGS_TWO_DECIMALS: NumberFormatOptions = { minimumFractionDigits: 2, } -export const SIX_SIG_FIGS_NO_COMMAS: NumberFormatOptions = { +const SIX_SIG_FIGS_NO_COMMAS: NumberFormatOptions = { notation: 'standard', maximumSignificantDigits: 6, useGrouping: false, @@ -178,7 +178,7 @@ type FormatterBaseRule = { formatterOptions: NumberFormatOptions } type FormatterExactRule = { upperBound?: undefined; exact: number } & FormatterBaseRule type FormatterUpperBoundRule = { upperBound: number; exact?: undefined } & FormatterBaseRule -export type FormatterRule = (FormatterExactRule | FormatterUpperBoundRule) & { hardCodedInput?: HardCodedInputFormat } +type FormatterRule = (FormatterExactRule | FormatterUpperBoundRule) & { hardCodedInput?: HardCodedInputFormat } // these formatter objects dictate which formatter rule to use based on the interval that // the number falls into. for example, based on the rule set below, if your number @@ -215,6 +215,8 @@ const swapTradeAmountFormatter: FormatterRule[] = [ { upperBound: Infinity, formatterOptions: SIX_SIG_FIGS_TWO_DECIMALS_NO_COMMAS }, ] +const swapDetailsAmountFormatter: FormatterRule[] = [{ upperBound: Infinity, formatterOptions: SIX_SIG_FIGS_NO_COMMAS }] + const swapPriceFormatter: FormatterRule[] = [ { exact: 0, formatterOptions: NO_DECIMALS }, { @@ -322,6 +324,8 @@ export enum NumberType { // in the text input boxes. Output amounts on review screen should use the above TokenTx formatter SwapTradeAmount = 'swap-trade-amount', + SwapDetailsAmount = 'swap-details-amount', + // fiat prices in any component that belongs in the Token Details flow (except for token stats) FiatTokenDetails = 'fiat-token-details', @@ -356,6 +360,7 @@ const TYPE_TO_FORMATTER_RULES = { [NumberType.TokenTx]: tokenTxFormatter, [NumberType.SwapPrice]: swapPriceFormatter, [NumberType.SwapTradeAmount]: swapTradeAmountFormatter, + [NumberType.SwapDetailsAmount]: swapDetailsAmountFormatter, [NumberType.FiatTokenQuantity]: fiatTokenQuantityFormatter, [NumberType.FiatTokenDetails]: fiatTokenDetailsFormatter, [NumberType.FiatTokenPrice]: fiatTokenPricesFormatter, diff --git a/src/utils/prices.ts b/src/utils/prices.ts index b5ef5e59b4..05dcf49c1e 100644 --- a/src/utils/prices.ts +++ b/src/utils/prices.ts @@ -109,7 +109,7 @@ export function getPriceImpactWarning(priceImpact: Percent): 'warning' | 'error' export function getPriceImpactColor(priceImpact: Percent): keyof DefaultTheme | undefined { switch (getPriceImpactWarning(priceImpact)) { case 'error': - return 'deprecated_accentFailureSoft' + return 'critical' case 'warning': return 'deprecated_accentWarning' default: