Display arrays of structs on Read/Write contract tabs (blockscout#1556)

* prototype

* change host for preview

* improve labels for nested arrays

* add field path

* bind fields to react form

* transform form fields into method args

* add styles for non-array args

* styles for tuple array

* style nested array inputs

* clear and multiply buttons for inputs

* show errors in inputs

* pass disabled state to inputs

* change direction of accordioin icon

* remove old code

* add asterix to required fields

* improvements and comments

* change styles

* highlight sections with errors

* refactoring field method name

* fix lable color

* fix ts

* preliminary tests

* better complex field labels

* improve tests

* remove outputs for write methods

* rollback review value

mocks/contract/methods.ts

@@ -132,6 +132,7 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
+    method_id: '0x01',
   },
   {
     constant: false,
@@ -146,6 +147,7 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: true,
     stateMutability: 'payable',
     type: 'function',
+    method_id: '0x02',
   },
   {
     stateMutability: 'payable',
@@ -159,6 +161,7 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
+    method_id: '0x03',
   },
   {
     constant: false,
@@ -173,6 +176,7 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
+    method_id: '0x04',
   },
   {
     constant: false,
@@ -190,6 +194,7 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
+    method_id: '0x05',
   },
   {
     constant: false,
@@ -208,5 +213,6 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
+    method_id: '0x06',
   },
 ];

types/api/contract.ts

@@ -62,12 +62,11 @@ export interface SmartContractMethodBase {
   type: 'function';
   payable: boolean;
   error?: string;
-}
-
-export interface SmartContractReadMethod extends SmartContractMethodBase {
   method_id: string;
 }
 
+export type SmartContractReadMethod = SmartContractMethodBase;
+
 export interface SmartContractWriteFallback {
   payable?: true;
   stateMutability: 'payable';
@@ -85,7 +84,7 @@ export type SmartContractWriteMethod = SmartContractMethodBase | SmartContractWr
 export type SmartContractMethod = SmartContractReadMethod | SmartContractWriteMethod;
 
 export interface SmartContractMethodInput {
-  internalType?: SmartContractMethodArgType;
+  internalType?: string; // there could be any string, e.g "enum MyEnum"
   name: string;
   type: SmartContractMethodArgType;
   components?: Array<SmartContractMethodInput>;