GlcoinCore/jam
1
0
Fork 0
mirror of https://github.com/joinmarket-webui/jam.git synced 2026-08-19 13:18:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refactor(v2): mining fee form class names and icons

Browse source
This commit is contained in:
theborakompanioni 2025-09-18 12:56:17 +02:00 • committed by Thebora Kompanioni
parent 021224f307
commit 0e40623732
2 changed files with 28 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/settings/MiningFeesForm.tsx
View file

@ -47,10 +47,10 @@ export const MiningFeesForm = forwardRef<MiningFeesFormRef, MiningFeesFormProps>
useEffect(() => { useEffect(() => {
if (initialValues.txFees) { if (initialValues.txFees) {
const txFeesValue = Number(initialValues.txFees) const txFeesValue = Number(initialValues.txFees)
if (txFeesValue >= 1001) { if (txFeesValue >= 1_001) {
// This is sats/kilo-vbyte, display as sats/vbyte // This is sats/kilo-vbyte, display as sats/vbyte
setFeeType(txFeeUnit.SATS_PER_KILO_VBYTE) setFeeType(txFeeUnit.SATS_PER_KILO_VBYTE)
setTxFeesSatsPerVbyte(String(txFeesValue / 1000)) setTxFeesSatsPerVbyte(String(txFeesValue / 1_000))
setTxFeesBlocks('') setTxFeesBlocks('')
} else { } else {
// This is blocks // This is blocks
@ -70,10 +70,10 @@ export const MiningFeesForm = forwardRef<MiningFeesFormRef, MiningFeesFormProps>
if (feeType === txFeeUnit.BLOCKS) { if (feeType === txFeeUnit.BLOCKS) {
const val = Number(txFeesBlocks) const val = Number(txFeesBlocks)
if (!txFeesBlocks || !isValidNumber(val) || val < 1 || val > 1000) { if (!txFeesBlocks || !isValidNumber(val) || val < 1 || val > 1_000) {
newErrors.txFees = t('settings.fees.feedback_invalid_tx_fees_blocks', { newErrors.txFees = t('settings.fees.feedback_invalid_tx_fees_blocks', {
min: 1, min: 1,
max: 1000, max: 1_000,
}) })
} }
} else { } else {
@ -134,7 +134,7 @@ export const MiningFeesForm = forwardRef<MiningFeesFormRef, MiningFeesFormProps>
return null return null
} }
return { return {
txFees: feeType === txFeeUnit.BLOCKS ? txFeesBlocks : String(Math.round(Number(txFeesSatsPerVbyte) * 1000)), txFees: feeType === txFeeUnit.BLOCKS ? txFeesBlocks : String(Math.round(Number(txFeesSatsPerVbyte) * 1_000)),
txFeesFactor: txFeesFactor ? String(percentageToFactor(Number(txFeesFactor))) : '', txFeesFactor: txFeesFactor ? String(percentageToFactor(Number(txFeesFactor))) : '',
maxSweepFeeChange: maxSweepFeeChange ? String(percentageToFactor(Number(maxSweepFeeChange))) : '', maxSweepFeeChange: maxSweepFeeChange ? String(percentageToFactor(Number(maxSweepFeeChange))) : '',
} }
@ -144,9 +144,9 @@ export const MiningFeesForm = forwardRef<MiningFeesFormRef, MiningFeesFormProps>
// - Blocks: 1-1000 // - Blocks: 1-1000
// - Sats/kilo-vbyte: 1001+ (minimum is 1001 according to JM validation) // - Sats/kilo-vbyte: 1001+ (minimum is 1001 according to JM validation)
const txFeesValue = Number(data.txFees) const txFeesValue = Number(data.txFees)
if (txFeesValue >= 1001) { if (txFeesValue >= 1_001) {
setFeeType(txFeeUnit.SATS_PER_KILO_VBYTE) setFeeType(txFeeUnit.SATS_PER_KILO_VBYTE)
setTxFeesSatsPerVbyte(String(txFeesValue / 1000)) setTxFeesSatsPerVbyte(String(txFeesValue / 1_000))
setTxFeesBlocks('') setTxFeesBlocks('')
} else { } else {
setFeeType(txFeeUnit.BLOCKS) setFeeType(txFeeUnit.BLOCKS)

42
src/components/settings/TxFeeInputField.tsx
View file

@ -1,4 +1,6 @@
import { useMemo } from 'react' import { useMemo } from 'react'
import { cx } from 'class-variance-authority'
import { BlocksIcon } from 'lucide-react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { txFeeUnit, type TxFeeUnit } from '@/constants/jm' import { txFeeUnit, type TxFeeUnit } from '@/constants/jm'
@ -36,12 +38,12 @@ export const TxFeeInputField = ({
if (!isNaN(numValue)) { if (!isNaN(numValue)) {
if (newUnit === txFeeUnit.SATS_PER_KILO_VBYTE && unit === txFeeUnit.BLOCKS) { if (newUnit === txFeeUnit.SATS_PER_KILO_VBYTE && unit === txFeeUnit.BLOCKS) {
// Convert blocks to sats/vbyte // Convert blocks to sats/vbyte
const converted = Math.round(numValue * 1000) const converted = Math.round(numValue * 1_000)
onValueChange(String(converted / 1000)) onValueChange(String(converted / 1_000))
} else if (newUnit === txFeeUnit.BLOCKS && unit === txFeeUnit.SATS_PER_KILO_VBYTE) { } else if (newUnit === txFeeUnit.BLOCKS && unit === txFeeUnit.SATS_PER_KILO_VBYTE) {
// Convert sats/vbyte to blocks // Convert sats/vbyte to blocks
const converted = Math.round(numValue * 1000) const converted = Math.round(numValue * 1_000)
onValueChange(String(Math.round(converted / 1000))) onValueChange(String(Math.round(converted / 1_000)))
} }
} }
} }
@ -56,11 +58,10 @@ export const TxFeeInputField = ({
key={tab.value} key={tab.value}
type="button" type="button"
onClick={() => handleUnitChange(tab.value as TxFeeUnit)} onClick={() => handleUnitChange(tab.value as TxFeeUnit)}
className={`rounded-md px-4 py-2 text-sm font-medium transition-colors ${ className={cx('rounded-md px-4 py-2 text-sm font-medium transition-colors', {
unit === tab.value 'bg-primary text-primary-foreground': unit === tab.value,
? 'bg-primary text-primary-foreground' 'bg-muted text-muted-foreground hover:bg-muted/80': unit !== tab.value,
: 'bg-muted text-muted-foreground hover:bg-muted/80' })}
}`}
disabled={disabled} disabled={disabled}
> >
{tab.label} {tab.label}
@ -73,23 +74,22 @@ export const TxFeeInputField = ({
: t('settings.fees.description_tx_fees_satspervbyte')} : t('settings.fees.description_tx_fees_satspervbyte')}
</p> </p>
<div className="flex max-w-md items-center"> <div className="flex max-w-md items-center">
{unit === txFeeUnit.BLOCKS ? ( <div className="bg-muted flex h-9 items-center rounded-l-md border border-r-0 px-3 py-2">
<div className="bg-muted flex h-9 items-center rounded-l-md border border-r-0 px-3 py-2"> {unit === txFeeUnit.BLOCKS ? (
<span className="text-xl font-medium">📦</span> <BlocksIcon className="h4 w-4" />
</div> ) : (
) : ( <>
<div className="bg-muted flex h-9 items-center rounded-l-md border border-r-0 px-3 py-2"> <DisplayLogo currency="sats" size="sm" />
<div className="font-xs flex items-center text-xs"> <span className="text-xs text-nowrap">/&nbsp;vB</span>
<DisplayLogo currency="sats" size="sm" /> <span className="text-nowrap">/ vB</span> </>
</div> )}
</div> </div>
)}
<Input <Input
type="text" type="text"
value={value} value={value}
onChange={(e) => onValueChange(e.target.value)} onChange={(e) => onValueChange(e.target.value)}
placeholder={unit === txFeeUnit.BLOCKS ? '3' : '1.0'} placeholder={unit === txFeeUnit.BLOCKS ? '3' : '1.0'}
className={'rounded-l-none'} className="rounded-l-none"
disabled={disabled} disabled={disabled}
/> />
</div> </div>