Fix/respect custom spend limit on dapp approve modal (#2556)

* Add better initial state reset for permission edit modal

* Use spendLimitCustomValue for allowance

* minimumSpendLimit 1

* Remove minimumSpendLimit prop

* Get minimumSpendLimit from EditPermission component

* Add MINIMUM_VALUE const

* use export const

* Coerce minimumSpendLimit to number

* Log error

* Remove callback from initialState

Co-authored-by: Pedro Pablo Aste Kompen <wachunei@gmail.com>

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 = {