ethereum-abi-ui

A convenience package that makes it easy to build UIs for interacting with Ethereum contracts.

Works with with any UI framework
Field sanitization and validation functions
Minimal dependencies

Example screenshot (from Meth):

Installation

yarn add ethereum-abi-ui

or

npm install --save ethereum-abi-ui

## Example usage

This is a very basic example to illustrate how you use the API, it only uses jQuery, does not utilize any front-end framework, and is not production-quality code.

import $ from 'jquery'

import {
  FIELD_TYPES,
  canRenderMethodParams,
  renderMethodParams,
  canRenderMethodOutputs,
  renderMethodOutputs
} from 'ethereum-abi-ui'

const ABI = [ /* Solidity contract ABI definition */ ]
const form = $('method')
const output = $('outputs')

const fields = []

// render the input fields for the method params
if (canRenderMethodParams(ABI, 'approve')) {
  renderMethodParams(ABI, 'approve', (name, instance) => {
    switch (instance.fieldType()) {
      case FIELD_TYPES.NUMBER: {
        const input = $(`<input type="number" name="${name}" />`)
        input.instance = instance
        fields.push(input)
        form.append(input)
        break
      }
      case FIELD_TYPES.ADDRESS:
        // ...
        break
      // ...
    }
  })
}

form.submit(() => {
  const values = {}

  fields.forEach(input => {
    // sanitize entered value
    const val = input.instance.sanitize(input.val())

    // check that it's valid
    if (!input.instance.isValid(val)) {
      throw new Error('Please enter valid data')
    }

    // add to final values to send
    values[input.getAttribute('name')] = val
  })

  const results = doWeb3MethodCallUsingFormFieldValues(values)

  // now render the results
  if (canRenderMethodOutputs(ABI, 'approve')) {
    renderMethodOutputs(ABI, 'approve', results, (name, index, instance, result) => {
      output.append(`<p>${name}: ${result}</p>`)
    })
  }
})

API

canRenderMethodParams(abiJson, methodName): boolean

Get whether this library can render the input parameters for the given method of the given ABI.

renderMethodParams(abiJson, methodName, callback)

Render the input parameters for the given method of the given ABI.

The callback will be called for each input param with the following parameters:

name - name of the parameter
instance - an object instance representing the parameter type.

The instance object has the following methods:

fieldType() - returns one of the FIELD_TYPES (see below)
placeholderText() - suggested placeholder text to use for the input field representing this parameter
isValid() - function which tells you whether a given value is valid for this input parameter
sanitize() - function which can sanitize a given value entered for this parameter

canRenderMethodOutputs(abiJson, methodName): boolean

Get whether this library can render the output parameters for the given method of the given ABI.

renderMethodOutputs(abiJson, methodName, results, callback)

Render the output parameters for the given method of the given ABI.

The callback will be called for each output param with the following parameters:

name - name of the parameter
index - index of the output parameter in the list of outputs
instance - an object instance representing the parameter type.
result - the result obtained for this parameter (extracted from the results array passed in to the method)

The instance object has the following methods:

fieldType() - returns one of the FIELD_TYPES (see below)
placeholderText() - suggested placeholder text to use for the input field representing this parameter
isValid() - function which tells you whether a given value is valid for this input parameter
sanitize() - function which can sanitize a given value entered for this parameter

FIELD_TYPES

The supported form field types, at present: ADDRESS, TEXT, NUMBER, BOOL

PARAM_TYPES

The supported variable types, at present: address, string, uint, int, bool

Development

Lint: yarn lint
Test: yarn test
Build: yarn build

Contributors

All contributions welcome. Please see CONTRIBUTING.md

License

MIT

License

hiddentao/ethereum-abi-ui

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages