fix: Changing some language around fees (#7492)

* fix: Changing some language around fees

* adding chain name to toolti

* lowercase network

* fixing tests

src/components/swap/GasBreakdownTooltip.tsx

@@ -4,6 +4,7 @@ import { AutoColumn } from 'components/Column'
 import UniswapXRouterLabel, { UniswapXGradient } from 'components/RouterLabel/UniswapXRouterLabel'
 import Row from 'components/Row'
 import { nativeOnChain } from 'constants/tokens'
+import { chainIdToBackendName } from 'graphql/data/util'
 import { ReactNode } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 import { isPreviewTrade, isUniswapXTrade } from 'state/routing/utils'
@@ -43,7 +44,7 @@ export function GasBreakdownTooltip({ trade, hideUniswapXDescription }: GasBreak
   const inputCurrency = trade.inputAmount.currency
   const native = nativeOnChain(inputCurrency.chainId)
 
-  if (isPreviewTrade(trade)) return <NetworkFeesDescription native={native} />
+  if (isPreviewTrade(trade)) return <NetworkCostDescription native={native} />
 
   const swapEstimate = !isUniswapX ? trade.gasUseEstimateUSD : undefined
   const approvalEstimate = trade.approveInfo.needsApprove ? trade.approveInfo.approveGasEstimateUSD : undefined
@@ -51,7 +52,7 @@ export function GasBreakdownTooltip({ trade, hideUniswapXDescription }: GasBreak
   const showEstimateDetails = Boolean(wrapEstimate || approvalEstimate)
 
   const description =
-    isUniswapX && !hideUniswapXDescription ? <UniswapXDescription /> : <NetworkFeesDescription native={native} />
+    isUniswapX && !hideUniswapXDescription ? <UniswapXDescription /> : <NetworkCostDescription native={native} />
 
   if (!showEstimateDetails) return description
 
@@ -69,11 +70,13 @@ export function GasBreakdownTooltip({ trade, hideUniswapXDescription }: GasBreak
   )
 }
 
-function NetworkFeesDescription({ native }: { native: Currency }) {
+function NetworkCostDescription({ native }: { native: Currency }) {
+  const chainName = chainIdToBackendName(native.chainId)
+
   return (
     <ThemedText.LabelMicro>
       <Trans>
-        The fee paid to the Ethereum network to process your transaction. This must be paid in {native.symbol}.
+        Network cost is paid in {native.symbol} on the {chainName} network in order to transact.
       </Trans>{' '}
       <ExternalLink href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-">
         <Trans>Learn more</Trans>

src/components/swap/SwapLineItem.tsx

@@ -80,13 +80,13 @@ function FOTTooltipContent() {
 function SwapFeeTooltipContent({ hasFee }: { hasFee: boolean }) {
   const message = hasFee ? (
     <Trans>
-      Fee is applied on a few token pairs to ensure the best experience with Uniswap. It is paid in the output token and
-      has already been factored into the quote.
+      This fee is applied on select token pairs to ensure the best experience with Uniswap. It is paid in the output
+      token and has already been factored into the quote.
     </Trans>
   ) : (
     <Trans>
-      Fee is applied on a few token pairs to ensure the best experience with Uniswap. There is no fee associated with
-      this swap.
+      This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated
+      with this swap.
     </Trans>
   )
   return (

src/components/swap/SwapModalFooter.test.tsx

@@ -36,7 +36,7 @@ describe('SwapModalFooter.tsx', () => {
       )
     ).toBeInTheDocument()
     expect(
-      screen.getByText('The fee paid to the Ethereum network to process your transaction. This must be paid in ETH.')
+      screen.getByText('Network cost is paid in ETH on the ETHEREUM network in order to transact.')
     ).toBeInTheDocument()
     expect(screen.getByText('The impact your trade has on the market price of this pool.')).toBeInTheDocument()
   })

src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap

@@ -246,7 +246,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
             <div
               class="c10 css-1m65e73"
             >
-              The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. 
+              Network cost is paid in ETH on the ETHEREUM network in order to transact. 
               <a
                 class="c11"
                 href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
@@ -744,7 +744,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
           <div
             class="c9 css-obwv3p"
           >
-            Fee is applied on a few token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
+            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
             <a
               class="c10"
               href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
@@ -1486,7 +1486,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
             <div
               class="c10 css-1m65e73"
             >
-              The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. 
+              Network cost is paid in ETH on the ETHEREUM network in order to transact. 
               <a
                 class="c11"
                 href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
@@ -2157,7 +2157,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
           <div
             class="c9 css-obwv3p"
           >
-            Fee is applied on a few token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
+            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
             <a
               class="c10"
               href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
@@ -3157,7 +3157,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
             <div
               class="c10 css-1m65e73"
             >
-              The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. 
+              Network cost is paid in ETH on the ETHEREUM network in order to transact. 
               <a
                 class="c11"
                 href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
@@ -3828,7 +3828,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
           <div
             class="c9 css-obwv3p"
           >
-            Fee is applied on a few token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
+            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
             <a
               class="c10"
               href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
@@ -4828,7 +4828,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
             <div
               class="c10 css-1m65e73"
             >
-              The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. 
+              Network cost is paid in ETH on the ETHEREUM network in order to transact. 
               <a
                 class="c11"
                 href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
@@ -5499,7 +5499,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
           <div
             class="c9 css-obwv3p"
           >
-            Fee is applied on a few token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
+            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
             <a
               class="c10"
               href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
@@ -6499,7 +6499,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
             <div
               class="c10 css-1m65e73"
             >
-              The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. 
+              Network cost is paid in ETH on the ETHEREUM network in order to transact. 
               <a
                 class="c11"
                 href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
@@ -7378,7 +7378,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
           <div
             class="c9 css-obwv3p"
           >
-            Fee is applied on a few token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
+            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
             <a
               class="c10"
               href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
@@ -8378,7 +8378,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
             <div
               class="c10 css-1m65e73"
             >
-              The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. 
+              Network cost is paid in ETH on the ETHEREUM network in order to transact. 
               <a
                 class="c11"
                 href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
@@ -9257,7 +9257,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
           <div
             class="c9 css-obwv3p"
           >
-            Fee is applied on a few token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
+            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
             <a
               class="c10"
               href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
@@ -10224,7 +10224,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
             <div
               class="c10 css-1m65e73"
             >
-              The fee paid to the Ethereum network to process your transaction. This must be paid in ETH. 
+              Network cost is paid in ETH on the ETHEREUM network in order to transact. 
               <a
                 class="c11"
                 href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"