feat: update tooltip for swap flow

MetaMask · Sep 18, 2024 · 3aec3be · 3aec3be
1 parent 1a6f212
commit 3aec3be
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 115 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/helpers/constants/zendesk-url.js b/ui/helpers/constants/zendesk-url.js
@@ -7,6 +7,7 @@ const ZENDESK_URLS = {
     'https://support.metamask.io/privacy-and-security/basic-safety-and-security-tips-for-metamask/',
   CUSTOMIZE_NONCE:
     'https://support.metamask.io/transactions-and-gas/transactions/how-to-customize-a-transaction-nonce/',
+  GAS_FEES: 'https://support.metamask.io/transactions-and-gas/gas-fees/',
   HARDWARE_CONNECTION:
     'https://support.metamask.io/privacy-and-security/hardware-wallet-hub/',
   IMPORT_ACCOUNTS:

diff --git a/ui/pages/swaps/fee-card/fee-card.js b/ui/pages/swaps/fee-card/fee-card.js
@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 import { I18nContext } from '../../../contexts/i18n';
 import InfoTooltip from '../../../components/ui/info-tooltip';
-import { CHAIN_IDS } from '../../../../shared/constants/network';
 import TransactionDetail from '../../confirmations/components/transaction-detail/transaction-detail.component';
 import TransactionDetailItem from '../../confirmations/components/transaction-detail-item/transaction-detail-item.component';
 import {
@@ -13,9 +13,12 @@ import {
 } from '../../../helpers/constants/design-system';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
-import { GAS_FEES_LEARN_MORE_URL } from '../../../../shared/lib/ui-utils';
 import { getUseCurrencyRateCheck } from '../../../selectors';
-import { Text } from '../../../components/component-library';
+import {
+  Text,
+  ButtonLink,
+  ButtonLinkSize,
+} from '../../../components/component-library';
 
 export default function FeeCard({
   primaryFee,
@@ -26,40 +29,10 @@ export default function FeeCard({
   metaMaskFee,
   numberOfQuotes,
   onQuotesClick,
-  chainId,
 }) {
   const t = useContext(I18nContext);
   const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
 
-  /* istanbul ignore next */
-  const getTranslatedNetworkName = () => {
-    switch (chainId) {
-      case CHAIN_IDS.MAINNET:
-        return t('networkNameEthereum');
-      case CHAIN_IDS.BSC:
-        return t('networkNameBSC');
-      case CHAIN_IDS.POLYGON:
-        return t('networkNamePolygon');
-      case CHAIN_IDS.LOCALHOST:
-        return t('networkNameTestnet');
-      case CHAIN_IDS.GOERLI:
-        return t('networkNameGoerli');
-      case CHAIN_IDS.AVALANCHE:
-        return t('networkNameAvalanche');
-      case CHAIN_IDS.OPTIMISM:
-        return t('networkNameOpMainnet');
-      case CHAIN_IDS.ARBITRUM:
-        return t('networkNameArbitrum');
-      case CHAIN_IDS.ZKSYNC_ERA:
-        return t('networkNameZkSyncEra');
-      case CHAIN_IDS.LINEA_MAINNET:
-        return t('networkNameLinea');
-      case CHAIN_IDS.BASE:
-        return t('networkNameBase');
-      default:
-        throw new Error('This network is not supported for token swaps');
-    }
-  };
   const trackEvent = useContext(MetaMetricsContext);
 
   const tokenApprovalTextComponent = (
@@ -82,35 +55,26 @@ export default function FeeCard({
                   <InfoTooltip
                     position="top"
                     contentText={
-                      <>
-                        <p className="fee-card__info-tooltip-paragraph">
-                          {t('swapGasFeesSummary', [
-                            getTranslatedNetworkName(),
-                          ])}
-                        </p>
-                        <p className="fee-card__info-tooltip-paragraph">
-                          {t('swapGasFeesDetails')}
-                        </p>
-                        <p className="fee-card__info-tooltip-paragraph">
-                          <a
-                            className="fee-card__link"
+                      <p className="fee-card__info-tooltip-paragraph">
+                        {t('swapGasFeesExplanation', [
+                          <ButtonLink
+                            size={ButtonLinkSize.Inherit}
+                            href={ZENDESK_URLS.GAS_FEES}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            externalLink
+                            key="gas-fees-learn-more"
                             onClick={() => {
-                              /* istanbul ignore next */
                               trackEvent({
                                 event: 'Clicked "Gas Fees: Learn More" Link',
                                 category: MetaMetricsEventCategory.Swaps,
                               });
-                              global.platform.openTab({
-                                url: GAS_FEES_LEARN_MORE_URL,
-                              });
                             }}
-                            target="_blank"
-                            rel="noopener noreferrer"
                           >
-                            {t('swapGasFeesLearnMore')}
-                          </a>
-                        </p>
-                      </>
+                            {t('swapGasFeesExplanationLinkText')}
+                          </ButtonLink>,
+                        ])}
+                      </p>
                     }
                     containerClassName="fee-card__info-tooltip-content-container"
                     wrapperClassName="fee-card__row-label fee-card__info-tooltip-container"
@@ -202,5 +166,4 @@ FeeCard.propTypes = {
   metaMaskFee: PropTypes.string.isRequired,
   onQuotesClick: PropTypes.func.isRequired,
   numberOfQuotes: PropTypes.number.isRequired,
-  chainId: PropTypes.string.isRequired,
 };
diff --git a/ui/pages/swaps/fee-card/fee-card.stories.js b/ui/pages/swaps/fee-card/fee-card.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { CHAIN_IDS } from '../../../../shared/constants/network';
 import FeeCard from './fee-card';
 
 const containerStyle = {
@@ -90,7 +89,6 @@ export default {
     tokenApprovalSourceTokenSymbol: 'ABC',
     metaMaskFee: '0.875',
     numberOfQuotes: 6,
-    chainId: CHAIN_IDS.MAINNET,
   },
 };
 

diff --git a/ui/pages/swaps/fee-card/fee-card.test.js b/ui/pages/swaps/fee-card/fee-card.test.js
@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
 
 import { setBackgroundConnection } from '../../../store/background-connection';
 import { renderWithProvider, MOCKS, fireEvent } from '../../../../test/jest';
-import { CHAIN_IDS } from '../../../../shared/constants/network';
 
 import {
   checkNetworkAndAccountSupports1559,
@@ -79,7 +78,6 @@ const createProps = (customProps = {}) => {
     numberOfQuotes: 6,
     onQuotesClick: jest.fn(),
     tokenConversionRate: 0.015,
-    chainId: CHAIN_IDS.MAINNET,
     networkAndAccountSupports1559: false,
     ...customProps,
   };

diff --git a/ui/pages/swaps/prepare-swap-page/review-quote.js b/ui/pages/swaps/prepare-swap-page/review-quote.js
@@ -13,7 +13,7 @@ import { isEqual } from 'lodash';
 import classnames from 'classnames';
 import { captureException } from '@sentry/browser';
 import PropTypes from 'prop-types';
-
+import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 import { I18nContext } from '../../../contexts/i18n';
 import SelectQuotePopover from '../select-quote-popover';
 import { useEthFiatAmount } from '../../../hooks/useEthFiatAmount';
@@ -78,7 +78,6 @@ import {
   AWAITING_SWAP_ROUTE,
   PREPARE_SWAP_ROUTE,
 } from '../../../helpers/constants/routes';
-import { CHAIN_IDS } from '../../../../shared/constants/network';
 import {
   addHexes,
   decGWEIToHexWEI,
@@ -118,6 +117,7 @@ import {
 import {
   BannerAlert,
   ButtonLink,
+  ButtonLinkSize,
   Text,
 } from '../../../components/component-library';
 import {
@@ -138,7 +138,6 @@ import {
   calcTokenValue,
   calculateMaxGasLimit,
 } from '../../../../shared/lib/swaps-utils';
-import { GAS_FEES_LEARN_MORE_URL } from '../../../../shared/lib/ui-utils';
 import ExchangeRateDisplay from '../exchange-rate-display';
 import InfoTooltip from '../../../components/ui/info-tooltip';
 import useRamps from '../../../hooks/ramps/useRamps/useRamps';
@@ -241,36 +240,6 @@ export default function ReviewQuote({ setReceiveToAmount }) {
     return '';
   });
 
-  /* istanbul ignore next */
-  const getTranslatedNetworkName = () => {
-    switch (chainId) {
-      case CHAIN_IDS.MAINNET:
-        return t('networkNameEthereum');
-      case CHAIN_IDS.BSC:
-        return t('networkNameBSC');
-      case CHAIN_IDS.POLYGON:
-        return t('networkNamePolygon');
-      case CHAIN_IDS.LOCALHOST:
-        return t('networkNameTestnet');
-      case CHAIN_IDS.GOERLI:
-        return t('networkNameGoerli');
-      case CHAIN_IDS.AVALANCHE:
-        return t('networkNameAvalanche');
-      case CHAIN_IDS.OPTIMISM:
-        return t('networkNameOpMainnet');
-      case CHAIN_IDS.ARBITRUM:
-        return t('networkNameArbitrum');
-      case CHAIN_IDS.ZKSYNC_ERA:
-        return t('networkNameZkSyncEra');
-      case CHAIN_IDS.LINEA_MAINNET:
-        return t('networkNameLinea');
-      case CHAIN_IDS.BASE:
-        return t('networkNameBase');
-      default:
-        throw new Error('This network is not supported for token swaps');
-    }
-  };
-
   let gasFeeInputs;
   if (networkAndAccountSupports1559) {
     // For Swaps we want to get 'high' estimations by default.
@@ -1191,33 +1160,26 @@ export default function ReviewQuote({ setReceiveToAmount }) {
               <InfoTooltip
                 position="left"
                 contentText={
-                  <>
-                    <p className="fee-card__info-tooltip-paragraph">
-                      {t('swapGasFeesSummary', [getTranslatedNetworkName()])}
-                    </p>
-                    <p className="fee-card__info-tooltip-paragraph">
-                      {t('swapGasFeesDetails')}
-                    </p>
-                    <p className="fee-card__info-tooltip-paragraph">
-                      <a
-                        className="fee-card__link"
+                  <p className="fee-card__info-tooltip-paragraph">
+                    {t('swapGasFeesExplanation', [
+                      <ButtonLink
+                        key="learn-more-gas-link"
+                        size={ButtonLinkSize.Inherit}
+                        href={ZENDESK_URLS.GAS_FEES}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        externalLink
                         onClick={() => {
-                          /* istanbul ignore next */
                           trackEvent({
                             event: 'Clicked "Gas Fees: Learn More" Link',
                             category: MetaMetricsEventCategory.Swaps,
                           });
-                          global.platform.openTab({
-                            url: GAS_FEES_LEARN_MORE_URL,
-                          });
                         }}
-                        target="_blank"
-                        rel="noopener noreferrer"
                       >
-                        {t('swapGasFeesLearnMore')}
-                      </a>
-                    </p>
-                  </>
+                        {t('swapGasFeesExplanationLinkText')}
+                      </ButtonLink>,
+                    ])}
+                  </p>
                 }
               />
             </Box>

diff --git a/ui/pages/swaps/view-quote/view-quote.js b/ui/pages/swaps/view-quote/view-quote.js
@@ -248,8 +248,9 @@ export default function ViewQuote() {
     const {
       maxFeePerGas: suggestedMaxFeePerGas,
       maxPriorityFeePerGas: suggestedMaxPriorityFeePerGas,
-      gasFeeEstimates: { estimatedBaseFee = '0' },
+      gasFeeEstimates,
     } = gasFeeInputs;
+    const estimatedBaseFee = gasFeeEstimates?.estimatedBaseFee ?? '0';
     maxFeePerGas = customMaxFeePerGas || decGWEIToHexWEI(suggestedMaxFeePerGas);
     maxPriorityFeePerGas =
       customMaxPriorityFeePerGas ||
@@ -1028,7 +1029,6 @@ export default function ViewQuote() {
                   setSelectQuotePopoverShown(true);
                 }
               }
-              chainId={chainId}
               maxPriorityFeePerGasDecGWEI={hexWEIToDecGWEI(
                 maxPriorityFeePerGas,
               )}