From 351795bf3fe9dff9132209f4faec64b875153068 Mon Sep 17 00:00:00 2001
From: Keno Dressel <hire@keno.digital>
Date: Wed, 19 Jun 2024 10:00:03 +0200
Subject: [PATCH] feat(token): adds pair table to token and links

---
 src/components/explore/PairTable.vue |  2 +-
 src/store/modules/dexBackend.js      |  4 ++++
 src/views/PoolDetailView.vue         | 10 +++++++++-
 src/views/TokenDetailView.vue        | 15 ++++++++-------
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/explore/PairTable.vue b/src/components/explore/PairTable.vue
index 25efdf9e..e46ae7cc 100644
--- a/src/components/explore/PairTable.vue
+++ b/src/components/explore/PairTable.vue
@@ -43,7 +43,7 @@ export default {
           link: `/explore/pools/${pair.address}`,
         },
         txs: {
-          text: pair.transactions,
+          text: String(pair.transactions),
         },
         tvl: {
           text: formatUsdPretty(pair.tvlUsd, 0),
diff --git a/src/store/modules/dexBackend.js b/src/store/modules/dexBackend.js
index 1ba28591..0c590b96 100644
--- a/src/store/modules/dexBackend.js
+++ b/src/store/modules/dexBackend.js
@@ -196,5 +196,9 @@ export default {
     async fetchPairsByToken({ dispatch }, tokenId) {
       return dispatch('safeFetch', { url: `tokens/by-address/${tokenId}/pairs` });
     },
+
+    async fetchPairsByTokenUsd({ dispatch }, tokenId) {
+      return dispatch('safeFetch', { url: `pairs?token=${tokenId}` });
+    },
   },
 };
diff --git a/src/views/PoolDetailView.vue b/src/views/PoolDetailView.vue
index 8490d1e1..779f354a 100644
--- a/src/views/PoolDetailView.vue
+++ b/src/views/PoolDetailView.vue
@@ -2,7 +2,15 @@
   <ExploreWrapper>
     <div class="flex flex-row px-6 pt-6 items-center">
       <span v-if="pairId" class="logo"><AddressAvatar :address="pairId" /></span>
-      <h1 class="text-2xl">{{ pair?.token0.symbol }} / {{ pair?.token1.symbol }}</h1>
+      <h1 class="text-2xl">
+        <router-link :to="`/explore/tokens/${pair?.token0.address}`">{{
+          pair?.token0.symbol
+        }}</router-link>
+        /
+        <router-link :to="`/explore/tokens/${pair?.token1.address}`">{{
+          pair?.token1.symbol
+        }}</router-link>
+      </h1>
     </div>
     <div class="flex">
       <div class="flex-1 flex-auto p-6">
diff --git a/src/views/TokenDetailView.vue b/src/views/TokenDetailView.vue
index 6223d5c3..dd273cbc 100644
--- a/src/views/TokenDetailView.vue
+++ b/src/views/TokenDetailView.vue
@@ -49,7 +49,7 @@
     <div class="border-2 border-gray-800"></div>
     <div>
       <h2 class="text-2xl text-left p-4 pb-0">Pools</h2>
-      <PairTable :pairs="pairList"></PairTable>
+      <PairTable :pairs="pairTable"></PairTable>
     </div>
 
     <DividerLine />
@@ -107,6 +107,7 @@ export default defineComponent({
         pairs0: [],
         pairs1: [],
       },
+      pairTable: [],
       pairMap: new Map(),
       tokenIdMap: new Map(),
       metaInfo: {
@@ -275,6 +276,12 @@ export default defineComponent({
       ]),
     ]);
 
+    const pairWithUSD = await this.$store.dispatch('backend/fetchPairsByTokenUsd', this.tokenId);
+    this.pairTable = pairWithUSD.map((pair) => ({
+      ...pair,
+      token0: this.pairMap.get(pair.address).token0,
+      token1: this.pairMap.get(pair.address).token1,
+    }));
     this.tokenIdMap = new Map([
       ...this.pairs.pairs0.map((pair) => [pair.address, 0]),
       ...this.pairs.pairs1.map((pair) => [pair.address, 1]),
@@ -289,12 +296,6 @@ export default defineComponent({
   },
   methods: {
     shortenAddress,
-    getReserve(historyEntry) {
-      if (this.tokenIdMap.get(historyEntry.pairAddress) === 0) {
-        return historyEntry.reserve0;
-      }
-      return historyEntry.reserve1;
-    },
     getDeltaReserve(historyEntry) {
       if (this.tokenIdMap.get(historyEntry.pairAddress) === 0) {
         return historyEntry.deltaReserve0;