Put announcement info on tooltip

frontend/package.json

@@ -20,6 +20,7 @@
     "@adraffy/ens-normalize": "1.9.2",
     "@metamask/jazzicon": "^2.0.0",
     "@quasar/extras": "^1.15.8",
+    "@umbracash/umbra-js": "file:../umbra-js",
     "@umbracash/umbra-js": "0.2.1",
     "@uniswap/token-lists": "^1.0.0-beta.19",
     "@unstoppabledomains/resolution": "8.5.0",

frontend/src/components/AccountReceiveTable.vue

@@ -64,14 +64,36 @@
         <!-- Container for block data and fetching status -->
         <div class="block-data-container row items-center justify-between q-col-gutter-md">
           <!-- Block data -->
-          <div class="block-data">
+        <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') }}
-            {{ mostRecentAnnouncementBlockNumber }} /
+            <br />
+            {{ $t('AccountReceiveTable.most-recent-block') }} {{ mostRecentAnnouncementBlockNumber }}
+            <br />
+            {{ $t('AccountReceiveTable.most-recent-time') }}
             {{ formatDate(mostRecentAnnouncementTimestamp * 1000) }}
             {{ formatTime(mostRecentAnnouncementTimestamp * 1000) }}
-          </div>
-
-          <!-- Status messages -->
+            <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>
+        <!-- Status messages -->
           <div
             v-if="
               ['fetching', 'fetching latest', 'scanning', 'scanning latest from last fetched block'].includes(

frontend/src/i18n/locales/en-US.json

@@ -284,8 +284,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:",

frontend/src/pages/AccountReceive.vue

@@ -164,8 +164,8 @@ function useScan() {
       : null
   );
   const userAnnouncements = ref<UserAnnouncement[]>([]);
-  const mostRecentAnnouncementTimestamp = ref<number>();
-  const mostRecentAnnouncementBlockNumber = ref<number>();
+  const mostRecentAnnouncementTimestamp = ref<number>(0);
+  const mostRecentAnnouncementBlockNumber = ref<number>(0);
   const mostRecentBlockTimestamp = ref<number>(0);
   const mostRecentBlockNumber = ref<number>(0);
 
@@ -391,6 +391,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;
@@ -458,6 +471,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';
@@ -495,25 +509,7 @@ function useScan() {
           }
 
           announcementsCount += announcementsBatch.length; // Increment count
-          announcementsBatch.forEach((announcement) => {
-            const thisTimestamp = parseInt(announcement.timestamp);
-            if (thisTimestamp > (mostRecentAnnouncementTimestamp.value || 0)) {
-              mostRecentAnnouncementTimestamp.value = thisTimestamp;
-              // Save the most recent announcement timestamp to localStorage
-              if (mostRecentAnnouncementTimestampKey.value) {
-                LocalStorage.set(mostRecentAnnouncementTimestampKey.value, thisTimestamp);
-              }
-            }
-            const thisBlock = parseInt(announcement.block);
-            if (thisBlock > (mostRecentAnnouncementBlockNumber.value || 0)) {
-              mostRecentAnnouncementBlockNumber.value = thisBlock;
-              // Save the most recent announcement block number to localStorage
-              if (mostRecentAnnouncementBlockNumberKey.value) {
-                LocalStorage.set(mostRecentAnnouncementBlockNumberKey.value, thisBlock);
-              }
-            }
-          });
-
+          updateMostRecentAnnouncementInfo(announcementsBatch);
           announcementsQueue = [...announcementsQueue, ...announcementsBatch];
           if (announcementsCount == 10000) {
             scanStatus.value = isInitialScan ? 'scanning latest' : 'scanning latest from last fetched block';

umbra-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbracash/umbra-js",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Send and receive stealth payments",
   "main": "build/src/index.js",
   "types": "build/src/index.d.ts",