From 31da7e4a00e6d0ef9c0d8e5b53ec6282b05179cf Mon Sep 17 00:00:00 2001
From: Jan Michek <15363559+janmichek@users.noreply.github.com>
Date: Mon, 15 Jul 2024 16:15:25 +0200
Subject: [PATCH] feat: AE coin markets (#835)

---
 cypress/e2e/app/aeCoin.cy.js                  |   3 +
 nuxt.config.ts                                |   7 +
 src/components/AeCoinMarketsPanel.vue         |  43 +++
 src/components/AeCoinMarketsTable.vue         |  87 +++++
 .../AeCoinMarketsTableCondensed.vue           | 304 ++++++++++++++++++
 src/components/AeCoinPanel.vue                |  27 +-
 src/pages/tokens/AE.vue                       |  56 +++-
 src/stores/aeCoin.js                          |  95 ++++++
 src/stores/marketStats.js                     |  14 +-
 src/stores/transactions.js                    |   2 +-
 src/utils/adapters.js                         |  37 +++
 src/utils/constants.js                        |  11 +-
 src/utils/hints/aeCoinHints.js                |   4 +
 13 files changed, 665 insertions(+), 25 deletions(-)
 create mode 100644 src/components/AeCoinMarketsPanel.vue
 create mode 100644 src/components/AeCoinMarketsTable.vue
 create mode 100644 src/components/AeCoinMarketsTableCondensed.vue
 create mode 100644 src/stores/aeCoin.js

diff --git a/cypress/e2e/app/aeCoin.cy.js b/cypress/e2e/app/aeCoin.cy.js
index b426677ef..0548ca16d 100644
--- a/cypress/e2e/app/aeCoin.cy.js
+++ b/cypress/e2e/app/aeCoin.cy.js
@@ -4,5 +4,8 @@ describe('ae coin', () => {
 
     cy.get('.ae-coin-panel table').should('be.visible')
     cy.get('.ae-coin-transactions-panel .paginated-content').should('be.visible')
+
+    cy.contains('.tabs__item', 'Markets').click()
+    cy.get('.ae-coin-transactions-panel table').should('be.visible')
   })
 })
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f04f78e01..1f1ea382a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,6 +9,13 @@ export default defineNuxtConfig({
   devServer: {
     port: 8080,
   },
+  nitro: {
+    routeRules: {
+      '/proxy/gate': { proxy: 'https://api.gateio.ws/api/v4/spot/tickers?currency_pair=AE_USDT', cors: true },
+      '/proxy/mexc': { proxy: 'https://api.mexc.com/api/v3/ticker/24hr?symbol=AEUSDT', cors: true },
+      '/proxy/coinw': { proxy: 'https://api.coinw.com/api/v1/public?command=returnTicker', cors: true },
+    },
+  },
   modules: [
     '@pinia/nuxt',
     '@nuxtjs/plausible',
diff --git a/src/components/AeCoinMarketsPanel.vue b/src/components/AeCoinMarketsPanel.vue
new file mode 100644
index 000000000..c89bbc03d
--- /dev/null
+++ b/src/components/AeCoinMarketsPanel.vue
@@ -0,0 +1,43 @@
+<template>
+  <app-panel class="ae-coin-transactions-panel">
+    <loader-indicator v-if="isLoading"/>
+    <template v-else>
+      <ae-coin-markets-table
+        class="u-hidden-mobile"
+        :gate="gate"
+        :mexc="mexc"
+        :hot-coin="hotCoin"
+        :coin-store="coinStore"
+        :coin-w="coinW"/>
+      <ae-coin-markets-table-condensed
+        class="u-hidden-desktop"
+        :gate="gate"
+        :mexc="mexc"
+        :hot-coin="hotCoin"
+        :coin-store="coinStore"
+        :coin-w="coinW"/>
+    </template>
+  </app-panel>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useAeCoinStore } from '@/stores/aeCoin'
+
+const aeCoinStore = useAeCoinStore()
+const { fetchMarketStats } = aeCoinStore
+const {
+  gate,
+  mexc,
+  hotCoin,
+  coinStore,
+  coinW,
+  isLoading,
+} = storeToRefs(aeCoinStore)
+
+await useAsyncData(async() => {
+  await fetchMarketStats()
+  return true
+})
+
+</script>
diff --git a/src/components/AeCoinMarketsTable.vue b/src/components/AeCoinMarketsTable.vue
new file mode 100644
index 000000000..9fc9124ba
--- /dev/null
+++ b/src/components/AeCoinMarketsTable.vue
@@ -0,0 +1,87 @@
+<template>
+  <table>
+    <tr>
+      <th>
+        Name
+        <hint-tooltip>
+          {{ aeCoinHints.marketName }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Token Pair
+        <hint-tooltip>
+          {{ aeCoinHints.pair }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Price
+        <hint-tooltip>
+          {{ aeCoinHints.marketPrice }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Volume (24h)
+        <hint-tooltip>
+          {{ aeCoinHints.volume }}
+        </hint-tooltip>
+      </th>
+    </tr>
+    <tr>
+      <td>Gate.io</td>
+      <td>AE / USDT</td>
+      <td>$ {{ formatNullable(formatNumber(gate?.price)) }}</td>
+      <td>$ {{ formatNullable(formatNumber(gate?.volume)) }}</td>
+    </tr>
+    <tr>
+      <td>Mexc</td>
+      <td>AE / USDT</td>
+      <td>$ {{ formatNullable(formatNumber(mexc?.price)) }}</td>
+      <td>$ {{ formatNullable(formatNumber(mexc?.volume)) }}</td>
+    </tr>
+    <tr>
+      <td>HotCoin</td>
+      <td>AE / USDT</td>
+      <td>$ {{ formatNullable(formatNumber(hotCoin?.price)) }}</td>
+      <td>$ {{ formatNullable(formatNumber(hotCoin?.volume)) }}</td>
+    </tr>
+    <tr>
+      <td>CoinStore</td>
+      <td>AE / USDT</td>
+      <td>$ {{ formatNullable(formatNumber(coinStore?.price)) }}</td>
+      <td>$ {{ formatNullable(formatNumber(coinStore?.volume)) }}</td>
+    </tr>
+    <tr>
+      <td>CoinW</td>
+      <td>AE / USDT</td>
+      <td>$ {{ formatNullable(formatNumber(coinW?.price)) }}</td>
+      <td>$ {{ formatNullable(formatNumber(coinW?.volume)) }}</td>
+    </tr>
+  </table>
+</template>
+
+<script setup>
+import { aeCoinHints } from '@/utils/hints/aeCoinHints'
+
+defineProps({
+  gate: {
+    type: Object,
+    required: true,
+  },
+  mexc: {
+    type: Object,
+    required: true,
+  },
+  hotCoin: {
+    type: Object,
+    required: true,
+  },
+  coinStore: {
+    type: Object,
+    required: true,
+  },
+  coinW: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
diff --git a/src/components/AeCoinMarketsTableCondensed.vue b/src/components/AeCoinMarketsTableCondensed.vue
new file mode 100644
index 000000000..29c2d7ca1
--- /dev/null
+++ b/src/components/AeCoinMarketsTableCondensed.vue
@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <table class="ae-coin-markets-table-condensed__table">
+      <tbody>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            <app-tooltip>
+              Name
+              <template #tooltip>
+                {{ aeCoinHints.marketName }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            Gate.io
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Token Pair
+            <hint-tooltip>
+              {{ aeCoinHints.pair }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            AE / USDT
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Price
+            <hint-tooltip>
+              {{ aeCoinHints.marketPrice }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            $ {{ formatNullable(formatNumber(gate?.price)) }}
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Volume (24h)
+            <hint-tooltip>
+              {{ aeCoinHints.volume }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            $ {{ formatNullable(formatNumber(gate?.volume)) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table class="ae-coin-markets-table-condensed__table">
+      <tbody>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            <app-tooltip>
+              Name
+              <template #tooltip>
+                {{ aeCoinHints.marketName }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            Mexc
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Token Pair
+            <hint-tooltip>
+              {{ aeCoinHints.pair }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            AE / USDT
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Price
+            <hint-tooltip>
+              {{ aeCoinHints.marketPrice }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            $ {{ formatNullable(formatNumber(mexc?.price)) }}
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Volume (24h)
+            <hint-tooltip>
+              {{ aeCoinHints.volume }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            $ {{ formatNullable(formatNumber(mexc?.volume)) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table class="ae-coin-markets-table-condensed__table">
+      <tbody>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            <app-tooltip>
+              Name
+              <template #tooltip>
+                {{ aeCoinHints.marketName }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            HotCoin
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Token Pair
+            <hint-tooltip>
+              {{ aeCoinHints.pair }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            AE / USDT
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Price
+            <hint-tooltip>
+              {{ aeCoinHints.marketPrice }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            $ {{ formatNullable(formatNumber(hotCoin?.price)) }}
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Volume (24h)
+            <hint-tooltip>
+              {{ aeCoinHints.volume }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            $ {{ formatNullable(formatNumber(hotCoin?.volume)) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table class="ae-coin-markets-table-condensed__table">
+      <tbody>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            <app-tooltip>
+              Name
+              <template #tooltip>
+                {{ aeCoinHints.marketName }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            CoinStore
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Token Pair
+            <hint-tooltip>
+              {{ aeCoinHints.pair }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            AE / USDT
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Price
+            <hint-tooltip>
+              {{ aeCoinHints.marketPrice }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            $ {{ formatNullable(formatNumber(coinStore?.price)) }}
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Volume (24h)
+            <hint-tooltip>
+              {{ aeCoinHints.volume }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            $ {{ formatNullable(formatNumber(coinStore?.volume)) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table class="ae-coin-markets-table-condensed__table">
+      <tbody>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            <app-tooltip>
+              Name
+              <template #tooltip>
+                {{ aeCoinHints.marketName }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            CoinW
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Token Pair
+            <hint-tooltip>
+              {{ aeCoinHints.pair }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            AE / USDT
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Price
+            <hint-tooltip>
+              {{ aeCoinHints.marketPrice }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            $ {{ formatNullable(formatNumber(coinW?.price)) }}
+          </td>
+        </tr>
+        <tr class="ae-coin-markets-table-condensed__row">
+          <th class="ae-coin-markets-table-condensed__header">
+            Volume (24h)
+            <hint-tooltip>
+              {{ aeCoinHints.volume }}
+            </hint-tooltip>
+          </th>
+          <td class="ae-coin-markets-table-condensed__data">
+            $ {{ formatNullable(formatNumber(coinW?.volume)) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+
+import { aeCoinHints } from '@/utils/hints/aeCoinHints'
+
+defineProps({
+  gate: {
+    type: Object,
+    required: true,
+  },
+  mexc: {
+    type: Object,
+    required: true,
+  },
+  hotCoin: {
+    type: Object,
+    required: true,
+  },
+  coinStore: {
+    type: Object,
+    required: true,
+  },
+  coinW: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.ae-coin-markets-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);
+    padding-right: var(--space-4);
+  }
+
+  &__row:last-of-type &__header {
+    border-bottom: 0;
+  }
+
+  &__data {
+    text-align: right;
+  }
+}
+</style>
diff --git a/src/components/AeCoinPanel.vue b/src/components/AeCoinPanel.vue
index 89fbf6553..466291b87 100644
--- a/src/components/AeCoinPanel.vue
+++ b/src/components/AeCoinPanel.vue
@@ -70,23 +70,24 @@
 </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(),
-]))
+defineProps({
+  price: {
+    type: Number,
+    required: true,
+  },
+  priceChange: {
+    type: Number,
+    required: true,
+  },
+  totalTokenSupply: {
+    type: Number,
+    required: true,
+  },
+})
 
 </script>
 
diff --git a/src/pages/tokens/AE.vue b/src/pages/tokens/AE.vue
index 4935e960c..0e6b84a8b 100644
--- a/src/pages/tokens/AE.vue
+++ b/src/pages/tokens/AE.vue
@@ -22,20 +22,72 @@
   </page-header>
 
   <template v-if="!isLoading">
-    <ae-coin-panel class="ae-coin__panel"/>
-    <app-tabs>
+    <ae-coin-panel
+      class="ae-coin__panel"
+      :price="price"
+      :price-change="priceChange"
+      :total-token-supply="totalTokenSupply"/>
+
+    <app-tabs v-model="activeTabIndex">
       <app-tab title="Transactions">
         <ae-coin-transactions-panel/>
       </app-tab>
+      <app-tab title="Markets">
+        <ae-coin-markets-panel/>
+      </app-tab>
     </app-tabs>
   </template>
   <loader-panel v-else/>
 </template>
 
 <script setup>
+import { storeToRefs } from 'pinia'
 import { aeCoinHints } from '@/utils/hints/aeCoinHints'
+import { useMarketStatsStore } from '@/stores/marketStats'
+import { useBlockchainStatsStore } from '@/stores/blockchainStats'
+
+const route = useRoute()
+const { push, replace } = useRouter()
+
+const { price, priceChange } = storeToRefs(useMarketStatsStore())
+const { fetchMarketStats } = useMarketStatsStore()
+
+const { totalTokenSupply } = storeToRefs(useBlockchainStatsStore())
+const { fetchTotalStats } = useBlockchainStatsStore()
 
 const { isLoading } = useLoading()
+const TAB_KEYS = ['transactions', 'markets']
+
+const activeTabIndex = computed({
+  get() {
+    const { type: activeTabName } = route.query
+
+    if (activeTabName === undefined) {
+      return 0
+    }
+
+    return TAB_KEYS.indexOf(activeTabName)
+  },
+  set(index) {
+    const newRoute = {
+      query: {
+        type: TAB_KEYS[index],
+      },
+    }
+
+    if (activeTabIndex.value === index) {
+      // if navigating back
+      return replace(newRoute)
+    }
+
+    return push(newRoute)
+  },
+})
+
+await useAsyncData(() => Promise.allSettled([
+  fetchTotalStats(),
+  fetchMarketStats(),
+]))
 </script>
 
 <style scoped>
diff --git a/src/stores/aeCoin.js b/src/stores/aeCoin.js
new file mode 100644
index 000000000..d4d7369fd
--- /dev/null
+++ b/src/stores/aeCoin.js
@@ -0,0 +1,95 @@
+import { defineStore } from 'pinia'
+import cache from 'memory-cache'
+import useAxios from '@/composables/useAxios'
+import {
+  CACHE_KEY_COINSTORE_MARKET_DATA,
+  CACHE_KEY_COINW_MARKET_DATA,
+  CACHE_KEY_GATE_MARKET_DATA,
+  CACHE_KEY_HOTCOIN_MARKET_DATA,
+  CACHE_KEY_MEXC_MARKET_DATA,
+  MARKET_STATS_CACHE_TTL,
+  MARKET_STATS_COINSTORE_ADDRESS,
+  MARKET_STATS_HOTCOIN_ADDRESS,
+} from '@/utils/constants'
+import {
+  adaptMarketStatsCoinStore,
+  adaptMarketStatsCoinW,
+  adaptMarketStatsGate,
+  adaptMarketStatsHotCoin,
+  adaptMarketStatsMexc,
+} from '@/utils/adapters'
+
+export const useAeCoinStore = defineStore('aeCoin', () => {
+  const axios = useAxios()
+
+  const gate = ref(null)
+  const mexc = ref(null)
+  const hotCoin = ref(null)
+  const coinStore = ref(null)
+  const coinW = ref(null)
+
+  const isLoading = ref(true)
+
+  function fetchMarketStats() {
+    isLoading.value = true
+    return Promise.allSettled([
+      fetchGate(),
+      fetchMexc(),
+      fetchHotCoin(),
+      fetchCoinStore(),
+      fetchCoinW(),
+    ]).then(() => {
+      isLoading.value = false
+    })
+  }
+
+  async function fetchGate() {
+    if (!cache.get(CACHE_KEY_GATE_MARKET_DATA)) {
+      const { data } = await axios.get('/proxy/gate')
+      cache.put(CACHE_KEY_GATE_MARKET_DATA, adaptMarketStatsGate(data), MARKET_STATS_CACHE_TTL)
+    }
+    gate.value = cache.get(CACHE_KEY_GATE_MARKET_DATA)
+  }
+
+  async function fetchMexc() {
+    if (!cache.get(CACHE_KEY_MEXC_MARKET_DATA)) {
+      const { data } = await axios.get('/proxy/mexc')
+      cache.put(CACHE_KEY_MEXC_MARKET_DATA, adaptMarketStatsMexc(data), MARKET_STATS_CACHE_TTL)
+    }
+    mexc.value = cache.get(CACHE_KEY_MEXC_MARKET_DATA)
+  }
+
+  async function fetchCoinStore() {
+    if (!cache.get(CACHE_KEY_COINSTORE_MARKET_DATA)) {
+      const { data } = await axios.get(MARKET_STATS_COINSTORE_ADDRESS)
+      cache.put(CACHE_KEY_COINSTORE_MARKET_DATA, adaptMarketStatsCoinStore(data), MARKET_STATS_CACHE_TTL)
+    }
+    coinStore.value = cache.get(CACHE_KEY_COINSTORE_MARKET_DATA)
+  }
+
+  async function fetchHotCoin() {
+    if (!cache.get(CACHE_KEY_HOTCOIN_MARKET_DATA)) {
+      const { data } = await axios.get(MARKET_STATS_HOTCOIN_ADDRESS)
+      cache.put(CACHE_KEY_HOTCOIN_MARKET_DATA, adaptMarketStatsHotCoin(data), MARKET_STATS_CACHE_TTL)
+    }
+    hotCoin.value = cache.get(CACHE_KEY_HOTCOIN_MARKET_DATA)
+  }
+
+  async function fetchCoinW() {
+    if (!cache.get(CACHE_KEY_COINW_MARKET_DATA)) {
+      const { data } = await axios.get('/proxy/coinw')
+      cache.put(CACHE_KEY_COINW_MARKET_DATA, adaptMarketStatsCoinW(data), MARKET_STATS_CACHE_TTL)
+    }
+    coinW.value = cache.get(CACHE_KEY_COINW_MARKET_DATA)
+  }
+
+  return {
+    gate,
+    mexc,
+    hotCoin,
+    coinStore,
+    coinW,
+    isLoading,
+    fetchMarketStats,
+  }
+})
diff --git a/src/stores/marketStats.js b/src/stores/marketStats.js
index 04ca1b750..a14836576 100644
--- a/src/stores/marketStats.js
+++ b/src/stores/marketStats.js
@@ -2,10 +2,10 @@ import { defineStore } from 'pinia'
 import cache from 'memory-cache'
 import useAxios from '@/composables/useAxios'
 import {
-  CACHE_KEY_MARKET_DATA,
+  CACHE_KEY_COINGECKO_MARKET_DATA,
   CACHE_KEY_PRICE_DATA,
-  MARKET_STATS_ADDRESS,
   MARKET_STATS_CACHE_TTL,
+  MARKET_STATS_COINGECKO_ADDRESS,
   MAX_AE_DISTRIBUTION,
 } from '@/utils/constants'
 import { useBlockchainStatsStore } from '@/stores/blockchainStats'
@@ -40,7 +40,7 @@ export const useMarketStatsStore = defineStore('marketStats', () => {
   async function fetchPrice() {
     if (!cache.get(CACHE_KEY_PRICE_DATA)) {
       try {
-        const { data } = await axios.get(`${MARKET_STATS_ADDRESS}/simple/price?ids=aeternity&vs_currencies=usd&include_24hr_change=true`)
+        const { data } = await axios.get(`${MARKET_STATS_COINGECKO_ADDRESS}/simple/price?ids=aeternity&vs_currencies=usd&include_24hr_change=true`)
         cache.put(CACHE_KEY_PRICE_DATA, data.aeternity, MARKET_STATS_CACHE_TTL)
         isMarketCapAvailable.value = true
       } catch (e) {
@@ -54,12 +54,12 @@ export const useMarketStatsStore = defineStore('marketStats', () => {
   }
 
   async function fetchCoinStats() {
-    if (!cache.get(CACHE_KEY_MARKET_DATA)) {
-      const { data } = await axios.get(`${MARKET_STATS_ADDRESS}/coins/aeternity`)
-      cache.put(CACHE_KEY_MARKET_DATA, data.marketData, MARKET_STATS_CACHE_TTL)
+    if (!cache.get(CACHE_KEY_COINGECKO_MARKET_DATA)) {
+      const { data } = await axios.get(`${MARKET_STATS_COINGECKO_ADDRESS}/coins/aeternity`)
+      cache.put(CACHE_KEY_COINGECKO_MARKET_DATA, data.marketData, MARKET_STATS_CACHE_TTL)
     }
 
-    const cachedAeternityMarketData = cache.get(CACHE_KEY_MARKET_DATA)
+    const cachedAeternityMarketData = cache.get(CACHE_KEY_COINGECKO_MARKET_DATA)
     marketCap.value = cachedAeternityMarketData.marketCap.usd
   }
 
diff --git a/src/stores/transactions.js b/src/stores/transactions.js
index c9e0af5ce..1454ef8ac 100644
--- a/src/stores/transactions.js
+++ b/src/stores/transactions.js
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { useRuntimeConfig } from 'nuxt/app'
 import useAxios from '@/composables/useAxios'
 import { adaptTransactions } from '@/utils/adapters'
-import { formatAePrice, formatAettosToAe } from '~/utils/format'
+import { formatAePrice, formatAettosToAe } from '@/utils/format'
 
 export const useTransactionsStore = defineStore('transactions', () => {
   const { MIDDLEWARE_URL } = useRuntimeConfig().public
diff --git a/src/utils/adapters.js b/src/utils/adapters.js
index 0af1e5a7a..3e9f09152 100644
--- a/src/utils/adapters.js
+++ b/src/utils/adapters.js
@@ -622,6 +622,43 @@ export function adaptVerificationResult(verificationStatus) {
   }
 }
 
+export function adaptMarketStatsGate(stats) {
+  return {
+    price: stats[0].last,
+    volume: stats[0].baseVolume,
+  }
+}
+
+export function adaptMarketStatsMexc(stats) {
+  return {
+    price: stats.lastPrice,
+    volume: stats.volume,
+  }
+}
+
+export function adaptMarketStatsCoinStore(stats) {
+  const tokenPair = stats.data.find(item => item.symbol === 'AEUSDT')
+  return {
+    price: tokenPair.close,
+    volume: tokenPair.volume,
+  }
+}
+
+export function adaptMarketStatsHotCoin(stats) {
+  const tokenPair = stats.ticker.find(item => item.symbol === 'ae_usdt')
+  return {
+    price: tokenPair.last,
+    volume: tokenPair.vol,
+  }
+}
+
+export function adaptMarketStatsCoinW(stats) {
+  return {
+    price: stats.data.aeUsdt.last,
+    volume: stats.data.aeUsdt.baseVolume,
+  }
+}
+
 export function adaptTopAccounts(topAccounts, distribution) {
   return topAccounts
     .slice(0, 100)
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 2d23f8dfc..5a745e08c 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -1,4 +1,6 @@
-export const MARKET_STATS_ADDRESS = 'https://api.coingecko.com/api/v3'
+export const MARKET_STATS_COINGECKO_ADDRESS = 'https://api.coingecko.com/api/v3'
+export const MARKET_STATS_COINSTORE_ADDRESS = 'https://api.coinstore.com/api/v1/market/tickers'
+export const MARKET_STATS_HOTCOIN_ADDRESS = 'https://api.hotcoinfin.com/v1/market/ticker'
 export const MINUTES_PER_BLOCK = 3
 export const TX_TYPES_OPTIONS = [
   { typeQuery: null, label: 'All types' },
@@ -62,7 +64,12 @@ export const APP_KEYWORDS = 'aescan, aeternity, blockchain, explorer, search, cr
 export const APP_URL = 'https://aescan.io'
 export const APP_CREATOR = '@aeternity'
 export const MARKET_STATS_CACHE_TTL = 5 /* m */ * 60 /* s */ * 1000 /* ms */
-export const CACHE_KEY_MARKET_DATA = 'aeternity-market-data'
+export const CACHE_KEY_COINGECKO_MARKET_DATA = 'coingecko-market-data'
+export const CACHE_KEY_GATE_MARKET_DATA = 'gate-market-data'
+export const CACHE_KEY_MEXC_MARKET_DATA = 'mexc-market-data'
+export const CACHE_KEY_COINSTORE_MARKET_DATA = 'coinStore-market-data'
+export const CACHE_KEY_HOTCOIN_MARKET_DATA = 'hotCoin-market-data'
+export const CACHE_KEY_COINW_MARKET_DATA = 'coinW-market-data'
 export const CACHE_KEY_PRICE_DATA = 'aeternity-price-data'
 export const VISIBLE_KEYBLOCKS_LIMIT = 20
 export const VISIBLE_MICROBLOCKS_LIMIT = 30
diff --git a/src/utils/hints/aeCoinHints.js b/src/utils/hints/aeCoinHints.js
index 4c4f14a01..dbdef5824 100644
--- a/src/utils/hints/aeCoinHints.js
+++ b/src/utils/hints/aeCoinHints.js
@@ -5,4 +5,8 @@ export const aeCoinHints = {
   totalSupply: 'Amount of coins in circulation.',
   circulating: 'Amount of distributed coins minus the burned amount.',
   decimals: 'The decimal granularity of the coin.',
+  marketName: 'Name of the exchange market name.',
+  pair: 'Trading token pair at given market.',
+  marketPrice: 'Price of the token in USD at given exchange.',
+  volume: '24h transaction volume in USD at given exchange.',
 }