Feature: Initial Swaps amount view (#1994)

Co-authored-by: Esteban Mino <[email protected]>
MetaMask · Dec 10, 2020 · 1592cb4 · 1592cb4
1 parent 1f75597
commit 1592cb4
Show file tree

Hide file tree

Showing 23 changed files with 1,485 additions and 133 deletions.
diff --git a/app/components/Base/Keypad/rules/native.js b/app/components/Base/Keypad/rules/native.js
@@ -0,0 +1,52 @@
+const hasOneDigit = /^\d$/;
+
+function handleInput(currentAmount, inputKey) {
+	switch (inputKey) {
+		case 'PERIOD': {
+			if (currentAmount === '0') {
+				return `${currentAmount}.`;
+			}
+			if (currentAmount.includes('.')) {
+				return currentAmount;
+			}
+
+			return `${currentAmount}.`;
+		}
+		case 'BACK': {
+			if (currentAmount === '0') {
+				return currentAmount;
+			}
+			if (hasOneDigit.test(currentAmount)) {
+				return '0';
+			}
+
+			return currentAmount.slice(0, -1);
+		}
+		case '0': {
+			if (currentAmount === '0') {
+				return currentAmount;
+			}
+			return `${currentAmount}${inputKey}`;
+		}
+		case '1':
+		case '2':
+		case '3':
+		case '4':
+		case '5':
+		case '6':
+		case '7':
+		case '8':
+		case '9': {
+			if (currentAmount === '0') {
+				return inputKey;
+			}
+
+			return `${currentAmount}${inputKey}`;
+		}
+		default: {
+			return currentAmount;
+		}
+	}
+}
+
+export default handleInput;
diff --git a/app/components/Base/Keypad/rules/usd.js b/app/components/Base/Keypad/rules/usd.js
@@ -0,0 +1,64 @@
+const hasOneDigit = /^\d$/;
+const hasTwoDecimals = /^\d+\.\d{2}$/;
+const avoidZerosAsDecimals = false;
+const hasZeroAsFirstDecimal = /^\d+\.0$/;
+
+function handleUSDInput(currentAmount, inputKey) {
+	switch (inputKey) {
+		case 'PERIOD': {
+			if (currentAmount === '0') {
+				return `${currentAmount}.`;
+			}
+			if (currentAmount.includes('.')) {
+				return currentAmount;
+			}
+
+			return `${currentAmount}.`;
+		}
+		case 'BACK': {
+			if (currentAmount === '0') {
+				return currentAmount;
+			}
+			if (hasOneDigit.test(currentAmount)) {
+				return '0';
+			}
+
+			return currentAmount.slice(0, -1);
+		}
+		case '0': {
+			if (currentAmount === '0') {
+				return currentAmount;
+			}
+			if (hasTwoDecimals.test(currentAmount)) {
+				return currentAmount;
+			}
+			if (avoidZerosAsDecimals && hasZeroAsFirstDecimal.test(currentAmount)) {
+				return currentAmount;
+			}
+			return `${currentAmount}${inputKey}`;
+		}
+		case '1':
+		case '2':
+		case '3':
+		case '4':
+		case '5':
+		case '6':
+		case '7':
+		case '8':
+		case '9': {
+			if (currentAmount === '0') {
+				return inputKey;
+			}
+			if (hasTwoDecimals.test(currentAmount)) {
+				return currentAmount;
+			}
+
+			return `${currentAmount}${inputKey}`;
+		}
+		default: {
+			return currentAmount;
+		}
+	}
+}
+
+export default handleUSDInput;
diff --git a/app/components/Base/ListItem.js b/app/components/Base/ListItem.js
@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, View } from 'react-native';
-import Device from '../../util/Device';
+// import Device from '../../util/Device';
 import { colors, fontStyles } from '../../styles/common';
 import Text from './Text';
 
 const styles = StyleSheet.create({
 	wrapper: {
-		padding: 15,
-		minHeight: Device.isIos() ? 95 : 100
+		padding: 15
+		// TODO(wachunei): check if this can be removed without breaking anything
+		// minHeight: Device.isIos() ? 55 : 100
 	},
 	date: {
 		color: colors.fontSecondary,
@@ -17,7 +18,8 @@ const styles = StyleSheet.create({
 		...fontStyles.normal
 	},
 	content: {
-		flexDirection: 'row'
+		flexDirection: 'row',
+		alignItems: 'center'
 	},
 	actions: {
 		flexDirection: 'row',

diff --git a/app/components/Base/ModalDragger.js b/app/components/Base/ModalDragger.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { colors } from '../../styles/common';
+import Device from '../../util/Device';
+
+const styles = StyleSheet.create({
+	draggerWrapper: {
+		width: '100%',
+		height: 33,
+		alignItems: 'center',
+		justifyContent: 'center',
+		borderBottomWidth: StyleSheet.hairlineWidth,
+		borderColor: colors.grey100
+	},
+	dragger: {
+		width: 48,
+		height: 5,
+		borderRadius: 4,
+		backgroundColor: colors.grey400,
+		opacity: Device.isAndroid() ? 0.6 : 0.5
+	}
+});
+
+function ModalDragger() {
+	return (
+		<View style={styles.draggerWrapper}>
+			<View style={styles.dragger} />
+		</View>
+	);
+}
+
+export default ModalDragger;
diff --git a/app/components/Base/ModalHandler.js b/app/components/Base/ModalHandler.js
@@ -1,11 +1,7 @@
-import { useState } from 'react';
+import useModalHandler from './hooks/useModalHandler';
 
 function ModalHandler({ children }) {
-	const [isVisible, setVisible] = useState(false);
-
-	const showModal = () => setVisible(true);
-	const hideModal = () => setVisible(true);
-	const toggleModal = () => setVisible(!isVisible);
+	const [isVisible, toggleModal, showModal, hideModal] = useModalHandler(false);
 
 	if (typeof children === 'function') {
 		return children({ isVisible, toggleModal, showModal, hideModal });

diff --git a/app/components/Base/hooks/useModalHandler.js b/app/components/Base/hooks/useModalHandler.js
@@ -0,0 +1,11 @@
+import { useState } from 'react';
+function useModalHandler(initialState = false) {
+	const [isVisible, setVisible] = useState(initialState);
+
+	const showModal = () => setVisible(true);
+	const hideModal = () => setVisible(true);
+	const toggleModal = () => setVisible(!isVisible);
+
+	return [isVisible, toggleModal, showModal, hideModal];
+}
+export default useModalHandler;
diff --git a/app/components/UI/FiatOrders/PaymentMethodApplePay/index.js b/app/components/UI/FiatOrders/PaymentMethodApplePay/index.js
@@ -9,6 +9,7 @@ import Logger from '../../../../util/Logger';
 import { setLockTime } from '../../../../actions/settings';
 import { strings } from '../../../../../locales/i18n';
 import { getNotificationDetails } from '..';
+import handleUSDInput from '../../../Base/Keypad/rules/usd';
 
 import {
 	useWyreTerms,
@@ -129,73 +130,9 @@ const quickAmounts = ['50', '100', '250'];
 const minAmount = 50;
 const maxAmount = 250;
 
-const hasTwoDecimals = /^\d+\.\d{2}$/;
 const hasZeroAsFirstDecimal = /^\d+\.0$/;
 const hasZerosAsDecimals = /^\d+\.00$/;
-const hasOneDigit = /^\d$/;
 const hasPeriodWithoutDecimal = /^\d+\.$/;
-const avoidZerosAsDecimals = false;
-
-//* Handlers
-
-const handleNewAmountInput = (currentAmount, newInput) => {
-	switch (newInput) {
-		case 'PERIOD': {
-			if (currentAmount === '0') {
-				return `${currentAmount}.`;
-			}
-			if (currentAmount.includes('.')) {
-				// TODO: throw error for feedback?
-				return currentAmount;
-			}
-
-			return `${currentAmount}.`;
-		}
-		case 'BACK': {
-			if (currentAmount === '0') {
-				return currentAmount;
-			}
-			if (hasOneDigit.test(currentAmount)) {
-				return '0';
-			}
-
-			return currentAmount.slice(0, -1);
-		}
-		case '0': {
-			if (currentAmount === '0') {
-				return currentAmount;
-			}
-			if (hasTwoDecimals.test(currentAmount)) {
-				return currentAmount;
-			}
-			if (avoidZerosAsDecimals && hasZeroAsFirstDecimal.test(currentAmount)) {
-				return currentAmount;
-			}
-			return `${currentAmount}${newInput}`;
-		}
-		case '1':
-		case '2':
-		case '3':
-		case '4':
-		case '5':
-		case '6':
-		case '7':
-		case '8':
-		case '9': {
-			if (currentAmount === '0') {
-				return newInput;
-			}
-			if (hasTwoDecimals.test(currentAmount)) {
-				return currentAmount;
-			}
-
-			return `${currentAmount}${newInput}`;
-		}
-		default: {
-			return currentAmount;
-		}
-	}
-};
 
 function PaymentMethodApplePay({
 	lockTime,
@@ -258,7 +195,7 @@ function PaymentMethodApplePay({
 			if (isOverMaximum && newInput !== 'BACK') {
 				return;
 			}
-			const newAmount = handleNewAmountInput(amount, newInput);
+			const newAmount = handleUSDInput(amount, newInput);
 			if (newAmount === amount) {
 				return;
 			}

diff --git a/app/components/UI/ReceiveRequest/__snapshots__/index.test.js.snap b/app/components/UI/ReceiveRequest/__snapshots__/index.test.js.snap
@@ -10,30 +10,7 @@ exports[`ReceiveRequest should render correctly 1`] = `
     }
   }
 >
-  <View
-    style={
-      Object {
-        "alignItems": "center",
-        "borderBottomWidth": 0.5,
-        "borderColor": "#d6d9dc",
-        "height": 33,
-        "justifyContent": "center",
-        "width": "100%",
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "backgroundColor": "#848c96",
-          "borderRadius": 4,
-          "height": 5,
-          "opacity": 0.5,
-          "width": 48,
-        }
-      }
-    />
-  </View>
+  <ModalDragger />
   <View
     style={
       Object {

diff --git a/app/components/UI/ReceiveRequest/index.js b/app/components/UI/ReceiveRequest/index.js
@@ -22,6 +22,7 @@ import { protectWalletModalVisible } from '../../../actions/user';
 import { colors, fontStyles } from '../../../styles/common';
 import Text from '../../Base/Text';
 import ModalHandler from '../../Base/ModalHandler';
+import ModalDragger from '../../Base/ModalDragger';
 import AddressQRCode from '../../Views/AddressQRCode';
 import EthereumAddress from '../EthereumAddress';
 import GlobalAlert from '../GlobalAlert';
@@ -33,21 +34,6 @@ const styles = StyleSheet.create({
 		borderTopLeftRadius: 10,
 		borderTopRightRadius: 10
 	},
-	draggerWrapper: {
-		width: '100%',
-		height: 33,
-		alignItems: 'center',
-		justifyContent: 'center',
-		borderBottomWidth: StyleSheet.hairlineWidth,
-		borderColor: colors.grey100
-	},
-	dragger: {
-		width: 48,
-		height: 5,
-		borderRadius: 4,
-		backgroundColor: colors.grey400,
-		opacity: Device.isAndroid() ? 0.6 : 0.5
-	},
 	body: {
 		alignItems: 'center',
 		paddingHorizontal: 15
@@ -222,9 +208,7 @@ class ReceiveRequest extends PureComponent {
 	render() {
 		return (
 			<SafeAreaView style={styles.wrapper}>
-				<View style={styles.draggerWrapper}>
-					<View style={styles.dragger} />
-				</View>
+				<ModalDragger />
 				<View style={styles.titleWrapper}>
 					<Text style={styles.title} testID={'receive-request-screen'}>
 						{strings('receive_request.title')}