feat(off-ramp): add off-ramp feature

app/components/Base/Keypad/index.js

@@ -91,20 +91,26 @@ function KeypadComponent({
           style={digitButtonStyle}
           textStyle={digitTextStyle}
           onPress={handleKeypadPress1}
+          accessibilityRole="button"
+          accessible
         >
           1
         </Keypad.Button>
         <Keypad.Button
           style={digitButtonStyle}
           textStyle={digitTextStyle}
           onPress={handleKeypadPress2}
+          accessibilityRole="button"
+          accessible
         >
           2
         </Keypad.Button>
         <Keypad.Button
           style={digitButtonStyle}
           textStyle={digitTextStyle}
           onPress={handleKeypadPress3}
+          accessibilityRole="button"
+          accessible
         >
           3
         </Keypad.Button>
@@ -114,20 +120,26 @@ function KeypadComponent({
           style={digitButtonStyle}
           textStyle={digitTextStyle}
           onPress={handleKeypadPress4}
+          accessibilityRole="button"
+          accessible
         >
           4
         </Keypad.Button>
         <Keypad.Button
           style={digitButtonStyle}
           textStyle={digitTextStyle}
           onPress={handleKeypadPress5}
+          accessibilityRole="button"
+          accessible
         >
           5
         </Keypad.Button>
         <Keypad.Button
           style={digitButtonStyle}
           textStyle={digitTextStyle}
           onPress={handleKeypadPress6}
+          accessibilityRole="button"
+          accessible
         >
           6
         </Keypad.Button>
@@ -137,20 +149,26 @@ function KeypadComponent({
           style={digitButtonStyle}
           textStyle={digitTextStyle}
           onPress={handleKeypadPress7}
+          accessibilityRole="button"
+          accessible
         >
           7
         </Keypad.Button>
         <Keypad.Button
           style={digitButtonStyle}
           textStyle={digitTextStyle}
           onPress={handleKeypadPress8}
+          accessibilityRole="button"
+          accessible
         >
           8
         </Keypad.Button>
         <Keypad.Button
           style={digitButtonStyle}
           textStyle={digitTextStyle}
           onPress={handleKeypadPress9}
+          accessibilityRole="button"
+          accessible
         >
           9
         </Keypad.Button>
@@ -167,10 +185,13 @@ function KeypadComponent({
           style={digitButtonStyle}
           textStyle={digitTextStyle}
           onPress={handleKeypadPress0}
+          accessibilityRole="button"
+          accessible
         >
           0
         </Keypad.Button>
         <Keypad.DeleteButton
+          testID="keypad-delete-button"
           style={deleteButtonStyle}
           icon={deleteIcon}
           onPress={handleKeypadPressBack}

app/components/Nav/Main/MainNavigator.js

@@ -1,5 +1,6 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { Image, StyleSheet, Keyboard, Platform } from 'react-native';
+import PropTypes from 'prop-types';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useSelector } from 'react-redux';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
@@ -45,17 +46,21 @@ import SwapsQuotesView from '../../UI/Swaps/QuotesView';
 import CollectiblesDetails from '../../UI/CollectibleModal';
 import OptinMetrics from '../../UI/OptinMetrics';
 import Drawer from '../../UI/Drawer';
-import { FiatOnRampSDKProvider } from '../../UI/Ramp/sdk';
-import GetStarted from '../../UI/Ramp/Views/GetStarted';
-import PaymentMethods from '../../UI/Ramp/Views/PaymentMethods/PaymentMethods';
-import AmountToBuy from '../../UI/Ramp/Views/AmountToBuy';
-import Quotes from '../../UI/Ramp/Views/Quotes';
-import CheckoutWebView from '../../UI/Ramp/Views/Checkout';
-import OnRampSettings from '../../UI/Ramp/Views/Settings';
-import OnrampAddActivationKey from '../../UI/Ramp/Views/Settings/AddActivationKey';
-import Regions from '../../UI/Ramp/Views/Regions';
+
+import { RampSDKProvider } from '../../UI/Ramp/common/sdk';
+import { RampType } from '../../UI/Ramp/common/types';
+import GetStarted from '../../UI/Ramp/buy/Views/GetStarted';
+import PaymentMethods from '../../UI/Ramp/buy/Views/PaymentMethods/PaymentMethods';
+import BuildQuote from '../../UI/Ramp/buy/Views/BuildQuote/BuildQuote';
+import Quotes from '../../UI/Ramp/buy/Views/Quotes';
+import CheckoutWebView from '../../UI/Ramp/buy/Views/Checkout';
+import RampSettings from '../../UI/Ramp/common/Views/Settings';
+import NetworkSwitcher from '../../UI/Ramp/common/Views/NetworkSwitcher';
+import RampAddActivationKey from '../../UI/Ramp/common/Views/Settings/AddActivationKey';
+import Regions from '../../UI/Ramp/buy/Views/Regions';
 import { colors as importedColors } from '../../../styles/common';
-import OrderDetails from '../../UI/Ramp/Views/OrderDetails';
+import OrderDetails from '../../UI/Ramp/common/Views/OrderDetails';
+import SendTransaction from '../../UI/Ramp/common/Views/SendTransaction';
 import TabBar from '../../../component-library/components/Navigation/TabBar';
 import BrowserUrlModal from '../../Views/BrowserUrlModal';
 import Routes from '../../../constants/navigation/Routes';
@@ -172,9 +177,10 @@ const WalletTabModalFlow = () => (
 const TransactionsHome = () => (
   <Stack.Navigator>
     <Stack.Screen name={Routes.TRANSACTIONS_VIEW} component={ActivityView} />
+    <Stack.Screen name={Routes.RAMP.ORDER_DETAILS} component={OrderDetails} />
     <Stack.Screen
-      name={Routes.FIAT_ON_RAMP_AGGREGATOR.ORDER_DETAILS}
-      component={OrderDetails}
+      name={Routes.RAMP.SEND_TRANSACTION}
+      component={SendTransaction}
     />
   </Stack.Navigator>
 );
@@ -221,13 +227,10 @@ const SettingsFlow = () => (
       component={SecuritySettings}
       options={SecuritySettings.navigationOptions}
     />
+    <Stack.Screen name={Routes.RAMP.SETTINGS} component={RampSettings} />
     <Stack.Screen
-      name={Routes.FIAT_ON_RAMP_AGGREGATOR.SETTINGS}
-      component={OnRampSettings}
-    />
-    <Stack.Screen
-      name={Routes.FIAT_ON_RAMP_AGGREGATOR.ADD_ACTIVATION_KEY}
-      component={OnrampAddActivationKey}
+      name={Routes.RAMP.ADD_ACTIVATION_KEY}
+      component={RampAddActivationKey}
     />
     <Stack.Screen
       name="ExperimentalSettings"
@@ -519,49 +522,41 @@ const PaymentRequestView = () => (
   </Stack.Navigator>
 );
 
-const FiatOnRampAggregator = () => (
-  <FiatOnRampSDKProvider>
-    <Stack.Navigator
-      initialRouteName={Routes.FIAT_ON_RAMP_AGGREGATOR.GET_STARTED}
-    >
+const Ramps = ({ rampType }) => (
+  <RampSDKProvider rampType={rampType}>
+    <Stack.Navigator initialRouteName={Routes.RAMP.GET_STARTED}>
+      <Stack.Screen name={Routes.RAMP.GET_STARTED} component={GetStarted} />
       <Stack.Screen
-        name={Routes.FIAT_ON_RAMP_AGGREGATOR.GET_STARTED}
-        component={GetStarted}
+        name={Routes.RAMP.NETWORK_SWITCHER}
+        component={NetworkSwitcher}
+        options={{ animationEnabled: false }}
       />
       <Stack.Screen
-        name={Routes.FIAT_ON_RAMP_AGGREGATOR.PAYMENT_METHOD}
+        name={Routes.RAMP.PAYMENT_METHOD}
         component={PaymentMethods}
       />
       <Stack.Screen
-        name={Routes.FIAT_ON_RAMP_AGGREGATOR.PAYMENT_METHOD_HAS_STARTED}
+        name={Routes.RAMP.PAYMENT_METHOD_HAS_STARTED}
         component={PaymentMethods}
         options={{ animationEnabled: false }}
       />
+      <Stack.Screen name={Routes.RAMP.BUILD_QUOTE} component={BuildQuote} />
+      <Stack.Screen name={Routes.RAMP.QUOTES} component={Quotes} />
+      <Stack.Screen name={Routes.RAMP.CHECKOUT} component={CheckoutWebView} />
+      <Stack.Screen name={Routes.RAMP.REGION} component={Regions} />
       <Stack.Screen
-        name={Routes.FIAT_ON_RAMP_AGGREGATOR.AMOUNT_TO_BUY}
-        component={AmountToBuy}
-      />
-      <Stack.Screen
-        name={Routes.FIAT_ON_RAMP_AGGREGATOR.QUOTES}
-        component={Quotes}
-      />
-      <Stack.Screen
-        name={Routes.FIAT_ON_RAMP_AGGREGATOR.CHECKOUT}
-        component={CheckoutWebView}
-      />
-      <Stack.Screen
-        name={Routes.FIAT_ON_RAMP_AGGREGATOR.REGION}
-        component={Regions}
-      />
-      <Stack.Screen
-        name={Routes.FIAT_ON_RAMP_AGGREGATOR.REGION_HAS_STARTED}
+        name={Routes.RAMP.REGION_HAS_STARTED}
         component={Regions}
         options={{ animationEnabled: false }}
       />
     </Stack.Navigator>
-  </FiatOnRampSDKProvider>
+  </RampSDKProvider>
 );
 
+Ramps.propTypes = {
+  rampType: PropTypes.string,
+};
+
 const Swaps = () => (
   <Stack.Navigator>
     <Stack.Screen
@@ -652,10 +647,12 @@ const MainNavigator = () => (
     <Stack.Screen name="OfflineModeView" component={OfflineModeView} />
     <Stack.Screen name={Routes.QR_SCANNER} component={QrScanner} />
     <Stack.Screen name="PaymentRequestView" component={PaymentRequestView} />
-    <Stack.Screen
-      name={Routes.FIAT_ON_RAMP_AGGREGATOR.ID}
-      component={FiatOnRampAggregator}
-    />
+    <Stack.Screen name={Routes.RAMP.BUY}>
+      {() => <Ramps rampType={RampType.BUY} />}
+    </Stack.Screen>
+    <Stack.Screen name={Routes.RAMP.SELL}>
+      {() => <Ramps rampType={RampType.SELL} />}
+    </Stack.Screen>
     <Stack.Screen name="Swaps" component={Swaps} />
     <Stack.Screen
       name="SetPasswordFlow"

app/components/UI/ApproveTransactionReview/index.js

@@ -93,9 +93,9 @@ import Text, {
 import ApproveTransactionHeader from '../ApproveTransactionHeader';
 import VerifyContractDetails from './VerifyContractDetails/VerifyContractDetails';
 import ShowBlockExplorer from './ShowBlockExplorer';
-import { isNetworkBuyNativeTokenSupported } from '../Ramp/utils';
+import { isNetworkRampNativeTokenSupported } from '../Ramp/common/utils';
 import { getRampNetworks } from '../../../reducers/fiatOrders';
-import SkeletonText from '../Ramp/components/SkeletonText';
+import SkeletonText from '../Ramp/common/components/SkeletonText';
 import InfoModal from '../../../components/UI/Swaps/components/InfoModal';
 import TransactionBlockaidBanner from '../TransactionBlockaidBanner/TransactionBlockaidBanner';
 import { regex } from '../../../../app/util/regex';
@@ -1133,7 +1133,7 @@ class ApproveTransactionReview extends PureComponent {
     /* this is kinda weird, we have to reject the transaction to collapse the modal */
     this.onCancelPress();
     try {
-      navigation.navigate('FiatOnRampAggregator');
+      navigation.navigate(Routes.RAMP.BUY);
     } catch (error) {
       Logger.error(error, 'Navigation: Error when navigating to buy ETH.');
     }
@@ -1240,7 +1240,7 @@ const mapStateToProps = (state) => ({
   activeTabUrl: getActiveTabUrl(state),
   chainId: selectChainId(state),
   tokenList: selectTokenList(state),
-  isNativeTokenBuySupported: isNetworkBuyNativeTokenSupported(
+  isNativeTokenBuySupported: isNetworkRampNativeTokenSupported(
     selectChainId(state),
     getRampNetworks(state),
   ),

app/components/UI/AssetElement/index.tsx

@@ -4,7 +4,7 @@ import { TouchableOpacity, StyleSheet, Platform } from 'react-native';
 import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
-import SkeletonText from '../Ramp/components/SkeletonText';
+import SkeletonText from '../Ramp/common/components/SkeletonText';
 import { TokenI } from '../Tokens/types';
 import generateTestId from '../../../../wdio/utils/generateTestId';
 import { getAssetTestId } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';

app/components/UI/Navbar/index.js

@@ -1458,7 +1458,7 @@ export function getSwapsQuotesNavbar(navigation, route, themeColors) {
 
 export function getFiatOnRampAggNavbar(
   navigation,
-  { title, showBack = true } = {},
+  { title, showBack = true, showCancel = true } = {},
   themeColors,
   onCancel,
 ) {
@@ -1519,19 +1519,24 @@ export function getFiatOnRampAggNavbar(
         </TouchableOpacity>
       );
     },
-    headerRight: () => (
-      <TouchableOpacity
-        onPress={() => {
-          navigation.dangerouslyGetParent()?.pop();
-          onCancel?.();
-        }}
-        style={styles.closeButton}
-        accessibilityRole="button"
-        accessible
-      >
-        <Text style={innerStyles.headerButtonText}>{navigationCancelText}</Text>
-      </TouchableOpacity>
-    ),
+    headerRight: () => {
+      if (!showCancel) return <View />;
+      return (
+        <TouchableOpacity
+          onPress={() => {
+            navigation.dangerouslyGetParent()?.pop();
+            onCancel?.();
+          }}
+          style={styles.closeButton}
+          accessibilityRole="button"
+          accessible
+        >
+          <Text style={innerStyles.headerButtonText}>
+            {navigationCancelText}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
     headerStyle: innerStyles.headerStyle,
     headerTitleStyle: innerStyles.headerTitleStyle,
   };