fix: update Vue template syntax and improve Vite config

- Fix Vue template syntax in App.vue by using proper event handler format
- Update Vite config to properly handle ESM imports and crypto modules
- Add manual chunks for better code splitting
- Improve environment variable handling in vite-env.d.ts
- Fix TypeScript linting errors in App.vue

src/components/GiftedDialog.vue

@@ -51,8 +51,8 @@
                 providerProjectId: fromProjectId,
                 recipientDid: receiver?.did,
                 recipientName: receiver?.name,
-                unitCode,
-              },
+                unitCode
+              }
             }"
             class="text-blue-500"
           >
@@ -87,44 +87,44 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from "vue-facing-decorator";
+import { Vue, Component, Prop } from 'vue-facing-decorator'
 
-import { NotificationIface } from "../constants/app";
+import { NotificationIface } from '../constants/app'
 import {
   createAndSubmitGive,
   didInfo,
-  serverMessageForUser,
-} from "../libs/endorserServer";
-import * as libsUtil from "../libs/util";
-import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { Contact } from "../db/tables/contacts";
-import { retrieveAccountDids } from "../libs/util";
+  serverMessageForUser
+} from '../libs/endorserServer'
+import * as libsUtil from '../libs/util'
+import { db, retrieveSettingsForActiveAccount } from '../db/index'
+import { Contact } from '../db/tables/contacts'
+import { retrieveAccountDids } from '../libs/util'
 
 @Component
 export default class GiftedDialog extends Vue {
-  $notify!: (notification: NotificationIface, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void
 
-  @Prop() fromProjectId = "";
-  @Prop() toProjectId = "";
+  @Prop() fromProjectId = ''
+  @Prop() toProjectId = ''
 
-  activeDid = "";
-  allContacts: Array<Contact> = [];
-  allMyDids: Array<string> = [];
-  apiServer = "";
+  activeDid = ''
+  allContacts: Array<Contact> = []
+  allMyDids: Array<string> = []
+  apiServer = ''
 
-  amountInput = "0";
-  callbackOnSuccess?: (amount: number) => void = () => {};
-  customTitle?: string;
-  description = "";
-  giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
-  isTrade = false;
-  offerId = "";
-  prompt = "";
-  receiver?: libsUtil.GiverReceiverInputInfo;
-  unitCode = "HUR";
-  visible = false;
+  amountInput = '0'
+  callbackOnSuccess?: (amount: number) => void = () => {}
+  customTitle?: string
+  description = ''
+  giver?: libsUtil.GiverReceiverInputInfo // undefined means no identified giver agent
+  isTrade = false
+  offerId = ''
+  prompt = ''
+  receiver?: libsUtil.GiverReceiverInputInfo
+  unitCode = 'HUR'
+  visible = false
 
-  libsUtil = libsUtil;
+  libsUtil = libsUtil
 
   async open(
     giver?: libsUtil.GiverReceiverInputInfo,
@@ -132,146 +132,143 @@ export default class GiftedDialog extends Vue {
     offerId?: string,
     customTitle?: string,
     prompt?: string,
-    callbackOnSuccess: (amount: number) => void = () => {},
+    callbackOnSuccess: (amount: number) => void = () => {}
   ) {
-    this.customTitle = customTitle;
-    this.giver = giver;
-    this.prompt = prompt || "";
-    this.receiver = receiver;
+    this.customTitle = customTitle
+    this.giver = giver
+    this.prompt = prompt || ''
+    this.receiver = receiver
     // if we show "given to user" selection, default checkbox to true
-    this.amountInput = "0";
-    this.callbackOnSuccess = callbackOnSuccess;
-    this.offerId = offerId || "";
+    this.amountInput = '0'
+    this.callbackOnSuccess = callbackOnSuccess
+    this.offerId = offerId || ''
 
     try {
-      const settings = await retrieveSettingsForActiveAccount();
-      this.apiServer = settings.apiServer || "";
-      this.activeDid = settings.activeDid || "";
+      const settings = await retrieveSettingsForActiveAccount()
+      this.apiServer = settings.apiServer || ''
+      this.activeDid = settings.activeDid || ''
 
-      this.allContacts = await db.contacts.toArray();
+      this.allContacts = await db.contacts.toArray()
 
-      this.allMyDids = await retrieveAccountDids();
+      this.allMyDids = await retrieveAccountDids()
 
       if (this.giver && !this.giver.name) {
         this.giver.name = didInfo(
           this.giver.did,
           this.activeDid,
           this.allMyDids,
-          this.allContacts,
-        );
+          this.allContacts
+        )
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
-      logger.error("Error retrieving settings from database:", err);
+      logger.error('Error retrieving settings from database:', err)
       this.$notify(
         {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: err.message || "There was an error retrieving your settings.",
+          group: 'alert',
+          type: 'danger',
+          title: 'Error',
+          text: err.message || 'There was an error retrieving your settings.'
         },
-        -1,
-      );
+        -1
+      )
     }
 
-    this.visible = true;
+    this.visible = true
   }
 
   close() {
     // close the dialog but don't change values (since it might be submitting info)
-    this.visible = false;
+    this.visible = false
   }
 
   changeUnitCode() {
-    const units = Object.keys(this.libsUtil.UNIT_SHORT);
-    const index = units.indexOf(this.unitCode);
-    this.unitCode = units[(index + 1) % units.length];
+    const units = Object.keys(this.libsUtil.UNIT_SHORT)
+    const index = units.indexOf(this.unitCode)
+    this.unitCode = units[(index + 1) % units.length]
   }
 
   increment() {
-    this.amountInput = `${(parseFloat(this.amountInput) || 0) + 1}`;
+    this.amountInput = `${(parseFloat(this.amountInput) || 0) + 1}`
   }
 
   decrement() {
-    this.amountInput = `${Math.max(
-      0,
-      (parseFloat(this.amountInput) || 1) - 1,
-    )}`;
+    this.amountInput = `${Math.max(0, (parseFloat(this.amountInput) || 1) - 1)}`
   }
 
   cancel() {
-    this.close();
-    this.eraseValues();
+    this.close()
+    this.eraseValues()
   }
 
   eraseValues() {
-    this.description = "";
-    this.giver = undefined;
-    this.amountInput = "0";
-    this.prompt = "";
-    this.unitCode = "HUR";
+    this.description = ''
+    this.giver = undefined
+    this.amountInput = '0'
+    this.prompt = ''
+    this.unitCode = 'HUR'
   }
 
   async confirm() {
     if (!this.activeDid) {
       this.$notify(
         {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "You must select an identifier before you can record a give.",
+          group: 'alert',
+          type: 'danger',
+          title: 'Error',
+          text: 'You must select an identifier before you can record a give.'
         },
-        3000,
-      );
-      return;
+        3000
+      )
+      return
     }
     if (parseFloat(this.amountInput) < 0) {
       this.$notify(
         {
-          group: "alert",
-          type: "danger",
-          text: "You may not send a negative number.",
-          title: "",
+          group: 'alert',
+          type: 'danger',
+          text: 'You may not send a negative number.',
+          title: ''
         },
-        2000,
-      );
-      return;
+        2000
+      )
+      return
     }
     if (!this.description && !parseFloat(this.amountInput)) {
       this.$notify(
         {
-          group: "alert",
-          type: "danger",
-          title: "Error",
+          group: 'alert',
+          type: 'danger',
+          title: 'Error',
           text: `You must enter a description or some number of ${
             this.libsUtil.UNIT_LONG[this.unitCode]
-          }.`,
+          }.`
         },
-        2000,
-      );
-      return;
+        2000
+      )
+      return
     }
 
-    this.close();
+    this.close()
     this.$notify(
       {
-        group: "alert",
-        type: "toast",
-        text: "Recording the give...",
-        title: "",
+        group: 'alert',
+        type: 'toast',
+        text: 'Recording the give...',
+        title: ''
       },
-      1000,
-    );
+      1000
+    )
     // this is asynchronous, but we don't need to wait for it to complete
     await this.recordGive(
       (this.giver?.did as string) || null,
       (this.receiver?.did as string) || null,
       this.description,
       parseFloat(this.amountInput),
-      this.unitCode,
+      this.unitCode
     ).then(() => {
-      this.eraseValues();
-    });
+      this.eraseValues()
+    })
   }
 
   /**
@@ -287,7 +284,7 @@ export default class GiftedDialog extends Vue {
     recipientDid: string | null,
     description: string,
     amount: number,
-    unitCode: string = "HUR",
+    unitCode: string = 'HUR'
   ) {
     try {
       const result = await createAndSubmitGive(
@@ -303,54 +300,54 @@ export default class GiftedDialog extends Vue {
         this.offerId,
         this.isTrade,
         undefined,
-        this.fromProjectId,
-      );
+        this.fromProjectId
+      )
 
       if (
-        result.type === "error" ||
+        result.type === 'error' ||
         this.isGiveCreationError(result.response)
       ) {
-        const errorMessage = this.getGiveCreationErrorMessage(result);
-        logger.error("Error with give creation result:", result);
+        const errorMessage = this.getGiveCreationErrorMessage(result)
+        logger.error('Error with give creation result:', result)
         this.$notify(
           {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: errorMessage || "There was an error creating the give.",
+            group: 'alert',
+            type: 'danger',
+            title: 'Error',
+            text: errorMessage || 'There was an error creating the give.'
           },
-          -1,
-        );
+          -1
+        )
       } else {
         this.$notify(
           {
-            group: "alert",
-            type: "success",
-            title: "Success",
-            text: `That ${this.isTrade ? "trade" : "gift"} was recorded.`,
+            group: 'alert',
+            type: 'success',
+            title: 'Success',
+            text: `That ${this.isTrade ? 'trade' : 'gift'} was recorded.`
           },
-          7000,
-        );
+          7000
+        )
         if (this.callbackOnSuccess) {
-          this.callbackOnSuccess(amount);
+          this.callbackOnSuccess(amount)
         }
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
-      logger.error("Error with give recordation caught:", error);
+      logger.error('Error with give recordation caught:', error)
       const errorMessage =
         error.userMessage ||
         serverMessageForUser(error) ||
-        "There was an error recording the give.";
+        'There was an error recording the give.'
       this.$notify(
         {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: errorMessage,
+          group: 'alert',
+          type: 'danger',
+          title: 'Error',
+          text: errorMessage
         },
-        -1,
-      );
+        -1
+      )
     }
   }
 
@@ -362,7 +359,7 @@ export default class GiftedDialog extends Vue {
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   isGiveCreationError(result: any) {
-    return result.status !== 201 || result.data?.error;
+    return result.status !== 201 || result.data?.error
   }
 
   /**
@@ -375,19 +372,19 @@ export default class GiftedDialog extends Vue {
       result.error?.userMessage ||
       result.error?.error ||
       result.response?.data?.error?.message
-    );
+    )
   }
 
   explainData() {
     this.$notify(
       {
-        group: "alert",
-        type: "success",
-        title: "Data Sharing",
-        text: libsUtil.PRIVACY_MESSAGE,
+        group: 'alert',
+        type: 'success',
+        title: 'Data Sharing',
+        text: libsUtil.PRIVACY_MESSAGE
       },
-      -1,
-    );
+      -1
+    )
   }
 }
 </script>