From c0df24fe014cf5ccdc79333a874f47ee7c23ea07 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Tue, 23 Jul 2024 20:57:10 -0600
Subject: [PATCH] add more type casts

---
 src/libs/endorserServer.ts             |  4 +--
 src/views/AccountViewView.vue          |  2 +-
 src/views/ClaimAddRawView.vue          |  3 +-
 src/views/ConfirmGiftView.vue          |  3 +-
 src/views/ContactAmountsView.vue       |  3 +-
 src/views/DIDView.vue                  |  5 +--
 src/views/DiscoverView.vue             |  3 +-
 src/views/GiftedDetails.vue            | 44 +++++++++++++++-----------
 src/views/IdentitySwitcherView.vue     |  3 +-
 src/views/ImportAccountView.vue        |  5 +--
 src/views/ImportDerivedAccountView.vue | 12 ++++---
 src/views/NewEditAccountView.vue       |  6 ++--
 src/views/NewEditProjectView.vue       |  5 +--
 src/views/NewIdentifierView.vue        |  4 ++-
 src/views/ProjectViewView.vue          | 17 ++++++----
 src/views/ProjectsView.vue             |  7 ++--
 src/views/QuickActionBvcEndView.vue    |  8 +++--
 src/views/SearchAreaView.vue           |  3 +-
 src/views/SharedPhotoView.vue          | 15 ++++++---
 src/views/StartView.vue                |  9 +++---
 src/views/TestView.vue                 |  3 +-
 21 files changed, 100 insertions(+), 64 deletions(-)

diff --git a/src/libs/endorserServer.ts b/src/libs/endorserServer.ts
index 3a89468ef..ce2b5753a 100644
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -56,12 +56,12 @@ export interface GenericVerifiableCredential {
 export interface GenericCredWrapper<T extends GenericVerifiableCredential> {
   "@context": string;
   "@type": string;
+  claim: T;
+  claimType?: string;
   handleId: string;
   id: string;
   issuedAt: string;
   issuer: string;
-  claim: T;
-  claimType?: string;
 }
 export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper<GenericVerifiableCredential> =
   {
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 2554de6f3..565ed181c 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -1092,7 +1092,7 @@ export default class AccountViewView extends Vue {
   }
 
   async uploadImportFile(event: Event) {
-    inputImportFileNameRef.value = event.target.files[0];
+    inputImportFileNameRef.value = (event.target as EventTarget).files[0];
   }
 
   showContactImport() {
diff --git a/src/views/ClaimAddRawView.vue b/src/views/ClaimAddRawView.vue
index 18a8df87d..f3e73c443 100644
--- a/src/views/ClaimAddRawView.vue
+++ b/src/views/ClaimAddRawView.vue
@@ -30,6 +30,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import { NotificationIface } from "@/constants/app";
@@ -55,7 +56,7 @@ export default class ClaimAddRawView extends Vue {
     this.activeDid = settings?.activeDid || "";
     this.apiServer = settings?.apiServer || "";
 
-    this.claimStr = this.$route.query.claim;
+    this.claimStr = (this.$route as Router).query["claim"];
     try {
       this.veriClaim = JSON.parse(this.claimStr);
       this.claimStr = JSON.stringify(this.veriClaim, null, 2);
diff --git a/src/views/ConfirmGiftView.vue b/src/views/ConfirmGiftView.vue
index f6ae318e2..e77cd789a 100644
--- a/src/views/ConfirmGiftView.vue
+++ b/src/views/ConfirmGiftView.vue
@@ -398,6 +398,7 @@ import * as yaml from "js-yaml";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
+import { Router } from "vue-router";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
@@ -764,7 +765,7 @@ export default class ClaimView extends Vue {
     const route = {
       path: "/claim/" + encodeURIComponent(claimId),
     };
-    this.$router.push(route).then(async () => {
+    (this.$router as Router).push(route).then(async () => {
       this.resetThisValues();
       await this.loadClaim(claimId, this.activeDid);
     });
diff --git a/src/views/ContactAmountsView.vue b/src/views/ContactAmountsView.vue
index f54ad16bf..98c955b11 100644
--- a/src/views/ContactAmountsView.vue
+++ b/src/views/ContactAmountsView.vue
@@ -108,6 +108,7 @@
 import { AxiosError, AxiosRequestHeaders } from "axios";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
@@ -144,7 +145,7 @@ export default class ContactAmountssView extends Vue {
   async created() {
     try {
       await db.open();
-      const contactDid = this.$route.query.contactDid as string;
+      const contactDid = (this.$route as Router).query["contactDid"] as string;
       this.contact = (await db.contacts.get(contactDid)) || null;
 
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);
diff --git a/src/views/DIDView.vue b/src/views/DIDView.vue
index 23d755a8a..b5cb323cc 100644
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -128,6 +128,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
@@ -162,7 +163,7 @@ export default class DIDView extends Vue {
   activeDid = "";
   allMyDids: Array<string> = [];
   apiServer = "";
-  claims: Array<GenericCredWrapper> = [];
+  claims: Array<GenericCredWrapper<GenericVerifiableCredential>> = [];
   contact?: Contact;
   hitEnd = false;
   isLoading = false;
@@ -275,7 +276,7 @@ export default class DIDView extends Vue {
     const route = {
       path: "/claim/" + encodeURIComponent(jwtId),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   public claimAmount(claim: GenericVerifiableCredential) {
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index 86b6ab4a9..d3ff54824 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -129,6 +129,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
@@ -394,7 +395,7 @@ export default class DiscoverView extends Vue {
     const route = {
       path: "/project/" + encodeURIComponent(id),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   public computedLocalTabStyleClassNames() {
diff --git a/src/views/GiftedDetails.vue b/src/views/GiftedDetails.vue
index 80ecf5eea..fc82db4cd 100644
--- a/src/views/GiftedDetails.vue
+++ b/src/views/GiftedDetails.vue
@@ -250,20 +250,24 @@ export default class GiftedDetails extends Vue {
     }
 
     this.amountInput =
-      this.$route.query.amountInput ||
+      (this.$route as Router).query["amountInput"] ||
       String(this.prevCredToEdit?.claim?.object?.amountOfThisGood) ||
       this.amountInput;
     this.description =
-      this.$route.query.description ||
+      (this.$route as Router).query["description"] ||
       this.prevCredToEdit?.claim?.description ||
       this.description;
-    this.destinationPathAfter = this.$route.query.destinationPathAfter;
-    this.giverDid = (this.$route.query.giverDid ||
+    this.destinationPathAfter = (this.$route as Router).query[
+      "destinationPathAfter"
+    ];
+    this.giverDid = ((this.$route as Router).query["giverDid"] ||
       this.prevCredToEdit?.claim?.agent?.identifier ||
       this.giverDid) as string;
-    this.giverName = (this.$route.query.giverName as string) || "";
-    this.hideBackButton = this.$route.query.hideBackButton === "true";
-    this.message = (this.$route.query.message as string) || "";
+    this.giverName =
+      ((this.$route as Router).query["giverName"] as string) || "";
+    this.hideBackButton =
+      (this.$route as Router).query["hideBackButton"] === "true";
+    this.message = ((this.$route as Router).query["message"] as string) || "";
     // find any offer ID
     const fulfills = this.prevCredToEdit?.claim?.fulfills;
     const fulfillsArray = Array.isArray(fulfills)
@@ -272,43 +276,44 @@ export default class GiftedDetails extends Vue {
         ? [fulfills]
         : [];
     const offer = fulfillsArray.find((rec) => rec.claimType === "Offer");
-    this.offerId = (this.$route.query.offerId ||
+    this.offerId = ((this.$route as Router).query["offerId"] ||
       offer?.identifier ||
       this.offerId) as string;
 
     // find any project ID
     const project = fulfillsArray.find((rec) => rec.claimType === "PlanAction");
-    this.projectId = (this.$route.query.projectId ||
+    this.projectId = ((this.$route as Router).query["projectId"] ||
       project?.identifier ||
       this.projectId) as string;
 
-    this.recipientDid = (this.$route.query.recipientDid ||
+    this.recipientDid = ((this.$route as Router).query["recipientDid"] ||
       this.prevCredToEdit?.claim?.recipient?.identifier) as string;
-    this.recipientName = (this.$route.query.recipientName as string) || "";
-    this.unitCode = (this.$route.query.unitCode ||
+    this.recipientName =
+      ((this.$route as Router).query["recipientName"] as string) || "";
+    this.unitCode = ((this.$route as Router).query["unitCode"] ||
       this.prevCredToEdit?.claim?.object?.unitCode ||
       this.unitCode) as string;
 
     this.imageUrl =
-      (this.$route.query.imageUrl as string) ||
+      ((this.$route as Router).query["imageUrl"] as string) ||
       this.prevCredToEdit?.claim?.image ||
       localStorage.getItem("imageUrl") ||
       this.imageUrl;
 
     // this is an endpoint for sharing project info to highlight something given
     // https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target
-    if (this.$route.query.shareTitle) {
+    if ((this.$route as Router).query["shareTitle"]) {
       this.description =
-        (this.$route.query.shareTitle as string) +
+        ((this.$route as Router).query["shareTitle"] as string) +
         (this.description ? "\n" + this.description : "");
     }
-    if (this.$route.query.shareText) {
+    if ((this.$route as Router).query["shareText"]) {
       this.description =
         (this.description ? this.description + "\n" : "") +
-        (this.$route.query.shareText as string);
+        ((this.$route as Router).query["shareText"] as string);
     }
-    if (this.$route.query.shareUrl) {
-      this.imageUrl = this.$route.query.shareUrl as string;
+    if ((this.$route as Router).query["shareUrl"]) {
+      this.imageUrl = (this.$route as Router).query["shareUrl"] as string;
     }
 
     try {
@@ -688,6 +693,7 @@ export default class GiftedDetails extends Vue {
   constructGiveParam() {
     const recipientDid = this.givenToRecipient ? this.recipientDid : undefined;
     const projectId = this.givenToProject ? this.projectId : undefined;
+    // const giveClaim = constructGive(
     const giveClaim = hydrateGive(
       this.prevCredToEdit?.claim as GiveVerifiableCredential,
       this.giverDid,
diff --git a/src/views/IdentitySwitcherView.vue b/src/views/IdentitySwitcherView.vue
index 59f05235a..3182a9a23 100644
--- a/src/views/IdentitySwitcherView.vue
+++ b/src/views/IdentitySwitcherView.vue
@@ -99,6 +99,7 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import { NotificationIface } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
@@ -155,7 +156,7 @@ export default class IdentitySwitcherView extends Vue {
     await db.settings.update(MASTER_SETTINGS_KEY, {
       activeDid: did,
     });
-    this.$router.push({ name: "account" });
+    (this.$router as Router).push({ name: "account" });
   }
 
   async deleteAccount(id: string) {
diff --git a/src/views/ImportAccountView.vue b/src/views/ImportAccountView.vue
index 1fa605c51..086680c07 100644
--- a/src/views/ImportAccountView.vue
+++ b/src/views/ImportAccountView.vue
@@ -77,6 +77,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
@@ -110,7 +111,7 @@ export default class ImportAccountView extends Vue {
   }
 
   public onCancelClick() {
-    this.$router.back();
+    (this.$router as Router).back();
   }
 
   public async fromMnemonic() {
@@ -146,7 +147,7 @@ export default class ImportAccountView extends Vue {
       await db.settings.update(MASTER_SETTINGS_KEY, {
         activeDid: newId.did,
       });
-      this.$router.push({ name: "account" });
+      (this.$router as Router).push({ name: "account" });
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       console.error("Error saving mnemonic & updating settings:", err);
diff --git a/src/views/ImportDerivedAccountView.vue b/src/views/ImportDerivedAccountView.vue
index 0d9ec0955..92e0dbab2 100644
--- a/src/views/ImportDerivedAccountView.vue
+++ b/src/views/ImportDerivedAccountView.vue
@@ -70,6 +70,8 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+
 import {
   DEFAULT_ROOT_DERIVATION_PATH,
   deriveAddress,
@@ -100,7 +102,7 @@ export default class ImportAccountView extends Vue {
   }
 
   public onCancelClick() {
-    this.$router.back();
+    (this.$router as Router).back();
   }
 
   public switchAccount(did: string) {
@@ -124,9 +126,11 @@ export default class ImportAccountView extends Vue {
       }
     });
     // increment the last number in that max derivation path
-    const newDerivPath = nextDerivationPath(accountWithMaxDeriv.derivationPath);
+    const newDerivPath = nextDerivationPath(
+      accountWithMaxDeriv.derivationPath as string,
+    );
 
-    const mne: string = accountWithMaxDeriv.mnemonic;
+    const mne: string = accountWithMaxDeriv.mnemonic as string;
 
     const [address, privateHex, publicHex] = deriveAddress(mne, newDerivPath);
 
@@ -147,7 +151,7 @@ export default class ImportAccountView extends Vue {
       await db.settings.update(MASTER_SETTINGS_KEY, {
         activeDid: newId.did,
       });
-      this.$router.push({ name: "account" });
+      (this.$router as Router).push({ name: "account" });
     } catch (err) {
       console.error("Error saving mnemonic & updating settings:", err);
     }
diff --git a/src/views/NewEditAccountView.vue b/src/views/NewEditAccountView.vue
index e20fc11d7..681ae06b8 100644
--- a/src/views/NewEditAccountView.vue
+++ b/src/views/NewEditAccountView.vue
@@ -45,6 +45,8 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+
 import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 
@@ -68,11 +70,11 @@ export default class NewEditAccountView extends Vue {
       firstName: this.givenName,
       lastName: "", // deprecated, pre v 0.1.3
     });
-    this.$router.back();
+    (this.$router as Router).back();
   }
 
   onClickCancel() {
-    this.$router.back();
+    (this.$router as Router).back();
   }
 }
 </script>
diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index 2aecc06e3..6d5f4d0f8 100644
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -180,6 +180,7 @@ import { AxiosError, AxiosRequestHeaders } from "axios";
 import { DateTime } from "luxon";
 import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
+import { Router } from "vue-router";
 
 import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
@@ -423,7 +424,7 @@ export default class NewEditProjectView extends Vue {
         useAppStore()
           .setProjectId(resp.data.success.handleId)
           .then(() => {
-            this.$router.push({ name: "project" });
+            (this.$router as Router).push({ name: "project" });
           });
       } else {
         console.error(
@@ -521,7 +522,7 @@ export default class NewEditProjectView extends Vue {
   }
 
   public onCancelClick() {
-    this.$router.back();
+    (this.$router as Router).back();
   }
 }
 </script>
diff --git a/src/views/NewIdentifierView.vue b/src/views/NewIdentifierView.vue
index 76030266e..4ff77eb9b 100644
--- a/src/views/NewIdentifierView.vue
+++ b/src/views/NewIdentifierView.vue
@@ -54,6 +54,8 @@
 <script lang="ts">
 import "dexie-export-import";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+
 import { generateSaveAndActivateIdentity } from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";
 
@@ -65,7 +67,7 @@ export default class NewIdentifierView extends Vue {
     await generateSaveAndActivateIdentity();
     this.loading = false;
     setTimeout(() => {
-      this.$router.push({ name: "home" });
+      (this.$router as Router).push({ name: "home" });
     }, 1000);
   }
 }
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 6843d19ae..c48d76785 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -404,6 +404,7 @@
 <script lang="ts">
 import { AxiosError } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import OfferDialog from "@/components/OfferDialog.vue";
@@ -423,7 +424,9 @@ import {
   getHeaders,
   GiverReceiverInputInfo,
   GiveSummaryRecord,
+  GiveVerifiableCredential,
   OfferSummaryRecord,
+  OfferVerifiableCredential,
   PlanSummaryRecord,
 } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
@@ -496,7 +499,7 @@ export default class ProjectViewView extends Vue {
     const route = {
       name: "new-edit-project",
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   // Isn't there a better way to make this available to the template?
@@ -820,7 +823,7 @@ export default class ProjectViewView extends Vue {
     const route = {
       path: "/project/" + encodeURIComponent(projectId),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
     this.loadProject(projectId, this.activeDid);
   }
 
@@ -856,18 +859,18 @@ export default class ProjectViewView extends Vue {
     const route = {
       name: "contact-gift",
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   onClickLoadClaim(jwtId: string) {
     const route = {
       path: "/claim/" + encodeURIComponent(jwtId),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   checkIsFulfillable(offer: OfferSummaryRecord) {
-    const offerRecord: GenericCredWrapper = {
+    const offerRecord: GenericCredWrapper<OfferVerifiableCredential> = {
       ...BLANK_GENERIC_SERVER_RECORD,
       claim: offer.fullClaim,
       claimType: "Offer",
@@ -877,7 +880,7 @@ export default class ProjectViewView extends Vue {
   }
 
   onClickFulfillGiveToOffer(offer: OfferSummaryRecord) {
-    const offerRecord: GenericCredWrapper = {
+    const offerRecord: GenericCredWrapper<OfferVerifiableCredential> = {
       ...BLANK_GENERIC_SERVER_RECORD,
       claim: offer.fullClaim,
       issuer: offer.offeredByDid,
@@ -922,7 +925,7 @@ export default class ProjectViewView extends Vue {
   }
 
   checkIsConfirmable(give: GiveSummaryRecord) {
-    const giveDetails: GenericCredWrapper = {
+    const giveDetails: GenericCredWrapper<GiveVerifiableCredential> = {
       ...BLANK_GENERIC_SERVER_RECORD,
       claim: give.fullClaim,
       claimType: "GiveAction",
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index c967e2be1..74829c037 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -229,6 +229,7 @@
 <script lang="ts">
 import { AxiosRequestConfig } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
@@ -364,7 +365,7 @@ export default class ProjectsView extends Vue {
     const route = {
       path: "/project/" + encodeURIComponent(id),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   /**
@@ -375,14 +376,14 @@ export default class ProjectsView extends Vue {
     const route = {
       name: "new-edit-project",
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   onClickLoadClaim(jwtId: string) {
     const route = {
       path: "/claim/" + encodeURIComponent(jwtId),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   /**
diff --git a/src/views/QuickActionBvcEndView.vue b/src/views/QuickActionBvcEndView.vue
index e89acb8e2..0fb89fe07 100644
--- a/src/views/QuickActionBvcEndView.vue
+++ b/src/views/QuickActionBvcEndView.vue
@@ -139,6 +139,7 @@ import axios from "axios";
 import { DateTime } from "luxon";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
@@ -174,7 +175,7 @@ export default class QuickActionBvcBeginView extends Vue {
   apiServer = "";
   claimCountByUser = 0;
   claimCountWithHidden = 0;
-  claimsToConfirm: GenericCredWrapper[] = [];
+  claimsToConfirm: GenericCredWrapper<GenericVerifiableCredential>[] = [];
   claimsToConfirmSelected: string[] = [];
   description = "breakfast";
   loadingConfirms = true;
@@ -227,7 +228,8 @@ export default class QuickActionBvcBeginView extends Vue {
       }
       await response.json().then((data) => {
         const dataByOthers = R.reject(
-          (claim: GenericCredWrapper) => claim.issuer === this.activeDid,
+          (claim: GenericCredWrapper<GenericVerifiableCredential>) =>
+            claim.issuer === this.activeDid,
           data,
         );
         const dataByOthersWithoutHidden = R.reject(
@@ -258,7 +260,7 @@ export default class QuickActionBvcBeginView extends Vue {
     const route = {
       path: "/claim/" + encodeURIComponent(jwtId),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   async record() {
diff --git a/src/views/SearchAreaView.vue b/src/views/SearchAreaView.vue
index ad71b84b9..5a280da7a 100644
--- a/src/views/SearchAreaView.vue
+++ b/src/views/SearchAreaView.vue
@@ -105,6 +105,7 @@ import {
   LRectangle,
   LTileLayer,
 } from "@vue-leaflet/vue-leaflet";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
@@ -213,7 +214,7 @@ export default class DiscoverView extends Vue {
           },
           7000,
         );
-        this.$router.back();
+        (this.$router as Router).back();
       } catch (err) {
         this.$notify(
           {
diff --git a/src/views/SharedPhotoView.vue b/src/views/SharedPhotoView.vue
index 25abdfde7..7779d1c95 100644
--- a/src/views/SharedPhotoView.vue
+++ b/src/views/SharedPhotoView.vue
@@ -55,6 +55,7 @@
 <script lang="ts">
 import axios from "axios";
 import { Component, Vue } from "vue-facing-decorator";
+import { RouteLocationRaw, Router } from "vue-router";
 
 import PhotoDialog from "@/components/PhotoDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
@@ -92,7 +93,9 @@ export default class SharedPhotoView extends Vue {
         // clear the temp image
         db.temp.delete("shared-photo");
 
-        this.imageFileName = this.$route.query.fileName as string;
+        this.imageFileName = (this.$route as Router).query[
+          "fileName"
+        ] as string;
       }
     } catch (err: unknown) {
       console.error("Got an error loading an identifier:", err);
@@ -111,15 +114,17 @@ export default class SharedPhotoView extends Vue {
   async recordGift() {
     await this.sendToImageServer("GiveAction").then((url) => {
       if (url) {
-        this.$router.push({
+        const route = {
           name: "gifted-details",
+          // this might be wrong since "name" goes with params, but it works so test well when you change it
           query: {
             destinationPathAfter: "/home",
             hideBackButton: true,
             imageUrl: url,
             recipientDid: this.activeDid,
           },
-        });
+        } as RouteLocationRaw;
+        (this.$router as Router).push(route);
       }
     });
   }
@@ -130,7 +135,7 @@ export default class SharedPhotoView extends Vue {
         await db.settings.update(MASTER_SETTINGS_KEY, {
           profileImageUrl: imgUrl,
         });
-        this.$router.push({ name: "account" });
+        (this.$router as Router).push({ name: "account" });
       },
       IMAGE_TYPE_PROFILE,
       true,
@@ -142,7 +147,7 @@ export default class SharedPhotoView extends Vue {
   async cancel() {
     this.imageBlob = undefined;
     this.imageFileName = undefined;
-    this.$router.push({ name: "home" });
+    (this.$router as Router).push({ name: "home" });
   }
 
   async sendToImageServer(imageType: string) {
diff --git a/src/views/StartView.vue b/src/views/StartView.vue
index 002db613b..5190f5b58 100644
--- a/src/views/StartView.vue
+++ b/src/views/StartView.vue
@@ -88,6 +88,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import { AppString, PASSKEYS_ENABLED } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
@@ -113,22 +114,22 @@ export default class StartView extends Vue {
   }
 
   public onClickNewSeed() {
-    this.$router.push({ name: "new-identifier" });
+    (this.$router as Router).push({ name: "new-identifier" });
   }
 
   public async onClickNewPasskey() {
     const keyName =
       AppString.APP_NAME + (this.givenName ? " - " + this.givenName : "");
     await registerSaveAndActivatePasskey(keyName);
-    this.$router.push({ name: "account" });
+    (this.$router as Router).push({ name: "account" });
   }
 
   public onClickNo() {
-    this.$router.push({ name: "import-account" });
+    (this.$router as Router).push({ name: "import-account" });
   }
 
   public onClickDerive() {
-    this.$router.push({ name: "import-derive" });
+    (this.$router as Router).push({ name: "import-derive" });
   }
 }
 </script>
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 9d1324275..4570f0e70 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -242,6 +242,7 @@ import { Buffer } from "buffer/";
 import { Base64URLString } from "@simplewebauthn/types";
 import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { AppString, NotificationIface } from "@/constants/app";
@@ -349,7 +350,7 @@ export default class Help extends Vue {
             this.userName = DEFAULT_USERNAME;
           },
           onYes: async () => {
-            this.$router.push({ name: "new-edit-account" });
+            (this.$router as Router).push({ name: "new-edit-account" });
           },
           noText: "try again and use " + DEFAULT_USERNAME,
         },