-                to: {{ givenByMeTotals[contact.did] || 0 }}
+                to:
+                {{
+                  /* eslint-disable prettier/prettier */
+                  this.showGiveTotals
+                    ? ((givenByMeConfirmed[contact.did] || 0)
+                       + (givenByMeUnconfirmed[contact.did] || 0))
+                    : this.showGiveConfirmed
+                        ? (givenByMeConfirmed[contact.did] || 0)
+                        : (givenByMeUnconfirmed[contact.did] || 0)
+                  /* eslint-enable prettier/prettier */
+                }}
                 {{
                   givenByMeDescriptions[contact.did]
                 }}
@@ -150,7 +176,17 @@
                 
               
               
-                by: {{ givenToMeTotals[contact.did] || 0 }}
+                by:
+                {{
+                  /* eslint-disable prettier/prettier */
+                  this.showGiveTotals
+                    ? ((givenToMeConfirmed[contact.did] || 0)
+                        + (givenToMeUnconfirmed[contact.did] || 0))
+                    : this.showGiveConfirmed
+                        ? (givenToMeConfirmed[contact.did] || 0)
+                        : (givenToMeUnconfirmed[contact.did] || 0)
+                  /* eslint-enable prettier/prettier */
+                }}
                 
                   {{ givenToMeDescriptions[contact.did] }}
                 
@@ -234,15 +270,21 @@ export default class ContactsView extends Vue {
   // { "did:...": concatenated-descriptions } entry for each contact
   givenByMeDescriptions: Record = {};
   // { "did:...": amount } entry for each contact
-  givenByMeTotals: Record = {};
+  givenByMeConfirmed: Record = {};
+  // { "did:...": amount } entry for each contact
+  givenByMeUnconfirmed: Record = {};
   // { "did:...": concatenated-descriptions } entry for each contact
   givenToMeDescriptions: Record = {};
   // { "did:...": amount } entry for each contact
-  givenToMeTotals: Record = {};
+  givenToMeConfirmed: Record = {};
+  // { "did:...": amount } entry for each contact
+  givenToMeUnconfirmed: Record = {};
   hourDescriptionInput = "";
   hourInput = "0";
   identity: IIdentifier | null = null;
-  showGiveTotals = false;
+  showGiveNumbers = false;
+  showGiveTotals = true;
+  showGiveConfirmed = true;
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
@@ -252,8 +294,8 @@ export default class ContactsView extends Vue {
 
     await db.open();
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-    this.showGiveTotals = !!settings?.showContactGivesInline;
-    if (this.showGiveTotals) {
+    this.showGiveNumbers = !!settings?.showContactGivesInline;
+    if (this.showGiveNumbers) {
       this.loadGives();
     }
     const allContacts = await db.contacts.toArray();
@@ -315,21 +357,27 @@ export default class ContactsView extends Vue {
       console.log("All your gifts:", resp.data);
       if (resp.status === 200) {
         const contactDescriptions: Record = {};
-        const contactTotals: Record = {};
+        const contactConfirmed: Record = {};
+        const contactUnconfirmed: Record = {};
         const allData: Array = resp.data.data;
         for (const give of allData) {
           if (give.unit == "HUR") {
             const recipDid: string = give.recipientDid;
-            const prevAmount = contactTotals[recipDid] || 0;
-            contactTotals[recipDid] = prevAmount + give.amount;
+            if (give.confirmed) {
+              const prevAmount = contactConfirmed[recipDid] || 0;
+              contactConfirmed[recipDid] = prevAmount + give.amount;
+            } else {
+              const prevAmount = contactUnconfirmed[recipDid] || 0;
+              contactUnconfirmed[recipDid] = prevAmount + give.amount;
+            }
             const prevDesc = contactDescriptions[recipDid] || "";
             // Since many make the tooltip too big, we'll just use the latest;
             contactDescriptions[recipDid] = give.description || prevDesc;
           }
         }
-        //console.log("Done retrieving gives", contactTotals);
+        //console.log("Done retrieving gives", contactConfirmed);
         this.givenByMeDescriptions = contactDescriptions;
-        this.givenByMeTotals = contactTotals;
+        this.givenByMeConfirmed = contactConfirmed;
       }
     } catch (error) {
       this.alertTitle = "Error from Server";
@@ -352,20 +400,26 @@ export default class ContactsView extends Vue {
       console.log("All gifts you've recieved:", resp.data);
       if (resp.status === 200) {
         const contactDescriptions: Record = {};
-        const contactTotals: Record = {};
+        const contactConfirmed: Record = {};
+        const contactUnconfirmed: Record = {};
         const allData: Array = resp.data.data;
         for (const give of allData) {
           if (give.unit == "HUR") {
-            const prevAmount = contactTotals[give.agentDid] || 0;
-            contactTotals[give.agentDid] = prevAmount + give.amount;
+            if (give.confirmed) {
+              const prevAmount = contactConfirmed[give.agentDid] || 0;
+              contactConfirmed[give.agentDid] = prevAmount + give.amount;
+            } else {
+              const prevAmount = contactUnconfirmed[give.agentDid] || 0;
+              contactUnconfirmed[give.agentDid] = prevAmount + give.amount;
+            }
             const prevDesc = contactDescriptions[give.agentDid] || "";
             // Since many make the tooltip too big, we'll just use the latest;
             contactDescriptions[give.agentDid] = give.description || prevDesc;
           }
         }
-        //console.log("Done retrieving receipts", contactTotals);
+        //console.log("Done retrieving receipts", contactConfirmed);
         this.givenToMeDescriptions = contactDescriptions;
-        this.givenToMeTotals = contactTotals;
+        this.givenToMeConfirmed = contactConfirmed;
       }
     } catch (error) {
       this.alertTitle = "Error from Server";
@@ -675,16 +729,17 @@ export default class ContactsView extends Vue {
           this.alertTitle = "";
           this.alertMessage = "";
           if (fromDid === identity.did) {
-            this.givenByMeTotals[toDid] = this.givenByMeTotals[toDid] + amount;
+            this.givenByMeConfirmed[toDid] =
+              this.givenByMeConfirmed[toDid] + amount;
             // do this to update the UI (is there a better way?)
             // eslint-disable-next-line no-self-assign
-            this.givenByMeTotals = this.givenByMeTotals;
+            this.givenByMeConfirmed = this.givenByMeConfirmed;
           } else {
-            this.givenToMeTotals[fromDid] =
-              this.givenToMeTotals[fromDid] + amount;
+            this.givenToMeConfirmed[fromDid] =
+              this.givenToMeConfirmed[fromDid] + amount;
             // do this to update the UI (is there a better way?)
             // eslint-disable-next-line no-self-assign
-            this.givenToMeTotals = this.givenToMeTotals;
+            this.givenToMeConfirmed = this.givenToMeConfirmed;
           }
         }
       } catch (error) {
@@ -707,6 +762,32 @@ export default class ContactsView extends Vue {
     }
   }
 
+  public selectedGiveTotal(
+    contactGivesConfirmed: Record,
+    contactGivesUnconfirmed: Record,
+    did: string
+  ) {
+    /* eslint-disable prettier/prettier */
+    this.showGiveTotals
+      ? ((contactGivesConfirmed[did] || 0) + (contactGivesUnconfirmed[did] || 0))
+      : this.showGiveConfirmed
+        ? (contactGivesConfirmed[did] || 0)
+        : (contactGivesUnconfirmed[did] || 0);
+    /* eslint-enable prettier/prettier */
+  }
+  public toggleShowGiveTotals() {
+    if (this.showGiveTotals) {
+      this.showGiveTotals = false;
+      this.showGiveConfirmed = true;
+    } else if (this.showGiveConfirmed) {
+      this.showGiveTotals = false; // stays the same
+      this.showGiveConfirmed = false;
+    } else {
+      this.showGiveTotals = true;
+      this.showGiveConfirmed = true;
+    }
+  }
+
   alertTitle = "";
   alertMessage = "";
   isAlertVisible = false;
@@ -733,6 +814,14 @@ export default class ContactsView extends Vue {
       "duration-300": true,
     };
   }
+
+  public showGiveAmountsClassNames() {
+    return {
+      "bg-slate-900": this.showGiveTotals,
+      "bg-green-600": !this.showGiveTotals && this.showGiveConfirmed,
+      "bg-yellow-600": !this.showGiveTotals && !this.showGiveConfirmed,
+    };
+  }
 }