padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor SendDialog form validation schema for improved clarity

Browse source 
- 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
1 changed files with 26 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/modules/wallet/components/SendDialog.vue
View file

@ -142,27 +142,12 @@ function parsePaymentDestination(destination: string) {
}
}
// Dynamic form validation schema based on payment type
const formSchema = computed(() => {
const 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()
}
// 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
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