new FunctionOutputViewer component to show function responses

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') }}

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>

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
+};

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';