add toggle for displaying give amounts for each contact

project.yaml

@@ -12,6 +12,7 @@
 - replace user-affecting console.logs with error messages (eg. catches)
 
 - contacts
+  - make advanced "show/hide amounts" button into a nice UI toggle
 
 - commit screen
 

src/db/tables/index.ts

@@ -19,6 +19,7 @@ export type Settings = {
   id: number;
   firstName?: string;
   lastName?: string;
+  showContactGivesInline?: boolean;
 };
 
 export const SettingsSchema = {

src/views/AccountViewView.vue

@@ -169,6 +169,21 @@
       </form>
     </dialog>
 
+    <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>
+
     <div v-bind:class="computedAlertClassNames()">
       <button
         class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@@ -203,6 +218,8 @@ export default class AccountViewView extends Vue {
   mnemonic = "";
   publicHex = "";
   derivationPath = "";
+  showContactGives = false;
+
   copy = useClipboard().copy;
 
   // 'created' hook runs when the Vue instance is first created
@@ -213,6 +230,7 @@ export default class AccountViewView extends Vue {
       if (settings) {
         this.firstName = settings.firstName || "";
         this.lastName = settings.lastName || "";
+        this.showContactGives = !!settings.showContactGivesInline;
       }
 
       const numAccounts = await db.accounts.count();
@@ -251,6 +269,32 @@ export default class AccountViewView extends Vue {
     this.derivationPath = identity.keys[0].meta.derivationPath;
   }
 
+  public async toggleShowContactAmounts() {
+    this.showContactGives = !this.showContactGives;
+    try {
+      await db.open();
+      const settings = await db.settings.get(MASTER_SETTINGS);
+      if (settings) {
+        db.settings.update(MASTER_SETTINGS, {
+          showContactGivesInline: this.showContactGives,
+        });
+      }
+    } catch (err) {
+      this.alertMessage =
+        "Clear your cache and start over (after data backup). See console log for more info.";
+      console.log("Telling user to clear cache because:", err);
+      this.alertTitle = "Error Creating Account";
+      this.isAlertVisible = true;
+    }
+  }
+
+  public showContactGivesClassNames() {
+    return {
+      "bg-slate-900": !this.showContactGives,
+      "bg-green-600": this.showContactGives,
+    };
+  }
+
   alertMessage = "";
   alertTitle = "";
   isAlertVisible = false;