Add tooltip to gas slider (#997)

common/components/TXMetaDataPanel/components/SimpleGas.tsx

@@ -9,6 +9,7 @@ import { getGasLimitEstimationTimedOut } from 'selectors/transaction';
 import { connect } from 'react-redux';
 import { GasLimitField } from 'components/GasLimitField';
 import { getIsWeb3Node } from 'selectors/config';
+const SliderWithTooltip = Slider.createSliderWithTooltip(Slider);
 
 interface OwnProps {
   gasPrice: AppState['transaction']['fields']['gasPrice'];
@@ -48,11 +49,12 @@ class SimpleGas extends React.Component<Props> {
 
         <div className="SimpleGas-input-group">
           <div className="SimpleGas-slider">
-            <Slider
+            <SliderWithTooltip
               onChange={this.handleSlider}
               min={gasPriceDefaults.gasPriceMinGwei}
               max={gasPriceDefaults.gasPriceMaxGwei}
               value={parseFloat(gasPrice.raw)}
+              tipFormatter={gas => `${gas} Gwei`}
             />
             <div className="SimpleGas-slider-labels">
               <span>{translate('Cheap')}</span>

common/sass/styles/overrides/rc-slider.scss

@@ -3,6 +3,7 @@
 $rail-height: 4px;
 $handle-size: 22px;
 $speed: 70ms;
+$tooltip-bg: rgba(#222, 0.95);
 
 .rc-slider {
   &-rail {
@@ -22,4 +23,20 @@ $speed: 70ms;
     border: none;
     transform: translate(-50%, -50%);
   }
+
+  &-tooltip {
+    &-arrow {
+      .rc-slider-tooltip-placement-top & {
+        border-top-color: $tooltip-bg;
+      }
+    }
+
+    &-inner {
+      background: $tooltip-bg;
+      padding: 7px 8px;
+      height: 26px;
+      box-shadow: none;
+      border-radius: 3px;
+    }
+  }
 }