Skip to content

B
baas-ide
Commit bfbbcf0c authored by d11e9's avatar d11e9
Browse files
Options

listen to <enter> key on rename

parent a939f78b
Hide whitespace changes
Inline Side-by-side
Showing with 514 additions and 510 deletions
index.html
View file @ bfbbcf0c
...@@ -47,37 +47,37 @@ THE SOFTWARE. ...@@ -47,37 +47,37 @@ THE SOFTWARE.
</head> </head>
<body> <body>
<div id="editor"> <div id="editor">
<div id="files"> <div id="files">
<span class="newFile" title="New File">+</span> <span class="newFile" title="New File">+</span>
</div>
<div id="input"></div>
</div>
<div id="righthand-panel">
<div id="dragbar"></div>
<div id="header">
<img id="solIcon" src="solidity.svg">
<h1>Solidity realtime<br/>compiler and runtime</h1>
<div class="info">
<p>Version: <span id="version">(loading)</span><br/>
Change to: <select id="versionSelector"></select><br/>
Execution environment does not connect to any node, everyhing is local and in memory only.<br/>
<code>tx.origin = <span id="txorigin"/></code></p>
</div>
<div id="optimizeBox">
<input id="editorWrap" type="checkbox"><label for="editorWrap">Text Wrap</label>
<input id="optimize" type="checkbox"><label for="optimize">Enable Optimization</label>
</div>
</div>
<div id="output"></div>
</div> </div>
<div id="input"></div>
</div>
<div id="righthand-panel"> <script>
<div id="dragbar"></div>
<div id="header">
<img id="solIcon" src="solidity.svg">
<h1>Solidity realtime<br/>compiler and runtime</h1>
<div class="info">
<p>Version: <span id="version">(loading)</span><br/>
Change to: <select id="versionSelector"></select><br/>
Execution environment does not connect to any node, everyhing is local and in memory only.<br/>
<code>tx.origin = <span id="txorigin"/></code></p>
</div>
<div id="optimizeBox">
<input id="editorWrap" type="checkbox"><label for="editorWrap">Text Wrap</label>
<input id="optimize" type="checkbox"><label for="optimize">Enable Optimization</label>
</div>
</div>
<div id="output"></div>
</div>
<script>
// ----------------- editor ---------------------- // ----------------- editor ----------------------
...@@ -86,8 +86,8 @@ THE SOFTWARE. ...@@ -86,8 +86,8 @@ THE SOFTWARE.
var SOL_CACHE_FILES_KEY = "sol-cache-files"; var SOL_CACHE_FILES_KEY = "sol-cache-files";
var editor = ace.edit("input"); var editor = ace.edit("input");
var session = editor.getSession(); var session = editor.getSession();
var Range = ace.require('ace/range').Range; var Range = ace.require('ace/range').Range;
var errMarkerId = null; var errMarkerId = null;
var solFiles = JSON.parse( window.localStorage.getItem( SOL_CACHE_FILES_KEY ) ) || [SOL_CACHE_FILE]; var solFiles = JSON.parse( window.localStorage.getItem( SOL_CACHE_FILES_KEY ) ) || [SOL_CACHE_FILE];
...@@ -100,8 +100,8 @@ THE SOFTWARE. ...@@ -100,8 +100,8 @@ THE SOFTWARE.
session.setMode("ace/mode/javascript"); session.setMode("ace/mode/javascript");
session.setTabSize(4); session.setTabSize(4);
session.setUseSoftTabs(true); session.setUseSoftTabs(true);
// ----------------- file selector------------- // ----------------- file selector-------------
...@@ -109,520 +109,524 @@ THE SOFTWARE. ...@@ -109,520 +109,524 @@ THE SOFTWARE.
var $filesEl = $('#files'); var $filesEl = $('#files');
$filesEl.on( 'click','.newFile', function(){ $filesEl.on( 'click','.newFile', function(){
count++; count++;
var name = 'Unititled'+count; var name = 'Unititled'+count;
solFiles.push( name ) solFiles.push( name )
SOL_CACHE_FILE = name; SOL_CACHE_FILE = name;
window.localStorage.setItem( SOL_CACHE_FILES_KEY, JSON.stringify( solFiles ) ); window.localStorage.setItem( SOL_CACHE_FILES_KEY, JSON.stringify( solFiles ) );
window.localStorage.setItem( SOL_CACHE_FILE, '' ); window.localStorage.setItem( SOL_CACHE_FILE, '' );
updateFiles(); updateFiles();
}) })
$filesEl.on( 'click','.file:not(.active)', showFileHandler ) $filesEl.on( 'click','.file:not(.active)', showFileHandler )
$filesEl.on( 'click','.file.active', function(ev){ $filesEl.on( 'click','.file.active', function(ev){
var $fileTabEl = $(this) var $fileTabEl = $(this)
var originalName = $fileTabEl.find('.name').text() var originalName = $fileTabEl.find('.name').text()
ev.preventDefault()
if ($(this).find('input').length > 0 ) return false;
var $fileNameInputEl = $('<input value="'+originalName+'"/>');
$fileTabEl.html( $fileNameInputEl )
$fileNameInputEl.focus()
$fileNameInputEl.on( 'blur', function(ev){
ev.preventDefault() ev.preventDefault()
var newName = ev.target.value; if ($(this).find('input').length > 0 ) return false;
var $new = null var $fileNameInputEl = $('<input value="'+originalName+'"/>');
if ( newName !== originalName && confirm( "Are you sure you want to rename: " + originalName + " to " + newName + '?' )) { $fileTabEl.html( $fileNameInputEl )
$fileNameInputEl.focus()
solFiles.splice( solFiles.indexOf(originalName), 1, newName ); $fileNameInputEl.on( 'blur', handleRename )
window.localStorage.setItem( newName, window.localStorage.getItem(originalName) ); $fileNameInputEl.keyup( handleRename );
window.localStorage.setItem( SOL_CACHE_FILES_KEY, JSON.stringify( solFiles ) );
window.localStorage.removeItem( originalName ) function handleRename (ev) {
SOL_CACHE_FILE = newName; ev.preventDefault()
if (ev.which && ev.which !== 13) return false;
var newName = ev.target.value;
var $new = null
if ( newName !== originalName && confirm( "Are you sure you want to rename: " + originalName + " to " + newName + '?' )) {
solFiles.splice( solFiles.indexOf(originalName), 1, newName );
window.localStorage.setItem( newName, window.localStorage.getItem(originalName) );
window.localStorage.setItem( SOL_CACHE_FILES_KEY, JSON.stringify( solFiles ) );
window.localStorage.removeItem( originalName )
SOL_CACHE_FILE = newName;
}
updateFiles()
return false;
} }
updateFiles()
return false; return false;
})
return false;
}) })
$filesEl.on( 'click','.file .remove', function(ev){ $filesEl.on( 'click','.file .remove', function(ev){
ev.preventDefault(); ev.preventDefault();
var name = $(this).parent().find('.name').text() var name = $(this).parent().find('.name').text()
if (confirm( "Are you sure you want to remove: " + name + " from local storage?" )) { if (confirm( "Are you sure you want to remove: " + name + " from local storage?" )) {
var index = solFiles.indexOf(name); var index = solFiles.indexOf(name);
solFiles.splice(index, 1 ); solFiles.splice(index, 1 );
window.localStorage.setItem( SOL_CACHE_FILES_KEY, JSON.stringify( solFiles ) ); window.localStorage.setItem( SOL_CACHE_FILES_KEY, JSON.stringify( solFiles ) );
SOL_CACHE_FILE = solFiles[ Math.max(0, index - 1)] SOL_CACHE_FILE = solFiles[ Math.max(0, index - 1)]
window.localStorage.removeItem( name ) window.localStorage.removeItem( name )
updateFiles() updateFiles()
} }
return false; return false;
}) });
function showFileHandler (ev) { function showFileHandler (ev) {
ev.preventDefault() ev.preventDefault()
SOL_CACHE_FILE = $(this).find('.name').text(); SOL_CACHE_FILE = $(this).find('.name').text();
updateFiles() updateFiles()
return false; return false;
} }
function fileTabFromName(name) { function fileTabFromName(name) {
return $('#files .file').filter(function(){ return $(this).find('.name').text() == name; }) return $('#files .file').filter(function(){ return $(this).find('.name').text() == name; })
} }
function updateFiles () { function updateFiles () {
$filesEl.find('.file').remove() $filesEl.find('.file').remove()
for (var f in solFiles) { for (var f in solFiles) {
if (solFiles[f]) $filesEl.append( fileTabTemplate(solFiles[f]) ); if (solFiles[f]) $filesEl.append( fileTabTemplate(solFiles[f]) );
} }
var active = fileTabFromName(SOL_CACHE_FILE); var active = fileTabFromName(SOL_CACHE_FILE);
active.addClass('active') active.addClass('active')
editor.setValue( window.localStorage.getItem( SOL_CACHE_FILE ) || '', 1 ); editor.setValue( window.localStorage.getItem( SOL_CACHE_FILE ) || '', 1 );
$('#input').toggle( typeof SOL_CACHE_FILE === 'string' ) $('#input').toggle( typeof SOL_CACHE_FILE === 'string' )
} }
function fileTabTemplate(name){ function fileTabTemplate(name){
return $('<span class="file"><span class="name">'+name+'</span><span class="remove">x</span></span>'); return $('<span class="file"><span class="name">'+name+'</span><span class="remove">x</span></span>');
} }
SOL_CACHE_FILE = solFiles[0] SOL_CACHE_FILE = solFiles[0]
updateFiles(); updateFiles();
// ----------------- version selector------------- // ----------------- version selector-------------
// var soljsonSources is provided by bin/list.js // var soljsonSources is provided by bin/list.js
$('option', '#versionSelector').remove(); $('option', '#versionSelector').remove();
$.each(soljsonSources, function(i, file) { $.each(soljsonSources, function(i, file) {
if (file) { if (file) {
var version = file.replace(/soljson-(.*).js/, "$1"); var version = file.replace(/soljson-(.*).js/, "$1");
$('#versionSelector').append(new Option(version, file)); $('#versionSelector').append(new Option(version, file));
} }
}); });
$('#versionSelector').change(function() { $('#versionSelector').change(function() {
Module = null; Module = null;
compileJSON = null; compileJSON = null;
var script = document.createElement('script'); var script = document.createElement('script');
script.type = 'text/javascript'; script.type = 'text/javascript';
script.src = 'bin/' + $('#versionSelector').val(); script.src = 'bin/' + $('#versionSelector').val();
$('head').append(script); $('head').append(script);
onCompilerLoaded(); onCompilerLoaded();
}); });
// ----------------- resizeable ui --------------- // ----------------- resizeable ui ---------------
var EDITOR_SIZE_CACHE_KEY = "editor-size-cache"; var EDITOR_SIZE_CACHE_KEY = "editor-size-cache";
var dragging = false; var dragging = false;
$('#dragbar').mousedown(function(e){ $('#dragbar').mousedown(function(e){
e.preventDefault(); e.preventDefault();
dragging = true; dragging = true;
var main = $('#righthand-panel'); var main = $('#righthand-panel');
var ghostbar = $('<div id="ghostbar">', { var ghostbar = $('<div id="ghostbar">', {
css: { css: {
top: main.offset().top, top: main.offset().top,
left: main.offset().left left: main.offset().left
} }
}).prependTo('body'); }).prependTo('body');
$(document).mousemove(function(e){ $(document).mousemove(function(e){
ghostbar.css("left",e.pageX+2); ghostbar.css("left",e.pageX+2);
}); });
}); });
var $body = $('body'); var $body = $('body');
function setEditorSize (delta) { function setEditorSize (delta) {
$('#righthand-panel').css("width", delta); $('#righthand-panel').css("width", delta);
$('#editor').css("right", delta); $('#editor').css("right", delta);
onResize(); onResize();
} }
$(document).mouseup(function(e){ $(document).mouseup(function(e){
if (dragging) { if (dragging) {
var delta = $body.width() - e.pageX+2; var delta = $body.width() - e.pageX+2;
$('#ghostbar').remove(); $('#ghostbar').remove();
$(document).unbind('mousemove'); $(document).unbind('mousemove');
dragging = false; dragging = false;
setEditorSize( delta ) setEditorSize( delta )
window.localStorage.setItem( EDITOR_SIZE_CACHE_KEY, delta ); window.localStorage.setItem( EDITOR_SIZE_CACHE_KEY, delta );
} }
}); });
// set cached defaults // set cached defaults
var cachedSize = window.localStorage.getItem( EDITOR_SIZE_CACHE_KEY ); var cachedSize = window.localStorage.getItem( EDITOR_SIZE_CACHE_KEY );
if (cachedSize) setEditorSize( cachedSize ); if (cachedSize) setEditorSize( cachedSize );
// ----------------- editor resize --------------- // ----------------- editor resize ---------------
function onResize() { function onResize() {
editor.resize(); editor.resize();
session.setUseWrapMode(document.querySelector('#editorWrap').checked); session.setUseWrapMode(document.querySelector('#editorWrap').checked);
if(session.getUseWrapMode()) { if(session.getUseWrapMode()) {
var characterWidth = editor.renderer.characterWidth; var characterWidth = editor.renderer.characterWidth;
var contentWidth = editor.container.ownerDocument.getElementsByClassName("ace_scroller")[0].clientWidth; var contentWidth = editor.container.ownerDocument.getElementsByClassName("ace_scroller")[0].clientWidth;
if(contentWidth > 0) { if(contentWidth > 0) {
session.setWrapLimit(parseInt(contentWidth / characterWidth, 10)); session.setWrapLimit(parseInt(contentWidth / characterWidth, 10));
} }
} }
} }
window.onresize = onResize; window.onresize = onResize;
onResize(); onResize();
document.querySelector('#editor').addEventListener('change', onResize ); document.querySelector('#editor').addEventListener('change', onResize );
// ----------------- compiler ---------------------- // ----------------- compiler ----------------------
var compileJSON; var compileJSON;
var previousInput = ''; var previousInput = '';
var sourceAnnotations = []; var sourceAnnotations = [];
var compile = function() { var compile = function() {
editor.getSession().clearAnnotations(); editor.getSession().clearAnnotations();
sourceAnnotations = []; sourceAnnotations = [];
editor.getSession().removeMarker(errMarkerId); editor.getSession().removeMarker(errMarkerId);
$('#output').empty(); $('#output').empty();
var input = editor.getValue(); var input = editor.getValue();
var inputIncludingImports = includeLocalImports( input ); var inputIncludingImports = includeLocalImports( input );
var optimize = document.querySelector('#optimize').checked; var optimize = document.querySelector('#optimize').checked;
try { try {
var data = $.parseJSON(compileJSON(inputIncludingImports, optimize ? 1 : 0)); var data = $.parseJSON(compileJSON(inputIncludingImports, optimize ? 1 : 0));
} catch (exception) { } catch (exception) {
renderError("Uncaught JavaScript Exception:\n" + exception); renderError("Uncaught JavaScript Exception:\n" + exception);
return; return;
} }
if (data['error'] !== undefined) if (data['error'] !== undefined)
renderError(data['error']); renderError(data['error']);
if (data['errors'] != undefined) if (data['errors'] != undefined)
$.each(data['errors'], function(i, err) { $.each(data['errors'], function(i, err) {
renderError(err); renderError(err);
}); });
else else
renderContracts(data, input); renderContracts(data, input);
} }
var compileTimeout = null; var compileTimeout = null;
var onChange = function() { var onChange = function() {
var input = editor.getValue(); var input = editor.getValue();
if (input === "") { if (input === "") {
window.localStorage.setItem( SOL_CACHE_FILE, '' ) window.localStorage.setItem( SOL_CACHE_FILE, '' )
return; return;
} }
if (input === previousInput) if (input === previousInput)
return; return;
previousInput = input; previousInput = input;
if (compileTimeout) window.clearTimeout(compileTimeout); if (compileTimeout) window.clearTimeout(compileTimeout);
compileTimeout = window.setTimeout(compile, 300); compileTimeout = window.setTimeout(compile, 300);
}; };
var onCompilerLoaded = function() { var onCompilerLoaded = function() {
compileJSON = Module.cwrap("compileJSON", "string", ["string", "number"]); compileJSON = Module.cwrap("compileJSON", "string", ["string", "number"]);
$('#version').text(Module.cwrap("version", "string", [])()); $('#version').text(Module.cwrap("version", "string", [])());
previousInput = ''; previousInput = '';
onChange(); onChange();
}; };
function includeLocalImports( input ) { function includeLocalImports( input ) {
var importRegex = /import\s[\'\"]([^\'\"]+)[\'\"];/g var importRegex = /import\s[\'\"]([^\'\"]+)[\'\"];/g
var imports = []; var imports = [];
var matches = []; var matches = [];
var match; var match;
while ((match = importRegex.exec(input)) !== null) { while ((match = importRegex.exec(input)) !== null) {
if (match[1] && solFiles.indexOf(match[1]) !== -1) { if (match[1] && solFiles.indexOf(match[1]) !== -1) {
imports.push( match[1] ) imports.push( match[1] )
matches.push( match[0] ) matches.push( match[0] )
}
}
for (var i in imports) {
imported = includeLocalImports( window.localStorage.getItem( imports[i] ) )
input = input.replace( matches[i], imported );
} }
} return input;
for (var i in imports) {
imported = includeLocalImports( window.localStorage.getItem( imports[i] ) )
input = input.replace( matches[i], imported );
}
return input;
} }
if (Module) if (Module)
onCompilerLoaded(); onCompilerLoaded();
editor.getSession().on('change', onChange); editor.getSession().on('change', onChange);
document.querySelector('#optimize').addEventListener('change', compile); document.querySelector('#optimize').addEventListener('change', compile);
// ----------------- compiler output renderer ---------------------- // ----------------- compiler output renderer ----------------------
var detailsOpen = {}; var detailsOpen = {};
var renderError = function(message) { var renderError = function(message) {
$('#output') $('#output')
.append($('<pre class="error"></pre>').text(message)); .append($('<pre class="error"></pre>').text(message));
var err = message.match(/^:([0-9]*):([0-9]*)/) var err = message.match(/^:([0-9]*):([0-9]*)/)
if (err && err.length) { if (err && err.length) {
var errLine = parseInt( err[1], 10 ) - 1; var errLine = parseInt( err[1], 10 ) - 1;
var errCol = err[2] ? parseInt( err[2], 10 ) : 0; var errCol = err[2] ? parseInt( err[2], 10 ) : 0;
sourceAnnotations[sourceAnnotations.length] ={ sourceAnnotations[sourceAnnotations.length] ={
row: errLine, row: errLine,
column: errCol, column: errCol,
text: message, text: message,
type: "error" type: "error"
}; };
editor.getSession().setAnnotations(sourceAnnotations); editor.getSession().setAnnotations(sourceAnnotations);
} }
}; };
var gethDeploy = function(contractName, interface, bytecode){ var gethDeploy = function(contractName, interface, bytecode){
var code = ""; var code = "";
var funABI = getConstructorInterface($.parseJSON(interface)); var funABI = getConstructorInterface($.parseJSON(interface));
$.each(funABI.inputs, function(i, inp) { $.each(funABI.inputs, function(i, inp) {
code += "var "+inp.name+" = /* var of type " + inp.type + " here */ ;\n"; code += "var "+inp.name+" = /* var of type " + inp.type + " here */ ;\n";
}); });
code += "\nvar "+contractName+"Contract = web3.eth.contract("+interface.replace("\n","")+");" code += "\nvar "+contractName+"Contract = web3.eth.contract("+interface.replace("\n","")+");"
+"\nvar "+contractName+" = "+contractName+"Contract.new("; +"\nvar "+contractName+" = "+contractName+"Contract.new(";
$.each(funABI.inputs, function(i, inp) { $.each(funABI.inputs, function(i, inp) {
code += "\n "+inp.name+","; code += "\n "+inp.name+",";
}); });
code += "\n {"+ code += "\n {"+
"\n from: web3.eth.accounts[0], "+ "\n from: web3.eth.accounts[0], "+
"\n data: '"+bytecode+"', "+ "\n data: '"+bytecode+"', "+
"\n gas: 1000000"+ "\n gas: 1000000"+
"\n }, function(e, contract){"+ "\n }, function(e, contract){"+
"\n if (typeof contract.address != 'undefined') {"+ "\n if (typeof contract.address != 'undefined') {"+
"\n console.log(e, contract);"+ "\n console.log(e, contract);"+
"\n console.log('Contract mined! address: ' + contract.address + ' transactionHash: ' + contract.transactionHash);" + "\n console.log('Contract mined! address: ' + contract.address + ' transactionHash: ' + contract.transactionHash);" +
"\n }" + "\n }" +
"\n })"; "\n })";
return code; return code;
}; };
var combined = function(contractName, interface, bytecode){ var combined = function(contractName, interface, bytecode){
return JSON.stringify( [{name: contractName, interface: interface, bytecode: bytecode}]); return JSON.stringify( [{name: contractName, interface: interface, bytecode: bytecode}]);
}; };
var renderContracts = function(data, source) { var renderContracts = function(data, source) {
window.localStorage.setItem( SOL_CACHE_FILE, source ); window.localStorage.setItem( SOL_CACHE_FILE, source );
$('#output').empty(); $('#output').empty();
for (var contractName in data.contracts) { for (var contractName in data.contracts) {
var contract = data.contracts[contractName]; var contract = data.contracts[contractName];
var title = $('<h3 class="title"/>').text(contractName); var title = $('<h3 class="title"/>').text(contractName);
var contractOutput = $('<div class="contractOutput"/>') var contractOutput = $('<div class="contractOutput"/>')
.append(title); .append(title);
var body = $('<div class="body" />') var body = $('<div class="body" />')
contractOutput.append( body ); contractOutput.append( body );
if (contract.bytecode.length > 0) if (contract.bytecode.length > 0)
title.append($('<div class="size"/>').text((contract.bytecode.length / 2) + ' bytes')) title.append($('<div class="size"/>').text((contract.bytecode.length / 2) + ' bytes'))
body.append(getExecuteInterface(contract, contractName)) body.append(getExecuteInterface(contract, contractName))
.append(tableRow('Bytecode', contract.bytecode)); .append(tableRow('Bytecode', contract.bytecode));
body.append(tableRow('Interface', contract['interface'])) body.append(tableRow('Interface', contract['interface']))
.append(textRow('Web3 deploy', gethDeploy(contractName.toLowerCase(),contract['interface'],contract.bytecode), 'deploy')) .append(textRow('Web3 deploy', gethDeploy(contractName.toLowerCase(),contract['interface'],contract.bytecode), 'deploy'))
.append(textRow('uDApp', combined(contractName,contract['interface'],contract.bytecode), 'deploy')) .append(textRow('uDApp', combined(contractName,contract['interface'],contract.bytecode), 'deploy'))
.append(getDetails(contract, source, contractName)); .append(getDetails(contract, source, contractName));
$('#output').append(contractOutput); $('#output').append(contractOutput);
title.click(function(ev){ $(this).parent().toggleClass('hide') }); title.click(function(ev){ $(this).parent().toggleClass('hide') });
} }
$('.col2 input,textarea').click(function() { this.select(); } ); $('.col2 input,textarea').click(function() { this.select(); } );
}; };
var tableRowItems = function(first, second, cls) { var tableRowItems = function(first, second, cls) {
return $('<div class="row"/>') return $('<div class="row"/>')
.addClass(cls) .addClass(cls)
.append($('<div class="col1">').append(first)) .append($('<div class="col1">').append(first))
.append($('<div class="col2">').append(second)); .append($('<div class="col2">').append(second));
}; };
var tableRow = function(description, data) { var tableRow = function(description, data) {
return tableRowItems( return tableRowItems(
$('<span/>').text(description), $('<span/>').text(description),
$('<input readonly="readonly"/>').val(data)); $('<input readonly="readonly"/>').val(data));
}; };
var textRow = function(description, data, cls) { var textRow = function(description, data, cls) {
return tableRowItems( return tableRowItems(
$('<strong/>').text(description), $('<strong/>').text(description),
$('<textarea readonly="readonly" class="gethDeployText"/>').val(data), $('<textarea readonly="readonly" class="gethDeployText"/>').val(data),
cls); cls);
}; };
var getDetails = function(contract, source, contractName) { var getDetails = function(contract, source, contractName) {
var button = $('<button>Details</button>'); var button = $('<button>Details</button>');
var details = $('<div style="display: none;"/>') var details = $('<div style="display: none;"/>')
.append(tableRow('Solidity Interface', contract.solidity_interface)) .append(tableRow('Solidity Interface', contract.solidity_interface))
.append(tableRow('Opcodes', contract.opcodes)); .append(tableRow('Opcodes', contract.opcodes));
var funHashes = ''; var funHashes = '';
for (var fun in contract.functionHashes) for (var fun in contract.functionHashes)
funHashes += contract.functionHashes[fun] + ' ' + fun + '\n'; funHashes += contract.functionHashes[fun] + ' ' + fun + '\n';
details.append($('<span class="col1">Functions</span>')); details.append($('<span class="col1">Functions</span>'));
details.append($('<pre/>').text(funHashes)); details.append($('<pre/>').text(funHashes));
details.append($('<span class="col1">Gas Estimates</span>')); details.append($('<span class="col1">Gas Estimates</span>'));
details.append($('<pre/>').text(formatGasEstimates(contract.gasEstimates))); details.append($('<pre/>').text(formatGasEstimates(contract.gasEstimates)));
if (contract.runtimeBytecode && contract.runtimeBytecode.length > 0) if (contract.runtimeBytecode && contract.runtimeBytecode.length > 0)
details.append(tableRow('Runtime Bytecode', contract.runtimeBytecode)); details.append(tableRow('Runtime Bytecode', contract.runtimeBytecode));
if (contract.assembly !== null) if (contract.assembly !== null)
{ {
details.append($('<span class="col1">Assembly</span>')); details.append($('<span class="col1">Assembly</span>'));
var assembly = $('<pre/>').text(formatAssemblyText(contract.assembly, '', source)); var assembly = $('<pre/>').text(formatAssemblyText(contract.assembly, '', source));
details.append(assembly); details.append(assembly);
} }
button.click(function() { detailsOpen[contractName] = !detailsOpen[contractName]; details.toggle(); }); button.click(function() { detailsOpen[contractName] = !detailsOpen[contractName]; details.toggle(); });
if (detailsOpen[contractName]) if (detailsOpen[contractName])
details.show(); details.show();
return $('<div/>').append(button).append(details); return $('<div/>').append(button).append(details);
}; };
var formatGasEstimates = function(data) { var formatGasEstimates = function(data) {
var gasToText = function(g) { return g === null ? 'unknown' : g; } var gasToText = function(g) { return g === null ? 'unknown' : g; }
var text = ''; var text = '';
if ('creation' in data) if ('creation' in data)
text += 'Creation: ' + gasToText(data.creation[0]) + ' + ' + gasToText(data.creation[1]) + '\n'; text += 'Creation: ' + gasToText(data.creation[0]) + ' + ' + gasToText(data.creation[1]) + '\n';
text += 'External:\n'; text += 'External:\n';
for (var fun in data.external) for (var fun in data.external)
text += ' ' + fun + ': ' + gasToText(data.external[fun]) + '\n'; text += ' ' + fun + ': ' + gasToText(data.external[fun]) + '\n';
text += 'Internal:\n'; text += 'Internal:\n';
for (var fun in data.internal) for (var fun in data.internal)
text += ' ' + fun + ': ' + gasToText(data.internal[fun]) + '\n'; text += ' ' + fun + ': ' + gasToText(data.internal[fun]) + '\n';
return text; return text;
}; };
var formatAssemblyText = function(asm, prefix, source) { var formatAssemblyText = function(asm, prefix, source) {
if (typeof(asm) == typeof('') || asm === null || asm === undefined) if (typeof(asm) == typeof('') || asm === null || asm === undefined)
return prefix + asm + '\n'; return prefix + asm + '\n';
var text = prefix + '.code\n'; var text = prefix + '.code\n';
$.each(asm['.code'], function(i, item) { $.each(asm['.code'], function(i, item) {
var v = item.value === undefined ? '' : item.value; var v = item.value === undefined ? '' : item.value;
var src = ''; var src = '';
if (item.begin !== undefined && item.end != undefined) if (item.begin !== undefined && item.end != undefined)
src = source.slice(item.begin, item.end).replace('\n', '\\n', 'g'); src = source.slice(item.begin, item.end).replace('\n', '\\n', 'g');
if (src.length > 30) if (src.length > 30)
src = src.slice(0, 30) + '...'; src = src.slice(0, 30) + '...';
if (item.name != 'tag') if (item.name != 'tag')
text += ' '; text += ' ';
text += prefix + item.name + ' ' + v + '\t\t\t' + src + '\n'; text += prefix + item.name + ' ' + v + '\t\t\t' + src + '\n';
}); });
text += prefix + '.data\n'; text += prefix + '.data\n';
if (asm['.data']) if (asm['.data'])
$.each(asm['.data'], function(i, item) { $.each(asm['.data'], function(i, item) {
text += ' ' + prefix + '' + i + ':\n'; text += ' ' + prefix + '' + i + ':\n';
text += formatAssemblyText(item, prefix + ' ', source); text += formatAssemblyText(item, prefix + ' ', source);
}); });
return text; return text;
}; };
$('.asmOutput button').click(function() {$(this).parent().find('pre').toggle(); } ) $('.asmOutput button').click(function() {$(this).parent().find('pre').toggle(); } )
// ----------------- VM ---------------------- // ----------------- VM ----------------------
var stateTrie = new EthVm.Trie(); var stateTrie = new EthVm.Trie();
var vm = new EthVm.VM(stateTrie); var vm = new EthVm.VM(stateTrie);
//@todo this does not calculate the gas costs correctly but gets the job done. //@todo this does not calculate the gas costs correctly but gets the job done.
var identityCode = 'return { gasUsed: 1, return: opts.data, exception: 1 };'; var identityCode = 'return { gasUsed: 1, return: opts.data, exception: 1 };';
var identityAddr = ethUtil.pad(new Buffer('04', 'hex'), 20) var identityAddr = ethUtil.pad(new Buffer('04', 'hex'), 20)
vm.loadPrecompiled(identityAddr, identityCode); vm.loadPrecompiled(identityAddr, identityCode);
var secretKey = '3cd7232cd6f3fc66a57a6bedc1a8ed6c228fff0a327e169c2bcc5e869ed49511' var secretKey = '3cd7232cd6f3fc66a57a6bedc1a8ed6c228fff0a327e169c2bcc5e869ed49511'
var publicKey = '0406cc661590d48ee972944b35ad13ff03c7876eae3fd191e8a2f77311b0a3c6613407b5005e63d7d8d76b89d5f900cde691497688bb281e07a5052ff61edebdc0' var publicKey = '0406cc661590d48ee972944b35ad13ff03c7876eae3fd191e8a2f77311b0a3c6613407b5005e63d7d8d76b89d5f900cde691497688bb281e07a5052ff61edebdc0'
var address = ethUtil.pubToAddress(new Buffer(publicKey, 'hex')); var address = ethUtil.pubToAddress(new Buffer(publicKey, 'hex'));
$('#txorigin').text('0x' + address.toString('hex')); $('#txorigin').text('0x' + address.toString('hex'));
var account = new EthVm.Account(); var account = new EthVm.Account();
account.balance = 'f00000000000000001'; account.balance = 'f00000000000000001';
var nonce = 0; var nonce = 0;
stateTrie.put(address, account.serialize()); stateTrie.put(address, account.serialize());
var runTx = function(data, to, cb) { var runTx = function(data, to, cb) {
var tx = new EthVm.Transaction({ var tx = new EthVm.Transaction({
nonce: new Buffer([nonce++]), //@todo count beyond 255 nonce: new Buffer([nonce++]), //@todo count beyond 255
gasPrice: '01', gasPrice: '01',
gasLimit: '3000000000', // plenty gasLimit: '3000000000', // plenty
to: to, to: to,
data: data data: data
}); });
tx.sign(new Buffer(secretKey, 'hex')); tx.sign(new Buffer(secretKey, 'hex'));
vm.runTx({tx: tx}, cb); vm.runTx({tx: tx}, cb);
}; };
var getConstructorInterface = function(abi) { var getConstructorInterface = function(abi) {
var funABI = {'name':'','inputs':[],'type':'constructor','outputs':[]}; var funABI = {'name':'','inputs':[],'type':'constructor','outputs':[]};
for (var i = 0; i < abi.length; i++) for (var i = 0; i < abi.length; i++)
if (abi[i].type == 'constructor') { if (abi[i].type == 'constructor') {
funABI.inputs = abi[i].inputs || []; funABI.inputs = abi[i].inputs || [];
break; break;
} }
return funABI; return funABI;
}; };
var getCallButton = function(args) { var getCallButton = function(args) {
// args.abi, args.bytecode [constr only], args.address [fun only] // args.abi, args.bytecode [constr only], args.address [fun only]
// args.appendFunctions [constr only] // args.appendFunctions [constr only]
var isConstructor = args.bytecode !== undefined; var isConstructor = args.bytecode !== undefined;
var fun = new web3.eth.function(args.abi); var fun = new web3.eth.function(args.abi);
var inputs = ''; var inputs = '';
$.each(args.abi.inputs, function(i, inp) { $.each(args.abi.inputs, function(i, inp) {
if (inputs != '') inputs += ', '; if (inputs != '') inputs += ', ';
inputs += inp.type + ' ' + inp.name; inputs += inp.type + ' ' + inp.name;
}); });
var inputField = $('<input/>').attr('placeholder', inputs); var inputField = $('<input/>').attr('placeholder', inputs);
var outputSpan = $('<div class="output"/>'); var outputSpan = $('<div class="output"/>');
var button = $('<button/>') var button = $('<button/>')
.text(args.bytecode ? 'Create' : fun.displayName()) .text(args.bytecode ? 'Create' : fun.displayName())
.click(function() { .click(function() {
var funArgs = $.parseJSON('[' + inputField.val() + ']'); var funArgs = $.parseJSON('[' + inputField.val() + ']');
var data = fun.toPayload(funArgs).data; var data = fun.toPayload(funArgs).data;
if (data.slice(0, 2) == '0x') data = data.slice(2); if (data.slice(0, 2) == '0x') data = data.slice(2);
if (isConstructor) if (isConstructor)
data = args.bytecode + data.slice(8); data = args.bytecode + data.slice(8);
outputSpan.text('...'); outputSpan.text('...');
runTx(data, args.address, function(err, result) { runTx(data, args.address, function(err, result) {
if (err) if (err)
outputSpan.text(err); outputSpan.text(err);
else if (isConstructor) { else if (isConstructor) {
outputSpan.text(' Creation used ' + result.vm.gasUsed.toString(10) + ' gas.'); outputSpan.text(' Creation used ' + result.vm.gasUsed.toString(10) + ' gas.');
args.appendFunctions(result.createdAddress); args.appendFunctions(result.createdAddress);
} else { } else {
var outputObj = fun.unpackOutput('0x' + result.vm.return.toString('hex')); var outputObj = fun.unpackOutput('0x' + result.vm.return.toString('hex'));
outputSpan.text(' Returned: ' + JSON.stringify(outputObj)); outputSpan.text(' Returned: ' + JSON.stringify(outputObj));
} }
}); });
}); });
if (!isConstructor) if (!isConstructor)
button.addClass('runButton'); button.addClass('runButton');
var c = $('<div class="contractProperty"/>') var c = $('<div class="contractProperty"/>')
.append(button); .append(button);
if (args.abi.inputs.length > 0) if (args.abi.inputs.length > 0)
c.append(inputField); c.append(inputField);
return c.append(outputSpan); return c.append(outputSpan);
}; };
var getExecuteInterface = function(contract, name) { var getExecuteInterface = function(contract, name) {
var abi = $.parseJSON(contract.interface); var abi = $.parseJSON(contract.interface);
var execInter = $('<div/>'); var execInter = $('<div/>');
var funABI = getConstructorInterface(abi); var funABI = getConstructorInterface(abi);
var appendFunctions = function(address) { var appendFunctions = function(address) {
var instance = $('<div class="contractInstance"/>'); var instance = $('<div class="contractInstance"/>');
var title = $('<span class="title"/>').text('Contract at ' + address.toString('hex') ); var title = $('<span class="title"/>').text('Contract at ' + address.toString('hex') );
instance.append(title); instance.append(title);
$.each(abi, function(i, funABI) { $.each(abi, function(i, funABI) {
if (funABI.type != 'function') return; if (funABI.type != 'function') return;
instance.append(getCallButton({ instance.append(getCallButton({
abi: funABI, abi: funABI,
address: address address: address
})); }));
}); });
execInter.append(instance); execInter.append(instance);
title.click(function(ev){ $(this).parent().toggleClass('hide') }); title.click(function(ev){ $(this).parent().toggleClass('hide') });
}; };
if (contract.bytecode.length > 0) if (contract.bytecode.length > 0)
execInter execInter
.append(getCallButton({ .append(getCallButton({
abi: funABI, abi: funABI,
bytecode: contract.bytecode, bytecode: contract.bytecode,
appendFunctions: appendFunctions appendFunctions: appendFunctions
})); }));
return execInter; return execInter;
}; };
</script> </script>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment