Added most recently mined block to display

Author: jferas

frontend/src/components/AccountReceiveTable.vue

@@ -60,22 +60,6 @@
         >.
       </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') }}:
-        {{ formatDate(mostRecentAnnouncementTimestamp * 1000) }}
-        {{ formatTime(mostRecentAnnouncementTimestamp * 1000) }}
-        ({{ mostRecentAnnouncementBlock }})
-        <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"
@@ -358,6 +342,28 @@
           </q-tr>
         </template>
       </q-table>
+
+      <div v-if="scanStatus === 'complete'" class="text-caption q-mb-sm">
+        <!-- Show the most recent timestamp and block that were scanned -->
+        {{ mostRecentAnnouncementBlockNumber }} /
+        {{ formatDate(mostRecentAnnouncementTimestamp * 1000) }}
+        {{ formatTime(mostRecentAnnouncementTimestamp * 1000) }}
+        {{ $t('AccountReceiveTable.most-recent-announcement') }}:
+        <br />
+        {{ mostRecentBlockNumber }} /
+        {{ formatDate(mostRecentBlockTimestamp * 1000) }}
+        {{ formatTime(mostRecentBlockTimestamp * 1000) }}
+        {{ $t('AccountReceiveTable.most-recent-mined') }}:
+        <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>
+
       <div
         v-if="scanStatus === 'complete' && (keysMatch || (advancedMode && isCustomPrivateKey))"
         class="text-caption text-right q-mt-md"
@@ -792,14 +798,22 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    mostRecentAnnouncementBlock: {
+    mostRecentAnnouncementBlockNumber: {
       type: Number,
       required: true,
     },
     mostRecentAnnouncementTimestamp: {
       type: Number,
       required: true,
     },
+    mostRecentBlockNumber: {
+      type: Number,
+      required: true,
+    },
+    mostRecentBlockTimestamp: {
+      type: Number,
+      required: true,
+    },
   },
 
   setup(props, context) {

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

@@ -279,7 +279,8 @@
     "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 date and block"
+    "most-recent-announcement": "Most recent announcement block and timestamp",
+    "most-recent-mined": "Most recent mined block and timestamp"
   },
   "AccountReceiveTableWarning": {
     "withdrawal-warning": "You are withdrawing to {0}, which has the following warnings:",

frontend/src/pages/AccountReceive.vue

@@ -76,8 +76,10 @@
           :announcements="userAnnouncements"
           :scanStatus="scanStatus"
           :scanPercentage="scanPercentage"
-          :mostRecentAnnouncementBlock="mostRecentAnnouncementBlock"
+          :mostRecentAnnouncementBlockNumber="mostRecentAnnouncementBlockNumber"
           :mostRecentAnnouncementTimestamp="mostRecentAnnouncementTimestamp"
+          :mostRecentBlockNumber="mostRecentBlockNumber"
+          :mostRecentBlockTimestamp="mostRecentBlockTimestamp"
           @reset="setFormStatus('waiting')"
         />
       </div>
@@ -118,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';
@@ -144,12 +147,15 @@ function useScan() {
   const paused = ref(false);
 
   const mostRecentAnnouncementTimestamp = ref<number>(0);
-  const mostRecentAnnouncementBlock = 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>();
@@ -224,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;
@@ -304,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,
@@ -315,21 +329,16 @@ function useScan() {
           }
 
           announcementsCount += announcementsBatch.length; // Increment count
-          console.log(`announcementsBatch length ${announcementsBatch.length}`);
           announcementsBatch.forEach((announcement) => {
             const thisTimestamp = parseInt(announcement.timestamp);
             if (thisTimestamp > mostRecentAnnouncementTimestamp.value) {
               mostRecentAnnouncementTimestamp.value = thisTimestamp;
-              console.log(`New latest announcement time-stamp: ${thisTimestamp}`);
             }
             const thisBlock = parseInt(announcement.block);
-            if (thisBlock > mostRecentAnnouncementBlock.value) {
-              mostRecentAnnouncementBlock.value = thisBlock;
-              console.log(`New latest announcement block: ${thisBlock}`);
+            if (thisBlock > mostRecentAnnouncementBlockNumber.value) {
+              mostRecentAnnouncementBlockNumber.value = thisBlock;
             }
           });
-          console.log(`latest announcement Timestamp ${mostRecentAnnouncementTimestamp.value}`);
-          console.log(`latest announcement Block: ${mostRecentAnnouncementBlock.value}`);
 
           announcementsQueue = [...announcementsQueue, ...announcementsBatch];
           if (announcementsCount == 10000) {
@@ -377,8 +386,10 @@ function useScan() {
     isValidEndBlock,
     isValidPrivateKey,
     isValidStartBlock,
-    mostRecentAnnouncementBlock,
+    mostRecentAnnouncementBlockNumber,
     mostRecentAnnouncementTimestamp,
+    mostRecentBlockNumber,
+    mostRecentBlockTimestamp,
     needsSignature,
     scanPrivateKeyLocal,
     scanStatus,