Home

Awesome

ethereum-abi-ui

Build Status codecov Follow on Twitter

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

Example screenshot (from Meth):

Demo1

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:

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

The instance object has the following methods:

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:

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

The instance object has the following methods:

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

Contributors

All contributions welcome. Please see CONTRIBUTING.md

License

MIT