Programmatically generate transaction forms

[faustbrian]

Premise

Most transaction forms in the wallet are composed of the same components with a few exceptions that require additional pages like multi payments. This makes a perfect case for programmatically generated forms as it allows faster implementation of new transaction types and makes it easier for transaction plugins to be developed as everything can be done based on code without having to touch the UI for most things.

The goal is to make the implementation of new transaction types easier and more modular because they can be encapsulated.

Concept

A basic concept of automatically generated forms based on a schema can be seen at fdb93dd. This is purely UI and has no functionality attached to it yet but illustrates the idea of how things should work.

Pages

Pages are the elements that are used to compose every transaction form. There will generally just be 2 of them, creation and confirmation of the transaction. Each page has an interface schema and validation schema attached to it but some pages might omit the validation schema because it only displays data and no form.

Interface Schema

The interface schema is responsible for providing all of the UI elements that need to be rendered and handling the events and interactions they trigger.

[
    {
        component: 'InputAddress',
        model: 'address',
        options: {
	        class: ['form-control'],
	        on: {
	            input (value) { console.log(value) }
	        },
	        attrs: {
	            placeholder: 'Please enter your address'
	        },
	        props: {
	            label: 'Address',
	            name: 'address'
	        }
        }
    },
    {
        component: 'InputFee',
        model: 'fee'
    }
]

Validation Schema

The validation schema is responsible for validating all the data that is provided through the elements of the interface schema.

{
    type: 'object',
    properties: {
        address: {
            type: 'string'
        },
        fee: {
            type: 'string'
        }
    }
},

Component

The rendering of the form will be handled by a component that internally uses createElement to create all elements. All data that is handed to it should come from a class that provides all of the data for a specific transaction type.

<GenericForm
    v-model="model"
    :validation-schema="validationSchema"
    :interface-schema="interfaceSchema"
/>

Functionality

All schemas and functionality handling should be exposed through classes that have to follow a certain structure to make it easier for plugins to expose them. This will make it easier to encapsulate the existing and new transaction types so that there will be no difference between official and plugin transaction types. This structure still has to be determined.

[faustbrian]

Closing, no longer relevant for 3.0