eth-typed-data/demo/src/App.js

A library to simplifiy interacting with and signing EIP712 typed data

import React, { Component } from 'react'
import EIP712Domain from '../../src'

import { TypeCreator, TypeViewer } from './components/Type'
import { ObjectCreator, ObjectViewer } from './components/Object'

import './App.css'

class App extends Component {
  constructor(props) {
    this.domain = new EIP712Domain({
      name: 'EthTypedData Test App',
      version: '0.1',
    })

    // Keep track 
    this.state = {
      objects: []
    }

    this.addType = this.addType.bind(this)
    this.addObject = this.addObject.bind(this)
  }

  /**
   * Add a new type class to the playground
   * @param 
   */
  addType(name, defs) {
    this.domain.createType(name, defs)
    this.forceUpdate()
  }

  /**
   * Add a new object to the playground
   * @param {Object} obj The new type instance to be added to the playground
   */
  addObject(obj) {
    const { objects } = this.state
    this.setState({objects: [...objects, obj]})
  }

  render() {
    const types = Object.values(this.domain.types)
    return (
      <div>
        <header>
          <div>EthTypedData Test Playground</div>
        </header>
        <main>
          <section id="types">
            <div>Data Types</div>
            <div>
              {types.map(typeclass => 
                <TypeViewer typeclass={typeclass} />
              )}
              <TypeCreator create={this.addType} />
            </div>
          </section>
          <section id="objects">
            <div>Typed Data Objects</div>
            <div>
              {objects.map(obj =>
                <ObjectViewer obj={obj}/>
              )}
              <ObjectCreator create={this.addObject} />
            </div>
          </section>
        </main>
      </div>
    );
  }
}

export default App