From c28fc4b4b85fc3400308188928c1b4a000b11ff3 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 9 Jul 2024 10:13:42 -0300
Subject: [PATCH] new FunctionOutputViewer component to show function responses

---
 .../ContractTab/FunctionInterface.vue         | 23 +++--
 .../ContractTab/FunctionOutputViewer.vue      | 97 +++++++++++++++++++
 src/types/TransactionQueryData.ts             | 20 ++++
 src/types/index.ts                            |  1 +
 4 files changed, 134 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ContractTab/FunctionOutputViewer.vue

diff --git a/src/components/ContractTab/FunctionInterface.vue b/src/components/ContractTab/FunctionInterface.vue
index 2897472c..22856e82 100644
--- a/src/components/ContractTab/FunctionInterface.vue
+++ b/src/components/ContractTab/FunctionInterface.vue
@@ -23,9 +23,10 @@ import {
     parameterTypeIsSignedIntArray,
     parameterTypeIsUnsignedIntArray,
 } from 'src/lib/function-interface-utils';
-
 import TransactionField from 'src/components/TransactionField.vue';
 import LoginModal from 'components/LoginModal.vue';
+import FunctionOutputViewer from 'components/ContractTab/FunctionOutputViewer.vue';
+import { OutputType, OutputValue } from 'src/types';
 
 interface Opts {
     value?: string;
@@ -41,6 +42,7 @@ export default defineComponent({
         ...asyncInputComponents,
         TransactionField,
         LoginModal,
+        FunctionOutputViewer,
     },
     props: {
         contract: {
@@ -83,6 +85,8 @@ export default defineComponent({
             errorMessage: null as string | null,
             decimalOptions,
             result: null as string | null,                // string | null
+            response: [] as OutputValue[],                // OutputData[]
+            abiOutputs: [] as OutputType[],               // OutputType[]
             hash: null as string | null,                  // string | null
             enterAmount: false,                           // boolean
             amountInput: 0,                               // number
@@ -257,8 +261,10 @@ export default defineComponent({
         runRead() {
             return this.getEthersFunction()
                 .then(func => func(...this.params)
-                    .then((response: string) => {
-                        this.result = response;
+                    .then((response: OutputValue | OutputValue[]) => {
+                        this.result = response as unknown as string;
+                        this.response = Array.isArray(response) ? response : [response];
+                        this.abiOutputs = this.abi.outputs as OutputType[];
                         this.errorMessage = null;
                     })
                     .catch((msg: string) => {
@@ -449,10 +455,13 @@ export default defineComponent({
     <p class="text-negative output-container">
         {{ errorMessage }}
     </p>
-    <div v-if="result !== null" class="output-container">
-        {{ $t('components.contract_tab.result') }} ({{ abi?.outputs.length > 0 ? abi.outputs[0].type : '' }}):
-        <router-link v-if="abi?.outputs?.[0]?.type === 'address'" :to="`/address/${result}`" >{{ result }}</router-link>
-        <template v-else>{{ result }}</template>
+    <div v-if="response.length > 0" class="output-container">
+
+        <FunctionOutputViewer
+            :response="response"
+            :outputs="abiOutputs"
+        />
+
     </div>
     <div v-if="hash" class="output-container">
         {{ $t('components.contract_tab.view_transaction') }}
diff --git a/src/components/ContractTab/FunctionOutputViewer.vue b/src/components/ContractTab/FunctionOutputViewer.vue
new file mode 100644
index 00000000..28cce494
--- /dev/null
+++ b/src/components/ContractTab/FunctionOutputViewer.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { watch, defineProps, ref, toRaw } from 'vue';
+import { OutputValue, OutputType, OutputResult, OutputData } from 'src/types';
+
+
+const props = defineProps<{
+    response: OutputValue[];
+    outputs: OutputType[];
+}>();
+
+// Funciones útiles
+function processSimpleOutputs(values: OutputValue[], outputs: OutputType[]): OutputResult {
+    const response: OutputResult = {};
+    outputs.forEach((outputType, index, list) => {
+        const name = outputType.name || (list.length > 1 ? `output-${index}` : 'response');
+        if (outputType.type === 'tuple') {
+            response[name] = processOutputResponse(values[index] as OutputValue[], outputType.components as OutputType[]);
+        } else {
+            response[name] = { value: values[index], type: outputType.type };
+        }
+    });
+    return response;
+}
+
+function processNotExpectedOutputs(response: OutputValue[], outputs: OutputType[]): OutputResult {
+    const name: string = outputs[0].name || 'response';
+    return { [name]: response } as unknown as OutputResult;
+}
+
+function processOutputResponse(response: OutputValue[], outputs: OutputType[]): OutputResult {
+    if (outputs.length === 1 && response.length !== 1) {
+        if (outputs[0].type.includes('tuple')) {
+            if (outputs[0].components) {
+                return processOutputResponse(response, outputs[0].components);
+            } else {
+                return processNotExpectedOutputs(response, outputs);
+            }
+        } else {
+            return processNotExpectedOutputs(response, outputs);
+        }
+    } else if (outputs.length === response.length) {
+        return processSimpleOutputs(response, outputs);
+    } else {
+        return processNotExpectedOutputs(response, outputs);
+    }
+}
+
+// Procesar la respuesta
+const processedResponse = ref<OutputResult>({});
+
+function formatOutput(output: OutputResult, indentLevel = 1): string {
+    const indent = ' '.repeat(indentLevel * 4);
+    let json = '{\n';
+    let first = true;
+
+    for (const key in output) {
+        const result = output[key] as OutputResult;
+        const data = output[key] as OutputData;
+        if (!first) {
+            json += ',\n';
+        }
+        first = false;
+        if (typeof result === 'object' && result !== null && typeof result.value === 'undefined') {
+            json += `${indent}${key}: ${formatOutput(result, indentLevel + 1)}`;
+        } else if (data.type === 'address') {
+            json += `${indent}${key}: <a href="/address/${data.value}">${data.value}</a>`;
+        } else if (data.type === 'address[]') {
+            const addresses = data.value as string[];
+            json += `${indent}${key}: [${addresses.map(address => `<a href="/address/${address}">${address}</a>`).join(', ')}]`;
+        } else {
+            json += `${indent}${key}: ${data.value}`;
+        }
+    }
+
+    return json + `\n${' '.repeat(indentLevel * 4 - 4)}}${indentLevel === 1 ? '\n' : ''}`;
+}
+
+watch(props, () => {
+    processedResponse.value = processOutputResponse(toRaw(props.response), toRaw(props.outputs));
+}, { immediate: true });
+
+</script>
+
+<template>
+<div class="c-function-output-viewer">
+    <pre class="c-function-output-viewer__json" v-html="formatOutput(toRaw(processedResponse))"></pre>
+</div>
+</template>
+
+<style lang="scss">
+.c-function-output-viewer {
+    &__json {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+}
+</style>
diff --git a/src/types/TransactionQueryData.ts b/src/types/TransactionQueryData.ts
index eb068a9e..60138235 100644
--- a/src/types/TransactionQueryData.ts
+++ b/src/types/TransactionQueryData.ts
@@ -1,6 +1,26 @@
+import { BigNumber } from 'ethers';
+
 export interface TransactionQueryData {
     data: {
         results: { hash: string}[];
         total_count: number;
     }
 }
+
+export type OutputValue = string | string[] | BigNumber | number | boolean | null;
+
+export interface OutputType {
+    name: string,
+    type: string,
+    internalType: string,
+    components?: OutputType[]
+}
+
+export interface OutputData {
+    type: string;
+    value: OutputValue;
+}
+
+export type OutputResult = {
+    [name: string]: OutputData | OutputResult
+};
diff --git a/src/types/index.ts b/src/types/index.ts
index b0bb3d0c..7f4673b4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -4,3 +4,4 @@ export * from 'src/types/LatestContainerOptions';
 export * from 'src/types/Pagination';
 export * from 'src/types/ERCTransfer';
 export * from 'src/types/NftTransfers';
+export * from 'src/types/TransactionQueryData';