Merge branch 'feature/update-seed-phrase-wording' of github.com:MetaM…

…ask/metamask-mobile into feature/update-seed-phrase-wording * 'feature/update-seed-phrase-wording' of github.com:MetaMask/metamask-mobile: Fix/respect custom spend limit on dapp approve modal (#2556) updated lock files (#2614) Upgrade swaps-controller v4 (#2586) remove typo (#2613)
MetaMask · May 4, 2021 · b49c44f · b49c44f
2 parents b09ef5b + 5fc3bc9
commit b49c44f
Show file tree

Hide file tree

Showing 9 changed files with 215 additions and 193 deletions.
diff --git a/app/components/Nav/Main/index.js b/app/components/Nav/Main/index.js
@@ -57,7 +57,8 @@ import AccountApproval from '../../UI/AccountApproval';
 import ProtectYourWalletModal from '../../UI/ProtectYourWalletModal';
 import MainNavigator from './MainNavigator';
 import SkipAccountSecurityModal from '../../UI/SkipAccountSecurityModal';
-import { swapsUtils, util } from '@metamask/swaps-controller';
+import { swapsUtils } from '@metamask/swaps-controller';
+import { util } from '@metamask/controllers';
 import SwapsLiveness from '../../UI/Swaps/SwapsLiveness';
 import Analytics from '../../../core/Analytics';
 import { ANALYTICS_EVENT_OPTS } from '../../../util/analytics';
@@ -237,12 +238,12 @@ const Main = props => {
 					.div(gasEstimate)
 					.times(100)
 					.toFixed(2)}%`;
-				const quoteVsExecutionRatio = `${util
+				const quoteVsExecutionRatio = `${swapsUtils
 					.calcTokenAmount(tokensReceived || '0x0', swapTransaction.destinationTokenDecimals)
 					.div(swapTransaction.destinationAmount)
 					.times(100)
 					.toFixed(2)}%`;
-				const tokenToAmountReceived = util.calcTokenAmount(
+				const tokenToAmountReceived = swapsUtils.calcTokenAmount(
 					tokensReceived,
 					swapTransaction.destinationToken.decimals
 				);

diff --git a/app/components/UI/ApproveTransactionReview/EditPermission/index.js b/app/components/UI/ApproveTransactionReview/EditPermission/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { View, StyleSheet, TouchableOpacity, TextInput } from 'react-native';
 import { colors, fontStyles } from '../../../../styles/common';
@@ -9,6 +9,8 @@ import ConnectHeader from '../../ConnectHeader';
 import Device from '../../../../util/Device';
 import ErrorMessage from '../../../Views/SendFlow/ErrorMessage';
 
+export const MINIMUM_VALUE = '1';
+
 const styles = StyleSheet.create({
 	wrapper: {
 		paddingHorizontal: 24,
@@ -106,33 +108,41 @@ function EditPermission({
 	onPressSpendLimitCustomSelected,
 	toggleEditPermission
 }) {
-	const [approvalSet, setApprovalSet] = useState(false);
+	const [initialState] = useState({ spendLimitUnlimitedSelected, spendLimitCustomValue });
 
 	const displayErrorMessage = useMemo(
-		() => !spendLimitUnlimitedSelected && minimumSpendLimit > spendLimitCustomValue,
+		() => !spendLimitUnlimitedSelected && Number(minimumSpendLimit) > spendLimitCustomValue,
 		[spendLimitUnlimitedSelected, spendLimitCustomValue, minimumSpendLimit]
 	);
 
 	const onSetApprovalAmount = useCallback(() => {
-		setApprovalSet(true);
 		if (!spendLimitUnlimitedSelected && !spendLimitCustomValue) {
 			onPressSpendLimitUnlimitedSelected();
 		} else {
 			setApprovalAmount();
 		}
 	}, [spendLimitUnlimitedSelected, spendLimitCustomValue, onPressSpendLimitUnlimitedSelected, setApprovalAmount]);
 
-	useEffect(
-		() =>
-			function cleanup() {
-				if (!spendLimitUnlimitedSelected && !approvalSet) onPressSpendLimitUnlimitedSelected();
-			},
-		[spendLimitUnlimitedSelected, approvalSet, onPressSpendLimitUnlimitedSelected]
-	);
+	const onBackPress = useCallback(() => {
+		const { spendLimitUnlimitedSelected, spendLimitCustomValue } = initialState;
+		if (spendLimitUnlimitedSelected) {
+			onPressSpendLimitUnlimitedSelected();
+		} else {
+			onPressSpendLimitCustomSelected();
+		}
+		onSpendLimitCustomValueChange(spendLimitCustomValue);
+		toggleEditPermission();
+	}, [
+		initialState,
+		onPressSpendLimitCustomSelected,
+		onPressSpendLimitUnlimitedSelected,
+		onSpendLimitCustomValueChange,
+		toggleEditPermission
+	]);
 
 	return (
 		<View style={styles.wrapper}>
-			<ConnectHeader action={toggleEditPermission} title={strings('spend_limit_edition.title')} />
+			<ConnectHeader action={onBackPress} title={strings('spend_limit_edition.title')} />
 			<View>
 				<Text style={styles.spendLimitTitle}>{strings('spend_limit_edition.spend_limit')}</Text>
 				<Text style={styles.spendLimitSubtitle}>
@@ -225,7 +235,7 @@ function EditPermission({
 	);
 }
 EditPermission.defaultProps = {
-	minimumSpendLimit: '1'
+	minimumSpendLimit: MINIMUM_VALUE
 };
 
 EditPermission.propTypes = {