Compiling contracts in the browser.

compile.md

1. Clone the repo:

$ git clone git@github.com:Jusdev89/Remix-Mini-Starter.git

2. Inside of the mini_remix_stater

$ open index.html

3. Underneath <div class="mui-appbar"></div> place this snippet:

<section class="mui-container-fluid"> 
  <div class="mui-row">
    <div class="mui-col-md-6">
      <div class="mui-select">
        <select id="versions"></select>
      </div>
    </div> 
  </div>
</section>

4. Place contract status snippet inside of the <div class="mui-appbar"></div> code.

<div class="mui-container" style="float: left;">
  <p id="status" style="float: right; margin-top:20px"></p>
</div>

5. Create compiler feature:

let compiler

window.onload = function () {
  document.getElementById('versions').onchange = loadSolcVersion

  if (!BrowserSolc) {
    console.log('You have to load browser-solc.js in the page. We recommend using a <script> tag.')
    throw new Error()
  }

  status('Loading Compiler Versions...')

  BrowserSolc.getVersions(function (soljsonSources, soljsonReleases) {
    populateVersions(soljsonSources)
    setVersion(soljsonReleases['0.4.18'])
    loadSolcVersion()
  })
}

function loadSolcVersion() {
  status(`Loading Solc: ${getVersion()}`)
  BrowserSolc.loadVersion(getVersion(), function (c) {
    status('Solc loaded.')
    compiler = c
  })
}

function getVersion() {
  return document.getElementById('versions').value
}

function setVersion(version) {
  document.getElementById('versions').value = version
}

function populateVersions(versions) {
  sel = document.getElementById('versions')
  sel.innerHTML = ''

  for (let i = 0; i < versions.length; i++) {
    let opt = document.createElement('option')
    opt.appendChild(document.createTextNode(versions[i]))
    opt.value = versions[i]
    sel.appendChild(opt)
  }
}

function status(txt) {
  document.getElementById('status').innerHTML = txt
}

6. Lets type out this code directly in between our main mui-container-fluid div, below our dropdown select feature. Our UI should look like this:

<div class="mui-row">
  <div class="mui-col-md-6">
    <div class="mui-panel">
      <p style="font-size:25px; font-weight:bold">
        Compile Contract
      </p>
      <textarea id="source" onclick="this.select()" style="height: 360px; width: 530px; display: block; margin-left: 20px;"></textarea>
      <button id="contract-compile"  class="mui-btn mui-btn--primary">
        Compile
      </button>
    </div>
  </div>
</div> 

7. 2 more global variables:

let optimize = 1
let compiledContract

8. Show compiled contracts:

function addCompileEvent() {
  const compileBtn = document.getElementById('contract-compile')
  compileBtn.addEventListener('click', solcCompile)
}

function solcCompile() {
  if (!compiler) return alert('Please select a compiler version.') 

  setCompileButtonState(true)
  status("Compiling contract...")
  compiledContract = compiler.compile(getSourceCode(), optimize)

  if (compiledContract) setCompileButtonState(false)

  console.log('Compiled Contract :: ==>', compiledContract)
  status("Compile Complete.")
}

function getSourceCode() {
  return document.getElementById("source").value
}

function setCompileButtonState(state) {
  document.getElementById("contract-compile").disabled = state
}

• So lets stop here and skip ahead to our part-2/deploying-contracts-with-web3js