Refactor accounts data structure in store

app/components/Accounts.js

@@ -23,14 +23,18 @@ export default class Accounts extends Component<Props> {
   }
 
   handleChange = (value: Number) => {
-    const { web3, web3AccountsSetMain } = this.props
-    const account = web3.accounts.find(obj => obj.address === value)
+    const {
+      accounts: { all: allAccounts=[], selected: selectedAccount={} },
+      web3AccountsSetMain
+    } = this.props
+    const account = allAccounts.find(obj => obj.address === value)
     delete account.index
     web3AccountsSetMain(account)
   }
 
   copyToClipboard = () => {
-    const { web3: { selectedAccount: { address }='' } } = this.props
+    const {accounts: { all: allAccounts=[], selected: selectedAccount={} }} = this.props
+    const { address } = selectedAccount
     copy(address)
     message.success(`copied '${address}' to clipboard`)
   }
@@ -40,9 +44,8 @@ export default class Accounts extends Component<Props> {
 
   render() {
     const { convertWeiToEth } = this
-    const { web3 } = this.props
-    const { selectedAccount={} } = web3
-    const { address='' } = selectedAccount
+    const { accounts: { all: allAccounts=[], selected={} } } = this.props
+    const { address } = selected
 
     return (
       <React.Fragment>
@@ -55,7 +58,7 @@ export default class Accounts extends Component<Props> {
             onChange={this.handleChange}
           >
             {
-              web3.accounts.map((account, index) => (
+              allAccounts.map((account, index) => (
                 <Select.Option key={`account-opt-${account.address}`} value={account.address}>
                   <Tag color='green'>{convertWeiToEth(account.balance)} ETH</Tag>
                   {account.address}

app/components/Settings.js

@@ -39,9 +39,8 @@ export default class Sidebar extends Component<Props> {
   render() {
     const { Header, Content, } = Layout
     const { Title } = Typography
-
     const {
-      web3,
+      accounts: { all: allAccounts=[], selected: selectedAccount={} },
       sidebarWidth,
       rpcServer,
       compilerUrl,
@@ -105,7 +104,7 @@ export default class Sidebar extends Component<Props> {
             style={{ backgroundColor:'#fff', marginTop:'100px' }}
           >
           {
-            web3.accounts.map((account, key) => {
+            allAccounts.map((account, key) => {
               return (
                 <List.Item key={`item-${key}`} actions={[<a onClick={() => {removeAccount(account)}}>remove</a>]}>
                   <List.Item.Meta

app/components/contract-form/Constructor.js

@@ -9,7 +9,11 @@ export default class Constructor extends Component<Props> {
 
   handleSubmit = (event) => {
     event.preventDefault()
-    const { web3, file, deployContract } = this.props
+    const {
+      accounts: { all: allAccounts=[], selected: selectedAccount={} },
+      file,
+      deployContract,
+    } = this.props
     const inputFields = $(event.target).find('input')
 
     let inputs = {}
@@ -28,7 +32,7 @@ export default class Constructor extends Component<Props> {
       }
     })
 
-    deployContract({ file, inputs, account: web3.selectedAccount })
+    deployContract({ file, inputs, account: selectedAccount })
   }
 
   renderInputs = (constructorAbi) => {

app/components/contract-form/Functions.js

@@ -248,8 +248,19 @@ export default class Functions extends Component<Props> {
   */
 
   // TODO:
-  functionCallResult = (abiFunc) => {
-
+  getEncodeFunctionSignature= (abiPart) => {
+    // https://web3js.readthedocs.io/en/1.0/web3-eth-abi.html#example
+    const { accounts: { all: allAccounts=[], selected: selectedAccount={} } } = this.props
+    /*
+    const encodeFunctionSignature = web3.eth.abi.encodeFunctionSignature({
+      name: abiPart.name,
+      type: abiPart.type,
+      inputs: abiPart.inputs,
+    })
+    console.log({ encodeFunctionSignature })
+    return encodeFunctionSignature
+    */
+    return abiPart
   }
 
   render() {
@@ -263,6 +274,7 @@ export default class Functions extends Component<Props> {
         <Text strong>functions</Text>
         {
           abi.map((abiPart, key) => {
+            console.log(abiPart)
             if (abiPart.type === 'function') {
               return (
                 <Form
@@ -277,7 +289,7 @@ export default class Functions extends Component<Props> {
                   {renderEthInput(abiPart)}
                   <Button block htmlType='submit'>call</Button>
                   <Text style={{ color:'#52c41a', overflowWrap:'break-word' }}>
-                    {functionCallResults[abiPart.name]}
+                    {functionCallResults[this.getEncodeFunctionSignature(abiPart)]}
                   </Text>
                 </Form>
               )

app/reducers/web3.js → app/reducers/accounts.js

@@ -2,31 +2,27 @@
 import type { Action } from './types'
 
 import {
-  WEB3_INIT,
   WEB3_ACCOUNTS_LOAD_ALL,
   WEB3_ACCOUNTS_SET_MAIN,
   WEB3_ACCOUNTS_LOAD_BALANCES,
 } from '../constants/actions'
 
 const initialState = {
-  accounts: [],
+  all: [],
+  selected: {},
 }
 
-export default function web3(state: Object = initialState, action: Action) {
+export default function accounts(state: Object = initialState, action: Action) {
   switch (action.type) {
-    case WEB3_INIT:
-      return {
-        ...state
-      }
     case WEB3_ACCOUNTS_LOAD_ALL:
       return {
         ...state,
-        accounts: action.accounts,
+        all: action.accounts,
       }
     case WEB3_ACCOUNTS_SET_MAIN:
       return {
         ...state,
-        selectedAccount: action.account,
+        selected: action.account,
       }
     default:
       return {

app/reducers/functionCallResults.js

@@ -13,9 +13,11 @@ export default function functionCallResults(state: Object = initialState, action
     ...state,
   }
   switch (action.type) {
-    case FUNCTION_CALL_RESULTS_UPDATE:
-      newState[action.payload.functionDetails.name] = action.payload.result + ''
+    case FUNCTION_CALL_RESULTS_UPDATE: {
+      const { payload: { functionDetails, result } } = action
+      newState[functionDetails.signature] = result + ''
       return newState
+    }
     case FUNCTION_CALL_RESULTS_RESET:
       delete newState[action.functionName]
       return newState

app/reducers/index.js

@@ -2,7 +2,7 @@
 import { combineReducers } from 'redux'
 import { connectRouter } from 'connected-react-router'
 
-import web3 from './web3'
+import accounts from './accounts'
 import settings from './settings'
 import sidebar from './sidebar'
 import selectedFile from './selectedFile'
@@ -12,7 +12,7 @@ import functionCallResults from './functionCallResults'
 export default function createRootReducer(history: History) {
   return combineReducers({
     router: connectRouter(history),
-    web3,
+    accounts,
     settings,
     sidebar,
     selectedFile,

app/sagas/settings/generateRandomAccount.js

@@ -22,7 +22,7 @@ export default function* generateRandomAccount(action) {
     }
     const account = yield call(generateRandomAccountPromise)
     const query_find = { _id: 'accounts' }
-    const query_update = { $push: {accounts: account} }
+    const query_update = { $push: { accounts: account } }
     yield call(promiseDbUpdate, Settings, query_find, query_update)
     yield put({ type: WEB3_INIT })
     message.success('account created')