diff --git a/common/components/Header/components/Navigation.jsx b/common/components/Header/components/Navigation.jsx
index b704f421..4bd51a51 100644
--- 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 {
>
«
}
+
- {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 (
-
-
- {translate(object.name)}
-
-
+
);
})}
+
{this.state.showRightArrow &&
+ {translate(link.name)}
+
+ :
+ {translate(link.name)}
+ ;
+
+ return (
+
+ {linkEl}
+
+ );
+ }
+}
diff --git a/common/components/Header/components/NavigationLink.scss b/common/components/Header/components/NavigationLink.scss
new file mode 100644
index 00000000..2b481ee8
--- /dev/null
+++ 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;
+ }
+ }
+}
diff --git a/common/components/Header/index.jsx b/common/components/Header/index.jsx
index 5e731b6e..5ea60e4b 100644
--- 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 (
+ {ANNOUNCEMENT_MESSAGE &&
+
}
+
-
- Open-Source & Client-Side Ether Wallet · v3.6.0
+
+ Open-Source & Client-Side Ether Wallet · v{VERSION}
{translate(wallet.lid)}
diff --git a/common/config/data.js b/common/config/data.js
index 79d5ab31..f56c416e 100644
--- 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 https://myetherwallet.com .
+`;
+
export const DONATION_ADDRESSES_MAP = {
BTC: '1MEWT2SGbqtz6mPCgFcnea8XmWV5Z4Wc6',
ETH: '0x7cB57B5A97eAbe94205C07890BE4c1aD31E486A8',
diff --git a/package-lock.json b/package-lock.json
index 81cde8a3..0f8c4ce5 100644
--- 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",
diff --git a/package.json b/package.json
index 329162cb..eede7dbc 100644
--- 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",