Convert FiatValue component to JSX (#7515)

ui/app/components/ui/fiat-value.js

@@ -1,5 +1,4 @@
-const Component = require('react').Component
+import React, { Component } from 'react'
-const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const formatBalance = require('../../helpers/utils/util').formatBalance
 
@@ -38,31 +37,38 @@ function fiatDisplay (fiatDisplayNumber, fiatSuffix, styleOveride = {}) {
   const { fontSize, color, fontFamily, lineHeight } = styleOveride
 
   if (fiatDisplayNumber !== 'N/A') {
-    return h('.flex-row', {
+    return (
-      style: {
+      <div
-        alignItems: 'flex-end',
+        className="flex-row"
-        lineHeight: lineHeight || '13px',
+        style={{
-        fontFamily: fontFamily || 'Montserrat Light',
+          alignItems: 'flex-end',
-        textRendering: 'geometricPrecision',
+          lineHeight: lineHeight || '13px',
-      },
+          fontFamily: fontFamily || 'Montserrat Light',
-    }, [
+          textRendering: 'geometricPrecision',
-      h('div', {
+        }}
-        style: {
+      >
-          width: '100%',
+        <div
-          textAlign: 'right',
+          style={{
-          fontSize: fontSize || '12px',
+            width: '100%',
-          color: color || '#333333',
+            textAlign: 'right',
-        },
+            fontSize: fontSize || '12px',
-      }, fiatDisplayNumber),
+            color: color || '#333333',
-      h('div', {
+          }}
-        style: {
+        >
-          color: color || '#AEAEAE',
+          {fiatDisplayNumber}
-          marginLeft: '5px',
+        </div>
-          fontSize: fontSize || '12px',
+        <div
-        },
+          style={{
-      }, fiatSuffix),
+            color: color || '#AEAEAE',
-    ])
+            marginLeft: '5px',
+            fontSize: fontSize || '12px',
+          }}
+        >
+          {fiatSuffix}
+        </div>
+      </div>
+    )
   } else {
-    return h('div')
+    return <div />
   }
 }