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.
2017-08-25 03:37:36 -04:00 · 2017-08-25 03:37:36 -04:00 · cfba08ccf4
parent 0474c52004
commit cfba08ccf4
10 changed files with 207 additions and 81 deletions
--- a/common/components/Header/components/Navigation.jsx
+++ b/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',
-    link: 'view-wallet'
+    name: 'NAV_ViewWallet'
+    // 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 {
          >
            &#171;
          </a>}
+
        <div className="Navigation-scroll">
          <ul className="Navigation-links">
-            {tabs.map((object, i) => {
-              // 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'
-                  : '';
+            {tabs.map(link => {
              return (
-                <li
-                  className={'Navigation-links-item'}
-                  key={i}
-                  onClick={this.tabClick(i)}
-                >
-                  <Link
-                    className={`Navigation-links-item-link ${activeOrNot}`}
-                    to={object.link}
-                    aria-label={`nav item: ${translate(object.name)}`}
-                  >
-                    {translate(object.name)}
-                  </Link>
-                </li>
+                <NavigationLink
+                  key={link.name}
+                  link={link}
+                  location={location}
+                />
              );
            })}
          </ul>
        </div>
+
        {this.state.showRightArrow &&
          <a
            aria-hidden="true"
--- a/common/components/Header/components/Navigation.scss
+++ b/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 {
--- a/common/components/Header/components/NavigationLink.jsx
+++ b/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>
+    );
+  }
+}
--- a/common/components/Header/components/NavigationLink.scss
+++ b/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;
+    }
+  }
+}
--- a/common/components/Header/index.jsx
+++ b/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' }}>
-                Open-Source & Client-Side Ether Wallet · v3.6.0
+              <span className="Header-branding-title-tagline-version">
+                Open-Source & Client-Side Ether Wallet · v{VERSION}
              </span>

              <GasPriceDropdown
--- a/common/components/Header/index.scss
+++ b/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;
+        }
      }
    }

--- a/common/components/WalletDecrypt/index.jsx
+++ b/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)}
--- a/common/config/data.js
+++ b/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',
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",