Swaps: Update Market price unavailable and Price impact text (#2702)

Co-authored-by: sethkfman <10342624+sethkfman@users.noreply.github.com>
MetaMask · Jun 7, 2021 · 5e6109d · 5e6109d
1 parent 1777a12
commit 5e6109d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/app/components/UI/Swaps/QuotesView.js b/app/components/UI/Swaps/QuotesView.js
@@ -450,6 +450,7 @@ function SwapsQuotesView({
 	const [isPriceDifferenceModalVisible, togglePriceDifferenceModal, , hidePriceDifferenceModal] = useModalHandler(
 		false
 	);
+	const [isPriceImpactModalVisible, togglePriceImpactModal, , hidePriceImpactModal] = useModalHandler(false);
 
 	/* Handlers */
 	const handleAnimationEnd = useCallback(() => {
@@ -909,6 +910,7 @@ function SwapsQuotesView({
 				hideFeeModal();
 				hideQuotesModal();
 				hidePriceDifferenceModal();
+				hidePriceImpactModal();
 				onCancelEditQuoteTransactions();
 			}
 
@@ -933,7 +935,8 @@ function SwapsQuotesView({
 		quotesLastFetched,
 		quoteRefreshSeconds,
 		remainingTime,
-		hidePriceDifferenceModal
+		hidePriceDifferenceModal,
+		hidePriceImpactModal
 	]);
 
 	/* errorKey effect: hide every modal */
@@ -1131,15 +1134,20 @@ function SwapsQuotesView({
 							onPress={handleSlippageAlertPress}
 							onInfoPress={
 								selectedQuote.priceSlippage?.calculationError?.length > 0
-									? undefined
+									? togglePriceImpactModal
 									: togglePriceDifferenceModal
 							}
 						>
 							{textStyle =>
 								selectedQuote.priceSlippage?.calculationError?.length > 0 ? (
-									<Text style={textStyle} small centered>
-										{strings('swaps.market_price_unavailable')}
-									</Text>
+									<>
+										<Text style={textStyle} bold centered>
+											{strings('swaps.market_price_unavailable_title')}
+										</Text>
+										<Text style={textStyle} small centered>
+											{strings('swaps.market_price_unavailable')}
+										</Text>
+									</>
 								) : (
 									<>
 										<Text style={textStyle} bold centered>
@@ -1393,6 +1401,12 @@ function SwapsQuotesView({
 				title={strings('swaps.price_difference_title')}
 				body={<Text style={styles.text}>{strings('swaps.price_difference_body')}</Text>}
 			/>
+			<InfoModal
+				isVisible={isPriceImpactModalVisible}
+				toggleModal={togglePriceImpactModal}
+				title={strings('swaps.price_impact_title')}
+				body={<Text style={styles.text}>{strings('swaps.price_impact_body')}</Text>}
+			/>
 			<InfoModal
 				isVisible={isFeeModalVisible}
 				toggleModal={toggleFeeModal}

diff --git a/locales/languages/en.json b/locales/languages/en.json
@@ -1467,10 +1467,13 @@
 		"more_to_complete": "more to complete this swap.",
 		"more_gas_to_complete": "more for gas to complete this swap.",
 		"buy_more_eth": "Buy more ETH.",
-		"market_price_unavailable": "Market price is unavailable. Make sure you feel comfortable with the returned amount before proceeding.",
+		"market_price_unavailable_title": "Check your rate before proceeding",
+		"market_price_unavailable": "Market price is unavailable and price impact is therefore unknown. Please verify that you are comfortable with the amount of tokens you will receive before swapping.",
 		"price_difference": "Price difference of {{amount}}",
 		"price_difference_title": "Price difference",
 		"price_difference_body": "The difference in market prices can be affected by fees taken by intermediaries, size of market, size of trade, or market inefficiencies.",
+		"price_impact_title": "Price impact",
+		"price_impact_body": "Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool.",
 		"quotes_update_often": "Quotes update often",
 		"quotes_update_often_text": "Quotes are updated often to reflect current market conditions.",
 		"about_to_swap": "You are about to swap",