2 files changed, 99 insertions, 27 deletions
diff --git a/example/contract.html b/example/contract.html
new file mode 100644
index 000000000..44f0b03a1
--- /dev/null
+++ b/example/contract.html
@@ -0,0 +1,75 @@
+<!doctype>
+<html>
+
+<head>
+<script type="text/javascript" src="js/es6-promise/promise.min.js"></script>
+<script type="text/javascript" src="../dist/ethereum.js"></script>
+<script type="text/javascript">
+
+    var web3 = require('web3');
+    web3.setProvider(new web3.providers.AutoProvider());
+
+    // solidity source code
+    var source = "" + 
+    "contract test {\n" +
+    "   function multiply(uint a) returns(uint d) {\n" +
+    "       return a * 7;\n" +
+    "   }\n" +
+    "}\n";
+
+    // contract description, this will be autogenerated somehow
+    var desc =  [{
+        "name": "multiply",
+        "inputs": [
+        {
+            "name": "a",
+            "type": "uint256"
+        }
+        ],
+        "outputs": [
+        {
+            "name": "d",
+            "type": "uint256"
+        }
+        ]
+    }];
+
+    var contract;
+
+    function createExampleContract() {
+        // hide create button
+        document.getElementById('create').style.visibility = 'hidden'; 
+        document.getElementById('source').innerText = source;
+
+        // create contract
+        web3.eth.transact({code: web3.eth.solidity(source)}).then(function (address) {
+            contract = web3.contract(address, desc);
+            document.getElementById('call').style.visibility = 'visible';
+        });
+    }
+
+    function callExampleContract() {
+        // this should be generated by ethereum
+        var param = document.getElementById('value').value;
+
+        // call the contract
+        contract.multiply(param).call().then(function(res) {
+            document.getElementById('result').innerText = res[0];
+        });
+    }
+
+</script>
+</head>
+<body>
+    <h1>contract</h1>
+    <div id="source"></div> 
+    <div id='create'>
+        <button type="button" onClick="createExampleContract();">create example contract</button>
+    </div>
+    <div id='call' style='visibility: hidden;'>
+        <input type="number" id="value" onkeyup='callExampleContract()'></input>
+    </div>
+    <div id="result"></div>
+</body>
+</html>
+
diff --git a/example/index.html b/example/index.html
index 17694cbf6..d0bf094ef 100644
--- a/example/index.html
+++ b/example/index.html
@@ -4,41 +4,38 @@
 <head>
 <script type="text/javascript" src="js/es6-promise/promise.min.js"></script>
 <script type="text/javascript" src="../dist/ethereum.js"></script>
-
 <script type="text/javascript">
-if (window.Promise === undefined) {
-    window.Promise = ES6Promise.Promise;
-}
+   
+    var web3 = require('web3');
+    web3.setProvider(new web3.providers.AutoProvider());
 
-var web3 = require('web3');
+    function watchBalance() {
+        var coinbase = web3.eth.coinbase;
+        var originalBalance = 0;
 
-//web3.setProvider(new web3.providers.QtProvider());
-//web3.setProvider(new web3.providers.HttpRpcProvider("http://localhost:8080"));
-// web3.setProvider(new web3.providers.WebSocketProvider("ws://localhost:40404/eth"));
-web3.setProvider(new web3.providers.AutoProvider());
+        web3.eth.balanceAt(coinbase).then(function (balance) {
+            originalBalance = web3.toDecimal(balance);
+            document.getElementById('original').innerText = 'original balance: ' + originalBalance + '    watching...';
+        });
 
-function testSnippet() {
-    web3.eth.watch({altered: web3.eth.coinbase}).changed(function() {
-        web3.eth.balanceAt(web3.eth.coinbase).then(function (balance) {
-        	console.log(parseInt(balance,16));
-        	console.log(typeof balance);
-            document.getElementById("result").innerText = +balance;
+        web3.eth.watch({altered: coinbase}).changed(function() {
+            web3.eth.balanceAt(coinbase).then(function (balance) {
+                var currentBalance = web3.toDecimal(balance);
+                document.getElementById("current").innerText = 'current: ' + currentBalance;
+                document.getElementById("diff").innerText = 'diff:    ' + (currentBalance - originalBalance);
+            });
         });
-    });
-}
+    }
 
 </script>
 </head>
-
 <body>
-
-<h1>std::name_reg</h1>
-<input type="text" id="name"></input>
-<button type="button" onClick="testSnippet();">test snippet</button>
-
-<div></div>
-result: <div id="result"></div>
-
+    <h1>coinbase balance</h1>
+    <button type="button" onClick="watchBalance();">watch balance</button>
+    <div></div>
+    <div id="original"></div>
+    <div id="current"></div>
+    <div id="diff"></div>
 </body>
-
 </html>
+