From b9db195017046975745ce92d96acd7c6448473fd Mon Sep 17 00:00:00 2001 From: cartcrom <39385577+cartcrom@users.noreply.github.com> Date: Wed, 4 Oct 2023 16:08:00 -0400 Subject: [PATCH] feat: gas costs ui updates (#7405) * feat: gas costs ui updates * lint * test: update snapshots * test: update other snapshots --- src/components/swap/SwapDetailsDropdown.tsx | 2 +- src/components/swap/SwapLineItem.tsx | 20 +- src/components/swap/SwapModalFooter.tsx | 2 +- .../SwapDetailsDropdown.test.tsx.snap | 52 +- .../__snapshots__/SwapLineItem.test.tsx.snap | 460 ++++++++++++------ .../SwapModalFooter.test.tsx.snap | 122 +++-- src/state/routing/utils.ts | 17 - 7 files changed, 435 insertions(+), 240 deletions(-) diff --git a/src/components/swap/SwapDetailsDropdown.tsx b/src/components/swap/SwapDetailsDropdown.tsx index f247181afc..6c6ca849f6 100644 --- a/src/components/swap/SwapDetailsDropdown.tsx +++ b/src/components/swap/SwapDetailsDropdown.tsx @@ -107,13 +107,13 @@ function AdvancedSwapDetails(props: SwapDetailsProps & { open: boolean }) { - + diff --git a/src/components/swap/SwapLineItem.tsx b/src/components/swap/SwapLineItem.tsx index b373ff20da..da5f619ad1 100644 --- a/src/components/swap/SwapLineItem.tsx +++ b/src/components/swap/SwapLineItem.tsx @@ -1,15 +1,16 @@ -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: () => Exchange rate, Value: () => , } - case SwapLineItemType.NETWORK_FEE: + case SwapLineItemType.NETWORK_COST: if (!SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId)) return return { - Label: () => , + Label: () => Network cost, TooltipBody: () => , Value: () => { if (isPreview) return - return <>{formatNumber({ input: trade.totalGasUseEstimateUSD, type: NumberType.FiatGasPrice })} + return ( + + gas cost icon + {formatNumber({ input: trade.totalGasUseEstimateUSD, type: NumberType.FiatGasPrice })} + + ) }, } case SwapLineItemType.PRICE_IMPACT: diff --git a/src/components/swap/SwapModalFooter.tsx b/src/components/swap/SwapModalFooter.tsx index db10cddf56..76e4e69183 100644 --- a/src/components/swap/SwapModalFooter.tsx +++ b/src/components/swap/SwapModalFooter.tsx @@ -73,12 +73,12 @@ export default function SwapModalFooter({ <> - + {showAcceptChanges ? ( diff --git a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap index ac4dc2fc9a..0ff9d83c87 100644 --- a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap +++ b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap @@ -297,27 +297,6 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
-
-
- Network fee -
-
-
-
- $1.00 -
-
-
-
@@ -385,6 +364,37 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
+
+
+ Network cost +
+
+
+
+
+ gas cost icon + $1.00 +
+
+
+
+
diff --git a/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap b/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap index 7db3e07f30..1ae30f78f9 100644 --- a/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap +++ b/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap @@ -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
- $0.00 +
+ gas cost icon + $0.00 +
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
@@ -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
- $1.00 +
+ gas cost icon + $1.00 +
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
@@ -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
- $1.00 +
+ gas cost icon + $1.00 +
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
@@ -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
- - +
+ gas cost icon + - +
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
@@ -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
- $1.00 +
+ gas cost icon + $1.00 +
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
@@ -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
- $1.00 +
+ gas cost icon + $1.00 +
The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.
@@ -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
- Network fee + Network cost
-
-
- Network fee -
-
-
-
- $1.00 -
-
-
-
@@ -160,6 +157,37 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
+
+
+ Network cost +
+
+
+
+
+ gas cost icon + $1.00 +
+
+
+
+
.c0 { box-sizing: border-box; @@ -442,32 +470,6 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission 1 DEF = 1.00 ABC -
-
- Network fee -
-
-
-
-
-
-
-
-
@@ -515,6 +517,32 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
+
+
+ Network cost +
+
+
+
+
+
+
+
+
.c0 { box-sizing: border-box; diff --git a/src/state/routing/utils.ts b/src/state/routing/utils.ts index d2d0ec026c..5c0a14b55e 100644 --- a/src/state/routing/utils.ts +++ b/src/state/routing/utils.ts @@ -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 -}