feat: Mining Pools Listing 2

nuxt.config.ts

@@ -13,6 +13,7 @@ export default defineNuxtConfig({
     routeRules: {
       '/proxy/avatar/**': { proxy: 'https://avatars.z52da5wt.xyz/**', cors: true },
       '/proxy/nodes': { proxy: 'http://138.68.22.27:3113/v2/debug/network', cors: true },
+      '/proxy/know': { proxy: 'https://www.aeknow.org/api', cors: true },
     },
   },
   modules: [

src/components/MinersPanel.vue

@@ -0,0 +1,48 @@
+<template>
+  <app-panel class="miners-panel">
+    <paginated-content
+      :entities="miners"
+      :total-count="minersCount"
+      pagination-style="history"
+      @prev-clicked="loadPrevMiners"
+      @next-clicked="loadNextMiners">
+      <miners-table
+        :miners="miners"
+        class="miners-panel__table u-hidden-mobile"/>
+      <!--      <miners-table-condensed-->
+      <!--        :miners="miners"-->
+      <!--        class="u-hidden-desktop"/>-->
+      <!--      todo mob-->
+    </paginated-content>
+  </app-panel>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useMinersStore } from '@/composables/miners'
+
+const { miners, minersCount } = storeToRefs(useMinersStore())
+const { fetchMiners } = useMinersStore()
+
+function loadPrevMiners() {
+  fetchMiners({ queryParameters: miners.value.prev })
+}
+
+function loadNextMiners() {
+  // todo report MDW
+  fetchMiners({ queryParameters: miners.value.next })
+}
+
+if (process.client) {
+  const limit = computed(() => isDesktop() ? 10 : 3)
+  await fetchMiners({
+    limit: limit.value,
+  })
+}
+</script>
+
+<style scoped>
+.miners-panel-panel__table {
+  margin-bottom: var(--space-4);
+}
+</style>

src/components/MinersStatistics.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="mining-statistics parent">
+    <app-panel class="mining-statistics__panel div1">
+      <h2 class="h5">
+        MINERS
+        <hint-tooltip>
+          {{ miningHints.mining }}
+        </hint-tooltip>
+      </h2>
+      <span class="mining-statistics__value">
+        {{ minersCount }}
+      </span>
+    </app-panel>
+
+    <app-panel class="mining-statistics__panel div2">
+      <h2 class="h5">
+        PEERS
+        <hint-tooltip>
+          {{ miningHints.mining }}
+        </hint-tooltip>
+      </h2>
+      <span class="mining-statistics__value">
+        {{ status.peerCount }}
+      </span>
+    </app-panel>
+    <!--todo layout wider-->
+    <app-panel class="mining-statistics__panel div3">
+      <h2 class="h5">
+        POOLS
+        <hint-tooltip>
+          {{ miningHints.mining }}
+        </hint-tooltip>
+      </h2>
+      <span class="mining-statistics__value">
+        {{ MINERS.length }}
+      </span>
+    </app-panel>
+
+    <app-panel class="mining-statistics__panel div9">
+      <h2 class="h5">
+        REWARD
+        <hint-tooltip>
+          {{ miningHints.mining }}
+        </hint-tooltip>
+      </h2>
+      <span class="mining-statistics__value">
+        <price-label
+          :price="formatAettosToAe(blockReward)"
+          :max-digits="2"/>
+      </span>
+    </app-panel>
+
+    <app-panel class="mining-statistics__panel div5">
+      <h2 class="h5">
+        DIFFICULTY
+        <hint-tooltip>
+          {{ miningHints.mining }}
+        </hint-tooltip>
+      </h2>
+      <span class="mining-statistics__value">
+        {{ Math.round(status.difficulty / 1000000000) }}
+      </span>
+      <span class="mining-statistics__unit">
+        KG/s
+      </span>
+    </app-panel>
+
+    <app-panel class="mining-statistics__panel div6">
+      <h2 class="h5">
+        HASHRATE
+        <hint-tooltip>
+          {{ miningHints.mining }}
+        </hint-tooltip>
+      </h2>
+      <span class="mining-statistics__value">
+        {{ Math.round(status.hashrate / 1000) }}
+      </span>
+      <span class="mining-statistics__unit">
+        KG/s
+      </span>
+    </app-panel>
+
+    <app-panel class="mining-statistics__panel div7">
+      <h2 class="h5">
+        BLOCKS MINED
+        <hint-tooltip>
+          {{ miningHints.mining }}
+        </hint-tooltip>
+      </h2>
+      <span class="mining-statistics__value">
+        {{ formatNumber(status.topBlockHeight) }}
+      </span>
+    </app-panel>
+
+    <app-panel class="mining-statistics__panel div8">
+      <h2 class="h5">
+        BLOCK TIME
+        <hint-tooltip>
+          {{ miningHints.mining }}
+        </hint-tooltip>
+      </h2>
+      <span class="mining-statistics__value">
+        {{ Math.round(blocksPerMinute) }}
+      </span>
+
+      <span class="mining-statistics__unit">
+        min/block
+      </span>
+    </app-panel>
+
+    <app-panel class="mining-statistics__panel div4">
+      <h2 class="h5">
+        MAX TPS
+        <hint-tooltip>
+          {{ miningHints.mining }}
+        </hint-tooltip>
+      </h2>
+      <span class="mining-statistics__value">
+        {{ maxTPS }}
+      </span>
+
+      <span class="mining-statistics__unit">
+        tx/s
+      </span>
+    </app-panel>
+
+    <app-panel class="mining-statistics__panel div10">
+      <h2 class="h5">
+        MINING POOLS IN LAST 24 HOURS
+        <hint-tooltip>
+          {{ miningHints.mining }}
+        </hint-tooltip>
+      </h2>
+
+      <pie-chart :top-miners="topMiners"/>
+      <!--      todo chart abstraction-->
+      <!--      todo add legend-->
+    </app-panel>
+  </div>
+</template>
+<script setup>
+import { miningHints } from '@/utils/hints/miningHints'
+import { useMinersStore } from '@/composables/miners'
+import { formatAettosToAe } from '@/utils/format'
+
+const { fetchMining, fetchTopMiners } = useMinersStore()
+const {
+  minersCount,
+  blockReward,
+  status,
+  blocksPerMinute,
+  maxTPS,
+  topMiners,
+} = storeToRefs(useMinersStore())
+
+if (process.client) {
+  await fetchMining()
+  await fetchTopMiners()
+}
+</script>
+
+<style scoped>
+.parent {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  grid-column-gap: 16px;
+  grid-row-gap: 16px;
+  height: 414px;
+  width: 100%;
+}
+
+/*todo how about testnet*/
+/*todo mobile view*/
+.div1 {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+.div2 {
+  grid-area: 1 / 2 / 2 / 3;
+}
+
+.div3 {
+  grid-area: 1 / 3 / 2 / 4;
+}
+
+.div4 {
+  grid-area: 3 / 3 / 4 / 4;
+}
+
+.div5 {
+  grid-area: 2 / 1 / 3 / 2;
+}
+
+.div6 {
+  grid-area: 2 / 2 / 3 / 3;
+}
+
+.div7 {
+  grid-area: 2 / 3 / 3 / 4;
+}
+
+.div8 {
+  grid-area: 3 / 1 / 4 / 2;
+}
+
+.div9 {
+  grid-area: 3 / 2 / 4 / 3;
+}
+
+.div10 {
+  grid-area: 1 / 4 / 4 / 5;
+}
+
+.mining-statistics {
+  /*display: flex;*/
+  /*flex-direction: column;*/
+  /*flex-wrap: wrap;*/
+  /*gap: var(--space-2);*/
+  /*width: 100%;*/
+  /*margin-bottom: var(--space-2);*/
+
+  /*@media (--desktop) {*/
+  /*  flex-direction: row;*/
+  /*}*/
+
+  /*&__panel {*/
+  /*  padding: var(--space-4);*/
+  /*  width: 50%;*/
+
+  /*  @media (--desktop) {*/
+  /*    width: 18%;*/
+  /*  }*/
+  /*}*/
+
+  &__value {
+    display: inline-flex;
+    justify-content: space-between;
+    font-size: 36px;
+    font-family: var(--font-monospaced);
+    font-weight: 400;
+    margin-top: var(--space-3);
+  }
+
+  &__unit {
+    white-space: nowrap;
+  }
+}
+</style>

src/components/MinersTable.vue

@@ -0,0 +1,46 @@
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>
+          Miner
+          <hint-tooltip>
+            {{ miningHints.mining }}
+          </hint-tooltip>
+        </th>
+        <th>
+          Total Reward
+          <hint-tooltip>
+            {{ miningHints.mining }}
+          </hint-tooltip>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="miner in miners.data"
+        :key="miner.miner">
+        <td>
+          <value-hash-ellipsed
+            :link-to="`/accounts/${miner.miner}`"
+            :hash="miner.miner "/>
+        </td>
+        <td>
+          <price-label
+            :price="formatAettosToAe(miner.totalReward)"/>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import { miningHints } from '../utils/hints/miningHints'
+
+defineProps({
+  miners: {
+    type: Array,
+    required: true,
+  },
+})
+</script>

src/components/MiningPoolsPanel.vue

@@ -0,0 +1,12 @@
+<template>
+  <app-panel>
+    <!--    todo count-->
+    <mining-pools-table :pools="MINERS"/>
+    <!--    <mining-pools-table-condensed></mining-pools-table-condensed>-->
+    <!--  todo mobile table-->
+  </app-panel>
+</template>
+
+<script setup>
+
+</script>