feat: adds generic dashboard

src/components/explore/BaseTable.vue

@@ -23,7 +23,7 @@
         </tr>
       </tbody>
     </table>
-    <div v-if="rows.length > 10">
+    <div v-if="rows.length > pageSize">
       <div class="flex justify-end gap-4 p-4">
         <ButtonDefault fill="transparent" :disabled="page === 0" @click="setFirstPage">
           First
@@ -62,6 +62,10 @@ export default {
       type: Array,
       required: true,
     },
+    pageSize: {
+      type: Number,
+      default: 10,
+    },
   },
   data() {
     return {
@@ -71,10 +75,10 @@ export default {
   computed: {
     ...mapGetters(['activeNetwork']),
     dataPaginated() {
-      return this.rows.slice(this.page * 10, this.page * 10 + 10);
+      return this.rows.slice(this.page * this.pageSize, this.page * this.pageSize + this.pageSize);
     },
     lastPage() {
-      return this.page * 10 + 10 >= this.rows.length;
+      return this.page * this.pageSize + this.pageSize >= this.rows.length;
     },
     nonHeaderColumns() {
       return this.columns.slice(1);
@@ -91,7 +95,7 @@ export default {
       this.page = 0;
     },
     setLastPage() {
-      this.page = Math.floor(this.rows.length / 10);
+      this.page = Math.floor(this.rows.length / this.pageSize);
     },
   },
 };

src/components/explore/DividerLine.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="border-2 border-gray-800"></div>
+</template>
+
+<script>
+export default {
+  name: 'DividerLine',
+};
+</script>
+<style scoped lang="scss"></style>

src/components/explore/PairTable.vue

@@ -1,10 +1,10 @@
 <template>
-  <BaseTable :columns="columns" :rows="pairsTableData" />
+  <BaseTable :columns="columns" :rows="pairsTableData" :page-size="pageSize" />
 </template>
 
 <script>
 import BaseTable from '@/components/explore/BaseTable.vue';
-import { mapGetters } from 'vuex';
+import { formatUsdPretty } from '@/lib/utils';
 
 export default {
   name: 'PairTable',
@@ -14,19 +14,47 @@ export default {
       type: Array,
       required: true,
     },
+    pageSize: {
+      type: Number,
+      default: 10,
+    },
   },
   data() {
     return {
-      columns: [{ key: 'pair', label: '' }],
+      columns: [
+        { key: 'pair', label: '' },
+        {
+          key: 'txs',
+          label: 'Transactions',
+        },
+        { key: 'tvl', label: 'TVL' },
+        { key: 'volumeDay', label: 'Volume (24h)' },
+        { key: 'volumeMonth', label: 'Volume (30d)' },
+        { key: 'volumeAll', label: 'Volume' },
+      ],
     };
   },
   computed: {
-    ...mapGetters(['activeNetwork']),
     pairsTableData() {
       return this.pairs.map((pair) => ({
         pair: {
           text: `${pair.token0.symbol}/${pair.token1.symbol}`,
-          link: `${this.activeNetwork.explorerUrl}/contracts/${pair.id}`,
+          link: `/explore/pools/${pair.address}`,
+        },
+        txs: {
+          text: pair.transactions,
+        },
+        tvl: {
+          text: formatUsdPretty(pair.tvlUsd, 0),
+        },
+        volumeDay: {
+          text: formatUsdPretty(pair.volumeUsdDay, 0),
+        },
+        volumeMonth: {
+          text: formatUsdPretty(pair.volumeUsdMonth, 0),
+        },
+        volumeAll: {
+          text: formatUsdPretty(pair.volumeUsdAll, 0),
         },
       }));
     },

src/components/explore/PriceHistoryGraph.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-2 mb-3">
+  <div v-if="labels.length > 1" class="flex gap-2 mb-3">
     <ButtonDefault
       v-for="label in labels"
       :key="label"
@@ -84,11 +84,13 @@ export default {
   props: {
     datasets: { type: Array, required: true },
     x: { type: Array, required: true },
+    initialChart: { type: String, default: 'Volume' },
+    initialTimeFrame: { type: String, default: 'MAX' },
   },
   data() {
     return {
-      selectedTimeFrame: 'MAX',
-      selectedChart: 'Volume',
+      selectedTimeFrame: null,
+      selectedChart: null,
       colors: ['red', 'green', 'blue', 'purple', 'orange'],
       timeFrames: TIME_FRAMES,
     };
@@ -133,6 +135,7 @@ export default {
     },
     filteredData() {
       const selectedDataSet = this.datasets.find((d) => d.label === this.selectedChart);
+      console.log(selectedDataSet, this.datasets, this.selectedChart);
       return {
         filteredData: selectedDataSet.data
           .filter(
@@ -255,6 +258,10 @@ export default {
       return ['TVL', 'Volume', 'Fees', 'Locked'].includes(this.selectedChart);
     },
   },
+  created() {
+    this.selectedTimeFrame = this.initialTimeFrame;
+    this.selectedChart = this.initialChart;
+  },
   methods: {
     changeTimeFrame(newTimeFrame) {
       this.selectedTimeFrame = newTimeFrame;

src/components/explore/TableCell.vue

@@ -1,12 +1,22 @@
 <template>
-  <a v-if="link" :href="link" target="_blank" class="flex gap-2" rel="noopener noreferrer">
-    {{ text }}
-    <template v-if="link.includes('https')">
+  <!-- external link -->
+  <template v-if="link && link.includes('https')">
+    <a :href="link" target="_blank" class="flex gap-2" rel="noopener noreferrer">
+      {{ text }}
       <ExternalLinkIcon aria-hidden="true" />
       <span class="sr-only">External link</span>
-    </template>
-  </a>
-  <span v-else>{{ text }}</span>
+    </a>
+  </template>
+  <!-- internal link -->
+  <template v-else-if="link">
+    <router-link :to="link" class="flex gap-2">
+      {{ text }}
+    </router-link>
+  </template>
+  <!-- no link -->
+  <template v-else>
+    <span>{{ text }}</span>
+  </template>
 </template>
 
 <script>

src/components/explore/TransactionTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseTable :rows="transactionsTableData" :columns="columns" />
+  <BaseTable :rows="transactionsTableData" :columns="columns" :page-size="pageSize" />
 </template>
 
 <script>
@@ -31,6 +31,10 @@ export default {
         symbol: '',
       }),
     },
+    pageSize: {
+      type: Number,
+      default: 10,
+    },
   },
   data() {
     return {

src/store/modules/dexBackend.js

@@ -156,6 +156,10 @@ export default {
       }));
     },
 
+    async getAllTokens({ dispatch }) {
+      return dispatch('safeFetch', { url: 'tokens' });
+    },
+
     async fetchPairs({ dispatch, commit }, onlyListed) {
       const pairsXs = await dispatch('safeFetch', { url: `pairs?only-listed=${!!onlyListed}` });
       if (!pairsXs) return null;

src/views/ExploreView.vue

@@ -1,14 +1,175 @@
 <template>
-  <div class="explore-wrapper">
-    <StyledGraph> </StyledGraph>
-  </div>
+  <ExploreWrapper>
+    <div class="flex flex-row p-6 gap-6 items-center">
+      <div class="flex-1">
+        <h1 class="text-2xl">TVL</h1>
+        <PriceHistoryGraph v-if="graphData" :x="graphData.x" :datasets="tvl" initial-chart="TVL" />
+      </div>
+      <div class="flex-1">
+        <h1 class="text-2xl">Volume</h1>
+        <PriceHistoryGraph
+          v-if="graphData"
+          :x="graphData.x"
+          :datasets="volume"
+          initial-chart="Volume"
+        />
+      </div>
+    </div>
+    <DividerLine />
+    <div class="flex flex-row space-x-6 p-6 text-2xl text-left text-gray-500">
+      <a
+        :class="{
+          'cursor-pointer': true,
+          'text-white': activeTab === 'Tokens',
+        }"
+        @click="setActiveTab('Tokens')"
+        @keydown="setActiveTab('Tokens')"
+      >
+        Tokens
+      </a>
+      <span
+        :class="{
+          'cursor-pointer': true,
+          'text-white': activeTab === 'Pairs',
+        }"
+        @click="setActiveTab('Pairs')"
+        @keydown="setActiveTab('Pairs')"
+      >
+        Pools
+      </span>
+      <span
+        :class="{
+          'cursor-pointer': true,
+          'text-white': activeTab === 'Transactions',
+        }"
+        @click="setActiveTab('Transactions')"
+        @keydown="setActiveTab('Transactions')"
+      >
+        Transactions
+      </span>
+    </div>
+
+    <div v-if="activeTab === 'Pairs'">
+      <PairTable :pairs="pairTable" :page-size="20" />
+    </div>
+    <div v-if="activeTab === 'Transactions'">
+      <TransactionTable :transactions="transactionTable" :page-size="20" />
+    </div>
+    <DividerLine />
+
+    <!-- TABLE WITH TOKENS / POOLS / TX -->
+  </ExploreWrapper>
 </template>
 <script>
 import { defineComponent } from 'vue';
-import StyledGraph from '@/components/explore/PriceHistoryGraph.vue';
+import ExploreWrapper from '@/components/explore/ExploreWrapper.vue';
+import { mapGetters } from 'vuex';
+import BigNumber from 'bignumber.js';
+import PriceHistoryGraph from '@/components/explore/PriceHistoryGraph.vue';
+import PairTable from '@/components/explore/PairTable.vue';
+import TransactionTable from '@/components/explore/TransactionTable.vue';
+import DividerLine from '@/components/explore/DividerLine.vue';
 
 export default defineComponent({
-  components: { StyledGraph },
+  components: { DividerLine, TransactionTable, PairTable, PriceHistoryGraph, ExploreWrapper },
+  data() {
+    return {
+      pairs: [],
+      history: [],
+      tokenMap: new Map(),
+      activeTab: 'Pairs',
+    };
+  },
+  computed: {
+    ...mapGetters(['activeNetwork']),
+    tvl() {
+      return [this.graphData.datasets[0]];
+    },
+    volume() {
+      return [this.graphData.datasets[1]];
+    },
+    pairTable() {
+      return this.pairs
+        .map((pair) => ({
+          ...pair,
+          token0: this.tokenMap.get(pair.token0),
+          token1: this.tokenMap.get(pair.token1),
+          transactions: String(pair.transactions),
+        }))
+        .sort((a, b) => b.volumeUsdMonth - a.volumeUsdMonth || b.volumeUsdAll - a.volumeUsdAll);
+    },
+    transactionTable() {
+      return this.history
+        .slice()
+        .reverse()
+        .map((tx) => ({
+          ...tx,
+          ...this.pairToToken(tx.pairAddress),
+        }));
+    },
+    graphData() {
+      let tvl = new BigNumber(0);
+      return this.history.reduce(
+        (acc, tx) => {
+          // TVL
+          // deltaUsdValue is already calculated but absolute, so we need to check the deltaReserve to get the sign
+          const delta0 = new BigNumber(tx.delta0UsdValue).times(Math.sign(tx.deltaReserve0));
+          const delta1 = new BigNumber(tx.delta1UsdValue).times(Math.sign(tx.deltaReserve1));
+          tvl = tvl.plus(delta0.isNaN() ? 0 : delta0).plus(delta1.isNaN() ? 0 : delta1);
+          acc.datasets[0].data = [...acc.datasets[0].data, tvl.toString()].map((d) => d || 0);
+
+          // VOLUME
+          if (tx.type === 'SwapTokens') {
+            acc.datasets[1].data = [
+              ...acc.datasets[1].data,
+              new BigNumber(tx.delta0UsdValue).plus(tx.delta1UsdValue).toString(),
+            ].map((d) => d || 0);
+          } else {
+            acc.datasets[1].data = [...acc.datasets[1].data, 0].map((d) => d || 0);
+          }
+          acc.x = [...acc.x, tx.microBlockTime];
+          return acc;
+        },
+        {
+          x: [],
+          datasets: [
+            {
+              label: 'TVL',
+              data: [],
+            },
+            {
+              label: 'Volume',
+              data: [],
+            },
+          ],
+        },
+      );
+    },
+  },
+  async mounted() {
+    // fetch all tokens
+    const tokens = await this.$store.dispatch('backend/getAllTokens');
+    this.tokenMap = new Map(tokens.map((token) => [token.address, token]));
+    // fetch all pairs
+    const fetchResult = await this.$store.dispatch('backend/fetchPairs');
+    this.pairs = Object.values(fetchResult);
+    console.log(this.pairs);
+
+    // fetch all history
+    this.history = await this.$store.dispatch('backend/fetchHistory');
+  },
+  methods: {
+    pairToToken(pairAddress) {
+      const pair = this.pairs.find((p) => p.address === pairAddress);
+      return {
+        token0: this.tokenMap.get(pair.token0),
+        token1: this.tokenMap.get(pair.token1),
+      };
+    },
+    setActiveTab(tab) {
+      this.activeTab = tab;
+    },
+  },
 });
 </script>
 <style lang="scss" scoped>