feat: Enable average tx fees panel (#785)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>

src/components/TransactionsStatistics.vue

@@ -7,14 +7,23 @@
       </div>
     </app-panel>
     <app-panel class="transaction-statistics__panel">
-      <h5>TRANSACTIONS IN LAST 24H</h5>
+      <h5>TRANSACTIONS (LAST 24H)</h5>
       <div class="transaction-statistics__value">
         {{ formatNumber(last24hsTransactionsCount) }}
-        <app-chip :variant="chipVariant">
+        <app-chip :variant="getChipVariant(last24hsTransactionsTrend)">
           {{ last24hsTransactionsTrend }} %
         </app-chip>
       </div>
     </app-panel>
+    <app-panel class="transaction-statistics__panel">
+      <h5>AVG TRANSACTION FEE (LAST 24H)</h5>
+      <div class="transaction-statistics__value">
+        {{ last24hsAverageTransactionFees }}
+        <app-chip :variant="getChipVariant(feesTrend)">
+          {{ feesTrend }} %
+        </app-chip>
+      </div>
+    </app-panel>
   </div>
 </template>
 <script setup>
@@ -24,17 +33,24 @@ import { useTransactionsStore } from '@/stores/transactions'
 import { formatNumber } from '@/utils/format'
 
 const { fetchTotalTransactionsCount } = useBlockchainStatsStore()
-const { fetchLast24hsTransactionsCount } = useTransactionsStore()
+const { fetchLast24hsTransactionsStatistics } = useTransactionsStore()
 
 const { transactionsCount } = storeToRefs(useBlockchainStatsStore())
-const { last24hsTransactionsCount, last24hsTransactionsTrend } = storeToRefs(useTransactionsStore())
+const {
+  last24hsTransactionsCount,
+  last24hsTransactionsTrend,
+  last24hsAverageTransactionFees,
+  feesTrend,
+} = storeToRefs(useTransactionsStore())
 
 if (process.client) {
   await fetchTotalTransactionsCount()
-  await fetchLast24hsTransactionsCount()
+  await fetchLast24hsTransactionsStatistics()
 }
 
-const chipVariant = computed(() => last24hsTransactionsTrend.value > 0 ? 'success' : 'error')
+function getChipVariant(percentage) {
+  return percentage > 0 ? 'success' : 'error'
+}
 
 </script>
 

src/stores/transactions.js

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { useRuntimeConfig } from 'nuxt/app'
 import useAxios from '@/composables/useAxios'
 import { adaptTransactions } from '@/utils/adapters'
+import { formatAePrice, formatAettosToAe } from '~/utils/format'
 
 export const useTransactionsStore = defineStore('transactions', () => {
   const { MIDDLEWARE_URL } = useRuntimeConfig().public
@@ -12,6 +13,8 @@ export const useTransactionsStore = defineStore('transactions', () => {
   const transactionsStatistics = ref(null)
   const last24hsTransactionsCount = ref(null)
   const last24hsTransactionsTrend = ref(null)
+  const last24hsAverageTransactionFees = ref(null)
+  const feesTrend = ref(null)
 
   const transactions = computed(() =>
     rawTransactions.value
@@ -32,11 +35,13 @@ export const useTransactionsStore = defineStore('transactions', () => {
     transactionsCount.value = data
   }
 
-  async function fetchLast24hsTransactionsCount() {
+  async function fetchLast24hsTransactionsStatistics() {
     last24hsTransactionsCount.value = null
     const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/stats`)
     last24hsTransactionsCount.value = data.last24hsTransactions
     last24hsTransactionsTrend.value = data.transactionsTrend
+    last24hsAverageTransactionFees.value = formatAePrice(formatAettosToAe(data.last24hsAverageTransactionFees), 6)
+    feesTrend.value = data.feesTrend
   }
 
   return {
@@ -45,8 +50,10 @@ export const useTransactionsStore = defineStore('transactions', () => {
     fetchTransactions,
     fetchTransactionsCount,
     transactionsStatistics,
-    fetchLast24hsTransactionsCount,
+    fetchLast24hsTransactionsStatistics,
     last24hsTransactionsCount,
     last24hsTransactionsTrend,
+    last24hsAverageTransactionFees,
+    feesTrend,
   }
 })