2017-10-04 04:37:06 +00:00
|
|
|
import {
|
|
|
|
TChangeGasPrice,
|
|
|
|
TChangeLanguage,
|
|
|
|
TChangeNodeIntent
|
|
|
|
} from 'actions/config';
|
2017-09-25 02:06:28 +00:00
|
|
|
import logo from 'assets/images/logo-myetherwallet.svg';
|
2017-10-02 22:36:59 +00:00
|
|
|
import { Dropdown, ColorDropdown } from 'components/ui';
|
2017-05-23 23:06:01 +00:00
|
|
|
import React, { Component } from 'react';
|
2017-09-29 02:09:01 +00:00
|
|
|
import { Link } from 'react-router-dom';
|
2017-08-25 07:37:36 +00:00
|
|
|
import {
|
2017-09-25 02:06:28 +00:00
|
|
|
ANNOUNCEMENT_MESSAGE,
|
|
|
|
ANNOUNCEMENT_TYPE,
|
2017-08-25 07:37:36 +00:00
|
|
|
languages,
|
2017-09-20 00:47:08 +00:00
|
|
|
NETWORKS,
|
2017-09-25 02:06:28 +00:00
|
|
|
NODES,
|
|
|
|
VERSION
|
2017-08-25 07:37:36 +00:00
|
|
|
} from '../../config/data';
|
2017-09-25 02:06:28 +00:00
|
|
|
import GasPriceDropdown from './components/GasPriceDropdown';
|
|
|
|
import Navigation from './components/Navigation';
|
2017-09-26 23:03:38 +00:00
|
|
|
import { getKeyByValue } from 'utils/helpers';
|
2017-07-15 04:16:36 +00:00
|
|
|
import './index.scss';
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
interface Props {
|
|
|
|
languageSelection: string;
|
|
|
|
nodeSelection: string;
|
|
|
|
gasPriceGwei: number;
|
2017-06-18 19:56:12 +00:00
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
changeLanguage: TChangeLanguage;
|
2017-10-04 04:37:06 +00:00
|
|
|
changeNodeIntent: TChangeNodeIntent;
|
2017-09-25 02:06:28 +00:00
|
|
|
changeGasPrice: TChangeGasPrice;
|
|
|
|
}
|
2017-04-12 05:04:27 +00:00
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
export default class Header extends Component<Props, {}> {
|
|
|
|
public render() {
|
2017-10-04 04:37:06 +00:00
|
|
|
const { languageSelection, changeNodeIntent, nodeSelection } = this.props;
|
2017-09-26 23:03:38 +00:00
|
|
|
const selectedLanguage = languageSelection;
|
2017-07-04 03:21:19 +00:00
|
|
|
const selectedNode = NODES[nodeSelection];
|
2017-09-20 00:47:08 +00:00
|
|
|
const selectedNetwork = NETWORKS[selectedNode.network];
|
2017-09-25 02:06:28 +00:00
|
|
|
const LanguageDropDown = Dropdown as new () => Dropdown<
|
|
|
|
typeof selectedLanguage
|
|
|
|
>;
|
2017-10-02 22:36:59 +00:00
|
|
|
const nodeOptions = Object.keys(NODES).map(key => {
|
|
|
|
return {
|
|
|
|
value: key,
|
|
|
|
name: (
|
|
|
|
<span>
|
|
|
|
{NODES[key].network} <small>({NODES[key].service})</small>
|
|
|
|
</span>
|
|
|
|
),
|
2017-11-10 03:30:20 +00:00
|
|
|
color: NETWORKS[NODES[key].network].color,
|
|
|
|
hidden: NODES[key].hidden
|
2017-10-02 22:36:59 +00:00
|
|
|
};
|
|
|
|
});
|
|
|
|
|
2017-07-02 05:49:06 +00:00
|
|
|
return (
|
2017-07-15 04:16:36 +00:00
|
|
|
<div className="Header">
|
2017-09-25 02:06:28 +00:00
|
|
|
{ANNOUNCEMENT_MESSAGE && (
|
2017-08-25 07:37:36 +00:00
|
|
|
<div
|
|
|
|
className={`Header-announcement is-${ANNOUNCEMENT_TYPE}`}
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
__html: ANNOUNCEMENT_MESSAGE
|
|
|
|
}}
|
2017-09-25 02:06:28 +00:00
|
|
|
/>
|
|
|
|
)}
|
2017-08-25 07:37:36 +00:00
|
|
|
|
2017-07-15 04:16:36 +00:00
|
|
|
<section className="Header-branding">
|
|
|
|
<section className="Header-branding-inner container">
|
|
|
|
<Link
|
|
|
|
to={'/'}
|
|
|
|
className="Header-branding-title"
|
|
|
|
aria-label="Go to homepage"
|
|
|
|
>
|
|
|
|
{/* TODO - don't hardcode image path*/}
|
|
|
|
<img
|
|
|
|
className="Header-branding-title-logo"
|
|
|
|
src={logo}
|
|
|
|
height="64px"
|
|
|
|
width="245px"
|
|
|
|
alt="MyEtherWallet"
|
|
|
|
/>
|
2017-07-02 05:49:06 +00:00
|
|
|
</Link>
|
2017-10-02 22:36:59 +00:00
|
|
|
<div className="Header-branding-right">
|
|
|
|
<span className="Header-branding-right-version">v{VERSION}</span>
|
2017-07-15 04:16:36 +00:00
|
|
|
|
2017-10-02 22:36:59 +00:00
|
|
|
<div className="Header-branding-right-dropdown">
|
|
|
|
<GasPriceDropdown
|
|
|
|
value={this.props.gasPriceGwei}
|
|
|
|
onChange={this.props.changeGasPrice}
|
|
|
|
/>
|
|
|
|
</div>
|
2017-07-20 17:06:10 +00:00
|
|
|
|
2017-10-02 22:36:59 +00:00
|
|
|
<div className="Header-branding-right-dropdown">
|
|
|
|
<LanguageDropDown
|
|
|
|
ariaLabel={`change language. current language ${languages[
|
|
|
|
selectedLanguage
|
|
|
|
]}`}
|
|
|
|
options={Object.values(languages)}
|
|
|
|
value={languages[selectedLanguage]}
|
|
|
|
extra={
|
|
|
|
<li key="disclaimer">
|
|
|
|
<a data-toggle="modal" data-target="#disclaimerModal">
|
|
|
|
Disclaimer
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
}
|
|
|
|
onChange={this.changeLanguage}
|
|
|
|
size="smr"
|
|
|
|
color="white"
|
|
|
|
/>
|
|
|
|
</div>
|
2017-07-15 04:16:36 +00:00
|
|
|
|
2017-10-02 22:36:59 +00:00
|
|
|
<div className="Header-branding-right-dropdown">
|
|
|
|
<ColorDropdown
|
|
|
|
ariaLabel={`change node. current node ${selectedNode.network} node by ${selectedNode.service}`}
|
|
|
|
options={nodeOptions}
|
|
|
|
value={nodeSelection}
|
|
|
|
extra={
|
|
|
|
<li>
|
|
|
|
<a>Add Custom Node</a>
|
|
|
|
</li>
|
|
|
|
}
|
2017-11-10 03:30:20 +00:00
|
|
|
disabled={nodeSelection === 'web3'}
|
2017-10-04 04:37:06 +00:00
|
|
|
onChange={changeNodeIntent}
|
2017-10-02 22:36:59 +00:00
|
|
|
size="smr"
|
|
|
|
color="white"
|
|
|
|
/>
|
|
|
|
</div>
|
2017-07-02 05:49:06 +00:00
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</section>
|
2017-04-18 23:36:29 +00:00
|
|
|
|
2017-10-04 04:13:49 +00:00
|
|
|
<Navigation color={selectedNetwork.color} />
|
2017-07-02 05:49:06 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2017-07-04 01:25:01 +00:00
|
|
|
|
2017-09-26 23:03:38 +00:00
|
|
|
public changeLanguage = (value: string) => {
|
|
|
|
const key = getKeyByValue(languages, value);
|
|
|
|
if (key) {
|
|
|
|
this.props.changeLanguage(key);
|
|
|
|
}
|
2017-07-04 03:21:19 +00:00
|
|
|
};
|
2017-04-12 05:04:27 +00:00
|
|
|
}
|