From ebfdeffa4df26fbca4b4ab15304fc4e9cdf546f0 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Wed, 4 Dec 2024 10:20:40 +0100
Subject: [PATCH] fix tx history issue if has guess

---
 components/ui/PrivateTxHistory.vue | 227 +++++++++++++++--------------
 1 file changed, 119 insertions(+), 108 deletions(-)

diff --git a/components/ui/PrivateTxHistory.vue b/components/ui/PrivateTxHistory.vue
index d2aaeea..5edd4d1 100644
--- a/components/ui/PrivateTxHistory.vue
+++ b/components/ui/PrivateTxHistory.vue
@@ -1,124 +1,130 @@
 <template>
-  <div v-if="show" class="mt-10 flex justify-between items-center">
-    <div class="title text-2xl font-bold tracking-tight text-white sm:text-2xl">
-      History
+  <div v-if="show">
+    <div class="mt-10 flex justify-between items-center">
+      <div
+        class="title text-2xl font-bold tracking-tight text-white sm:text-2xl"
+      >
+        History
+      </div>
     </div>
-  </div>
 
-  <div class="mb-10">
-    <div v-if="show" class="mt-6 overflow-hidden bg-gray-900 rounded-md">
-      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
-          <table class="w-full text-left">
-            <tbody>
-              <tr
-                v-for="(note, index) in noteStore.getFinancialNotes"
-                :key="index"
-              >
-                <td class="relative py-5 pr-6">
-                  <div class="flex gap-x-6">
-                    <div v-if="note.direction === NoteDirection.Incoming">
+    <div class="mb-10">
+      <div class="mt-6 overflow-hidden bg-gray-900 rounded-md">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
+            <table class="w-full text-left">
+              <tbody>
+                <tr
+                  v-for="(note, index) in noteStore.getFinancialNotes"
+                  :key="index"
+                >
+                  <td class="relative py-5 pr-6">
+                    <div class="flex gap-x-6">
+                      <div v-if="note.direction === NoteDirection.Incoming">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                          class="size-5 text-gray-400"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-.53 14.03a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V8.25a.75.75 0 0 0-1.5 0v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3Z"
+                            clip-rule="evenodd"
+                          />
+                        </svg>
+                      </div>
+                      <div v-else>
+                        <svg
+                          class="h-6 w-5 flex-none text-gray-400 sm:block"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          aria-hidden="true"
+                          data-slot="icon"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-.75-4.75a.75.75 0 0 0 1.5 0V8.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L6.2 9.74a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z"
+                            clip-rule="evenodd"
+                          />
+                        </svg>
+                      </div>
+                      <div class="flex-auto">
+                        <div class="flex items-start gap-x-3">
+                          <div class="text-sm/6 font-medium text-white">
+                            {{ note.category }}
+                          </div>
+                        </div>
+                        <div
+                          class="mt-1 text-xs/5 text-gray-500 wallet-address whitespace-nowrap"
+                        >
+                          {{ displayAccount(note.account) }}
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="absolute right-full bottom-0 h-px w-screen bg-gray-50/20"
+                    ></div>
+                    <div
+                      class="absolute bottom-0 left-0 h-px w-screen bg-gray-50/20"
+                    ></div>
+                  </td>
+                  <td class="py-5 pr-6 sm:table-cell">
+                    <div
+                      v-if="note.amount"
+                      class="text-sm/6 font-medium text-white"
+                    >
+                      {{
+                        note.direction === NoteDirection.Incoming ? "+" : "-"
+                      }}
+                      {{
+                        divideBigIntToFloat(
+                          note.amount,
+                          10 ** accountStore.getDecimals,
+                        )
+                      }}
+                      TEER
+                    </div>
+                    <time class="mt-1 text-xs/5 text-gray-500">{{
+                      formatDate(note.timestamp)
+                    }}</time>
+                  </td>
+                  <td class="py-5 text-right">
+                    <div v-if="note.note?.length > 0" class="flex justify-end">
                       <svg
+                        @click="openViewMore(note)"
                         viewBox="0 0 24 24"
                         fill="currentColor"
-                        class="size-5 text-gray-400"
+                        class="size-5 cursor-pointer"
                       >
                         <path
-                          fill-rule="evenodd"
-                          d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-.53 14.03a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V8.25a.75.75 0 0 0-1.5 0v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3Z"
-                          clip-rule="evenodd"
+                          d="M11.625 16.5a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75Z"
                         />
-                      </svg>
-                    </div>
-                    <div v-else>
-                      <svg
-                        class="h-6 w-5 flex-none text-gray-400 sm:block"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        data-slot="icon"
-                      >
                         <path
                           fill-rule="evenodd"
-                          d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-.75-4.75a.75.75 0 0 0 1.5 0V8.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L6.2 9.74a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z"
+                          d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6 16.5c.66 0 1.277-.19 1.797-.518l1.048 1.048a.75.75 0 0 0 1.06-1.06l-1.047-1.048A3.375 3.375 0 1 0 11.625 18Z"
                           clip-rule="evenodd"
                         />
+                        <path
+                          d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
+                        />
                       </svg>
                     </div>
-                    <div class="flex-auto">
-                      <div class="flex items-start gap-x-3">
-                        <div class="text-sm/6 font-medium text-white">
-                          {{ note.category }}
-                        </div>
-                      </div>
-                      <div
-                        class="mt-1 text-xs/5 text-gray-500 wallet-address whitespace-nowrap"
-                      >
-                        {{ displayAccount(note.account) }}
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="absolute right-full bottom-0 h-px w-screen bg-gray-50/20"
-                  ></div>
-                  <div
-                    class="absolute bottom-0 left-0 h-px w-screen bg-gray-50/20"
-                  ></div>
-                </td>
-                <td class="py-5 pr-6 sm:table-cell">
-                  <div
-                    v-if="note.amount"
-                    class="text-sm/6 font-medium text-white"
-                  >
-                    {{ note.direction === NoteDirection.Incoming ? "+" : "-" }}
-                    {{
-                      divideBigIntToFloat(
-                        note.amount,
-                        10 ** accountStore.getDecimals,
-                      )
-                    }}
-                    TEER
-                  </div>
-                  <time class="mt-1 text-xs/5 text-gray-500">{{
-                    formatDate(note.timestamp)
-                  }}</time>
-                </td>
-                <td class="py-5 text-right">
-                  <div v-if="note.note?.length > 0" class="flex justify-end">
-                    <svg
-                      @click="openViewMore(note)"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      class="size-5 cursor-pointer"
-                    >
-                      <path
-                        d="M11.625 16.5a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75Z"
-                      />
-                      <path
-                        fill-rule="evenodd"
-                        d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6 16.5c.66 0 1.277-.19 1.797-.518l1.048 1.048a.75.75 0 0 0 1.06-1.06l-1.047-1.048A3.375 3.375 0 1 0 11.625 18Z"
-                        clip-rule="evenodd"
-                      />
-                      <path
-                        d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
-                      />
-                    </svg>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
+      <div class="mt-5 flex justify-center text-gray-500">
+        <button @click="fetchOlderBucket">
+          fetch more events
+          {{ accountStore.hasInjector ? "(needs signature)" : "" }}
+        </button>
+      </div>
+      <!-- this is necessary to avoid the footer overlapping the text -->
+      <br /><br /><br /><br /><br /><br /><br />
     </div>
-    <div class="mt-5 flex justify-center text-gray-500">
-      <button @click="fetchOlderBucket">
-        fetch more events
-        {{ accountStore.hasInjector ? "(needs signature)" : "" }}
-      </button>
-    </div>
-    <!-- this is necessary to avoid the footer overlapping the text -->
-    <br /><br /><br /><br /><br /><br /><br />
   </div>
   <NoteDetailsOverlay
     :show="showViewMore"
@@ -145,13 +151,18 @@ const identityLut = wellKnownIdentities;
 const accountStore = useAccount();
 const noteStore = useNotes();
 
-const displayAccount = computed(() => (account: string) => {
-  if (account === accountStore.getAddress) {
+const displayAccount = computed(() => (account: string | null) => {
+  if (account == null || account === accountStore.getAddress) {
     return "You";
   }
-  const pdotAddress = encodeAddress(account, 0);
-  const identity = identityLut.find((i) => i.address === pdotAddress);
-  return identity ? identity.username + " " + account : account;
+  try {
+    const pdotAddress = encodeAddress(account, 0);
+    const identity = identityLut.find((i) => i.address === pdotAddress);
+    return identity ? identity.username + " " + account : account;
+  } catch (e) {
+    console.warn("could not decode address", account);
+    return "unknown";
+  }
 });
 
 const props = defineProps({