Put announcement info on tooltip

ScopeLift · May 22, 2024 · a2764fd · a2764fd
1 parent 9caa3d6
commit a2764fd
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 23 deletions.
diff --git a/frontend/src/components/AccountReceiveTable.vue b/frontend/src/components/AccountReceiveTable.vue
@@ -60,18 +60,39 @@
         >.
       </div>
 
+      <div v-if="scanStatus === 'fetching' || scanStatus === 'complete'">
+        <span class="q-mr-xs">{{ $t('AccountReceiveTable.funds-question') }}</span>
+        <base-tooltip icon="fas fa-question-circle">
+          <span class="text-bold q-mb-sm">
+            {{ $t('AccountReceiveTable.most-recent-announcement') }}
+            <br />
+            {{ $t('AccountReceiveTable.most-recent-block') }} {{ mostRecentAnnouncementBlockNumber }}
+            <br />
+            {{ $t('AccountReceiveTable.most-recent-time') }}
+            {{ formatDate(mostRecentAnnouncementTimestamp * 1000) }}
+            {{ formatTime(mostRecentAnnouncementTimestamp * 1000) }}
+            <br />
+            <div v-if="advancedMode">
+              {{ $t('AccountReceiveTable.most-recent-mined') }}
+              <br />
+              {{ $t('AccountReceiveTable.most-recent-block') }} {{ mostRecentBlockNumber }}
+              <br />
+              {{ $t('AccountReceiveTable.most-recent-time') }}
+              {{ formatDate(mostRecentBlockTimestamp * 1000) }}
+              {{ formatTime(mostRecentBlockTimestamp * 1000) }}
+            </div>
+          </span>
+          <router-link
+            active-class="text-bold"
+            class="hyperlink dark-toggle"
+            :to="{ path: 'faq', hash: '#receiving-funds' }"
+          >
+            {{ $t('AccountReceiveTable.learn-more') }}
+          </router-link>
+        </base-tooltip>
+      </div>
       <div v-if="scanStatus === 'complete'" class="text-caption q-mb-sm">
         <!-- Show the most recent timestamp and block that were scanned -->
-        {{ $t('AccountReceiveTable.most-recent-announcement') }}
-        {{ mostRecentAnnouncementBlockNumber }} /
-        {{ formatDate(mostRecentAnnouncementTimestamp * 1000) }}
-        {{ formatTime(mostRecentAnnouncementTimestamp * 1000) }}
-        <div v-if="advancedMode" class="text-caption q-mb-sm">
-          {{ $t('AccountReceiveTable.most-recent-mined') }}
-          {{ mostRecentBlockNumber }} /
-          {{ formatDate(mostRecentBlockTimestamp * 1000) }}
-          {{ formatTime(mostRecentBlockTimestamp * 1000) }}
-        </div>
         <div v-if="advancedMode" class="text-caption q-mb-sm">
           <!-- This scanDescriptionString describes scan settings that were used -->
           {{ scanDescriptionString }}.

diff --git a/frontend/src/i18n/locales/en-US.json b/frontend/src/i18n/locales/en-US.json
@@ -279,8 +279,11 @@
     "loss-warning": "It looks like you're trying to withdraw your funds to a token contract. It is very likely this is not what you intend, and proceeding will likely result in a loss of funds. Do not proceed unless you know exactly what you are doing.",
     "i-know-what": "I know what I am doing",
     "danger": "Danger",
-    "most-recent-announcement": "Most recent announcement block / timestamp:",
-    "most-recent-mined": "Most recent mined block / timestamp:"
+    "most-recent-announcement": "Most recent announcement",
+    "most-recent-block": "Block Num:",
+    "most-recent-time": "TimeStamp:",
+    "most-recent-mined": "Most recent mined:",
+    "funds-question": "Where are my funds"
   },
   "AccountReceiveTableWarning": {
     "withdrawal-warning": "You are withdrawing to {0}, which has the following warnings:",

diff --git a/frontend/src/pages/AccountReceive.vue b/frontend/src/pages/AccountReceive.vue
@@ -242,6 +242,19 @@ function useScan() {
     return provider.getBlock('latest');
   }
 
+  function updateMostRecentAnnouncementInfo(announcementsBatch: AnnouncementDetail[]) {
+    announcementsBatch.forEach((announcement) => {
+      const thisTimestamp = parseInt(announcement.timestamp);
+      if (thisTimestamp > mostRecentAnnouncementTimestamp.value) {
+        mostRecentAnnouncementTimestamp.value = thisTimestamp;
+      }
+      const thisBlock = parseInt(announcement.block);
+      if (thisBlock > mostRecentAnnouncementBlockNumber.value) {
+        mostRecentAnnouncementBlockNumber.value = thisBlock;
+      }
+    });
+  }
+
   async function scan() {
     // Reset paused state
     paused.value = false;
@@ -302,6 +315,7 @@ function useScan() {
       if (advancedMode.value && scanPrivateKey.value) {
         for await (const announcementsBatch of umbra.value.fetchAllAnnouncements(overrides)) {
           announcementsCount += announcementsBatch.length; // Increment count
+          updateMostRecentAnnouncementInfo(announcementsBatch);
           announcementsQueue = [...announcementsQueue, ...announcementsBatch];
           if (announcementsCount == 10000) {
             scanStatus.value = 'scanning latest';
@@ -338,17 +352,7 @@ function useScan() {
           }
 
           announcementsCount += announcementsBatch.length; // Increment count
-          announcementsBatch.forEach((announcement) => {
-            const thisTimestamp = parseInt(announcement.timestamp);
-            if (thisTimestamp > mostRecentAnnouncementTimestamp.value) {
-              mostRecentAnnouncementTimestamp.value = thisTimestamp;
-            }
-            const thisBlock = parseInt(announcement.block);
-            if (thisBlock > mostRecentAnnouncementBlockNumber.value) {
-              mostRecentAnnouncementBlockNumber.value = thisBlock;
-            }
-          });
-
+          updateMostRecentAnnouncementInfo(announcementsBatch);
           announcementsQueue = [...announcementsQueue, ...announcementsBatch];
           if (announcementsCount == 10000) {
             scanStatus.value = 'scanning latest';