feat: swaps on send flow when amount is insufficient

app/components/UI/Swaps/index.js

@@ -208,6 +208,8 @@ function SwapsAmountView({
 
   const explorer = useBlockExplorer(providerConfig, networkConfigurations);
   const initialSource = route.params?.sourceToken ?? SWAPS_NATIVE_ADDRESS;
+  const initialDestination = route.params?.destinationToken;
+
   const [amount, setAmount] = useState('0');
   const [slippage, setSlippage] = useState(AppConstants.SWAPS.DEFAULT_SLIPPAGE);
   const [isInitialLoadingTokens, setInitialLoadingTokens] = useState(false);
@@ -219,13 +221,18 @@ function SwapsAmountView({
       ),
     ),
   );
+  const [isDestinationSet, setIsDestinationSet] = useState(false);
 
   const [sourceToken, setSourceToken] = useState(() =>
     swapsTokens?.find((token) =>
       toLowerCaseEquals(token.address, initialSource),
     ),
   );
-  const [destinationToken, setDestinationToken] = useState(null);
+  const [destinationToken, setDestinationToken] = useState(
+    swapsTokens?.find((token) =>
+      toLowerCaseEquals(token.address, initialDestination),
+    ),
+  );
   const [hasDismissedTokenAlert, setHasDismissedTokenAlert] = useState(true);
   const [contractBalance, setContractBalance] = useState(null);
   const [contractBalanceAsUnits, setContractBalanceAsUnits] = useState(
@@ -344,28 +351,41 @@ function SwapsAmountView({
     })();
   }, [swapsControllerTokens, swapsTokens]);
 
+  const canSetAnInitialSourceToken =
+    !isSourceSet &&
+    initialSource &&
+    swapsControllerTokens &&
+    swapsTokens?.length > 0 &&
+    !sourceToken;
+
   useEffect(() => {
-    if (
-      !isSourceSet &&
-      initialSource &&
-      swapsControllerTokens &&
-      swapsTokens?.length > 0 &&
-      !sourceToken
-    ) {
+    if (canSetAnInitialSourceToken) {
       setIsSourceSet(true);
       setSourceToken(
         swapsTokens.find((token) =>
           toLowerCaseEquals(token.address, initialSource),
         ),
       );
     }
-  }, [
-    initialSource,
-    isSourceSet,
-    sourceToken,
-    swapsControllerTokens,
-    swapsTokens,
-  ]);
+  }, [canSetAnInitialSourceToken, initialSource, swapsTokens]);
+
+  const canSetAnInitialTokenDestination =
+    !isDestinationSet &&
+    initialDestination &&
+    swapsControllerTokens &&
+    swapsTokens?.length > 0 &&
+    !destinationToken;
+
+  useEffect(() => {
+    if (canSetAnInitialTokenDestination) {
+      setIsDestinationSet(true);
+      setDestinationToken(
+        swapsTokens.find((token) =>
+          toLowerCaseEquals(token.address, initialDestination),
+        ),
+      );
+    }
+  }, [canSetAnInitialTokenDestination, initialDestination, swapsTokens]);
 
   useEffect(() => {
     setHasDismissedTokenAlert(false);

app/components/Views/SendFlow/Amount/__snapshots__/index.test.tsx.snap

@@ -7772,80 +7772,38 @@ exports[`Amount should show an error message if balance is insufficient 1`] = `
                                 }
                                 testID="amount-error"
                               >
-                                <View
+                                <TouchableOpacity
+                                  onPress={[Function]}
                                   style={
-                                    Array [
-                                      Object {
-                                        "borderRadius": 8,
-                                        "borderWidth": 1,
-                                        "flexDirection": "row",
-                                        "paddingHorizontal": 12,
-                                        "paddingVertical": 8,
-                                      },
-                                      undefined,
-                                      Object {
-                                        "backgroundColor": "#D7384719",
-                                        "borderColor": "#D73847",
-                                      },
-                                      undefined,
-                                    ]
+                                    Object {
+                                      "alignItems": "center",
+                                      "backgroundColor": "#D7384719",
+                                      "borderColor": "#D73847",
+                                      "borderRadius": 8,
+                                      "borderWidth": 1,
+                                      "justifyContent": "center",
+                                      "marginHorizontal": 24,
+                                      "marginTop": 12,
+                                      "paddingHorizontal": 10,
+                                      "paddingVertical": 6,
+                                    }
                                   }
                                 >
-                                  <View>
-                                    <Text
-                                      style={
-                                        Array [
-                                          Object {
-                                            "color": "#24272A",
-                                            "fontFamily": "EuclidCircularB-Regular",
-                                            "fontSize": 30,
-                                            "fontWeight": "400",
-                                            "marginVertical": 2,
-                                          },
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          Object {
-                                            "fontSize": 12,
-                                          },
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          undefined,
-                                          Array [
-                                            Object {
-                                              "color": "#24272A",
-                                              "flex": 1,
-                                              "fontSize": 14,
-                                              "lineHeight": 17,
-                                            },
-                                            Object {
-                                              "flex": 0,
-                                            },
-                                          ],
-                                        ]
+                                  <Text
+                                    style={
+                                      Object {
+                                        "color": "#24272A",
+                                        "fontFamily": "EuclidCircularB-Regular",
+                                        "fontSize": 12,
+                                        "fontWeight": "400",
+                                        "lineHeight": 16,
+                                        "textAlign": "center",
                                       }
-                                      testID="error-message-warning"
-                                    >
-                                      Insufficient funds
-                                    </Text>
-                                  </View>
-                                </View>
+                                    }
+                                  >
+                                    Insufficient funds
+                                  </Text>
+                                </TouchableOpacity>
                               </View>
                             </View>
                           </View>

app/components/Views/SendFlow/Amount/index.js

@@ -84,6 +84,7 @@ import {
 } from '../../../../../wdio/screen-objects/testIDs/Screens/AmountScreen.testIds.js';
 import generateTestId from '../../../../../wdio/utils/generateTestId';
 import {
+  selectChainId,
   selectProviderType,
   selectTicker,
 } from '../../../../selectors/networkController';
@@ -98,8 +99,13 @@ import { selectContractBalances } from '../../../../selectors/tokenBalancesContr
 import { selectSelectedAddress } from '../../../../selectors/preferencesController';
 import { PREFIX_HEX_STRING } from '../../../../constants/transaction';
 import Routes from '../../../../constants/navigation/Routes';
+import { getRampNetworks } from '../../../../reducers/fiatOrders';
+import { swapsLivenessSelector } from '../../../../reducers/swaps';
+import { isSwapsAllowed } from '../../../../components/UI/Swaps/utils';
+import { swapsUtils } from '@metamask/swaps-controller';
 import { regex } from '../../../../util/regex';
 import { AmountViewSelectorsIDs } from '../../../../../e2e/selectors/SendFlow/AmountView.selectors';
+import { isNetworkRampNativeTokenSupported } from '../../../UI/Ramp/common/utils';
 
 const KEYBOARD_OFFSET = Device.isSmallDevice() ? 80 : 120;
 
@@ -285,6 +291,18 @@ const createStyles = (colors) =>
     errorMessageWrapper: {
       marginVertical: 16,
     },
+    errorBuyWrapper: {
+      marginHorizontal: 24,
+      marginTop: 12,
+      paddingHorizontal: 10,
+      paddingVertical: 6,
+      backgroundColor: colors.error.muted,
+      borderColor: colors.error.default,
+      borderRadius: 8,
+      borderWidth: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
     CollectibleMedia: {
       width: 120,
       height: 120,
@@ -339,6 +357,18 @@ const createStyles = (colors) =>
       marginTop: 20,
       marginHorizontal: 20,
     },
+    swapOrBuyButton: { width: '100%', marginTop: 16 },
+    error: {
+      color: colors.text.default,
+      fontSize: 12,
+      lineHeight: 16,
+      ...fontStyles.normal,
+      textAlign: 'center',
+    },
+    underline: {
+      textDecorationLine: 'underline',
+      ...fontStyles.bold,
+    },
   });
 
 /**
@@ -434,6 +464,18 @@ class Amount extends PureComponent {
      * Resets transaction state
      */
     resetTransaction: PropTypes.func,
+    /**
+     * Boolean that indicates if the network supports buy
+     */
+    isNetworkBuyNativeTokenSupported: PropTypes.bool,
+    /**
+     * Boolean that indicates if the swap is live
+     */
+    swapsIsLive: PropTypes.bool,
+    /**
+     * String that indicates the current chain id
+     */
+    chainId: PropTypes.string,
   };
 
   state = {
@@ -1188,10 +1230,49 @@ class Amount extends PureComponent {
       internalPrimaryCurrencyIsCrypto,
       currentBalance,
     } = this.state;
-    const { currentCurrency } = this.props;
+    const {
+      currentCurrency,
+      selectedAsset,
+      navigation,
+      isNetworkBuyNativeTokenSupported,
+      swapsIsLive,
+      chainId,
+    } = this.props;
     const colors = this.context.colors || mockTheme.colors;
     const themeAppearance = this.context.themeAppearance || 'light';
     const styles = createStyles(colors);
+    const navigateToSwap = () => {
+      navigation.replace('Swaps', {
+        screen: 'SwapsAmountView',
+        params: {
+          sourceToken: swapsUtils.NATIVE_SWAPS_TOKEN_ADDRESS,
+          destinationToken: selectedAsset.address,
+        },
+      });
+    };
+
+    const isSwappable =
+      !selectedAsset.isETH &&
+      AppConstants.SWAPS.ACTIVE &&
+      swapsIsLive &&
+      isSwapsAllowed(chainId) &&
+      amountError === strings('transaction.insufficient');
+
+    const navigateToBuyOrSwaps = () => {
+      if (isSwappable) {
+        Analytics.trackEventWithParameters(MetaMetricsEvents.LINK_CLICKED, {
+          location: 'insufficient_funds_warning',
+          text: 'swap_tokens',
+        });
+        navigateToSwap();
+      } else if (isNetworkBuyNativeTokenSupported && selectedAsset.isETH) {
+        Analytics.trackEventWithParameters(MetaMetricsEvents.LINK_CLICKED, {
+          location: 'insufficient_funds_warning',
+          text: 'buy_more',
+        });
+        navigation.navigate(Routes.RAMP.BUY);
+      }
+    };
 
     return (
       <View>
@@ -1255,7 +1336,23 @@ class Amount extends PureComponent {
             style={styles.errorMessageWrapper}
             {...generateTestId(Platform, AmountViewSelectorsIDs.AMOUNT_ERROR)}
           >
-            <ErrorMessage errorMessage={amountError} />
+            <TouchableOpacity
+              onPress={navigateToBuyOrSwaps}
+              style={styles.errorBuyWrapper}
+            >
+              <Text style={styles.error}>{amountError}</Text>
+              {isNetworkBuyNativeTokenSupported && selectedAsset.isETH && (
+                <Text style={[styles.error, styles.underline]}>
+                  {strings('transaction.buy_more')}
+                </Text>
+              )}
+
+              {isSwappable && (
+                <Text style={[styles.error, styles.underline]}>
+                  {strings('transaction.swap_tokens')}
+                </Text>
+              )}
+            </TouchableOpacity>
           </View>
         )}
       </View>
@@ -1423,6 +1520,12 @@ const mapStateToProps = (state, ownProps) => ({
   transactionState: ownProps.transaction || state.transaction,
   selectedAsset: state.transaction.selectedAsset,
   isPaymentRequest: state.transaction.paymentRequest,
+  isNetworkBuyNativeTokenSupported: isNetworkRampNativeTokenSupported(
+    selectChainId(state),
+    getRampNetworks(state),
+  ),
+  swapsIsLive: swapsLivenessSelector(state),
+  chainId: selectChainId(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/core/Analytics/MetaMetrics.events.ts

@@ -85,6 +85,9 @@ enum EVENT_NAME {
   // Portfolio
   PORTFOLIO_LINK_CLICKED = 'Portfolio Link Clicked',
 
+  // Link redirects
+  LINK_CLICKED = 'Link Clicked',
+
   // On-ramp [LEGACY]
   ONRAMP_OPENED = 'On-ramp Opened',
   ONRAMP_CLOSED = 'On-ramp Closed',
@@ -455,6 +458,7 @@ const events = {
   ),
 
   PORTFOLIO_LINK_CLICKED: generateOpt(EVENT_NAME.PORTFOLIO_LINK_CLICKED),
+  LINK_CLICKED: generateOpt(EVENT_NAME.LINK_CLICKED),
   WALLET_SECURITY_STARTED: generateOpt(EVENT_NAME.WALLET_SECURITY_STARTED),
   WALLET_SECURITY_MANUAL_BACKUP_INITIATED: generateOpt(
     EVENT_NAME.WALLET_SECURITY_MANUAL_BACKUP_INITIATED,

locales/languages/en.json

@@ -1203,7 +1203,8 @@
     "fiat_conversion_not_available": "Fiat conversions are not available at this moment",
     "hex_data_copied": "Hex data copied to clipboard",
     "invalid_recipient": "Invalid recipient",
-    "invalid_recipient_description": "Check the address and make sure it's valid"
+    "invalid_recipient_description": "Check the address and make sure it's valid",
+    "swap_tokens": "Swap tokens"
   },
   "custom_gas": {
     "total": "Total",