feat: show contract call arguments in a more approchable way (#486)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>

src/app.vue

@@ -62,7 +62,7 @@
     </Head>
   </Html>
 
-  <NuxtErrorBoundary>
+  <NuxtErrorBoundary @error="logError">
     <the-header/>
     <NuxtLayout>
       <NuxtPage/>
@@ -103,6 +103,10 @@ if (import.meta.env.MODE !== 'production') {
     meta: [{ name: 'robots', content: 'noindex' }],
   })
 }
+
+function logError(error) {
+  console.error(error)
+}
 </script>
 
 <style>

src/components/ContractEventCell.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="contract-event-cell">
+    <Suspense>
+      <component
+        :is="contractEventCellComponent"
+        :event="event"
+        :contract-details="contractDetails"/>
+      <template #fallback>
+        Loading...
+      </template>
+    </Suspense>
+  </div>
+</template>
+
+<script setup>
+import { defineAsyncComponent } from 'vue'
+
+const props = defineProps({
+  contractDetails: {
+    type: Object,
+    required: true,
+  },
+  event: {
+    type: Object,
+    required: true,
+  },
+})
+
+const contractEventCellComponent = computed(() =>
+  defineAsyncComponent(async() => {
+    try {
+      return await import(`@/components/ContractEventCell${props.event.eventName}.vue`)
+    } catch {
+      console.error(`Unknown event ${props.event.eventName} in contract ${props.contractDetails.id}`)
+      return defineComponent(() => () => h('span', 'N/A'))
+    }
+  },
+  ),
+)
+</script>
+
+<style scoped>
+.contract-event-cell {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--space-1);
+  flex-wrap: wrap;
+
+  @media(--desktop) {
+    justify-content: space-between;
+  }
+}
+</style>

src/components/ContractEventCellAllowance.vue

@@ -0,0 +1,44 @@
+<template>
+  <value-hash-ellipsed
+    :hash="eventData[0]"
+    :link-to="`/accounts/${eventData[0]}`"/>
+
+  <transaction-arrow-right-icon/>
+
+  <value-hash-ellipsed
+    :hash="eventData[1]"
+    :link-to="`/accounts/${eventData[1]}`"/>
+
+  <app-chip size="sm">
+    {{ tokenValue }}
+  </app-chip>
+</template>
+
+<script setup>
+import { formatNumber, formatReduceDecimals } from '@/utils/format'
+import AppChip from '@/components/AppChip'
+import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
+import ValueHashEllipsed from '@/components/ValueHashEllipsed'
+
+const props = defineProps({
+  contractDetails: {
+    required: true,
+    type: Object,
+  },
+  event: {
+    required: true,
+    type: Object,
+  },
+})
+
+const eventData = computed(() => props.event.data)
+const tokenValue = computed(() => {
+  if (!props.contractDetails.tokenDetails || props.contractDetails.contractType === 'AEX-141') {
+    return eventData.value[2]
+  }
+
+  return formatNumber(
+    formatReduceDecimals(eventData.value[2], props.contractDetails.tokenDetails.decimals),
+  ) + ` ${props.contractDetails.tokenDetails.symbol}`
+})
+</script>

src/components/ContractEventCellBurn.vue

@@ -0,0 +1,40 @@
+<template>
+  <value-hash-ellipsed
+    :hash="contractDetails.id"
+    :link-to="`/contracts/${contractDetails.id}`"/>
+
+  <transaction-arrow-right-icon/>
+
+  <app-chip size="sm">
+    {{ tokenValue }}
+  </app-chip>
+</template>
+
+<script setup>
+import { formatNumber, formatReduceDecimals } from '@/utils/format'
+import AppChip from '@/components/AppChip'
+import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
+import ValueHashEllipsed from '@/components/ValueHashEllipsed'
+
+const props = defineProps({
+  contractDetails: {
+    required: true,
+    type: Object,
+  },
+  event: {
+    required: true,
+    type: Object,
+  },
+})
+
+const eventData = computed(() => props.event.data)
+const tokenValue = computed(() => {
+  if (!props.contractDetails.tokenDetails || props.contractDetails.contractType === 'AEX-141') {
+    return eventData.value[0]
+  }
+
+  return formatNumber(
+    formatReduceDecimals(eventData.value[0], props.contractDetails.tokenDetails.decimals),
+  ) + ` ${props.contractDetails.tokenDetails.symbol}`
+})
+</script>

src/components/ContractEventCellEditionLimit.vue

@@ -0,0 +1,24 @@
+<template>
+  {{ eventData[0] }}
+
+  <transaction-arrow-right-icon/>
+
+  {{ eventData[1] }}
+</template>
+
+<script setup>
+import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
+
+const props = defineProps({
+  contractDetails: {
+    required: true,
+    type: Object,
+  },
+  event: {
+    required: true,
+    type: Object,
+  },
+})
+
+const eventData = computed(() => props.event.data)
+</script>

src/components/ContractEventCellEditionLimitDecrease.vue

@@ -0,0 +1,24 @@
+<template>
+  {{ eventData[0] }}
+
+  <transaction-arrow-right-icon/>
+
+  {{ eventData[1] }}
+</template>
+
+<script setup>
+import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
+
+const props = defineProps({
+  contractDetails: {
+    required: true,
+    type: Object,
+  },
+  event: {
+    required: true,
+    type: Object,
+  },
+})
+
+const eventData = computed(() => props.event.data)
+</script>

src/components/ContractEventCellMint.vue

@@ -0,0 +1,44 @@
+<template>
+  <value-hash-ellipsed
+    :hash="contractDetails.id"
+    :link-to="`/contracts/${contractDetails.id}`"/>
+
+  <transaction-arrow-right-icon/>
+
+  <value-hash-ellipsed
+    :hash="eventData[0]"
+    :link-to="`/accounts/${eventData[0]}`"/>
+
+  <app-chip size="sm">
+    {{ tokenValue }}
+  </app-chip>
+</template>
+
+<script setup>
+import { formatNumber, formatReduceDecimals } from '@/utils/format'
+import AppChip from '@/components/AppChip'
+import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
+import ValueHashEllipsed from '@/components/ValueHashEllipsed'
+
+const props = defineProps({
+  contractDetails: {
+    required: true,
+    type: Object,
+  },
+  event: {
+    required: true,
+    type: Object,
+  },
+})
+
+const eventData = computed(() => props.event.data)
+const tokenValue = computed(() => {
+  if (!props.contractDetails.tokenDetails || props.contractDetails.contractType === 'AEX-141') {
+    return eventData.value[1]
+  }
+
+  return formatNumber(
+    formatReduceDecimals(eventData.value[1], props.contractDetails.tokenDetails.decimals),
+  ) + ` ${props.contractDetails.tokenDetails.symbol}`
+})
+</script>

src/components/ContractEventCellSwap.vue

@@ -0,0 +1,31 @@
+<template>
+  <value-hash-ellipsed
+    :hash="eventData[0]"
+    :link-to="`/accounts/${eventData[0]}`"/>
+
+  <transaction-arrow-right-icon/>
+
+  <app-chip size="sm">
+    {{ formatAePrice(formatAettosToAe(eventData[1])) }}
+  </app-chip>
+</template>
+
+<script setup>
+import { formatAePrice, formatAettosToAe } from '@/utils/format'
+import AppChip from '@/components/AppChip'
+import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
+import ValueHashEllipsed from '@/components/ValueHashEllipsed'
+
+const props = defineProps({
+  contractDetails: {
+    required: true,
+    type: Object,
+  },
+  event: {
+    required: true,
+    type: Object,
+  },
+})
+
+const eventData = computed(() => props.event.data)
+</script>

src/components/ContractEventCellTemplateCreation.vue

@@ -0,0 +1,18 @@
+<template>
+  {{ eventData[0] }}
+</template>
+
+<script setup>
+const props = defineProps({
+  contractDetails: {
+    required: true,
+    type: Object,
+  },
+  event: {
+    required: true,
+    type: Object,
+  },
+})
+
+const eventData = computed(() => props.event.data)
+</script>

src/components/ContractEventCellTemplateDeletion.vue

@@ -0,0 +1,18 @@
+<template>
+  {{ eventData[0] }}
+</template>
+
+<script setup>
+const props = defineProps({
+  contractDetails: {
+    required: true,
+    type: Object,
+  },
+  event: {
+    required: true,
+    type: Object,
+  },
+})
+
+const eventData = computed(() => props.event.data)
+</script>

src/components/ContractEventCellTemplateLimit.vue

@@ -0,0 +1,18 @@
+<template>
+  {{ eventData[0] }}
+</template>
+
+<script setup>
+const props = defineProps({
+  contractDetails: {
+    required: true,
+    type: Object,
+  },
+  event: {
+    required: true,
+    type: Object,
+  },
+})
+
+const eventData = computed(() => props.event.data)
+</script>

src/components/ContractEventCellTemplateLimitDecrease.vue

@@ -0,0 +1,24 @@
+<template>
+  {{ eventData[0] }}
+
+  <transaction-arrow-right-icon/>
+
+  {{ eventData[1] }}
+</template>
+
+<script setup>
+import TransactionArrowRightIcon from '@/components/TransactionArrowRightIcon'
+
+const props = defineProps({
+  contractDetails: {
+    required: true,
+    type: Object,
+  },
+  event: {
+    required: true,
+    type: Object,
+  },
+})
+
+const eventData = computed(() => props.event.data)
+</script>