fix(base): FiatToggleField reads form state via useFormContext

The previous version called useField directly with a getter for the
field name. That created a child-local field rather than connecting
to the parent form's allow_fiat / fiat_currency state — so the
Switch's on/off visually toggled but the form never knew, and the
conditional Fiat currency dropdown never appeared.

Rewrite around the proven pattern used elsewhere in the dialog: bind
the inputs through FormField (the shadcn-vue / vee-validate Field
component) and reach for cross-field state via useFormContext.
showCurrencyDropdown now reads form.values[allowFiatField] directly,
which mirrors the parent's actual state, and the denomination-mirror
watch goes through form.setFieldValue.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/modules/base/components/payments/FiatToggleField.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
-import { useField } from 'vee-validate'
+import { useFormContext } from 'vee-validate'
 import {
   FormControl,
   FormDescription,
+  FormField,
   FormItem,
   FormLabel,
   FormMessage,
@@ -37,21 +38,19 @@ const props = defineProps<{
   disabled?: boolean
 }>()
 
-const { value: allowFiat, handleChange: setAllowFiat } = useField<boolean>(
-  () => props.allowFiatField,
-)
-const { value: fiatCurrency, setValue: setFiatCurrency } = useField<string>(
-  () => props.fiatCurrencyField,
-)
-
+const form = useFormContext()
 const { hasAnyProvider, refresh } = useFiatProviders()
 
 // Refresh once on mount so the disabled-state reflects providers the
 // user may have just configured in another tab.
 refresh()
 
+const allowFiatValue = computed(() =>
+  Boolean(form.values[props.allowFiatField as keyof typeof form.values]),
+)
+
 const showCurrencyDropdown = computed(
-  () => allowFiat.value && props.denomination === 'sat',
+  () => allowFiatValue.value && props.denomination === 'sat',
 )
 
 // When the price is denominated in a fiat currency, the rail currency
@@ -59,8 +58,8 @@ const showCurrencyDropdown = computed(
 watch(
   () => props.denomination,
   (d) => {
-    if (d && d !== 'sat' && fiatCurrency.value !== d) {
-      setFiatCurrency(d)
+    if (d && d !== 'sat' && form.values[props.fiatCurrencyField as keyof typeof form.values] !== d) {
+      form.setFieldValue(props.fiatCurrencyField, d)
     }
   },
   { immediate: true },
@@ -69,6 +68,7 @@ watch(
 
 <template>
   <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 items-end">
+    <FormField v-slot="{ value, handleChange }" :name="allowFiatField">
       <FormItem class="sm:col-span-2 flex flex-row items-center justify-between rounded-md border p-3">
         <div class="space-y-0.5">
           <FormLabel>Also accept fiat</FormLabel>
@@ -93,21 +93,19 @@ watch(
           </TooltipProvider>
           <Switch
             v-else
-          :model-value="allowFiat"
+            :model-value="value as boolean"
             :disabled="disabled"
-          @update:model-value="setAllowFiat"
+            @update:model-value="handleChange"
           />
         </FormControl>
       </FormItem>
+    </FormField>
 
+    <FormField v-slot="{ componentField }" :name="fiatCurrencyField">
       <FormItem v-show="showCurrencyDropdown">
         <FormLabel>Fiat currency</FormLabel>
         <FormControl>
-        <Select
-          :model-value="fiatCurrency"
-          :disabled="disabled"
-          @update:model-value="(v) => setFiatCurrency(v as string)"
-        >
+          <Select v-bind="componentField" :disabled="disabled">
             <SelectTrigger>
               <SelectValue placeholder="USD" />
             </SelectTrigger>
@@ -124,5 +122,6 @@ watch(
         </FormControl>
         <FormMessage />
       </FormItem>
+    </FormField>
   </div>
 </template>