feat: account activities (#428)

Co-authored-by: Jan Michek <15363559+janmichek@users.noreply.github.com> Co-authored-by: janmichek <jan@janmichek.cz> Co-authored-by: Marco Walz <8124114+marc0olo@users.noreply.github.com>
aeternity · Sep 20, 2023 · 7af4104 · 7af4104
1 parent 03c8979
commit 7af4104
Show file tree

Hide file tree

Showing 23 changed files with 897 additions and 2 deletions.
diff --git a/.env.example b/.env.example
@@ -9,4 +9,5 @@ NUXT_PUBLIC_NETWORK_NAME=MAINNET
 NUXT_PUBLIC_ALTERNATIVE_NETWORK_URL=http://localhost:8081
 NUXT_PUBLIC_ALTERNATIVE_NETWORK_NAME=TESTNET
 NUXT_PUBLIC_AE_TOKEN_ID=ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa
-NUXT_PUBLIC_DEBUG_MODE=false
+NUXT_PUBLIC_DEBUG_MODE=false
+NUXT_PUBLIC_SH_DEX_CONTRACTS='ct_2mfj3FoZxnhkSw5RZMcP8BfPoB1QR4QiYGNCdkAvLZ1zfF6paW;ct_azbNZ1XrPjXfqBqbAh1ffLNTQ1sbnuUDFvJrXjYz7JQA1saQ3'
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -36,6 +36,7 @@ export default defineNuxtConfig({
       ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
       AE_TOKEN_ID: process.env.AE_TOKEN_ID,
       DEBUG_MODE: process.env.DEBUG_MODE,
+      SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
     },
   },
   postcss: {

diff --git a/src/components/AccountActivitiesPanel.vue b/src/components/AccountActivitiesPanel.vue
@@ -0,0 +1,73 @@
+<template>
+  <app-panel class="account-activities-panel">
+    <paginated-content
+      :entities="accountActivities"
+      :limit="limit"
+      pagination-style="history"
+      @prev-clicked="loadPrevActivities"
+      @next-clicked="loadNextActivities">
+      <account-activities-table
+        class="account-activities-panel__account-activities-table"
+        :account-details="accountDetails"
+        :account-activities="accountActivities"/>
+
+      <account-activities-table-condensed
+        class="account-activities-panel__account-activities-table-condensed"
+        :account-details="accountDetails"
+        :account-activities="accountActivities"/>
+    </paginated-content>
+  </app-panel>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import AppPanel from '@/components/AppPanel'
+import { useAccountStore } from '@/stores/accountDetails'
+import AccountActivitiesTable from '@/components/AccountActivitiesTable'
+import AccountActivitiesTableCondensed from '@/components/AccountActivitiesTableCondensed'
+import { isDesktop } from '@/utils/screen'
+import PaginatedContent from '@/components/PaginatedContent'
+
+const accountStore = useAccountStore()
+const { fetchAccountActivities } = accountStore
+const { accountActivities, accountDetails } = storeToRefs(accountStore)
+
+const limit = computed(() => isDesktop() ? 10 : 3)
+
+function loadPrevActivities() {
+  return fetchAccountActivities({
+    queryParameters: accountActivities.value.prev,
+  })
+}
+
+function loadNextActivities() {
+  return fetchAccountActivities({
+    queryParameters: accountActivities.value.next,
+  })
+}
+</script>
+
+<style scoped>
+.account-activities-panel {
+  padding: var(--space-4) var(--space-1);
+
+  @media (--desktop) {
+    padding: var(--space-4);
+  }
+
+  &__account-activities-table {
+    display: none;
+
+    @media (--desktop) {
+      display: revert;
+      margin-bottom: var(--space-2);
+    }
+  }
+
+  &__account-activities-table-condensed {
+    @media (--desktop) {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/components/AccountActivitiesTable.vue b/src/components/AccountActivitiesTable.vue
@@ -0,0 +1,98 @@
+<template>
+  <table class="account-activities-table">
+    <thead>
+      <tr>
+        <th>
+          Hash
+          <hint-tooltip>
+            {{ accountHints.activityHash }}
+          </hint-tooltip>
+        </th>
+        <th>
+          Time
+          <hint-tooltip>
+            {{ accountHints.activityTime }}
+          </hint-tooltip>
+        </th>
+        <th>
+          Type
+          <hint-tooltip>
+            {{ accountHints.activityType }}
+          </hint-tooltip>
+        </th>
+        <th>
+          Activity
+          <hint-tooltip>
+            {{ accountHints.activityMeaning }}
+          </hint-tooltip>
+        </th>
+        <th>
+          Data
+          <hint-tooltip>
+            {{ accountHints.activityData }}
+          </hint-tooltip>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="(activity, index) in accountActivities?.data"
+        :key="index">
+        <td>
+          <value-hash-ellipsed
+            v-if="activity.hash"
+            :hash="activity.hash"
+            :link-to="`/transactions/${activity.hash}`"/>
+          <template v-else>
+            N/A
+          </template>
+        </td>
+        <td>
+          <div>
+            <app-link
+              :to="`/keyblocks/${activity.height}`">
+              {{ activity.height }}
+            </app-link>
+          </div>
+          <datetime-label :datetime="activity.time"/>
+        </td>
+        <td>
+          <account-activity-type-cell
+            :account-details="accountDetails"
+            :activity="activity"/>
+        </td>
+        <td>
+          <account-activity-cell
+            :account-details="accountDetails"
+            :activity="activity"/>
+        </td>
+        <td>
+          <account-activity-data-cell
+            :account-details="accountDetails"
+            :activity="activity"/>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import AccountActivityCell from '@/components/AccountActivityCell'
+import AccountActivityTypeCell from '@/components/AccountActivityTypeCell'
+import AccountActivityDataCell from '@/components/AccountActivityDataCell'
+import DatetimeLabel from '@/components/DatetimeLabel'
+import ValueHashEllipsed from '@/components/ValueHashEllipsed'
+import { accountHints } from '@/utils/hints/accountHints'
+import HintTooltip from '@/components/HintTooltip'
+
+defineProps({
+  accountDetails: {
+    type: Object,
+    required: true,
+  },
+  accountActivities: {
+    type: Object,
+    default: null,
+  },
+})
+</script>
diff --git a/src/components/AccountActivitiesTableCondensed.vue b/src/components/AccountActivitiesTableCondensed.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="account-activities-table-condensed">
+    <table
+      v-for="(activity, index) in accountActivities?.data"
+      :key="index"
+      class="account-activities-table-condensed__table">
+      <tbody>
+        <tr class="account-activities-table-condensed__row">
+          <th class="account-activities-table-condensed__header">
+            <app-tooltip>
+              Hash
+              <template #tooltip>
+                {{ accountHints.activityHash }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="account-activities-table-condensed__data">
+            <value-hash-ellipsed
+              v-if="activity.hash"
+              :hash="activity.hash"
+              :link-to="`/transactions/${activity.hash}`"/>
+            <template v-else>
+              N/A
+            </template>
+          </td>
+        </tr>
+        <tr class="account-activities-table-condensed__row">
+          <th class="account-activities-table-condensed__header">
+            <app-tooltip>
+              Time
+              <template #tooltip>
+                {{ accountHints.activityTime }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="account-activities-table-condensed__data">
+            <div>
+              <app-link
+                :to="`/keyblocks/${activity.height}`">
+                {{ activity.height }}
+              </app-link>
+            </div>
+            <datetime-label :datetime="activity.time"/>
+          </td>
+        </tr>
+        <tr class="account-activities-table-condensed__row">
+          <th class="account-activities-table-condensed__header">
+            <app-tooltip>
+              Type
+              <template #tooltip>
+                {{ accountHints.activityType }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="account-activities-table-condensed__data">
+            <account-activity-type-cell
+              :account-details="accountDetails"
+              :activity="activity"/>
+          </td>
+        </tr>
+        <tr class="account-activities-table-condensed__row">
+          <th class="account-activities-table-condensed__header">
+            <app-tooltip>
+              Activity
+              <template #tooltip>
+                {{ accountHints.activityMeaning }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="account-activities-table-condensed__data">
+            <account-activity-cell
+              :account-details="accountDetails"
+              :activity="activity"/>
+          </td>
+        </tr>
+        <tr class="account-activities-table-condensed__row">
+          <th class="account-activities-table-condensed__header">
+            <app-tooltip>
+              Data
+              <template #tooltip>
+                {{ accountHints.activityData }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="account-activities-table-condensed__data">
+            <account-activity-data-cell
+              :account-details="accountDetails"
+              :activity="activity"/>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import AccountActivityCell from '@/components/AccountActivityCell'
+import AccountActivityTypeCell from '@/components/AccountActivityTypeCell'
+import AccountActivityDataCell from '@/components/AccountActivityDataCell'
+import DatetimeLabel from '@/components/DatetimeLabel'
+import ValueHashEllipsed from '@/components/ValueHashEllipsed'
+import { accountHints } from '@/utils/hints/accountHints'
+import AppTooltip from '@/components/AppTooltip'
+
+defineProps({
+  accountDetails: {
+    type: Object,
+    required: true,
+  },
+  accountActivities: {
+    type: Object,
+    default: null,
+  },
+})
+</script>
+
+<style scoped>
+.account-activities-table-condensed {
+  padding: var(--space-4) 0 0;
+
+  &__table {
+    margin-bottom: var(--space-6);
+
+    &:last-of-type {
+      margin-bottom: var(--space-1);
+    }
+
+    @media (--desktop) {
+      padding: var(--space-4);
+    }
+  }
+
+  &__header {
+    border-bottom: 1px solid var(--color-midnight-15);
+  }
+
+  &__row:last-of-type &__header {
+    border-bottom: 0;
+  }
+
+  &__data {
+    text-align: right;
+  }
+}
+</style>