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) && (
-
-
-
- {actionableBalanceErrorMessage}
-
-
-
+ openBuyCryptoInPdapp() : undefined
+ }
+ marginTop={2}
+ />
)}
>
)}