From 0e40623732fcb3b4b8a8a61f84dfffccf158366e Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Thu, 18 Sep 2025 12:56:17 +0200
Subject: [PATCH] refactor(v2): mining fee form class names and icons

---
 src/components/settings/MiningFeesForm.tsx  | 14 +++----
 src/components/settings/TxFeeInputField.tsx | 42 ++++++++++-----------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/settings/MiningFeesForm.tsx b/src/components/settings/MiningFeesForm.tsx
index 833b5001..abb87cf1 100644
--- a/src/components/settings/MiningFeesForm.tsx
+++ b/src/components/settings/MiningFeesForm.tsx
@@ -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)
diff --git a/src/components/settings/TxFeeInputField.tsx b/src/components/settings/TxFeeInputField.tsx
index fe6ea7a4..e3cebb02 100644
--- a/src/components/settings/TxFeeInputField.tsx
+++ b/src/components/settings/TxFeeInputField.tsx
@@ -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>