example/webwallet.html

<html>
  <body>
    <script src="../dist/lightwallet.min.js"></script>
    <script src="../node_modules/web3/dist/web3.js" type="text/javascript"></script>
    <script src="../node_modules/hooked-web3-provider/build/hooked-web3-provider.js" type="text/javascript"></script>
    <script src="../node_modules/async/lib/async.js" type="text/javascript"></script>
    <script>
      var web3 = new Web3();
      var global_keystore;

      function setWeb3Provider(keystore) {
        var web3Provider = new HookedWeb3Provider({
          host: 'https://rinkeby.infura.io/',
          transaction_signer: keystore
        });

        web3.setProvider(web3Provider);
      }

      function newAddresses(password) {
        if (password == '') {
          password = prompt('Enter password to retrieve addresses', 'Password');
        }

        var numAddr = parseInt(document.getElementById('numAddr').value);

        global_keystore.keyFromPassword(password, function (err, pwDerivedKey) {
          global_keystore.generateNewAddress(pwDerivedKey, numAddr);

          var addresses = global_keystore.getAddresses();

          document.getElementById('sendFrom').innerHTML = '';
          document.getElementById('functionCaller').innerHTML = '';

          for (var i = 0; i < addresses.length; ++i) {
            document.getElementById('sendFrom').innerHTML += '<option value="' + addresses[i] + '">' + addresses[i] + '</option>';
            document.getElementById('functionCaller').innerHTML += '<option value="' + addresses[i] + '">' + addresses[i] + '</option>';
          }

          getBalances();
        });
      }

      function getBalances() {
        var addresses = global_keystore.getAddresses();
        document.getElementById('addr').innerHTML = 'Retrieving addresses...';

        async.map(addresses, web3.eth.getBalance, function (err, balances) {
          async.map(addresses, web3.eth.getTransactionCount, function (err, nonces) {
            document.getElementById('addr').innerHTML = '';
            for (var i = 0; i < addresses.length; ++i) {
              document.getElementById('addr').innerHTML += '<div>' + addresses[i] + ' (Bal: ' + (balances[i] / 1.0e18) + ' ETH, Nonce: ' + nonces[i] + ')' + '</div>';
            }
          });
        });
      }

      function setSeed() {
        var password = prompt('Enter Password to encrypt your seed', 'Password');

        lightwallet.keystore.createVault({
          password: password,
          seedPhrase: document.getElementById('seed').value,
          //random salt
          hdPathString: 'm/0\'/0\'/0\''
        }, function (err, ks) {
          global_keystore = ks;

          document.getElementById('seed').value = '';

          newAddresses(password);
          setWeb3Provider(global_keystore);

          getBalances();
        });
      }

      function newWallet() {
        var extraEntropy = document.getElementById('userEntropy').value;
        document.getElementById('userEntropy').value = '';
        var randomSeed = lightwallet.keystore.generateRandomSeed(extraEntropy);

        var infoString = 'Your new wallet seed is: "' + randomSeed +
          '". Please write it down on paper or in a password manager, you will need it to access your wallet. Do not let anyone see this seed or they can take your Ether. ' +
          'Please enter a password to encrypt your seed while in the browser.';
        var password = prompt(infoString, 'Password');

        lightwallet.keystore.createVault({
          password: password,
          seedPhrase: randomSeed,
          //random salt
          hdPathString: 'm/0\'/0\'/0\''
        }, function (err, ks) {
          global_keystore = ks;

          newAddresses(password);
          setWeb3Provider(global_keystore);
          getBalances();
        });
      }

      function showSeed() {
        var password = prompt('Enter password to show your seed. Do not let anyone else see your seed.', 'Password');

        global_keystore.keyFromPassword(password, function (err, pwDerivedKey) {
          var seed = global_keystore.getSeed(pwDerivedKey);
          alert('Your seed is: "' + seed + '". Please write it down.');
        });
      }

      function sendEth() {
        var fromAddr = document.getElementById('sendFrom').value;
        var toAddr = document.getElementById('sendTo').value;
        var valueEth = document.getElementById('sendValueAmount').value;
        var value = parseFloat(valueEth) * 1.0e18;
        var gasPrice = 18000000000;
        var gas = 50000;

        web3.eth.sendTransaction({
          from: fromAddr,
          to: toAddr,
          value: value,
          gasPrice: gasPrice,
          gas: gas
        }, function (err, txhash) {
          console.log('error: ' + err);
          console.log('txhash: ' + txhash);
        });
      }

      function functionCall() {
        var fromAddr = document.getElementById('functionCaller').value;
        var contractAddr = document.getElementById('contractAddr').value;
        var abi = JSON.parse(document.getElementById('contractAbi').value);
        var contract = web3.eth.contract(abi).at(contractAddr);
        var functionName = document.getElementById('functionName').value;
        var args = JSON.parse('[' + document.getElementById('functionArgs').value + ']');
        var valueEth = document.getElementById('sendValueAmount').value;
        var value = parseFloat(valueEth) * 1.0e18;
        var gasPrice = 50000000000;
        var gas = 4541592;

        args.push({ from: fromAddr, value: value, gasPrice: gasPrice, gas: gas });

        var callback = function (err, txhash) {
          console.log('error: ' + err);
          console.log('txhash: ' + txhash);
        };

        args.push(callback);
        contract[functionName].apply(this, args);
      }

    </script>
    <h1>LightWallet</h1>
    <h2>New Wallet</h2>
    <div><input id="userEntropy" placeholder="Type random text to generate entropy" size="80" type="text" />
      <button onclick="newWallet()">Create New Wallet</button>
    </div>
    <h2>Restore Wallet</h2>
    <div><input id="seed" size="80" type="text" value="" />
      <button onclick="setSeed()">Restore wallet from Seed</button>
    </div>
    <h2>Show Addresses</h2>
    <div>Show <input id="numAddr" size="5" type="text" value="3" /> more address(es)
      <button onclick="newAddresses('')">Show</button>
    </div>
    <div id="addr"></div>
    <div>
      <button onClick='getBalances()'>Refresh</button>
    </div>
    <h2>Send Ether</h2>
    <div>From: <select id="sendFrom"></select></div>
    <div>To: <input id="sendTo" size="40" type="text" /></div>
    <div>Ether: <input id="sendValueAmount" type="text"></div>
    <div>
      <button onclick="sendEth()">Send Ether</button>
    </div>
    <h2>Show Seed</h2>
    <button onclick="showSeed()">Show Seed</button>
    <h2>Function Call</h2>
    <div>Caller: <select id="functionCaller"></select></div>
    <div>Contract Address: <input id="contractAddr" size="40" type="text" /></div>
    <div>Contract ABI: <input id="contractAbi" size="40" type="text" /></div>
    <div>Function Name: <input id="functionName" size="20" type="text" /></div>
    <div>Function Arguments: <input id="functionArgs" size="40" type="text" /></div>
    <div>Value (Ether): <input id="sendValueAmount" type="text"></div>
    <div>
      <button onclick="functionCall()">Call Function</button>
    </div>
  </body>
</html>