add space between sentences in insufficient currency warning (#14019)

* add space between sentences in insufficient currency warning and add link to buy modal for all buyable networks

app/_locales/en/messages.json

@@ -405,6 +405,10 @@
   "buy": {
     "message": "Buy"
   },
+  "buyAsset": {
+    "message": "Buy $1",
+    "description": "$1 is the ticker symbol of a an asset the user is being prompted to purchase"
+  },
   "buyCryptoWithMoonPay": {
     "message": "Buy $1 with MoonPay",
     "description": "$1 represents the cypto symbol to be purchased"
@@ -420,13 +424,6 @@
     "message": "Transak supports credit & debit cards, Apple Pay, MobiKwik, and bank transfers (depending on location) in 100+ countries. $1 deposits directly into your MetaMask account.",
     "description": "$1 represents the crypto symbol to be purchased"
   },
-  "buyEth": {
-    "message": "Buy ETH"
-  },
-  "buyOther": {
-    "message": "Buy $1 or deposit from another account.",
-    "description": "$1 is a token symbol"
-  },
   "buyWithWyre": {
     "message": "Buy ETH with Wyre"
   },
@@ -1525,9 +1522,13 @@
   "insufficientBalance": {
     "message": "Insufficient balance."
   },
-  "insufficientCurrency": {
+  "insufficientCurrencyBuyOrDeposit": {
-    "message": "You do not have enough $1 in your account to pay for transaction fees on $2 network.",
+    "message": "You do not have enough $1 in your account to pay for transaction fees on $2 network. $3 or deposit from another account.",
-    "description": "$1 is currency, $2 is network"
+    "description": "$1 is the native currency of the network, $2 is the name of the current network, $3 is the key 'buy' + the ticker symbol of the native currency of the chain wrapped in a button"
+  },
+  "insufficientCurrencyDeposit": {
+    "message": "You do not have enough $1 in your account to pay for transaction fees on $2 network. Deposit $1 from another account.",
+    "description": "$1 is the native currency of the network, $2 is the name of the current network"
   },
   "insufficientFunds": {
     "message": "Insufficient funds."
@@ -2279,9 +2280,6 @@
   "or": {
     "message": "or"
   },
-  "orDeposit": {
-    "message": "or deposit from another account."
-  },
   "origin": {
     "message": "Origin"
   },

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -10,7 +10,6 @@ import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/erro
 import Typography from '../../../ui/typography';
 import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
 import { TRANSACTION_TYPES } from '../../../../../shared/constants/transaction';
-import { MAINNET_CHAIN_ID } from '../../../../../shared/constants/network';
 
 import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.';
 
@@ -57,6 +56,7 @@ export default class ConfirmPageContainerContent extends Component {
     showBuyModal: PropTypes.func,
     toAddress: PropTypes.string,
     transactionType: PropTypes.string,
+    isBuyableChain: PropTypes.bool,
   };
 
   renderContent() {
@@ -132,6 +132,7 @@ export default class ConfirmPageContainerContent extends Component {
       showBuyModal,
       toAddress,
       transactionType,
+      isBuyableChain,
     } = this.props;
 
     const primaryAction = hideUserAcknowledgedGasMissing
@@ -196,42 +197,38 @@ export default class ConfirmPageContainerContent extends Component {
           )}
         {showInsuffienctFundsError && (
           <div className="confirm-page-container-content__error-container">
-            {currentTransaction.chainId === MAINNET_CHAIN_ID ? (
+            <ActionableMessage
-              <ActionableMessage
+              className="actionable-message--warning"
-                className="actionable-message--warning"
+              message={
-                message={
+                isBuyableChain ? (
                   <Typography variant={TYPOGRAPHY.H7} align="left">
-                    {t('insufficientCurrency', [nativeCurrency, networkName])}
+                    {t('insufficientCurrencyBuyOrDeposit', [
-                    <Button
+                      nativeCurrency,
-                      key="link"
+                      networkName,
-                      type="secondary"
-                      className="confirm-page-container-content__link"
-                      onClick={showBuyModal}
-                    >
-                      {t('buyEth')}
-                    </Button>
 
-                    {t('orDeposit')}
+                      <Button
+                        type="inline"
+                        className="confirm-page-container-content__link"
+                        onClick={showBuyModal}
+                        key={`${nativeCurrency}-buy-button`}
+                      >
+                        {t('buyAsset', [nativeCurrency])}
+                      </Button>,
+                    ])}
                   </Typography>
-                }
+                ) : (
-                useIcon
-                iconFillColor="#d73a49"
-                type="danger"
-              />
-            ) : (
-              <ActionableMessage
-                className="actionable-message--warning"
-                message={
                   <Typography variant={TYPOGRAPHY.H7} align="left">
-                    {t('insufficientCurrency', [nativeCurrency, networkName])}
+                    {t('insufficientCurrencyDeposit', [
-                    {t('buyOther', [nativeCurrency])}
+                      nativeCurrency,
+                      networkName,
+                    ])}
                   </Typography>
-                }
+                )
-                useIcon
+              }
-                iconFillColor="#d73a49"
+              useIcon
-                type="danger"
+              iconFillColor="var(--color-error-default)"
-              />
+              type="danger"
-            )}
+            />
           </div>
         )}
 

ui/components/app/confirm-page-container/confirm-page-container-content/index.scss

@@ -100,12 +100,4 @@
   &__total-value {
     position: relative;
   }
-
-  &__link {
-    background: transparent;
-    border: 0 transparent;
-    display: inline;
-    padding: 0;
-    font-size: $font-size-h7;
-  }
 }

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -4,10 +4,7 @@ import PropTypes from 'prop-types';
 import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
 import { GasFeeContextProvider } from '../../../contexts/gasFee';
 import { TRANSACTION_TYPES } from '../../../../shared/constants/transaction';
-import {
+import { NETWORK_TO_NAME_MAP } from '../../../../shared/constants/network';
-  NETWORK_TO_NAME_MAP,
-  MAINNET_CHAIN_ID,
-} from '../../../../shared/constants/network';
 
 import { PageContainerFooter } from '../../ui/page-container';
 import Dialog from '../../ui/dialog';
@@ -98,6 +95,7 @@ export default class ConfirmPageContainer extends Component {
     supportsEIP1559V2: PropTypes.bool,
     nativeCurrency: PropTypes.string,
     showBuyModal: PropTypes.func,
+    isBuyableChain: PropTypes.bool,
   };
 
   render() {
@@ -152,6 +150,7 @@ export default class ConfirmPageContainer extends Component {
       supportsEIP1559V2,
       nativeCurrency,
       showBuyModal,
+      isBuyableChain,
     } = this.props;
 
     const showAddToAddressDialog =
@@ -258,47 +257,41 @@ export default class ConfirmPageContainer extends Component {
               showBuyModal={showBuyModal}
               toAddress={toAddress}
               transactionType={currentTransaction.type}
+              isBuyableChain={isBuyableChain}
             />
           )}
           {shouldDisplayWarning && errorKey === INSUFFICIENT_FUNDS_ERROR_KEY && (
             <div className="confirm-approve-content__warning">
-              {currentTransaction.chainId === MAINNET_CHAIN_ID ? (
+              <ActionableMessage
-                <ActionableMessage
+                message={
-                  message={
+                  isBuyableChain ? (
                     <Typography variant={TYPOGRAPHY.H7} align="left">
-                      {t('insufficientCurrency', [nativeCurrency, networkName])}
+                      {t('insufficientCurrencyBuyOrDeposit', [
-                      <Button
+                        nativeCurrency,
-                        type="link"
+                        networkName,
-                        className="page-container__link"
+                        <Button
-                        onClick={showBuyModal}
+                          type="inline"
-                      >
+                          className="confirm-page-container-content__link"
-                        {t('buyEth')}
+                          onClick={showBuyModal}
-                      </Button>
+                          key={`${nativeCurrency}-buy-button`}
-
+                        >
-                      {t('orDeposit')}
+                          {t('buyAsset', [nativeCurrency])}
+                        </Button>,
+                      ])}
                     </Typography>
-                  }
+                  ) : (
-                  useIcon
+                    <Typography variant={TYPOGRAPHY.H7} align="left">
-                  iconFillColor="#d73a49"
+                      {t('insufficientCurrencyDeposit', [
-                  type="danger"
+                        nativeCurrency,
-                />
+                        networkName,
-              ) : (
+                      ])}
-                <ActionableMessage
-                  message={
-                    <Typography
-                      variant={TYPOGRAPHY.H7}
-                      align="left"
-                      margin={[0, 0]}
-                    >
-                      {t('insufficientCurrency', [nativeCurrency, networkName])}
-                      {t('buyOther', [nativeCurrency])}
                     </Typography>
-                  }
+                  )
-                  useIcon
+                }
-                  iconFillColor="#d73a49"
+                useIcon
-                  type="danger"
+                iconFillColor="var(--color-error-default)"
-                />
+                type="danger"
-              )}
+              />
             </div>
           )}
           {shouldDisplayWarning && errorKey !== INSUFFICIENT_FUNDS_ERROR_KEY && (

ui/components/app/confirm-page-container/confirm-page-container.container.js

@@ -1,13 +1,18 @@
 import { connect } from 'react-redux';
-import { getAccountsWithLabels, getAddressBookEntry } from '../../../selectors';
+import {
+  getAccountsWithLabels,
+  getAddressBookEntry,
+  getIsBuyableChain,
+} from '../../../selectors';
 import { showModal } from '../../../store/actions';
 import ConfirmPageContainer from './confirm-page-container.component';
 
 function mapStateToProps(state, ownProps) {
   const to = ownProps.toAddress;
-
+  const isBuyableChain = getIsBuyableChain(state);
   const contact = getAddressBookEntry(state, to);
   return {
+    isBuyableChain,
     contact,
     toName: contact?.name || ownProps.toName,
     isOwnedAccount: getAccountsWithLabels(state)

ui/components/ui/button/buttons.scss

@@ -302,7 +302,7 @@ input[type="submit"][disabled] {
 
 .btn--inline {
   display: inline;
-  padding: 0 4px;
+  padding: 0;
   font-size: inherit;
   width: auto;
   color: var(--color-primary-default);

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -146,6 +146,7 @@ export default class ConfirmTransactionBase extends Component {
     isMultiLayerFeeNetwork: PropTypes.bool,
     eip1559V2Enabled: PropTypes.bool,
     showBuyModal: PropTypes.func,
+    isBuyableChain: PropTypes.bool,
   };
 
   state = {
@@ -326,6 +327,7 @@ export default class ConfirmTransactionBase extends Component {
       isMultiLayerFeeNetwork,
       nativeCurrency,
       showBuyModal,
+      isBuyableChain,
     } = this.props;
     const { t } = this.context;
     const { userAcknowledgedGasMissing } = this.state;
@@ -585,11 +587,11 @@ export default class ConfirmTransactionBase extends Component {
             this.setUserAcknowledgedGasMissing()
           }
           userAcknowledgedGasMissing={userAcknowledgedGasMissing}
-          chainId={txData.chainId}
           nativeCurrency={nativeCurrency}
           networkName={networkName}
           showBuyModal={showBuyModal}
           type={txData.type}
+          isBuyableChain={isBuyableChain}
         />
         <TransactionDetail
           disabled={isDisabled()}

ui/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -33,6 +33,7 @@ import {
   getTokenList,
   getIsMultiLayerFeeNetwork,
   getEIP1559V2Enabled,
+  getIsBuyableChain,
 } from '../../selectors';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
 import {
@@ -76,7 +77,7 @@ const mapStateToProps = (state, ownProps) => {
 
   const isGasEstimatesLoading = getIsGasEstimatesLoading(state);
   const gasLoadingAnimationIsShowing = getGasLoadingAnimationIsShowing(state);
-
+  const isBuyableChain = getIsBuyableChain(state);
   const { confirmTransaction, metamask } = state;
   const {
     ensResolutionsByAddress,
@@ -253,6 +254,7 @@ const mapStateToProps = (state, ownProps) => {
     isMultiLayerFeeNetwork,
     chainId,
     eip1559V2Enabled,
+    isBuyableChain,
   };
 };
 

ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js

@@ -12,12 +12,11 @@ import Button from '../../../components/ui/button';
 import Typography from '../../../components/ui/typography';
 import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
 import { TRANSACTION_TYPES } from '../../../../shared/constants/transaction';
-import { MAINNET_CHAIN_ID } from '../../../../shared/constants/network';
 
 const TransactionAlerts = ({
   userAcknowledgedGasMissing,
   setUserAcknowledgedGasMissing,
-  chainId,
+  isBuyableChain,
   nativeCurrency,
   networkName,
   showBuyModal,
@@ -96,42 +95,36 @@ const TransactionAlerts = ({
           type="warning"
         />
       )}
-      {balanceError &&
+      {balanceError && type === TRANSACTION_TYPES.DEPLOY_CONTRACT ? (
-      chainId === MAINNET_CHAIN_ID &&
-      type === TRANSACTION_TYPES.DEPLOY_CONTRACT ? (
         <ActionableMessage
           className="actionable-message--warning"
           message={
-            <Typography variant={TYPOGRAPHY.H7} align="left">
+            isBuyableChain ? (
-              {t('insufficientCurrency', [nativeCurrency, networkName])}{' '}
+              <Typography variant={TYPOGRAPHY.H7} align="left">
-              <Button
+                {t('insufficientCurrencyBuyOrDeposit', [
-                type="link"
+                  nativeCurrency,
-                className="transaction-alerts__link"
+                  networkName,
-                onClick={showBuyModal}
+                  <Button
-              >
+                    type="inline"
-                {t('buyEth')}
+                    className="confirm-page-container-content__link"
-              </Button>{' '}
+                    onClick={showBuyModal}
-              {t('orDeposit')}
+                    key={`${nativeCurrency}-buy-button`}
-            </Typography>
+                  >
+                    {t('buyAsset', [nativeCurrency])}
+                  </Button>,
+                ])}
+              </Typography>
+            ) : (
+              <Typography variant={TYPOGRAPHY.H7} align="left">
+                {t('insufficientCurrencyDeposit', [
+                  nativeCurrency,
+                  networkName,
+                ])}
+              </Typography>
+            )
           }
           useIcon
-          iconFillColor="#d73a49"
+          iconFillColor="var(--color-error-default)"
-          type="danger"
-        />
-      ) : null}
-      {balanceError &&
-      chainId !== MAINNET_CHAIN_ID &&
-      type === TRANSACTION_TYPES.DEPLOY_CONTRACT ? (
-        <ActionableMessage
-          className="actionable-message--warning"
-          message={
-            <Typography variant={TYPOGRAPHY.H7} align="left">
-              {t('insufficientCurrency', [nativeCurrency, networkName])}
-              {t('buyOther', [nativeCurrency])}
-            </Typography>
-          }
-          useIcon
-          iconFillColor="#d73a49"
           type="danger"
         />
       ) : null}
@@ -177,11 +170,11 @@ const TransactionAlerts = ({
 TransactionAlerts.propTypes = {
   userAcknowledgedGasMissing: PropTypes.bool,
   setUserAcknowledgedGasMissing: PropTypes.func,
-  chainId: PropTypes.string,
   nativeCurrency: PropTypes.string,
   networkName: PropTypes.string,
   showBuyModal: PropTypes.func,
   type: PropTypes.string,
+  isBuyableChain: PropTypes.bool,
 };
 
 export default TransactionAlerts;