feat: AE coin markets (#835)

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')
   })
 })

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',

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>

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>