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

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

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')}
-                >
+                severity={Severity.Info}
-                  <Text
+                description={actionableBalanceErrorMessage}
-                    variant={TextVariant.bodyMd}
+                descriptionProps={{
-                    as="h6"
+                  'data-testid': 'mm-banner-alert-notification-text',
-                    data-testid="mm-banner-alert-notification-text"
+                }}
-                  >
+                actionButtonLabel={
-                    {actionableBalanceErrorMessage}
+                  needsMoreGas
-                  </Text>
+                    ? t('buyMoreAsset', [nativeCurrencySymbol])
-                </BannerAlert>
+                    : undefined
-              </Box>
+                }
+                actionButtonOnClick={
+                  needsMoreGas ? () => openBuyCryptoInPdapp() : undefined
+                }
+                marginTop={2}
+              />
             )}
           </>
         )}