Got basic fiat display modularized

3 files changed, 26 insertions, 22 deletions

diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index c77bda626..b9caf65b9 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -57,30 +57,32 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
     h(Tooltip, {
       position: 'bottom',
       title: `${ethNumber} ${ethSuffix}`,
-    }, [
-      h('.flex-column', {
-        style: {
-          alignItems: 'flex-end',
-          lineHeight: '13px',
-          fontFamily: 'Montserrat Light',
-          textRendering: 'geometricPrecision',
-        },
-      }, [
-        h('div', {
+    }, h('div.flex-column', [
+        h('.flex-row', {
           style: {
-            width: '100%',
-            textAlign: 'right',
+            alignItems: 'flex-end',
+            lineHeight: '13px',
+            fontFamily: 'Montserrat Light',
+            textRendering: 'geometricPrecision',
           },
-        }, this.props.incoming ? `+${balance}` : balance),
-        h('div', {
-          style: {
-            color: ' #AEAEAE',
-            fontSize: '12px',
-          },
-        }, label),
-      ]),
+        }, [
+          h('div', {
+            style: {
+              width: '100%',
+              textAlign: 'right',
+            },
+          }, this.props.incoming ? `+${balance}` : balance),
+          h('div', {
+            style: {
+              color: ' #AEAEAE',
+              fontSize: '12px',
+              marginLeft: '5px',
+            },
+          }, label),
+        ]),
 
-      showFiat ? h(FiatValue, { value: props.value }) : null,
-    ])
+        showFiat ? h(FiatValue, { value: props.value }) : null,
+      ])
+    )
   )
 }
diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js
index 57c67e117..406dcf23f 100644
--- a/ui/app/components/fiat-value.js
+++ b/ui/app/components/fiat-value.js
@@ -32,6 +32,7 @@ FiatValue.prototype.render = function () {
     fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
   } else {
     fiatDisplayNumber = 'N/A'
+    fiatTooltipNumber = 'Unknown'
   }
 
   var fiatSuffix = props.currentFiat
diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js
index 440393b08..757ad0cd6 100644
--- a/ui/app/components/tooltip.js
+++ b/ui/app/components/tooltip.js
@@ -11,6 +11,7 @@ function Tooltip () {
 }
 
 Tooltip.prototype.render = function () {
+
   const props = this.props
   const { position, title, children } = props