feat: Ae coin details (#827)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>
aeternity · Jun 5, 2024 · f56a9d4 · f56a9d4
1 parent 8f8e1ac
commit f56a9d4
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 2 deletions.
diff --git a/cypress/e2e/app/aeCoin.cy.js b/cypress/e2e/app/aeCoin.cy.js
@@ -0,0 +1,7 @@
+describe('ae coin', () => {
+  it('should display tokens', () => {
+    cy.visit('/tokens/ae')
+
+    cy.get('.ae-coin-panel table').should('be.visible')
+  })
+})
diff --git a/src/components/AeCoinPanel.vue b/src/components/AeCoinPanel.vue
@@ -0,0 +1,137 @@
+<template>
+  <app-panel class="ae-coin-panel">
+    <table>
+      <tbody>
+        <tr class="ae-coin-panel__row">
+          <th class="ae-coin-panel__table-header">
+            <hint-tooltip>
+              {{ aeCoinHints.tokenSymbol }}
+            </hint-tooltip>
+            Symbol
+          </th>
+          <td>
+            <div class="ae-coin-panel__link">
+              <img
+                class="ae-coin-panel__icon"
+                alt="æ token"
+                src="@/assets/ae-token.svg">
+              <copy-chip label="AE"/>
+            </div>
+          </td>
+        </tr>
+        <tr class="ae-coin-panel__row">
+          <th class="ae-coin-panel__table-header">
+            <hint-tooltip>
+              {{ aeCoinHints.price }}
+            </hint-tooltip>
+            Price
+          </th>
+          <td>
+            $ {{ formatNullable(price) }}
+            <app-chip
+              class="market-stats__chip"
+              :variant="priceChipVariant">
+              {{ priceChangeSign }}{{ formatNullable(priceChange) }} %
+            </app-chip>
+          </td>
+        </tr>
+        <tr class="ae-coin-panel__row">
+          <th class="ae-coin-panel__table-header">
+            <hint-tooltip>
+              {{ aeCoinHints.totalSupply }}
+            </hint-tooltip>
+            Total Supply
+          </th>
+          <td>
+            {{ formatNullable(formatAePrice(MAX_AE_DISTRIBUTION), 0) }}
+          </td>
+        </tr>
+        <tr class="ae-coin-panel__row">
+          <th class="ae-coin-panel__table-header">
+            <hint-tooltip>
+              {{ aeCoinHints.circulating }}
+            </hint-tooltip>
+            Circulating Supply
+          </th>
+          <td>
+            {{ formatNullable(formatAePrice(totalTokenSupply), 0) }}
+          </td>
+        </tr>
+        <tr class="ae-coin-panel__row">
+          <th class="ae-coin-panel__table-header">
+            <hint-tooltip>
+              {{ aeCoinHints.decimals }}
+            </hint-tooltip>
+            Decimals
+          </th>
+          <td>
+            18
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </app-panel>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useMarketStatsStore } from '@/stores/marketStats'
+import { useBlockchainStatsStore } from '@/stores/blockchainStats'
+import { formatAePrice, formatNullable } from '@/utils/format'
+import { aeCoinHints } from '@/utils/hints/aeCoinHints'
+import { MAX_AE_DISTRIBUTION } from '@/utils/constants'
+
+const { price, priceChange } = storeToRefs(useMarketStatsStore())
+const { fetchMarketStats } = useMarketStatsStore()
+
+const { totalTokenSupply } = storeToRefs(useBlockchainStatsStore())
+const { fetchTotalStats } = useBlockchainStatsStore()
+
+await useAsyncData(() => Promise.all([
+  fetchTotalStats(),
+  fetchMarketStats(),
+]))
+
+const priceChangeSign = computed(() => {
+  if (priceChange.value > 0) {
+    return '+'
+  } else if (priceChange.value === 0) {
+    return ''
+  } else if (priceChange.value < 0) {
+    return '-'
+  }
+})
+const priceChipVariant = computed(() => priceChange.value > 0 ? 'success' : 'error')
+</script>
+
+<style scoped>
+.ae-coin-panel {
+  &__table-header {
+    border-bottom: 1px solid var(--color-midnight-25);
+
+    @media (--desktop) {
+      width: var(--detail-column-width);
+    }
+  }
+
+  &__row:last-of-type &__table-header {
+    border-bottom: 0;
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__icon {
+    margin-right: var(--space-1);
+    width: 28px;
+    height: 28px;
+
+    @media (--desktop) {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+</style>
diff --git a/src/components/ContractDetailsPanel.vue b/src/components/ContractDetailsPanel.vue
@@ -225,7 +225,7 @@ import { formatAePrice, formatAettosToAe, formatEllipseHash } from '@/utils/form
 import { contractsHints } from '@/utils/hints/contractsHints'
 import HintTooltip from '@/components/HintTooltip'
 import TokenSymbolIcon from '@/components/TokenSymbolIcon'
-import AppChip from '~/components/AppChip'
+import AppChip from '@/components/AppChip'
 
 const { NODE_URL, MIDDLEWARE_URL } = useRuntimeConfig().public
 

diff --git a/src/components/CopyChip.vue b/src/components/CopyChip.vue
@@ -47,7 +47,8 @@ const textToDisplay = computed(() =>
 
 function activateCopyAnimation() {
   isCopyAnimationActive.value = true
-  copyChip.value.$el.style.width = `${copyChip.value.$el.clientWidth}px`
+  copyChip.value.$el.style.width =
+      `${Math.max(copyChip.value.$el.clientWidth, 72)}px`
 }
 
 function deactivateCopyAnimation() {
@@ -61,6 +62,7 @@ function deactivateCopyAnimation() {
   min-width: 39px;
 
   &__container {
+    width: 100%;
     display: flex;
   }
 

diff --git a/src/components/TheNavigation.vue b/src/components/TheNavigation.vue
@@ -52,6 +52,10 @@ const menuOptions = ref([{
   name: 'Tokens',
   isActive: false,
   submenu: [
+    {
+      name: 'AE Coin',
+      path: '/tokens/AE',
+    },
     {
       name: 'AEX9 Tokens',
       path: '/tokens',

diff --git a/src/pages/tokens/AE.vue b/src/pages/tokens/AE.vue
@@ -0,0 +1,23 @@
+<template>
+  <Head>
+    <Title>AE Coin</Title>
+  </Head>
+
+  <page-header>
+    AE Coin
+    <template #tooltip>
+      {{ aeCoinHints.aeCoin }}
+    </template>
+  </page-header>
+  <template v-if="!isLoading">
+    <ae-coin-panel/>
+  </template>
+  <loader-panel v-else/>
+</template>
+
+<script setup>
+import PageHeader from '@/components/PageHeader'
+import { aeCoinHints } from '@/utils/hints/aeCoinHints'
+
+const { isLoading } = useLoading()
+</script>
diff --git a/src/utils/hints/aeCoinHints.js b/src/utils/hints/aeCoinHints.js
@@ -0,0 +1,8 @@
+export const aeCoinHints = {
+  aeCoin: 'æternity native coin.',
+  tokenSymbol: 'Reserved coin name.',
+  price: 'Price of the coin in AE and USD.',
+  totalSupply: 'Amount of tokens that will be mined.',
+  circulating: 'Amount of distributed coins minus the burned amount.',
+  decimals: 'The decimal granularity of the coin.',
+}