Skip to content

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

feat: gas costs ui updates (#7405) 

* feat: gas costs ui updates

* lint

* test: update snapshots

* test: update other snapshots
parent b6bdbcf5
Hide whitespace changes
Inline Side-by-side
Showing with 399 additions and 204 deletions
src/components/swap/SwapDetailsDropdown.tsx
View file @ b9db1950
...@@ -107,13 +107,13 @@ function AdvancedSwapDetails(props: SwapDetailsProps & { open: boolean }) { ...@@ -107,13 +107,13 @@ function AdvancedSwapDetails(props: SwapDetailsProps & { open: boolean }) {
<AnimatedDropdown open={open}> <AnimatedDropdown open={open}>
<SwapDetailsWrapper gap="md" data-testid="advanced-swap-details"> <SwapDetailsWrapper gap="md" data-testid="advanced-swap-details">
<Separator /> <Separator />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.NETWORK_FEE} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.INPUT_TOKEN_FEE_ON_TRANSFER} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.INPUT_TOKEN_FEE_ON_TRANSFER} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.OUTPUT_TOKEN_FEE_ON_TRANSFER} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.OUTPUT_TOKEN_FEE_ON_TRANSFER} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.MAXIMUM_INPUT} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.MAXIMUM_INPUT} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.MINIMUM_OUTPUT} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.MINIMUM_OUTPUT} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.EXPECTED_OUTPUT} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.EXPECTED_OUTPUT} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.NETWORK_COST} />
<Separator /> <Separator />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.ROUTING_INFO} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.ROUTING_INFO} />
</SwapDetailsWrapper> </SwapDetailsWrapper>
......
src/components/swap/SwapLineItem.tsx
View file @ b9db1950
import { Plural, t, Trans } from '@lingui/macro' import { t, Trans } from '@lingui/macro'
import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core' import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
import { LoadingRow } from 'components/Loader/styled' import { LoadingRow } from 'components/Loader/styled'
import RouterLabel from 'components/RouterLabel' import RouterLabel from 'components/RouterLabel'
import { RowBetween } from 'components/Row' import Row, { RowBetween } from 'components/Row'
import { MouseoverTooltip, TooltipSize } from 'components/Tooltip' import { MouseoverTooltip, TooltipSize } from 'components/Tooltip'
import { getChainInfo } from 'constants/chainInfo'
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains' import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
import useHoverProps from 'hooks/useHoverProps' import useHoverProps from 'hooks/useHoverProps'
import { useIsMobile } from 'nft/hooks' import { useIsMobile } from 'nft/hooks'
import React, { PropsWithChildren, useEffect, useState } from 'react' import React, { PropsWithChildren, useEffect, useState } from 'react'
import { InterfaceTrade, TradeFillType } from 'state/routing/types' import { InterfaceTrade, TradeFillType } from 'state/routing/types'
import { getTransactionCount, isPreviewTrade, isUniswapXTrade } from 'state/routing/utils' import { isPreviewTrade, isUniswapXTrade } from 'state/routing/utils'
import styled, { DefaultTheme } from 'styled-components' import styled, { DefaultTheme } from 'styled-components'
import { ExternalLink, ThemedText } from 'theme/components' import { ExternalLink, ThemedText } from 'theme/components'
import { NumberType, useFormatter } from 'utils/formatNumbers' import { NumberType, useFormatter } from 'utils/formatNumbers'
...@@ -20,7 +21,7 @@ import SwapRoute from './SwapRoute' ...@@ -20,7 +21,7 @@ import SwapRoute from './SwapRoute'
export enum SwapLineItemType { export enum SwapLineItemType {
EXCHANGE_RATE, EXCHANGE_RATE,
NETWORK_FEE, NETWORK_COST,
INPUT_TOKEN_FEE_ON_TRANSFER, INPUT_TOKEN_FEE_ON_TRANSFER,
OUTPUT_TOKEN_FEE_ON_TRANSFER, OUTPUT_TOKEN_FEE_ON_TRANSFER,
PRICE_IMPACT, PRICE_IMPACT,
...@@ -108,14 +109,19 @@ function useLineItem(props: SwapLineItemProps): LineItemData | undefined { ...@@ -108,14 +109,19 @@ function useLineItem(props: SwapLineItemProps): LineItemData | undefined {
Label: () => <Trans>Exchange rate</Trans>, Label: () => <Trans>Exchange rate</Trans>,
Value: () => <ExchangeRateRow trade={trade} />, Value: () => <ExchangeRateRow trade={trade} />,
} }
case SwapLineItemType.NETWORK_FEE: case SwapLineItemType.NETWORK_COST:
if (!SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId)) return if (!SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId)) return
return { return {
Label: () => <Plural value={getTransactionCount(trade) || 1} one="Network fee" other="Network fees" />, Label: () => <Trans>Network cost</Trans>,
TooltipBody: () => <GasBreakdownTooltip trade={trade} hideUniswapXDescription />, TooltipBody: () => <GasBreakdownTooltip trade={trade} hideUniswapXDescription />,
Value: () => { Value: () => {
if (isPreview) return <Loading /> if (isPreview) return <Loading />
return <>{formatNumber({ input: trade.totalGasUseEstimateUSD, type: NumberType.FiatGasPrice })}</> return (
<Row gap="4px">
<img src={getChainInfo(chainId)?.logoUrl} alt="gas cost icon" width={16} height={16} />
{formatNumber({ input: trade.totalGasUseEstimateUSD, type: NumberType.FiatGasPrice })}
</Row>
)
}, },
} }
case SwapLineItemType.PRICE_IMPACT: case SwapLineItemType.PRICE_IMPACT:
......
src/components/swap/SwapModalFooter.tsx
View file @ b9db1950
...@@ -73,12 +73,12 @@ export default function SwapModalFooter({ ...@@ -73,12 +73,12 @@ export default function SwapModalFooter({
<> <>
<DetailsContainer gap="md"> <DetailsContainer gap="md">
<SwapLineItem {...lineItemProps} type={SwapLineItemType.EXCHANGE_RATE} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.EXCHANGE_RATE} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.NETWORK_FEE} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.INPUT_TOKEN_FEE_ON_TRANSFER} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.INPUT_TOKEN_FEE_ON_TRANSFER} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.OUTPUT_TOKEN_FEE_ON_TRANSFER} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.OUTPUT_TOKEN_FEE_ON_TRANSFER} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.MAXIMUM_INPUT} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.MAXIMUM_INPUT} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.MINIMUM_OUTPUT} /> <SwapLineItem {...lineItemProps} type={SwapLineItemType.MINIMUM_OUTPUT} />
<SwapLineItem {...lineItemProps} type={SwapLineItemType.NETWORK_COST} />
</DetailsContainer> </DetailsContainer>
{showAcceptChanges ? ( {showAcceptChanges ? (
<SwapShowAcceptChanges data-testid="show-accept-changes"> <SwapShowAcceptChanges data-testid="show-accept-changes">
......
src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap
View file @ b9db1950
...@@ -304,7 +304,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` ...@@ -304,7 +304,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
class="c9 c19 css-142zc9n" class="c9 c19 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network fee Price impact
</div> </div>
<div <div
class="c12" class="c12"
...@@ -313,7 +313,11 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` ...@@ -313,7 +313,11 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
<div <div
class="c9 c20 css-142zc9n" class="c9 c20 css-142zc9n"
> >
$1.00 <span
class=""
>
105566.373%
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -325,7 +329,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` ...@@ -325,7 +329,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
class="c9 c19 css-142zc9n" class="c9 c19 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Price impact Minimum output
</div> </div>
<div <div
class="c12" class="c12"
...@@ -334,11 +338,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` ...@@ -334,11 +338,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
<div <div
class="c9 c20 css-142zc9n" class="c9 c20 css-142zc9n"
> >
<span 0.00000000000000098 DEF
class=""
>
105566.373%
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -350,7 +350,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` ...@@ -350,7 +350,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
class="c9 c19 css-142zc9n" class="c9 c19 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Minimum output Expected output
</div> </div>
<div <div
class="c12" class="c12"
...@@ -359,7 +359,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` ...@@ -359,7 +359,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
<div <div
class="c9 c20 css-142zc9n" class="c9 c20 css-142zc9n"
> >
0.00000000000000098 DEF 0.000000000000001 DEF
</div> </div>
</div> </div>
</div> </div>
...@@ -371,7 +371,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` ...@@ -371,7 +371,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
class="c9 c19 css-142zc9n" class="c9 c19 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Expected output Network cost
</div> </div>
<div <div
class="c12" class="c12"
...@@ -380,7 +380,17 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = ` ...@@ -380,7 +380,17 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
<div <div
class="c9 c20 css-142zc9n" class="c9 c20 css-142zc9n"
> >
0.000000000000001 DEF <div
class="c2 c10"
>
<img
alt="gas cost icon"
height="16"
src="ethereum-logo.png"
width="16"
/>
$1.00
</div>
</div> </div>
</div> </div>
</div> </div>
......
src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
View file @ b9db1950
...@@ -25,6 +25,24 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` ...@@ -25,6 +25,24 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c7 {
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: 4px;
}
.c2 { .c2 {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
...@@ -36,11 +54,11 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` ...@@ -36,11 +54,11 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
color: #222222; color: #222222;
} }
.c9 { .c10 {
color: #7D7D7D; color: #7D7D7D;
} }
.c10 { .c11 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -51,15 +69,15 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` ...@@ -51,15 +69,15 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
font-weight: 500; font-weight: 500;
} }
.c10:hover { .c11:hover {
opacity: 0.6; opacity: 0.6;
} }
.c10:active { .c11:active {
opacity: 0.4; opacity: 0.4;
} }
.c7 { .c8 {
z-index: 1070; z-index: 1070;
pointer-events: none; pointer-events: none;
visibility: hidden; visibility: hidden;
...@@ -74,13 +92,13 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` ...@@ -74,13 +92,13 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
height: inherit; height: inherit;
} }
.c11 { .c12 {
width: 8px; width: 8px;
height: 8px; height: 8px;
z-index: 9998; z-index: 9998;
} }
.c11::before { .c12::before {
position: absolute; position: absolute;
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -94,43 +112,43 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` ...@@ -94,43 +112,43 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
background: #FFFFFF; background: #FFFFFF;
} }
.c11.arrow-top { .c12.arrow-top {
bottom: -4px; bottom: -4px;
} }
.c11.arrow-top::before { .c12.arrow-top::before {
border-top: none; border-top: none;
border-left: none; border-left: none;
} }
.c11.arrow-bottom { .c12.arrow-bottom {
top: -4px; top: -4px;
} }
.c11.arrow-bottom::before { .c12.arrow-bottom::before {
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
} }
.c11.arrow-left { .c12.arrow-left {
right: -4px; right: -4px;
} }
.c11.arrow-left::before { .c12.arrow-left::before {
border-bottom: none; border-bottom: none;
border-left: none; border-left: none;
} }
.c11.arrow-right { .c12.arrow-right {
left: -4px; left: -4px;
} }
.c11.arrow-right::before { .c12.arrow-right::before {
border-right: none; border-right: none;
border-top: none; border-top: none;
} }
.c8 { .c9 {
max-width: 256px; max-width: 256px;
width: calc(100vw - 16px); width: calc(100vw - 16px);
cursor: default; cursor: default;
...@@ -168,7 +186,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` ...@@ -168,7 +186,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
class="c3 c4 css-142zc9n" class="c3 c4 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network fee Network cost
</div> </div>
<div <div
class="c5" class="c5"
...@@ -177,26 +195,36 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` ...@@ -177,26 +195,36 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
<div <div
class="c3 c6 css-142zc9n" class="c3 c6 css-142zc9n"
> >
$0.00 <div
class="c0 c7"
>
<img
alt="gas cost icon"
height="16"
src="ethereum-logo.png"
width="16"
/>
$0.00
</div>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="c7" class="c8"
style="position: fixed; left: 0px; top: 0px;" style="position: fixed; left: 0px; top: 0px;"
> >
<div <div
class="c8" class="c9"
> >
<div <div
class="c9 css-obwv3p" class="c10 css-obwv3p"
> >
<div <div
class="c9 css-1m65e73" class="c10 css-1m65e73"
> >
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
<a <a
class="c10" class="c11"
href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-" href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -207,7 +235,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = ` ...@@ -207,7 +235,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
</div> </div>
</div> </div>
<div <div
class="c11 arrow-" class="c12 arrow-"
style="position: absolute;" style="position: absolute;"
/> />
</div> </div>
...@@ -894,6 +922,24 @@ exports[`SwapLineItem.tsx exact input 1`] = ` ...@@ -894,6 +922,24 @@ exports[`SwapLineItem.tsx exact input 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c7 {
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: 4px;
}
.c2 { .c2 {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
...@@ -905,11 +951,11 @@ exports[`SwapLineItem.tsx exact input 1`] = ` ...@@ -905,11 +951,11 @@ exports[`SwapLineItem.tsx exact input 1`] = `
color: #222222; color: #222222;
} }
.c9 { .c10 {
color: #7D7D7D; color: #7D7D7D;
} }
.c10 { .c11 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -920,15 +966,15 @@ exports[`SwapLineItem.tsx exact input 1`] = ` ...@@ -920,15 +966,15 @@ exports[`SwapLineItem.tsx exact input 1`] = `
font-weight: 500; font-weight: 500;
} }
.c10:hover { .c11:hover {
opacity: 0.6; opacity: 0.6;
} }
.c10:active { .c11:active {
opacity: 0.4; opacity: 0.4;
} }
.c7 { .c8 {
z-index: 1070; z-index: 1070;
pointer-events: none; pointer-events: none;
visibility: hidden; visibility: hidden;
...@@ -943,13 +989,13 @@ exports[`SwapLineItem.tsx exact input 1`] = ` ...@@ -943,13 +989,13 @@ exports[`SwapLineItem.tsx exact input 1`] = `
height: inherit; height: inherit;
} }
.c11 { .c12 {
width: 8px; width: 8px;
height: 8px; height: 8px;
z-index: 9998; z-index: 9998;
} }
.c11::before { .c12::before {
position: absolute; position: absolute;
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -963,43 +1009,43 @@ exports[`SwapLineItem.tsx exact input 1`] = ` ...@@ -963,43 +1009,43 @@ exports[`SwapLineItem.tsx exact input 1`] = `
background: #FFFFFF; background: #FFFFFF;
} }
.c11.arrow-top { .c12.arrow-top {
bottom: -4px; bottom: -4px;
} }
.c11.arrow-top::before { .c12.arrow-top::before {
border-top: none; border-top: none;
border-left: none; border-left: none;
} }
.c11.arrow-bottom { .c12.arrow-bottom {
top: -4px; top: -4px;
} }
.c11.arrow-bottom::before { .c12.arrow-bottom::before {
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
} }
.c11.arrow-left { .c12.arrow-left {
right: -4px; right: -4px;
} }
.c11.arrow-left::before { .c12.arrow-left::before {
border-bottom: none; border-bottom: none;
border-left: none; border-left: none;
} }
.c11.arrow-right { .c12.arrow-right {
left: -4px; left: -4px;
} }
.c11.arrow-right::before { .c12.arrow-right::before {
border-right: none; border-right: none;
border-top: none; border-top: none;
} }
.c8 { .c9 {
max-width: 256px; max-width: 256px;
width: calc(100vw - 16px); width: calc(100vw - 16px);
cursor: default; cursor: default;
...@@ -1033,7 +1079,7 @@ exports[`SwapLineItem.tsx exact input 1`] = ` ...@@ -1033,7 +1079,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
class="c3 c4 css-142zc9n" class="c3 c4 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network fee Network cost
</div> </div>
<div <div
class="c5" class="c5"
...@@ -1042,26 +1088,36 @@ exports[`SwapLineItem.tsx exact input 1`] = ` ...@@ -1042,26 +1088,36 @@ exports[`SwapLineItem.tsx exact input 1`] = `
<div <div
class="c3 c6 css-142zc9n" class="c3 c6 css-142zc9n"
> >
$1.00 <div
class="c0 c7"
>
<img
alt="gas cost icon"
height="16"
src="ethereum-logo.png"
width="16"
/>
$1.00
</div>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="c7" class="c8"
style="position: fixed; left: 0px; top: 0px;" style="position: fixed; left: 0px; top: 0px;"
> >
<div <div
class="c8" class="c9"
> >
<div <div
class="c9 css-obwv3p" class="c10 css-obwv3p"
> >
<div <div
class="c9 css-1m65e73" class="c10 css-1m65e73"
> >
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
<a <a
class="c10" class="c11"
href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-" href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -1072,7 +1128,7 @@ exports[`SwapLineItem.tsx exact input 1`] = ` ...@@ -1072,7 +1128,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
</div> </div>
</div> </div>
<div <div
class="c11 arrow-" class="c12 arrow-"
style="position: absolute;" style="position: absolute;"
/> />
</div> </div>
...@@ -2205,6 +2261,24 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` ...@@ -2205,6 +2261,24 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c7 {
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: 4px;
}
.c2 { .c2 {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
...@@ -2216,11 +2290,11 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` ...@@ -2216,11 +2290,11 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
color: #222222; color: #222222;
} }
.c9 { .c10 {
color: #7D7D7D; color: #7D7D7D;
} }
.c10 { .c11 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -2231,15 +2305,15 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` ...@@ -2231,15 +2305,15 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
font-weight: 500; font-weight: 500;
} }
.c10:hover { .c11:hover {
opacity: 0.6; opacity: 0.6;
} }
.c10:active { .c11:active {
opacity: 0.4; opacity: 0.4;
} }
.c7 { .c8 {
z-index: 1070; z-index: 1070;
pointer-events: none; pointer-events: none;
visibility: hidden; visibility: hidden;
...@@ -2254,13 +2328,13 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` ...@@ -2254,13 +2328,13 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
height: inherit; height: inherit;
} }
.c11 { .c12 {
width: 8px; width: 8px;
height: 8px; height: 8px;
z-index: 9998; z-index: 9998;
} }
.c11::before { .c12::before {
position: absolute; position: absolute;
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -2274,43 +2348,43 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` ...@@ -2274,43 +2348,43 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
background: #FFFFFF; background: #FFFFFF;
} }
.c11.arrow-top { .c12.arrow-top {
bottom: -4px; bottom: -4px;
} }
.c11.arrow-top::before { .c12.arrow-top::before {
border-top: none; border-top: none;
border-left: none; border-left: none;
} }
.c11.arrow-bottom { .c12.arrow-bottom {
top: -4px; top: -4px;
} }
.c11.arrow-bottom::before { .c12.arrow-bottom::before {
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
} }
.c11.arrow-left { .c12.arrow-left {
right: -4px; right: -4px;
} }
.c11.arrow-left::before { .c12.arrow-left::before {
border-bottom: none; border-bottom: none;
border-left: none; border-left: none;
} }
.c11.arrow-right { .c12.arrow-right {
left: -4px; left: -4px;
} }
.c11.arrow-right::before { .c12.arrow-right::before {
border-right: none; border-right: none;
border-top: none; border-top: none;
} }
.c8 { .c9 {
max-width: 256px; max-width: 256px;
width: calc(100vw - 16px); width: calc(100vw - 16px);
cursor: default; cursor: default;
...@@ -2344,7 +2418,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` ...@@ -2344,7 +2418,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
class="c3 c4 css-142zc9n" class="c3 c4 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network fee Network cost
</div> </div>
<div <div
class="c5" class="c5"
...@@ -2353,26 +2427,36 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` ...@@ -2353,26 +2427,36 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
<div <div
class="c3 c6 css-142zc9n" class="c3 c6 css-142zc9n"
> >
$1.00 <div
class="c0 c7"
>
<img
alt="gas cost icon"
height="16"
src="ethereum-logo.png"
width="16"
/>
$1.00
</div>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="c7" class="c8"
style="position: fixed; left: 0px; top: 0px;" style="position: fixed; left: 0px; top: 0px;"
> >
<div <div
class="c8" class="c9"
> >
<div <div
class="c9 css-obwv3p" class="c10 css-obwv3p"
> >
<div <div
class="c9 css-1m65e73" class="c10 css-1m65e73"
> >
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
<a <a
class="c10" class="c11"
href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-" href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2383,7 +2467,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = ` ...@@ -2383,7 +2467,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
</div> </div>
</div> </div>
<div <div
class="c11 arrow-" class="c12 arrow-"
style="position: absolute;" style="position: absolute;"
/> />
</div> </div>
...@@ -3516,6 +3600,24 @@ exports[`SwapLineItem.tsx exact output 1`] = ` ...@@ -3516,6 +3600,24 @@ exports[`SwapLineItem.tsx exact output 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c7 {
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: 4px;
}
.c2 { .c2 {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
...@@ -3527,11 +3629,11 @@ exports[`SwapLineItem.tsx exact output 1`] = ` ...@@ -3527,11 +3629,11 @@ exports[`SwapLineItem.tsx exact output 1`] = `
color: #222222; color: #222222;
} }
.c9 { .c10 {
color: #7D7D7D; color: #7D7D7D;
} }
.c10 { .c11 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -3542,15 +3644,15 @@ exports[`SwapLineItem.tsx exact output 1`] = ` ...@@ -3542,15 +3644,15 @@ exports[`SwapLineItem.tsx exact output 1`] = `
font-weight: 500; font-weight: 500;
} }
.c10:hover { .c11:hover {
opacity: 0.6; opacity: 0.6;
} }
.c10:active { .c11:active {
opacity: 0.4; opacity: 0.4;
} }
.c7 { .c8 {
z-index: 1070; z-index: 1070;
pointer-events: none; pointer-events: none;
visibility: hidden; visibility: hidden;
...@@ -3565,13 +3667,13 @@ exports[`SwapLineItem.tsx exact output 1`] = ` ...@@ -3565,13 +3667,13 @@ exports[`SwapLineItem.tsx exact output 1`] = `
height: inherit; height: inherit;
} }
.c11 { .c12 {
width: 8px; width: 8px;
height: 8px; height: 8px;
z-index: 9998; z-index: 9998;
} }
.c11::before { .c12::before {
position: absolute; position: absolute;
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -3585,43 +3687,43 @@ exports[`SwapLineItem.tsx exact output 1`] = ` ...@@ -3585,43 +3687,43 @@ exports[`SwapLineItem.tsx exact output 1`] = `
background: #FFFFFF; background: #FFFFFF;
} }
.c11.arrow-top { .c12.arrow-top {
bottom: -4px; bottom: -4px;
} }
.c11.arrow-top::before { .c12.arrow-top::before {
border-top: none; border-top: none;
border-left: none; border-left: none;
} }
.c11.arrow-bottom { .c12.arrow-bottom {
top: -4px; top: -4px;
} }
.c11.arrow-bottom::before { .c12.arrow-bottom::before {
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
} }
.c11.arrow-left { .c12.arrow-left {
right: -4px; right: -4px;
} }
.c11.arrow-left::before { .c12.arrow-left::before {
border-bottom: none; border-bottom: none;
border-left: none; border-left: none;
} }
.c11.arrow-right { .c12.arrow-right {
left: -4px; left: -4px;
} }
.c11.arrow-right::before { .c12.arrow-right::before {
border-right: none; border-right: none;
border-top: none; border-top: none;
} }
.c8 { .c9 {
max-width: 256px; max-width: 256px;
width: calc(100vw - 16px); width: calc(100vw - 16px);
cursor: default; cursor: default;
...@@ -3655,7 +3757,7 @@ exports[`SwapLineItem.tsx exact output 1`] = ` ...@@ -3655,7 +3757,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
class="c3 c4 css-142zc9n" class="c3 c4 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network fee Network cost
</div> </div>
<div <div
class="c5" class="c5"
...@@ -3664,26 +3766,36 @@ exports[`SwapLineItem.tsx exact output 1`] = ` ...@@ -3664,26 +3766,36 @@ exports[`SwapLineItem.tsx exact output 1`] = `
<div <div
class="c3 c6 css-142zc9n" class="c3 c6 css-142zc9n"
> >
- <div
class="c0 c7"
>
<img
alt="gas cost icon"
height="16"
src="ethereum-logo.png"
width="16"
/>
-
</div>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="c7" class="c8"
style="position: fixed; left: 0px; top: 0px;" style="position: fixed; left: 0px; top: 0px;"
> >
<div <div
class="c8" class="c9"
> >
<div <div
class="c9 css-obwv3p" class="c10 css-obwv3p"
> >
<div <div
class="c9 css-1m65e73" class="c10 css-1m65e73"
> >
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
<a <a
class="c10" class="c11"
href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-" href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -3694,7 +3806,7 @@ exports[`SwapLineItem.tsx exact output 1`] = ` ...@@ -3694,7 +3806,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
</div> </div>
</div> </div>
<div <div
class="c11 arrow-" class="c12 arrow-"
style="position: absolute;" style="position: absolute;"
/> />
</div> </div>
...@@ -4827,6 +4939,24 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` ...@@ -4827,6 +4939,24 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c7 {
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: 4px;
}
.c2 { .c2 {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
...@@ -4838,11 +4968,11 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` ...@@ -4838,11 +4968,11 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
color: #222222; color: #222222;
} }
.c9 { .c10 {
color: #7D7D7D; color: #7D7D7D;
} }
.c10 { .c11 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -4853,15 +4983,15 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` ...@@ -4853,15 +4983,15 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
font-weight: 500; font-weight: 500;
} }
.c10:hover { .c11:hover {
opacity: 0.6; opacity: 0.6;
} }
.c10:active { .c11:active {
opacity: 0.4; opacity: 0.4;
} }
.c7 { .c8 {
z-index: 1070; z-index: 1070;
pointer-events: none; pointer-events: none;
visibility: hidden; visibility: hidden;
...@@ -4876,13 +5006,13 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` ...@@ -4876,13 +5006,13 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
height: inherit; height: inherit;
} }
.c11 { .c12 {
width: 8px; width: 8px;
height: 8px; height: 8px;
z-index: 9998; z-index: 9998;
} }
.c11::before { .c12::before {
position: absolute; position: absolute;
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -4896,43 +5026,43 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` ...@@ -4896,43 +5026,43 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
background: #FFFFFF; background: #FFFFFF;
} }
.c11.arrow-top { .c12.arrow-top {
bottom: -4px; bottom: -4px;
} }
.c11.arrow-top::before { .c12.arrow-top::before {
border-top: none; border-top: none;
border-left: none; border-left: none;
} }
.c11.arrow-bottom { .c12.arrow-bottom {
top: -4px; top: -4px;
} }
.c11.arrow-bottom::before { .c12.arrow-bottom::before {
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
} }
.c11.arrow-left { .c12.arrow-left {
right: -4px; right: -4px;
} }
.c11.arrow-left::before { .c12.arrow-left::before {
border-bottom: none; border-bottom: none;
border-left: none; border-left: none;
} }
.c11.arrow-right { .c12.arrow-right {
left: -4px; left: -4px;
} }
.c11.arrow-right::before { .c12.arrow-right::before {
border-right: none; border-right: none;
border-top: none; border-top: none;
} }
.c8 { .c9 {
max-width: 256px; max-width: 256px;
width: calc(100vw - 16px); width: calc(100vw - 16px);
cursor: default; cursor: default;
...@@ -4966,7 +5096,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` ...@@ -4966,7 +5096,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
class="c3 c4 css-142zc9n" class="c3 c4 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network fee Network cost
</div> </div>
<div <div
class="c5" class="c5"
...@@ -4975,26 +5105,36 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` ...@@ -4975,26 +5105,36 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
<div <div
class="c3 c6 css-142zc9n" class="c3 c6 css-142zc9n"
> >
$1.00 <div
class="c0 c7"
>
<img
alt="gas cost icon"
height="16"
src="ethereum-logo.png"
width="16"
/>
$1.00
</div>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="c7" class="c8"
style="position: fixed; left: 0px; top: 0px;" style="position: fixed; left: 0px; top: 0px;"
> >
<div <div
class="c8" class="c9"
> >
<div <div
class="c9 css-obwv3p" class="c10 css-obwv3p"
> >
<div <div
class="c9 css-1m65e73" class="c10 css-1m65e73"
> >
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
<a <a
class="c10" class="c11"
href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-" href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -5005,7 +5145,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = ` ...@@ -5005,7 +5145,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
</div> </div>
</div> </div>
<div <div
class="c11 arrow-" class="c12 arrow-"
style="position: absolute;" style="position: absolute;"
/> />
</div> </div>
...@@ -6344,6 +6484,24 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` ...@@ -6344,6 +6484,24 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c7 {
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: 4px;
}
.c2 { .c2 {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
...@@ -6355,11 +6513,11 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` ...@@ -6355,11 +6513,11 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
color: #222222; color: #222222;
} }
.c9 { .c10 {
color: #7D7D7D; color: #7D7D7D;
} }
.c10 { .c11 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -6370,15 +6528,15 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` ...@@ -6370,15 +6528,15 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
font-weight: 500; font-weight: 500;
} }
.c10:hover { .c11:hover {
opacity: 0.6; opacity: 0.6;
} }
.c10:active { .c11:active {
opacity: 0.4; opacity: 0.4;
} }
.c7 { .c8 {
z-index: 1070; z-index: 1070;
pointer-events: none; pointer-events: none;
visibility: hidden; visibility: hidden;
...@@ -6393,13 +6551,13 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` ...@@ -6393,13 +6551,13 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
height: inherit; height: inherit;
} }
.c11 { .c12 {
width: 8px; width: 8px;
height: 8px; height: 8px;
z-index: 9998; z-index: 9998;
} }
.c11::before { .c12::before {
position: absolute; position: absolute;
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -6413,43 +6571,43 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` ...@@ -6413,43 +6571,43 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
background: #FFFFFF; background: #FFFFFF;
} }
.c11.arrow-top { .c12.arrow-top {
bottom: -4px; bottom: -4px;
} }
.c11.arrow-top::before { .c12.arrow-top::before {
border-top: none; border-top: none;
border-left: none; border-left: none;
} }
.c11.arrow-bottom { .c12.arrow-bottom {
top: -4px; top: -4px;
} }
.c11.arrow-bottom::before { .c12.arrow-bottom::before {
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
} }
.c11.arrow-left { .c12.arrow-left {
right: -4px; right: -4px;
} }
.c11.arrow-left::before { .c12.arrow-left::before {
border-bottom: none; border-bottom: none;
border-left: none; border-left: none;
} }
.c11.arrow-right { .c12.arrow-right {
left: -4px; left: -4px;
} }
.c11.arrow-right::before { .c12.arrow-right::before {
border-right: none; border-right: none;
border-top: none; border-top: none;
} }
.c8 { .c9 {
max-width: 256px; max-width: 256px;
width: calc(100vw - 16px); width: calc(100vw - 16px);
cursor: default; cursor: default;
...@@ -6483,7 +6641,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` ...@@ -6483,7 +6641,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
class="c3 c4 css-142zc9n" class="c3 c4 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network fee Network cost
</div> </div>
<div <div
class="c5" class="c5"
...@@ -6492,26 +6650,36 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` ...@@ -6492,26 +6650,36 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
<div <div
class="c3 c6 css-142zc9n" class="c3 c6 css-142zc9n"
> >
$1.00 <div
class="c0 c7"
>
<img
alt="gas cost icon"
height="16"
src="ethereum-logo.png"
width="16"
/>
$1.00
</div>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="c7" class="c8"
style="position: fixed; left: 0px; top: 0px;" style="position: fixed; left: 0px; top: 0px;"
> >
<div <div
class="c8" class="c9"
> >
<div <div
class="c9 css-obwv3p" class="c10 css-obwv3p"
> >
<div <div
class="c9 css-1m65e73" class="c10 css-1m65e73"
> >
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
<a <a
class="c10" class="c11"
href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-" href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -6522,7 +6690,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = ` ...@@ -6522,7 +6690,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
</div> </div>
</div> </div>
<div <div
class="c11 arrow-" class="c12 arrow-"
style="position: absolute;" style="position: absolute;"
/> />
</div> </div>
...@@ -8013,7 +8181,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = ` ...@@ -8013,7 +8181,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
class="c3 c4 css-142zc9n" class="c3 c4 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network fee Network cost
</div> </div>
<div <div
class="c5" class="c5"
...@@ -8746,7 +8914,7 @@ exports[`SwapLineItem.tsx syncing 1`] = ` ...@@ -8746,7 +8914,7 @@ exports[`SwapLineItem.tsx syncing 1`] = `
class="c3 c4 css-142zc9n" class="c3 c4 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network fee Network cost
</div> </div>
<div <div
class="c5" class="c5"
......
src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap
View file @ b9db1950
...@@ -25,6 +25,24 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = ...@@ -25,6 +25,24 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
justify-content: flex-start; justify-content: flex-start;
} }
.c10 {
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: 4px;
}
.c4 { .c4 {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
...@@ -100,7 +118,7 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = ...@@ -100,7 +118,7 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
class="c5 c8 css-142zc9n" class="c5 c8 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network fee Price impact
</div> </div>
<div <div
class="c9" class="c9"
...@@ -109,7 +127,11 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = ...@@ -109,7 +127,11 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
<div <div
class="c5 c7 css-142zc9n" class="c5 c7 css-142zc9n"
> >
$1.00 <span
class=""
>
105566.373%
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -121,7 +143,7 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = ...@@ -121,7 +143,7 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
class="c5 c8 css-142zc9n" class="c5 c8 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Price impact Minimum output
</div> </div>
<div <div
class="c9" class="c9"
...@@ -130,11 +152,7 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = ...@@ -130,11 +152,7 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
<div <div
class="c5 c7 css-142zc9n" class="c5 c7 css-142zc9n"
> >
<span 0.00000000000000098 DEF
class=""
>
105566.373%
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -146,7 +164,7 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = ...@@ -146,7 +164,7 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
class="c5 c8 css-142zc9n" class="c5 c8 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Minimum output Network cost
</div> </div>
<div <div
class="c9" class="c9"
...@@ -155,7 +173,17 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = ...@@ -155,7 +173,17 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
<div <div
class="c5 c7 css-142zc9n" class="c5 c7 css-142zc9n"
> >
0.00000000000000098 DEF <div
class="c2 c10"
>
<img
alt="gas cost icon"
height="16"
src="ethereum-logo.png"
width="16"
/>
$1.00
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -449,7 +477,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission ...@@ -449,7 +477,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
class="c5 c8 css-142zc9n" class="c5 c8 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network fee Price impact
</div> </div>
<div <div
class="c9" class="c9"
...@@ -475,7 +503,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission ...@@ -475,7 +503,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
class="c5 c8 css-142zc9n" class="c5 c8 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Price impact Minimum output
</div> </div>
<div <div
class="c9" class="c9"
...@@ -484,12 +512,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission ...@@ -484,12 +512,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
<div <div
class="c5 c7 css-142zc9n" class="c5 c7 css-142zc9n"
> >
<div 0.00000000000000098 DEF
class="c10"
data-testid="loading-row"
height="15"
width="50"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -501,7 +524,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission ...@@ -501,7 +524,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
class="c5 c8 css-142zc9n" class="c5 c8 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Minimum output Network cost
</div> </div>
<div <div
class="c9" class="c9"
...@@ -510,7 +533,12 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission ...@@ -510,7 +533,12 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
<div <div
class="c5 c7 css-142zc9n" class="c5 c7 css-142zc9n"
> >
0.00000000000000098 DEF <div
class="c10"
data-testid="loading-row"
height="15"
width="50"
/>
</div> </div>
</div> </div>
</div> </div>
......
src/state/routing/utils.ts
View file @ b9db1950
...@@ -343,20 +343,3 @@ export function isUniswapXTrade(trade?: InterfaceTrade): trade is DutchOrderTrad ...@@ -343,20 +343,3 @@ export function isUniswapXTrade(trade?: InterfaceTrade): trade is DutchOrderTrad
export function shouldUseAPIRouter(args: GetQuoteArgs): boolean { export function shouldUseAPIRouter(args: GetQuoteArgs): boolean {
return args.routerPreference !== RouterPreference.CLIENT return args.routerPreference !== RouterPreference.CLIENT
} }
export function getTransactionCount(trade: InterfaceTrade): number {
if (!isSubmittableTrade(trade)) return 0
let count = 0
if (trade.approveInfo.needsApprove) {
count++ // approval step, which can happen in both classic and uniswapx
}
if (isUniswapXTrade(trade)) {
if (trade.wrapInfo.needsWrap) {
count++ // wrapping step for uniswapx
}
} else {
count++ // classic onchain swap
}
return count
}
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