diff --git a/src/components/ContractTab/FunctionInterface.vue b/src/components/ContractTab/FunctionInterface.vue
index ff210301..90b8d000 100644
--- a/src/components/ContractTab/FunctionInterface.vue
+++ b/src/components/ContractTab/FunctionInterface.vue
@@ -13,22 +13,17 @@ import { EvmABI, EvmFunctionParam } from 'src/antelope/types';
 import { WEI_PRECISION } from 'src/antelope/wallets/utils';
 import {
     asyncInputComponents,
-    getComponentForInputType,
-    getExpectedArrayLengthFromParameterType,
-    getIntegerBits,
-    inputIsComplex,
-    parameterIsArrayType,
-    parameterIsIntegerType,
-    parameterTypeIsBoolean,
-    parameterTypeIsSignedIntArray,
-    parameterTypeIsTupleStruct,
-    parameterTypeIsTupleStructArray,
-    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, InputDescription } from 'src/types';
+import {
+    InputComponent,
+    OutputType,
+    OutputValue,
+    inputComponents,
+} from 'src/types';
+import { getComponentsForAbiInputs } from 'src/lib/function-interface-utils-ts';
 
 interface Opts {
     value?: string;
@@ -97,8 +92,12 @@ export default defineComponent({
             selectDecimals: decimalOptions[0],
             customDecimals: 0,                            // number
             value: '0',                                   // string
-            inputModels: [] as string[],                  // raw input values
-            params: [] as EvmFunctionParam[],             // parsed input values
+            missingInputs: true,                          // boolean
+            models: {
+                inputs: [] as string[],                   // raw input values
+                values: [] as EvmFunctionParam[],         // parsed input values
+            },
+
             valueParam: {
                 'name': 'value',
                 'type': 'amount',
@@ -121,87 +120,39 @@ export default defineComponent({
         functionABI(){
             return `${this.abi.name}(${this.abi.inputs.map((i: { type: never; }) => i.type).join(',')})`;
         },
-        inputComponents() {
-            if (!Array.isArray(this.abi?.inputs)) {
-                return [];
+        inputComponents(): inputComponents {
+            const isRoot = true;
+            const components = getComponentsForAbiInputs(this.abi?.inputs, this.models, isRoot) as unknown as inputComponents;
+            return components;
+        },
+    },
+    methods: {
+        valueParsed(inputType: string, index: number, value: EvmFunctionParam, component: InputComponent) {
+            component.handleValueParsed(inputType, index, value);
+            this.updateMissingInputs();
+        },
+        updateMissingInputs() {
+            const inputs_length = this.abi.inputs.length;
+            const values_length = this.models.values.length;
+            if (inputs_length !== values_length) {
+                this.missingInputs = true;
+                return true;
             }
 
-            const getExtraBindingsForType = (input: InputDescription, index: number) => {
-                const { type, name, components } = input;
-                const label = `${name ? name : `Param ${index + 1}`}`;
-                const extras = {} as {[key:string]: string | InputDescription[]};
-
-                // represents integer bits (e.g. uint256) for int types, or array length for array types
-                let size = undefined;
-                if (parameterIsArrayType(type)) {
-                    size = getExpectedArrayLengthFromParameterType(type);
-                } else if (parameterIsIntegerType(type)) {
-                    size = getIntegerBits(type);
-                } else if (parameterTypeIsTupleStruct(type) && components) {
-                    size = toRaw(components).length;
-                }
-
-                const result = type.match(/(\d+)(?=\[)/);
-                const intSize = result ? result[0] : undefined;
-
-                if (intSize && parameterTypeIsUnsignedIntArray(type)) {
-                    extras['uint-size'] = intSize;
-                } else if (intSize && parameterTypeIsSignedIntArray(type)) {
-                    extras['int-size'] = intSize;
-                } else if (parameterTypeIsTupleStruct(type) && components) {
-                    extras['componentDescription'] = toRaw(components);
-                } else if (parameterTypeIsTupleStructArray(type) && components) {
-                    extras['componentDescription'] = toRaw(components);
-                }
-
-                const defaultModelValue = parameterTypeIsBoolean(type) ? null : '';
-
-                const bindings = {
-                    ...extras,
-                    label,
-                    size,
-                    modelValue: this.inputModels[index] ?? defaultModelValue,
-                    name: label.toLowerCase(),
-                };
-                return bindings;
-            };
-
-            const handleModelValueChange = (type: string, index: number, value: string) => {
-                this.inputModels[index] = value;
-
-                if (!inputIsComplex(type)) {
-                    this.params[index] = value;
-                }
-            };
-            const handleValueParsed = (type: string, index: number, value: EvmFunctionParam) => {
-                if (inputIsComplex(type)) {
-                    this.params[index] = value;
-                }
-            };
-
-            return this.abi.inputs.map((input, index) => ({
-                bindings: getExtraBindingsForType(input, index),
-                is: getComponentForInputType(input.type),
-                inputType: input.type,
-                handleModelValueChange: (type: string, index: number, value: string) => handleModelValueChange(type, index, value),
-                handleValueParsed:      (type: string, index: number, value: EvmFunctionParam) => handleValueParsed(type, index, value),
-            }));
-        },
-        missingInputs() {
-            if (this.abi.inputs.length !== this.params.length) {
+            if (inputs_length !== values_length) {
+                this.missingInputs = true;
                 return true;
             }
 
             for (let i = 0; i < this.abi.inputs.length; i++) {
-                if (['', null, undefined].includes(this.params[i] as never)) {
+                if (['', null, undefined].includes(this.models.values[i] as never)) {
+                    this.missingInputs = true;
                     return true;
                 }
             }
-
+            this.missingInputs = false;
             return false;
         },
-    },
-    methods: {
         showAmountDialog(param: string) {
             this.amountParam = param;
             this.amountDecimals = 18;
@@ -217,7 +168,7 @@ export default defineComponent({
             if (typeof this.amountParam === 'string') {
                 this.value = integerAmount;
             } else {
-                this.params[this.amountParam] = integerAmount as never;
+                this.models.values[this.amountParam] = integerAmount as never;
             }
 
             this.clearAmount();
@@ -229,7 +180,6 @@ export default defineComponent({
             this.showLoginModal = true;
         },
         async run() {
-            console.log('run');
             if (!this.isLoggedIn && this.write){
                 this.login();
                 return;
@@ -272,7 +222,7 @@ export default defineComponent({
         },
         runRead() {
             return this.getEthersFunction()
-                .then(func => func(...this.params)
+                .then(func => func(...this.models.values)
                     .then((response: OutputValue | OutputValue[]) => {
                         this.result = response as unknown as string;
                         this.response = Array.isArray(response) ? response : [response];
@@ -289,8 +239,8 @@ export default defineComponent({
             const contractInstance = toRaw(await this.contract.getContractInstance());
             const func = contractInstance.populateTransaction[this.functionABI];
             const gasEstimater = contractInstance.estimateGas[this.functionABI];
-            const gasLimit = await gasEstimater(...this.params, Object.assign({ from: this.address }, opts));
-            const unsignedTrx = await func(...this.params, opts);
+            const gasLimit = await gasEstimater(...this.models.values, Object.assign({ from: this.address }, opts));
+            const unsignedTrx = await func(...this.models.values, opts);
             const nonce = parseInt(await this.$evm.telos.getNonce(this.address), 16);
             const gasPrice = BigNumber.from(`0x${await this.$evm.telos.getGasPrice()}`);
             unsignedTrx.nonce = nonce;
@@ -366,7 +316,7 @@ export default defineComponent({
                 error,
                 this.contract.address,
                 [this.abi] as EvmABI,
-                this.params,
+                this.models.values,
                 value,
             ).then((result) => {
                 this.hash = result.hash;
@@ -449,8 +399,8 @@ export default defineComponent({
             :key="index"
             v-bind="component.bindings"
             required="true"
-            class="input-component q-pb-lg"
-            @valueParsed="component.handleValueParsed(component.inputType, index, $event)"
+            class="input-component q-pb-md"
+            @valueParsed="valueParsed(component.inputType, index, $event, component)"
             @update:modelValue="component.handleModelValueChange(component.inputType, index, $event)"
         />
     </template>
@@ -482,7 +432,7 @@ export default defineComponent({
 </div>
 </template>
 
-<style>
+<style lang="scss">
 .text-negative.output-container {
     overflow-wrap: break-word;
     word-break: break-all;
diff --git a/src/components/inputs/TupleStruct.vue b/src/components/inputs/TupleStruct.vue
new file mode 100644
index 00000000..a16aca80
--- /dev/null
+++ b/src/components/inputs/TupleStruct.vue
@@ -0,0 +1,264 @@
+<script>
+import BaseTextInput from 'components/inputs/BaseTextInput';
+import TupleStructInput from 'components/inputs/TupleStructInput';
+import { createPlaceholderForTupleInput, inputIsComplex } from 'src/lib/function-interface-utils';
+import { getComponentsForAbiInputs } from 'src/lib/function-interface-utils-ts';
+import { toRaw } from 'vue';
+
+export default {
+    name: 'TupleStruct',
+    components: {
+        BaseTextInput,
+        TupleStructInput,
+    },
+    emits: [
+        'update:modelValue',
+        'valueParsed',
+    ],
+    props: {
+        modelValue: {
+            type: Object,
+            required: true,
+        },
+        label: {
+            type: String,
+            required: true,
+        },
+        name: {
+            type: String,
+            required: true,
+        },
+        componentDescription: {
+            type: Object,
+            required: false,
+        },
+        isRoot: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    data: () => ({
+        root_: '',
+        isExpanded: false,
+        placeholder: '',
+        fields: [],
+        isVisible: false,
+        animationTimer: 0,
+        models: {
+            inputs: []/* as string[]*/,                   // raw input values
+            values: []/* as EvmFunctionParam[]*/,         // parsed input values
+        },
+    }),
+    async created() {
+        // Initialize fields with empty strings or default values
+        this.fields = [...this.componentDescription.map(i => i.name)];
+        console.log(`TupleStruct[${this.root}].created()`, { fields: this.fields });                                   // FIXME: remove
+
+        // initialization of the translated texts
+        this.placeholder = this.createPlaceholder(this.componentDescription);
+        this.hint = this.$t('components.inputs.tuple_struct_input_hint');
+
+        if (this.isRoot) {
+            this.isExpanded = true;
+        }
+    },
+    methods: {
+        createInitialFields(componentDescription) {
+            const fields = {};
+            for (const field of componentDescription) {
+                fields[field.name] = '';
+            }
+            return fields;
+        },
+        createPlaceholder(componentDescription) {
+            return createPlaceholderForTupleInput(componentDescription);
+        },
+        shapedLabelType(componentDescription) {
+            let result = '(';
+            for (let i = 0; i < +componentDescription.length; i++) {
+                if (componentDescription[i].type === 'tuple') {
+                    result += `${this.shapedLabelType(componentDescription[i].components)}`;
+                } else {
+                    result += `${componentDescription[i].type}`;
+                }
+                if (i < +componentDescription.length - 1) {
+                    result += ', ';
+                }
+            }
+            result += ')';
+            return result;
+        },
+        valueParsed(type/*: string*/, index/*: number*/, value/*: EvmFunctionParam*/, component/*: inputComponents*/) {
+            console.log(`TupleStruct[${this.root}].valueParsed()`, type, index, value);                                   // FIXME: remove
+            // we avoid emitting the valueParsed event if the value is not defined
+            // clearTimeout(this.eventEmittingTimer); // FIXME: remove
+            component.handleValueParsed(type, index, value);
+            this.models.values[index] = value;
+            // const propertyName = this.componentDescription[index].name;
+            // const valueParsed = { ...toRaw(this.modelValue), [propertyName]: value };
+            const valueParsed = this.getUpdatedModel();
+
+            // we need to emit a correct value only if all fields are defined
+            let isUndefined = this.isThereUndefinedValues(valueParsed);
+            if (!isUndefined) {
+                console.log(`TupleStruct[${this.root}].valueParsed`, 'emitting valueParsed');                            // FIXME: remove
+                this.$emit('valueParsed', valueParsed);
+            } else {
+                console.log(`TupleStruct[${this.root}].valueParsed`, 'emitting valueParsed with undefined');             // FIXME: remove
+                this.$emit('valueParsed', undefined);
+            }
+        },
+        getUpdatedModel() {
+            const modelValue = {};
+            this.fields.forEach((field, index) => {
+                const propertyName = this.componentDescription[index].name;
+                const propertyValue = this.models.values[index];
+                modelValue[propertyName] = toRaw(propertyValue);
+            });
+            return modelValue;
+        },
+        isThereUndefinedValues(valueParsed) {
+            let isUndefined = false;
+            console.assert(valueParsed, 'valueParsed is not defined');
+            Object.keys(valueParsed).forEach((key) => {
+                if (valueParsed[key] === undefined) {
+                    isUndefined = true;
+                }
+            });
+            return isUndefined;
+        },
+        handleFieldChange(type/*: string*/, index/*: number*/, input/*: string*/, component/*: inputComponents*/, inputs/*: inputComponents[]*/) {
+            console.log(`TupleStruct[${this.root}].handleFieldChange()`, { type, index, input, inputs });                // FIXME: remove
+            component.handleModelValueChange(type, index, input);
+
+            const propertyName = this.componentDescription[index].name;
+            this.fields[propertyName] = input;
+
+            // if is not a complex input we can emit the valueParsed event
+            if (!inputIsComplex(type)) {
+                this.valueParsed(type, index, input, component);
+                return;
+            }
+        },
+    },
+    computed: {
+        root() {
+            if (this.root_ !== '') {
+                return this.root_;
+            }
+            let root_ = '';
+            for (let i = 0; i < +this.componentDescription.length; i++) {
+                if (this.componentDescription[i].type === 'tuple') {
+                    root_ += this.shapedLabelType(this.componentDescription[i].components);
+                } else {
+                    root_ += this.componentDescription[i].type;
+                }
+                if (i < +this.componentDescription.length - 1) {
+                    root_ += ', ';
+                }
+            }
+
+            return root_;
+        },
+        inputComponents() {
+            const components = getComponentsForAbiInputs(this.componentDescription, this.models)/* as unknown as inputComponents*/;
+            return components;
+        },
+        shapedLabel() {
+            let result = `${this.label} tuple${this.shapedLabelType(this.componentDescription)}`;
+            return result;
+        },
+    },
+    watch: {
+        isExpanded() {
+            clearTimeout(this.animationTimer);
+            if (this.isExpanded) {
+                this.isVisible = true;
+            } else {
+                this.animationTimer = setTimeout(() => {
+                    this.isVisible = false;
+                }, 500);
+            }
+        },
+    },
+};
+</script>
+
+<template>
+<div class="tuple-struct">
+    <q-expansion-item
+        v-model="isExpanded"
+        class="tuple-struct__header"
+    >
+        <template v-slot:header>
+            <div class="tuple-struct__header-text">{{ shapedLabel }}</div>
+        </template>
+
+        <q-card
+            v-if="isVisible"
+            :class="{
+                'tuple-struct__card--expanded-fields': isExpanded,
+                'tuple-struct__card': true,
+            }"
+        >
+            <div
+                class="tuple-struct__card-content"
+            >
+                <div>
+                    <template v-for="(component, index) in inputComponents">
+                        <component
+                            :is="component.is"
+                            v-if="component.is"
+                            :key="index"
+                            v-bind="component.bindings"
+                            required="true"
+                            class="tuple-struct__sub-component input-component q-pb-lg"
+                            :class="{ 'last-element': index === inputComponents.length - 1 }"
+                            @valueParsed="valueParsed(component.inputType, index, $event, component)"
+                            @update:modelValue="handleFieldChange(component.inputType, index, $event, component, inputComponents)"
+                        />
+                    </template>
+                </div>
+            </div>
+        </q-card>
+    </q-expansion-item>
+
+</div>
+</template>
+
+<style lang="scss">
+.tuple-struct {
+    width: 100%;
+
+    &__header {
+        &-text {
+            flex-grow: 1;
+            align-content: center;
+            order: 2;
+        }
+    }
+
+    &__header-btn {
+        margin-right: 10px;
+    }
+
+    &__header-btn--expanded {
+        transform: rotate(180deg);
+        transition: transform 0.3s;
+    }
+
+    &__card {
+        padding-top: 16px;
+        padding-left: 16px;
+        padding-left: 16px;
+        transition: margin-right 1.3s;
+    }
+
+    &__sub-component {
+        margin-left: 0px !important;
+        margin-right: 0px !important;
+    }
+
+}
+</style>
diff --git a/src/lib/function-interface-utils-ts.ts b/src/lib/function-interface-utils-ts.ts
new file mode 100644
index 00000000..3c8af8b5
--- /dev/null
+++ b/src/lib/function-interface-utils-ts.ts
@@ -0,0 +1,83 @@
+import { InputComponent, inputComponents, InputDescription } from 'src/types';
+import { getComponentForInputType, getExpectedArrayLengthFromParameterType, getIntegerBits, inputIsComplex, parameterIsArrayType, parameterIsIntegerType, parameterTypeIsBoolean, parameterTypeIsSignedIntArray, parameterTypeIsTupleStruct, parameterTypeIsTupleStructArray, parameterTypeIsUnsignedIntArray } from 'src/lib/function-interface-utils';
+import { toRaw } from 'vue';
+import { EvmFunctionParam } from 'src/antelope/types';
+
+export function getComponentsForAbiInputs(inputs: InputDescription[], models: {inputs: string[], values: EvmFunctionParam[]}, isRoot: boolean): inputComponents {
+    // inputs must be an array
+    if (!Array.isArray(inputs)) {
+        return [];
+    }
+    // models must be an object with a an array of values for each input (user input text, always strings)
+    if (
+        typeof models !== 'object' ||
+        !Array.isArray(models.values)
+    ) {
+        return [];
+    }
+
+    const getExtraBindingsForType = (input: InputDescription, index: number) => {
+        const { type, name, components } = input;
+        const label = `${name ? name : `Param ${index + 1}`}`;
+        const extras = {} as {[key:string]: string | InputDescription[]};
+
+        // represents integer bits (e.g. uint256) for int types, or array length for array types
+        let size = undefined;
+        if (parameterIsArrayType(type)) {
+            size = getExpectedArrayLengthFromParameterType(type);
+        } else if (parameterIsIntegerType(type)) {
+            size = getIntegerBits(type);
+        } else if (parameterTypeIsTupleStruct(type) && components) {
+            size = toRaw(components).length;
+        }
+
+        const result = type.match(/(\d+)(?=\[)/);
+        const intSize = result ? result[0] : undefined;
+
+        if (intSize && parameterTypeIsUnsignedIntArray(type)) {
+            extras['uint-size'] = intSize;
+        } else if (intSize && parameterTypeIsSignedIntArray(type)) {
+            extras['int-size'] = intSize;
+        } else if (parameterTypeIsTupleStruct(type) && components) {
+            extras['componentDescription'] = toRaw(components);
+        } else if (parameterTypeIsTupleStructArray(type) && components) {
+            extras['componentDescription'] = toRaw(components);
+        }
+
+        const defaultModelValue = parameterTypeIsBoolean(type) ? null : '';
+
+        const bindings = {
+            ...extras,
+            isRoot,
+            label,
+            size,
+            modelValue: models.inputs[index] ?? defaultModelValue,
+            name: label.toLowerCase(),
+        };
+        return bindings;
+    };
+
+    const handleModelValueChange = (type: string, index: number, value: string) => {
+        models.inputs[index] = value;
+
+        if (!inputIsComplex(type)) {
+            models.values[index] = value;
+        }
+    };
+    const handleValueParsed = (type: string, index: number, value: EvmFunctionParam) => {
+        if (inputIsComplex(type)) {
+            models.values[index] = value;
+        }
+    };
+
+    return inputs.map((input, index) => ({
+        bindings: getExtraBindingsForType(input, index),
+        is: getComponentForInputType(input.type),
+        inputType: input.type,
+        handleModelValueChange: (type: string, index: number, value: string) => handleModelValueChange(type, index, value),
+        handleValueParsed:      (type: string, index: number, value: EvmFunctionParam) => handleValueParsed(type, index, value),
+    }) as unknown as InputComponent);
+
+}
+
+
diff --git a/src/lib/function-interface-utils.js b/src/lib/function-interface-utils.js
index c14e8e71..11613c9e 100644
--- a/src/lib/function-interface-utils.js
+++ b/src/lib/function-interface-utils.js
@@ -13,7 +13,7 @@ const asyncInputComponents = {
     UnsignedIntArrayInput: defineAsyncComponent(() => import('components/inputs/UnsignedIntArrayInput')),
     UnsignedIntInput: defineAsyncComponent(() => import('components/inputs/UnsignedIntInput')),
     SignedIntArrayInput: defineAsyncComponent(() => import('components/inputs/SignedIntArrayInput')),
-    TupleStructInput: defineAsyncComponent(() => import('components/inputs/TupleStructInput')),
+    TupleStructInput: defineAsyncComponent(() => import('components/inputs/TupleStruct')),
     TupleStructArrayInput: defineAsyncComponent(() => import('components/inputs/TupleStructArrayInput')),
 };
 
diff --git a/src/types/FunctionInterfaces.ts b/src/types/FunctionInterfaces.ts
new file mode 100644
index 00000000..91bd6ca5
--- /dev/null
+++ b/src/types/FunctionInterfaces.ts
@@ -0,0 +1,14 @@
+import { EvmFunctionParam } from 'src/antelope/types';
+import { InputDescription } from 'src/types/AbiFunction';
+
+export interface InputComponent {
+    bindings: {
+        [key: string]: string | InputDescription[];
+    };
+    is: string;
+    inputType: string;
+    handleModelValueChange: (type: string, index: number, value: string) => void;
+    handleValueParsed: (type: string, index: number, value: EvmFunctionParam) => void;
+}
+
+export type inputComponents = InputComponent[];
diff --git a/src/types/index.ts b/src/types/index.ts
index d9d2151b..30d85ff4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -8,3 +8,5 @@ export * from 'src/types/SearchTypes';
 export * from 'src/types/TransactionQueryData';
 export * from 'src/types/AbiFunction';
 export * from 'src/types/Token';
+export * from 'src/types/FunctionInterfaces';
+