Merge branch 'master' into fix-openzeppelin

SuperblocksHQ · Jan 15, 2019 · a0b3180 · a0b3180
2 parents 6ce687a + fe869e4
commit a0b3180
Show file tree

Hide file tree

Showing 50 changed files with 519 additions and 480 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,8 @@
+{
+    "globals": {
+        "web3": true,
+        "Web3": true,
+        "process": true,
+        "module": true
+    }
+}
diff --git a/config/eslint/eslint.json b/config/eslint/eslint.json
@@ -132,8 +132,6 @@
         "yield-star-spacing": "error",
         "yoda": "error",
 
-        //
-        // Disable options that have to do with style
         "arrow-body-style": "off",
         "capitalized-comments": "off",
         "class-methods-use-this": "off",

diff --git a/src/actions/index.js b/src/actions/index.js
@@ -1,6 +1,6 @@
 export * from './app.actions';
 export * from './panes.actions';
-export * from './project.actions';
+export * from './projects.actions';
 export * from './explorer.actions';
 export * from './sidePanels.actions';
 export * from './settings.actions';

diff --git a/src/actions/project.actions.js → src/actions/projects.actions.js b/src/actions/project.actions.js → src/actions/projects.actions.js
@@ -14,35 +14,42 @@
 // You should have received a copy of the GNU General Public License
 // along with Superblocks Lab.  If not, see <http://www.gnu.org/licenses/>.
 
-export const projectActions = {
+export const projectsActions = {
     SELECT_PROJECT: 'SELECT_PROJECT',
     selectProject(project) {
         return {
-            type: projectActions.SELECT_PROJECT,
+            type: projectsActions.SELECT_PROJECT,
             data: project
         };
     },
+
+    SET_ENVIRONMENT: 'SET_ENVIRONMENT',
+    setEnvironment(environmentName) {
+       return {
+            type: projectsActions.SET_ENVIRONMENT,
+            data: environmentName
+       };
+    },
+
     UPDATE_PROJECT_SETTINGS: 'UPDATE_PROJECT_SETTINGS',
     updateProjectSettings(projectSettings) {
         return {
-            type: projectActions.UPDATE_PROJECT_SETTINGS,
+            type: projectsActions.UPDATE_PROJECT_SETTINGS,
             data: projectSettings
         };
     },
     UPDATE_PROJECT_SETTINGS_SUCCESS: 'UPDATE_PROJECT_SETTINGS_SUCCESS',
     updateProjectSettingsSuccess(newProjectSettings) {
         return {
-            type: projectActions.UPDATE_PROJECT_SETTINGS_SUCCESS,
+            type: projectsActions.UPDATE_PROJECT_SETTINGS_SUCCESS,
             data: newProjectSettings,
         };
     },
     UPDATE_PROJECT_SETTINGS_FAIL: 'UPDATE_PROJECT_SETTINGS_FAIL',
     updateProjectSettingsFail(error) {
         return {
-            type: projectActions.UPDATE_PROJECT_SETTINGS_FAIL,
+            type: projectsActions.UPDATE_PROJECT_SETTINGS_FAIL,
             error: error
         };
     }
-}
-
-
+};
diff --git a/...ccountSelector/account/accountSelector.js → ...networkAccountSelector/accountSelector.js b/...ccountSelector/account/accountSelector.js → ...networkAccountSelector/accountSelector.js
@@ -15,23 +15,16 @@
 // along with Superblocks Lab.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as accountUtils from '../../../utils/accounts';
-import Networks from '../../../networks';
 import classnames from 'classnames';
-import { DropdownContainer } from '../../common';
-import style from '../style.less';
-import AccountDropdown from './acountDropdown';
-import {
-    IconDropdown,
-    IconLock,
-    IconLockOpen,
-    IconMetamask,
-    IconMetamaskLocked,
-    IconPublicAddress,
-} from '../../icons';
-
-export default class AccountSelector extends Component {
+import PropTypes from 'prop-types';
+import { DropdownContainer } from '../common/dropdown';
+import Networks from '../../networks';
+import * as accountUtils from '../../utils/accounts';
+import style from './style.less';
+import { IconDropdown, IconLock, IconLockOpen, IconMetamask, IconMetamaskLocked, IconPublicAddress } from '../icons';
+import { AccountsList } from './accountsList';
+
+export class AccountSelector extends Component {
     state = {
         balances: {}
     }
@@ -46,7 +39,7 @@ export default class AccountSelector extends Component {
 
     accountChosen = account => {
         const project = this.props.router.control.getActiveProject();
-        if (!project) return;
+        if (!project) { return; }
         const accountsItem = project.getHiddenItem('accounts');
         accountsItem.setChosen(account);
         this.props.router.main.redraw(true);
@@ -57,7 +50,7 @@ export default class AccountSelector extends Component {
         e.stopPropagation();
 
         const project = this.props.router.control.getActiveProject();
-        if (!project) return;
+        if (!project) { return; }
 
         const accountsItem = project.getHiddenItem('accounts');
 
@@ -71,19 +64,19 @@ export default class AccountSelector extends Component {
         e.stopPropagation();
 
         const project = this.props.router.control.getActiveProject();
-        if (!project) return;
+        if (!project) { return; }
 
-        if (index == 0) {
+        if (index === 0) {
             alert('You cannot delete the default account.');
             return;
         }
 
-        if (!confirm('Are you sure to delete account?')) return;
+        if (!confirm('Are you sure to delete account?')) { return; }
 
         const accountsItem = project.getHiddenItem('accounts');
 
         const account = accountsItem.getChildren()[index];
-        const isCurrent = account.getName() == project.getAccount();
+        const isCurrent = account.getName() === project.getAccount();
 
         if (isCurrent) {
             accountsItem.setChosen(null);
@@ -99,7 +92,7 @@ export default class AccountSelector extends Component {
         e.preventDefault();
         e.stopPropagation();
         const project = this.props.router.control.getActiveProject();
-        if (!project) return;
+        if (!project) { return; }
         project.addAccount(() => {
             // TODO: how to open new item?
             this.props.router.main.redraw(true);
@@ -120,9 +113,7 @@ export default class AccountSelector extends Component {
         const accountName = project.getAccount();
         const accountsItem = project.getHiddenItem('accounts');
         const accountItem = accountsItem.getByName(accountName);
-        const wallet = this.props.functions.wallet;
-
-        return accountUtils.getAccountInfo(project, accountItem, wallet);
+        return accountUtils.getAccountInfo(project, accountItem, this.props.functions.wallet, this.props.selectedEnvironment);
     };
 
     accountBalance = () => {
@@ -149,9 +140,9 @@ export default class AccountSelector extends Component {
 
     updateBalances = () => {
         const project = this.props.router.control.getActiveProject();
-        if (!project) return {};
+        if (!project) { return {}; }
 
-        if (this.updateBalanceBusy) return;
+        if (this.updateBalanceBusy) { return; }
         this.updateBalanceBusy = true;
 
         const { network, address } = this.accountType();
@@ -187,11 +178,10 @@ export default class AccountSelector extends Component {
         e.preventDefault();
 
         const project = this.props.router.control.getActiveProject();
-        const chosenEnv = project.getEnvironment();
         const accountName = project.getAccount();
         const accountsItem = project.getHiddenItem('accounts');
         const accountItem = accountsItem.getByName(accountName);
-        const walletName = accountItem.getWallet(chosenEnv);
+        const walletName = accountItem.getWallet(this.props.selectedEnvironment);
 
         this.props.functions.wallet.openWallet(walletName, null, status => {
             if (status === 0) {
@@ -202,22 +192,22 @@ export default class AccountSelector extends Component {
 
     render() {
         const project = this.props.router.control.getActiveProject();
-        if (!project) return (<div/>);
+        if (!project) { return (<div/>); }
         const account = project.getAccount();
         const { accountType, isLocked, network, address } = this.accountType();
-        if (!network) return (<div/>);
+        if (!network) { return (<div/>); }
         const accountBalance = this.accountBalance();
         var accountIcon;
 
-        if (accountType == 'metamask') {
+        if (accountType === 'metamask') {
             if (isLocked) {
                 accountIcon = (
                     <IconMetamaskLocked alt="locked metamask account" />
                 );
             } else {
                 accountIcon = <IconMetamask alt="available metamask account" />;
             }
-        } else if (accountType == 'wallet') {
+        } else if (accountType === 'wallet') {
             if (isLocked) {
                 accountIcon = (
                     <IconLock alt="locked wallet account" size="xs" />
@@ -227,15 +217,16 @@ export default class AccountSelector extends Component {
                     <IconLockOpen alt="open wallet account" size="xs" />
                 );
             }
-        } else if (accountType == 'pseudo') {
+        } else if (accountType === 'pseudo') {
             accountIcon = (
                 <IconPublicAddress alt="pseudo account with only a public address" />
             );
         }
         return (
             <DropdownContainer
                 dropdownContent={
-                    <AccountDropdown
+                    <AccountsList
+                        environment={this.props.selectedEnvironment}
                         router={this.props.router}
                         onAccountChosen={this.accountChosen}
                         onAccountEdit={this.accountEdit}

diff --git a/...AccountSelector/account/acountDropdown.js → ...ts/networkAccountSelector/accountsList.js b/...AccountSelector/account/acountDropdown.js → ...ts/networkAccountSelector/accountsList.js
@@ -17,21 +17,17 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import Tooltip from '../tooltip';
+import style from './style.less';
 import copy from 'copy-to-clipboard';
-import * as accountUtils from '../../../utils/accounts';
-import Tooltip from '../../tooltip';
-import style from '../style.less';
-import {
-    IconTrash,
-    IconEdit,
-    IconCopy,
-} from '../../icons';
+import * as accountUtils from '../../utils/accounts';
+import { IconTrash, IconEdit, IconCopy } from '../icons';
 
-export default class AccountDropdown extends Component {
+export class AccountsList extends Component {
     copyAddress = str => {
         copy(str);
     }
-
+    
     render() {
         var accounts, chosenAccount;
         const project = this.props.router.control.getActiveProject();
@@ -54,15 +50,21 @@ export default class AccountDropdown extends Component {
         const renderedAccounts = accounts.map((account, index) => {
             const cls = {};
             cls[style.accountLink] = true;
-            if (account.getName() == chosenAccount)
+            if (account.getName() === chosenAccount) {
                 cls[style.accountLinkChosen] = true;
+            }
 
-            var address = '';
+            let address = '';
             if (this.props.functions.EVM.isReady()) {
-                const accountInfo = accountUtils.getAccountInfo(this.props.router.control.getActiveProject(), account, this.props.functions.wallet);
+                const accountInfo = accountUtils.getAccountInfo(
+                    this.props.router.control.getActiveProject(),
+                    account,
+                    this.props.functions.wallet,
+                    this.props.environment);
                 address = accountInfo.address;
             }
-            var deleteButton;
+
+            let deleteButton;
             if (index !== 0) {
                 deleteButton = (
                     <button
@@ -97,7 +99,7 @@ export default class AccountDropdown extends Component {
                     >
                         <div className={style.nameContainer}>
                             <div>{account.getName()}</div>
-                                <div className={style.address}>{formattedAddress}</div>
+                            <div className={style.address}>{formattedAddress}</div>
                         </div>
                         <div className={style.actionsContainer}>
                             <button
@@ -146,7 +148,8 @@ export default class AccountDropdown extends Component {
     }
 }
 
-AccountDropdown.propTypes = {
+AccountsList.propTypes = {
+    environment: PropTypes.string, 
     functions: PropTypes.object.isRequired,
     onAccountChosen: PropTypes.func.isRequired,
     onAccountEdit: PropTypes.func.isRequired,

diff --git a/src/components/networkAccountSelector/index.js b/src/components/networkAccountSelector/index.js
@@ -15,23 +15,47 @@
 // along with Superblocks Lab.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
 import style from './style.less';
-import AccountSelector from './account/accountSelector';
-import NetworkSelector from './network/networkSelector';
-import {
-    IconDeployGreen,
-} from '../icons';
+import { IconDeployGreen } from '../icons';
+import OnlyIf from '../onlyIf';
+import { NetworkSelector } from './networkSelector';
+import { AccountSelector } from './accountSelector';
+import { projectsActions } from '../../actions';
 
-export default class NetworkAcccountSelector extends Component {
+class NetworkAccountSelector extends Component {
     render() {
-        let { ...props } = this.props;
+        const { selectedProject, onNetworkSelected } = this.props;
         return (
-            <div className={style.container}>
-                <IconDeployGreen />
-                <NetworkSelector {...props} />
-                <div className={style.separator} />
-                <AccountSelector {...props} />
-            </div>
+            <OnlyIf test={Boolean(selectedProject.id)}>
+                <div className={style.container}>
+                    <IconDeployGreen />
+
+                    <NetworkSelector 
+                        selectedNetwork={selectedProject.selectedEnvironment}
+                        networks={selectedProject.environments}
+                        onNetworkSelected={onNetworkSelected} />
+
+                    <div className={style.separator} />
+
+                    <AccountSelector {...this.props} selectedEnvironment={selectedProject.selectedEnvironment.name} />
+                </div>
+            </OnlyIf>
         );
     }
 }
+
+const mapStateToProps = state => ({
+    selectedProject: state.projects.selectedProject,
+});
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onNetworkSelected(environment) {
+            dispatch(projectsActions.setEnvironment(environment));
+        }
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(NetworkAccountSelector);