RestoreWalletFromPrivateKey component is created to improve visual components

Author: dmernies-iohk

examples/wallet/app/Routes.js

@@ -10,7 +10,6 @@ import ChooseRestoreOrImport from './containers/ChooseRestoreOrImport';
 import Delegate from './pages/Delegate';
 import Index from './containers/Index';
 import InputKeys from './containers/InputKeys';
-import CreateSpendingPassword from './containers/CreateSpendingPassword';
 
 export default () => (
   <App>
@@ -24,10 +23,6 @@ export default () => (
         path={routes.CHOOSE_RESTORE_OR_IMPORT}
         component={ChooseRestoreOrImport}
       />
-      <Route
-        path={routes.CREATE_SPENDING_PASSWORD}
-        component={CreateSpendingPassword}
-      />
       <Route path={routes.INDEX} component={Index} />
     </Switch>
   </App>

examples/wallet/app/actions/router.js

@@ -5,16 +5,11 @@ import type { Address } from '../models';
 import routes from '../constants/routes';
 import { setAccountFromPrivateKey } from './account';
 
-import {
-  readAccountKeysFromLocalStorage,
-  isSpedingPasswordCreated
-} from '../utils/storage';
+import { readAccountKeysFromLocalStorage } from '../utils/storage';
 
 // eslint-disable-next-line import/prefer-default-export
 export const redirectToFirstAppPage = () => {
   return (dispatch: Dispatch, getState: GetState) => {
-    if (!isSpedingPasswordCreated())
-      return dispatch(push(routes.CREATE_SPENDING_PASSWORD));
     const accountKeys = readAccountKeysFromLocalStorage();
     if (accountKeys !== undefined) {
       return dispatch(setAccountFromPrivateKey(accountKeys.privateKey));

examples/wallet/app/pages/CreateSpendingPassword.js renamed to examples/wallet/app/components/RestoreWalletFromPrivateKey.js

@@ -4,26 +4,26 @@ import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
-import typeof { setAccountFromMnemonic as SetAccountFromMnemonic } from '../actions/account';
+import typeof { setAccount as SetAccount } from '../actions/account';
 
 type Props = {
-  setAccountFromMnemonic: SetAccountFromMnemonic
+  setAccount: SetAccount
 };
 
 // FIXME: this has no error handling, neither while parsing the address
 // nor when fetching the balance.
-export default ({ setAccountFromMnemonic }: Props) => {
+export default ({ setAccount }: Props) => {
   const handleSubmitCreateSpending = function handleSubmitCreateSpending(
     event
   ) {
     event.preventDefault();
     if (checkValidPassword(password, confirmPassword)) {
-      return Promise.all([setAccountFromMnemonic(password, confirmPassword)]);
+      setAccount(newPrivateKey);
     }
   };
 
   const checkValidPassword = function checkValidPassword(pass, confirmation) {
-    if (!pass) return false;
+    if (!pass && !confirmation) return true;
     if (pass.length < 8) {
       setIsValidPassword(false);
       return false;
@@ -39,6 +39,8 @@ export default ({ setAccountFromMnemonic }: Props) => {
   };
 
   const [isValidPassword, setIsValidPassword] = useState(true);
+  const [newPrivateKey, setNewPrivateKey] = useState('');
+
   const [
     arePasswordAndConfirmationEqual,
     setArePasswordAndConfirmationEqual
@@ -52,9 +54,26 @@ export default ({ setAccountFromMnemonic }: Props) => {
     <Container>
       <Form onSubmit={handleSubmitCreateSpending} className="mt-5">
         <Form.Group>
-          <Form.Label>Create a password for your encrypted storage</Form.Label>
+          <Form.Label>Private key:</Form.Label>
           <Form.Control
             required
+            type="text"
+            name="privateKey"
+            value={newPrivateKey}
+            onChange={event => setNewPrivateKey(event.target.value)}
+          />
+          <Form.Text>
+            It&apos;s a string like:
+            <br />
+            <code>
+              ed25519e_sk15psr45hyqnpwcl8xd4lv0m32prenhh8kcltgte2305h5jgynndxect9274j0am0qmmd0snjuadnm6xkgssnkn2njvkg8et8qg0vevsgnwvmpl
+            </code>
+          </Form.Text>
+          <Form.Label>
+            Create a password to store your settings securely in an encrypted
+            storage
+          </Form.Label>
+          <Form.Control
             type="password"
             id="password"
             name="password"
@@ -84,7 +103,7 @@ export default ({ setAccountFromMnemonic }: Props) => {
         </Form.Group>
         <Row className="justify-content-center">
           <Button variant="primary" type="submit">
-            Create
+            Initialize wallet using key string
           </Button>
         </Row>
       </Form>

examples/wallet/app/constants/routes.json

@@ -5,6 +5,5 @@
   "INPUT_KEYS": "/input_keys",
   "SEND": "/send",
   "STAKING": "/staking",
-  "SETTINGS": "/settings",
-  "CREATE_SPENDING_PASSWORD": "/create_spending_password"
+  "SETTINGS": "/settings"
 }

examples/wallet/app/containers/CreateSpendingPassword.js

@@ -2,10 +2,10 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import InputKeys from '../pages/InputKeys';
-import { setAccount, setAccountFromMnemonic } from '../actions/account';
+import { setAccountFromMnemonic, setAccount } from '../actions/account';
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators({ setAccount, setAccountFromMnemonic }, dispatch);
+  return bindActionCreators({ setAccountFromMnemonic, setAccount }, dispatch);
 }
 
 export default connect(

examples/wallet/app/containers/InputKeys.js

@@ -0,0 +1,14 @@
+// @flow
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import RestoreWalletFromPrivateKey from '../components/RestoreWalletFromPrivateKey';
+import { setAccount } from '../actions/account';
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({ setAccount }, dispatch);
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(RestoreWalletFromPrivateKey);

examples/wallet/app/containers/RestoreWalletFromPrivateKey.js

@@ -6,6 +6,7 @@ import Container from 'react-bootstrap/Container';
 import Tabs from 'react-bootstrap/Tabs';
 import Tab from 'react-bootstrap/Tab';
 import Row from 'react-bootstrap/Row';
+import RestoreWalletFromPrivateKey from '../components/RestoreWalletFromPrivateKey';
 import typeof {
   setAccountFromMnemonic as SetAccountFromMnemonic,
   setAccount as SetAccount
@@ -19,11 +20,7 @@ type Props = {
 
 // FIXME: this has no error handling, neither while parsing the address
 // nor when fetching the balance.
-export default ({ setAccount, setAccountFromMnemonic }: Props) => {
-  const handleSubmitKeyString = function handleSubmitKeyString(event) {
-    event.preventDefault();
-    return setAccount(newPrivateKey);
-  };
+export default ({ setAccountFromMnemonic, setAccount }: Props) => {
   const checkIsValidMnemonicPhrase = function checkIsValidMnemonicPhrase() {
     setIsMnemonicValid(isValidMnemonic(newMnemonicPhrase));
   };
@@ -40,45 +37,14 @@ export default ({ setAccount, setAccountFromMnemonic }: Props) => {
 
   const [isMnemonicValid, setIsMnemonicValid] = useState(true);
 
-  const [newPrivateKey, setNewPrivateKey] = useState('');
-
   const [newMnemonicPhrase, setNewMnemonicPhrase] = useState('');
 
   const [newMnemonicPassword, setNewMnemonicPassword] = useState('');
 
   return (
     <Tabs fill defaultActiveKey="keyString" className="justify-content-center">
       <Tab eventKey="keyString" title="Use key string">
-        <Container>
-          <Form onSubmit={handleSubmitKeyString} className="mt-5">
-            <Form.Group>
-              <Form.Label>Private key:</Form.Label>
-              <Form.Control
-                required
-                type="text"
-                name="privateKey"
-                value={newPrivateKey}
-                onChange={event => setNewPrivateKey(event.target.value)}
-              />
-              <Form.Text>
-                It&apos;s a string like:
-                <br />
-                <code>
-                  ed25519e_sk15psr45hyqnpwcl8xd4lv0m32prenhh8kcltgte2305h5jgynndxect9274j0am0qmmd0snjuadnm6xkgssnkn2njvkg8et8qg0vevsgnwvmpl
-                </code>
-              </Form.Text>
-            </Form.Group>
-            <Row className="justify-content-between">
-              {/* TODO: bind this button */}
-              <Button variant="secondary" type="button">
-                Go back
-              </Button>
-              <Button variant="primary" type="submit">
-                Initialize wallet using key string
-              </Button>
-            </Row>
-          </Form>
-        </Container>
+        <RestoreWalletFromPrivateKey setAccount={setAccount} />
       </Tab>
       <Tab eventKey="mnemonic" title="Use mnemonic phrase">
         <Container>