refactor: externalize send form components (#695)

* dev: switch to kristapsks backend branch

* dev: add directSendTxFee to feature toggles

* dev: add tx_fee to DirectSendRequest

* refactor: reusable TxFeeInputField component

* refactor: move validate method of tx fee input field

* refactor(wip): split send form into reusable components

* refactor: pass loadNewWalletAddress to SendFrom

* refactor: SourceJarSelector component

* fix(ui): do not display number input as textfield on Send page

* fix(style): input groups with validation in SendForm

* build(deps): update formik from v2.2.9 to v2.4.5

* ui(send): show form feedback for source jar index value

package.json

@@ -34,7 +34,7 @@
     "@table-library/react-table-library": "^4.0.23",
     "bootstrap": "^5.3.2",
     "classnames": "^2.3.2",
-    "formik": "^2.2.9",
+    "formik": "^2.4.5",
     "i18next": "^22.0.4",
     "i18next-browser-languagedetector": "^7.0.1",
     "qrcode": "^1.5.1",

src/components/Accordion.tsx

@@ -25,7 +25,7 @@ const Accordion = ({
     <div>
       <rb.Button
         variant={settings.theme}
-        className="d-flex align-items-center bg-transparent border-0 w-100 px-0 py-2"
+        className="d-flex align-items-center bg-transparent border-0 rounded-0 w-100 px-0 py-2"
         onClick={() => setIsOpen((current) => !current)}
         disabled={disabled}
       >
@@ -50,7 +50,7 @@ const Accordion = ({
         </div>
         <Sprite symbol={`caret-${isOpen ? 'up' : 'down'}`} className="ms-1" width="20" height="20" />
       </rb.Button>
-      <hr className="m-0 pb-4 text-secondary" />
+      <div className="m-0 mb-4 border-0 border-bottom" />
       <rb.Collapse in={isOpen}>
         <div>{children}</div>
       </rb.Collapse>

src/components/Earn.module.css

@@ -20,16 +20,6 @@
   font-size: 1.2rem;
 }
 
-.earn hr {
-  border-color: rgba(222, 222, 222, 1);
-  opacity: 100%;
-}
-
-:root[data-theme='dark'] .earn hr {
-  border-color: var(--bs-gray-800);
-  opacity: 100%;
-}
-
 .offerLoader {
   height: 10rem;
   border-radius: 0.25rem;

src/components/MnemonicWordInput.tsx

@@ -15,7 +15,7 @@ const MnemonicWordInput = ({ index, value, setValue, isValid, disabled }: Mnemon
   return (
     <rb.InputGroup>
       <rb.InputGroup.Text className={styles.seedwordIndexBackup}>{index + 1}.</rb.InputGroup.Text>
-      <rb.FormControl
+      <rb.Form.Control
         type="text"
         placeholder={`${t('create_wallet.placeholder_seed_word_input')} ${index + 1}`}
         value={value}

src/components/Modal.module.css

@@ -38,8 +38,8 @@
 }
 
 .modal-footer :global .btn {
+  --bs-btn-border-color: var(--bs-border-color);
   flex-grow: 1;
   min-height: 2.8rem;
   font-weight: 500;
-  border-color: rgba(222, 222, 222, 1);
 }

src/components/PaymentConfirmModal.tsx

@@ -4,17 +4,20 @@ import * as rb from 'react-bootstrap'
 import Sprite from './Sprite'
 import Balance from './Balance'
 import { useSettings } from '../context/SettingsContext'
-import { FeeValues, useEstimatedMaxCollaboratorFee, toTxFeeValueUnit } from '../hooks/Fees'
+import { FeeValues, TxFee, useEstimatedMaxCollaboratorFee } from '../hooks/Fees'
 import { ConfirmModal, ConfirmModalProps } from './Modal'
 import styles from './PaymentConfirmModal.module.css'
 import { AmountSats } from '../libs/JmWalletApi'
 import { jarInitial } from './jars/Jar'
 import { isValidNumber } from '../utils'
 
-const feeRange: (feeValues: FeeValues) => [number, number] = (feeValues) => {
-  const feeTargetInSatsPerVByte = feeValues.tx_fees! / 1_000
+const feeRange: (txFee: TxFee, txFeeFactor: number) => [number, number] = (txFee, txFeeFactor) => {
+  if (txFee.unit !== 'sats/kilo-vbyte') {
+    throw new Error('This function can only be used with unit `sats/kilo-vbyte`')
+  }
+  const feeTargetInSatsPerVByte = txFee.value! / 1_000
   const minFeeSatsPerVByte = Math.max(1, feeTargetInSatsPerVByte)
-  const maxFeeSatsPerVByte = feeTargetInSatsPerVByte * (1 + feeValues.tx_fees_factor!)
+  const maxFeeSatsPerVByte = feeTargetInSatsPerVByte * (1 + txFeeFactor)
   return [minFeeSatsPerVByte, maxFeeSatsPerVByte]
 }
 
@@ -23,15 +26,17 @@ const useMiningFeeText = ({ feeConfigValues }: { feeConfigValues?: FeeValues })
 
   const miningFeeText = useMemo(() => {
     if (!feeConfigValues) return null
-    if (!isValidNumber(feeConfigValues.tx_fees) || !isValidNumber(feeConfigValues.tx_fees_factor)) return null
+    if (!isValidNumber(feeConfigValues.tx_fees?.value) || !isValidNumber(feeConfigValues.tx_fees_factor)) return null
 
-    const unit = toTxFeeValueUnit(feeConfigValues.tx_fees)
-    if (!unit) {
+    if (!feeConfigValues.tx_fees?.unit) {
       return null
-    } else if (unit === 'blocks') {
-      return t('send.confirm_send_modal.text_miner_fee_in_targeted_blocks', { count: feeConfigValues.tx_fees })
+    } else if (feeConfigValues.tx_fees.unit === 'blocks') {
+      return t('send.confirm_send_modal.text_miner_fee_in_targeted_blocks', { count: feeConfigValues.tx_fees.value })
     } else {
-      const [minFeeSatsPerVByte, maxFeeSatsPerVByte] = feeRange(feeConfigValues)
+      const [minFeeSatsPerVByte, maxFeeSatsPerVByte] = feeRange(
+        feeConfigValues.tx_fees,
+        feeConfigValues.tx_fees_factor!,
+      )
       const fractionDigits = 2
 
       if (minFeeSatsPerVByte.toFixed(fractionDigits) === maxFeeSatsPerVByte.toFixed(fractionDigits)) {

src/components/Receive.module.css

@@ -1,16 +1,5 @@
-.receive hr {
-  border-color: rgba(222, 222, 222, 1);
-  opacity: 100%;
-}
-
-:root[data-theme='dark'] .receive hr {
-  border-color: var(--bs-gray-800);
-  opacity: 100%;
-}
-
 .receive button {
   font-weight: 500;
-  border-color: rgba(222, 222, 222, 1);
 }
 
 .receive form input {

src/components/Send/AmountInputField.module.css

@@ -0,0 +1,13 @@
+.inputLoader {
+  height: 3.5rem;
+  border-radius: 0.25rem;
+}
+
+.input {
+  height: 3.5rem;
+  width: 100%;
+}
+
+.button {
+  font-size: 0.875rem !important;
+}