feat: add a page for details about contact transactions (which I'll fill in soon)

src/router/index.ts

@@ -23,12 +23,6 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
   },
-  {
-    path: "/start",
-    name: "start",
-    component: () =>
-      import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
-  },
   {
     path: "/account",
     name: "account",
@@ -43,6 +37,14 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "confirm-contact" */ "../views/ConfirmContactView.vue"
       ),
   },
+  {
+    path: "/contact-amounts",
+    name: "contact-amounts",
+    component: () =>
+      import(
+        /* webpackChunkName: "contact-amounts" */ "../views/ContactAmountsView.vue"
+      ),
+  },
   {
     path: "/contacts",
     name: "contacts",
@@ -93,12 +95,6 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "new-edit-commitment" */ "../views/NewEditCommitmentView.vue"
       ),
   },
-  {
-    path: "/project",
-    name: "project",
-    component: () =>
-      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
-  },
   {
     path: "/new-edit-project",
     name: "new-edit-project",
@@ -107,6 +103,12 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "new-edit-project" */ "../views/NewEditProjectView.vue"
       ),
   },
+  {
+    path: "/project",
+    name: "project",
+    component: () =>
+      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
+  },
   {
     path: "/projects",
     name: "projects",
@@ -114,12 +116,10 @@ const routes: Array<RouteRecordRaw> = [
       import(/* webpackChunkName: "projects" */ "../views/ProjectsView.vue"),
   },
   {
-    path: "/commitments",
+    path: "/start",
-    name: "commitments",
+    name: "start",
     component: () =>
-      import(
+      import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
-        /* webpackChunkName: "commitments" */ "../views/CommitmentsView.vue"
-      ),
   },
 ];
 

src/views/CommitmentsView.vue

@@ -1,3 +0,0 @@
-<template>
-  <section id="Content" class="p-6 pb-24"></section>
-</template>

src/views/ContactAmountsView.vue

@@ -0,0 +1,70 @@
+<template>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
+          ><fa icon="house-chimney" class="fa-fw"></fa
+        ></router-link>
+      </li>
+      <!-- Search -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'discover' }"
+          class="block text-center py-3 px-1"
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
+        ></router-link>
+      </li>
+      <!-- Contacts -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'projects' }"
+          class="block text-center py-3 px-1"
+          ><fa icon="folder-open" class="fa-fw"></fa
+        ></router-link>
+      </li>
+      <!-- Contacts -->
+      <li class="basis-1/5 rounded-md text-slate-400">
+        <router-link
+          :to="{ name: 'contacts' }"
+          class="block text-center py-3 px-1"
+          ><fa icon="users" class="fa-fw"></fa
+        ></router-link>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'account' }"
+          class="block text-center py-3 px-1"
+          ><fa icon="circle-user" class="fa-fw"></fa
+        ></router-link>
+      </li>
+    </ul>
+  </nav>
+
+  <section id="Content" class="p-6 pb-24">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Transactions with {{ contact?.name }}
+    </h1>
+    <div>{{ contact?.did }}</div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { Contact } from "@/db/tables/contacts";
+import { db } from "@/db";
+
+@Options({})
+export default class ContactsView extends Vue {
+  contact: Contact | null = null;
+
+  // 'created' hook runs when the Vue instance is first created
+  async created() {
+    await db.open();
+    const contactDid = this.$route.query.contactDid as string;
+    this.contact = (await db.contacts.get(contactDid)) || null;
+  }
+}
+</script>

src/views/ContactsView.vue

@@ -661,11 +661,36 @@ export default class ContactsView extends Vue {
       this.alertMessage = "No identity is available.";
       this.isAlertVisible = true;
     } else {
+      // if they have unconfirmed amounts, ask to confirm those first
+      let wantsToConfirm = false;
+      if (
+        toDid == this.identity?.did &&
+        this.givenToMeUnconfirmed[fromDid] > 0
+      ) {
+        if (
+          confirm(
+            "There are " +
+              this.givenToMeUnconfirmed[fromDid] +
+              " unconfirmed hours from them." +
+              " Would you like to confirm some of those hours?"
+          )
+        ) {
+          wantsToConfirm = true;
+        }
+      }
+      if (wantsToConfirm) {
+        this.$router.push({
+          name: "contact-amounts",
+          query: { contactDid: fromDid },
+        });
+      } else {
+        // ask to confirm amount
         let toFrom;
         if (fromDid == this.identity?.did) {
           toFrom = "from you to " + this.nameForDid(this.contacts, toDid);
         } else {
-        toFrom = "from " + this.nameForDid(this.contacts, fromDid) + " to you";
+          toFrom =
+            "from " + this.nameForDid(this.contacts, fromDid) + " to you";
         }
         let description;
         if (this.hourDescriptionInput) {
@@ -693,6 +718,7 @@ export default class ContactsView extends Vue {
         }
       }
     }
+  }
 
   private async createAndSubmitGive(
     identity: IIdentifier,