Visual Alpha Prep (#135)

* Added alpha banner to top of site.

* Grey out non functioning nav items. Redirect help to groovehq.

* Disable view wallet while it's just a stub.

* Disable non-implemented wallets.

common/components/Header/components/Navigation.jsx

@@ -1,37 +1,37 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router';
-import translate from 'translations';
 import PropTypes from 'prop-types';
+import NavigationLink from './NavigationLink';
 
 import './Navigation.scss';
 
 const tabs = [
   {
     name: 'NAV_GenerateWallet',
-    link: '/'
+    to: '/'
   },
   {
     name: 'NAV_SendEther',
-    link: 'send-transaction'
+    to: 'send-transaction'
   },
   {
     name: 'NAV_Swap',
-    link: 'swap'
+    to: 'swap'
   },
   {
     name: 'NAV_Offline'
   },
   {
     name: 'NAV_Contracts',
-    link: 'contracts'
+    to: 'contracts'
   },
   {
-    name: 'NAV_ViewWallet',
+    name: 'NAV_ViewWallet'
-    link: 'view-wallet'
+    // to: 'view-wallet'
   },
   {
     name: 'NAV_Help',
-    link: 'help'
+    to: 'https://myetherwallet.groovehq.com/help_center',
+    external: true
   }
 ];
 
@@ -48,8 +48,6 @@ export default class TabsOptions extends Component {
     location: PropTypes.object
   };
 
-  tabClick() {}
-
   scrollLeft() {}
 
   scrollRight() {}
@@ -70,33 +68,21 @@ export default class TabsOptions extends Component {
           >
             «
           </a>}
+
         <div className="Navigation-scroll">
           <ul className="Navigation-links">
-            {tabs.map((object, i) => {
+            {tabs.map(link => {
-              // if the window pathname is the same or similar to the tab objects name, set the active toggle
-              const activeOrNot =
-                location.pathname === object.link ||
-                location.pathname.substring(1) === object.link
-                  ? 'is-active'
-                  : '';
               return (
-                <li
+                <NavigationLink
-                  className={'Navigation-links-item'}
+                  key={link.name}
-                  key={i}
+                  link={link}
-                  onClick={this.tabClick(i)}
+                  location={location}
-                >
+                />
-                  <Link
-                    className={`Navigation-links-item-link ${activeOrNot}`}
-                    to={object.link}
-                    aria-label={`nav item: ${translate(object.name)}`}
-                  >
-                    {translate(object.name)}
-                  </Link>
-                </li>
               );
             })}
           </ul>
         </div>
+
         {this.state.showRightArrow &&
           <a
             aria-hidden="true"

common/components/Header/components/Navigation.scss

@@ -24,47 +24,6 @@
     min-width: 100%;
     padding: 5px 0 0;
     vertical-align: middle;
-
-    &-item {
-      display: inline-block;
-      font-size: 0;
-
-      &-link {
-        color: darken($link-color, 15%);
-        display: block;
-        font-size: 16px;
-        font-weight: 300;
-        padding: 10px;
-        white-space: nowrap;
-        position: relative;
-        min-height: 2.75rem;
-
-        &:after {
-          content: "";
-          background: $brand-primary;
-          height: 2px;
-          width: 100%;
-          left: 0px;
-          position: absolute;
-          bottom: -1px;
-          transition: all 250ms ease 0s;
-          transform: scaleX(0);
-        }
-
-        &.is-active,
-        &:hover,
-        &:focus {
-          color: $brand-primary;
-          text-decoration: none;
-          transition: all 250ms ease 0s;
-
-          &:after {
-            transform: scaleX(1);
-            transition: all 250ms ease 0s;
-          }
-        }
-      }
-    }
   }
 
   &-arrow {

common/components/Header/components/NavigationLink.jsx

@@ -0,0 +1,50 @@
+// @flow
+import React from 'react';
+import classnames from 'classnames';
+import translate from 'translations';
+import { Link } from 'react-router';
+import './NavigationLink.scss';
+
+type Props = {
+  link: {
+    name: string,
+    to?: string,
+    external?: boolean
+  },
+  location: Object
+};
+
+export default class NavigationLink extends React.Component {
+  props: Props;
+
+  render() {
+    const { link, location } = this.props;
+    const linkClasses = classnames({
+      'NavigationLink-link': true,
+      'is-disabled': !link.to,
+      'is-active':
+        location.pathname === link.to ||
+        location.pathname.substring(1) === link.to
+    });
+    const linkLabel = `nav item: ${translate(link.name)}`;
+
+    const linkEl = link.external
+      ? <a
+          className={linkClasses}
+          href={link.to}
+          aria-label={linkLabel}
+          target="_blank"
+        >
+          {translate(link.name)}
+        </a>
+      : <Link className={linkClasses} to={link.to} aria-label={linkLabel}>
+          {translate(link.name)}
+        </Link>;
+
+    return (
+      <li className="NavigationLink">
+        {linkEl}
+      </li>
+    );
+  }
+}

common/components/Header/components/NavigationLink.scss

@@ -0,0 +1,46 @@
+@import "common/sass/variables";
+
+.NavigationLink {
+  display: inline-block;
+
+  &-link {
+    color: darken($link-color, 15%);
+    display: block;
+    font-size: 16px;
+    font-weight: 300;
+    padding: 10px;
+    white-space: nowrap;
+    position: relative;
+    min-height: 2.75rem;
+
+    &:after {
+      content: "";
+      background: $brand-primary;
+      height: 2px;
+      width: 100%;
+      left: 0px;
+      position: absolute;
+      bottom: -1px;
+      transition: all 250ms ease 0s;
+      transform: scaleX(0);
+    }
+
+    &.is-active,
+    &:hover,
+    &:focus {
+      color: $brand-primary;
+      text-decoration: none;
+      transition: all 250ms ease 0s;
+
+      &:after {
+        transform: scaleX(1);
+        transition: all 250ms ease 0s;
+      }
+    }
+
+    &.is-disabled {
+      pointer-events: none;
+      opacity: 0.3;
+    }
+  }
+}

common/components/Header/index.jsx

@@ -4,7 +4,13 @@ import Navigation from './components/Navigation';
 import GasPriceDropdown from './components/GasPriceDropdown';
 import { Link } from 'react-router';
 import { Dropdown } from 'components/ui';
-import { languages, NODES } from '../../config/data';
+import {
+  languages,
+  NODES,
+  VERSION,
+  ANNOUNCEMENT_TYPE,
+  ANNOUNCEMENT_MESSAGE
+} from '../../config/data';
 import logo from 'assets/images/logo-myetherwallet.svg';
 
 import './index.scss';
@@ -29,6 +35,14 @@ export default class Header extends Component {
 
     return (
       <div className="Header">
+        {ANNOUNCEMENT_MESSAGE &&
+          <div
+            className={`Header-announcement is-${ANNOUNCEMENT_TYPE}`}
+            dangerouslySetInnerHTML={{
+              __html: ANNOUNCEMENT_MESSAGE
+            }}
+          />}
+
         <section className="Header-branding">
           <section className="Header-branding-inner container">
             <Link
@@ -46,8 +60,8 @@ export default class Header extends Component {
               />
             </Link>
             <div className="Header-branding-title-tagline">
-              <span style={{ maxWidth: '395px' }}>
+              <span className="Header-branding-title-tagline-version">
-                Open-Source & Client-Side Ether Wallet · v3.6.0
+                Open-Source & Client-Side Ether Wallet · v{VERSION}
               </span>
 
               <GasPriceDropdown

common/components/Header/index.scss

@@ -17,6 +17,50 @@ $small-size: 900px;
 
 // Header
 .Header {
+  &-announcement {
+    padding: 2px 10px;
+    line-height: 22px;
+    font-size: 14px;
+    text-align: center;
+    font-weight: 300;
+    color: #fff;
+    transition: background-color 80ms ease;
+
+    a {
+      color: #fff;
+      text-decoration: underline;
+      transition: none;
+
+      &:hover,
+      &:focus {
+        opacity: 0.7;
+      }
+    }
+
+    // Colors
+    &,
+    &.is-primary {
+      background: $brand-primary;
+    }
+
+    &.is-warning {
+      background: $brand-warning;
+    }
+
+    &.is-danger {
+      background: $brand-danger;
+    }
+
+    &.is-success {
+      background: $brand-success;
+    }
+
+    &.is-info {
+      background: $brand-info;
+      border-bottom: 1px solid rgba(#fff, 0.6);
+    }
+  }
+
   &-branding {
     color: white;
     padding: 0;
@@ -61,6 +105,10 @@ $small-size: 900px;
           display: inline;
           vertical-align: middle;
         }
+
+        &-version {
+          max-width: 395px;
+        }
       }
     }
 

common/components/WalletDecrypt/index.jsx

@@ -33,19 +33,23 @@ const WALLETS = {
   },
   'mnemonic-phrase': {
     lid: 'x_Mnemonic',
-    component: MnemonicDecrypt
+    component: MnemonicDecrypt,
+    disabled: true
   },
   'ledger-nano-s': {
     lid: 'x_Ledger',
-    component: LedgerNanoSDecrypt
+    component: LedgerNanoSDecrypt,
+    disabled: true
   },
   trezor: {
     lid: 'x_Trezor',
-    component: TrezorDecrypt
+    component: TrezorDecrypt,
+    disabled: true
   },
   'view-only': {
     lid: 'View with Address Only',
-    component: ViewOnlyDecrypt
+    component: ViewOnlyDecrypt,
+    disabled: true
   }
 };
 
@@ -97,6 +101,7 @@ export class WalletDecrypt extends Component {
             value={key}
             checked={isSelected}
             onChange={this.handleDecryptionChoiceChange}
+            disabled={wallet.disabled}
           />
           <span id={`${key}-label`}>
             {translate(wallet.lid)}

common/config/data.js

@@ -1,6 +1,18 @@
 // @flow
 import { RPCNode } from 'libs/nodes';
 
+// Displays in the header
+export const VERSION = '4.0.0';
+
+// Displays at the top of the site, make message empty string to remove.
+// Type can be primary, warning, danger, success, or info.
+// HTML is allowed inside of the message.
+export const ANNOUNCEMENT_TYPE = 'warning';
+export const ANNOUNCEMENT_MESSAGE = `
+  This is an Alpha build of MyEtherWallet v4. Please only use for testing,
+  or use v3 at <a href='https://myetherwallet.com'>https://myetherwallet.com</a>.
+`;
+
 export const DONATION_ADDRESSES_MAP = {
   BTC: '1MEWT2SGbqtz6mPCgFcnea8XmWV5Z4Wc6',
   ETH: '0x7cB57B5A97eAbe94205C07890BE4c1aD31E486A8',

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "MyEtherWallet",
-  "version": "0.0.1",
+  "version": "4.0.0-alpha.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2115,6 +2115,11 @@
         "chalk": "1.1.3"
       }
     },
+    "classnames": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
+      "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
+    },
     "clean-css": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MyEtherWallet",
-  "version": "0.0.1",
+  "version": "4.0.0-alpha.1",
   "main": "common/index.jsx",
   "description": "MyEtherWallet v4",
   "engines": {
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "bignumber.js": "^4.0.2",
+    "classnames": "^2.2.5",
     "ethereum-blockies": "git+https://github.com/MyEtherWallet/blockies.git",
     "ethereumjs-abi": "^0.6.4",
     "ethereumjs-tx": "^1.3.3",