From 96f4033a407e9329033ae30d963db1918797b03f Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Sat, 11 Mar 2017 15:25:27 +0100
Subject: [PATCH] Fix Gas Price Selector Tooltips (#4865)

---
 .../CustomTooltip/customTooltip.js            | 13 +++++++++--
 .../ui/GasPriceSelector/gasPriceSelector.js   | 23 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 3 deletions(-)

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 {
       </div>
     );
   }
+
+  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={ <CustomBar selected={ selectedIndex } onClick={ this.onClickprice } /> }stroke={ COLORS.line }
                 />
                 <Tooltip
-                  content={ <CustomTooltip histogram={ histogram } /> }
+                  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 (
+      <CustomTooltip
+        histogram={ histogram }
+        intl={ this.context.intl }
+        { ...props }
+      />
+    );
+  }
+
   renderSlider () {
     const { sliderValue } = this.state;