Skip to content

Commit

Permalink
ui(send): input group text prepend for sweeps
Browse files Browse the repository at this point in the history
  • Loading branch information
@theborakompanioni
theborakompanioni committed Dec 20, 2023
1 parent d5b5a9e commit fe66ac2
Showing 1 changed file with 54 additions and 72 deletions.
126 changes: 54 additions & 72 deletions src/components/Send/AmountInputField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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' && (
Expand Down Expand Up @@ -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' })
}}
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -253,27 +250,25 @@ 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 ? (
<rb.Placeholder as="div" animation="wave">
<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}
Expand All @@ -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>
</>
Expand Down

0 comments on commit fe66ac2

Please sign in to comment.