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.

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, {