feat: Transaction stats 2 (#618)

src/components/MicroblockTransactionsPanel.vue

@@ -24,7 +24,7 @@ import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 import { useRouter } from '#app'
 import { useMicroblockDetailsStore } from '@/stores/microblockDetails'
-import { TX_TYPES_OPTIONS } from '~/utils/constants'
+import { TX_TYPES_OPTIONS } from '@/utils/constants'
 
 const { push } = useRouter()
 const microblockDetailsStore = useMicroblockDetailsStore()

src/components/TransactionsStatistics.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="transaction-statistics">
+    <app-panel class="transaction-statistics__panel">
+      <h5>TOTAL TRANSACTIONS</h5>
+      <div class="transaction-statistics__value">
+        {{ formatNumber(transactionsCount) }}
+      </div>
+    </app-panel>
+    <app-panel class="transaction-statistics__panel">
+      <h5>TRANSACTIONS IN LAST 24H</h5>
+      <div class="transaction-statistics__value">
+        {{ formatNumber(last24hsTransactionsCount) }}
+      </div>
+    </app-panel>
+  </div>
+</template>
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useBlockchainStatsStore } from '@/stores/blockchainStats'
+import { useTransactionsStore } from '@/stores/transactions'
+import { formatNumber } from '@/utils/format'
+
+const { fetchTotalTransactionsCount } = useBlockchainStatsStore()
+const { fetchLast24hsTransactionsCount } = useTransactionsStore()
+
+const { transactionsCount } = storeToRefs(useBlockchainStatsStore())
+const { last24hsTransactionsCount } = storeToRefs(useTransactionsStore())
+
+await fetchTotalTransactionsCount()
+await fetchLast24hsTransactionsCount()
+
+</script>
+
+<style scoped>
+.transaction-statistics {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: 100%;
+  margin-bottom: var(--space-2);
+
+  @media (--desktop) {
+    flex-direction: row;
+  }
+
+  &__panel {
+    padding: var(--space-4);
+    width: 100%;
+
+    @media (--desktop) {
+      width: 50%;
+    }
+  }
+
+  &__value {
+    display: inline-flex;
+    justify-content: space-between;
+    width: 100%;
+    font-size: 36px;
+    font-family: var(--font-monospaced);
+    font-weight: 400;
+    margin-top: var(--space-3);
+  }
+}
+</style>

src/pages/transactions/index.vue

@@ -10,6 +10,7 @@
     </template>
   </page-header>
   <template v-if="!isLoading">
+    <transactions-stats class="transactions__transactions-stats"/>
     <transactions-chart-panel class="transactions-panel"/>
     <transactions-panel class="transactions-panel"/>
   </template>
@@ -21,20 +22,21 @@ import TransactionsPanel from '@/components/TransactionsPanel'
 import PageHeader from '@/components/PageHeader'
 import { transactionsHints } from '@/utils/hints/transactionsHints'
 import TransactionsChartPanel from '@/components/TransactionsChartPanel'
+import TransactionsStats from '@/components/TransactionsStatistics'
 
 const { isLoading } = useLoading()
 </script>
 
 <style scoped>
 .transactions-panel {
-  margin-bottom: var(--space-4);
-
-  @media (--desktop) {
-    margin-bottom: var(--space-6);
-  }
+  margin-bottom: var(--space-2);
 
   &:last-child {
     margin-bottom: 0;
   }
+
+  &__transactions-stats {
+    margin-bottom: var(--space-2);
+  }
 }
 </style>

src/stores/transactions.js

@@ -10,6 +10,7 @@ export const useTransactionsStore = defineStore('transactions', () => {
   const rawTransactions = ref(null)
   const transactionsCount = ref(null)
   const transactionsStatistics = ref(null)
+  const last24hsTransactionsCount = ref(null)
 
   const transactions = computed(() =>
     rawTransactions.value
@@ -30,6 +31,12 @@ export const useTransactionsStore = defineStore('transactions', () => {
     transactionsCount.value = data
   }
 
+  async function fetchLast24hsTransactionsCount() {
+    last24hsTransactionsCount.value = null
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/stats`)
+    last24hsTransactionsCount.value = data.last24hsTransactions
+  }
+
   async function fetchTransactionsStatistics(interval = 'day', limit = 7, range) {
     transactionsStatistics.value = null
 
@@ -44,12 +51,13 @@ export const useTransactionsStore = defineStore('transactions', () => {
   }
 
   return {
-    rawTransactions,
     transactionsCount,
     transactions,
     fetchTransactions,
     fetchTransactionsCount,
     transactionsStatistics,
     fetchTransactionsStatistics,
+    fetchLast24hsTransactionsCount,
+    last24hsTransactionsCount,
   }
 })