import { ContractInteractor } from 'ether-gui';
import { Contract } from 'ethers';

// ...
// inside your component
const contract = new Contract(contractAddress, contractAbi, signerOrProvider);

return (
    <ContractInteractor contract={contract} />
)

import { ContractMethod } from 'ether-gui';
import { Contract } from 'ethers';

// ...
// inside your component
const contract = new Contract(contractAddress, contractAbi, signerOrProvider);

return (
    <ContractMethod contract={contract} methodSignature={'setStringExample(string)'} />
)

<ContractInteractor
    // ContractInteractor will display all contract's methods by default
    contract={contract}

    // -- Customized Component to use for contract methods
    //ContractMethodComponent={StyledContractMethod}

    // -- specify a list of methods to show, order matters (by defaults all are shown)
    // methods={['balances(address)']}

    // -- exclude some methods
    excludeMethods={[
        'title()',
        'getNumberList()',
        'getDuo()',
        'setDuo(string,string)',
        'setDuoViaArray(string[2])',
    ]}

    // -- places readOnly methods first (true by default), otherwise alphabetical order only
    // readOnlyFirst={true}

    // -- specific options for specific methods
    methodsOptions={{
        // exact method signature
        'addPost((string,(string,string)))': {
            // options for that method signature
            title: 'Add a Post',
            beforeFields: <p>This method takes a <b>Post</b> object as argument</p>,
            fieldsOptions: {
                'post': { label: 'Post' },
                // object sub-fields options are with the "dot" notation
                'post.username': {
                    required: true,
                    placeholder: 'Vitalik',
                    label: 'Username',
                },
                'post.message': {
                    label: 'Message',
                },
                'post.message.title': {
                    required: true,
                    label: 'Title',
                },
                'post.message.content': {
                    required: true,
                    label: 'Content',
                }
            }
        },
        'posts(uint256)': {
            beforeFields: <p>This is a public variable of type Post[]</p>,
            afterFields: <p>"input_0" is the name automatically generated for the "index" parameter</p>,
            fieldsOptions: { input_0: { placeholder: 'Index of Existing Post, example : 0' } }
        },
        'depositAmount()': {
            beforeFields: <p>This is a <b>payable</b> method, allowing to send Eth to the Contract</p>
        },
        'setDuoViaArray(string[2])': {
            beforeFields: <p>This method takes an array of 2 string as argument</p>
        },
        'setNumberList(uint256[])': {
            beforeFields: <p>This method takes a list of numbers (seperated by commas) as argument</p>,
            // options for the fields/inputs
            fieldsOptions: {
                // options for the "_numberList" field/input
                _numberList: { placeholder: '1,2,3' }
            }
        },
        'setTitle(string)': {
            // Will prefill field/inputs by calling a read method from the contract
            initialStateGetters: {
                // => by default "setTitle(string)" will get the current title() value to prefill the "title" argument
                _title: 'title()',
            }
        },
        'balances(address)': {
            title: 'Custom title for "balances(address)" method',
            // ethFields is to indicate input/output fields that needs to be formatted as Eth (BigNumber with 18 decimals)
            ethFields: ['output_0'],
            btnLabel: 'Check balance in this contract',
            fieldsOptions: {
                input_0: {
                    label: 'Custom label for input_0',
                    required: true,
                },
                // options for the output, works the same as field/input options
                output_0: {
                    label: "User's balance in contract",
                }
            },
            // Prefill fields/inputs with some values
            // initialState: {
            //   input_0: 'some_address_to_use_as_default'
            // },
        }
    }}

    // -- default methodsOptions={}
    // defaultMethodOptions={{
    //   useSignerAddressAsDefault: true,
    // }}
/>