feat: save user announcements to local storage and last fetched block

frontend/src/components/AccountReceiveTable.vue

@@ -60,12 +60,45 @@
         >.
       </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="mostRecentAnnouncementBlockNumber && mostRecentAnnouncementTimestamp" class="text-caption q-mb-sm">
+        <!-- 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">
+            {{ $t('AccountReceiveTable.most-recent-announcement') }}
+            {{ mostRecentAnnouncementBlockNumber }} /
+            {{ formatDate(mostRecentAnnouncementTimestamp * 1000) }}
+            {{ formatTime(mostRecentAnnouncementTimestamp * 1000) }}
+          </div>
+
+          <!-- Status messages -->
+          <div
+            v-if="
+              ['fetching', 'fetching latest', 'scanning', 'scanning latest from last fetched block'].includes(
+                scanStatus
+              )
+            "
+            class="status-message text-italic"
+          >
+            <div v-if="scanStatus === 'fetching' || scanStatus === 'fetching latest'">
+              {{
+                scanStatus === 'fetching'
+                  ? $t('Receive.fetching')
+                  : $t('Receive.fetching-latest-from-last-fetched-block')
+              }}
+              <q-spinner-dots color="primary" size="1em" class="q-ml-xs" />
+            </div>
+            <div v-else>
+              {{
+                scanStatus === 'scanning latest from last fetched block'
+                  ? $t('Receive.scanning-latest-from-last-fetched-block')
+                  : $t('Receive.scanning')
+              }}
+              <q-spinner-dots color="primary" size="1em" class="q-ml-xs" />
+            </div>
+          </div>
+        </div>
+
         <div v-if="advancedMode" class="text-caption q-mb-sm">
           {{ $t('AccountReceiveTable.most-recent-mined') }}
           {{ mostRecentBlockNumber }} /
@@ -99,12 +132,8 @@
           <div :key="props.row.id" class="col-12">
             <q-card class="card-border cursor-pointer q-pt-md col justify-center items-center">
               <q-card-section class="row justify-center items-center">
-                <img
-                  class="q-mr-md"
-                  :src="getTokenLogoUri(props.row.token, tokens)"
-                  style="width: 1.2rem"
-                  v-if="getTokenInfo(props.row.token)"
-                />
+                <img v-if="getTokenInfo(props.row.token)" src="path/to/image.jpg" />props.row.token, tokens)"
+                style="width: 1.2rem" v-if="getTokenInfo(props.row.token)" />
                 <div class="text-primary text-h6 header-black q-pb-none">
                   {{ formatAmount(props.row.amount, props.row.token, tokens) }}
                   {{ getTokenSymbol(props.row.token, tokens) }}
@@ -542,13 +571,17 @@ function useReceivedFundsTable(userAnnouncements: Ref<UserAnnouncement[]>, spend
   // Format announcements so from addresses support ENS/CNS, and so we can easily detect withdrawals
   const formattedAnnouncements = ref([] as ReceiveTableAnnouncement[]);
 
+  const sortByTimestamp = (announcements: ReceiveTableAnnouncement[]) =>
+    announcements.sort((a, b) => Number(b.timestamp) - Number(a.timestamp));
+
   // eslint-disable-next-line @typescript-eslint/no-misused-promises
   watchEffect(async () => {
-    if (userAnnouncements.value.length === 0) formattedAnnouncements.value = [];
-    isLoading.value = true;
+    const hasAnnouncements = userAnnouncements.value.length > 0;
+    if (!hasAnnouncements) formattedAnnouncements.value = [];
+    isLoading.value = !hasAnnouncements;
     const announcements = userAnnouncements.value as ReceiveTableAnnouncement[];
     const newAnnouncements = announcements.filter((x) => !formattedAnnouncements.value.includes(x));
-    formattedAnnouncements.value = [...formattedAnnouncements.value, ...newAnnouncements];
+    formattedAnnouncements.value = sortByTimestamp([...formattedAnnouncements.value, ...newAnnouncements]);
     // Format addresses to use ENS, CNS, or formatted address
     const fromAddresses = announcements.map((announcement) => announcement.from);
     let formattedAddresses: string[] = [];
@@ -869,4 +902,20 @@ export default defineComponent({
 
 .external-link-icon
   color: transparent
+
+.block-data-container
+  @media (max-width: 599px)
+    flex-direction: column
+    align-items: flex-start
+
+  @media (min-width: 600px)
+    flex-direction: row
+
+.block-data, .fetching-status
+  @media (max-width: 599px)
+    width: 100%
+
+.fetching-status
+  @media (max-width: 599px)
+    margin-top: 0.5rem
 </style>

frontend/src/components/WithdrawForm.vue

@@ -18,8 +18,8 @@
             emit('initializeWithdraw');
             setIsInWithdrawFlow(true);
           "
-          :appendButtonLabel="$t('WithdrawForm.withdraw')"
-          :appendButtonDisable="isInWithdrawFlow || isFeeLoading"
+          :appendButtonLabel="needSignature ? $t('WithdrawForm.need-signature') : $t('WithdrawForm.withdraw')"
+          :appendButtonDisable="isInWithdrawFlow || isFeeLoading || needSignature"
           :appendButtonLoading="isInWithdrawFlow"
           :disable="isInWithdrawFlow"
           :label="$t('WithdrawForm.address')"
@@ -119,11 +119,13 @@ export default defineComponent({
     advancedMode: {
       type: Boolean,
       required: true,
+      default: true,
     },
   },
   setup(data, { emit }) {
     const { NATIVE_TOKEN } = useWalletStore();
     const { setIsInWithdrawFlow, isInWithdrawFlow } = useStatusesStore();
+    const { needSignature } = useWalletStore();
     const content = ref<string>(data.destinationAddress || '');
     const nativeTokenSymbol = NATIVE_TOKEN.value.symbol;
 
@@ -138,6 +140,7 @@ export default defineComponent({
       emitUpdateDestinationAddress,
       content,
       nativeTokenSymbol,
+      needSignature,
       isInWithdrawFlow,
       setIsInWithdrawFlow,
     };

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

@@ -33,6 +33,8 @@
     "contact": "Contact"
   },
   "Base-Layout": {
+    "clear-local-storage": "Clear local storage",
+    "clear-local-storage-description": "Clears all local storage data, including send history, announcements, and wallet connection.",
     "connect-wallet": "Connect Wallet",
     "settings": "Settings",
     "dark-mode": "Dark mode",
@@ -105,6 +107,7 @@
     "receive": "Receive",
     "connect-your-wallet": "Connect your wallet to scan for received funds",
     "connect-wallet": "Connect Wallet",
+    "need-signature-lately": "Sign to scan for recently received funds",
     "need-signature": "This app needs your signature to scan for funds you've received",
     "scan-funds": "Click below to scan for funds you've received",
     "sign": "Sign",
@@ -117,8 +120,10 @@
     "prv-key": "Private key",
     "fetching": "Fetching all announcements...",
     "fetching-latest": "Fetching latest 10,000 announcements...",
+    "fetching-latest-from-last-fetched-block": "Fetching latest announcements...",
     "scanning": "Scanning all announcements for funds...",
     "scanning-latest": "Scanning latest announcements for funds...",
+    "scanning-latest-from-last-fetched-block": "Scanning latest announcements...",
     "wait": "This may take a couple of minutes depending on your connection and device. This is normal— please be patient.",
     "stop": "Stop"
   },
@@ -353,6 +358,7 @@
     "view-on-explorer": "View on explorer"
   },
   "WithdrawForm": {
+    "need-signature": "Need Signature",
     "withdraw-address": "Enter address to withdraw funds to",
     "address": "Address",
     "fetching-fee-estimate": "Fetching fee estimate...",

frontend/src/i18n/locales/zh-CN.json

@@ -33,6 +33,8 @@
     "contact": "联系"
   },
   "Base-Layout": {
+    "clear-local-storage": "清除本地存储",
+    "clear-local-storage-description": "清除所有本地存储数据，包括发送历史记录和钱包连接信息。",
     "connect-wallet": "连接钱包",
     "settings": "设置",
     "dark-mode": "深色模式",
@@ -106,6 +108,7 @@
     "connect-your-wallet": "连接您的钱包以扫描收到的资金",
     "connect-wallet": "链接钱包",
     "need-signature": "此应用程序需要您的签名才能扫描您收到的资金",
+    "need-signature-lately": "签名以扫描最近收到的资金或提取资金",
     "scan-funds": "点击下方来扫描您收到的资金",
     "sign": "签名",
     "scan": "扫描",
@@ -117,8 +120,11 @@
     "prv-key": "私钥",
     "fetching": "在获取所有的公告...",
     "fetching-latest": "在获取最新的 10，000 条公告...",
+    "fetching-latest-from-last-fetched-block": "正在获取最新公告...",
     "scanning": "在所有的公告中扫描资金...",
+
     "scanning-latest": "在最新公告中扫描资金...",
+    "scanning-latest-from-last-fetched-block": "在最新公告中扫描资金...",
     "wait": "这可能需要几分钟，具体取决于您的连接和设备。这是正常的 — 请耐心等待。",
     "stop": "停止"
   },
@@ -351,6 +357,7 @@
     "view-on-explorer": "在区块链浏览器上查看"
   },
   "WithdrawForm": {
+    "need-signature": "此应用程序需要您的签名才能扫描您收到的资金",
     "withdraw-address": "输入提款地址",
     "address": "地址",
     "fetching-fee-estimate": "在接收费用估计...",

frontend/src/layouts/BaseLayout.vue

@@ -223,6 +223,21 @@
               option-label="label"
               rounded
             />
+
+            <!-- Clear local storage button -->
+            <div class="q-mt-md row items-center">
+              <base-button
+                @click="clearLocalStorage"
+                color="warning"
+                :label="$t('Base-Layout.clear-local-storage')"
+                :outline="true"
+                :rounded="true"
+              />
+              <base-tooltip class="q-ml-sm" icon="fas fa-question-circle">
+                {{ $t('Base-Layout.clear-local-storage-description') }}
+              </base-tooltip>
+            </div>
+
             <p class="text-caption dark-toggle" style="font-size: 0.65rem">version {{ version }}</p>
           </div>
 
@@ -291,6 +306,7 @@ import AddressSettings from './AddressSettings.vue';
 import HeaderLinks from 'src/layouts/HeaderLinks.vue';
 import NetworkDropdown from 'src/layouts/NetworkDropdown.vue';
 import { Language } from 'src/components/models';
+import { notifyUser } from 'src/utils/alerts';
 
 export default defineComponent({
   name: 'BaseLayout',
@@ -328,10 +344,21 @@ export default defineComponent({
       setLanguage(language);
       setWalletLanguage(language.value);
     };
+
+    const clearLocalStorage = () => {
+      localStorage.clear();
+      notifyUser('success', 'Local storage cleared. Reloading page...');
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
+    };
+
     return {
       advancedMode,
       argentModalDismissed,
       avatar,
+      changeLanguage,
+      clearLocalStorage,
       currentLanguage,
       drawerRight: ref(false),
       isAccountSetup,
@@ -340,7 +367,6 @@ export default defineComponent({
       isLoading,
       language,
       network,
-      changeLanguage,
       sendHistorySave,
       showArgentModal,
       supportedLanguages,