Implement add new account for JVM

libs/remix-ui/run-tab/src/lib/actions/index.ts

@@ -3,7 +3,7 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { shortenAddress } from '@remix-ui/helper'
-import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, hidePopUp, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, hidePopUp, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setMatchPassphrase, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue } from './payload'
 import { RunTab } from '../types/run-tab'
 
 let plugin: RunTab, dispatch: React.Dispatch<any>
@@ -74,8 +74,8 @@ const setupEvents = () => {
   //   fillAccountsList()
   // }, 1000)
   // fillAccountsList()
-  setTimeout(() => {
+  setTimeout(async () => {
-    fillAccountsList()
+    await fillAccountsList()
   }, 0)
 }
 
@@ -98,18 +98,21 @@ const fillAccountsList = async () => {
     dispatch(fetchAccountsListRequest())
     const promise = plugin.blockchain.getAccounts()
 
-    promise.then((accounts: string[]) => {
+    promise.then(async (accounts: string[]) => {
       const loadedAccounts = {}
 
       if (!accounts) accounts = []
-      accounts.forEach((account) => {
+      await (Promise as any).allSettled(accounts.map((account) => {
-        plugin.blockchain.getBalanceInEther(account, (err, balance) => {
+        return new Promise((resolve, reject) => {
-          if (err) return
+          plugin.blockchain.getBalanceInEther(account, (err, balance) => {
-          const updated = shortenAddress(account, balance)
+            if (err) return reject(err)
-
+            const updated = shortenAddress(account, balance)
-          loadedAccounts[account] = updated
+
+            loadedAccounts[account] = updated
+            resolve(account)
+          })
         })
-      })
+      }))
       dispatch(fetchAccountsListSuccess(loadedAccounts))
     }).catch((e) => {
       dispatch(fetchAccountsListFailed(e.message))
@@ -206,3 +209,34 @@ export const setWeb3Endpoint = (endpoint: string) => {
 export const clearPopUp = async () => {
   dispatch(hidePopUp())
 }
+
+// eslint-disable-next-line no-undef
+export const createNewBlockchainAccount = async (cbMessage: JSX.Element) => {
+  plugin.blockchain.newAccount(
+    '',
+    (cb) => {
+      dispatch(displayNotification('Enter Passphrase', cbMessage, 'OK', 'Cancel', async () => {
+        if (plugin.REACT_API.passphrase === plugin.REACT_API.matchPassphrase) {
+          cb(plugin.REACT_API.passphrase)
+        } else {
+          return dispatch(displayNotification('Error', 'Passphase does not match', 'OK', null))
+        }
+      }, () => {}))
+    },
+    async (error, address) => {
+      if (error) {
+        return dispatch(displayPopUp('Cannot create an account: ' + error))
+      }
+      dispatch(displayPopUp(`account ${address} created`))
+      await fillAccountsList()
+    }
+  )
+}
+
+export const setPassphrasePrompt = (passphrase: string) => {
+  dispatch(setPassphrase(passphrase))
+}
+
+export const setMatchPassphrasePrompt = (passphrase: string) => {
+  dispatch(setMatchPassphrase(passphrase))
+}

libs/remix-ui/run-tab/src/lib/actions/payload.ts

@@ -115,3 +115,17 @@ export const hidePopUp = () => {
     type: 'HIDE_POPUP_MESSAGE'
   }
 }
+
+export const setPassphrase = (passphrase: string) => {
+  return {
+    type: 'SET_PASSPHRASE',
+    payload: passphrase
+  }
+}
+
+export const setMatchPassphrase = (passphrase: string) => {
+  return {
+    type: 'SET_MATCH_PASSPHRASE',
+    payload: passphrase
+  }
+}

libs/remix-ui/run-tab/src/lib/components/account.tsx

@@ -55,24 +55,7 @@ export function AccountUI (props: AccountProps) {
   }, [props.selectExEnv, props.personalMode])
 
   const newAccount = () => {
-    // dispatch createNewBlockchainAccount
+    props.createNewBlockchainAccount(passphrasePrompt())
-    // this.blockchain.newAccount(
-    //   '',
-    //   (cb) => {
-    //     modalDialogCustom.promptPassphraseCreation((error, passphrase) => {
-    //       if (error) {
-    //         return modalDialogCustom.alert(error)
-    //       }
-    //       cb(passphrase)
-    //     }, () => {})
-    //   },
-    //   (error, address) => {
-    //     if (error) {
-    //       return addTooltip('Cannot create an account: ' + error)
-    //     }
-    //     addTooltip(`account ${address} created`)
-    //   }
-    // )
   }
 
   const signMessage = () => {
@@ -122,6 +105,27 @@ export function AccountUI (props: AccountProps) {
   //   })
   }
 
+  const handlePassphrase = (e) => {
+    props.setPassphrase(e.target.value)
+  }
+
+  const handleMatchPassphrase = (e) => {
+    props.setMatchPassphrase(e.target.value)
+  }
+
+  const passphrasePrompt = () => {
+    return (
+      <div> Please provide a Passphrase for the account creation
+        <div>
+          <input id="prompt1" type="password" name='prompt_text' style={{ width: '100%' }} onInput={handlePassphrase} />
+          <br />
+          <br />
+          <input id="prompt2" type="password" name='prompt_text' style={{ width: '100%' }} onInput={handleMatchPassphrase} />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="udapp_crow">
       <label className="udapp_settingsLabel">

libs/remix-ui/run-tab/src/lib/components/card.tsx

@@ -1,36 +0,0 @@
-// eslint-disable-next-line no-use-before-define
-import React, { useRef, useState } from 'react'
-import { CardProps } from '../types'
-import '../css/card.css'
-
-export function Card (props: CardProps) {
-
-  return (
-    self._view.statusBar = yo``
-
-    function trigger (el) {
-      var body = self._view.cardBody
-      var status = self._view.statusBar
-      if (el.classList) {
-        el.classList.toggle('fa-angle-up')
-        var arrow = el.classList.toggle('fa-angle-down') ? 'up' : 'down'
-        self.event.trigger('expandCollapseCard', [arrow, body, status])
-      }
-    }
-
-    <div class="${css.cardContainer} list-group-item border-0">
-      <div class="d-flex justify-content-between align-items-center" onclick=${() => trigger(self._view.arrow)}>
-        <div class="pr-1 d-flex flex-row">
-          <div>${self._opts.title}</div>
-          <div>${self._opts.collapsedView}</div>
-        </div>
-        <div>
-          <div>
-            <i class="${css.arrow} fas fa-angle-down" onclick="${() => trigger(this)}"></i>
-          </div>
-        </div>
-    </div>
-      <div></div>
-    </div>
-  )
-}

libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx

@@ -89,7 +89,7 @@ export function SettingsUI (props: SettingsProps) {
     <div className="udapp_settings">
       <EnvironmentUI setWeb3Endpoint={props.setWeb3Endpoint} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} externalEndpoint={props.externalEndpoint} />
       <NetworkUI networkName={props.networkName} />
-      <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} />
+      <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} createNewBlockchainAccount={props.createNewBlockchainAccount} setPassphrase={props.setPassphrase} setMatchPassphrase={props.setMatchPassphrase} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
       <ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} />
     </div>

libs/remix-ui/run-tab/src/lib/reducers/runTab.ts

@@ -39,7 +39,9 @@ export interface RunTabState {
     labelCancel: string
   },
   externalEndpoint: string,
-  popup: string
+  popup: string,
+  passphrase: string,
+  matchPassphrase: string
 }
 
 export const runTabInitialState: RunTabState = {
@@ -98,7 +100,9 @@ export const runTabInitialState: RunTabState = {
     labelCancel: ''
   },
   externalEndpoint: 'http://127.0.0.1:8545',
-  popup: ''
+  popup: '',
+  passphrase: '',
+  matchPassphrase: ''
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -323,6 +327,24 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'SET_PASSPHRASE': {
+      const passphrase: string = action.payload
+
+      return {
+        ...state,
+        passphrase
+      }
+    }
+
+    case 'SET_MATCH_PASSPHRASE': {
+      const passphrase: string = action.payload
+
+      return {
+        ...state,
+        matchPassphrase: passphrase
+      }
+    }
+
     default:
       return state
   }

libs/remix-ui/run-tab/src/lib/run-tab.tsx

@@ -9,7 +9,7 @@ import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import { Modal, RunTabProps } from './types'
 import { runTabInitialState, runTabReducer } from './reducers/runTab'
-import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp } from './actions'
+import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt } from './actions'
 import './css/run-tab.css'
 
 export function RunTabUI (props: RunTabProps) {
@@ -126,7 +126,11 @@ export function RunTabUI (props: RunTabProps) {
             gasLimit={runTab.gasLimit}
             setGasFee={setGasFee}
             providers={runTab.providers}
-            setExecutionContext={setExecutionContext} />
+            setExecutionContext={setExecutionContext}
+            createNewBlockchainAccount={createNewBlockchainAccount}
+            setPassphrase={setPassphrasePrompt}
+            setMatchPassphrase={setMatchPassphrasePrompt}
+          />
           <ContractDropdownUI exEnvironment={runTab.selectExEnv} />
           <RecorderUI />
           <InstanceContainerUI />

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -36,7 +36,10 @@ export interface SettingsProps {
     error: string
   },
   setExecutionContext: (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => void,
-  externalEndpoint: string
+  externalEndpoint: string,
+  createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
+  setPassphrase: (passphrase: string) => void,
+  setMatchPassphrase: (passphrase: string) => void
 }
 
 export interface EnvironmentProps {
@@ -73,7 +76,10 @@ export interface AccountProps {
     error: string
   },
   setAccount: (account: string) => void,
-  personalMode: boolean
+  personalMode: boolean,
+  createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
+  setPassphrase: (passphrase: string) => void,
+  setMatchPassphrase: (passphrase: string) => void
 }
 
 export interface GasPriceProps {