Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 1. Clone the repo:
- ```bash
- $ git clone git@github.com:Jusdev89/Remix-Mini-Starter.git
- ```
- 2. Inside of the `mini_remix_stater`
- ```bash
- $ open index.html
- ```
- 3. Underneath `<div class="mui-appbar"></div>` place this snippet:
- ```html
- <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.
- ```html
- <div class="mui-container" style="float: left;">
- <p id="status" style="float: right; margin-top:20px"></p>
- </div>
- ```
- 5. Create compiler feature:
- ```javascript
- 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:
- ```html
- <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:
- ```javascript
- let optimize = 1
- let compiledContract
- ```
- 8. Show compiled contracts:
- ```javascript
- 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`
Add Comment
Please, Sign In to add comment