feat: gas costs ui updates (#7405)

* feat: gas costs ui updates

* lint

* test: update snapshots

* test: update other snapshots

src/components/swap/SwapDetailsDropdown.tsx

@@ -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

-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

@@ -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

@@ -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__/SwapModalFooter.test.tsx.snap

@@ -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

@@ -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
-}