Enhance SendDialog and WalletPage with QR code scanning integration

- Added initialDestination prop to SendDialog for pre-filling the destination field.
- Implemented a watcher to update the destination field when initialDestination changes.
- Integrated QRScanner component into WalletPage, allowing users to scan QR codes for payment destinations.
- Updated SendDialog to accept scanned destination and improved user feedback with toast notifications.

These changes streamline the payment process by enabling QR code scanning directly within the wallet interface.

src/modules/wallet/components/SendDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
@@ -14,6 +14,7 @@ import QRScanner from '@/components/ui/qr-scanner.vue'
 
 interface Props {
   open: boolean
+  initialDestination?: string
 }
 
 interface Emits {
@@ -38,7 +39,7 @@ const formSchema = toTypedSchema(z.object({
 const form = useForm({
   validationSchema: formSchema,
   initialValues: {
-    destination: '',
+    destination: props.initialDestination || '',
     amount: 100,
     comment: ''
   }
@@ -47,6 +48,13 @@ const form = useForm({
 const { resetForm, values, meta, setFieldValue } = form
 const isFormValid = computed(() => meta.value.valid)
 
+// Watch for prop changes
+watch(() => props.initialDestination, (newDestination) => {
+  if (newDestination) {
+    setFieldValue('destination', newDestination)
+  }
+}, { immediate: true })
+
 // State
 const isSending = computed(() => walletService?.isSendingPayment?.value || false)
 const showScanner = ref(false)