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
ScopeLift · Apr 25, 2024 · 9b70d8a · 9b70d8a
1 parent 5e5239d
commit 9b70d8a
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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,