Refactor of enabled content

app/common/lib/ledgerUtil.js

@@ -5,6 +5,8 @@
 'use strict'
 
 const {responseHasContent} = require('./httpUtil')
+const moment = require('moment')
+moment.locale(navigator.language)
 
 /**
  * Is page an actual page being viewed by the user? (not an error page, etc)
@@ -39,3 +41,35 @@ module.exports.shouldTrackView = (view, responseList) => {
   }
   return false
 }
+
+module.exports.btcToCurrencyString = (btc, ledgerData) => {
+  const balance = Number(btc || 0)
+  const currency = ledgerData.get('currency') || 'USD'
+
+  if (balance === 0) {
+    return `0 ${currency}`
+  }
+
+  if (ledgerData.get('btc') && typeof ledgerData.get('amount') === 'number') {
+    const btcValue = ledgerData.get('btc') / ledgerData.get('amount')
+    const fiatValue = (balance / btcValue).toFixed(2)
+    let roundedValue = Math.floor(fiatValue)
+    const diff = fiatValue - roundedValue
+
+    if (diff > 0.74) {
+      roundedValue += 0.75
+    } else if (diff > 0.49) {
+      roundedValue += 0.50
+    } else if (diff > 0.24) {
+      roundedValue += 0.25
+    }
+
+    return `${roundedValue.toFixed(2)} ${currency}`
+  }
+
+  return `${balance} BTC`
+}
+
+module.exports.formattedTimeFromNow = (timestamp) => {
+  return moment(new Date(timestamp)).fromNow()
+}

app/renderer/components/preferences/payment/disabledContent.js

@@ -1,9 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 const React = require('react')
-const ImmutableComponent = require('../../../../../js/components/immutableComponent')
-const globalStyles = require('../../styles/global')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
-// icons
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
+
+// style
+const globalStyles = require('../../styles/global')
+const paymentStyles = require('../../styles/payment')
 const PIA = require('../../../../extensions/brave/img/private_internet_access.png')
 const PIA2 = require('../../../../extensions/brave/img/private_internet_access_2x.png')
 const BitGo = require('../../../../extensions/brave/img/bitgo.png')
@@ -45,7 +51,7 @@ const styles = StyleSheet.create({
     backgroundColor: globalStyles.color.lightGray,
     borderRadius: globalStyles.radius.borderRadiusUIbox,
     padding: '40px',
-    fontSize: globalStyles.fontSize.paymentsContent,
+    fontSize: paymentStyles.font.regular,
     lineHeight: '1.8em',
     color: globalStyles.color.mediumGray,
     width: '500px',
@@ -57,10 +63,14 @@ const styles = StyleSheet.create({
   },
 
   textSide: {
-    fontSize: '12px',
+    fontSize: paymentStyles.font.regular,
     margin: '50px 0 20px 12px'
   },
 
+  walletBarMargin: {
+    marginTop: paymentStyles.margin.bar
+  },
+
   h3: {
     fontSize: '18px',
     paddingBottom: '0.5em'
@@ -75,10 +85,6 @@ const styles = StyleSheet.create({
     fontWeight: 'bold'
   },
 
-  walletBarMargin: {
-    marginTop: '15px'
-  },
-
   paymentsSidebar: {
     opacity: 0.8,
     width: '200px',
@@ -103,8 +109,7 @@ const styles = StyleSheet.create({
   },
 
   paymentsSidebarCoinbase: {
-    backgroundImage: `-webkit-image-set(url(${CoinBase}) 1x,
-  url(${CoinBase2}) 2x)`,
+    backgroundImage: `-webkit-image-set(url(${CoinBase}) 1x, url(${CoinBase2}) 2x)`,
     width: '100px',
     height: '35px',
     margin: '0 0 20px 12px',