Merge pull request #59 from quantanet/issue58

issue fix #58

Author: 0mkara

src/actions/index.ts

@@ -4,7 +4,9 @@ import {
   CLEAR_FINAL_RESULT,
   SET_DEPLOYED_RESULT,
   CLEAR_DEPLOYED_RESULT,
-  SET_CALL_RESULT
+  SET_CALL_RESULT,
+  SET_ACC_BALANCE,
+  SET_UPDATE_BALANCE
 } from "./types";
 
 export const addTestResults = (data: any) => {
@@ -42,3 +44,15 @@ export const setCallResult = (data: any) => {
     dispatch({ type: SET_CALL_RESULT, payload: data })
   }
 }
+
+export const setAccountBalance = (data: any) => {
+  return (dispatch: Function) => {
+    dispatch({ type: SET_ACC_BALANCE, payload: data })
+  }
+}
+
+export const setCurrAccChange = (data: any) => {
+  return (dispatch: Function) => {
+    dispatch({ type: SET_UPDATE_BALANCE, payload: data })
+  }
+}

src/actions/types.ts

@@ -4,3 +4,5 @@ export const CLEAR_FINAL_RESULT = "CLEAR_FINAL_RESULT"
 export const SET_DEPLOYED_RESULT = "SET_DEPLOYED_RESULT"
 export const CLEAR_DEPLOYED_RESULT = "CLEAR_DEPLOYED_RESULT"
 export const SET_CALL_RESULT = "SET_CALL_RESULT"
+export const SET_ACC_BALANCE = "SET_ACC_BALANCE"
+export const SET_UPDATE_BALANCE = "SET_UPDATE_BALANCE"

src/components/AccountsSelector/AccountsSelector.tsx

@@ -58,6 +58,20 @@ class AccountsSelector extends Component<IProps, IState> {
     this._handleAccountSelector = this._handleAccountSelector.bind(this);
   }
 
+  componentDidMount() {
+    const options: any = [];
+    const { availableAccounts } = this.props
+
+      availableAccounts.map((name: string) => {
+        const optItm: IOpt = {
+          value: name,
+          label: name
+        };
+        return options.push(optItm);
+      });
+      this.setState({ options })
+  }
+
   componentDidUpdate(prevProps: any) {
     const options: any = [];
     const { availableAccounts } = this.props

src/components/App.css

@@ -157,6 +157,10 @@
   margin: 20px auto;
 }
 
+.account_balance {
+  margin: 10px 0;
+}
+
 .account_form {
   display: flex;
   flex-direction: column;

src/components/App.tsx

@@ -7,7 +7,9 @@ import {
   clearFinalResult,
   setDeployedResult,
   clearDeployedResult,
-  setCallResult
+  setCallResult,
+  setAccountBalance,
+  setCurrAccChange
 } from "../actions";
 import "./App.css";
 import ContractCompiled from "./ContractCompiled";
@@ -29,7 +31,12 @@ interface IProps {
   setDeployedResult: (result: any) => void;
   clearDeployedResult: () => void;
   setCallResult: (result: any) => void;
+  setAccountBalance: (accData: any) => void;
+  setCurrAccChange: (accData: any) => void;
   test: any;
+  accountBalance: number,
+  accounts: string[],
+  currAccount: string
 }
 
 interface IState {
@@ -79,7 +86,7 @@ class App extends Component<IProps, IState> {
     this.handleTransactionSubmit = this.handleTransactionSubmit.bind(this);
   }
   public componentDidMount() {
-    window.addEventListener("message", event => {
+    window.addEventListener("message", async event => {
       const { data } = event;
 
       if (data.compiled) {
@@ -95,7 +102,7 @@ class App extends Component<IProps, IState> {
         if (compiled.errors && compiled.errors.length > 0) {
           this.setState({ message: compiled.errors });
         }
-        this.setState({ compiled, fileName, processMessage: "" });
+        this.setState({ compiled, fileName, processMessage: "", contractName: Object.keys(compiled.contracts[fileName])[0] });
       }
 
       if (data.processMessage) {
@@ -161,17 +168,40 @@ class App extends Component<IProps, IState> {
         this.props.setCallResult(result);
       }
       if (data.fetchAccounts) {
-        this.setState({ accounts: data.fetchAccounts.accounts, currAccount: data.fetchAccounts.accounts[0], balance: data.fetchAccounts.balance });
+        const balance = data.fetchAccounts.balance
+        const currAccount = data.fetchAccounts.accounts[0]
+        const accounts = data.fetchAccounts.accounts
+        const accData = {
+          balance,
+          currAccount,
+          accounts
+        }
+        await this.props.setAccountBalance(accData)
+        this.setState({ accounts: this.props.accounts, currAccount: this.props.currAccount, balance: this.props.accountBalance });
       }
       if(data.transactionResult) {
         this.setState({ transactionResult: data.transactionResult });
       }
       if(data.balance) {
-        this.setState({ balance: +data.balance });
+        const accData = {
+          balance: data.balance,
+          currAccount: this.state.currAccount
+        }
+        this.props.setCurrAccChange(accData)
+        this.setState({ balance: this.props.accountBalance });
       }
       // TODO: handle error message
     });
   }
+
+  componentDidUpdate() {
+    if(this.props.accounts !== this.state.accounts) {
+      this.setState({
+        accounts: this.props.accounts
+      })
+    }
+  }
+
   private handleTransactionSubmit(event: any) {
     event.preventDefault();
     const { currAccount } = this.state;
@@ -288,8 +318,7 @@ class App extends Component<IProps, IState> {
                     getSelectedAccount={this.getSelectedAccount}
                   />
                   <div className="account_balance">
-                    <label>Account Balance:</label>
-                    <pre>{balance}</pre>
+                    <b>Account Balance: </b> {balance}
                   </div>
                 </div>
               )}
@@ -312,7 +341,7 @@ class App extends Component<IProps, IState> {
                   </div>
                 </div>
               }
-              { contractName &&
+              { (compiled && contractName) &&
                 <div className="compiledOutput">
                   <div id={contractName} className="contract-container">
                     {
@@ -379,13 +408,17 @@ class App extends Component<IProps, IState> {
   }
 }
 
-function mapStateToProps({ test }: any) {
+function mapStateToProps({ test, accountStore }: any) {
+  const { accountBalance, accounts, currAccount } = accountStore
   return {
+    accountBalance,
+    accounts,
+    currAccount,
     test,
   };
 }
 
 export default connect(
   mapStateToProps,
-  { addTestResults, addFinalResultCallback, clearFinalResult, setDeployedResult, clearDeployedResult, setCallResult }
+  { addTestResults, addFinalResultCallback, clearFinalResult, setDeployedResult, setAccountBalance, setCurrAccChange, clearDeployedResult, setCallResult }
 )(App);

src/reducers/accountReducer.ts

@@ -0,0 +1,28 @@
+import { SET_ACC_BALANCE, SET_UPDATE_BALANCE } from "../actions/types"
+
+const initialState = {
+  accountBalance: 0,
+  accounts: [],
+  currAccount: ''
+};
+
+export default (state: any = initialState, action: any) => {
+  
+  switch (action.type) {
+    case SET_ACC_BALANCE:
+      return {
+        ...state,
+        accountBalance: action.payload.balance,
+        accounts: action.payload.accounts,
+        currAccount: action.payload.currAccount
+      }
+    case SET_UPDATE_BALANCE:
+      return {
+        ...state,
+        accountBalance: +action.payload.balance,
+        currAccount: action.payload.currAccount
+      }
+    default:
+      return state;
+  }
+}

src/reducers/index.ts

@@ -1,8 +1,10 @@
 import { combineReducers } from "redux";
 import  testReducer from "./testReducer";
 import compiledReducer from "./compiledReducer";
+import accountReducer from "./accountReducer"
 
 export default combineReducers({
   test: testReducer,
   compiledStore: compiledReducer,
+  accountStore: accountReducer
 });