Fix Gas Price Selector Tooltips (#4865)

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 };
+  }
 }

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;