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(() => {
if (initialValues.txFees) {
const txFeesValue = Number(initialValues.txFees)
if (txFeesValue >= 1001) {
if (txFeesValue >= 1_001) {
// This is sats/kilo-vbyte, display as sats/vbyte
setFeeType(txFeeUnit.SATS_PER_KILO_VBYTE)
setTxFeesSatsPerVbyte(String(txFeesValue / 1000))
setTxFeesSatsPerVbyte(String(txFeesValue / 1_000))
setTxFeesBlocks('')
} else {
// This is blocks
@ -70,10 +70,10 @@ export const MiningFeesForm = forwardRef<MiningFeesFormRef, MiningFeesFormProps>
if (feeType === txFeeUnit.BLOCKS) {
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', {
min: 1,
max: 1000,
max: 1_000,
})
}
} else {
@ -134,7 +134,7 @@ export const MiningFeesForm = forwardRef<MiningFeesFormRef, MiningFeesFormProps>
return null
}
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))) : '',
maxSweepFeeChange: maxSweepFeeChange ? String(percentageToFactor(Number(maxSweepFeeChange))) : '',
}
@ -144,9 +144,9 @@ export const MiningFeesForm = forwardRef<MiningFeesFormRef, MiningFeesFormProps>
// - Blocks: 1-1000
// - Sats/kilo-vbyte: 1001+ (minimum is 1001 according to JM validation)
const txFeesValue = Number(data.txFees)
if (txFeesValue >= 1001) {
if (txFeesValue >= 1_001) {
setFeeType(txFeeUnit.SATS_PER_KILO_VBYTE)
setTxFeesSatsPerVbyte(String(txFeesValue / 1000))
setTxFeesSatsPerVbyte(String(txFeesValue / 1_000))
setTxFeesBlocks('')
} else {
setFeeType(txFeeUnit.BLOCKS)

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

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