display more info on bucket range and give spinner feedback when loading

integritee-network · Nov 25, 2024 · 9f13a4a · 9f13a4a
1 parent 4d9d354
commit 9f13a4a
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 3 deletions.
diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
@@ -117,6 +117,7 @@
                 query recent chats
                 {{ accountStore.hasInjector ? "(needs signature)" : "" }}
               </button>
+              <div v-if="isUpdatingNotes" class="spinner"></div>
             </div>
             <div
               v-for="(
@@ -174,11 +175,26 @@
         </div>
         <!-- Chat Messages -->
         <div class="flex-1 overflow-y-auto">
-          <div class="mt-5 flex justify-center text-gray-500">
+          <div
+            v-if="eventHorizon"
+            class="mt-5 flex justify-center text-gray-500"
+          >
+            <i
+              >messages before {{ formatMoment(eventHorizon) }} have been purged
+              from Incognitee state</i
+            >
+          </div>
+          <div
+            v-if="unfetchedBucketsCount > 0"
+            class="mt-5 flex justify-center text-gray-500"
+          >
             <button @click="fetchOlderBucket">
               query more messages
-              {{ accountStore.hasInjector ? "(needs signature)" : "" }}
+              {{ accountStore.hasInjector ? "(needs signature)" : "" }}: fetch
+              bucket {{ bucketsCount - unfetchedBucketsCount }} /
+              {{ bucketsCount }}
             </button>
+            <div v-if="isUpdatingNotes" class="spinner"></div>
           </div>
           <PrivateMessageHistory
             :show="true"
@@ -354,7 +370,7 @@ import { QrcodeStream } from "vue-qrcode-reader";
 import { useInterval } from "@vueuse/core";
 import { decodeAddress, encodeAddress } from "@polkadot/util-crypto";
 import identities from "@/lib/polkadotPeopleIdentites";
-import { formatDate } from "@/helpers/date";
+import { formatMoment } from "@/helpers/date";
 import { useNotes } from "@/store/notes.ts";
 import { Note, NoteDirection } from "@/lib/notes";
 import { divideBigIntToFloat } from "@/helpers/numbers";
@@ -507,6 +523,7 @@ const recipientValid = (recipient: string): boolean => {
 };
 // Watcher to close overlay when a valid address is entered
 watch(conversationAddress, (newAddress) => {
+  console.log("eventHorizon is " + props.eventHorizon);
   if (showNewRecipientOverlay.value && recipientValid(newAddress)) {
     conversationAddress.value = encodeAddress(
       conversationAddress.value,
@@ -629,10 +646,20 @@ const props = defineProps({
     type: Function,
     required: true,
   },
+  isUpdatingNotes: {
+    type: Boolean,
+    required: true,
+  },
   fetchOlderBucket: {
     type: Function,
     required: true,
   },
+  eventHorizon: {
+    type: Number,
+    required: true,
+  },
+  bucketsCount: { type: Number, required: true },
+  unfetchedBucketsCount: { type: Number, required: true },
 });
 // Reactive variable for the input text
 const inputText = ref("");

diff --git a/pages/index.vue b/pages/index.vue
@@ -17,7 +17,11 @@
     <MessagingTab
       :isMobile="isMobile"
       :updateNotes="updateNotes"
+      :isUpdatingNotes="isUpdatingNotes"
       :fetchOlderBucket="fetchOlderBucket"
+      :eventHorizon="oldestMomentInNoteBuckets"
+      :bucketsCount="bucketsCount"
+      :unfetchedBucketsCount="unfetchedBucketsCount"
     />
   </div>
   <div v-else-if="activeApp === 'swap'"><SwapTab /></div>
@@ -148,6 +152,7 @@ const walletTabRef = ref(null);
 const isFetchingShieldingTargetBalance = ref(true);
 const isFetchingIncogniteeBalance = ref(true);
 const isUpdatingIncogniteeBalance = ref(false);
+const isUpdatingNotes = ref(false);
 const isChoosingAccount = ref(false);
 const disableGetter = ref(false);
 const activeApp = ref("wallet");
@@ -316,10 +321,37 @@ const fetchOlderBucket = async () => {
     ? firstNoteBucketIndexFetched.value - 1
     : lastBucketIndex;
   console.log("fetchOlderBuckets : " + firstNoteBucketIndexFetched.value);
+  isUpdatingNotes.value = true;
   await fetchIncogniteeNotes(index);
   firstNoteBucketIndexFetched.value = index;
+  isUpdatingNotes.value = false;
 };
 
+/// returns the date as moment before which all notes have been purged from sidechain state
+const oldestMomentInNoteBuckets = computed(() => {
+  console.log(
+    "oldest moment is " + noteBucketsInfo.value?.first.unwrap().begins_at,
+  );
+  return noteBucketsInfo.value?.first.unwrap().begins_at?.toNumber();
+});
+
+const bucketsCount = computed(() => {
+  if (!noteBucketsInfo.value) return 0;
+  return (
+    noteBucketsInfo.value.last.unwrap().index -
+    noteBucketsInfo.value.first.unwrap().index +
+    1
+  );
+});
+
+const unfetchedBucketsCount = computed(() => {
+  if (!noteBucketsInfo.value) return 0;
+  return (
+    firstNoteBucketIndexFetched.value -
+    noteBucketsInfo.value.first.unwrap().index
+  );
+});
+
 const fetchIncogniteeNotes = async (
   bucketIndex: number,
   skip_if_signer_needed: boolean,