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 { > « } +
+ {this.state.showRightArrow && + : + {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",