refactor smartcontract-ui into modular components

[serapath]

@todo

• refactor input components
• make function component
• refactor smartcontract-ui with new components

---

example:

// app.js
const solidityFunction = require('solidity-function')
const element1 = solidityFunction({
  data: { input: ['uint8', 'unint256', 'bool'] }
})
document.body.appendChild(element1)
const element2 = solidityFunction({
  data: { input: ['bool', 'unint256', 'bool', 'bool'] }
})
document.body.appendChild(element2)

// solidity-function.js
const csjs = require('csjs-input')
const bel = require('bel')
const inputInteger = require('input-integer')
const inputBoolean= require('input-boolean')
// ...

function solidityFunction (opts, protocol) {
  const {
    data: { title = 'solidity function', inputs /*which input fields to use*/ },
    theme: { classes = css, variables = vars }
  } = opts

  var inputfields = inputs.map(type => {
     if (type === 'uint8') return customInputInteger(classes)
     if (type === 'uint256') return customInputInteger('uint256')
     if (type === 'bool') return customInputBool(classes)
     throw new Error('unknown type')
  })
  const customCSS = csjs`
    .inputInteger {
    }
    .bold {
    }
    .inputBool {
    }
  `

  return bel`<div class=${classes.solFN}>
    <h1> ${opts.title} </h1>
    <p class=${classes.inputs}>${inputfields}</p>
  </div>`
  function customInputBool () {
    return inputBool()
  }
  function customInputInteger (x) {
    // var classes_inputInteger = { inputInteger: `${customCSS.inputInteger} ${customCSS.bold` }
    var classes_inputInteger = csjs`
    .inputInteger {
      border: 1px solid green;
    }`
    const opts_inputInteger = {
      data: { type: x || 'uint8' }
      theme: { classes: clsses_inputInteger }
    }a
    return inputInteger(opts_inputInteger)
  }
}
const css = csjs`
.inputs {
  margin: 0;
}
.solFN { 
  background-color: grey;
}`

// input-integer.js
const csjs = require('csjs-input')
const bel = require('bel')

function inputInteger (opts, protocol) {
  const { data: { type = 'uint8' }, theme: { classes = css, variables = vars } } = opts
  // OR
  const type = opts.data.type || 'uint8'
  const classes = opts.theme.classes || css
  const variables = opts.theme.variables || vars
  // OR
  if (opts.theme.classes)
    var classes = opts.theme.classes
  } else {
    var classes = css
  }
  if (opts.theme.variables) {
    var variables = opts.theme.variables
  } else {
    var variables = vars
  }
  if (opts.data.type)
    var type = opts.data.type
  } else {
    var type = 'uint8'
  }

  return bel`<div class=${classes.inputInteger}>
    <input type="range">
  </div>`
}
// DEFAULT VALUES (DEFAULT THEME, DEFAULT VARIABLES, ...)
const vars = {
  '--foo': '#ff0000'
}
const css = csjs`
.inputInteger {
  border: 1px solid var(--foo);
}`

// input-bool.js
function inputBool () {
  return bel`<div></div>`
}