feat: adds tokens table

aeternity · Jun 25, 2024 · f3706d0 · f3706d0
1 parent 6450027
commit f3706d0
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 3 deletions.
diff --git a/.env b/.env
@@ -9,8 +9,8 @@ VITE_SENTRY_URL=https://c8aaaee7201f46ca9cd8d16eacc28ee0@o1154841.ingest.sentry.
 VITE_MAINNET_DEX_BACKEND_URL=http://localhost:3000
 VITE_TESTNET_DEX_BACKEND_URL=http://localhost:3000
 
-VITE_DEX_BACKEND_FETCH_TIMEOUT=500           #if skipped or 0 a default value of 2000 will be applied
-VITE_DEX_BACKEND_FETCH_INTERVAL=2000         #if skipped or 0 a default value of 2000 will be applied
+VITE_DEX_BACKEND_FETCH_TIMEOUT=8000           #if skipped or 0 a default value of 2000 will be applied
+VITE_DEX_BACKEND_FETCH_INTERVAL=10000         #if skipped or 0 a default value of 2000 will be applied
 
 #This should be commented or set to 0 in production
 VITE_DEBUG_LOG_DRY_RUN_ALTERNATIVE=1

diff --git a/src/components/explore/TokenTable.vue b/src/components/explore/TokenTable.vue
@@ -0,0 +1,92 @@
+<template>
+  <BaseTable
+    :columns="columns"
+    :rows="tokensTableData"
+    :page-size="pageSize"
+    initial-sort-by="volumeAll"
+  />
+</template>
+
+<script>
+import BaseTable from '@/components/explore/BaseTable.vue';
+import { formatUsdPretty } from '@/lib/utils';
+
+export default {
+  name: 'TokenTable',
+  components: { BaseTable },
+  props: {
+    tokens: {
+      type: Array,
+      required: true,
+    },
+    pageSize: {
+      type: Number,
+      default: 10,
+    },
+  },
+  data() {
+    return {
+      columns: [
+        { key: 'name', label: '' },
+        {
+          key: 'pairs',
+          label: 'Pools',
+          align: 'right',
+          sortable: true,
+        },
+        { key: 'tvl', label: 'TVL', align: 'right', sortable: true },
+        { key: 'fdv', label: 'FDV', align: 'right', sortable: true },
+        { key: 'priceChangeDay', label: 'Price Change (24h)', align: 'right', sortable: true },
+        { key: 'priceChangeMonth', label: 'Price Change (30D)', align: 'right', sortable: true },
+        { key: 'volumeDay', label: 'Volume (24h)', align: 'right', sortable: true },
+        { key: 'volumeMonth', label: 'Volume (30d)', align: 'right', sortable: true },
+        { key: 'volumeAll', label: 'Volume', align: 'right', sortable: true },
+      ],
+    };
+  },
+  computed: {
+    tokensTableData() {
+      return this.tokens.map((token) => ({
+        name: {
+          text: `${token.symbol} / ${token.name}`,
+          link: `/explore/tokens/${token.address}`,
+          value: `${token.symbol} / ${token.name}`,
+        },
+        pairs: {
+          text: String(token.pairs),
+          value: token.pairs,
+        },
+        tvl: {
+          text: formatUsdPretty(token.tvlUsd, 0),
+          value: token.tvlUsd,
+        },
+        fdv: {
+          text: formatUsdPretty(token.fdvUsd, 0),
+          value: token.fdvUsd,
+        },
+        priceChangeDay: {
+          text: `${token.priceChangeDay}%`,
+          value: token.priceChangeDay,
+        },
+        priceChangeMonth: {
+          text: `${token.priceChangeMonth}%`,
+          value: token.priceChangeMonth,
+        },
+        volumeDay: {
+          text: formatUsdPretty(token.volumeUsdDay, 0),
+          value: token.volumeUsdDay,
+        },
+        volumeMonth: {
+          text: formatUsdPretty(token.volumeUsdMonth, 0),
+          value: token.volumeUsdMonth,
+        },
+        volumeAll: {
+          text: formatUsdPretty(token.volumeUsdAll, 0),
+          value: token.volumeUsdAll,
+        },
+      }));
+    },
+  },
+};
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/ExploreView.vue b/src/views/ExploreView.vue
@@ -62,6 +62,9 @@
     <div v-if="activeTab === 'Transactions'">
       <TransactionTable :transactions="transactionTable" :page-size="20" />
     </div>
+    <div v-if="activeTab === 'Tokens'">
+      <TokenTable v-if="activeTab === 'Tokens'" :tokens="tokenTable" />
+    </div>
     <DividerLine />
 
     <!-- TODO TABLE WITH TOKENS  -->
@@ -77,9 +80,17 @@ import PairTable from '@/components/explore/PairTable.vue';
 import TransactionTable from '@/components/explore/TransactionTable.vue';
 import DividerLine from '@/components/explore/DividerLine.vue';
 import { detectAndModifyWAE } from '@/lib/utils';
+import TokenTable from '@/components/explore/TokenTable.vue';
 
 export default defineComponent({
-  components: { DividerLine, TransactionTable, PairTable, PriceHistoryGraph, ExploreWrapper },
+  components: {
+    TokenTable,
+    DividerLine,
+    TransactionTable,
+    PairTable,
+    PriceHistoryGraph,
+    ExploreWrapper,
+  },
   data() {
     return {
       pairs: [],
@@ -111,6 +122,9 @@ export default defineComponent({
         ...this.pairToToken(tx.pairAddress),
       }));
     },
+    tokenTable() {
+      return [...this.tokenMap.values()];
+    },
     graphData() {
       let tvl = new BigNumber(0);
       return this.history.reduce(