diff --git a/js/src/ui/GasPriceSelector/CustomTooltip/customTooltip.js b/js/src/ui/GasPriceSelector/CustomTooltip/customTooltip.js
index b1c2ee1ef..ec7afda7e 100644
--- a/js/src/ui/GasPriceSelector/CustomTooltip/customTooltip.js
+++ b/js/src/ui/GasPriceSelector/CustomTooltip/customTooltip.js
@@ -19,12 +19,17 @@ import { FormattedMessage } from 'react-intl';
export default class CustomTooltip extends Component {
static propTypes = {
- active: PropTypes.bool,
histogram: PropTypes.object.isRequired,
+ intl: PropTypes.object.isRequired,
+ active: PropTypes.bool,
label: PropTypes.number,
payload: PropTypes.array,
type: PropTypes.string
- }
+ };
+
+ static childContextTypes = {
+ intl: PropTypes.object.isRequired
+ };
render () {
const { active, label, histogram } = this.props;
@@ -55,4 +60,8 @@ export default class CustomTooltip extends Component {
);
}
+
+ getChildContext () {
+ return { intl: this.props.intl };
+ }
}
diff --git a/js/src/ui/GasPriceSelector/gasPriceSelector.js b/js/src/ui/GasPriceSelector/gasPriceSelector.js
index 078ab2462..588c4c7c2 100644
--- a/js/src/ui/GasPriceSelector/gasPriceSelector.js
+++ b/js/src/ui/GasPriceSelector/gasPriceSelector.js
@@ -36,6 +36,10 @@ const TOOL_STYLE = {
};
export default class GasPriceSelector extends Component {
+ static contextTypes = {
+ intl: PropTypes.object.isRequired
+ };
+
static propTypes = {
histogram: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
@@ -145,7 +149,7 @@ export default class GasPriceSelector extends Component {
shape={ }stroke={ COLORS.line }
/>
}
+ content={ this.tooltipContentRenderer }
cursor={ this.renderCustomCursor() }
wrapperStyle={ TOOL_STYLE }
/>
@@ -168,6 +172,23 @@ export default class GasPriceSelector extends Component {
);
}
+ /**
+ * Passing the `intl` object as a prop
+ * so the CustomTooltip can add for child
+ * context (used by FormattedMessages)
+ */
+ tooltipContentRenderer = (props) => {
+ const { histogram } = this.props;
+
+ return (
+
+ );
+ }
+
renderSlider () {
const { sliderValue } = this.state;