chore(runway): cherry-pick refactor(ramp): update ramp copy (#11960)

- refactor(ramp): update ramp copy (#10952) ## **Description** This PR contains the changes requested to comply with some regulations ## **Related issues** Fixes: ## **Manual testing steps** 1. Navigate through the changed screens and see the new copy ## **Screenshots/Recordings** | Image | |:-----:| | <img width="400" src="https://github.com/user-attachments/assets/21a1c07e-95d2-43cd-ae35-fc6e6b42c9de" /> | | <img width="400" src="https://github.com/user-attachments/assets/e94c1380-f01a-4769-a5d4-fb9be20c0c9c" /> | | <img width="400" src="https://github.com/user-attachments/assets/ad49c1a3-5772-45cf-8ae0-2417d3534f36" /> | | <img width="400" src="https://github.com/user-attachments/assets/e85edab5-cd74-476d-a993-7b39a4ea3fcb" /> | | <img width="400" src="https://github.com/user-attachments/assets/96150ff3-d0fe-464c-9ed6-72f6afa8bcdd" /> | | <img width="400" src="https://github.com/user-attachments/assets/1849b585-d7a9-46c8-b553-a87e2db0f7a0" /> | ### **Before**  ### **After**  ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. [6facd6d](6facd6d) Co-authored-by: Pedro Pablo Aste Kompen <wachunei@gmail.com>
MetaMask · Oct 25, 2024 · 45e0b54 · 45e0b54
1 parent d5ebd8f
commit 45e0b54
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 27 deletions.
diff --git a/app/components/UI/ReceiveRequest/index.js b/app/components/UI/ReceiveRequest/index.js
@@ -23,10 +23,7 @@ import GlobalAlert from '../GlobalAlert';
 import StyledButton from '../StyledButton';
 import ClipboardManager from '../../../core/ClipboardManager';
 import { ThemeContext, mockTheme } from '../../../util/theme';
-import {
-  selectChainId,
-  selectTicker,
-} from '../../../selectors/networkController';
+import { selectChainId } from '../../../selectors/networkController';
 import { isNetworkRampSupported } from '../Ramp/utils';
 import { createBuyNavigationDetails } from '../Ramp/routes/utils';
 import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
@@ -271,7 +268,6 @@ ReceiveRequest.contextType = ThemeContext;
 
 const mapStateToProps = (state) => ({
   chainId: selectChainId(state),
-  ticker: selectTicker(state),
   selectedAddress: selectSelectedInternalAccountChecksummedAddress(state),
   receiveAsset: state.modals.receiveAsset,
   seedphraseBackedUp: state.user.seedphraseBackedUp,

diff --git a/app/components/UI/Swaps/QuotesView.js b/app/components/UI/Swaps/QuotesView.js
@@ -1709,16 +1709,12 @@ function SwapsQuotesView({
         {(!hasEnoughTokenBalance || !hasEnoughEthBalance) && (
           <View style={styles.alertBar}>
             <Alert small type={AlertType.Info}>
-              {`${strings('swaps.you_need')} `}
               <Text reset bold>
                 {!hasEnoughTokenBalance && !isSwapsNativeAsset(sourceToken)
                   ? `${renderFromTokenMinimalUnit(
                       missingTokenBalance,
                       sourceToken.decimals,
-                    )} ${
-                      sourceToken.symbol
-                      // eslint-disable-next-line no-mixed-spaces-and-tabs
-                    } `
+                    )} ${sourceToken.symbol} `
                   : `${renderFromWei(missingEthBalance)} ${getTicker(ticker)} `}
               </Text>
               {!hasEnoughTokenBalance
@@ -1727,7 +1723,7 @@ function SwapsQuotesView({
               {(isSwapsNativeAsset(sourceToken) ||
                 (hasEnoughTokenBalance && !hasEnoughEthBalance)) && (
                 <Text link underline small onPress={buyEth}>
-                  {strings('swaps.buy_more', { ticker: getTicker(ticker) })}
+                  {strings('swaps.token_marketplace')}
                 </Text>
               )}
             </Alert>

diff --git a/app/components/UI/Tokens/TokenList/TokenListFooter/index.tsx b/app/components/UI/Tokens/TokenList/TokenListFooter/index.tsx
@@ -88,15 +88,17 @@ export const TokenListFooter = ({
       {isBuyableToken && (
         <View style={styles.buy}>
           <Text variant={TextVariant.HeadingSM} style={styles.buyTitle}>
-            {strings('wallet.add_to_get_started')}
+            {strings('wallet.token_is_needed_to_continue', {
+              tokenSymbol: mainToken.symbol,
+            })}
           </Text>
           <Button
             variant={ButtonVariants.Primary}
             size={ButtonSize.Lg}
             width={ButtonWidthTypes.Full}
             style={styles.buyButton}
             onPress={goToBuy}
-            label={strings('wallet.buy_asset', { asset: mainToken.symbol })}
+            label={strings('wallet.next')}
           />
         </View>
       )}

diff --git a/app/components/Views/confirmations/SendFlow/Amount/index.js b/app/components/Views/confirmations/SendFlow/Amount/index.js
@@ -1243,6 +1243,7 @@ class Amount extends PureComponent {
       isNetworkBuyNativeTokenSupported,
       swapsIsLive,
       chainId,
+      ticker,
     } = this.props;
     const colors = this.context.colors || mockTheme.colors;
     const themeAppearance = this.context.themeAppearance || 'light';
@@ -1346,11 +1347,20 @@ class Amount extends PureComponent {
               onPress={navigateToBuyOrSwaps}
               style={styles.errorBuyWrapper}
             >
-              <Text style={styles.error}>{amountError}</Text>
-              {isNetworkBuyNativeTokenSupported && selectedAsset.isETH && (
-                <Text style={[styles.error, styles.underline]}>
-                  {strings('transaction.buy_more')}
+              {isNetworkBuyNativeTokenSupported && selectedAsset.isETH ? (
+                <Text style={[styles.error]}>
+                  {strings('transaction.more_to_continue', {
+                    ticker: getTicker(ticker),
+                  })}
+                  {'\n'}
+                  <Text style={[styles.error, styles.underline]}>
+                    {strings('transaction.token_Marketplace')}
+                  </Text>
+                  {'\n'}
+                  {strings('transaction.you_can_also_send_funds')}
                 </Text>
+              ) : (
+                <Text style={styles.error}>{amountError}</Text>
               )}
 
               {isSwappable && (

diff --git a/app/components/Views/confirmations/SendFlow/Confirm/index.js b/app/components/Views/confirmations/SendFlow/Confirm/index.js
@@ -1301,7 +1301,7 @@ class Confirm extends PureComponent {
     const errorPress = isTestNetwork ? this.goToFaucet : this.buyEth;
     const errorLinkText = isTestNetwork
       ? strings('transaction.go_to_faucet')
-      : strings('transaction.buy_more');
+      : strings('transaction.token_marketplace');
 
     return (
       <SafeAreaView

diff --git a/app/components/Views/confirmations/SendFlow/SendTo/index.js b/app/components/Views/confirmations/SendFlow/SendTo/index.js
@@ -330,10 +330,13 @@ class SendFlow extends PureComponent {
 
     return (
       <>
-        <Text bold style={styles.buyEth} onPress={this.goToBuy}>
-          {strings('fiat_on_ramp.buy', {
-            ticker: getTicker(this.props.ticker),
-          })}
+        <Text> </Text>
+        <Text reset bold link underline onPress={this.goToBuy}>
+          {strings('fiat_on_ramp_aggregator.token_marketplace')}.
+        </Text>
+        <Text reset>
+          {'\n'}
+          {strings('transaction.you_can_also_send_funds')}
         </Text>
       </>
     );

diff --git a/app/components/Views/confirmations/components/ApproveTransactionReview/index.js b/app/components/Views/confirmations/components/ApproveTransactionReview/index.js
@@ -830,7 +830,7 @@ class ApproveTransactionReview extends PureComponent {
     const errorPress = isTestNetwork ? this.goToFaucet : this.buyEth;
     const errorLinkText = isTestNetwork
       ? strings('transaction.go_to_faucet')
-      : strings('transaction.buy_more');
+      : strings('transaction.token_marketplace');
 
     const showFeeMarket =
       !gasEstimateType ||

diff --git a/...ts/Views/confirmations/components/TransactionReview/TransactionReviewInformation/index.js b/...ts/Views/confirmations/components/TransactionReview/TransactionReviewInformation/index.js
@@ -666,7 +666,7 @@ class TransactionReviewInformation extends PureComponent {
     const errorPress = this.isTestNetwork() ? this.goToFaucet : this.buyEth;
     const errorLinkText = this.isTestNetwork()
       ? strings('transaction.go_to_faucet')
-      : strings('transaction.buy_more');
+      : strings('transaction.token_marketplace');
 
     const showFeeMarket =
       (!gasEstimateType ||

diff --git a/locales/languages/en.json b/locales/languages/en.json
@@ -438,6 +438,8 @@
       "confirm_cta": "Confirm"
     },
     "add_to_get_started": "Add crypto to get started",
+    "token_is_needed_to_continue": "{{tokenSymbol}} is needed to continue",
+    "next": "Next",
     "buy_asset": "Buy {{asset}}",
     "no_tokens": "You don't have any tokens!",
     "no_nfts_yet": "No NFTs yet",
@@ -1245,6 +1247,7 @@
   "asset_overview": {
     "send_button": "Send",
     "buy_button": "Buy",
+    "token_marketplace": "Token marketplace",
     "sell_button": "Sell",
     "receive_button": "Receive",
     "portfolio_button": "Portfolio",
@@ -1400,6 +1403,10 @@
     "insufficient_amount": "You need {{amount}} more {{tokenSymbol}} to complete this transaction.",
     "buy_more_eth": "Buy more ETH",
     "buy_more": "Buy more",
+    "more_to_continue": "More {{ticker}} is needed to continue",
+    "you_can_also_send_funds": "You can also send funds from another account.",
+    "token_marketplace": "Token marketplace",
+    "token_Marketplace": "Token Marketplace",
     "go_to_faucet": "Go to faucet",
     "get_ether": "Get Ether for the {{networkName}} network.",
     "insufficient_tokens": "Insufficient {{token}}",
@@ -1447,7 +1454,7 @@
     "asset": "Asset",
     "balance": "Balance",
     "token_id": "Token ID",
-    "not_enough_for_gas": "You have 0 {{ticker}} in your account to pay for transaction fees. Buy some {{ticker}} or deposit from another account.",
+    "not_enough_for_gas": "You have 0 {{ticker}} in your account to pay for transaction fees.",
     "send": "Send",
     "confirm_with_qr_hardware": "Confirm with hardware wallet",
     "confirm_with_ledger_hardware": "Confirm with Ledger",
@@ -2413,6 +2420,7 @@
     "All": "All",
     "Buy": "Buy",
     "Sell": "Sell",
+    "token_marketplace": "Token marketplace",
     "Purchased": "Purchased",
     "Sold": "Sold",
     "empty_buy_orders_list": "You don't have any buy orders",
@@ -2679,8 +2687,7 @@
     "you_need": "You need",
     "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.",
-    "buy_more": "Buy more {{ticker}}.",
+    "token_marketplace": "Token marketplace",
     "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}}",