feat: DEX Trades General (#875)

aeternity · Sep 13, 2024 · 1f6a363 · 1f6a363
1 parent e33200d
commit 1f6a363
Show file tree

Hide file tree

Showing 13 changed files with 555 additions and 72 deletions.
diff --git a/.env.example b/.env.example
@@ -1,16 +1,33 @@
+#MAINNET
 NUXT_PUBLIC_SENTRY_AUTH_TOKEN=
 NUXT_PUBLIC_SENTRY_DSN=
 NUXT_PUBLIC_APP_DOMAIN=localhost:8080
-NUXT_PUBLIC_PLAUSIBLE_DOMAIN=localhost:8080
 NUXT_PUBLIC_MIDDLEWARE_URL=https://mainnet.aeternity.io/mdw
 NUXT_PUBLIC_NODE_URL=https://mainnet.aeternity.io
 NUXT_PUBLIC_WEBSOCKET_URL=wss://mainnet.aeternity.io/mdw/v2/websocket
-NUXT_PUBLIC_DEX_BACKEND_URL=https://dex-backend-mainnet.prd.service.aepps.com
 NUXT_PUBLIC_NETWORK_NAME=MAINNET
+NUXT_PUBLIC_ALTERNATIVE_NETWORK_NAME=TESTNET
 NUXT_PUBLIC_NETWORK_ID=ae_mainnet
 NUXT_PUBLIC_ALTERNATIVE_NETWORK_URL=http://localhost:8081
-NUXT_PUBLIC_ALTERNATIVE_NETWORK_NAME=TESTNET
-NUXT_PUBLIC_AE_TOKEN_ID=ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa
-NUXT_PUBLIC_DEBUG_MODE=false
+NUXT_PUBLIC_DEX_BACKEND_URL=https://dex-backend-mainnet.prd.service.aepps.com
 NUXT_PUBLIC_SH_DEX_CONTRACTS='ct_2mfj3FoZxnhkSw5RZMcP8BfPoB1QR4QiYGNCdkAvLZ1zfF6paW;ct_azbNZ1XrPjXfqBqbAh1ffLNTQ1sbnuUDFvJrXjYz7JQA1saQ3'
 NUXT_PUBLIC_CONTRACT_VERIFICATION_SERVICE_URL=https://scv-gateway.dev.service.aepps.com
+NUXT_PUBLIC_AE_TOKEN_ID=ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa
+NUXT_PUBLIC_DEBUG_MODE=false
+
+
+#TESTNET
+#NUXT_PUBLIC_SENTRY_AUTH_TOKEN=
+#NUXT_PUBLIC_SENTRY_DSN=
+#NUXT_PUBLIC_APP_DOMAIN="http://localhost:8080"
+#NUXT_PUBLIC_MIDDLEWARE_URL="https://testnet.aeternity.io/mdw"
+#NUXT_PUBLIC_NODE_URL="https://testnet.aeternity.io"
+#NUXT_PUBLIC_WEBSOCKET_URL="wss://testnet.aeternity.io/mdw/v2/websocket"
+#NUXT_PUBLIC_NETWORK_NAME="TESTNET"
+#NUXT_PUBLIC_ALTERNATIVE_NETWORK_NAME="MAINNET"
+#NUXT_PUBLIC_NETWORK_ID="ae_uat"
+#NUXT_PUBLIC_ALTERNATIVE_NETWORK_URL="http://localhost:8081"
+#NUXT_PUBLIC_DEX_BACKEND_URL=https://dex-backend-testnet.prd.service.aepps.com
+#NUXT_PUBLIC_SH_DEX_CONTRACTS='ct_NhbxN8wg8NLkGuzwRNDQhMDKSKBwDAQgxQawK7tkigi2aC7i9;ct_MLXQEP12MBn99HL6WDaiTqDbG4bJQ3Q9Bzr57oLfvEkghvpFb'
+#NUXT_PUBLIC_CONTRACT_VERIFICATION_SERVICE_URL="https://scv-gateway-testnet.dev.service.aepps.com"
+#NUXT_PUBLIC_AE_TOKEN_ID=ct_JDp175ruWd7mQggeHewSLS1PFXt9AzThCDaFedxon8mF8xTRF
diff --git a/cypress/e2e/app/dexTrades.cy.js b/cypress/e2e/app/dexTrades.cy.js
@@ -0,0 +1,7 @@
+describe('homepage', () => {
+  it('should display dex trades', () => {
+    cy.visit('/dex-trades')
+
+    cy.get('.dex-trades-table').should('be.visible')
+  })
+})
diff --git a/src/components/DexTradesPanel.vue b/src/components/DexTradesPanel.vue
@@ -0,0 +1,42 @@
+<template>
+  <app-panel>
+    <paginated-content
+      :entities="trades"
+      pagination-style="history"
+      @prev-clicked="loadPrevEvents"
+      @next-clicked="loadNextEvents">
+      <dex-trades-table
+        :trades="trades"
+        class="u-hidden-mobile"/>
+      <dex-trades-table-condensed
+        :trades="trades"
+        class="u-hidden-desktop"/>
+    </paginated-content>
+  </app-panel>
+</template>
+<script setup>
+import { useDexTradesStore } from '@/stores/dexTrades'
+
+const dexTradesStore = useDexTradesStore()
+const { trades } = storeToRefs(dexTradesStore)
+const { fetchDexTrades } = dexTradesStore
+await useAsyncData(async () => {
+  await fetchDexTrades()
+  return true
+})
+
+function loadPrevEvents() {
+  fetchDexTrades({ queryParameters: trades.value.prev })
+}
+
+function loadNextEvents() {
+  fetchDexTrades({ queryParameters: trades.value.next })
+}
+
+if (process.client) {
+  const limit = computed(() => isDesktop() ? 10 : 3)
+  await fetchDexTrades({
+    limit: limit.value,
+  })
+}
+</script>
diff --git a/src/components/DexTradesTable.vue b/src/components/DexTradesTable.vue
@@ -0,0 +1,116 @@
+<template>
+  <table class="dex-trades-table">
+    <tr>
+      <th>
+        Hash
+        <hint-tooltip>
+          {{ dexTradesHints.hash }}
+        </hint-tooltip>
+      </th>
+      <th>
+        <time-toggle-button>Executed</time-toggle-button>
+        <hint-tooltip>
+          {{ dexTradesHints.executed }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Action
+        <hint-tooltip>
+          {{ dexTradesHints.action }}
+        </hint-tooltip>
+      </th>
+
+      <th>
+        Token Amount (Out)
+        <hint-tooltip>
+          {{ dexTradesHints.tokenAmountOut }}
+        </hint-tooltip>
+      </th>
+
+      <th>
+        Token Amount (In)
+        <hint-tooltip>
+          {{ dexTradesHints.tokenAmountIn }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Swapped Rate
+        <hint-tooltip>
+          {{ dexTradesHints.swappedRate }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Value
+        <hint-tooltip>
+          {{ dexTradesHints.value }}
+        </hint-tooltip>
+      </th>
+    </tr>
+
+    <tr
+      v-for="trade in trades.data"
+      :key="trade.txHash">
+      <td>
+        <value-hash-ellipsed
+          :link-to="`/transactions/${trade.txHash}`"
+          :hash="trade.txHash"/>
+      </td>
+      <td>
+        <block-time-cell
+          :height="trade.height"
+          :timestamp="trade.timestamp"/>
+      </td>
+      <td>
+        <app-chip :variant="getChipVariant(trade.action)">
+          {{ trade.action }}
+        </app-chip>
+      </td>
+      <td>
+        <price-label
+          :contract-id="trade.fromContract"
+          :currency="trade.fromToken"
+          :price="trade.fromAmount"
+          :max-digits="4"
+          :has-link="true"/>
+      </td>
+      <td>
+        <price-label
+          :contract-id="trade.toContract"
+          :currency="trade.toToken"
+          :price="trade.toAmount"
+          :max-digits="4"
+          :has-link="true"/>
+      </td>
+      <td>
+        <not-available-label v-if="!trade.rate"/>
+        {{ trade.rate }}
+      </td>
+      <td>
+        <not-available-label v-if="!trade.value"/>
+        <template v-else>
+          $ {{ trade.value }}
+        </template>
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script setup>
+import { dexTradesHints } from "@/utils/hints/dexTradesHints";
+
+defineProps({
+  trades: {
+    type: Object,
+    required: true,
+  },
+})
+
+function getChipVariant(action) {
+  const variants = {
+    BUY: 'error',
+    SELL: 'success',
+    SWAP: 'primary',
+  }
+  return variants[action]
+}
+</script>
diff --git a/src/components/DexTradesTableCondensed.vue b/src/components/DexTradesTableCondensed.vue
@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <table
+      v-for="trade in trades.data"
+      :key="trade.txHash"
+      class="dex-trades-table-condensed__table">
+      <tbody>
+      <tr class="dex-trades-table-condensed__row">
+        <th class="dex-trades-table-condensed__header">
+          <app-tooltip>
+            Hash
+            <template #tooltip>
+              {{ dexTradesHints.hash }}
+            </template>
+          </app-tooltip>
+        </th>
+        <td class="dex-trades-table-condensed__data">
+          <value-hash-ellipsed
+            :link-to="`/transactions/${trade.txHash}`"
+            :hash="trade.txHash"/>
+        </td>
+      </tr>
+
+      <tr class="dex-trades-table-condensed__row">
+        <th class="dex-trades-table-condensed__header">
+          <app-tooltip>
+            <time-toggle-button>Executed</time-toggle-button>
+            <template #tooltip>
+              {{ dexTradesHints.executed }}
+            </template>
+          </app-tooltip>
+        </th>
+        <td class="dex-trades-table-condensed__data">
+          <block-time-cell
+            :height="trade.height"
+            :timestamp="trade.timestamp"/>
+        </td>
+      </tr>
+      <tr class="dex-trades-table-condensed__row">
+        <th class="dex-trades-table-condensed__header">
+          <app-tooltip>
+            Action
+            <template #tooltip>
+              {{ dexTradesHints.action }}
+            </template>
+          </app-tooltip>
+        </th>
+        <td class="dex-trades-table-condensed__data">
+          <app-chip :variant="getChipVariant(trade.action)">
+            {{ trade.action }}
+          </app-chip>
+        </td>
+      </tr>
+      <tr class="dex-trades-table-condensed__row">
+        <th class="dex-trades-table-condensed__header">
+          <app-tooltip>
+            Token Amount (Out)
+            <template #tooltip>
+              {{ dexTradesHints.tokenAmountOut }}
+            </template>
+          </app-tooltip>
+        </th>
+        <td class="dex-trades-table-condensed__data">
+          <price-label
+            :contract-id="trade.fromContract"
+            :currency="trade.fromToken"
+            :price="trade.fromAmount"
+            :max-digits="4"
+            :has-link="true"/>
+        </td>
+      </tr>
+      <tr class="dex-trades-table-condensed__row">
+        <th class="dex-trades-table-condensed__header">
+          <app-tooltip>
+            Token Amount (In)
+            <template #tooltip>
+              {{ dexTradesHints.tokenAmountIn }}
+            </template>
+          </app-tooltip>
+        </th>
+        <td class="dex-trades-table-condensed__data">
+          <price-label
+            :contract-id="trade.toContract"
+            :currency="trade.toToken"
+            :price="trade.toAmount"
+            :max-digits="4"
+            :has-link="true"/>
+        </td>
+      </tr>
+      <tr class="dex-trades-table-condensed__row">
+        <th class="dex-trades-table-condensed__header">
+          <app-tooltip>
+            Swapped Rate
+            <template #tooltip>
+              {{ dexTradesHints.swappedRate }}
+            </template>
+          </app-tooltip>
+        </th>
+        <td class="dex-trades-table-condensed__data">
+          <not-available-label v-if="!trade.rate"/>
+          {{ trade.rate }}
+        </td>
+      </tr>
+      <tr class="dex-trades-table-condensed__row">
+        <th class="dex-trades-table-condensed__header">
+          <app-tooltip>
+            Value
+            <template #tooltip>
+              {{ dexTradesHints.value }}
+            </template>
+          </app-tooltip>
+        </th>
+        <td class="dex-trades-table-condensed__data">
+          <not-available-label v-if="trade.value === '0'"/>
+          <template v-else>
+            $ {{ trade.value }}
+          </template>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script setup>
+import { dexTradesHints } from '@/utils/hints/dexTradesHints'
+
+defineProps({
+  trades: {
+    type: Object,
+    required: true,
+  },
+})
+
+function getChipVariant(action) {
+  const variants = {
+    BUY: 'error',
+    SELL: 'success',
+    SWAP: 'primary',
+  }
+  return variants[action]
+}
+</script>
+
+<style scoped>
+.dex-trades-table-condensed {
+  &__table {
+    padding: 0 var(--space-1) var(--space-7);
+    margin-bottom: var(--space-5);
+  }
+
+  &__header {
+    border-bottom: 1px solid var(--color-midnight-25);
+  }
+
+  &__row:last-of-type &__header {
+    border-bottom: 0;
+  }
+
+  &__data {
+    text-align: right;
+  }
+}
+</style>