From 9b70d8a0a66d47dac8ddf69508ae8f2183174597 Mon Sep 17 00:00:00 2001
From: John Feras <jferas@ferasinfotech.com>
Date: Thu, 25 Apr 2024 16:29:21 -0400
Subject: [PATCH] Display most recent Umbra announcement time/block on receive
 page (#657)

* Display most recent Umbra announcement time/block on receive page

* Added most recently mined block to display

* Moved diagnostic output back to above table and made most recent mined info conditional to advanced mode
---
 .../src/components/AccountReceiveTable.vue    | 45 ++++++++++++++++---
 frontend/src/i18n/locales/en-US.json          |  4 +-
 frontend/src/pages/AccountReceive.vue         | 39 +++++++++++++++-
 3 files changed, 78 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/AccountReceiveTable.vue b/frontend/src/components/AccountReceiveTable.vue
index 8538fa753..b1147bdd3 100644
--- a/frontend/src/components/AccountReceiveTable.vue
+++ b/frontend/src/components/AccountReceiveTable.vue
@@ -60,14 +60,28 @@
         >.
       </div>
 
-      <div v-if="advancedMode && scanStatus === 'complete'" class="text-caption q-mb-sm">
-        <!-- This scanDescriptionString describes scan settings that were used -->
-        {{ scanDescriptionString }}.
-        <span @click="context.emit('reset')" class="cursor-pointer hyperlink">{{
-          $t('AccountReceiveTable.scan-settings')
-        }}</span
-        >.
+      <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 }}.
+          <span @click="context.emit('reset')" class="cursor-pointer hyperlink">{{
+            $t('AccountReceiveTable.scan-settings')
+          }}</span
+          >.
+        </div>
       </div>
+
       <q-table
         :grid="$q.screen.xs"
         card-container-class="col q-col-gutter-md"
@@ -350,6 +364,7 @@
           </q-tr>
         </template>
       </q-table>
+
       <div
         v-if="scanStatus === 'complete' && (keysMatch || (advancedMode && isCustomPrivateKey))"
         class="text-caption text-right q-mt-md"
@@ -784,6 +799,22 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    mostRecentAnnouncementBlockNumber: {
+      type: Number,
+      required: true,
+    },
+    mostRecentAnnouncementTimestamp: {
+      type: Number,
+      required: true,
+    },
+    mostRecentBlockNumber: {
+      type: Number,
+      required: true,
+    },
+    mostRecentBlockTimestamp: {
+      type: Number,
+      required: true,
+    },
   },
 
   setup(props, context) {
diff --git a/frontend/src/i18n/locales/en-US.json b/frontend/src/i18n/locales/en-US.json
index b8eb78833..175468855 100644
--- a/frontend/src/i18n/locales/en-US.json
+++ b/frontend/src/i18n/locales/en-US.json
@@ -278,7 +278,9 @@
     "receiver-tool-tip": "The stealth address which received these funds. It looks like an empty address, and it can't be tied to your account, but only you have the ability to generate its private key.",
     "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"
+    "danger": "Danger",
+    "most-recent-announcement": "Most recent announcement block / timestamp:",
+    "most-recent-mined": "Most recent mined block / timestamp:"
   },
   "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
index 09ad70402..63442477d 100644
--- a/frontend/src/pages/AccountReceive.vue
+++ b/frontend/src/pages/AccountReceive.vue
@@ -76,6 +76,10 @@
           :announcements="userAnnouncements"
           :scanStatus="scanStatus"
           :scanPercentage="scanPercentage"
+          :mostRecentAnnouncementBlockNumber="mostRecentAnnouncementBlockNumber"
+          :mostRecentAnnouncementTimestamp="mostRecentAnnouncementTimestamp"
+          :mostRecentBlockNumber="mostRecentBlockNumber"
+          :mostRecentBlockTimestamp="mostRecentBlockTimestamp"
           @reset="setFormStatus('waiting')"
         />
       </div>
@@ -116,8 +120,9 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref, watch } from 'vue';
 import { QForm } from 'quasar';
+import { Block } from '@ethersproject/abstract-provider';
 import { UserAnnouncement, KeyPair, utils, AnnouncementDetail } from '@umbracash/umbra-js';
-import { BigNumber, computeAddress, isHexString } from 'src/utils/ethers';
+import { BigNumber, Web3Provider, computeAddress, isHexString } from 'src/utils/ethers';
 import useSettingsStore from 'src/store/settings';
 import useWalletStore from 'src/store/wallet';
 import useWallet from 'src/store/wallet';
@@ -141,10 +146,16 @@ function useScan() {
   const workers: Worker[] = [];
   const paused = ref(false);
 
+  const mostRecentAnnouncementTimestamp = ref<number>(0);
+  const mostRecentAnnouncementBlockNumber = ref<number>(0);
+
+  const mostRecentBlockTimestamp = ref<number>(0);
+  const mostRecentBlockNumber = ref<number>(0);
+
   // Start and end blocks for advanced mode settings
   const { advancedMode, startBlock, endBlock, setScanBlocks, setScanPrivateKey, scanPrivateKey, resetScanSettings } =
     useSettingsStore();
-  const { signer, userAddress: userWalletAddress, isAccountSetup } = useWalletStore();
+  const { signer, userAddress: userWalletAddress, isAccountSetup, provider } = useWalletStore();
   const startBlockLocal = ref<number>();
   const endBlockLocal = ref<number>();
   const scanPrivateKeyLocal = ref<string>();
@@ -219,6 +230,10 @@ function useScan() {
     }
   }
 
+  async function getLastBlock(provider: Web3Provider): Promise<Block> {
+    return provider.getBlock('latest');
+  }
+
   async function scan() {
     // Reset paused state
     paused.value = false;
@@ -299,6 +314,10 @@ function useScan() {
         userAnnouncements.value = [];
         scanStatus.value = 'complete';
       } else {
+        // Fetch the most recent block
+        const latestBlock: Block = await getLastBlock(provider.value!);
+        mostRecentBlockNumber.value = latestBlock.number;
+        mostRecentBlockTimestamp.value = latestBlock.timestamp;
         // Default scan behavior
         for await (const announcementsBatch of umbra.value.fetchSomeAnnouncements(
           signer.value,
@@ -308,7 +327,19 @@ function useScan() {
           if (paused.value) {
             return;
           }
+
           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;
+            }
+          });
+
           announcementsQueue = [...announcementsQueue, ...announcementsBatch];
           if (announcementsCount == 10000) {
             scanStatus.value = 'scanning latest';
@@ -355,6 +386,10 @@ function useScan() {
     isValidEndBlock,
     isValidPrivateKey,
     isValidStartBlock,
+    mostRecentAnnouncementBlockNumber,
+    mostRecentAnnouncementTimestamp,
+    mostRecentBlockNumber,
+    mostRecentBlockTimestamp,
     needsSignature,
     scanPrivateKeyLocal,
     scanStatus,