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.
This commit is contained in:
padreug 2025-09-18 22:57:20 +02:00
parent ab3a8ab296
commit 46a5403b74

View file

@ -142,27 +142,12 @@ function parsePaymentDestination(destination: string) {
} }
} }
// Dynamic form validation schema based on payment type // Form validation schema - always include amount but make it optional
const formSchema = computed(() => { const formSchema = toTypedSchema(z.object({
const baseSchema = {
destination: z.string().min(1, "Destination is required"), 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() 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 setup with dynamic schema // Form setup with dynamic schema
const form = useForm({ const form = useForm({
@ -174,8 +159,24 @@ const form = useForm({
} }
}) })
const { resetForm, values, meta, setFieldValue } = form const { resetForm, values, setFieldValue } = form
const isFormValid = computed(() => meta.value.valid) // 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 for prop changes
watch(() => props.initialDestination, (newDestination) => { watch(() => props.initialDestination, (newDestination) => {
@ -186,7 +187,7 @@ watch(() => props.initialDestination, (newDestination) => {
// Watch destination changes to parse payment type // Watch destination changes to parse payment type
watch(() => values.destination, (newDestination) => { watch(() => values.destination, (newDestination) => {
parsePaymentDestination(newDestination) parsePaymentDestination(newDestination || '')
}, { immediate: true }) }, { immediate: true })
// State // State
@ -217,7 +218,7 @@ const effectiveAmount = computed(() => {
if (parsedInvoice.value && parsedInvoice.value.amount > 0) { if (parsedInvoice.value && parsedInvoice.value.amount > 0) {
return parsedInvoice.value.amount return parsedInvoice.value.amount
} }
return values.amount return values.amount || 0
}) })
// Methods // Methods