Generate Mnemonic Wallet (#659)

* Initial work at splitting out generate into two flows.

* Finish mnemonic flow.

* Convert keystore to state-based component. Remove all redux generate stuff. Remove generate help section. Fix styles.

* Add back button, switch to routing instead of state for generate pages.

* PR feedback.

* Alertify warning at generate. Linkify alternatives. Fix some alert link styles.

common/Root.tsx

@@ -45,6 +45,10 @@ export default class Root extends Component<Props, State> {
         <Router history={history} key={Math.random()}>
           <div>
             <Route exact={true} path="/" component={GenerateWallet} />
+            <Route path="/generate" component={GenerateWallet}>
+              <Route path="keystore" component={GenerateWallet} />
+              <Route path="mnemonic" component={GenerateWallet} />
+            </Route>
             <Route path="/help" component={Help} />
             <Route path="/swap" component={Swap} />
             <Route path="/account" component={SendTransaction}>

common/components/Header/components/Navigation.tsx

@@ -7,7 +7,7 @@ import './Navigation.scss';
 const tabs = [
   {
     name: 'NAV_GenerateWallet',
-    to: '/'
+    to: '/generate'
   },
 
   {
@@ -90,7 +90,7 @@ export default class Navigation extends Component<Props, State> {
         <div className="Navigation-scroll container">
           <ul className="Navigation-links">
             {tabs.map(link => {
-              return <NavigationLink key={link.name} link={link} />;
+              return <NavigationLink key={link.name} link={link} isHomepage={link === tabs[0]} />;
             })}
           </ul>
         </div>

common/components/Header/components/NavigationLink.tsx

@@ -10,16 +10,25 @@ interface Props extends RouteComponentProps<{}> {
     to?: string;
     external?: boolean;
   };
+  isHomepage: boolean;
 }
 
 class NavigationLink extends React.Component<Props, {}> {
   public render() {
-    const { link, location } = this.props;
+    const { link, location, isHomepage } = this.props;
+    // isActive if
+    // 1) Current path is the same as link
+    // 2) the first path is the same for both links (/account and /account/send)
+    // 3) we're at the root path and this is the "homepage" nav item
+    const isActive =
+      location.pathname === link.to ||
+      (link.to && location.pathname.split('/')[1] === link.to.split('/')[1]) ||
+      (isHomepage && location.pathname === '/');
 
     const linkClasses = classnames({
       'NavigationLink-link': true,
       'is-disabled': !link.to,
-      'is-active': location.pathname === link.to
+      'is-active': isActive
     });
     const linkLabel = `nav item: ${translateRaw(link.name)}`;
 

common/components/PrintableWallet/index.tsx

@@ -1,7 +1,7 @@
 import { PaperWallet } from 'components';
 import { IFullWallet } from 'ethereumjs-wallet';
 import React from 'react';
-import translate from 'translations';
+import { translateRaw } from 'translations';
 import printElement from 'utils/printElement';
 import { stripHexPrefix } from 'libs/values';
 
@@ -39,13 +39,13 @@ const PrintableWallet: React.SFC<{ wallet: IFullWallet }> = ({ wallet }) => {
       <PaperWallet address={address} privateKey={privateKey} />
       <a
         role="button"
-        aria-label={translate('x_Print')}
+        aria-label={translateRaw('x_Print')}
         aria-describedby="x_PrintDesc"
-        className={'btn btn-lg btn-primary'}
+        className="btn btn-lg btn-primary btn-block"
         onClick={print(address, privateKey)}
-        style={{ marginTop: 10 }}
+        style={{ margin: '10px auto 0', maxWidth: '260px' }}
       >
-        {translate('x_Print')}
+        {translateRaw('x_Print')}
       </a>
     </div>
   );

common/components/ui/NewTabLink.tsx

@@ -36,7 +36,7 @@ interface NewTabLinkProps extends AAttributes {
 
 const NewTabLink = ({ content, children, ...rest }: NewTabLinkProps) => (
   <a target="_blank" rel="noopener" {...rest}>
-    {content || children} {/* Keep content for short-hand text insertion */}
+    {content || children}
   </a>
 );
 

common/containers/Tabs/GenerateWallet/GenerateWallet.tsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import Keystore from './components/Keystore';
+import Mnemonic from './components/Mnemonic';
+import WalletTypes from './components/WalletTypes';
+import CryptoWarning from './components/CryptoWarning';
+import TabSection from 'containers/TabSection';
+import { RouteComponentProps } from 'react-router-dom';
+
+export enum WalletType {
+  Keystore = 'keystore',
+  Mnemonic = 'mnemonic'
+}
+
+export default class GenerateWallet extends Component<RouteComponentProps<{}>> {
+  public render() {
+    const walletType = this.props.location.pathname.split('/')[2];
+    let content;
+
+    if (window.crypto) {
+      if (walletType === WalletType.Mnemonic) {
+        content = <Mnemonic />;
+      } else if (walletType === WalletType.Keystore) {
+        content = <Keystore />;
+      } else {
+        content = <WalletTypes />;
+      }
+    } else {
+      content = <CryptoWarning />;
+    }
+
+    return (
+      <TabSection>
+        <section className="Tab-content">{content}</section>
+      </TabSection>
+    );
+  }
+}