From fe66ac244c0bcc8e1a25c9b72572af6ed3762628 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Wed, 20 Dec 2023 17:38:03 +0100
Subject: [PATCH] ui(send): input group text prepend for sweeps

---
 src/components/Send/AmountInputField.tsx | 126 ++++++++++-------------
 1 file changed, 54 insertions(+), 72 deletions(-)

diff --git a/src/components/Send/AmountInputField.tsx b/src/components/Send/AmountInputField.tsx
index f043ebb0..555a1deb 100644
--- a/src/components/Send/AmountInputField.tsx
+++ b/src/components/Send/AmountInputField.tsx
@@ -6,7 +6,7 @@ import { FieldInputProps, FormikContextType, useField, useFormikContext } from '
 import * as Api from '../../libs/JmWalletApi'
 import Sprite from '../Sprite'
 import { AccountBalanceSummary } from '../../context/BalanceSummary'
-import { formatBtc, isValidNumber, noop, satsToBtc } from '../../utils'
+import { formatBtc, isValidNumber, satsToBtc } from '../../utils'
 import styles from './AmountInputField.module.css'
 
 export type AmountValue = {
@@ -71,18 +71,16 @@ const UniversalBitcoinInput = forwardRef(
       <>
         <rb.InputGroup hasValidation={true}>
           {!enableInputUnitToggle ? (
-            <>
-              <rb.InputGroup.Text id="amountSats-addon1" className={styles.inputGroupText}>
-                {inputType.type === 'number' ? (
-                  <>
-                    {displayInputUnit === 'sats' && <Sprite symbol="sats" width="24" height="24" />}
-                    {displayInputUnit === 'BTC' && <span className="fw-bold">{'\u20BF'}</span>}
-                  </>
-                ) : (
-                  <>{field.value?.displayValue && <span className="fw-bold">{'\u20BF'}</span>}</>
-                )}
-              </rb.InputGroup.Text>
-            </>
+            <rb.InputGroup.Text className={styles.inputGroupText}>
+              {inputType.type === 'number' ? (
+                <>
+                  {displayInputUnit === 'sats' && <Sprite symbol="sats" width="24" height="24" />}
+                  {displayInputUnit === 'BTC' && <span className="fw-bold">{'\u20BF'}</span>}
+                </>
+              ) : (
+                <>{field.value?.displayValue ? <span className="fw-bold">{'\u20BF'}</span> : '…'}</>
+              )}
+            </rb.InputGroup.Text>
           ) : (
             <>
               {inputType.type === 'number' && (
@@ -144,9 +142,11 @@ const UniversalBitcoinInput = forwardRef(
               inputType.type === 'text' ? field.value?.displayValue ?? '' : String(field.value?.userRawInputValue ?? '')
             }
             placeholder={placeholder}
-            required
             min={displayInputUnit === 'sats' ? '1' : '0.00000001'}
             step={displayInputUnit === 'sats' ? '1' : '0.00000001'}
+            isInvalid={form.touched[field.name] && !!form.errors[field.name]}
+            disabled={disabled}
+            required
             onFocus={() => {
               setInputType({ type: 'number' })
             }}
@@ -208,14 +208,11 @@ const UniversalBitcoinInput = forwardRef(
                     userRawInputValue: e.target.value,
                     userSelectedInputUnit: field.value?.userSelectedInputUnit,
                     displayValue: e.target.value,
-                    fromJar: null,
                   },
                   true,
                 )
               }
             }}
-            isInvalid={form.touched[field.name] && !!form.errors[field.name]}
-            disabled={disabled}
           />
           {children}
           <rb.Form.Control.Feedback type="invalid">
@@ -253,7 +250,7 @@ export const AmountInputField = ({
 
   return (
     <>
-      <rb.Form.Group className="mb-4" controlId="amount">
+      <rb.Form.Group className="mb-4" controlId={name}>
         <rb.Form.Label>{label}</rb.Form.Label>
 
         {isLoading ? (
@@ -261,19 +258,17 @@ export const AmountInputField = ({
             <rb.Placeholder xs={12} className={styles.inputLoader} />
           </rb.Placeholder>
         ) : (
-          <>
-            {field.value?.isSweep === true ? (
-              <rb.InputGroup hasValidation={false}>
-                <rb.Form.Control
-                  aria-label={label}
-                  name={field.name}
-                  className={classNames('slashed-zeroes', styles.input, className)}
-                  value={field.value?.displayValue || ''}
-                  required
-                  onChange={noop}
-                  disabled={true}
-                  readOnly={true}
-                />
+          <div className={form.touched[field.name] && !!form.errors[field.name] ? 'is-invalid' : ''}>
+            <UniversalBitcoinInput
+              ref={ref}
+              className={className}
+              label={label}
+              placeholder={t('send.placeholder_amount')}
+              field={field}
+              form={form}
+              disabled={disabled || field.value?.isSweep}
+            >
+              {field.value?.isSweep === true && (
                 <rb.Button
                   variant="dark"
                   className={styles.button}
@@ -288,48 +283,35 @@ export const AmountInputField = ({
                     <>{t('send.button_clear_sweep')}</>
                   </div>
                 </rb.Button>
-              </rb.InputGroup>
-            ) : (
-              <div className={form.touched[field.name] && !!form.errors[field.name] ? 'is-invalid' : ''}>
-                <UniversalBitcoinInput
-                  ref={ref}
-                  className={className}
-                  label={label}
-                  placeholder={t('send.placeholder_amount')}
-                  field={field}
-                  form={form}
-                  disabled={disabled}
+              )}
+              {enableSweep && field.value?.isSweep !== true && (
+                <rb.Button
+                  variant="outline-dark"
+                  className={classNames(styles.button, {
+                    'cursor-not-allowed': !sourceJarBalance,
+                  })}
+                  onClick={() => {
+                    if (!sourceJarBalance) return
+                    form.setFieldValue(
+                      field.name,
+                      {
+                        value: 0,
+                        isSweep: true,
+                        displayValue: formatBtcDisplayValue(sourceJarBalance.calculatedAvailableBalanceInSats),
+                      },
+                      true,
+                    )
+                  }}
+                  disabled={disabled || !sourceJarBalance}
                 >
-                  {enableSweep && (
-                    <rb.Button
-                      variant="outline-dark"
-                      className={classNames(styles.button, {
-                        'cursor-not-allowed': !sourceJarBalance,
-                      })}
-                      onClick={() => {
-                        if (!sourceJarBalance) return
-                        form.setFieldValue(
-                          field.name,
-                          {
-                            value: 0,
-                            isSweep: true,
-                            displayValue: formatBtcDisplayValue(sourceJarBalance.calculatedAvailableBalanceInSats),
-                          },
-                          true,
-                        )
-                      }}
-                      disabled={disabled || !sourceJarBalance}
-                    >
-                      <div className="d-flex justify-content-center align-items-center">
-                        <Sprite symbol="sweep" width="24px" height="24px" className="me-1" />
-                        {t('send.button_sweep')}
-                      </div>
-                    </rb.Button>
-                  )}
-                </UniversalBitcoinInput>
-              </div>
-            )}
-          </>
+                  <div className="d-flex justify-content-center align-items-center">
+                    <Sprite symbol="sweep" width="24px" height="24px" className="me-1" />
+                    {t('send.button_sweep')}
+                  </div>
+                </rb.Button>
+              )}
+            </UniversalBitcoinInput>
+          </div>
         )}
       </rb.Form.Group>
     </>