Merge #1371

1371: Fix localStorage issues with explorer r=popzxc a=AntonD3 Co-authored-by: AntonD3 <[email protected]>
00mjk · Feb 1, 2021 · c1d8299 · c1d8299
2 parents c01ff47 + b5f9d5c
commit c1d8299
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 81 deletions.
diff --git a/changelog/infrastructure.md b/changelog/infrastructure.md
@@ -9,6 +9,10 @@ components, the logs will have the following format:
 
 ## Unreleased
 
+### Removed
+
+- 'localStorage' caching, it fixed the bug, when entire block be "Initiated" for more than a day.
+
 ### Changed
 
 - (`explorer`): Deposits from and withdrawals to an L1 account with the same address are not displayed on the account

diff --git a/infrastructure/explorer/src/Cacher.js b/infrastructure/explorer/src/Cacher.js
@@ -1,45 +1,14 @@
 import LRU from 'lru-cache';
-import {
-    BLOCK_STORAGE_SLOT,
-    BLOCK_TRANSACTIONS_STORAGE_SLOT,
-    MAX_CACHED_BLOCKS,
-    MAX_CACHED_BLOCKS_TRANSACTIONS,
-    MAX_CACHED_TRANSACTIONS,
-    CACHE_VERSION_SLOT,
-    CACHE_VERSION
-} from './constants';
+import { MAX_CACHED_BLOCKS, MAX_CACHED_BLOCKS_TRANSACTIONS, MAX_CACHED_TRANSACTIONS } from './constants';
 import { getTxFee, getFromAddressOfTx, getTxToAddress, getTxAmount, getTxToken } from './blockUtils';
 
 class Cacher {
-    checkCacheVersion() {
-        const version = localStorage.getItem(CACHE_VERSION_SLOT);
-        if (version !== CACHE_VERSION) {
-            localStorage.removeItem(BLOCK_STORAGE_SLOT);
-            localStorage.removeItem(BLOCK_TRANSACTIONS_STORAGE_SLOT);
-
-            localStorage.setItem(CACHE_VERSION_SLOT, CACHE_VERSION);
-        }
-    }
-
     initLRUCaches() {
         this.blocksCache = new LRU(MAX_CACHED_BLOCKS);
         this.blocksTxsCache = new LRU(MAX_CACHED_BLOCKS_TRANSACTIONS);
         this.txCache = new LRU(MAX_CACHED_TRANSACTIONS);
     }
 
-    load(cache, slot) {
-        const stored = localStorage.getItem(slot);
-        if (!stored) {
-            return;
-        }
-
-        try {
-            cache.load(JSON.parse(stored));
-        } catch {
-            localStorage.removeItem(slot);
-        }
-    }
-
     getCachedBlock(blockNumber) {
         return this.blocksCache.get(blockNumber);
     }
@@ -90,32 +59,8 @@ class Cacher {
         this.txCache.set(hash, tx);
     }
 
-    saveCacheToLocalStorage() {
-        // We don't store transactions here, because:
-        // a) A lot of them are already stored with block transactions
-        // b) It is unlikely that if a person wants to open a transaction
-        // first it will be verified, i.e. suitable for caching.
-        // c) We can not simply store all the transactions we want.
-        // localStorage has it's own limitation.
-        //
-        // Although to reach unlimited memory we could use
-        // https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
-        // But I believe it is an overkill
-        const blocksCacheDump = this.blocksCache.dump();
-        const blocksTxsCacheDump = this.blocksTxsCache.dump();
-        localStorage.setItem(BLOCK_STORAGE_SLOT, JSON.stringify(blocksCacheDump));
-        localStorage.setItem(BLOCK_TRANSACTIONS_STORAGE_SLOT, JSON.stringify(blocksTxsCacheDump));
-    }
-
     constructor(client) {
-        this.checkCacheVersion();
         this.initLRUCaches();
-        this.load(this.blocksCache, BLOCK_STORAGE_SLOT);
-        this.load(this.blocksTxsCache, BLOCK_TRANSACTIONS_STORAGE_SLOT);
-
-        this.blocksTxsCache.values().forEach((txs) => {
-            this.cacheTransactionsFromBlock(txs, client);
-        });
     }
 }
 

diff --git a/infrastructure/explorer/src/Client.js b/infrastructure/explorer/src/Client.js
@@ -2,7 +2,6 @@ import config from './env-config';
 import * as constants from './constants';
 import { formatToken, isBlockVerified } from './utils';
 import { BlockExplorerClient } from './BlockExplorerClient';
-import timeConstants from './timeConstants';
 
 import { Provider } from 'zksync';
 
@@ -11,17 +10,6 @@ import * as ethers from 'ethers';
 
 import Cacher from './Cacher';
 
-function initOnUnloadSaving(cacher) {
-    // Unfortunately there is no reliable way to save cache
-    // upon user leaving the page.
-    //
-    // window.onunload just does not give us enough time
-    // window.onbeforeunload might show weird popups in some browsers
-    setInterval(() => {
-        cacher.saveCacheToLocalStorage();
-    }, timeConstants.cacheSaving);
-}
-
 async function fetch(req) {
     let r = await axios(req);
     if (r.status == 200) {
@@ -67,9 +55,11 @@ export class Client {
             syncProvider: window.syncProvider
         };
 
+        // Clear the localStorage since it could have been saved before
+        // But now localStorage is not used
+        localStorage.clear();
         const client = new Client(props);
         const cacher = new Cacher(client);
-        initOnUnloadSaving(cacher);
         client.cacher = cacher;
         return client;
     }

diff --git a/infrastructure/explorer/src/constants.js b/infrastructure/explorer/src/constants.js
@@ -4,16 +4,6 @@ import { getBlockchainExplorerTx, getBlockchainExplorerAddress } from './utils';
 export const PAGE_SIZE = 20;
 export const TX_BATCH_SIZE = 50;
 
-export const BLOCK_STORAGE_SLOT = 'BLOCK_STORAGE';
-export const BLOCK_TRANSACTIONS_STORAGE_SLOT = 'BLOCK_TX_STORAGE';
-export const CACHE_VERSION_SLOT = 'CACHE_VERSION';
-// In the future our cache utilities / api responses might change
-// When it happens, we must also change the CACHE_VERSION.
-//
-// If the CACHE_VERSION on a client's computer is incorrect,
-// it wiil be reset.
-export const CACHE_VERSION = '2';
-
 export const blockchainExplorerTx = getBlockchainExplorerTx(store.network);
 
 export const blockchainExplorerAddress = getBlockchainExplorerAddress(store.network);

diff --git a/infrastructure/explorer/src/timeConstants.js b/infrastructure/explorer/src/timeConstants.js
@@ -1,5 +1,4 @@
 export default {
     accountUpdate: 10000,
-    transactionUpdate: 5000,
-    cacheSaving: 5000
+    transactionUpdate: 5000
 };