add password to wallet, confirmation popup update, rr update

cybercongress · Nov 27, 2018 · 5fc98bb · 5fc98bb
1 parent e58b23d
commit 5fc98bb
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 12,181 deletions.
diff --git a/package.json b/package.json
@@ -2,15 +2,15 @@
   "name": "cyb",
   "description": "Web3 browser",
   "main": "public/electron.js",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "author": {
     "name": "cybercongress",
     "email": "[email protected]"
   },
   "private": true,
   "homepage": "./",
   "dependencies": {
-    "@cybercongress/ui": "^0.0.5",
+    "@cybercongress/ui": ">=0.0.6",
     "axios": "0.18.0",
     "bech32": "1.1.3",
     "bip39": "2.5.0",

diff --git a/src/containers/Application/Application.js b/src/containers/Application/Application.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { Message } from '@cybercongress/ui';
 import { navigate, goBack } from '../../redux/browser';
 import { toggleMenu } from '../../redux/appMenu';
 import AddToAppMenuButton, { Container } from '../../components/AddToAppMenuButton/AddToAppMenuButton';
@@ -51,6 +52,17 @@ class Application extends Component {
                             <MenuButton onClick={ this.props.toggleMenu } />
                         </NavigationLeft>
                         <NavigationCenter>
+                            <Message
+                              style={{
+                                    position: 'fixed',
+                                    top: 10,
+                                    left: 75,
+                                    width: 340,
+                                }}
+                              type='info'
+                            >
+Cyb in Ethereum Mainnet may not be secure yet. We recommend to operate accounts with small balance at your own risk.
+                            </Message>
                             <NavigationContainer>
                                 {!homePage && <BackButton disabled={ !canBack } onClick={ goBack }>&#8592;</BackButton>}
                                 <Container>

diff --git a/src/containers/Application/ConfirmationPopup.js b/src/containers/Application/ConfirmationPopup.js
@@ -4,6 +4,7 @@ import web3 from 'web3';
 import ConfirmationPopup, { TxDetailsContainer } from '../../components/ConfirmationPopup/ConfirmationPopup';
 import { approve, reject, getDefaultAccountBalance, hidePending } from '../../redux/wallet';
 import Input from '../../components/Input/Input';
+import RequirePassword from './RequirePassword';
 
 class ConfirmationPopupContainer extends Component {
 
@@ -109,6 +110,12 @@ class ConfirmationPopupContainer extends Component {
 
     render() {
 
+        if (!this.props.password) {
+            return (
+                <RequirePassword />
+            );
+        }
+
         const {
             from,
             to,
@@ -176,6 +183,7 @@ export default connect(
         request: state.wallet.request,
         lastTransactionId: state.wallet.lastTransactionId,
         defaultAccountBalance: getDefaultAccountBalance(state),
+        password: state.wallet.password,
     }),
     {
         approve,

diff --git a/src/containers/Application/RequirePassword.js b/src/containers/Application/RequirePassword.js
@@ -0,0 +1,103 @@
+import React, { Component } from 'react';
+import connect from 'react-redux/es/connect/connect';
+import { Message } from '@cybercongress/ui';
+import Block, { BlockRow } from '../../components/Settings/Block';
+import { SettingLabel, SettingRow } from '../../components/Settings/Settings';
+import Input from '../../components/Input/Input';
+import Button from '../../components/Button/Button';
+import { createPassword, login } from '../../redux/wallet';
+
+class RequirePassword extends Component {
+
+    state = {
+        createPassword: false,
+    };
+
+    login = () => {
+        const password = this.password.value;
+
+        this.props.setPassword(password);
+    };
+
+    setPassord = () => {
+        this.setState({ createPassword: true });
+    };
+
+    cancel = () => {
+        this.setState({ createPassword: false });
+    };
+
+    createPassword = () => {
+        const password1 = this.password1.value;
+        const password2 = this.password2.value;
+
+        if (password1 === password2) {
+            this.props.createPassword(password1);
+        }
+    };
+
+    render() {
+        const { incorrectPassword } = this.props;
+        const { createPassword } = this.state;
+
+        return (
+            <Block style={ { width: 400 } }>
+                {createPassword ? (
+                    <div>
+                        <BlockRow key='create1'>
+                            <SettingRow>
+                                <SettingLabel>password</SettingLabel>
+                                <Input type='password' inputRef={ node => this.password1 = node } />
+                            </SettingRow>
+                        </BlockRow>
+                        <BlockRow key='create2'>
+                            <SettingRow>
+                                <SettingLabel>confirm password</SettingLabel>
+                                <Input type='password' inputRef={ node => this.password2 = node } />
+                            </SettingRow>
+                        </BlockRow>
+                        <BlockRow>
+                            <div style={ {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                            } }
+                            >
+                                <Button onClick={ this.cancel }>cancel</Button>
+                                <Button onClick={ this.createPassword } color='green'>create</Button>
+                            </div>
+                        </BlockRow>
+                    </div>
+                ) : (
+                    <div>
+                        {incorrectPassword && (
+                            <BlockRow>
+                                <Message type='error'>incorrect password</Message>
+                            </BlockRow>
+                        )}
+                        <BlockRow>
+                            <SettingRow key='login'>
+                                <SettingLabel>password</SettingLabel>
+                                <Input type='password' inputRef={ node => this.password = node } />
+                            </SettingRow>
+                        </BlockRow>
+                        <BlockRow>
+                            <div style={ {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                            } }
+                            >
+                                <Button onClick={ this.setPassord }>set passord</Button>
+                                <Button onClick={ this.login } color='green'>login</Button>
+                            </div>
+                        </BlockRow>
+                    </div>
+                )}
+            </Block>
+        );
+    }
+}
+
+export default connect(state => ({
+    password: state.wallet.password,
+    incorrectPassword: state.wallet.incorrectPassword,
+}), { setPassword: login, createPassword })(RequirePassword);
diff --git a/src/containers/Wallet/index.js b/src/containers/Wallet/index.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
+import { Message } from '@cybercongress/ui';
 import EthAccounts from './EthAccounts';
 import ETHImport from './ETHImport';
 import EthSend from './EthSend';
@@ -15,20 +16,12 @@ import { WalletContainer } from '../../components/Wallet/Wallet';
 import WalletLauout, { WalletSidebar, WalletContent } from '../../components/Wallet/WalletLauout/WalletLauout';
 import WalletTabs, { WalletTab } from '../../components/Wallet/WalletTabs/WalletTabs';
 
-import Block, { BlockRow, RowItem } from '../../components/Settings/Block';
-import {
-    SettingLabel, SettingRow,
-} from '../../components/Settings/Settings';
-import Input from '../../components/Input/Input';
-import Button from '../../components/Button/Button';
-import { setPassword, createPassword } from '../../redux/wallet';
-import { Message } from '@cybercongress/ui';
+import RequirePassword from '../Application/RequirePassword';
 
 class Page extends Component {
     state = {
         tab: 'eth',
         menu: 'accounts',
-        createPassword: false
     };
 
     select = (tab) => {
@@ -37,87 +30,16 @@ class Page extends Component {
 
     selectMenu = (menu) => {
         this.setState({ menu });
-    }
-
-    login = () => {
-        const password = this.password.value;
-        this.props.setPassword(password);
-    }
-
-    setPassord = () => {
-        this.setState({ createPassword: true });
-    }
-
-    cancel = () => {
-        this.setState({ createPassword: false });
-    }
-
-    createPassword = () => {
-        const password1 = this.password1.value;
-        const password2 = this.password2.value;
-        if (password1 === password2) {
-            this.props.createPassword(password1);
-        }
-    }
+    };
 
     render() {
-        const { password, incorrectPassword } = this.props;
-        const { createPassword } = this.state;
+        const { password } = this.props;
 
         if (!password) {
             return (
                 <WalletContainer>
                     <Titile>/Set passord</Titile>
-                    <Block style={{ width: 400 }}>
-                        {createPassword ? (
-                            <div>
-                                <BlockRow key={'create1'}>
-                                    <SettingRow>
-                                        <SettingLabel>password</SettingLabel>
-                                        <Input inputRef={ node => this.password1 = node }/>
-                                    </SettingRow>
-                                </BlockRow>
-                                <BlockRow key={'create2'}>
-                                    <SettingRow>
-                                        <SettingLabel>confirm password</SettingLabel>
-                                        <Input inputRef={ node => this.password2 = node }/>
-                                    </SettingRow>
-                                </BlockRow>
-                                <BlockRow>
-                                    <div style={{
-                                        display: 'flex',
-                                        justifyContent: 'space-between'
-                                    }}>
-                                        <Button onClick={this.cancel}>cancel</Button>
-                                        <Button onClick={this.createPassword} color={'green'}>create</Button>
-                                    </div>
-                                </BlockRow>
-                            </div>
-                            ) : (
-                            <div>
-                                {incorrectPassword && (
-                                    <BlockRow>
-                                        <Message type={'error'}>incorrect password</Message>
-                                    </BlockRow>
-                                )}
-                                <BlockRow>
-                                    <SettingRow key={'login'}>
-                                        <SettingLabel>password</SettingLabel>
-                                        <Input inputRef={ node => this.password = node }/>
-                                    </SettingRow>
-                                </BlockRow>
-                                <BlockRow>
-                                    <div style={{
-                                        display: 'flex',
-                                        justifyContent: 'space-between'
-                                    }}>
-                                        <Button onClick={this.setPassord}>set passord</Button>
-                                        <Button onClick={this.login} color={'green'}>login</Button>
-                                    </div>
-                                </BlockRow>
-                            </div>
-                            )}
-                    </Block>
+                    <RequirePassword />
                 </WalletContainer>
             );
         }
@@ -217,8 +139,6 @@ send tokens
     }
 }
 
-
 export default connect(state => ({
     password: state.wallet.password,
-    incorrectPassword: state.wallet.incorrectPassword
-}), { setPassword, createPassword })(Page);
+}))(Page);
diff --git a/src/redux/rootRegistry.js b/src/redux/rootRegistry.js
@@ -23,11 +23,11 @@ const initState = {
             protocol: 'ipfs',
         },
         chaingear: {
-            hash: 'QmNUfwVQoZsXoFVQCaxszm1AEEyx1i5eZRw1Jcvs53rfQB',
+            hash: 'QmQcarEP3xofGtzmUYeFNihVNyzfLqybzCZASp1TT7TpSF',
             protocol: 'ipfs',
         },
         dragons: {
-            hash: 'QmZt8EytibMPGur5TaVxv2JwzeMP1X6tGDbp9KpwhvFKNm',
+            hash: 'QmYgxz2Tb74yBeF5ms4rN3N2QFy7cd27iJpYKq2bv6BmCn',
             protocol: 'ipfs',
         },
     },

diff --git a/src/redux/wallet.js b/src/redux/wallet.js
@@ -1,6 +1,7 @@
 import Web3 from 'web3';
 import axios from 'axios';
 import Cyber from '../cyber/Cyber';
+import { navigate } from './browser';
 
 const initState = {
     accounts: [],
@@ -10,7 +11,7 @@ const initState = {
     lastTransactionId: null,
 
     password: null,
-    incorrectPassord: false
+    incorrectPassword: false,
 };
 
 export const reducer = (state = initState, action) => {
@@ -61,12 +62,12 @@ export const reducer = (state = initState, action) => {
         };
     }
 
-        case 'SET_ETH_PASSWORD_FAIL': {
-            return {
-                ...state,
-                incorrectPassword: true
-            }
-        }
+    case 'SET_ETH_PASSWORD_FAIL': {
+        return {
+            ...state,
+            incorrectPassword: true
+        };
+    }
 
     default:
         return state;
@@ -361,6 +362,11 @@ export const init = endpoint => (dispatch, getState) => {
         getAccounts(cb) {
             // show address with low and upper literal
             // const accounts = Object.keys(__accounts).map(address => __accounts[address].address.toLowerCase());
+
+            if (!getState().wallet.password) {
+                dispatch(navigate('wallet.cyb'));
+            }
+
             const accounts = getState().wallet.defaultAccount ? [getState().wallet.defaultAccount.toLowerCase()] : [];
 
             cb(null, accounts);
@@ -426,7 +432,7 @@ export const onCopyKey = (address) => (dispatch, getState) => {
     });
 }
 
-export const setPassword = (password) => (dispatch, getState) => {
+export const login = (password) => (dispatch, getState) => {
     try {
         web3.eth.accounts.wallet.load(password);
         if (web3.eth.accounts.wallet.length === 0) {
@@ -453,6 +459,6 @@ export const createPassword = (password) => (dispatch, getState) => {
     });
     dispatch(createAccount());
 
-    // dispatch(setPassword(password));
+    // dispatch(login(password));
     // web3.eth.accounts.wallet.save(password);
 }