From 43dc9395dfaa15005118d81791c3c66907caae8a Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Tue, 1 Nov 2016 10:32:15 +0100
Subject: [PATCH] PR grumble // Gas Price Selector (#2898)

---
 js/src/modals/Transfer/Extras/extras.js       |  6 ++--
 .../GasPriceSelector/gasPriceSelector.js      | 28 +++++++++++--------
 js/src/modals/Transfer/transfer.css           |  4 +++
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/js/src/modals/Transfer/Extras/extras.js b/js/src/modals/Transfer/Extras/extras.js
index 600a49a6be0..56904b00a9f 100644
--- a/js/src/modals/Transfer/Extras/extras.js
+++ b/js/src/modals/Transfer/Extras/extras.js
@@ -97,11 +97,9 @@ export default class Extras extends Component {
         </div>
 
         <div>
-          <p>
+          <p className={ styles.gasPriceDesc }>
             You can choose the gas price based on the
-            distribution of recent <b>included</b> transactions' gas prices.
-          </p>
-          <p>
+            distribution of recent included transactions' gas prices.
             The lower the gas price is, the cheaper the transaction will
             be. The higher the gas price is, the faster it should
             get mined by the network.
diff --git a/js/src/modals/Transfer/GasPriceSelector/gasPriceSelector.js b/js/src/modals/Transfer/GasPriceSelector/gasPriceSelector.js
index c9b60609a5a..97dbee7ec1c 100644
--- a/js/src/modals/Transfer/GasPriceSelector/gasPriceSelector.js
+++ b/js/src/modals/Transfer/GasPriceSelector/gasPriceSelector.js
@@ -43,6 +43,11 @@ const COLORS = {
   intersection: '#fff'
 };
 
+const countModifier = (count) => {
+  const val = count.toNumber ? count.toNumber() : count;
+  return Math.log10(val + 1) + 0.1;
+};
+
 class CustomCursor extends Component {
   static propTypes = {
     x: PropTypes.number,
@@ -64,7 +69,7 @@ class CustomCursor extends Component {
       return null;
     }
 
-    const count = counts[index].toNumber() + 1;
+    const count = countModifier(counts[index]);
     const barHeight = (count / yDomain[1]) * (y + height);
 
     return (
@@ -307,9 +312,9 @@ export default class GasPriceSelector extends Component {
       return null;
     }
 
-    const height = 350;
+    const height = 300;
     const countIndex = Math.max(0, Math.min(selectedIndex, gasPriceHistogram.counts.length - 1));
-    const selectedCount = gasPriceHistogram.counts[countIndex];
+    const selectedCount = countModifier(gasPriceHistogram.counts[countIndex]);
 
     return (<div className={ styles.columns }>
       <div style={ { flex: 1, height } }>
@@ -323,10 +328,10 @@ export default class GasPriceSelector extends Component {
               <Scatter
                 data={ [
                   { x: sliderValue, y: 0 },
-                  { x: sliderValue, y: selectedCount.toNumber() + 1 },
+                  { x: sliderValue, y: selectedCount },
                   { x: sliderValue, y: chartData.yDomain[1] }
                 ] }
-                shape={ <CustomizedShape showValue={ selectedCount.toNumber() + 1 } /> }
+                shape={ <CustomizedShape showValue={ selectedCount } /> }
                 line
                 isAnimationActive={ false }
               />
@@ -424,13 +429,14 @@ export default class GasPriceSelector extends Component {
       .map((value, index) => ({ value, index }));
 
     const N = values.length - 1;
-    const maxGasCounts = gasPriceHistogram
-      .counts
-      .reduce((max, count) => count.greaterThan(max) ? count : max, 0)
-      .toNumber();
+    const maxGasCounts = countModifier(
+      gasPriceHistogram
+        .counts
+        .reduce((max, count) => count.greaterThan(max) ? count : max, 0)
+    );
 
     const xDomain = [0, N];
-    const yDomain = [0, (maxGasCounts + 1) * 1.2];
+    const yDomain = [0, maxGasCounts * 1.1];
 
     const chartData = {
       values, N,
@@ -447,7 +453,7 @@ export default class GasPriceSelector extends Component {
 
     const gasPriceChartData = gasPriceHistogram
       .counts
-      .map(count => count.toNumber() + 1);
+      .map(count => countModifier(count));
 
     this.setState(
       { gasPriceChartData },
diff --git a/js/src/modals/Transfer/transfer.css b/js/src/modals/Transfer/transfer.css
index 50cc660ffac..89b58666eb3 100644
--- a/js/src/modals/Transfer/transfer.css
+++ b/js/src/modals/Transfer/transfer.css
@@ -147,3 +147,7 @@
   position: absolute;
   width: 100%;
 }
+
+.gasPriceDesc {
+  font-size: 0.9em;
+}