feat: show call logs

src/components/Call.vue

@@ -121,6 +121,7 @@
         class="h-16 w-full text-red-500 bg-black text-xs mb-4 p-4 font-mono"
       ></textarea>
     </div>
+    <decoded-events :result="callResult" />
 
     <button
       class="py-2 mr-2 rounded-full bg-black hover:bg-purple-500 text-white p-2 px-4"
@@ -133,6 +134,7 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
 import { useContractStore } from "../stores/contractStore";
+import DecodedEvents from "./DecodedEvents.vue";
 
 const contractStore = useContractStore();
 const { deployResult, callData, callResult } = storeToRefs(contractStore);

src/components/CallStatic.vue

@@ -57,6 +57,8 @@
       ></textarea>
     </div>
 
+    <decoded-events :result="callStaticResult" />
+
     <button
       class="py-2 rounded-full bg-black hover:bg-purple-500 text-white p-2 px-4"
       @click="callContractStatic"
@@ -68,6 +70,7 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
 import { useContractStore } from "../stores/contractStore";
+import DecodedEvents from "./DecodedEvents.vue";
 
 const contractStore = useContractStore();
 const { deployResult, callStaticData, callStaticResult } =

src/components/DecodedEvents.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <span class="text-xs block mb-1 font-bold" v-if="result?.events?.length">
+      Events:
+    </span>
+    <span
+      v-for="callResult in result?.events"
+      :key="JSON.stringify(callResult)"
+      class="text-xs block mb-1"
+    >
+      {{ callResult.name }}: {{ JSON.stringify(callResult.args) }} (Contract:
+      {{ callResult.contract.name }})
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+import { Result } from "../utils/utils";
+
+defineProps({
+  result: Result,
+});
+</script>

src/components/Deploy.vue

@@ -117,7 +117,7 @@
         type="hidden"
       />
     </div>
-
+    <decoded-events :result="deployResult" class="mt-2" />
     <button
       class="py-2 rounded-full bg-black hover:bg-purple-500 text-white p-2 px-4"
       :disabled="!canDeploy"
@@ -132,6 +132,7 @@
 import { storeToRefs } from "pinia";
 import { useContractStore } from "../stores/contractStore";
 import { computed, watch } from "vue";
+import DecodedEvents from "./DecodedEvents.vue";
 
 const contractStore = useContractStore();
 const { deployData, deployResult, compileResult } = storeToRefs(contractStore);

src/stores/contractStore.ts

@@ -155,6 +155,7 @@ export const useContractStore = defineStore("contract", () => {
         deployResult.value.setFinal(
           `Deployed, and mined at this address: ${deployed.result?.contractId}`,
           deployed.result?.contractId,
+          deployed.decodedEvents,
         );
 
         persist();
@@ -179,6 +180,7 @@ export const useContractStore = defineStore("contract", () => {
             result?.result?.gasUsed
           }, Fee Estimate: ${toAe(result.tx.fee)} ae (${result.tx.fee} aetto)`,
           JSON.stringify(result?.decodedResult),
+          result.decodedEvents,
         );
       })
       .catch((error) => {
@@ -208,6 +210,7 @@ export const useContractStore = defineStore("contract", () => {
             fee,
           )} ae (${fee} aetto)`,
           JSON.stringify(result?.decodedResult),
+          result.decodedEvents,
         );
       })
       .catch((error) => {

src/utils/utils.ts

@@ -1,5 +1,14 @@
 import { Encoded } from "@aeternity/aepp-sdk";
 
+export interface DecodedEvent {
+  name: string;
+  args: unknown[];
+  contract: {
+    name: string;
+    address: Encoded.ContractAddress;
+  };
+} // copied from Contract.d.ts as not exported by sdk
+
 export function argsStringToArgs(argsString: string) {
   return argsString.trim() === ""
     ? []
@@ -27,6 +36,7 @@ export class Result<T> {
   info?: string;
   final = false;
   data?: T;
+  events?: DecodedEvent[];
 
   setError(error: string) {
     this.error = error;
@@ -41,11 +51,12 @@ export class Result<T> {
     this.data = undefined;
   }
 
-  setFinal(info: string, data?: T) {
+  setFinal(info: string, data?: T, events?: DecodedEvent[]) {
     this.info = info;
     this.error = undefined;
     this.final = true;
     this.data = data;
+    this.events = events;
   }
 }