chore: add react-hook-form

package.json

@@ -44,6 +44,7 @@
     "*.{json,css,md}": "prettier --write"
   },
   "dependencies": {
+    "@hookform/resolvers": "5.2.2",
     "@joinmarket-webui/joinmarket-api-ts": "0.3.0",
     "@noble/hashes": "2.0.1",
     "@radix-ui/react-accordion": "1.2.12",
@@ -65,12 +66,14 @@
     "qrcode": "1.5.4",
     "react": "19.2.0",
     "react-dom": "19.2.0",
+    "react-hook-form": "7.70.0",
     "react-i18next": "16.3.5",
     "react-router-dom": "7.9.6",
     "sonner": "2.0.7",
     "tailwind-merge": "3.4.0",
     "tailwindcss": "4.1.18",
     "tw-animate-css": "1.4.0",
+    "yup": "1.7.1",
     "zustand": "5.0.9"
   },
   "devDependencies": {
@@ -88,6 +91,8 @@
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "5.1.1",
     "@vitest/browser": "4.0.9",
+    "@vitest/browser-playwright": "4.0.9",
+    "@vitest/coverage-v8": "4.0.9",
     "conventional-changelog": "7.1.1",
     "eslint": "9.39.2",
     "eslint-plugin-react-hooks": "7.0.1",
@@ -102,9 +107,7 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "8.51.0",
     "vite": "7.2.4",
-    "vitest": "4.0.9",
-    "@vitest/browser-playwright": "4.0.9",
-    "@vitest/coverage-v8": "4.0.9"
+    "vitest": "4.0.9"
   },
   "overrides": {
     "storybook": "$storybook",

src/components/settings/RescanChain.tsx

@@ -1,20 +1,101 @@
-import { useState } from 'react'
+import { yupResolver } from '@hookform/resolvers/yup'
 import { rescanblockchain } from '@joinmarket-webui/joinmarket-api-ts/jm'
 import { useMutation } from '@tanstack/react-query'
 import { ArrowLeft, RefreshCw } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import type { SubmitHandler } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'sonner'
+import * as yup from 'yup'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { routes } from '@/constants/routes'
 import { useApiClient } from '@/hooks/useApiClient'
 import { useRescanStatus } from '@/hooks/useRescanStatus'
+import type { RescanInfo } from '@/hooks/useRescanStatus'
 import { SEGWIT_ACTIVATION_BLOCK } from '@/lib/utils'
 import type { WalletFileName } from '@/lib/utils'
 
+type Inputs = {
+  blockHeight: number
+}
+
+const INPUT_BLOCK_HEIGHT_MIN = 0
+
+const schema = yup
+  .object({
+    blockHeight: yup.number().integer().default(SEGWIT_ACTIVATION_BLOCK).min(INPUT_BLOCK_HEIGHT_MIN).required(),
+  })
+  .required()
+
+interface RescanChainFormProps {
+  rescanInfo: RescanInfo
+  onSubmit: SubmitHandler<Inputs>
+  disabled?: boolean
+}
+
+function RescanChainForm({ rescanInfo, onSubmit, disabled }: RescanChainFormProps) {
+  const { t } = useTranslation()
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<Inputs>({
+    mode: 'all',
+    defaultValues: {
+      blockHeight: SEGWIT_ACTIVATION_BLOCK,
+    },
+    resolver: yupResolver(schema),
+  })
+
+  return (
+    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      {/* include validation with required or other standard HTML validation rules */}
+      <div className="space-y-2">
+        <Label htmlFor="rescanHeight" className="text-sm font-medium">
+          {t('rescan_chain.label_blockheight')}
+        </Label>
+        <p className="text-muted-foreground text-xs">{t('rescan_chain.description_blockheight')}</p>
+        <div className="relative">
+          <div className="absolute top-1/2 left-3 -translate-y-1/2">
+            <RefreshCw className="text-muted-foreground h-4 w-4" />
+          </div>
+
+          <Input
+            {...register('blockHeight', {
+              disabled: rescanInfo.rescanning,
+            })}
+            type="number"
+            step={1}
+            className="bg-background pl-10"
+            /* TODO: i18n */
+            placeholder="Enter block height"
+          />
+        </div>
+        {errors.blockHeight && (
+          <div className="text-muted-foreground light:text-red-700 text-xs text-red-500">
+            <span>{t('rescan_chain.feedback_invalid_blockheight', { min: INPUT_BLOCK_HEIGHT_MIN })}</span>
+          </div>
+        )}
+      </div>
+      <Button
+        type="submit"
+        disabled={disabled || !isValid || isSubmitting || rescanInfo.rescanning}
+        className="w-full"
+        size="lg"
+      >
+        {isSubmitting || rescanInfo.rescanning
+          ? t('rescan_chain.text_button_submitting')
+          : t('rescan_chain.text_button_submit')}
+      </Button>
+    </form>
+  )
+}
+
 interface RescanChainProps {
   walletFileName: WalletFileName
 }
@@ -24,7 +105,6 @@ export const RescanChain = ({ walletFileName }: RescanChainProps) => {
   const navigate = useNavigate()
   const client = useApiClient()
   const { rescanInfo, setRescanInfo } = useRescanStatus({ walletFileName })
-  const [rescanHeight, setRescanHeight] = useState<number>(SEGWIT_ACTIVATION_BLOCK)
 
   const rescanMutation = useMutation({
     mutationFn: async (blockHeight: number) => {
@@ -61,16 +141,19 @@ export const RescanChain = ({ walletFileName }: RescanChainProps) => {
     },
   })
 
-  const handleRescan = async () => {
-    const blockHeight = rescanHeight
-    if (isNaN(blockHeight) || blockHeight < 0) {
-      toast.error(t('rescan_chain.feedback_invalid_blockheight', { min: 0 }))
+  const handleRescan = async (blockHeight: number) => {
+    if (isNaN(blockHeight) || blockHeight < INPUT_BLOCK_HEIGHT_MIN) {
+      toast.error(t('rescan_chain.feedback_invalid_blockheight', { min: INPUT_BLOCK_HEIGHT_MIN }))
       return
     }
 
     await rescanMutation.mutateAsync(blockHeight)
   }
 
+  const onSubmit: SubmitHandler<Inputs> = async (data) => {
+    return handleRescan(data.blockHeight)
+  }
+
   return (
     <div className="mx-auto max-w-2xl space-y-3 p-4">
       <div className="flex items-center gap-3">
@@ -88,55 +171,12 @@ export const RescanChain = ({ walletFileName }: RescanChainProps) => {
       <p className="text-muted-foreground ml-11 text-sm">{t('rescan_chain.subtitle')}</p>
 
       <Card className="ml-11 border-0 shadow-sm">
-        <CardContent className="p-6">
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="rescanHeight" className="text-sm font-medium">
-                {t('rescan_chain.label_blockheight')}
-              </Label>
-              <p className="text-muted-foreground text-xs">{t('rescan_chain.description_blockheight')}</p>
-              <div className="relative">
-                <div className="absolute top-1/2 left-3 -translate-y-1/2">
-                  <RefreshCw className="text-muted-foreground h-4 w-4" />
-                </div>
-                <Input
-                  id="rescanHeight"
-                  type="number"
-                  value={rescanHeight}
-                  onChange={(e) => setRescanHeight(parseInt(e.target.value))}
-                  className="bg-background pl-10"
-                  placeholder="Enter block height"
-                  disabled={rescanInfo.rescanning}
-                />
-              </div>
-            </div>
-
-            <Button
-              onClick={handleRescan}
-              disabled={!rescanHeight || rescanInfo.rescanning || rescanMutation.isPending}
-              className="w-full"
-              size="lg"
-            >
-              {rescanMutation.isPending || rescanInfo.rescanning
-                ? t('rescan_chain.text_button_submitting')
-                : t('rescan_chain.text_button_submit')}
-            </Button>
-
-            {rescanInfo.rescanning && (
-              <div className="bg-muted/50 mt-4 rounded-lg p-3">
-                <div className="flex items-center gap-2">
-                  <RefreshCw className="h-4 w-4 animate-spin motion-reduce:hidden" />
-                  <span className="text-sm">
-                    {rescanInfo?.progress === undefined
-                      ? t('app.alert_rescan_in_progress')
-                      : t('app.alert_rescan_in_progress_with_progress', {
-                          progress: rescanInfo.progress,
-                        })}
-                  </span>
-                </div>
-              </div>
-            )}
-          </div>
+        <CardContent className="px-6">
+          <RescanChainForm
+            rescanInfo={rescanInfo}
+            onSubmit={onSubmit}
+            disabled={rescanInfo.rescanning || rescanMutation.isPending}
+          />
         </CardContent>
       </Card>
     </div>