Merge pull request #6768 from BlueWallet/custom

FIX: Create button in Custom amount was pointless

loc/en.json

@@ -123,6 +123,7 @@
     "details_setAmount": "Receive with amount",
     "details_share": "Share...",
     "header": "Receive",
+    "reset": "Reset",
     "maxSats": "Maximum amount is {max} sats",
     "maxSatsFull": "Maximum amount is {max} sats or {currency}",
     "minSats": "Minimal amount is {min} sats",

screen/receive/details.js

@@ -42,12 +42,15 @@ const ReceiveDetails = () => {
   const { walletID, address } = useRoute().params;
   const { wallets, saveToDisk, sleep, isElectrumDisabled, fetchAndSaveWalletTransactions } = useStorage();
   const wallet = wallets.find(w => w.getID() === walletID);
-  const [customLabel, setCustomLabel] = useState();
-  const [customAmount, setCustomAmount] = useState();
+  const [customLabel, setCustomLabel] = useState('');
+  const [customAmount, setCustomAmount] = useState('');
   const [customUnit, setCustomUnit] = useState(BitcoinUnit.BTC);
-  const [bip21encoded, setBip21encoded] = useState();
+  const [bip21encoded, setBip21encoded] = useState('');
   const [isCustom, setIsCustom] = useState(false);
   const [isCustomModalVisible, setIsCustomModalVisible] = useState(false);
+  const [tempCustomLabel, setTempCustomLabel] = useState('');
+  const [tempCustomAmount, setTempCustomAmount] = useState('');
+  const [tempCustomUnit, setTempCustomUnit] = useState(BitcoinUnit.BTC);
   const [showPendingBalance, setShowPendingBalance] = useState(false);
   const [showConfirmedBalance, setShowConfirmedBalance] = useState(false);
   const [showAddress, setShowAddress] = useState(false);
@@ -328,59 +331,88 @@ const ReceiveDetails = () => {
   };
 
   const showCustomAmountModal = () => {
+    setTempCustomLabel(customLabel);
+    setTempCustomAmount(customAmount);
+    setTempCustomUnit(customUnit);
     setIsCustomModalVisible(true);
   };
 
   const createCustomAmountAddress = () => {
     setIsCustom(true);
     setIsCustomModalVisible(false);
-    let amount = customAmount;
-    switch (customUnit) {
+    let amount = tempCustomAmount;
+    switch (tempCustomUnit) {
       case BitcoinUnit.BTC:
         // nop
         break;
       case BitcoinUnit.SATS:
-        amount = satoshiToBTC(customAmount);
+        amount = satoshiToBTC(tempCustomAmount);
         break;
       case BitcoinUnit.LOCAL_CURRENCY:
         if (AmountInput.conversionCache[amount + BitcoinUnit.LOCAL_CURRENCY]) {
           // cache hit! we reuse old value that supposedly doesnt have rounding errors
           amount = satoshiToBTC(AmountInput.conversionCache[amount + BitcoinUnit.LOCAL_CURRENCY]);
         } else {
-          amount = fiatToBTC(customAmount);
+          amount = fiatToBTC(tempCustomAmount);
         }
         break;
     }
-    setBip21encoded(DeeplinkSchemaMatch.bip21encode(address, { amount, label: customLabel }));
+    setCustomLabel(tempCustomLabel);
+    setCustomAmount(tempCustomAmount);
+    setCustomUnit(tempCustomUnit);
+    setBip21encoded(DeeplinkSchemaMatch.bip21encode(address, { amount, label: tempCustomLabel }));
     setShowAddress(true);
   };
 
+  const resetCustomAmount = () => {
+    setTempCustomLabel('');
+    setTempCustomAmount('');
+    setTempCustomUnit(wallet.getPreferredBalanceUnit());
+    setCustomLabel();
+    setCustomAmount();
+    setCustomUnit(wallet.getPreferredBalanceUnit());
+    setBip21encoded(DeeplinkSchemaMatch.bip21encode(address));
+    setShowAddress(true);
+    setIsCustomModalVisible(false);
+  };
+
   const renderCustomAmountModal = () => {
     return (
       <BottomModal isVisible={isCustomModalVisible} onClose={dismissCustomAmountModal}>
         <KeyboardAvoidingView enabled={!Platform.isPad} behavior={Platform.OS === 'ios' ? 'position' : null}>
           <View style={[styles.modalContent, stylesHook.modalContent]}>
-            <AmountInput unit={customUnit} amount={customAmount || ''} onChangeText={setCustomAmount} onAmountUnitChange={setCustomUnit} />
+            <AmountInput
+              unit={tempCustomUnit}
+              amount={tempCustomAmount || ''}
+              onChangeText={setTempCustomAmount}
+              onAmountUnitChange={setTempCustomUnit}
+            />
             <View style={[styles.customAmount, stylesHook.customAmount]}>
               <TextInput
-                onChangeText={setCustomLabel}
+                onChangeText={setTempCustomLabel}
                 placeholderTextColor="#81868e"
                 placeholder={loc.receive.details_label}
-                value={customLabel || ''}
+                value={tempCustomLabel || ''}
                 numberOfLines={1}
                 style={[styles.customAmountText, stylesHook.customAmountText]}
                 testID="CustomAmountDescription"
               />
             </View>
             <BlueSpacing20 />
-            <View>
+            <View style={styles.modalButtonContainer}>
+              <Button
+                testID="CustomAmountResetButton"
+                style={[styles.modalButton, stylesHook.modalButton]}
+                title={loc.receive.reset}
+                onPress={resetCustomAmount}
+              />
+              <View style={styles.modalButtonSpacing} />
               <Button
                 testID="CustomAmountSaveButton"
                 style={[styles.modalButton, stylesHook.modalButton]}
                 title={loc.receive.details_create}
                 onPress={createCustomAmountAddress}
               />
-              <BlueSpacing20 />
             </View>
             <BlueSpacing20 />
           </View>
@@ -532,11 +564,16 @@ const styles = StyleSheet.create({
   },
   modalButton: {
     paddingVertical: 14,
-    paddingHorizontal: 70,
-    maxWidth: '80%',
     borderRadius: 50,
     fontWeight: '700',
   },
+  modalButtonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  modalButtonSpacing: {
+    width: 16,
+  },
   customAmountText: {
     flex: 1,
     marginHorizontal: 8,