diff --git a/common/actions/config.js b/common/actions/config.js index b721d8de..71ce8a59 100644 --- a/common/actions/config.js +++ b/common/actions/config.js @@ -11,6 +11,11 @@ export type ChangeLanguageAction = { value: string }; +export type ChangeGasPriceAction = { + type: 'CONFIG_GAS_PRICE', + value: number +} + export type ConfigAction = ChangeNodeAction | ChangeLanguageAction; export function changeLanguage(sign: string) { @@ -26,3 +31,11 @@ export function changeNode(value: string): ChangeNodeAction { value }; } + +export function changeGasPrice(value: number): ChangeGasPriceAction { + return { + type: 'CONFIG_GAS_PRICE', + value + } +} + diff --git a/common/components/Header/components/GasPriceDropdown.jsx b/common/components/Header/components/GasPriceDropdown.jsx new file mode 100644 index 00000000..4fee1ba0 --- /dev/null +++ b/common/components/Header/components/GasPriceDropdown.jsx @@ -0,0 +1,80 @@ +// @flow +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import './GasPriceDropdown.scss'; +import { gasPriceDefaults } from 'config/data'; + +export default class GasPriceDropdown extends Component { + state = { expanded: false }; + + static propTypes = { + value: PropTypes.number, + onChange: PropTypes.func.isRequired + }; + + render() { + return ( + + + Gas Price: {this.props.value} Gwei + + + {this.state.expanded && + } + + ); + } + + toggleExpanded = () => { + this.setState(state => { + return { + expanded: !state.expanded + }; + }); + }; + + updateGasPrice = (e: SyntheticInputEvent) => { + this.props.onChange(e.currentTarget.valueAsNumber); + }; +} diff --git a/common/components/Header/components/GasPriceDropdown.scss b/common/components/Header/components/GasPriceDropdown.scss new file mode 100644 index 00000000..e4273712 --- /dev/null +++ b/common/components/Header/components/GasPriceDropdown.scss @@ -0,0 +1,33 @@ +@import "common/sass/variables"; + +.GasPrice { + + &-dropdown-menu { + padding: 0.5rem !important; + min-width: 300px !important; + } + + &-header { + max-width: 26rem; + color: $text-color; + p { + font-weight: 400; + margin: $space-sm 0 0; + } + + a, a:hover, a:focus, a:visited { + color: $brand-primary !important; + } + } + + &-padding-reset { + padding-left: 0 !important; + padding-right: 0 !important; + } + + &-description { + white-space: normal; + font-weight: 300 !important; + margin: 2rem 0 0; + } +} diff --git a/common/components/Header/index.jsx b/common/components/Header/index.jsx index 655fc2c9..5e731b6e 100644 --- a/common/components/Header/index.jsx +++ b/common/components/Header/index.jsx @@ -1,6 +1,7 @@ // @flow import React, { Component } from 'react'; 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'; @@ -13,9 +14,11 @@ export default class Header extends Component { location: {}, languageSelection: string, nodeSelection: string, + gasPriceGwei: number, changeLanguage: (sign: string) => any, - changeNode: (key: string) => any + changeNode: (key: string) => any, + changeGasPrice: (price: number) => any }; render() { @@ -47,6 +50,11 @@ export default class Header extends Component { Open-Source & Client-Side Ether Wallet ยท v3.6.0 + + void }; @@ -25,18 +28,24 @@ class App extends Component { let { children, // APP + nodeSelection, languageSelection, + gasPriceGwei, + changeLanguage, changeNode, - nodeSelection + changeGasPrice } = this.props; let headerProps = { location, - changeLanguage, languageSelection, + nodeSelection, + gasPriceGwei, + + changeLanguage, changeNode, - nodeSelection + changeGasPrice }; return ( @@ -59,7 +68,9 @@ function mapStateToProps(state) { nodeSelection: state.config.nodeSelection, nodeToggle: state.config.nodeToggle, languageSelection: state.config.languageSelection, - languageToggle: state.config.languageToggle + languageToggle: state.config.languageToggle, + + gasPriceGwei: state.config.gasPriceGwei }; } diff --git a/common/reducers/config.js b/common/reducers/config.js index c7491b35..706f5d56 100644 --- a/common/reducers/config.js +++ b/common/reducers/config.js @@ -2,19 +2,22 @@ import type { ConfigAction, ChangeNodeAction, - ChangeLanguageAction + ChangeLanguageAction, + ChangeGasPriceAction } from 'actions/config'; import { languages, NODES } from '../config/data'; export type State = { // FIXME languageSelection: string, - nodeSelection: string + nodeSelection: string, + gasPriceGwei: number }; export const initialState: State = { languageSelection: languages[0].sign, - nodeSelection: Object.keys(NODES)[0] + nodeSelection: Object.keys(NODES)[0], + gasPriceGwei: 21 }; function changeLanguage(state: State, action: ChangeLanguageAction): State { @@ -31,6 +34,13 @@ function changeNode(state: State, action: ChangeNodeAction): State { }; } +function changeGasPrice(state: State, action: ChangeGasPriceAction): State { + return { + ...state, + gasPriceGwei: action.value + }; +} + export function config( state: State = initialState, action: ConfigAction @@ -40,6 +50,8 @@ export function config( return changeLanguage(state, action); case 'CONFIG_NODE_CHANGE': return changeNode(state, action); + case 'CONFIG_GAS_PRICE': + return changeGasPrice(state, action); default: return state; }