add basic UI

aeternity · Aug 7, 2024 · c9a528f · c9a528f
1 parent 5f47728
commit c9a528f
Show file tree

Hide file tree

Showing 5 changed files with 322 additions and 98 deletions.
diff --git a/src/components/TokenTradesPanel.vue b/src/components/TokenTradesPanel.vue
@@ -0,0 +1,159 @@
+<template>
+
+
+  <!--    <paginated-content-->
+  <!--      :entities="tokenEvents"-->
+  <!--      pagination-style="history"-->
+  <!--      :total-count="tokenEventsCount"-->
+  <!--      @prev-clicked="loadPrevEvents"-->
+  <!--      @next-clicked="loadNextEvents">-->
+  <!--      <token-events-table-->
+  <!--        v-if="tokenEvents"-->
+  <!--        :token-events="tokenEvents"-->
+  <!--        class="token-events-panel__table u-hidden-mobile"/>-->
+  <!--      <token-events-table-condensed-->
+  <!--        v-if="tokenEvents"-->
+  <!--        :token-events="tokenEvents"-->
+  <!--        class="u-hidden-desktop"/>-->
+  <!--    </paginated-content>-->
+
+
+  <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 === '0'"/>
+        <template v-else>
+          $ {{ trade.value }}
+        </template>
+      </td>
+    </tr>
+  </table>
+
+
+  {{ trades }}
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useTokenDetailsStore } from '@/stores/tokenDetails'
+
+const { trades } = storeToRefs(useTokenDetailsStore())
+const { fetchTokenTrades } = useTokenDetailsStore()
+const route = useRoute()
+//
+// function loadPrevEvents() {
+//   fetchTokenEvents({ queryParameters: tokenEvents.value.prev })
+// }
+//
+// function loadNextEvents() {
+//   fetchTokenEvents({ queryParameters: tokenEvents.value.next })
+// }
+
+
+function getChipVariant(action) {
+  const variants = {
+    BUY: 'error',
+    SELL: 'success',
+    SWAP: 'primary',
+  }
+  return variants[action]
+}
+
+if (process.client) {
+  const limit = computed(() => isDesktop() ? 10 : 3)
+  await fetchTokenTrades({
+    limit: limit.value,
+    contractId: route.params.id,
+  })
+}
+</script>
+
+<style scoped>
+.token-events-panel__table {
+  margin-bottom: var(--space-4);
+}
+</style>
diff --git a/src/pages/tokens/[id].vue b/src/pages/tokens/[id].vue
@@ -22,6 +22,9 @@
       <app-tab title="Events">
         <token-events-panel/>
       </app-tab>
+      <app-tab title="Trades">
+        <token-trades-panel/>
+      </app-tab>
     </app-tabs>
   </template>
   <loader-panel v-else/>
@@ -39,7 +42,7 @@ const { tokenDetails } = storeToRefs(tokenDetailsStore)
 const { fetchTokenDetails } = tokenDetailsStore
 
 const { isLoading } = useLoading()
-const TAB_KEYS = ['holders', 'events']
+const TAB_KEYS = ['holders', 'events', 'trades']
 
 const activeTabIndex = computed({
   get() {

diff --git a/src/stores/tokenDetails.js b/src/stores/tokenDetails.js
@@ -7,104 +7,121 @@ import { useAesdk } from '@/stores/aesdk'
 import { useDexStore } from '@/stores/dex'
 
 export const useTokenDetailsStore = defineStore('tokenDetails', () => {
-  const { MIDDLEWARE_URL } = useRuntimeConfig().public
-  const axios = useAxios()
-  const { aeSdk } = storeToRefs(useAesdk())
-  const { fetchPrice } = useDexStore()
-
-  const tokenId = ref(null)
-  const price = ref(null)
-  const rawTokenEvents = ref(null)
-  const tokenEventsCount = ref(null)
-
-  const rawToken = ref(null)
-  const rawTotalSupply = ref(null)
-  const rawTokenHolders = ref(null)
-
-  const tokenDetails = computed(() => rawToken.value
-    ? adaptTokenDetails(
-      rawToken.value,
-      rawTotalSupply.value,
-      price.value,
-    )
-    : null,
-  )
-
-  const tokenHolders = computed(() =>
-    tokenDetails.value && rawTokenHolders.value
-      ? adaptTokenHolders(
-        rawTokenHolders.value,
-        tokenDetails.value,
+    const { MIDDLEWARE_URL } = useRuntimeConfig().public
+    const axios = useAxios()
+    const { aeSdk } = storeToRefs(useAesdk())
+    const { fetchPrice } = useDexStore()
+
+    const tokenId = ref(null)
+    const price = ref(null)
+    const rawTokenEvents = ref(null)
+    const tokenEventsCount = ref(null)
+
+    const rawToken = ref(null)
+    const rawTotalSupply = ref(null)
+    const rawTokenHolders = ref(null)
+    const rawTokenTrades = ref(null)
+
+    const tokenDetails = computed(() => rawToken.value
+      ? adaptTokenDetails(
+        rawToken.value,
+        rawTotalSupply.value,
+        price.value,
       )
       : null,
-  )
-
-  const tokenEvents = computed(() => {
-    return rawTokenEvents.value
-      ? adaptTokenEvents(rawTokenEvents.value)
-      : null
-  })
-
-  function fetchTokenDetails(id) {
-    tokenId.value = id
-
-    const tokenPromise = fetchToken()
-
-    return Promise.all([
-      tokenPromise,
-      Promise.allSettled([
-        fetchTotalSupply(),
-        tokenPromise.then(() => fetchTokenPrice()),
-      ]),
-    ])
-  }
-
-  async function fetchTokenPrice() {
-    price.value = await fetchPrice(tokenId.value, rawToken.value.decimals)
-  }
-
-  async function fetchToken() {
-    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/aex9/${tokenId.value}`)
-    rawToken.value = data
-  }
-
-  async function fetchTotalSupply() {
-    const contractInstance = await aeSdk.value.initializeContract({
-      aci: TOKEN_SUPPLY_ACI,
-      address: tokenId.value,
+    )
+
+    const tokenHolders = computed(() =>
+      tokenDetails.value && rawTokenHolders.value
+        ? adaptTokenHolders(
+          rawTokenHolders.value,
+          tokenDetails.value,
+        )
+        : null,
+    )
+
+    const tokenEvents = computed(() => {
+      return rawTokenEvents.value
+        ? adaptTokenEvents(rawTokenEvents.value)
+        : null
     })
-    const contractCallResult = await contractInstance.total_supply()
-    rawTotalSupply.value = contractCallResult?.decodedResult
-  }
-
-  async function fetchTokenEvents({ queryParameters, limit, contractId } = {}) {
-    rawTokenEvents.value = null
-    const defaultParameters = `/v3/contracts/logs?contract=${contractId}&aexn-args=true&limit=${limit ?? 10}`
-    const { data } = await axios.get(`${MIDDLEWARE_URL}${queryParameters || defaultParameters}`)
-    rawTokenEvents.value = data
-  }
-
-  async function fetchTokenEventsCount(contractId) {
-    const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/aex9/${contractId}/logs-count`)
-    tokenEventsCount.value = data.data
-  }
-
-  async function fetchTokenHolders({ queryParameters, limit } = {}) {
-    rawTokenHolders.value = null
-    const defaultParameters = `/v3/aex9/${tokenId.value}/balances?by=amount&limit=${limit ?? 10}`
-    const { data } = await axios.get(`${MIDDLEWARE_URL}${queryParameters || defaultParameters}`)
-    rawTokenHolders.value = data
-  }
-
-  return {
-    fetchTokenDetails,
-    fetchTokenHolders,
-    fetchTokenEvents,
-    fetchTokenEventsCount,
-    tokenDetails,
-    tokenHolders,
-    tokenEvents,
-    tokenEventsCount,
-  }
-},
+
+    function fetchTokenDetails(id) {
+      tokenId.value = id
+
+      const tokenPromise = fetchToken()
+
+      return Promise.all([
+        tokenPromise,
+        Promise.allSettled([
+          fetchTotalSupply(),
+          tokenPromise.then(() => fetchTokenPrice()),
+        ]),
+      ])
+    }
+
+    // todo fix indent
+    // todo shorten naming
+    const trades = computed(() => rawTokenTrades.value && price.value
+      ? adaptTrades(rawTokenTrades.value, price.value)
+      : null,
+    )
+
+    async function fetchTokenPrice() {
+      price.value = await fetchPrice(tokenId.value, rawToken.value.decimals)
+    }
+
+    async function fetchToken() {
+      const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/aex9/${tokenId.value}`)
+      rawToken.value = data
+    }
+
+    async function fetchTotalSupply() {
+      const contractInstance = await aeSdk.value.initializeContract({
+        aci: TOKEN_SUPPLY_ACI,
+        address: tokenId.value,
+      })
+      const contractCallResult = await contractInstance.total_supply()
+      rawTotalSupply.value = contractCallResult?.decodedResult
+    }
+
+    async function fetchTokenEvents({ queryParameters, limit, contractId } = {}) {
+      rawTokenEvents.value = null
+      const defaultParameters = `/v3/contracts/logs?contract=${contractId}&aexn-args=true&limit=${limit ?? 10}`
+      const { data } = await axios.get(`${MIDDLEWARE_URL}${queryParameters || defaultParameters}`)
+      rawTokenEvents.value = data
+    }
+
+    async function fetchTokenEventsCount(contractId) {
+      const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/aex9/${contractId}/logs-count`)
+      tokenEventsCount.value = data.data
+    }
+
+    async function fetchTokenHolders({ queryParameters, limit } = {}) {
+      rawTokenHolders.value = null
+      const defaultParameters = `/v3/aex9/${tokenId.value}/balances?by=amount&limit=${limit ?? 10}`
+      const { data } = await axios.get(`${MIDDLEWARE_URL}${queryParameters || defaultParameters}`)
+      rawTokenHolders.value = data
+    }
+
+    async function fetchTokenTrades({ queryParameters, limit, contractId } = {}) {
+      rawTokenTrades.value = null
+      const defaultParameters = `/v3/dex/${contractId}/swaps?limit=${limit ?? 10}`
+      const { data } = await axios.get(`${MIDDLEWARE_URL}${queryParameters || defaultParameters}`)
+      rawTokenTrades.value = data
+    }
+
+    return {
+      fetchTokenDetails,
+      fetchTokenHolders,
+      fetchTokenEvents,
+      fetchTokenEventsCount,
+      fetchTokenTrades,
+      tokenDetails,
+      tokenHolders,
+      tokenEvents,
+      tokenEventsCount,
+      trades
+    }
+  },
 )