Merge pull request ava-labs#61 from ava-labs/everest

Everest

Author: strictlymomo

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`;
         }
     }
 

src/components/Home/RecentTransactions.vue

@@ -8,53 +8,52 @@
                     <span class="ava-btn-label">Refresh</span>
                 </v-btn>
             </div>
-            <template v-if="assetsLoaded">
-                <p class="chain right" bottom v-if="$vuetify.breakpoint.smAndUp">
-                <span class="label">You are viewing transactions for</span>
-                <v-tooltip>
-                    <template v-slot:activator="{ on }">
-                        <span v-on="on" class="tag">X-Chain</span>
-                    </template>
-                    <span>The X-Chain acts as a decentralized platform for creating and trading smart digital assets. (Think X for eXchanging assets.)</span>
-                </v-tooltip>
-                </p>
-            </template>
+            <p class="chain right" bottom v-if="$vuetify.breakpoint.smAndUp">
+            <span class="label">You are viewing transactions for</span>
+            <v-tooltip>
+                <template v-slot:activator="{ on }">
+                    <span v-on="on" class="tag">X-Chain</span>
+                </template>
+                <span>The X-Chain acts as a decentralized platform for creating and trading smart digital assets. (Think X for eXchanging assets.)</span>
+            </v-tooltip>
+            </p>
         </div>
-        <template v-if="assetsLoaded">
             <div class="list">
-            <div class="table_headers recent_tx_rows">
-                <p></p>
-                <p>
-                    ID
-                    <Tooltip content="a transaction queries or modifies the state of a blockchain"></Tooltip>
-                </p>
-                <p>
-                    From
-                    <Tooltip content="address that sends transfer value"></Tooltip>
-                </p>
-                <p>
-                    To
-                    <Tooltip content="address that receives transfer value"></Tooltip>
-                </p>
+                <div class="table_headers recent_tx_rows">
+                    <p></p>
+                    <p>
+                        ID
+                        <Tooltip content="a transaction queries or modifies the state of a blockchain"></Tooltip>
+                    </p>
+                    <p>
+                        From
+                        <Tooltip content="address that sends transfer value"></Tooltip>
+                    </p>
+                    <p>
+                        To
+                        <Tooltip content="address that receives transfer value"></Tooltip>
+                    </p>
+                </div>
+                <transition-group name="fade" v-if="transactions.length > 0">
+                    <tx-row
+                        v-for="tx in transactions"
+                        :key="tx.id"
+                        class="recent_tx_rows"
+                        :transaction="tx"
+                    ></tx-row>
+                </transition-group>
+                <div v-if="transactions.length === 0">
+                    <v-progress-circular :size="16" :width="2" color="#E84970" indeterminate key="1"></v-progress-circular>
+                </div>
+            </div>
+            <div class="bottom">
+                <router-link to="/tx" class="view_all">View All Transactions</router-link>
             </div>
-            <transition-group name="fade">
-                <tx-row
-                    v-for="tx in transactions"
-                    :key="tx.id"
-                    class="recent_tx_rows"
-                    :transaction="tx"
-                ></tx-row>
-            </transition-group>
-        </div>
-        <div class="bottom">
-            <router-link to="/tx" class="view_all">View All Transactions</router-link>
-        </div>
-        </template>
     </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Watch } from "vue-property-decorator";
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import Tooltip from "@/components/rows/Tooltip.vue";
 import TxRow from "@/components/rows/TxRow/TxRow.vue";
 import api from "@/axios";
@@ -68,34 +67,25 @@ import { ITransaction } from '@/js/ITransaction';
 })
 export default class RecentTransactions extends Vue {
     loading: boolean = false;
-    transactions: ITransaction[] = [];
-    
-    created() {
-        this.updateTx();
-    }
-
-    @Watch("assetsLoaded")
-    onAssetsLoadedChanged(val: string, oldVal: string) {
-        this.updateTx();
-    }
-   
-    updateTx() {
+       
+    async updateTx() {
         let txNum = 8;
         this.loading = true;
 
         if (this.assetsLoaded) {
             // TODO: support service for multiple chains
-            api.get(`/x/transactions?sort=timestamp-desc&limit=${txNum}`).then(res => {
-                const list = res.data.transactions;
-                this.transactions = list;
-                this.loading = false;
-            });
+            await this.$store.dispatch("getRecentTransactions");
+            this.loading = false;
         }
     }
 
     get assetsLoaded() {
         return this.$store.state.assetsLoaded;
     }
+
+    get transactions(): ITransaction[] {
+        return this.$store.state.recentTransactions;
+    }
 }
 </script>
 

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>

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;
     }

src/components/Home/TopInfo/TopInfo.vue

@@ -36,6 +36,7 @@ export default {
     }
 
     > div:last-of-type {
+        min-height: 256px;
         border: none;
     }
 }

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,9 +13,14 @@ class Asset {
     denomination: number;
     name: string;
     symbol: string;
+    // aggregate data
     volume_day: Big;
     txCount_day: number;
+    isHistoryUpdated: boolean;
+    // FE metadata
     profane: boolean;
+    // not in indexer
+    isUnknown: boolean;
 
     constructor(assetData: IAssetData_Ortelius, isUnknown: boolean) {
         this.id = assetData.id;
@@ -27,29 +33,34 @@ class Asset {
         this.symbol = assetData.symbol;
         this.volume_day = Big(0);
         this.txCount_day = 0;
+        // aggregate data
+        this.isHistoryUpdated = false;
+        // not in indexer
+        this.isUnknown = isUnknown;
+        // FE metadata
         this.profane = false;
-        if (!isUnknown) {
-            this.updateVolumeHistory();   
-        }
         this.checkForProfanities(this.name);
         this.checkForProfanities(this.symbol);
     }
 
     // Daily Volume
-    private updateVolumeHistory(): void {
-        let parent = this;
-        let endDate = new Date();
-        let startTime = Date.now() - (1000 * 60 * 60 * 24);
-        let startDate = new Date(startTime);
+    public updateVolumeHistory(): void {
+        if (this.isUnknown === false) {
+            let endDate = new Date();
+            let startTime = Date.now() - (1000 * 60 * 60 * 24);
+            let startDate = new Date(startTime);
 
-        // TODO: support service for multiple chains
-        // TODO: declare interface
-        api.get(`/x/transactions/aggregates?startTime=${startDate.toISOString()}&endTime=${endDate.toISOString()}&assetID=${this.id}`).then(res => {
-            let txCount = res.data.aggregates.transactionCount || 0;
-            let txVolume = res.data.aggregates.transactionVolume || "0";
-            parent.volume_day = stringToBig(txVolume, parent.denomination);
-            parent.txCount_day = txCount;
-        });
+            // TODO: support service for multiple chains
+            // TODO: declare interface
+            api.get(`/x/transactions/aggregates?startTime=${startDate.toISOString()}&endTime=${endDate.toISOString()}&assetID=${this.id}`).then(res => {
+                let txCount = res.data.aggregates.transactionCount || 0;
+                let txVolume = res.data.aggregates.transactionVolume || "0";
+                this.volume_day = stringToBig(txVolume, this.denomination);
+                this.txCount_day = txCount;
+                this.isHistoryUpdated = true;
+                store.dispatch("checkAssetAggregatesLoaded");
+            });
+        }
     }
 
     private checkForProfanities(value: string): void {