feat: add mnemonic phrase generation, closes #143

app/components/card.tsx

@@ -13,6 +13,7 @@ export const Card: React.FC<CardProps> = ({ title, children, ...rest }) => {
       borderColor="#E5E5EC"
       boxShadow="mid"
       textAlign="center"
+      width="100%"
       {...rest}
     >
       <Flex
@@ -26,9 +27,9 @@ export const Card: React.FC<CardProps> = ({ title, children, ...rest }) => {
           {title}
         </Text>
       </Flex>
-      <Box px={10} py={5}>
-        <Text>{children}</Text>
-      </Box>
+      <Flex alignItems="center" height="112px">
+        {children}
+      </Flex>
     </Box>
   );
 };

app/components/seed-textarea.tsx

@@ -2,9 +2,10 @@ import styled from 'styled-components';
 
 export const SeedTextarea = styled.textarea`
   width: 100%;
+  height: 80px;
   resize: none;
+  overflow: visible;
   text-align: center;
-  overflow: hidden;
   &:focus {
     outline: 0;
   }

app/main.dev.ts

@@ -42,7 +42,6 @@ const installExtensions = async () => {
   const installer = require('electron-devtools-installer');
   const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
   const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];
-
   return Promise.all(
     extensions.map(name => installer.default(installer[name], forceDownload))
   ).catch(console.log);

app/pages/onboarding/04-generating-secret/generating-secret.tsx

@@ -1,14 +1,16 @@
 import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { Spinner } from '@blockstack/ui';
 
 import routes from '../../../constants/routes.json';
 import { Onboarding, OnboardingTitle } from '../../../components/onboarding';
 
-const GENERATION_TIME = 2_500;
+const GENERATION_TIME = 1_500;
 
 export const GeneratingSecret: React.FC = () => {
   const history = useHistory();
+  const dispatch = useDispatch();
 
   useEffect(() => {
     setTimeout(() => history.push(routes.SECRET_KEY), GENERATION_TIME);

app/store/configureStore.dev.ts

@@ -20,11 +20,11 @@ declare global {
   }
 }
 
-const history = createHashHistory();
+export const history = createHashHistory();
 
 const rootReducer = createRootReducer(history);
 
-const configureStore = (initialState?: counterStateType) => {
+export const configureStore = (initialState?: counterStateType) => {
   // Redux Configuration
   const middleware = [];
   const enhancers = [];
@@ -74,5 +74,3 @@ const configureStore = (initialState?: counterStateType) => {
 
   return store;
 };
-
-export default { configureStore, history };

app/store/configureStore.prod.ts

@@ -5,13 +5,11 @@ import { routerMiddleware } from 'connected-react-router';
 import createRootReducer from './reducers';
 import { Store, counterStateType } from './reducers/types';
 
-const history = createHashHistory();
+export const history = createHashHistory();
 const rootReducer = createRootReducer(history);
 const router = routerMiddleware(history);
 const enhancer = applyMiddleware(thunk, router);
 
-function configureStore(initialState?: counterStateType): Store {
+export function configureStore(initialState?: counterStateType): Store {
   return createStore(rootReducer, initialState, enhancer);
 }
-
-export default { configureStore, history };

app/store/configureStore.ts

@@ -1,5 +1,5 @@
-import configureStoreDev from './configureStore.dev';
-import configureStoreProd from './configureStore.prod';
+import * as configureStoreDev from './configureStore.dev';
+import * as configureStoreProd from './configureStore.prod';
 
 const selectedConfigureStore =
   process.env.NODE_ENV === 'production' ? configureStoreProd : configureStoreDev;

app/store/keys/index.ts

@@ -0,0 +1,2 @@
+export * from './keys.actions';
+export * from './keys.reducer';

package.json

@@ -132,14 +132,15 @@
     "@blockstack/eslint-config": "1.0.5",
     "@blockstack/prettier-config": "0.0.6",
     "@commitlint/config-conventional": "8.3.4",
+    "@types/bcryptjs": "2.4.2",
     "@types/css-font-loading-module": "0.0.4",
     "@types/enzyme": "3.10.5",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/history": "4.7.5",
+    "@types/history": "4.7.6",
     "@types/jest": "25.2.3",
-    "@types/node": "14.0.9",
-    "@types/react": "16.9.17",
-    "@types/react-dom": "16.9.7",
+    "@types/node": "14.0.12",
+    "@types/react": "16.9.35",
+    "@types/react-dom": "16.9.8",
     "@types/react-redux": "7.1.9",
     "@types/react-router": "5.1.7",
     "@types/react-router-dom": "5.1.5",
@@ -151,22 +152,22 @@
     "@types/vfile-message": "2.0.0",
     "@types/webpack": "4.41.17",
     "@types/zxcvbn": "4.4.0",
-    "@typescript-eslint/eslint-plugin": "3.1.0",
-    "@typescript-eslint/parser": "3.1.0",
+    "@typescript-eslint/eslint-plugin": "3.2.0",
+    "@typescript-eslint/parser": "3.2.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.0.1",
     "babel-loader": "8.1.0",
     "babel-plugin-dev-expression": "0.2.2",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "browserslist-config-erb": "0.0.1",
-    "chalk": "4.0.0",
+    "chalk": "4.1.0",
     "concurrently": "5.2.0",
-    "cross-env": "7.0.0",
+    "cross-env": "7.0.2",
     "cross-spawn": "7.0.3",
     "css-loader": "3.5.3",
     "detect-port": "1.3.0",
-    "electron": "9.0.1",
+    "electron": "8.3.1",
     "electron-builder": "22.7.0",
     "electron-devtools-installer": "3.0.0",
     "electron-rebuild": "1.11.0",
@@ -176,54 +177,56 @@
     "eslint-plugin-react-hooks": "4.0.4",
     "fbjs-scripts": "1.2.0",
     "file-loader": "6.0.0",
-    "husky": "4.2.0",
+    "husky": "4.2.5",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.0.1",
-    "lint-staged": "10.2.7",
+    "lint-staged": "10.2.9",
     "mini-css-extract-plugin": "0.9.0",
-    "node-sass": "4.13.1",
+    "node-sass": "4.14.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "prettier": "2.0.5",
-    "react-test-renderer": "16.12.0",
+    "react-test-renderer": "16.13.1",
     "redux-logger": "3.0.6",
-    "rimraf": "3.0.0",
+    "rimraf": "3.0.2",
     "sass-loader": "8.0.2",
     "sinon": "9.0.2",
-    "style-loader": "1.1.3",
-    "terser-webpack-plugin": "3.0.2",
-    "typed-css-modules-webpack-plugin": "0.1.2",
-    "typescript": "3.9.3",
+    "style-loader": "1.2.1",
+    "terser-webpack-plugin": "3.0.3",
+    "typed-css-modules-webpack-plugin": "0.1.3",
+    "typescript": "3.9.5",
     "url-loader": "4.1.0",
     "webpack": "4.43.0",
     "webpack-bundle-analyzer": "3.8.0",
     "webpack-cli": "3.3.11",
     "webpack-dev-server": "3.11.0",
     "webpack-merge": "4.2.2",
-    "yarn": "1.21.1"
+    "yarn": "1.22.4"
   },
   "dependencies": {
     "@blockstack/ui": "1.6.1",
     "@hot-loader/react-dom": "16.13.0",
+    "@reduxjs/toolkit": "1.3.6",
+    "bcryptjs": "2.4.3",
     "bignumber.js": "9.0.0",
     "connected-react-router": "6.8.0",
     "core-js": "3.6.5",
     "devtron": "1.4.0",
     "electron-debug": "3.1.0",
-    "electron-log": "4.2.0",
+    "electron-log": "4.2.1",
     "electron-updater": "4.3.1",
-    "eslint": "7.1.0",
+    "eslint": "7.2.0",
     "eslint-plugin-import-helpers": "1.0.2",
     "history": "4.10.1",
     "minimist": "1.2.5",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
-    "react-hot-loader": "4.12.19",
-    "react-redux": "7.1.3",
-    "react-router": "5.1.2",
-    "react-router-dom": "5.1.2",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-hot-loader": "4.12.21",
+    "react-redux": "7.2.0",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
     "redux": "4.0.5",
     "redux-thunk": "2.3.0",
-    "source-map-support": "0.5.16",
+    "source-map-support": "0.5.19",
     "styled-components": "5.1.1",
     "zxcvbn": "4.4.2"
   },