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