Skip to content

I
interface
Commit 932c4482 authored by cartcrom's avatar cartcrom Committed by GitHub
Browse files
Options

feat: updated rate/routing tooltips (#7412) 

* feat: updated routing tooltips

* refactor: gas price formatting

* fit: boolean rendering
parent 2d8dac5c
Show whitespace changes
Inline Side-by-side
Showing with 556 additions and 542 deletions
src/components/RoutingDiagram/RoutingDiagram.tsx
View file @ 932c4482
......@@ -14,7 +14,7 @@ import { Z_INDEX } from 'theme/zIndex'
import { RoutingDiagramEntry } from 'utils/getRoutingDiagramEntries'
import { ReactComponent as DotLine } from '../../assets/svg/dot_line.svg'
import { MouseoverTooltip } from '../Tooltip'
import { MouseoverTooltip, TooltipSize } from '../Tooltip'
const Wrapper = styled(Box)`
align-items: center;
......@@ -142,6 +142,7 @@ function Pool({ currency0, currency1, feeAmount }: { currency0: Currency; curren
return (
<MouseoverTooltip
text={<Trans>{tokenInfo0?.symbol + '/' + tokenInfo1?.symbol + ' ' + feeAmount / 10000}% pool</Trans>}
size={TooltipSize.ExtraSmall}
>
<PoolBadge>
<Box margin="0 4px 0 12px">
......
src/components/swap/SwapLineItem.tsx
View file @ 932c4482
......@@ -20,7 +20,8 @@ import { getPriceImpactColor } from 'utils/prices'
import { GasBreakdownTooltip, UniswapXDescription } from './GasBreakdownTooltip'
import { MaxSlippageTooltip } from './MaxSlippageTooltip'
import SwapRoute from './SwapRoute'
import { RoutingTooltip, SwapRoute } from './SwapRoute'
import TradePrice from './TradePrice'
export enum SwapLineItemType {
EXCHANGE_RATE,
......@@ -76,15 +77,6 @@ function Loading({ width = 50 }: { width?: number }) {
return <LoadingRow data-testid="loading-row" height={15} width={width} />
}
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 { formatSlippage } = useFormatter()
return <ColorWrapper textColor={getPriceImpactColor(percent)}>{formatSlippage(percent)}</ColorWrapper>
......@@ -122,8 +114,10 @@ function useLineItem(props: SwapLineItemProps): LineItemData | undefined {
switch (type) {
case SwapLineItemType.EXCHANGE_RATE:
return {
Label: () => <Trans>Exchange rate</Trans>,
Value: () => <ExchangeRateRow trade={trade} />,
Label: () => <Trans>Rate</Trans>,
Value: () => <TradePrice price={trade.executionPrice} />,
TooltipBody: !isPreview ? () => <RoutingTooltip trade={trade} /> : undefined,
tooltipSize: isUniswapX ? TooltipSize.Small : TooltipSize.Large,
}
case SwapLineItemType.NETWORK_COST:
if (!SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId)) return
......@@ -185,12 +179,12 @@ function useLineItem(props: SwapLineItemProps): LineItemData | undefined {
loaderWidth: 70,
}
case SwapLineItemType.ROUTING_INFO:
if (isPreview) return { Label: () => <Trans>Order routing</Trans>, Value: () => <Loading /> }
if (isPreview || syncing) return { Label: () => <Trans>Order routing</Trans>, Value: () => <Loading /> }
return {
Label: () => <Trans>Order routing</Trans>,
TooltipBody: () => {
if (isUniswapX) return <UniswapXDescription />
return <SwapRoute data-testid="swap-route-info" trade={trade} syncing={syncing} />
return <SwapRoute data-testid="swap-route-info" trade={trade} />
},
tooltipSize: isUniswapX ? TooltipSize.Small : TooltipSize.Large,
Value: () => <RouterLabel trade={trade} />,
......
src/components/swap/SwapRoute.tsx
View file @ 932c4482
import { Trans } from '@lingui/macro'
import { useWeb3React } from '@web3-react/core'
import Column from 'components/Column'
import { LoadingRows } from 'components/Loader/styled'
import RoutingDiagram from 'components/RoutingDiagram/RoutingDiagram'
import { RowBetween } from 'components/Row'
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
import { ClassicTrade } from 'state/routing/types'
import { ClassicTrade, SubmittableTrade } from 'state/routing/types'
import { isClassicTrade } from 'state/routing/utils'
import { Separator, ThemedText } from 'theme/components'
import { NumberType, useFormatter } from 'utils/formatNumbers'
import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries'
import RouterLabel from '../RouterLabel'
import { UniswapXDescription } from './GasBreakdownTooltip'
export default function SwapRoute({ trade, syncing }: { trade: ClassicTrade; syncing: boolean }) {
const { chainId } = useWeb3React()
const autoRouterSupported = useAutoRouterSupported()
// TODO(WEB-2022)
// Can `trade.gasUseEstimateUSD` be defined when `chainId` is not in `SUPPORTED_GAS_ESTIMATE_CHAIN_IDS`?
function useGasPrice({ gasUseEstimateUSD, inputAmount }: ClassicTrade) {
const { formatNumber } = useFormatter()
if (!gasUseEstimateUSD || !SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(inputAmount.currency.chainId)) return undefined
const routes = getRoutingDiagramEntries(trade)
return gasUseEstimateUSD === 0 ? '<$0.01' : formatNumber({ input: gasUseEstimateUSD, type: NumberType.FiatGasPrice })
}
const gasPrice =
// TODO(WEB-2022)
// Can `trade.gasUseEstimateUSD` be defined when `chainId` is not in `SUPPORTED_GAS_ESTIMATE_CHAIN_IDS`?
trade.gasUseEstimateUSD && chainId && SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId)
? trade.gasUseEstimateUSD === 0
? '<$0.01'
: '$' + trade.gasUseEstimateUSD.toFixed(2)
: undefined
function RouteLabel({ trade }: { trade: SubmittableTrade }) {
return (
<RowBetween>
<ThemedText.BodySmall color="neutral2">Order Routing</ThemedText.BodySmall>
<RouterLabel trade={trade} color="neutral1" />
</RowBetween>
)
}
function PriceImpactRow({ trade }: { trade: ClassicTrade }) {
const { formatPriceImpact } = useFormatter()
return (
<ThemedText.BodySmall color="neutral2">
<RowBetween>
<Trans>Price Impact</Trans>
<div>{formatPriceImpact(trade.priceImpact)}</div>
</RowBetween>
</ThemedText.BodySmall>
)
}
export function RoutingTooltip({ trade }: { trade: SubmittableTrade }) {
return isClassicTrade(trade) ? (
<Column gap="md">
<RouterLabel trade={trade} color="neutral2" />
<PriceImpactRow trade={trade} />
<Separator />
{syncing ? (
<LoadingRows>
<div style={{ width: '100%', height: '30px' }} />
</LoadingRows>
<RouteLabel trade={trade} />
<SwapRoute trade={trade} />
</Column>
) : (
<RoutingDiagram
currencyIn={trade.inputAmount.currency}
currencyOut={trade.outputAmount.currency}
routes={routes}
/>
)}
{autoRouterSupported && (
<>
<Column gap="md">
<RouteLabel trade={trade} />
<Separator />
{syncing ? (
<LoadingRows>
<div style={{ width: '100%', height: '15px' }} />
</LoadingRows>
) : (
<UniswapXDescription />
</Column>
)
}
export function SwapRoute({ trade }: { trade: ClassicTrade }) {
const { inputAmount, outputAmount } = trade
const routes = getRoutingDiagramEntries(trade)
const gasPrice = useGasPrice(trade)
return useAutoRouterSupported() ? (
<Column gap="md">
<RoutingDiagram routes={routes} currencyIn={inputAmount.currency} currencyOut={outputAmount.currency} />
<ThemedText.Caption color="neutral2">
{gasPrice ? <Trans>Best price route costs ~{gasPrice} in gas.</Trans> : null}{' '}
{Boolean(gasPrice) && <Trans>Best price route costs ~{gasPrice} in gas. </Trans>}
{Boolean(gasPrice) && ' '}
<Trans>
This route optimizes your total output by considering split routes, multiple hops, and the gas cost of
each step.
This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each
step.
</Trans>
</ThemedText.Caption>
)}
</>
)}
</Column>
) : (
<RoutingDiagram routes={routes} currencyIn={inputAmount.currency} currencyOut={outputAmount.currency} />
)
}
src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap
View file @ 932c4482
......@@ -146,28 +146,6 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
fill: #7D7D7D;
}
.c20 {
text-align: right;
overflow-wrap: break-word;
}
.c19 {
cursor: help;
color: #7D7D7D;
}
.c22 {
background: #22222212;
border-radius: 8px;
color: #7D7D7D;
height: 20px;
padding: 0 6px;
}
.c22::after {
content: 'Auto';
}
.c8 {
background-color: transparent;
border: none;
......@@ -200,6 +178,28 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
user-select: text;
}
.c20 {
text-align: right;
overflow-wrap: break-word;
}
.c19 {
cursor: help;
color: #7D7D7D;
}
.c22 {
background: #22222212;
border-radius: 8px;
color: #7D7D7D;
height: 20px;
padding: 0 6px;
}
.c22::after {
content: 'Auto';
}
.c5 {
padding: 0;
-webkit-align-items: center;
......
src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
View file @ 932c4482
......@@ -1884,7 +1884,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
min-width: 0;
}
.c24 {
.c23 {
box-sizing: border-box;
margin: 0;
min-width: 0;
......@@ -1908,7 +1908,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
justify-content: flex-start;
}
.c25 {
.c24 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -1933,14 +1933,14 @@ exports[`SwapLineItem.tsx exact input 1`] = `
justify-content: space-between;
}
.c26 {
.c25 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -1px;
}
.c26 > * {
.c25 > * {
margin: 1px !important;
}
......@@ -1952,12 +1952,6 @@ exports[`SwapLineItem.tsx exact input 1`] = `
color: #7D7D7D;
}
.c11 {
width: 100%;
height: 1px;
background-color: #22222212;
}
.c7 {
z-index: 1070;
pointer-events: none;
......@@ -1973,13 +1967,13 @@ exports[`SwapLineItem.tsx exact input 1`] = `
height: inherit;
}
.c32 {
.c31 {
width: 8px;
height: 8px;
z-index: 9998;
}
.c32::before {
.c31::before {
position: absolute;
width: 8px;
height: 8px;
......@@ -1993,47 +1987,47 @@ exports[`SwapLineItem.tsx exact input 1`] = `
background: #FFFFFF;
}
.c32.arrow-top {
.c31.arrow-top {
bottom: -4px;
}
.c32.arrow-top::before {
.c31.arrow-top::before {
border-top: none;
border-left: none;
}
.c32.arrow-bottom {
.c31.arrow-bottom {
top: -4px;
}
.c32.arrow-bottom::before {
.c31.arrow-bottom::before {
border-bottom: none;
border-right: none;
}
.c32.arrow-left {
.c31.arrow-left {
right: -4px;
}
.c32.arrow-left::before {
.c31.arrow-left::before {
border-bottom: none;
border-left: none;
}
.c32.arrow-right {
.c31.arrow-right {
left: -4px;
}
.c32.arrow-right::before {
.c31.arrow-right::before {
border-right: none;
border-top: none;
}
.c31 {
max-width: 256px;
.c8 {
max-width: 400px;
width: calc(100vw - 16px);
cursor: default;
padding: 12px;
padding: 16px 20px;
pointer-events: auto;
color: #222222;
font-weight: 485;
......@@ -2046,11 +2040,11 @@ exports[`SwapLineItem.tsx exact input 1`] = `
box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}
.c8 {
max-width: 400px;
.c30 {
max-width: 200px;
width: calc(100vw - 16px);
cursor: default;
padding: 16px 20px;
padding: 8px;
pointer-events: auto;
color: #222222;
font-weight: 485;
......@@ -2078,7 +2072,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
gap: 12px;
}
.c20 {
.c19 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -2099,7 +2093,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
font-weight: 535;
}
.c16 {
.c15 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
......@@ -2108,7 +2102,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
border-radius: 50%;
}
.c15 {
.c14 {
width: 20px;
height: 20px;
background: #22222212;
......@@ -2118,7 +2112,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
border-radius: 50%;
}
.c14 {
.c13 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
......@@ -2126,7 +2120,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
display: flex;
}
.c28 {
.c27 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
......@@ -2137,16 +2131,16 @@ exports[`SwapLineItem.tsx exact input 1`] = `
flex-direction: row;
}
.c29 {
.c28 {
z-index: 1;
}
.c30 {
.c29 {
position: absolute;
left: -10px !important;
}
.c12 {
.c11 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -2154,12 +2148,12 @@ exports[`SwapLineItem.tsx exact input 1`] = `
width: 100%;
}
.c13 {
.c12 {
display: grid;
grid-template-columns: 24px 1fr 24px;
}
.c17 {
.c16 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -2176,7 +2170,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
position: relative;
}
.c27 {
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2184,7 +2178,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
padding: 4px 4px;
}
.c18 {
.c17 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -2199,11 +2193,11 @@ exports[`SwapLineItem.tsx exact input 1`] = `
opacity: 0.5;
}
.c19 path {
.c18 path {
stroke: #22222212;
}
.c21 {
.c20 {
background-color: #F9F9F9;
border-radius: 8px;
display: grid;
......@@ -2217,7 +2211,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
z-index: 1020;
}
.c22 {
.c21 {
background-color: #F9F9F9;
border-radius: 4px;
color: #7D7D7D;
......@@ -2226,7 +2220,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
z-index: 1021;
}
.c23 {
.c22 {
word-break: normal;
}
......@@ -2278,66 +2272,58 @@ exports[`SwapLineItem.tsx exact input 1`] = `
class="c10"
>
<div
class="c9 css-142zc9n"
>
Uniswap Client
</div>
<div
class="c11"
/>
<div
class="c12 css-vurnku"
class="c11 css-vurnku"
>
<div
class="c0 c1 c13"
class="c0 c1 c12"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="ABC logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
</div>
<div
class="c0 c1 c17"
class="c0 c1 c16"
>
<div
class="c18"
class="c17"
>
<svg
class="c19"
class="c18"
>
dot_line.svg
</svg>
</div>
<div
class="c20 c21"
class="c19 c20"
>
<div
class="c20 c22"
class="c19 c21"
>
<div
class="c3 c23 css-1m65e73"
class="c3 c22 css-1m65e73"
>
V3
</div>
</div>
<div
class="c9 c23 css-1m65e73"
class="c9 c22 css-1m65e73"
style="min-width: auto;"
>
100%
</div>
</div>
<div
class="c24 c25 c26"
class="c23 c24 c25"
style="justify-content: space-evenly; z-index: 2;"
width="100%"
>
......@@ -2346,45 +2332,45 @@ exports[`SwapLineItem.tsx exact input 1`] = `
>
<div>
<div
class="c20 c27"
class="c19 c26"
>
<div
class="css-mbnpt3"
>
<div
class="c28"
class="c27"
>
<div
class="c29"
class="c28"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="DEF logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
/>
</div>
</div>
</div>
<div
class="c30"
class="c29"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="ABC logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
......@@ -2393,7 +2379,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
</div>
</div>
<div
class="c9 c23 css-1m65e73"
class="c9 c22 css-1m65e73"
>
1%
</div>
......@@ -2405,36 +2391,33 @@ exports[`SwapLineItem.tsx exact input 1`] = `
style="position: fixed; left: 0px; top: 0px;"
>
<div
class="c31"
class="c30"
>
ABC/DEF 1% pool
</div>
<div
class="c32 arrow-"
class="c31 arrow-"
style="position: absolute;"
/>
</div>
</div>
</div>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="DEF logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
/>
</div>
</div>
</div>
</div>
<div
class="c11"
/>
<div
class="c9 css-obwv3p"
>
......@@ -2444,7 +2427,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
</div>
</div>
<div
class="c32 arrow-"
class="c31 arrow-"
style="position: absolute;"
/>
</div>
......@@ -3331,7 +3314,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
min-width: 0;
}
.c24 {
.c23 {
box-sizing: border-box;
margin: 0;
min-width: 0;
......@@ -3355,7 +3338,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
justify-content: flex-start;
}
.c25 {
.c24 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -3380,14 +3363,14 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
justify-content: space-between;
}
.c26 {
.c25 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -1px;
}
.c26 > * {
.c25 > * {
margin: 1px !important;
}
......@@ -3399,12 +3382,6 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
color: #7D7D7D;
}
.c11 {
width: 100%;
height: 1px;
background-color: #22222212;
}
.c7 {
z-index: 1070;
pointer-events: none;
......@@ -3420,13 +3397,13 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
height: inherit;
}
.c32 {
.c31 {
width: 8px;
height: 8px;
z-index: 9998;
}
.c32::before {
.c31::before {
position: absolute;
width: 8px;
height: 8px;
......@@ -3440,47 +3417,47 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
background: #FFFFFF;
}
.c32.arrow-top {
.c31.arrow-top {
bottom: -4px;
}
.c32.arrow-top::before {
.c31.arrow-top::before {
border-top: none;
border-left: none;
}
.c32.arrow-bottom {
.c31.arrow-bottom {
top: -4px;
}
.c32.arrow-bottom::before {
.c31.arrow-bottom::before {
border-bottom: none;
border-right: none;
}
.c32.arrow-left {
.c31.arrow-left {
right: -4px;
}
.c32.arrow-left::before {
.c31.arrow-left::before {
border-bottom: none;
border-left: none;
}
.c32.arrow-right {
.c31.arrow-right {
left: -4px;
}
.c32.arrow-right::before {
.c31.arrow-right::before {
border-right: none;
border-top: none;
}
.c31 {
max-width: 256px;
.c8 {
max-width: 400px;
width: calc(100vw - 16px);
cursor: default;
padding: 12px;
padding: 16px 20px;
pointer-events: auto;
color: #222222;
font-weight: 485;
......@@ -3493,11 +3470,11 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}
.c8 {
max-width: 400px;
.c30 {
max-width: 200px;
width: calc(100vw - 16px);
cursor: default;
padding: 16px 20px;
padding: 8px;
pointer-events: auto;
color: #222222;
font-weight: 485;
......@@ -3525,7 +3502,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
gap: 12px;
}
.c20 {
.c19 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -3546,7 +3523,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
font-weight: 535;
}
.c16 {
.c15 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
......@@ -3555,7 +3532,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
border-radius: 50%;
}
.c15 {
.c14 {
width: 20px;
height: 20px;
background: #22222212;
......@@ -3565,7 +3542,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
border-radius: 50%;
}
.c14 {
.c13 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
......@@ -3573,7 +3550,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
display: flex;
}
.c28 {
.c27 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
......@@ -3584,16 +3561,16 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
flex-direction: row;
}
.c29 {
.c28 {
z-index: 1;
}
.c30 {
.c29 {
position: absolute;
left: -10px !important;
}
.c12 {
.c11 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -3601,12 +3578,12 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
width: 100%;
}
.c13 {
.c12 {
display: grid;
grid-template-columns: 24px 1fr 24px;
}
.c17 {
.c16 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -3623,7 +3600,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
position: relative;
}
.c27 {
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -3631,7 +3608,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
padding: 4px 4px;
}
.c18 {
.c17 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -3646,11 +3623,11 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
opacity: 0.5;
}
.c19 path {
.c18 path {
stroke: #22222212;
}
.c21 {
.c20 {
background-color: #F9F9F9;
border-radius: 8px;
display: grid;
......@@ -3664,7 +3641,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
z-index: 1020;
}
.c22 {
.c21 {
background-color: #F9F9F9;
border-radius: 4px;
color: #7D7D7D;
......@@ -3673,7 +3650,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
z-index: 1021;
}
.c23 {
.c22 {
word-break: normal;
}
......@@ -3725,66 +3702,58 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
class="c10"
>
<div
class="c9 css-142zc9n"
>
Uniswap API
</div>
<div
class="c11"
/>
<div
class="c12 css-vurnku"
class="c11 css-vurnku"
>
<div
class="c0 c1 c13"
class="c0 c1 c12"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="ABC logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
</div>
<div
class="c0 c1 c17"
class="c0 c1 c16"
>
<div
class="c18"
class="c17"
>
<svg
class="c19"
class="c18"
>
dot_line.svg
</svg>
</div>
<div
class="c20 c21"
class="c19 c20"
>
<div
class="c20 c22"
class="c19 c21"
>
<div
class="c3 c23 css-1m65e73"
class="c3 c22 css-1m65e73"
>
V3
</div>
</div>
<div
class="c9 c23 css-1m65e73"
class="c9 c22 css-1m65e73"
style="min-width: auto;"
>
100%
</div>
</div>
<div
class="c24 c25 c26"
class="c23 c24 c25"
style="justify-content: space-evenly; z-index: 2;"
width="100%"
>
......@@ -3793,45 +3762,45 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
>
<div>
<div
class="c20 c27"
class="c19 c26"
>
<div
class="css-mbnpt3"
>
<div
class="c28"
class="c27"
>
<div
class="c29"
class="c28"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="DEF logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
/>
</div>
</div>
</div>
<div
class="c30"
class="c29"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="ABC logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
......@@ -3840,7 +3809,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
</div>
</div>
<div
class="c9 c23 css-1m65e73"
class="c9 c22 css-1m65e73"
>
1%
</div>
......@@ -3852,36 +3821,33 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
style="position: fixed; left: 0px; top: 0px;"
>
<div
class="c31"
class="c30"
>
ABC/DEF 1% pool
</div>
<div
class="c32 arrow-"
class="c31 arrow-"
style="position: absolute;"
/>
</div>
</div>
</div>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="DEF logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
/>
</div>
</div>
</div>
</div>
<div
class="c11"
/>
<div
class="c9 css-obwv3p"
>
......@@ -3891,7 +3857,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
</div>
</div>
<div
class="c32 arrow-"
class="c31 arrow-"
style="position: absolute;"
/>
</div>
......@@ -4778,7 +4744,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
min-width: 0;
}
.c24 {
.c23 {
box-sizing: border-box;
margin: 0;
min-width: 0;
......@@ -4802,7 +4768,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
justify-content: flex-start;
}
.c25 {
.c24 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -4827,14 +4793,14 @@ exports[`SwapLineItem.tsx exact output 1`] = `
justify-content: space-between;
}
.c26 {
.c25 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -1px;
}
.c26 > * {
.c25 > * {
margin: 1px !important;
}
......@@ -4846,12 +4812,6 @@ exports[`SwapLineItem.tsx exact output 1`] = `
color: #7D7D7D;
}
.c11 {
width: 100%;
height: 1px;
background-color: #22222212;
}
.c7 {
z-index: 1070;
pointer-events: none;
......@@ -4867,13 +4827,13 @@ exports[`SwapLineItem.tsx exact output 1`] = `
height: inherit;
}
.c32 {
.c31 {
width: 8px;
height: 8px;
z-index: 9998;
}
.c32::before {
.c31::before {
position: absolute;
width: 8px;
height: 8px;
......@@ -4887,47 +4847,47 @@ exports[`SwapLineItem.tsx exact output 1`] = `
background: #FFFFFF;
}
.c32.arrow-top {
.c31.arrow-top {
bottom: -4px;
}
.c32.arrow-top::before {
.c31.arrow-top::before {
border-top: none;
border-left: none;
}
.c32.arrow-bottom {
.c31.arrow-bottom {
top: -4px;
}
.c32.arrow-bottom::before {
.c31.arrow-bottom::before {
border-bottom: none;
border-right: none;
}
.c32.arrow-left {
.c31.arrow-left {
right: -4px;
}
.c32.arrow-left::before {
.c31.arrow-left::before {
border-bottom: none;
border-left: none;
}
.c32.arrow-right {
.c31.arrow-right {
left: -4px;
}
.c32.arrow-right::before {
.c31.arrow-right::before {
border-right: none;
border-top: none;
}
.c31 {
max-width: 256px;
.c8 {
max-width: 400px;
width: calc(100vw - 16px);
cursor: default;
padding: 12px;
padding: 16px 20px;
pointer-events: auto;
color: #222222;
font-weight: 485;
......@@ -4940,11 +4900,11 @@ exports[`SwapLineItem.tsx exact output 1`] = `
box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}
.c8 {
max-width: 400px;
.c30 {
max-width: 200px;
width: calc(100vw - 16px);
cursor: default;
padding: 16px 20px;
padding: 8px;
pointer-events: auto;
color: #222222;
font-weight: 485;
......@@ -4972,7 +4932,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
gap: 12px;
}
.c20 {
.c19 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -4993,7 +4953,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
font-weight: 535;
}
.c16 {
.c15 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
......@@ -5002,7 +4962,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
border-radius: 50%;
}
.c15 {
.c14 {
width: 20px;
height: 20px;
background: #22222212;
......@@ -5012,7 +4972,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
border-radius: 50%;
}
.c14 {
.c13 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
......@@ -5020,7 +4980,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
display: flex;
}
.c28 {
.c27 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
......@@ -5031,16 +4991,16 @@ exports[`SwapLineItem.tsx exact output 1`] = `
flex-direction: row;
}
.c29 {
.c28 {
z-index: 1;
}
.c30 {
.c29 {
position: absolute;
left: -10px !important;
}
.c12 {
.c11 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -5048,12 +5008,12 @@ exports[`SwapLineItem.tsx exact output 1`] = `
width: 100%;
}
.c13 {
.c12 {
display: grid;
grid-template-columns: 24px 1fr 24px;
}
.c17 {
.c16 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -5070,7 +5030,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
position: relative;
}
.c27 {
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -5078,7 +5038,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
padding: 4px 4px;
}
.c18 {
.c17 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -5093,11 +5053,11 @@ exports[`SwapLineItem.tsx exact output 1`] = `
opacity: 0.5;
}
.c19 path {
.c18 path {
stroke: #22222212;
}
.c21 {
.c20 {
background-color: #F9F9F9;
border-radius: 8px;
display: grid;
......@@ -5111,7 +5071,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
z-index: 1020;
}
.c22 {
.c21 {
background-color: #F9F9F9;
border-radius: 4px;
color: #7D7D7D;
......@@ -5120,7 +5080,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
z-index: 1021;
}
.c23 {
.c22 {
word-break: normal;
}
......@@ -5172,66 +5132,58 @@ exports[`SwapLineItem.tsx exact output 1`] = `
class="c10"
>
<div
class="c9 css-142zc9n"
>
Uniswap Client
</div>
<div
class="c11"
/>
<div
class="c12 css-vurnku"
class="c11 css-vurnku"
>
<div
class="c0 c1 c13"
class="c0 c1 c12"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="ABC logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
</div>
<div
class="c0 c1 c17"
class="c0 c1 c16"
>
<div
class="c18"
class="c17"
>
<svg
class="c19"
class="c18"
>
dot_line.svg
</svg>
</div>
<div
class="c20 c21"
class="c19 c20"
>
<div
class="c20 c22"
class="c19 c21"
>
<div
class="c3 c23 css-1m65e73"
class="c3 c22 css-1m65e73"
>
V3
</div>
</div>
<div
class="c9 c23 css-1m65e73"
class="c9 c22 css-1m65e73"
style="min-width: auto;"
>
100%
</div>
</div>
<div
class="c24 c25 c26"
class="c23 c24 c25"
style="justify-content: space-evenly; z-index: 2;"
width="100%"
>
......@@ -5240,45 +5192,45 @@ exports[`SwapLineItem.tsx exact output 1`] = `
>
<div>
<div
class="c20 c27"
class="c19 c26"
>
<div
class="css-mbnpt3"
>
<div
class="c28"
class="c27"
>
<div
class="c29"
class="c28"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="GHI logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
/>
</div>
</div>
</div>
<div
class="c30"
class="c29"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="ABC logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
......@@ -5287,7 +5239,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
</div>
</div>
<div
class="c9 c23 css-1m65e73"
class="c9 c22 css-1m65e73"
>
0.3%
</div>
......@@ -5299,36 +5251,33 @@ exports[`SwapLineItem.tsx exact output 1`] = `
style="position: fixed; left: 0px; top: 0px;"
>
<div
class="c31"
class="c30"
>
ABC/GHI 0.3% pool
</div>
<div
class="c32 arrow-"
class="c31 arrow-"
style="position: absolute;"
/>
</div>
</div>
</div>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="GHI logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
/>
</div>
</div>
</div>
</div>
<div
class="c11"
/>
<div
class="c9 css-obwv3p"
>
......@@ -5338,7 +5287,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
</div>
</div>
<div
class="c32 arrow-"
class="c31 arrow-"
style="position: absolute;"
/>
</div>
......@@ -6431,7 +6380,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
min-width: 0;
}
.c24 {
.c23 {
box-sizing: border-box;
margin: 0;
min-width: 0;
......@@ -6455,7 +6404,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
justify-content: flex-start;
}
.c25 {
.c24 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -6480,14 +6429,14 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
justify-content: space-between;
}
.c26 {
.c25 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -1px;
}
.c26 > * {
.c25 > * {
margin: 1px !important;
}
......@@ -6499,12 +6448,6 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
color: #7D7D7D;
}
.c11 {
width: 100%;
height: 1px;
background-color: #22222212;
}
.c7 {
z-index: 1070;
pointer-events: none;
......@@ -6520,13 +6463,13 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
height: inherit;
}
.c32 {
.c31 {
width: 8px;
height: 8px;
z-index: 9998;
}
.c32::before {
.c31::before {
position: absolute;
width: 8px;
height: 8px;
......@@ -6540,47 +6483,47 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
background: #FFFFFF;
}
.c32.arrow-top {
.c31.arrow-top {
bottom: -4px;
}
.c32.arrow-top::before {
.c31.arrow-top::before {
border-top: none;
border-left: none;
}
.c32.arrow-bottom {
.c31.arrow-bottom {
top: -4px;
}
.c32.arrow-bottom::before {
.c31.arrow-bottom::before {
border-bottom: none;
border-right: none;
}
.c32.arrow-left {
.c31.arrow-left {
right: -4px;
}
.c32.arrow-left::before {
.c31.arrow-left::before {
border-bottom: none;
border-left: none;
}
.c32.arrow-right {
.c31.arrow-right {
left: -4px;
}
.c32.arrow-right::before {
.c31.arrow-right::before {
border-right: none;
border-top: none;
}
.c31 {
max-width: 256px;
.c8 {
max-width: 400px;
width: calc(100vw - 16px);
cursor: default;
padding: 12px;
padding: 16px 20px;
pointer-events: auto;
color: #222222;
font-weight: 485;
......@@ -6593,11 +6536,11 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}
.c8 {
max-width: 400px;
.c30 {
max-width: 200px;
width: calc(100vw - 16px);
cursor: default;
padding: 16px 20px;
padding: 8px;
pointer-events: auto;
color: #222222;
font-weight: 485;
......@@ -6625,7 +6568,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
gap: 12px;
}
.c20 {
.c19 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -6646,7 +6589,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
font-weight: 535;
}
.c16 {
.c15 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
......@@ -6655,7 +6598,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
border-radius: 50%;
}
.c15 {
.c14 {
width: 20px;
height: 20px;
background: #22222212;
......@@ -6665,7 +6608,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
border-radius: 50%;
}
.c14 {
.c13 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
......@@ -6673,7 +6616,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
display: flex;
}
.c28 {
.c27 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
......@@ -6684,16 +6627,16 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
flex-direction: row;
}
.c29 {
.c28 {
z-index: 1;
}
.c30 {
.c29 {
position: absolute;
left: -10px !important;
}
.c12 {
.c11 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -6701,12 +6644,12 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
width: 100%;
}
.c13 {
.c12 {
display: grid;
grid-template-columns: 24px 1fr 24px;
}
.c17 {
.c16 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -6723,7 +6666,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
position: relative;
}
.c27 {
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -6731,7 +6674,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
padding: 4px 4px;
}
.c18 {
.c17 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -6746,11 +6689,11 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
opacity: 0.5;
}
.c19 path {
.c18 path {
stroke: #22222212;
}
.c21 {
.c20 {
background-color: #F9F9F9;
border-radius: 8px;
display: grid;
......@@ -6764,7 +6707,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
z-index: 1020;
}
.c22 {
.c21 {
background-color: #F9F9F9;
border-radius: 4px;
color: #7D7D7D;
......@@ -6773,7 +6716,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
z-index: 1021;
}
.c23 {
.c22 {
word-break: normal;
}
......@@ -6825,66 +6768,58 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
class="c10"
>
<div
class="c9 css-142zc9n"
>
Uniswap API
</div>
<div
class="c11"
/>
<div
class="c12 css-vurnku"
class="c11 css-vurnku"
>
<div
class="c0 c1 c13"
class="c0 c1 c12"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="ABC logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
</div>
<div
class="c0 c1 c17"
class="c0 c1 c16"
>
<div
class="c18"
class="c17"
>
<svg
class="c19"
class="c18"
>
dot_line.svg
</svg>
</div>
<div
class="c20 c21"
class="c19 c20"
>
<div
class="c20 c22"
class="c19 c21"
>
<div
class="c3 c23 css-1m65e73"
class="c3 c22 css-1m65e73"
>
V3
</div>
</div>
<div
class="c9 c23 css-1m65e73"
class="c9 c22 css-1m65e73"
style="min-width: auto;"
>
100%
</div>
</div>
<div
class="c24 c25 c26"
class="c23 c24 c25"
style="justify-content: space-evenly; z-index: 2;"
width="100%"
>
......@@ -6893,45 +6828,45 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
>
<div>
<div
class="c20 c27"
class="c19 c26"
>
<div
class="css-mbnpt3"
>
<div
class="c28"
class="c27"
>
<div
class="c29"
class="c28"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="DEF logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
/>
</div>
</div>
</div>
<div
class="c30"
class="c29"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="ABC logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
......@@ -6940,7 +6875,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
</div>
</div>
<div
class="c9 c23 css-1m65e73"
class="c9 c22 css-1m65e73"
>
1%
</div>
......@@ -6952,36 +6887,33 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
style="position: fixed; left: 0px; top: 0px;"
>
<div
class="c31"
class="c30"
>
ABC/DEF 1% pool
</div>
<div
class="c32 arrow-"
class="c31 arrow-"
style="position: absolute;"
/>
</div>
</div>
</div>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="DEF logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
/>
</div>
</div>
</div>
</div>
<div
class="c11"
/>
<div
class="c9 css-obwv3p"
>
......@@ -6991,7 +6923,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
</div>
</div>
<div
class="c32 arrow-"
class="c31 arrow-"
style="position: absolute;"
/>
</div>
......@@ -8084,7 +8016,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
min-width: 0;
}
.c24 {
.c23 {
box-sizing: border-box;
margin: 0;
min-width: 0;
......@@ -8108,7 +8040,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
justify-content: flex-start;
}
.c25 {
.c24 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -8133,14 +8065,14 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
justify-content: space-between;
}
.c26 {
.c25 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -1px;
}
.c26 > * {
.c25 > * {
margin: 1px !important;
}
......@@ -8152,12 +8084,6 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
color: #7D7D7D;
}
.c11 {
width: 100%;
height: 1px;
background-color: #22222212;
}
.c7 {
z-index: 1070;
pointer-events: none;
......@@ -8173,13 +8099,13 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
height: inherit;
}
.c32 {
.c31 {
width: 8px;
height: 8px;
z-index: 9998;
}
.c32::before {
.c31::before {
position: absolute;
width: 8px;
height: 8px;
......@@ -8193,47 +8119,47 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
background: #FFFFFF;
}
.c32.arrow-top {
.c31.arrow-top {
bottom: -4px;
}
.c32.arrow-top::before {
.c31.arrow-top::before {
border-top: none;
border-left: none;
}
.c32.arrow-bottom {
.c31.arrow-bottom {
top: -4px;
}
.c32.arrow-bottom::before {
.c31.arrow-bottom::before {
border-bottom: none;
border-right: none;
}
.c32.arrow-left {
.c31.arrow-left {
right: -4px;
}
.c32.arrow-left::before {
.c31.arrow-left::before {
border-bottom: none;
border-left: none;
}
.c32.arrow-right {
.c31.arrow-right {
left: -4px;
}
.c32.arrow-right::before {
.c31.arrow-right::before {
border-right: none;
border-top: none;
}
.c31 {
max-width: 256px;
.c8 {
max-width: 400px;
width: calc(100vw - 16px);
cursor: default;
padding: 12px;
padding: 16px 20px;
pointer-events: auto;
color: #222222;
font-weight: 485;
......@@ -8246,11 +8172,11 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}
.c8 {
max-width: 400px;
.c30 {
max-width: 200px;
width: calc(100vw - 16px);
cursor: default;
padding: 16px 20px;
padding: 8px;
pointer-events: auto;
color: #222222;
font-weight: 485;
......@@ -8278,7 +8204,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
gap: 12px;
}
.c20 {
.c19 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -8299,7 +8225,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
font-weight: 535;
}
.c16 {
.c15 {
opacity: 0;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
......@@ -8308,7 +8234,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
border-radius: 50%;
}
.c15 {
.c14 {
width: 20px;
height: 20px;
background: #22222212;
......@@ -8318,7 +8244,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
border-radius: 50%;
}
.c14 {
.c13 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
......@@ -8326,7 +8252,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
display: flex;
}
.c28 {
.c27 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
......@@ -8337,16 +8263,16 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
flex-direction: row;
}
.c29 {
.c28 {
z-index: 1;
}
.c30 {
.c29 {
position: absolute;
left: -10px !important;
}
.c12 {
.c11 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -8354,12 +8280,12 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
width: 100%;
}
.c13 {
.c12 {
display: grid;
grid-template-columns: 24px 1fr 24px;
}
.c17 {
.c16 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -8376,7 +8302,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
position: relative;
}
.c27 {
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -8384,7 +8310,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
padding: 4px 4px;
}
.c18 {
.c17 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -8399,11 +8325,11 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
opacity: 0.5;
}
.c19 path {
.c18 path {
stroke: #22222212;
}
.c21 {
.c20 {
background-color: #F9F9F9;
border-radius: 8px;
display: grid;
......@@ -8417,7 +8343,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
z-index: 1020;
}
.c22 {
.c21 {
background-color: #F9F9F9;
border-radius: 4px;
color: #7D7D7D;
......@@ -8426,7 +8352,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
z-index: 1021;
}
.c23 {
.c22 {
word-break: normal;
}
......@@ -8478,66 +8404,58 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
class="c10"
>
<div
class="c9 css-142zc9n"
>
Uniswap API
</div>
<div
class="c11"
/>
<div
class="c12 css-vurnku"
class="c11 css-vurnku"
>
<div
class="c0 c1 c13"
class="c0 c1 c12"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="ABC logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
</div>
<div
class="c0 c1 c17"
class="c0 c1 c16"
>
<div
class="c18"
class="c17"
>
<svg
class="c19"
class="c18"
>
dot_line.svg
</svg>
</div>
<div
class="c20 c21"
class="c19 c20"
>
<div
class="c20 c22"
class="c19 c21"
>
<div
class="c3 c23 css-1m65e73"
class="c3 c22 css-1m65e73"
>
V3
</div>
</div>
<div
class="c9 c23 css-1m65e73"
class="c9 c22 css-1m65e73"
style="min-width: auto;"
>
100%
</div>
</div>
<div
class="c24 c25 c26"
class="c23 c24 c25"
style="justify-content: space-evenly; z-index: 2;"
width="100%"
>
......@@ -8546,45 +8464,45 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
>
<div>
<div
class="c20 c27"
class="c19 c26"
>
<div
class="css-mbnpt3"
>
<div
class="c28"
class="c27"
>
<div
class="c29"
class="c28"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="DEF logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
/>
</div>
</div>
</div>
<div
class="c30"
class="c29"
>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="ABC logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
/>
</div>
......@@ -8593,7 +8511,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
</div>
</div>
<div
class="c9 c23 css-1m65e73"
class="c9 c22 css-1m65e73"
>
1%
</div>
......@@ -8605,36 +8523,33 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
style="position: fixed; left: 0px; top: 0px;"
>
<div
class="c31"
class="c30"
>
ABC/DEF 1% pool
</div>
<div
class="c32 arrow-"
class="c31 arrow-"
style="position: absolute;"
/>
</div>
</div>
</div>
<div
class="c14"
class="c13"
style="height: 20px; width: 20px;"
>
<div
class="c15"
class="c14"
>
<img
alt="DEF logo"
class="c16"
class="c15"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
/>
</div>
</div>
</div>
</div>
<div
class="c11"
/>
<div
class="c9 css-obwv3p"
>
......@@ -8644,7 +8559,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
</div>
</div>
<div
class="c32 arrow-"
class="c31 arrow-"
style="position: absolute;"
/>
</div>
......@@ -9931,7 +9846,7 @@ exports[`SwapLineItem.tsx syncing 1`] = `
}
.c4 {
cursor: help;
cursor: auto;
color: #7D7D7D;
}
......
src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap
View file @ 932c4482
......@@ -91,22 +91,49 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
gap: 12px;
}
.c9 {
.c7 {
display: inline-block;
height: inherit;
}
.c7 {
.c9 {
background-color: transparent;
border: none;
cursor: pointer;
-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;
padding: 0;
grid-template-columns: 1fr auto;
grid-gap: 0.25rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
text-align: left;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.c8 {
text-align: right;
overflow-wrap: break-word;
}
.c6 {
cursor: auto;
color: #7D7D7D;
}
.c8 {
cursor: help;
color: #7D7D7D;
}
......@@ -137,29 +164,45 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
class="c5 c6 css-142zc9n"
data-testid="swap-li-label"
>
Exchange rate
Rate
</div>
<div
class="c5 c7 css-142zc9n"
class="c7"
>
<div>
<div
class="c5 c8 css-142zc9n"
>
<button
class="c9"
title="1 DEF = 1.00 ABC "
>
<div
class="c5 css-142zc9n"
>
1 DEF = 1.00 ABC
</div>
</button>
</div>
</div>
</div>
</div>
<div
class="c2 c3 c4"
>
<div
class="c5 c8 css-142zc9n"
class="c5 c6 css-142zc9n"
data-testid="swap-li-label"
>
Price impact
</div>
<div
class="c9"
class="c7"
>
<div>
<div
class="c5 c7 css-142zc9n"
class="c5 c8 css-142zc9n"
>
<span
class=""
......@@ -174,17 +217,17 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
class="c2 c3 c4"
>
<div
class="c5 c8 css-142zc9n"
class="c5 c6 css-142zc9n"
data-testid="swap-li-label"
>
Max. slippage
</div>
<div
class="c9"
class="c7"
>
<div>
<div
class="c5 c7 css-142zc9n"
class="c5 c8 css-142zc9n"
>
<div
class="c2 c10"
......@@ -202,17 +245,17 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
class="c2 c3 c4"
>
<div
class="c5 c8 css-142zc9n"
class="c5 c6 css-142zc9n"
data-testid="swap-li-label"
>
Receive at least
</div>
<div
class="c9"
class="c7"
>
<div>
<div
class="c5 c7 css-142zc9n"
class="c5 c8 css-142zc9n"
>
0.00000000000000098 DEF
</div>
......@@ -223,17 +266,17 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
class="c2 c3 c4"
>
<div
class="c5 c8 css-142zc9n"
class="c5 c6 css-142zc9n"
data-testid="swap-li-label"
>
Network cost
</div>
<div
class="c9"
class="c7"
>
<div>
<div
class="c5 c7 css-142zc9n"
class="c5 c8 css-142zc9n"
>
<div
class="c2 c13"
......@@ -447,7 +490,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
justify-content: flex-start;
}
.c11 {
.c12 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -476,7 +519,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
color: #222222;
}
.c12 {
.c13 {
color: #7D7D7D;
}
......@@ -495,7 +538,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
gap: 12px;
}
.c10 {
.c11 {
-webkit-animation: fAQEyV 1.5s infinite;
animation: fAQEyV 1.5s infinite;
-webkit-animation-fill-mode: both;
......@@ -508,11 +551,43 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
width: 50px;
}
.c9 {
.c10 {
display: inline-block;
height: inherit;
}
.c8 {
background-color: transparent;
border: none;
cursor: pointer;
-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;
padding: 0;
grid-template-columns: 1fr auto;
grid-gap: 0.25rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
text-align: left;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.c7 {
text-align: right;
overflow-wrap: break-word;
......@@ -523,12 +598,12 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
color: #7D7D7D;
}
.c8 {
.c9 {
cursor: help;
color: #7D7D7D;
}
.c13 {
.c14 {
background: #22222212;
border-radius: 8px;
color: #7D7D7D;
......@@ -536,7 +611,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
padding: 0 6px;
}
.c13::after {
.c14::after {
content: 'Auto';
}
......@@ -558,32 +633,42 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
class="c5 c6 css-142zc9n"
data-testid="swap-li-label"
>
Exchange rate
Rate
</div>
<div
class="c5 c7 css-142zc9n"
>
<button
class="c8"
title="1 DEF = 1.00 ABC "
>
<div
class="c5 css-142zc9n"
>
1 DEF = 1.00 ABC
</div>
</button>
</div>
</div>
<div
class="c2 c3 c4"
>
<div
class="c5 c8 css-142zc9n"
class="c5 c9 css-142zc9n"
data-testid="swap-li-label"
>
Price impact
</div>
<div
class="c9"
class="c10"
>
<div>
<div
class="c5 c7 css-142zc9n"
>
<div
class="c10"
class="c11"
data-testid="loading-row"
height="15"
width="50"
......@@ -596,23 +681,23 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
class="c2 c3 c4"
>
<div
class="c5 c8 css-142zc9n"
class="c5 c9 css-142zc9n"
data-testid="swap-li-label"
>
Max. slippage
</div>
<div
class="c9"
class="c10"
>
<div>
<div
class="c5 c7 css-142zc9n"
>
<div
class="c2 c11"
class="c2 c12"
>
<div
class="c12 c13 css-1lgneq0"
class="c13 c14 css-1lgneq0"
/>
2%
</div>
......@@ -624,13 +709,13 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
class="c2 c3 c4"
>
<div
class="c5 c8 css-142zc9n"
class="c5 c9 css-142zc9n"
data-testid="swap-li-label"
>
Receive at least
</div>
<div
class="c9"
class="c10"
>
<div>
<div
......@@ -645,20 +730,20 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
class="c2 c3 c4"
>
<div
class="c5 c8 css-142zc9n"
class="c5 c9 css-142zc9n"
data-testid="swap-li-label"
>
Network cost
</div>
<div
class="c9"
class="c10"
>
<div>
<div
class="c5 c7 css-142zc9n"
>
<div
class="c10"
class="c11"
data-testid="loading-row"
height="15"
width="50"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment