account creation for personla mode and VM mode

src/app.js

@@ -622,6 +622,9 @@ function run () {
     },
     getCompilationResult: () => {
       return compiler.lastCompilationResult
+    },
+    newAccount: (pass, cb) => {
+      udapp.newAccount(pass, cb)
     }
   }
   var rhpEvents = {

src/app/execution/txRunner.js

@@ -26,7 +26,6 @@ var css = csjs`
   }
 `
 
-
 function TxRunner (vmaccounts, api) {
   this._api = api
   this.blockNumber = 0
@@ -105,8 +104,8 @@ TxRunner.prototype.execute = function (args, callback) {
 
         tx.gas = gasEstimation
 
-        if (!self.config.getUnpersistedProperty('doNotShowTransactionConfirmationAgain')) {
-          self.detectNetwork((err, network) => {
+        if (!self._api.config.getUnpersistedProperty('doNotShowTransactionConfirmationAgain')) {
+          self._api.detectNetwork((err, network) => {
             if (err) {
               console.log(err)
             } else {
@@ -115,7 +114,7 @@ TxRunner.prototype.execute = function (args, callback) {
                 modalDialog('Confirm transaction', content,
                   { label: 'Confirm',
                     fn: () => {
-                      self.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked)
+                      self._api.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked)
                       if (!content.gasPriceStatus) {
                         callback('Given gas grice is not correct')
                       } else {

src/app/tabs/run-tab.js

@@ -191,6 +191,11 @@ var css = csjs`
   }
   .transactionActions {
     float: right;
+  }
+  .createAccount {
+    margin-left: 5px;
+    cursor: pointer;
+  }
 `
 
 module.exports = runTab
@@ -526,6 +531,15 @@ function settings (container, appAPI, appEvents) {
     })
   }
   setInterval(updateNetwork, 5000)
+  function newAccount () {
+    appAPI.newAccount('', (error, address) => {
+      if (!error) {
+        container.querySelector('#txorigin').appendChild(yo`<option value=${address}>${address}</option>`)
+      } else {
+        modalDialogCustom.alert('Cannot create an account: ' + error)
+      }
+    })
+  }
   var el = yo`
     <div class="${css.settings}">
       <div class="${css.crow}">
@@ -562,6 +576,7 @@ function settings (container, appAPI, appEvents) {
         <div class="${css.col1_1}">Account</div>
         <select name="txorigin" class="${css.select}" id="txorigin"></select>
           ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
+          <i class="fa fa-plus-square-o ${css.createAccount}" aria-hidden="true" onclick=${newAccount} title="Create a new account"></i>
       </div>
       <div class="${css.crow}">
         <div class="${css.col1_1}">Gas limit</div>

src/app/tabs/settings-tab.js

@@ -100,18 +100,17 @@ function SettingsTab (container, appAPI, appEvents, opts) {
           <select class="${css.select}" id="versionSelector"></select>
         </div>
       </div>
+      <div class="${css.info}">
+      <div class=${css.title}>General settings</div>
         <div class="${css.crow}">
-        <select class="${css.select}" id="versionSelector"></select>
+          <div>${optionVM}</div>
+          <span class="${css.checkboxText}">Always use Ethereum VM at Load</span>
         </div>
         <div class="${css.crow}">
           <div><input id="editorWrap" type="checkbox"></div>
           <span class="${css.checkboxText}">Text Wrap</span>
         </div>
         <div class="${css.crow}">
-        <div>${optionVM}</div>
-        <span class="${css.checkboxText}">Always use VM at Load</span>
-      </div>
-      <div class="${css.crow}">
           <div><input id="optimize" type="checkbox"></div>
           <span class="${css.checkboxText}">Enable Optimization</span>
         </div>
@@ -125,26 +124,6 @@ function SettingsTab (container, appAPI, appEvents, opts) {
         Remix never persist any passphrase.
         </div>
       </div>
-      <hr>
-      <h4 class="${css.heading}">Themes ( Selecting a theme will trigger a page reload )</h4>
-      <div class="${css.crow}">
-        <input class="${css.col1}" name="theme" id="themeLight" type="radio">
-        <label for="themeLight">Light Theme</label>
-      </div>
-      <div class="${css.info}">
-      <div class=${css.title}>General settings</div>
-        <div class="${css.crow}">
-          <div>${optionVM}</div>
-          <span class="${css.checkboxText}">Always use Ethereum VM at Load</span>
-        </div>
-        <div class="${css.crow}">
-          <div><input id="editorWrap" type="checkbox"></div>
-          <span class="${css.checkboxText}">Text Wrap</span>
-        </div>
-        <div class="${css.crow}">
-          <div><input id="optimize" type="checkbox"></div>
-          <span class="${css.checkboxText}">Enable Optimization</span>
-        </div>
       </div>
       <div class="${css.info}">
         <div class=${css.title}>Themes</div>

src/app/ui/modal-dialog-custom.js

@@ -17,6 +17,33 @@ module.exports = {
   promptPassphrase: function (title, text, inputValue, ok, cancel) {
     prompt(title, text, true, inputValue, ok, cancel)
   },
+  promptPassphraseCreation: function (ok, cancel) {
+    var text = 'Please provide a Passphrase for the account creation'
+    var input = yo`<div>
+      <input id="prompt1" type="password" name='prompt_text' class="${css['prompt_text']}" >
+      <br>
+      <br>
+      <input id="prompt2" type="password" name='prompt_text' class="${css['prompt_text']}" >
+    </div>`
+    modal(null, yo`<div>${text}<div>${input}</div></div>`,
+      {
+        fn: () => {
+          if (typeof ok === 'function') {
+            if (input.querySelector('#prompt1').value === input.querySelector('#prompt2').value) {
+              ok(null, input.querySelector('#prompt1').value)
+            } else {
+              ok('Passphase does not match')
+            }
+          }
+        }
+      },
+      {
+        fn: () => {
+          if (typeof cancel === 'function') cancel()
+        }
+      }
+    )
+  },
   promptMulti: function ({ title, text, inputValue }, ok, cancel) {
     if (!inputValue) inputValue = ''
     var input = yo`<textarea id="prompt_text" class=${css.prompt_text} rows="4" cols="50"></textarea>`

src/universal-dapp.js

@@ -15,6 +15,7 @@ var txExecution = require('./app/execution/txExecution')
 var helper = require('./lib/helper')
 var executionContext = require('./execution-context')
 var copyToClipboard = require('./app/ui/copy-to-clipboard')
+var modalCustom = require('./app/ui/modal-dialog-custom')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
@@ -190,14 +191,20 @@ UniversalDApp.prototype.newAccount = function (password, cb) {
     if (!this._api.personalMode()) {
       return cb('Not running in personal mode')
     }
-    executionContext.web3().personal.newAccount(password, cb)
+    modalCustom.promptPassphraseCreation((error, passphrase) => {
+      if (error) {
+        modalCustom.alert(error)
+      } else {
+        executionContext.web3().personal.newAccount(passphrase, cb)
+      }
+    }, () => {})
   } else {
     var privateKey
     do {
       privateKey = crypto.randomBytes(32)
     } while (!ethJSUtil.isValidPrivate(privateKey))
-    this._addAccount(privateKey)
-    cb(null, '0x' + ethJSUtil.privateToAddress(privateKey))
+    this._addAccount(privateKey, '0x56BC75E2D63100000')
+    cb(null, '0x' + ethJSUtil.privateToAddress(privateKey).toString('hex'))
   }
 }