feat: Server handlers 3

cypress/e2e/app/oracles.cy.js

@@ -17,7 +17,6 @@ describe('oracles', () => {
         cy.get('.oracles-table__data').first()
           .invoke('text')
           .should(hash2 => {
-            console.log('hash2', hash2)
             expect(hash1).not.to.eq(hash2)
           })
       })
@@ -37,7 +36,6 @@ describe('oracles', () => {
         cy.get('.oracles-table__data').first()
           .invoke('text')
           .should(hash2 => {
-            console.log('hash2', hash2)
             expect(hash1).to.eq(hash2)
           })
       })

nuxt.config.ts

@@ -13,9 +13,6 @@ export default defineNuxtConfig({
     routeRules: {
       '/proxy/avatar/**': { proxy: 'https://avatars.z52da5wt.xyz/**', cors: true },
       '/proxy/nodes': { proxy: 'http://138.68.22.27:3113/v2/debug/network', cors: true },
-      '/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: [

src/components/AccountDetailsPanel.vue

@@ -68,7 +68,7 @@
             Transactions
           </th>
           <td>
-            {{ formatNumber(accountDetails.totalTransactionsCount) }}
+            {{ formatNumber(totalAccountTransactionsCount) }}
           </td>
         </tr>
         <tr
@@ -158,6 +158,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  totalAccountTransactionsCount: {
+    type: String,
+    required: true,
+  },
 })
 
 const accountNodeUrl = computed(() =>

src/components/AccountNamesPanel.vue

@@ -27,13 +27,23 @@ const accountStore = useAccountStore()
 const { fetchAccountNames } = accountStore
 const { accountNames } = storeToRefs(accountStore)
 
+// const route = useRoute()
+
 async function loadPrevAccountNames() {
   await fetchAccountNames({ queryParameters: accountNames.value.prev })
 }
 
 async function loadNextAccountNames() {
   await fetchAccountNames({ queryParameters: accountNames.value.next })
 }
+
+// if (process.client) {
+//   // todo pass params
+//   const limit = computed(() => isDesktop() ? 10 : 3)
+//   fetchAccountNames({ accountId: route.params.id, limit })
+//   // fetchOracleEvents(`/v3/oracles/${route.params.id}/responses?limit=${limit.value}`)
+// }
+
 </script>
 
 <style scoped>

src/components/AeCoinMarketsPanel.vue

@@ -4,18 +4,18 @@
     <template v-else>
       <ae-coin-markets-table
         class="u-hidden-mobile"
-        :gate="gate"
-        :mexc="mexc"
-        :hot-coin="hotCoin"
-        :coin-store="coinStore"
-        :coin-w="coinW"/>
+        :gate="coinMarkets.gate"
+        :mexc="coinMarkets.mexc"
+        :hot-coin="coinMarkets.hotcoin"
+        :coin-store="coinMarkets.coinstore"
+        :coin-w="coinMarkets.coinw"/>
       <ae-coin-markets-table-condensed
         class="u-hidden-desktop"
-        :gate="gate"
-        :mexc="mexc"
-        :hot-coin="hotCoin"
-        :coin-store="coinStore"
-        :coin-w="coinW"/>
+        :gate="coinMarkets.gate"
+        :mexc="coinMarkets.mexc"
+        :hot-coin="coinMarkets.hotcoin"
+        :coin-store="coinMarkets.coinstore"
+        :coin-w="coinMarkets.coinw"/>
     </template>
   </app-panel>
 </template>
@@ -27,12 +27,8 @@ import { useAeCoinStore } from '@/stores/aeCoin'
 const aeCoinStore = useAeCoinStore()
 const { fetchMarketStats } = aeCoinStore
 const {
-  gate,
-  mexc,
-  hotCoin,
-  coinStore,
-  coinW,
   isLoading,
+  coinMarkets,
 } = storeToRefs(aeCoinStore)
 
 await useAsyncData(async() => {

src/components/DashboardStateChannelsTable.vue

@@ -1,4 +1,6 @@
 <template>
+  aaa
+  {{ stateChannels }}
   <table>
     <thead>
       <tr>

src/components/KeyblockMicroblocksPanel.vue

@@ -1,5 +1,6 @@
 <template>
   <app-panel class="keyblock-microblock-panel">
+    microblocks > {{ microblocks }}
     <paginated-content
       v-model:page-index="pageIndex"
       pagination-style="history"

src/components/OracleEventsPanel.vue

@@ -31,16 +31,21 @@ const route = useRoute()
 const pageIndex = ref(1)
 
 function loadPrevEvents() {
-  fetchOracleEvents(oracleEvents.value.prev)
+
+  fetchOracleEvents(route.params.id)
+  // fetchOracleEvents(oracleEvents.value.prev)
 }
 
 function loadNextEvents() {
-  fetchOracleEvents(oracleEvents.value.next)
+  fetchOracleEvents(route.params.id)
+  // fetchOracleEvents(oracleEvents.value.next)
 }
 
 if (process.client) {
+  // todo pass params
   const limit = computed(() => isDesktop() ? 10 : 3)
-  fetchOracleEvents(`/v3/oracles/${route.params.id}/responses?limit=${limit.value}`)
+  fetchOracleEvents(route.params.id)
+  // fetchOracleEvents(`/v3/oracles/${route.params.id}/responses?limit=${limit.value}`)
 }
 </script>
 

src/components/TheNavigation.vue

@@ -66,7 +66,7 @@ const menuOptions = ref([{
   submenu: [
     {
       name: 'AE Coin',
-      path: '/tokens/AE',
+      path: '/tokens/ae',
     },
     {
       name: 'AEX9 Tokens',

src/components/TimestampLabel.vue

@@ -40,7 +40,7 @@ const relativeUpdated = ref(null)
 const intervalRef = ref(null)
 
 const absolute = computed(() => {
-  return props.timestamp.toLocaleString(DateTime.DATETIME_SHORT)
+  return props.timestamp
 })
 
 const labelTime = computed(() => {
@@ -62,7 +62,8 @@ const dynamicInterval = computed(() => {
 })
 
 const expirationDuration = computed(() => {
-  return props.timestamp.diffNow().shiftTo(...DATETIME_UNITS)
+  // todo moc velky kejkle idelne passnout object
+  return DateTime.fromFormat(props.timestamp, 'f').diffNow().shiftTo(...DATETIME_UNITS)
 })
 
 const highestUnit = computed(() => {
@@ -88,7 +89,7 @@ onBeforeUnmount(() => {
 
 function update() {
   if (isPast.value) {
-    relativeUpdated.value = props.timestamp.setLocale('en-US').toRelative()
+    relativeUpdated.value = DateTime.fromFormat(props.timestamp, 'f').setLocale('en-US').toRelative()
   } else if (isNow.value) {
     relativeUpdated.value = 'now'
   } else {

src/pages/accounts/[id].vue

@@ -13,6 +13,7 @@
   <template v-if="!isLoading">
     <account-details-panel
       class="account__account-details-panel"
+      :total-account-transactions-count="totalAccountTransactionsCount"
       :account-details="accountDetails"/>
 
     <client-only>
@@ -52,7 +53,7 @@ const { isLoading } = useLoading()
 const { push, replace } = useRouter()
 
 const accountStore = useAccountStore()
-const { accountDetails, accountTokens } = storeToRefs(accountStore)
+const { accountDetails, accountTokens, totalAccountTransactionsCount } = storeToRefs(accountStore)
 const { fetchAccount } = accountStore
 const route = useRoute()
 
@@ -61,11 +62,11 @@ const isAccountExistent = computed(() => {
 })
 
 const isTabsVisible = computed(() => process.client &&
-    (isAccountExistent.value || !!accountTokens.value?.data.length),
+  (isAccountExistent.value || !!accountTokens.value?.data.length),
 )
 
 const isTokensTabPreselected = computed(() => process.client &&
-    !isAccountExistent.value && !!accountTokens.value?.data.length,
+  !isAccountExistent.value && !!accountTokens.value?.data.length,
 )
 
 const activeTabIndex = computed({

src/pages/index.vue

@@ -94,9 +94,7 @@ const {
   fetchDeltaStats,
 } = useRecentBlocksStore()
 const {
-  fetchTotalStats,
-  fetchMaxTps,
-  fetchTotalTransactionsCount,
+  fetchBlockchainStats,
 } = useBlockchainStatsStore()
 const { fetchStateChannels } = useDashboardStateChannelsStore()
 const { fetchInAuctionNames, fetchRecentlyActivatedNames } = useNamesStore()
@@ -110,6 +108,7 @@ definePageMeta({
 const isLoading = ref(true)
 
 await useAsyncData(() => Promise.all([
+  fetchBlockchainStats(),
   fetchStateChannels(),
   fetchInAuctionNames(),
   fetchRecentlyActivatedNames(),

src/pages/tokens/ae.vue

@@ -0,0 +1,118 @@
+<template>
+  <Head>
+    <Title>AE Coin</Title>
+  </Head>
+
+  <page-header>
+    AE Coin
+    <template #tooltip>
+      {{ aeCoinHints.aeCoin }}
+    </template>
+
+    <template #end>
+      <app-dropdown class="ae-coin__dropdown">
+        <app-button class="ae-coin__button">
+          Trade
+        </app-button>
+        <template #menu>
+          <markets-list/>
+        </template>
+      </app-dropdown>
+    </template>
+  </page-header>
+
+  <template v-if="!isLoading">
+    <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>
+.ae-coin {
+  &__panel {
+    margin-bottom: var(--space-4);
+
+    @media (--desktop) {
+      margin-bottom: var(--space-6);
+    }
+  }
+
+  &__button {
+    height: 32px;
+    margin-left: var(--space-1);
+  }
+
+  &__dropdown {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--space-5);
+
+    @media (--desktop) {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>

src/server/api/account/activities.js

@@ -0,0 +1,38 @@
+import { DateTime } from 'luxon'
+import useAxios from '~/composables/useAxios'
+// todo rename component
+const { MIDDLEWARE_URL } = useRuntimeConfig().public
+const axios = useAxios()
+
+export default defineEventHandler(async event => {
+  const query = getQuery(event)
+  const defaultParameters = `/v3/accounts/${query.accountId}/activities?limit=${query.limit || 10}`
+
+  const url = new URL(`${MIDDLEWARE_URL}${query.queryParameters || defaultParameters}`)
+  const { data } = await axios.get(url)
+  return adaptAccountActivities(data)
+})
+
+function adaptAccountActivities(activities) {
+  const formattedData = activities.data.map(activity => {
+    return {
+      hash: activity.payload?.hash || activity.payload?.txHash ||
+        activity.payload?.refTxHash || activity.payload?.callTxHash,
+      type: activity.type,
+      time: DateTime.fromMillis(activity.payload?.microTime || activity.blockTime)
+        .toLocaleString(DateTime.DATETIME_SHORT),
+      height: activity.payload?.blockHeight || activity.height,
+      payload: activity.payload,
+      hintKey:
+        activity.payload?.tx
+          ? activity.payload.tx.type.charAt(0).toLowerCase() + activity.payload.tx.type.slice(1)
+          : null,
+    }
+  })
+
+  return {
+    next: activities.next,
+    data: formattedData,
+    prev: activities.prev,
+  }
+}