From d19f6ac685e61c9df4e3756023fb829a6f592559 Mon Sep 17 00:00:00 2001 From: padreug Date: Thu, 18 Sep 2025 22:57:20 +0200 Subject: [PATCH] Refactor SendDialog form validation schema for improved clarity - Simplified the form validation schema to always include an optional amount field, enhancing consistency across payment types. - Updated the custom validation logic to ensure proper handling of required fields based on payment type, improving user experience. - Adjusted the effective amount computation to default to zero when no amount is provided, ensuring accurate state management. These changes streamline the form validation process, making it more intuitive for users while maintaining robust payment handling. --- src/modules/wallet/components/SendDialog.vue | 51 ++++++++++---------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/src/modules/wallet/components/SendDialog.vue b/src/modules/wallet/components/SendDialog.vue index b963988..937e393 100644 --- a/src/modules/wallet/components/SendDialog.vue +++ b/src/modules/wallet/components/SendDialog.vue @@ -142,27 +142,12 @@ function parsePaymentDestination(destination: string) { } } -// Dynamic form validation schema based on payment type -const formSchema = computed(() => { - const baseSchema = { - destination: z.string().min(1, "Destination is required"), - comment: z.string().optional() - } - - // Only require amount for LNURL, Lightning addresses, or zero-amount invoices - const needsAmountInput = paymentType.value === 'lnurl' || - paymentType.value === 'lightning-address' || - (paymentType.value === 'bolt11' && parsedInvoice.value?.amount === 0) - - if (needsAmountInput) { - return toTypedSchema(z.object({ - ...baseSchema, - amount: z.number().min(1, "Amount must be at least 1 sat").max(1000000, "Amount too large") - })) - } else { - return toTypedSchema(z.object(baseSchema)) - } -}) +// Form validation schema - always include amount but make it optional +const formSchema = toTypedSchema(z.object({ + destination: z.string().min(1, "Destination is required"), + amount: z.number().min(1, "Amount must be at least 1 sat").max(1000000, "Amount too large").optional(), + comment: z.string().optional() +})) // Form setup with dynamic schema const form = useForm({ @@ -174,8 +159,24 @@ const form = useForm({ } }) -const { resetForm, values, meta, setFieldValue } = form -const isFormValid = computed(() => meta.value.valid) +const { resetForm, values, setFieldValue } = form +// Custom validation logic considering payment type +const isFormValid = computed(() => { + // Check if destination is valid + if (!values.destination || values.destination.trim() === '') return false + + // Check if amount is required and valid + const needsAmountInput = paymentType.value === 'lnurl' || + paymentType.value === 'lightning-address' || + (paymentType.value === 'bolt11' && parsedInvoice.value?.amount === 0) + + if (needsAmountInput) { + return !!(values.amount && values.amount > 0 && values.amount <= 1000000) + } + + // For BOLT11 invoices with fixed amounts, no amount input needed + return true +}) // Watch for prop changes watch(() => props.initialDestination, (newDestination) => { @@ -186,7 +187,7 @@ watch(() => props.initialDestination, (newDestination) => { // Watch destination changes to parse payment type watch(() => values.destination, (newDestination) => { - parsePaymentDestination(newDestination) + parsePaymentDestination(newDestination || '') }, { immediate: true }) // State @@ -217,7 +218,7 @@ const effectiveAmount = computed(() => { if (parsedInvoice.value && parsedInvoice.value.amount > 0) { return parsedInvoice.value.amount } - return values.amount + return values.amount || 0 }) // Methods