Feature/swaps quotes view

.circleci/config.yml

@@ -176,12 +176,14 @@ workflows:
               only:
                 - master
                 - develop
+                - feature/swaps-quotes-view
       - prep-node-deps:
           filters:
             branches:
               ignore:
                 - master
                 - develop
+                - feature/swaps-quotes-view
       - lint:
           requires:
             - prep-node-deps

android/app/build.gradle

@@ -166,8 +166,8 @@ android {
 		applicationId "io.metamask"
 		minSdkVersion rootProject.ext.minSdkVersion
 		targetSdkVersion rootProject.ext.targetSdkVersion
-		versionCode 41
-		versionName "1.0.8"
+		versionCode 42
+		versionName "1.0.9"
 		multiDexEnabled true
 		testBuildType System.getProperty('testBuildType', 'debug')
 		missingDimensionStrategy "minReactNative", "minReactNative46"

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

@@ -888,7 +888,7 @@ export function getTransakWebviewNavbar(navigation) {
 }
 
 export function getSwapsAmountNavbar(navigation) {
-	const title = navigation.getParam('title', 'Swaps');
+	const title = navigation.getParam('title', 'Swap');
 	const rightAction = navigation.dismiss;
 
 	return {
@@ -902,3 +902,29 @@ export function getSwapsAmountNavbar(navigation) {
 		)
 	};
 }
+export function getSwapsQuotesNavbar(navigation) {
+	const title = navigation.getParam('title', 'Swap');
+	const rightAction = navigation.dismiss;
+	const leftAction = navigation.getParam('leftAction', strings('navigation.back'));
+
+	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}>{leftAction}</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>
+		)
+	};
+}

app/components/UI/SliderButton/__snapshots__/index.test.js.snap

@@ -0,0 +1,182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SliderButton should render correctly 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "elevation": 0,
+        "shadowColor": "#75C4FD",
+        "shadowOffset": Object {
+          "height": 3,
+          "width": 0,
+        },
+        "shadowOpacity": 0.5,
+        "shadowRadius": 8,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#0074C8",
+        "borderRadius": 60,
+        "height": 60,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "position": "relative",
+        "width": "100%",
+      }
+    }
+  >
+    <Image
+      resizeMode="stretch"
+      source={
+        Object {
+          "testUri": "../../../app/components/UI/SliderButton/assets/slider_button_gradient.png",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "height": "100%",
+            "position": "absolute",
+            "width": "100%",
+          },
+          false,
+        ]
+      }
+    />
+    <ForwardRef(AnimatedComponentWrapper)
+      resizeMode="contain"
+      source={
+        Object {
+          "testUri": "../../../app/components/UI/SliderButton/assets/slider_button_shine.png",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "height": "200%",
+            "left": 0,
+            "position": "absolute",
+          },
+          Object {
+            "opacity": 1,
+            "transform": Array [
+              Object {
+                "translateX": -142,
+              },
+            ],
+          },
+        ]
+      }
+    />
+    <ForwardRef(AnimatedComponentWrapper)
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#FFFFFF",
+            "fontFamily": "EuclidCircularB-Regular",
+            "fontSize": 16,
+            "fontWeight": "400",
+          }
+        }
+      >
+        Incomplete Text
+      </Text>
+    </ForwardRef(AnimatedComponentWrapper)>
+  </View>
+  <ForwardRef(AnimatedComponentWrapper)
+    style={
+      Array [
+        Object {
+          "borderRadius": 60,
+          "height": "100%",
+          "overflow": "hidden",
+          "position": "absolute",
+        },
+        Object {
+          "backgroundColor": "rgba(2, 96, 164, 1)",
+          "width": 60,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "height": "100%",
+            "justifyContent": "center",
+            "position": "absolute",
+            "width": "100%",
+          },
+          Object {
+            "width": 0,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#FFFFFF",
+            "fontFamily": "EuclidCircularB-Regular",
+            "fontSize": 16,
+            "fontWeight": "400",
+          }
+        }
+      >
+        Complete Text
+      </Text>
+    </View>
+  </ForwardRef(AnimatedComponentWrapper)>
+  <ForwardRef(AnimatedComponentWrapper)
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderColor": "#0260A4",
+          "borderRadius": 60,
+          "borderWidth": 9.6,
+          "height": 60,
+          "position": "absolute",
+          "width": 60,
+        },
+        Object {
+          "opacity": 1,
+          "transform": Array [
+            Object {
+              "translateX": 0,
+            },
+          ],
+        },
+      ]
+    }
+  />
+</View>
+`;