Title: Updates to packages, new decorators, and implement slider

Description:  It has been a while since packages have been updated.  I've switched to the vue-facing-decorators since the old decorators are deprecated.  Also, using a model for the checkbox value and a change handler on the surrounding label instead of the checkbox itself.

package.json

@@ -9,52 +9,53 @@
   },
   "dependencies": {
     "@ethersproject/hdnode": "^5.7.0",
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/vue-fontawesome": "^3.0.2",
-    "@pvermeer/dexie-encrypted-addon": "^2.0.2",
-    "@veramo/core": "^4.1.1",
-    "@veramo/credential-w3c": "^4.1.1",
-    "@veramo/data-store": "^4.1.1",
-    "@veramo/did-manager": "^4.1.1",
-    "@veramo/did-provider-ethr": "^4.1.2",
-    "@veramo/did-resolver": "^4.1.1",
-    "@veramo/key-manager": "^4.1.1",
-    "@vueuse/core": "^9.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@pvermeer/dexie-encrypted-addon": "^2.0.5",
+    "@veramo/core": "^5.1.2",
+    "@veramo/credential-w3c": "^5.1.4",
+    "@veramo/data-store": "^5.1.2",
+    "@veramo/did-manager": "^5.1.2",
+    "@veramo/did-provider-ethr": "^5.1.2",
+    "@veramo/did-resolver": "^5.1.2",
+    "@veramo/key-manager": "^5.1.2",
+    "@vueuse/core": "^9.13.0",
     "@zxing/text-encoding": "^0.9.0",
-    "axios": "^1.2.2",
+    "axios": "^1.3.4",
     "buffer": "^6.0.3",
     "class-transformer": "^0.5.1",
-    "core-js": "^3.26.1",
-    "dexie": "^3.2.2",
-    "dexie-export-import": "^4.0.6",
-    "did-jwt": "^6.9.0",
-    "ethereum-cryptography": "^1.1.2",
+    "core-js": "^3.29.1",
+    "dexie": "^3.2.3",
+    "dexie-export-import": "^4.0.7",
+    "did-jwt": "^6.11.5",
+    "ethereum-cryptography": "^1.2.0",
     "ethereumjs-util": "^7.1.5",
     "ethr-did-resolver": "^8.0.0",
     "js-generate-password": "^0.1.7",
-    "localstorage-slim": "^2.3.0",
-    "luxon": "^3.1.1",
+    "localstorage-slim": "^2.4.0",
+    "luxon": "^3.3.0",
     "merkletreejs": "^0.3.9",
     "moment": "^2.29.4",
-    "papaparse": "^5.3.2",
+    "papaparse": "^5.4.1",
     "pina": "^0.20.2204228",
-    "pinia-plugin-persistedstate": "^3.0.1",
+    "pinia-plugin-persistedstate": "^3.1.0",
     "ramda": "^0.28.0",
-    "readable-stream": "^4.2.0",
+    "readable-stream": "^4.3.0",
     "reflect-metadata": "^0.1.13",
     "register-service-worker": "^1.7.2",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
     "vue-axios": "^3.5.2",
     "vue-class-component": "^8.0.0-0",
+    "vue-facing-decorator": "^2.1.19",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^4.1.6",
-    "web-did-resolver": "^2.0.21"
+    "web-did-resolver": "^2.0.22"
   },
   "devDependencies": {
-    "@types/ramda": "^0.28.20",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@types/ramda": "^0.28.23",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-pwa": "~5.0.8",
@@ -63,14 +64,14 @@
     "@vue/cli-plugin-vuex": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "autoprefixer": "^10.4.13",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.8.0",
-    "postcss": "^8.4.19",
-    "prettier": "^2.8.0",
-    "tailwindcss": "^3.2.4",
-    "typescript": "~4.9.3"
+    "eslint-plugin-vue": "^9.10.0",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.7",
+    "tailwindcss": "^3.3.1",
+    "typescript": "~5.0.3"
   }
 }

src/views/AccountViewView.vue

@@ -179,28 +179,20 @@
 
     <h3 class="text-sm uppercase font-semibold mb-3">Advanced</h3>
 
-    <div class="flex">
-      <button
-        href=""
-        class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6"
-        v-bind:class="showContactGivesClassNames()"
-        @click="toggleShowContactAmounts()"
-      >
-        {{ showContactGives ? "Showing" : "Hiding" }}
-        amounts given with contacts (Click to
-        {{ showContactGives ? "hide" : "show" }})
-      </button>
-    </div>
-
-    <!-- REPLACE above control with this one -->
     <label
       for="toggleShowAmounts"
       class="flex items-center cursor-pointer mb-6"
+      @click="handleChange"
     >
       <!-- toggle -->
       <div class="relative">
         <!-- input -->
-        <input type="checkbox" id="toggleShowAmounts" class="sr-only" />
+        <input
+          type="checkbox"
+          v-model="showContactGives"
+          name="showContactGives"
+          class="sr-only"
+        />
         <!-- line -->
         <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
         <!-- dot -->
@@ -257,7 +249,8 @@
 <script lang="ts">
 import "dexie-export-import";
 import * as R from "ramda";
-import { Options, Vue } from "vue-class-component";
+
+import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
 import { AppString } from "@/constants/app";
@@ -270,7 +263,6 @@ import {
   newIdentifier,
 } from "@/libs/crypto";
 import { AxiosError } from "axios/index";
-//import { testServerRegisterUser } from "../test";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -284,9 +276,7 @@ interface RateLimits {
   nextWeekBeginDateTime: string;
 }
 
-@Options({
-  components: {},
-})
+@Component
 export default class AccountViewView extends Vue {
   activeDid = "";
   derivationPath = "";
@@ -300,6 +290,11 @@ export default class AccountViewView extends Vue {
 
   copy = useClipboard().copy;
 
+  handleChange() {
+    this.showContactGives = !this.showContactGives;
+    this.updateShowContactAmounts();
+  }
+
   readableTime(timeStr: string) {
     return timeStr.substring(0, timeStr.indexOf("T"));
   }
@@ -365,8 +360,7 @@ export default class AccountViewView extends Vue {
     }
   }
 
-  public async toggleShowContactAmounts() {
-    this.showContactGives = !this.showContactGives;
+  public async updateShowContactAmounts() {
     try {
       await db.open();
       db.settings.update(MASTER_SETTINGS_KEY, {