// insert DOM element
const html = require('nanohtml');
const element = html`<div>Hello!</div>`;
document.body.appendChild(element);

// bind event
function hi(event) { alert('Hello'); }
var button = bel`<button class="primary" onclick=${hi}>click me</button>`

const html = require('nanohtml');
const morphdom = require('morphdom');

const element = html`<div>hello</div>`;
const newElement = html`<div>Hi</div>`;

// update DOM element
morphdom(element, newElement)

const csjs = require('csjs-inject');

const css = csjs `
  .input {
    margin: 10px;
    width: 500px;
    font-size: 20px;
  }
`

const inputAccount
 = html `<input class=${css.input} type="text" placeholder="input your account"/>`;

// install module
npm install budo -g

// live reload mode
budo src/01.js:bundle.js --live --open --dir ./static

// install module
npm install browserify -g

// package module
browserify src/01.js > static/01.js

const Web3 = require('web3');
const html = require('nanohtml');
const csjs = require('csjs-inject');
const morphdom = require('morphdom');

<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"/>

const Web3 = require('web3');
const html = require('nanohtml');
const csjs = require('csjs-inject');
const morphdom = require('morphdom');

if (typeof web3 !== 'undefined') {
  web3 = new Web3(web3.currentProvider);
} else {
  alert('initial failed');
}

const ABI = require('./abi.json');
const DEFAULT_ADDRESS = '0x0c972a74a9806f249968720035ebda65b653360c';
const myContract = new web3.eth.Contract(ABI, DEFAULT_ADDRESS);

const css = csjs `
  .box {
    margin: 10px;
  }
  .input {
    margin-top: 10px;
    margin-right: 10px;
    width: 500px;
    font-size: 20px;
  }
  .button {
    margin-top: 10px;
    margin-right: 10px;
    font-size: 20px;
    width: 180px;
    background-color: #4CAF50;
    color: white;
  }
  img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
  }
`

const fundAmountElement = bel `<input class=${css.input} type="text"/>`;
const fundNameElement = bel `<input class=${css.input} type="text"/>`;

const fundAreaElement = bel `
  <div class="${css.box6}">
    I want to sponsor this contest with ${fundAmountElement} ETH!<br>
    Name you want to be added to our sponsorship board. ${fundNameElement}<br>
    <button class=${css.shortButton} onclick=${fund}> Fund </button> (min 0.5 ETH)
  </div>
`

// Generate filter options
const options = {
  // filter: {
  //   _from: process.env.WALLET_FROM,
  //   _to: process.env.WALLET_TO,
  //   _value: process.env.AMOUNT
  // },
  fromBlock: 'latest'
}

myContract.events.NewFundLog(options, async (error, event) => {
  if (error) {
    console.log(error)
    return
  }
  const ether = web3.utils.fromWei(event.returnValues.amount, "ether");
  const name = event.returnValues.name;
  location.reload();

  // const newElement = html`<div class="${css.result}">.......</div>`
  // morphdom(resultElement, newElement);
  return
})

function fund(event) {
  let account = web3.eth.defaultAccount;

  // send contract
  myContract.methods.fund(inputName.value).send({
    from: account,
    value: web3.utils.toWei(inputAmount.value, "ether")
  }, (err, data) => {
    if (err) return console.error(err);
    console.log('>>> fund ok.');
  });
}

function fund(string _name) public minimizeContribute onlyOnTime payable {
  if(funders[msg.sender].amount != 0) {
    funders[msg.sender].amount += msg.value;
    funders[msg.sender].name = _name;
  } else {
    funders[msg.sender] = Funder(msg.sender, msg.value, now, _name);
    funderIndexs.push(msg.sender);
  }
  fundersOfAmount += msg.value;
}

function start() {
  console.log('=== start ===');
  step1({});
}

function step1(result) {
  // call contract
  myContract.methods.getFunders().call((err, data) => {
    if (err) return console.error(err);
    result.funders = data;
    step2(result);
  })
}

function step2(result) {
  step3(result)
}

function lastStep(result) {
  render(result)
}

function getFunders() public view returns (string[], uint[]) {
  string[] memory names = new string[](funderIndexs.length);
  uint[] memory amounts = new uint[](funderIndexs.length);
        
  for (uint i = 0; i < funderIndexs.length; i++) {
    Funder storage funder = funders[funderIndexs[i]];
    names[i] = funder.name;
    amounts[i] = funder.amount;
  }
        
  return (names, amounts);
}

function lastStep(result) {
  console.log('>>> last step');
  render(result)
}

function render(result) {
  console.log('>>> result:', result);
  document.body.appendChild(html `
  <div class=${css.box} id="app">

    // skip...

    Name： ${inputName}<br>
    Amount： ${inputAmount}<br>
    
    // skip...

  </div>
 `)
}

if (typeof web3 !== 'undefined') start();

browserify src/index.js > bundle.js

<!doctype html>
<html>
<head><meta charset="utf-8"></head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

* src
  - abi.json
  - index.js
- index.html
- bundle.js