From 1099a3763b1e29704ae5dde4940771f687002158 Mon Sep 17 00:00:00 2001
From: infiniteflower <139582705+infiniteflower@users.noreply.github.com>
Date: Wed, 2 Aug 2023 14:58:12 -0400
Subject: [PATCH] Feat/swaps link buy gas (#20241)

* Add link to buy more ETH if insufficient gas

* Fix lint error

* Use native currency per network

* Use localized msg for buy more gas

* Add the word "more"

* Fix smart tx not showing msg

* Pull out not enough balance into own component

* Add story for not enough balance

* Fix btn text not being aligned with rest of text

* Move inline style to class, remove empty classname

* Update ui/pages/swaps/prepare-swap-page/not-enough-balance.stories.tsx

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/pages/swaps/prepare-swap-page/index.scss

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Remove line

* Move BannerAlert back into review-quote and use BannerAlert props

* Remove unused CSS

---------

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
---
 app/_locales/en/messages.json                 |  4 ++
 .../swaps/prepare-swap-page/review-quote.js   | 48 +++++++++++--------
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 5fd8ff15d..68949fcd8 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -611,6 +611,10 @@
     "message": "Buy $1",
     "description": "$1 is the ticker symbol of a an asset the user is being prompted to purchase"
   },
+  "buyMoreAsset": {
+    "message": "Buy more $1",
+    "description": "$1 is the ticker symbol of a an asset the user is being prompted to purchase"
+  },
   "buyNow": {
     "message": "Buy Now"
   },
diff --git a/ui/pages/swaps/prepare-swap-page/review-quote.js b/ui/pages/swaps/prepare-swap-page/review-quote.js
index dd7bdaa6b..5c815f2a5 100644
--- a/ui/pages/swaps/prepare-swap-page/review-quote.js
+++ b/ui/pages/swaps/prepare-swap-page/review-quote.js
@@ -108,22 +108,22 @@ import {
   DISPLAY,
   AlignItems,
   FLEX_DIRECTION,
-  SEVERITIES,
   TextVariant,
   FRACTIONS,
   TEXT_ALIGN,
   Size,
+  Severity,
 } from '../../../helpers/constants/design-system';
-import {
-  BannerAlert,
-  ButtonLink,
-  Text,
-} from '../../../components/component-library';
 import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
   MetaMetricsEventErrorType,
 } from '../../../../shared/constants/metametrics';
+import {
+  ButtonLink,
+  Text,
+  BannerAlert,
+} from '../../../components/component-library';
 import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
 import { parseStandardTokenTransactionData } from '../../../../shared/modules/transaction.utils';
 import { getTokenValueParam } from '../../../../shared/lib/metamask-controller-utils';
@@ -137,6 +137,7 @@ import { calcTokenValue } from '../../../../shared/lib/swaps-utils';
 import fetchEstimatedL1Fee from '../../../helpers/utils/optimism/fetchEstimatedL1Fee';
 import ExchangeRateDisplay from '../exchange-rate-display';
 import InfoTooltip from '../../../components/ui/info-tooltip';
+import useRamps from '../../../hooks/experiences/useRamps';
 import ViewQuotePriceDifference from './view-quote-price-difference';
 
 let intervalId;
@@ -160,6 +161,7 @@ export default function ReviewQuote({ setReceiveToAmount }) {
     useState(null);
   // We need to have currentTimestamp in state, otherwise it would change with each rerender.
   const [currentTimestamp] = useState(Date.now());
+  const { openBuyCryptoInPdapp } = useRamps();
 
   const [acknowledgedPriceDifference, setAcknowledgedPriceDifference] =
     useState(false);
@@ -782,6 +784,9 @@ export default function ReviewQuote({ setReceiveToAmount }) {
       }),
     );
   };
+
+  const needsMoreGas = Boolean(ethBalanceNeededStx || ethBalanceNeeded);
+
   const actionableBalanceErrorMessage = tokenBalanceUnavailable
     ? t('swapTokenBalanceUnavailable', [sourceTokenSymbol])
     : t('swapApproveNeedMoreTokens', [
@@ -1066,20 +1071,23 @@ export default function ReviewQuote({ setReceiveToAmount }) {
           <>
             {viewQuotePriceDifferenceWarning}
             {(showInsufficientWarning || tokenBalanceUnavailable) && (
-              <Box display={DISPLAY.FLEX} marginTop={2}>
-                <BannerAlert
-                  severity={SEVERITIES.INFO}
-                  title={t('notEnoughBalance')}
-                >
-                  <Text
-                    variant={TextVariant.bodyMd}
-                    as="h6"
-                    data-testid="mm-banner-alert-notification-text"
-                  >
-                    {actionableBalanceErrorMessage}
-                  </Text>
-                </BannerAlert>
-              </Box>
+              <BannerAlert
+                title={t('notEnoughBalance')}
+                severity={Severity.Info}
+                description={actionableBalanceErrorMessage}
+                descriptionProps={{
+                  'data-testid': 'mm-banner-alert-notification-text',
+                }}
+                actionButtonLabel={
+                  needsMoreGas
+                    ? t('buyMoreAsset', [nativeCurrencySymbol])
+                    : undefined
+                }
+                actionButtonOnClick={
+                  needsMoreGas ? () => openBuyCryptoInPdapp() : undefined
+                }
+                marginTop={2}
+              />
             )}
           </>
         )}