Add frontend cacheing for aggregates data

strictlymomo · strictlymomo · commit b77c6791d46c · 2020-09-03T19:10:33.000-04:00
diff --git a/src/components/Asset/Metadata.vue b/src/components/Asset/Metadata.vue
@@ -80,8 +80,8 @@ import TooltipMeta from "../../components/misc/TooltipMeta.vue";
             return val === 0
                 ? `no fractional units`
                 : val > 1
-                ? `${val} decimal digits`
-                : `${val} decimal digit`;
+                    ? `${val} decimal digits`
+                    : `${val} decimal digit`;
         }
     }
 
diff --git a/src/components/Home/TopInfo/MetaData.vue b/src/components/Home/TopInfo/MetaData.vue
@@ -91,13 +91,15 @@
 </template>
 <script lang="ts">
 import "reflect-metadata";
-import { Vue, Component } from "vue-property-decorator";
+import { Vue, Component, Watch } from "vue-property-decorator";
 
 import axios from "@/axios";
 import { stringToBig } from "@/helper";
 import TooltipHeading from "../../misc/TooltipHeading.vue";
 import TooltipMeta from "../TopInfo/TooltipMeta.vue";
 import { AVAX_ID } from "@/store/index";
+import { Asset } from '@/js/Asset';
+import Big from "big.js";
 
 @Component({
     components: {
@@ -106,14 +108,77 @@ import { AVAX_ID } from "@/store/index";
     }
 })
 export default class MetaData extends Vue {
+    volumeCache: Big = Big(0);
+    totalTransactionsCache: number = 0;
+
     get assetsLoaded(): boolean {
         return this.$store.state.assetsLoaded;
     }
 
+    get assetAggregatesLoaded(): boolean {
+        return this.$store.state.assetAggregatesLoaded;
+    }
+
     get subnetsLoaded(): boolean {
         return this.$store.state.Platform.subnetsLoaded;
     }
 
+    @Watch("avaxVolume")
+    onAvaxVolumeChanged(val: string) {
+        console.log("CALLED FROM: @Watch(avaxVolume)")
+        this.saveCacheAvax();
+    }
+
+    @Watch("totalTransactions")
+    ontotalTransactionsChanged(val: number) {
+        console.log("CALLED FROM: @Watch(totalTransactions)")
+        this.saveCacheTotalTransactions();
+    }
+
+    created() {
+        // Get 24h volume cache
+        // TODO: remove when API is enhanced
+        let volumeCacheJSON = localStorage.getItem('avaxCache');
+        let volumeCache = Big(0);
+        if (volumeCacheJSON) {
+            let cache =  JSON.parse(volumeCacheJSON);
+            volumeCache = Big(cache.volume_day);
+        }
+        this.volumeCache = volumeCache;
+
+        // Get totalTransactions cache 
+        // TODO: remove when API is enhanced
+        let totalTransactionsCacheJSON = localStorage.getItem('totalTransactions');
+        let totalTransactionsCache = 0;
+        if (totalTransactionsCacheJSON) {
+            let cache = JSON.parse(totalTransactionsCacheJSON);
+            totalTransactionsCache = cache;
+        }
+        this.totalTransactionsCache = totalTransactionsCache;
+    }
+
+    saveCacheAvax() {
+        let asset = this.avax;
+        if (asset) {
+            let volume_day = asset.volume_day.toString();
+            let txCount_day = asset.txCount_day;
+            let cache = {
+                volume_day,     // AVAX volume
+                txCount_day,    // AVAX count
+            };
+            localStorage.setItem('avaxCache', JSON.stringify(cache)); 
+        }
+    }
+
+    saveCacheTotalTransactions() {
+        let totalTransactions = this.totalTransactions;
+        let cache = {
+            totalTransactions   // count across all assets
+        }
+        localStorage.setItem('totalTransactions', JSON.stringify(totalTransactions));
+    }
+
+    // Data from Ortelius
     get tpmText(): string {
         let day = 60 * 24;
         let avg = this.totalTransactions / day;
@@ -126,6 +191,30 @@ export default class MetaData extends Vue {
         return avg > 1 ? avg.toFixed(0) : avg.toFixed(2);
     }
 
+    get assets() {
+        return this.$store.state.assets;
+    }
+
+    get avax(): Asset | undefined { 
+        return this.assets[AVAX_ID];
+    }
+    
+    get avaxVolume(): string {
+        if (!this.avax) {
+            return parseInt(this.volumeCache.toFixed(0)).toLocaleString();
+        }
+        return this.avax.isHistoryUpdated 
+            ? parseInt(this.avax.volume_day.toFixed(0)).toLocaleString()
+            : parseInt(this.volumeCache.toFixed(0)).toLocaleString();
+    }
+
+    get totalTransactions(): number {
+        return this.$store.state.assetAggregatesLoaded
+            ? this.$store.getters.totalTransactions
+            : this.totalTransactionsCache;
+    }
+        
+    // Data from Avalanche-Go
     get totalStake(): string {
         let res = this.$store.getters["Platform/totalStake"];
         res = stringToBig(res.toString(), 9).toFixed(0);
@@ -135,18 +224,6 @@ export default class MetaData extends Vue {
     get validatorCount(): number {
         return this.$store.getters["Platform/totalValidators"];
     }
-
-    get avaxVolume(): string {
-        let assets = this.$store.state.assets;
-        let avax = assets[AVAX_ID];
-        return !avax
-            ? (0).toLocaleString()
-            : parseInt(avax.volume_day.toFixed(0)).toLocaleString();
-    }
-
-    get totalTransactions(): number {
-        return this.$store.getters.totalTransactions;
-    }
 }
 
 </script>
diff --git a/src/components/Home/TopInfo/TopAssets.vue b/src/components/Home/TopInfo/TopAssets.vue
@@ -8,7 +8,7 @@
                 ></TooltipHeading>
             </h2>
         </div>
-        <div v-if="!assetsLoaded">
+        <div v-if="!assetAggregatesLoaded">
             <v-progress-circular :size="16" :width="2" color="#E84970" indeterminate key="1"></v-progress-circular>
         </div>
         <div v-else>
@@ -65,6 +65,10 @@ export default class TopAssets extends Vue {
         return res.slice(0, 5);
     }
 
+    get assetAggregatesLoaded(): boolean {
+        return this.$store.state.assetAggregatesLoaded;
+    }
+
     get assetsLoaded(): boolean {
         return this.$store.state.assetsLoaded;
     }
diff --git a/src/js/Asset.ts b/src/js/Asset.ts
@@ -3,6 +3,7 @@ import { IAssetData_Ortelius } from "./IAsset";
 import { profanities } from "@/js/Profanities";
 import Big from "big.js";
 import { stringToBig } from '@/helper';
+import store from '../store';
 
 class Asset {
     id: string;
@@ -12,8 +13,11 @@ class Asset {
     denomination: number;
     name: string;
     symbol: string;
+    // aggregate data
     volume_day: Big;
     txCount_day: number;
+    isHistoryUpdated: boolean;
+    // FE metadata
     profane: boolean;
 
     constructor(assetData: IAssetData_Ortelius, isUnknown: boolean) {
@@ -27,10 +31,13 @@ class Asset {
         this.symbol = assetData.symbol;
         this.volume_day = Big(0);
         this.txCount_day = 0;
-        this.profane = false;
+        // aggregate data
+        this.isHistoryUpdated = false;
         if (!isUnknown) {
             this.updateVolumeHistory();   
         }
+        // FE metadata
+        this.profane = false;
         this.checkForProfanities(this.name);
         this.checkForProfanities(this.symbol);
     }
@@ -49,6 +56,8 @@ class Asset {
             let txVolume = res.data.aggregates.transactionVolume || "0";
             parent.volume_day = stringToBig(txVolume, parent.denomination);
             parent.txCount_day = txCount;
+            this.isHistoryUpdated = true;
+            store.dispatch("checkAssetAggregatesLoaded");
         });
     }
 
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -25,34 +25,43 @@ export default new Vuex.Store({
     state: {
         assets: {},
         assetsLoaded: false,
+        assetAggregatesLoaded: false,
         known_addresses: AddressDict,
         chainId: "X",
     },
     actions: {
         async init(store) {
             // TODO: support service for multiple chain
-            let start = -1;
-            let offset = 0;
+            
+            // Get list of all indexed assets
+            let count = 0;
+            let offset = 0;     
             const limit = 500;
-            let res = await api.get(`/x/assets?&offset=${offset}&limit=${limit}`);
-            let assets = res.data.assets;
-            assets.forEach((assetData: any) => {
-                store.commit("addAsset", new Asset(assetData, false));
-            });
 
+            // initial request
+            let res = await api.get(`/x/assets?offset=${offset}&limit=${limit}`);
+            let assets = res.data.assets;
+            // count of indexed assets
+            count = res.data.count; 
+            
+            // keep getting asset data as necessary
             async function checkForMoreAssets() {
-                if (assets.length === limit) {
-                    start = start + limit // -1 + 499
-                    offset = start
-                    let res = await api.get(`/x/assets?&offset=${offset}&limit=${limit}`);
-                    let assets = res.data.assets;
-                    assets.forEach((assetData: any) => {
-                        store.commit("addAsset", new Asset(assetData, false)); 
-                    });
-                }
+                offset += limit;
+                let res = await api.get(`/x/assets?offset=${offset}&limit=${limit}`);
+                let moreAssets = res.data.assets;
+                assets.push(...moreAssets);
             }
 
-            await checkForMoreAssets();
+            while (offset < count) {
+                await checkForMoreAssets();
+            }
+            
+            // once we get all the assets, instantiate assets and save them to the store
+            // asset aggregate data is resolved asynchronously
+            assets.forEach((assetData: any) => {
+                store.commit("addAsset", new Asset(assetData, false));
+            });
+            
             store.commit("finishLoading");
         },
 
@@ -70,13 +79,28 @@ export default new Vuex.Store({
             };
             commit("addAsset", new Asset(newAssetData, true));
         },
+        
+        // dispatched from Asset instance upon /aggregates response
+        checkAssetAggregatesLoaded(store) {
+            let assetsArray = store.getters["assetsArray"];
+            let notLoaded = assetsArray.find((element: Asset) => element.isHistoryUpdated === false);
+            if (!notLoaded) {
+                store.commit("finishAggregatesLoading");
+                console.log("ALL ASSET AGGREGATES LOADED")
+            }
+        }
+
+        // TODO - move cache here
     },
     mutations: {
         addAsset(state, asset) {
             Vue.set(state.assets, asset.id, asset);
         },
         finishLoading(state) {
             state.assetsLoaded = true;
+        },
+        finishAggregatesLoading(state) {
+            state.assetAggregatesLoaded = true;
         }
     },
     getters: {
diff --git a/src/store/types.ts b/src/store/types.ts
@@ -1,6 +1,7 @@
 export interface IRootState {
     assets: any,
     assetsLoaded: boolean,
+    assetAggregatesLoaded: boolean;
     chainId: string,
     known_addresses: {
         [key:string]: string

Original file line number	Diff line number	Diff line change
`@@ -80,8 +80,8 @@ import TooltipMeta from "../../components/misc/TooltipMeta.vue";`
`80`	`80`	`return val === 0`
`81`	`81`	? `no fractional units`
`82`	`82`	`: val > 1`
`83`		- ? `${val} decimal digits`
`84`		- : `${val} decimal digit`;
	`83`	+ ? `${val} decimal digits`
	`84`	+ : `${val} decimal digit`;
`85`	`85`	`}`
`86`	`86`	`}`
`87`	`87`