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} + /> )} )}