From a803ded0a20e84aa339d0777df0e2d8e42058a39 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Thu, 30 Nov 2023 22:51:39 +0100
Subject: [PATCH] chore(fee): improve fee config modal handling

---
 src/components/settings/FeeConfigModal.tsx  | 102 ++++++++++----------
 src/components/settings/TxFeeInputField.tsx |  12 +--
 2 files changed, 55 insertions(+), 59 deletions(-)

diff --git a/src/components/settings/FeeConfigModal.tsx b/src/components/settings/FeeConfigModal.tsx
index 8dee42ed..50960daa 100644
--- a/src/components/settings/FeeConfigModal.tsx
+++ b/src/components/settings/FeeConfigModal.tsx
@@ -45,8 +45,8 @@ type FeeFormValues = FeeValues & {
 
 interface FeeConfigFormProps {
   initialValues: FeeFormValues
-  validate: (values: FeeValues) => FormikErrors<FeeValues>
-  onSubmit: (values: FeeValues) => void
+  validate: (values: FeeFormValues) => FormikErrors<FeeFormValues>
+  onSubmit: (values: FeeFormValues) => void
   defaultActiveSectionKey?: FeeConfigSectionKey
 }
 
@@ -247,13 +247,13 @@ export default function FeeConfigModal({
   const loadFeeConfigValues = useLoadFeeConfigValues()
   const [isLoading, setIsLoading] = useState(true)
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const [loadError, setLoadError] = useState(false)
+  const [loadError, setLoadError] = useState<any>()
   const [saveErrorMessage, setSaveErrorMessage] = useState<string>()
-  const [feeFormValues, setFeeFormValues] = useState<FeeFormValues | null>(null)
+  const [feeFormValues, setFeeFormValues] = useState<FeeFormValues>()
   const formRef = useRef<FormikProps<FeeFormValues>>(null)
 
   useEffect(() => {
-    setLoadError(false)
+    setLoadError(undefined)
 
     const abortCtrl = new AbortController()
     if (show) {
@@ -265,10 +265,10 @@ export default function FeeConfigModal({
           setIsLoading(false)
           setFeeFormValues(val)
         })
-        .catch((e) => {
+        .catch((error) => {
           if (abortCtrl.signal.aborted) return
           setIsLoading(false)
-          setLoadError(true)
+          setLoadError(error)
         })
     } else {
       setSaveErrorMessage(undefined)
@@ -279,48 +279,6 @@ export default function FeeConfigModal({
     }
   }, [show, loadFeeConfigValues])
 
-  const submit = async (feeValues: FeeValues) => {
-    const allValuesPresent = Object.values(feeValues).every((it) => it !== undefined)
-    if (!allValuesPresent) return
-    if (feeValues.tx_fees?.value === undefined) return
-
-    const updates = [
-      {
-        key: FEE_CONFIG_KEYS.tx_fees,
-        value: String(feeValues.tx_fees?.value!),
-      },
-      {
-        key: FEE_CONFIG_KEYS.tx_fees_factor,
-        value: String(feeValues.tx_fees_factor),
-      },
-      {
-        key: FEE_CONFIG_KEYS.max_cj_fee_abs,
-        value: String(feeValues.max_cj_fee_abs),
-      },
-      {
-        key: FEE_CONFIG_KEYS.max_cj_fee_rel,
-        value: String(feeValues.max_cj_fee_rel),
-      },
-    ]
-
-    setSaveErrorMessage(undefined)
-    setIsSubmitting(true)
-    try {
-      await updateConfigValues({ updates })
-
-      setIsSubmitting(false)
-      onSuccess && onSuccess()
-      onHide()
-    } catch (err: any) {
-      setIsSubmitting(false)
-      setSaveErrorMessage((_) =>
-        t('settings.fees.error_saving_fee_config_failed', {
-          reason: err.message || t('global.errors.reason_unknown'),
-        }),
-      )
-    }
-  }
-
   const validate = useCallback(
     (values: FeeFormValues) => {
       const errors = {} as FormikErrors<FeeValues>
@@ -373,6 +331,44 @@ export default function FeeConfigModal({
     [t],
   )
 
+  const submit = async (values: FeeFormValues) => {
+    const updates = [
+      {
+        key: FEE_CONFIG_KEYS.tx_fees,
+        value: String(values.tx_fees?.value ?? ''),
+      },
+      {
+        key: FEE_CONFIG_KEYS.tx_fees_factor,
+        value: String(values.tx_fees_factor ?? ''),
+      },
+      {
+        key: FEE_CONFIG_KEYS.max_cj_fee_abs,
+        value: String(values.max_cj_fee_abs ?? ''),
+      },
+      {
+        key: FEE_CONFIG_KEYS.max_cj_fee_rel,
+        value: String(values.max_cj_fee_rel ?? ''),
+      },
+    ]
+
+    setSaveErrorMessage(undefined)
+    setIsSubmitting(true)
+    try {
+      await updateConfigValues({ updates })
+
+      setIsSubmitting(false)
+      onSuccess && onSuccess()
+      onHide()
+    } catch (err: any) {
+      setIsSubmitting(false)
+      setSaveErrorMessage((_) =>
+        t('settings.fees.error_saving_fee_config_failed', {
+          reason: err.message || t('global.errors.reason_unknown'),
+        }),
+      )
+    }
+  }
+
   const cancel = useCallback(() => {
     onCancel && onCancel()
     onHide()
@@ -455,10 +451,10 @@ export default function FeeConfigModal({
               variant="outline-dark"
               className="position-relative"
               onClick={() => {
-                formRef.current?.setFieldValue('max_cj_fee_abs', '', false)
-                formRef.current?.setFieldValue('max_cj_fee_rel', '', false)
-                formRef.current?.setFieldValue('tx_fees', '', false)
-                formRef.current?.setFieldValue('tx_fees_factor', '', false)
+                formRef.current?.setFieldValue('max_cj_fee_abs', undefined, false)
+                formRef.current?.setFieldValue('max_cj_fee_rel', undefined, false)
+                formRef.current?.setFieldValue('tx_fees', undefined, false)
+                formRef.current?.setFieldValue('tx_fees_factor', undefined, false)
                 setTimeout(() => formRef.current?.validateForm(), 4)
               }}
               disabled={isLoading || isSubmitting}
diff --git a/src/components/settings/TxFeeInputField.tsx b/src/components/settings/TxFeeInputField.tsx
index 9128a9ae..344d68ed 100644
--- a/src/components/settings/TxFeeInputField.tsx
+++ b/src/components/settings/TxFeeInputField.tsx
@@ -61,7 +61,7 @@ export const validateTxFee = (val: TxFee | undefined, t: TFunction): FormikError
   return errors
 }
 
-type TxFeeInputFieldProps = FieldProps<TxFee> & {
+type TxFeeInputFieldProps = FieldProps<TxFee | undefined> & {
   label: string
 }
 
@@ -110,13 +110,13 @@ export const TxFeeInputField = ({ field, form, label }: TxFeeInputFieldProps) =>
               }
             }
           }}
-          initialValue={field.value.unit}
+          initialValue={field.value?.unit || 'blocks'}
           disabled={form.isSubmitting}
         />
       </rb.Form.Group>
       <rb.Form.Text className="d-block mb-2">
         {t(
-          field.value.unit === 'sats/kilo-vbyte'
+          field.value?.unit === 'sats/kilo-vbyte'
             ? 'settings.fees.description_tx_fees_satspervbyte'
             : 'settings.fees.description_tx_fees_blocks',
         )}
@@ -124,7 +124,7 @@ export const TxFeeInputField = ({ field, form, label }: TxFeeInputFieldProps) =>
       <rb.Form.Group controlId="tx_fees" className="mb-4">
         <rb.InputGroup hasValidation>
           <rb.InputGroup.Text id="txFees-addon1">
-            {field.value.unit === 'sats/kilo-vbyte' ? (
+            {field.value?.unit === 'sats/kilo-vbyte' ? (
               <>
                 <Sprite symbol="sats" width="24" height="24" />/ vB
               </>
@@ -133,7 +133,7 @@ export const TxFeeInputField = ({ field, form, label }: TxFeeInputFieldProps) =>
             )}
           </rb.InputGroup.Text>
 
-          {field.value.unit === 'sats/kilo-vbyte' ? (
+          {field.value?.unit === 'sats/kilo-vbyte' ? (
             <rb.Form.Control
               aria-label={label}
               className={`slashed-zeroes`}
@@ -167,7 +167,7 @@ export const TxFeeInputField = ({ field, form, label }: TxFeeInputFieldProps) =>
               name={field.name}
               type="number"
               placeholder="1"
-              value={isValidNumber(field.value.value) ? field.value.value : ''}
+              value={isValidNumber(field.value?.value) ? field.value?.value : ''}
               disabled={form.isSubmitting}
               onBlur={field.onBlur}
               onChange={(e) => {