Feature/swaps quotes view

app/components/Base/Alert.js

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { colors } from '../../styles/common';
+import Text from './Text';
+
+const styles = StyleSheet.create({
+	base: {
+		paddingHorizontal: 12,
+		paddingVertical: 12,
+		borderWidth: 1,
+		borderRadius: 4,
+		flexDirection: 'row'
+	},
+	baseSmall: {
+		paddingVertical: 8
+	},
+	info: {
+		backgroundColor: colors.blue100,
+		borderColor: colors.blue
+	},
+	warning: {
+		backgroundColor: colors.yellow100,
+		borderColor: colors.yellow
+	},
+	error: {
+		backgroundColor: colors.red000,
+		borderColor: colors.red
+	},
+	textInfo: { color: colors.blue },
+	textWarning: { color: colors.yellow700 },
+	textError: { color: colors.red },
+	textIconStyle: { marginRight: 12 },
+	iconWrapper: {
+		alignItems: 'center'
+	}
+});
+
+function getStyles(type) {
+	switch (type) {
+		case 'warning': {
+			return [styles.warning, styles.textWarning];
+		}
+		case 'error': {
+			return [styles.error, styles.textError];
+		}
+		case 'info':
+		default: {
+			return [styles.info, styles.textInfo];
+		}
+	}
+}
+
+function Alert({ type = 'info', small, renderIcon, style, onPress, children, ...props }) {
+	const [wrapperStyle, textStyle] = useMemo(() => getStyles(type), [type]);
+
+	const Wrapper = onPress ? TouchableOpacity : View;
+	return (
+		<Wrapper style={[styles.base, small && styles.baseSmall, wrapperStyle, style]} onPress={onPress} {...props}>
+			{renderIcon && typeof renderIcon === 'function' && <View style={styles.iconWrapper}>{renderIcon()}</View>}
+			{typeof children === 'function' ? (
+				children(textStyle)
+			) : (
+				<Text small={small} style={[textStyle, !!renderIcon && styles.textIconStyle]}>
+					{children}
+				</Text>
+			)}
+		</Wrapper>
+	);
+}
+
+Alert.propTypes = {
+	type: PropTypes.oneOf(['info', 'warning', 'error']),
+	style: PropTypes.object,
+	small: PropTypes.bool,
+	renderIcon: PropTypes.func,
+	onPress: PropTypes.func,
+	children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};
+
+export default Alert;

app/components/Base/hooks/useModalHandler.js

@@ -1,10 +1,24 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+
+/**
+ * @typedef {Boolean} isVisible boolean value that represent wether the modal is visible or not
+ * @typedef {Function} toggleModal function that toggles the isVisible boolean value
+ * @typedef {Function} showModal function that sets isVisible boolean to true
+ * @typedef {Function} hideModal function that sets isVisible boolean to false
+ * @typedef {[isVisible, toggleModal, showModal, hideModal]} Handlers
+ */
+
+/**
+ * Hook to handle modal visibility state
+ * @param {Boolean} initialState Initial state of the modal, if true modal will be visible
+ * @return {Handlers} Handlers `[isVisible, toggleModal, showModal, hideModal]`
+ */
 function useModalHandler(initialState = false) {
 	const [isVisible, setVisible] = useState(initialState);
 
-	const showModal = () => setVisible(true);
-	const hideModal = () => setVisible(true);
-	const toggleModal = () => setVisible(!isVisible);
+	const showModal = useCallback(() => setVisible(true), []);
+	const hideModal = useCallback(() => setVisible(false), []);
+	const toggleModal = useCallback(() => setVisible(visible => !visible), []);
 
 	return [isVisible, toggleModal, showModal, hideModal];
 }

app/components/Nav/Main/MainNavigator.js

@@ -50,6 +50,7 @@ import PaymentMethodApplePay from '../../UI/FiatOrders/PaymentMethodApplePay';
 import TransakWebView from '../../UI/FiatOrders/TransakWebView';
 import ActivityView from '../../Views/ActivityView';
 import SwapsAmountView from '../../UI/Swaps';
+import SwapsQuotesView from '../../UI/Swaps/QuotesView';
 
 const styles = StyleSheet.create({
 	headerLogo: {
@@ -275,7 +276,8 @@ export default createStackNavigator(
 		},
 		Swaps: {
 			screen: createStackNavigator({
-				SwapsAmountView: { screen: SwapsAmountView }
+				SwapsAmountView: { screen: SwapsAmountView },
+				SwapsQuotesView: { screen: SwapsQuotesView }
 			})
 		},
 		SetPasswordFlow: {

app/components/Nav/Main/__snapshots__/index.test.js.snap

@@ -251,6 +251,7 @@ exports[`Main should render correctly 1`] = `
             "Swaps": Object {
               "childRouters": Object {
                 "SwapsAmountView": null,
+                "SwapsQuotesView": null,
               },
               "getActionCreators": [Function],
               "getActionForPathAndParams": [Function],
@@ -585,6 +586,7 @@ exports[`Main should render correctly 1`] = `
               "Swaps": Object {
                 "childRouters": Object {
                   "SwapsAmountView": null,
+                  "SwapsQuotesView": null,
                 },
                 "getActionCreators": [Function],
                 "getActionForPathAndParams": [Function],

app/components/Nav/Main/index.js

@@ -38,7 +38,8 @@ import {
 	getMethodData,
 	TOKEN_METHOD_TRANSFER,
 	decodeTransferData,
-	APPROVE_FUNCTION_SIGNATURE
+	APPROVE_FUNCTION_SIGNATURE,
+	decodeApproveData
 } from '../../../util/transactions';
 import { BN, isValidAddress } from 'ethereumjs-util';
 import { isENS, safeToChecksumAddress } from '../../../util/address';
@@ -61,6 +62,7 @@ import ProtectYourWalletModal from '../../UI/ProtectYourWalletModal';
 import MainNavigator from './MainNavigator';
 import PaymentChannelApproval from '../../UI/PaymentChannelApproval';
 import SkipAccountSecurityModal from '../../UI/SkipAccountSecurityModal';
+import { swapsUtils } from '@estebanmino/controllers';
 
 const styles = StyleSheet.create({
 	flex: {
@@ -194,14 +196,51 @@ const Main = props => {
 		[props.navigation, props.transactions]
 	);
 
+	const autoSign = useCallback(
+		async transactionMeta => {
+			const { TransactionController } = Engine.context;
+			try {
+				TransactionController.hub.once(`${transactionMeta.id}:finished`, transactionMeta => {
+					if (transactionMeta.status === 'submitted') {
+						props.navigation.pop();
+						NotificationManager.watchSubmittedTransaction({
+							...transactionMeta,
+							assetType: transactionMeta.transaction.assetType
+						});
+					} else {
+						throw transactionMeta.error;
+					}
+				});
+				await TransactionController.approveTransaction(transactionMeta.id);
+			} catch (error) {
+				Alert.alert(strings('transactions.transaction_error'), error && error.message, [
+					{ text: strings('navigation.ok') }
+				]);
+				Logger.error(error, 'error while trying to send transaction (Main)');
+			}
+		},
+		[props.navigation]
+	);
+
 	const onUnapprovedTransaction = useCallback(
 		async transactionMeta => {
 			if (transactionMeta.origin === TransactionTypes.MMM) return;
 
 			const to = safeToChecksumAddress(transactionMeta.transaction.to);
 			const networkId = Networks[props.providerType].networkId;
+			const { data } = transactionMeta.transaction;
+
+			// if approval data includes metaswap contract
+			// if destination address is metaswap contract
 
 			if (
+				to === safeToChecksumAddress(swapsUtils.SWAPS_CONTRACT_ADDRESS) ||
+				(data &&
+					data.substr(0, 10) === APPROVE_FUNCTION_SIGNATURE &&
+					decodeApproveData(data).spenderAddress === swapsUtils.SWAPS_CONTRACT_ADDRESS)
+			) {
+				autoSign(transactionMeta);
+			} else if (
 				props.paymentChannelsEnabled &&
 				AppConstants.CONNEXT.SUPPORTED_NETWORKS.includes(props.providerType) &&
 				transactionMeta.transaction.data &&
@@ -279,7 +318,8 @@ const Main = props => {
 			setEtherTransaction,
 			setTransactionObject,
 			toggleApproveModal,
-			toggleDappTransactionModal
+			toggleDappTransactionModal,
+			autoSign
 		]
 	);
 

app/components/UI/Navbar/index.js

@@ -902,3 +902,28 @@ export function getSwapsAmountNavbar(navigation) {
 		)
 	};
 }
+export function getSwapsQuotesNavbar(navigation) {
+	const title = navigation.getParam('title', 'Swaps');
+	const rightAction = navigation.dismiss;
+
+	return {
+		headerTitle: <NavbarTitle title={title} disableNetwork translate={false} />,
+		headerLeft: Device.isAndroid() ? (
+			// eslint-disable-next-line react/jsx-no-bind
+			<TouchableOpacity onPress={() => navigation.pop()} style={styles.backButton}>
+				<IonicIcon name={'md-arrow-back'} size={24} style={styles.backIcon} />
+			</TouchableOpacity>
+		) : (
+			// eslint-disable-next-line react/jsx-no-bind
+			<TouchableOpacity onPress={() => navigation.pop()} style={styles.closeButton}>
+				<Text style={styles.closeButtonText}>{strings('navigation.back')}</Text>
+			</TouchableOpacity>
+		),
+		headerRight: (
+			// eslint-disable-next-line react/jsx-no-bind
+			<TouchableOpacity onPress={rightAction} style={styles.closeButton}>
+				<Text style={styles.closeButtonText}>{strings('navigation.cancel')}</Text>
+			</TouchableOpacity>
+		)
+	};
+}