2 files changed, 34 insertions, 51 deletions
diff --git a/mascara/example/app.js b/mascara/example/app.js
index aae7ccd19..598e2c84c 100644
--- a/mascara/example/app.js
+++ b/mascara/example/app.js
@@ -1,57 +1,38 @@
-window.addEventListener('load', web3Detect)
+const EthQuery = require('ethjs-query')
+
+window.addEventListener('load', loadProvider)
 window.addEventListener('message', console.warn)
 
-function web3Detect() {
-  if (global.web3) {
-    logToDom('web3 detected!')
-    startApp()
-  } else {
-    logToDom('no web3 detected!')
-  }
+async function loadProvider() {
+  const ethereumProvider = window.metamask.createDefaultProvider({ host: 'http://localhost:9001' })
+  const ethQuery = new EthQuery(ethereumProvider)
+  const accounts = await ethQuery.accounts()
+   window.METAMASK_ACCOUNT = accounts[0] || 'locked'
+  logToDom(accounts.length ? accounts[0] : 'LOCKED or undefined', 'account')
+  setupButtons(ethQuery)
 }
 
-function startApp(){
-  console.log('app started')
 
-  var primaryAccount
-  console.log('getting main account...')
-  web3.eth.getAccounts((err, addresses) => {
-    if (err) console.error(err)
-    console.log('set address', addresses[0])
-    primaryAccount = addresses[0]
-  })
+function logToDom(message, context){
+  document.getElementById(context).innerText = message
+  console.log(message)
+}
 
-  document.querySelector('.action-button-1').addEventListener('click', function(){
-    console.log('saw click')
-    console.log('sending tx')
-    primaryAccount
-    web3.eth.sendTransaction({
-      from: primaryAccount,
-      to: primaryAccount,
-      value: 0,
-    }, function(err, txHash){
-      if (err) throw err
-      console.log('sendTransaction result:', err || txHash)
-    })
+function setupButtons (ethQuery) {
+  const accountButton = document.getElementById('action-button-1')
+  accountButton.addEventListener('click', async () => {
+    const accounts = await ethQuery.accounts()
+    window.METAMASK_ACCOUNT = accounts[0] || 'locked'
+    logToDom(accounts.length ? accounts[0] : 'LOCKED or undefined', 'account')
   })
-  document.querySelector('.action-button-2').addEventListener('click', function(){
-    console.log('saw click')
-    setTimeout(function(){
-      console.log('sending tx')
-      web3.eth.sendTransaction({
-        from: primaryAccount,
-        to: primaryAccount,
-        value: 0,
-      }, function(err, txHash){
-        if (err) throw err
-        console.log('sendTransaction result:', err || txHash)
-      })
+  const txButton = document.getElementById('action-button-2')
+  txButton.addEventListener('click', async () => {
+    if (!window.METAMASK_ACCOUNT || window.METAMASK_ACCOUNT === 'locked') return
+    const txHash = await ethQuery.sendTransaction({
+      from: window.METAMASK_ACCOUNT,
+      to: window.METAMASK_ACCOUNT,
+      data: '',
     })
+    logToDom(txHash, 'cb-value')
   })
-
-}
-
-function logToDom(message){
-  document.body.appendChild(document.createTextNode(message))
-  console.log(message)
-}
+}
+\ No newline at end of file
diff --git a/mascara/example/app/index.html b/mascara/example/app/index.html
index 02323e5f9..8afb6f3f2 100644
--- a/mascara/example/app/index.html
+++ b/mascara/example/app/index.html
@@ -3,13 +3,15 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>MetaMask ZeroClient Example</title>
   <script src="http://localhost:9001/metamascara.js"></script>
+  <title>MetaMask ZeroClient Example</title>
 </head>
 
 <body>
-  <button class="action-button-1">SYNC TX</button>
-  <button class="action-button-2">ASYNC TX</button>
+  <button id="action-button-1">GET ACCOUNT</button>
+  <div id="account"></div>
+  <button id="action-button-2">SEND TRANSACTION</button>
+  <div id="cb-value" ></div>
   <script src="./app.js"></script>
 </body>
 </html>
 \ No newline at end of file