From 6bc57e5985704deec1bf89060d9e5be29cc450c2 Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Fri, 3 Mar 2017 16:14:27 +0100
Subject: [PATCH] Refactor of enabled content

---
 app/common/lib/ledgerUtil.js                  |  34 ++
 .../preferences/payment/disabledContent.js    |  25 +-
 .../preferences/payment/enabledContent.js     | 347 ++++++++++++++++++
 .../components/preferences/paymentsTab.js     | 248 +------------
 app/renderer/components/settings.js           |   6 +-
 app/renderer/components/styles/payment.js     |  22 ++
 less/about/preferences.less                   | 110 +-----
 7 files changed, 436 insertions(+), 356 deletions(-)
 create mode 100644 app/renderer/components/preferences/payment/enabledContent.js
 create mode 100644 app/renderer/components/styles/payment.js

diff --git a/app/common/lib/ledgerUtil.js b/app/common/lib/ledgerUtil.js
index e442536b21c..7a4f94fb565 100644
--- a/app/common/lib/ledgerUtil.js
+++ b/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()
+}
diff --git a/app/renderer/components/preferences/payment/disabledContent.js b/app/renderer/components/preferences/payment/disabledContent.js
index 7896191937b..918626fcc6c 100644
--- a/app/renderer/components/preferences/payment/disabledContent.js
+++ b/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')
@@ -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',
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
new file mode 100644
index 00000000000..775b1bbbef7
--- /dev/null
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -0,0 +1,347 @@
+/* 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 {StyleSheet, css} = require('aphrodite')
+
+// components
+const Button = require('../../../../../js/components/button')
+const {FormTextbox} = require('../../textbox')
+const {FormDropdown} = require('../../dropdown')
+const {SettingsList, SettingItem} = require('../../settings')
+const LedgerTable = require('./ledgerTable')
+
+// util
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
+const {btcToCurrencyString, formattedTimeFromNow} = require('../../../../common/lib/ledgerUtil')
+const {l10nErrorText} = require('../../../../common/lib/httpUtil')
+const {changeSetting} = require('../../../lib/settingsUtil')
+
+// style
+const globalStyles = require('../../styles/global')
+const paymentStyles = require('../../styles/payment')
+const cx = require('../../../../../js/lib/classSet')
+
+const getSetting = require('../../../../../js/settings').getSetting
+const settings = require('../../../../../js/constants/settings')
+const aboutActions = require('../../../../../js/about/aboutActions')
+
+// TODO: report when funds are too low
+// TODO: support non-USD currency
+class EnabledContent extends ImmutableComponent {
+  walletButton (ledgerData) {
+    const buttonText = ledgerData.get('created')
+      ? 'addFundsTitle'
+      : (ledgerData.get('creating') ? 'creatingWallet' : 'createWallet')
+    const onButtonClick = ledgerData.get('created')
+      ? this.props.showOverlay.bind(this, 'addFunds')
+      : (ledgerData.get('creating') ? () => {} : this.createWallet(ledgerData))
+
+    return <Button data-test-id={buttonText}
+      l10nId={buttonText}
+      className={cx({
+        primaryButton: true,
+        [css(styles.addFunds)]: true
+      })}
+      onClick={onButtonClick.bind(this)}
+      disabled={ledgerData.get('creating')} />
+  }
+
+  paymentHistoryButton (ledgerData) {
+    const walletCreated = ledgerData.get('created') && !ledgerData.get('creating')
+    const walletTransactions = ledgerData.get('transactions')
+    const walletHasTransactions = walletTransactions && walletTransactions.size
+    const nextReconcileDateValue = this.nextReconcileDate(ledgerData)
+    let buttonText
+
+    if (!walletCreated || !nextReconcileDateValue) {
+      return null
+    } else if (!walletHasTransactions) {
+      buttonText = 'noPaymentHistory'
+    } else {
+      buttonText = 'viewPaymentHistory'
+    }
+
+    const l10nDataArgs = {
+      reconcileDate: nextReconcileDateValue
+    }
+
+    const onButtonClick = this.props.showOverlay.bind(this, 'paymentHistory')
+
+    return <Button
+      className={css(styles.paymentHistoryButton)}
+      l10nId={buttonText}
+      l10nArgs={l10nDataArgs}
+      onClick={onButtonClick.bind(this)}
+      disabled={ledgerData.get('creating')}
+    />
+  }
+
+  ledgerDataErrorText (ledgerData) {
+    const ledgerError = ledgerData.get('error')
+
+    if (!ledgerError) {
+      return null
+    }
+
+    // 'error' here is a chromium webRequest error as returned by request.js
+    const errorCode = ledgerError.get('error').get('errorCode')
+    return l10nErrorText(errorCode)
+  }
+
+  walletStatus (ledgerData) {
+    let status = {}
+
+    if (ledgerData.get('error')) {
+      status.id = 'statusOnError'
+    } else if (ledgerData.get('created')) {
+      const transactions = ledgerData.get('transactions')
+      const pendingFunds = Number(ledgerData.get('unconfirmed') || 0)
+
+      if (pendingFunds + Number(ledgerData.get('balance') || 0) <
+        0.9 * Number(ledgerData.get('btc') || 0)) {
+        status.id = 'insufficientFundsStatus'
+      } else if (pendingFunds > 0) {
+        status.id = 'pendingFundsStatus'
+        status.args = {funds: btcToCurrencyString(pendingFunds, ledgerData)}
+      } else if (transactions && transactions.size > 0) {
+        status.id = 'defaultWalletStatus'
+      } else {
+        status.id = 'createdWalletStatus'
+      }
+    } else if (ledgerData.get('creating')) {
+      status.id = 'creatingWalletStatus'
+    } else {
+      status.id = 'createWalletStatus'
+    }
+    return status
+  }
+
+  createWallet (ledgerData) {
+    if (!ledgerData.get('created')) {
+      aboutActions.createWallet()
+    }
+
+    return () => {}
+  }
+
+  fundsAmount (ledgerData) {
+    if (!ledgerData.get('created')) {
+      return null
+    }
+
+    return <div className={css(styles.balance)}>
+      {
+        !(ledgerData.get('balance') === undefined || ledgerData.get('balance') === null)
+          ? <FormTextbox data-test-id='fundsAmount' readOnly value={btcToCurrencyString(ledgerData.get('balance'), ledgerData)} />
+          : <span className={css(styles.loading)}>
+            <span className={css(styles.loadingText)} data-test-id='accountBalanceLoading' data-l10n-id='accountBalanceLoading' />
+          </span>
+      }
+      <a className={css(styles.iconLink)} href='https://brave.com/Payments_FAQ.html' target='_blank'>
+        <span className={cx({
+          fa: true,
+          'fa-question-circle': true,
+          [css(styles.iconText)]: true
+        })} />
+      </a>
+    </div>
+  }
+
+  nextReconcileDate (ledgerData) {
+    if ((ledgerData.get('error')) || (!ledgerData.get('reconcileStamp'))) {
+      return null
+    }
+    const timestamp = ledgerData.get('reconcileStamp')
+    return formattedTimeFromNow(timestamp)
+  }
+
+  nextReconcileMessage (ledgerData) {
+    const nextReconcileDateRelative = this.nextReconcileDate(ledgerData)
+    if (!nextReconcileDateRelative) {
+      return null
+    }
+
+    const timestamp = ledgerData.get('reconcileStamp')
+    const now = new Date().getTime()
+    let l10nDataId = 'statusNextReconcileDate'
+    if (timestamp <= now) {
+      l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
+        ? 'paymentHistoryOverdueFooterText' : 'statusNextReconcileToday'
+    }
+
+    const l10nDataArgs = {
+      reconcileDate: nextReconcileDateRelative
+    }
+
+    return <div className={css(styles.nextReconcileDate)} data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
+  }
+
+  render () {
+    const ledgerData = this.props.ledgerData
+    const walletStatus = this.walletStatus(ledgerData)
+
+    return <div>
+      <div className={css(styles.walletBar)}>
+        <table>
+          <thead>
+            <tr className={css(styles.tableTr)}>
+              <th className={css(styles.tableTh)} data-l10n-id='monthlyBudget' />
+              <th className={css(styles.tableTh)} data-l10n-id='accountBalance' />
+              <th className={css(styles.tableTh)} data-l10n-id='status' />
+            </tr>
+          </thead>
+          <tbody>
+            <tr className={css(styles.tableTr)}>
+              <td className={css(styles.tableTd)}>
+                <SettingsList containerClassName={css(styles.listContainer)}>
+                  <SettingItem>
+                    <FormDropdown
+                      data-test-id='fundsSelectBox'
+                      value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT,
+                          this.props.settings)}
+                      onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)}>
+                      {
+                        [5, 10, 15, 20].map((amount) =>
+                          <option value={amount}>{amount} {ledgerData.get('currency') || 'USD'}</option>
+                        )
+                      }
+                    </FormDropdown>
+                  </SettingItem>
+                  <SettingItem>
+                    {this.paymentHistoryButton(ledgerData)}
+                  </SettingItem>
+                </SettingsList>
+              </td>
+              <td className={css(styles.tableTd)}>
+                {
+                  ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
+                    ? <div>
+                      <div data-l10n-id='accountBalanceConnectionError' />
+                      <div className={css(styles.accountBalanceError)} data-l10n-id={this.ledgerDataErrorText(ledgerData)} />
+                    </div>
+                    : <div>
+                      <SettingsList containerClassName={css(styles.listContainer)}>
+                        <SettingItem>
+                          {this.fundsAmount(ledgerData)}
+                          {this.walletButton(ledgerData)}
+                        </SettingItem>
+                      </SettingsList>
+                    </div>
+                }
+              </td>
+              <td className={css(styles.tableTd)}>
+                <div className='walletStatus' data-l10n-id={walletStatus.id} data-l10n-args={walletStatus.args ? JSON.stringify(walletStatus.args) : null} />
+                {this.nextReconcileMessage(ledgerData)}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <LedgerTable ledgerData={this.props.ledgerData}
+        settings={this.props.settings}
+        onChangeSetting={this.props.onChangeSetting}
+        siteSettings={this.props.siteSettings} />
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  walletBar: {
+    background: globalStyles.color.lightGray,
+    borderRadius: globalStyles.radius.borderRadiusUIbox,
+    padding: paymentStyles.padding.bar,
+    margin: `${paymentStyles.margin.bar} 0`
+  },
+
+  listContainer: {
+    marginBottom: 0
+  },
+
+  tableTh: {
+    textAlign: 'left'
+  },
+
+  tableTr: {
+    height: '1em'
+  },
+
+  tableTd: {
+    fontSize: paymentStyles.font.regular,
+    padding: '10px 30px 0 0',
+    width: 'auto',
+    minWidth: paymentStyles.width.tableRow,
+    verticalAlign: 'top'
+  },
+
+  accountBalanceError: {
+    marginTop: paymentStyles.margin.barItem
+  },
+
+  nextReconcileDate: {
+    marginTop: paymentStyles.margin.barItem,
+    marginBottom: 0
+  },
+
+  settingsListContainer: {
+    marginBottom: 0
+  },
+
+  paymentHistoryButton: {
+    display: 'block',
+    fontSize: paymentStyles.font.regular,
+    lineHeight: '18px',
+    color: globalStyles.color.braveOrange,
+    height: 'auto',
+    marginTop: paymentStyles.margin.barItem,
+    padding: 0,
+    textAlign: 'left',
+    cursor: 'pointer',
+    whiteSpace: 'normal'
+  },
+
+  addFunds: {
+    minWidth: '180px',
+    width: 'auto',
+    marginTop: paymentStyles.margin.barItem
+  },
+
+  balance: {
+    display: 'flex',
+    alignItems: 'center',
+    verticalAlign: 0,
+    height: '100%',
+    marginBottom: 0
+  },
+
+  loading: {
+    height: '2.25em',
+    display: 'flex',
+    alignItems: 'center',
+    margin: 0,
+    padding: 0
+  },
+
+  loadingText: {
+    fontSize: paymentStyles.font.regular,
+    margin: 0,
+    padding: 0
+  },
+
+  iconLink: {
+    textDecoration: 'none',
+
+    ':hover': {
+      textDecoration: 'none'
+    }
+  },
+
+  iconText: {
+    color: globalStyles.color.gray,
+    margin: '0 0 0 5px',
+    fontSize: paymentStyles.font.regular
+  }
+})
+
+module.exports = EnabledContent
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index 1e16d67441f..1ec3d433bbd 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -5,27 +5,24 @@
 // Note that these are webpack requires, not CommonJS node requiring requires
 const React = require('react')
 const ImmutableComponent = require('../../../../js/components/immutableComponent')
-const {l10nErrorText} = require('../../../common/lib/httpUtil')
-const aboutActions = require('../../../../js/about/aboutActions')
 const getSetting = require('../../../../js/settings').getSetting
 const settings = require('../../../../js/constants/settings')
 const ModalOverlay = require('../../../../js/components/modalOverlay')
 const coinbaseCountries = require('../../../../js/constants/coinbaseCountries')
 const {changeSetting} = require('../../lib/settingsUtil')
-const moment = require('moment')
-moment.locale(navigator.language)
+const {btcToCurrencyString, formattedTimeFromNow} = require('../../../common/lib/ledgerUtil')
+const aboutActions = require('../../../../js/about/aboutActions')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../styles/global')
 
 // Components
 const Button = require('../../../../js/components/button')
-const {FormTextbox, RecoveryKeyTextbox} = require('../textbox')
-const {FormDropdown, SettingDropdown} = require('../dropdown')
+const {RecoveryKeyTextbox} = require('../textbox')
+const {SettingDropdown} = require('../dropdown')
 const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
-const LedgerTable = require('./payment/ledgerTable')
 const DisabledContent = require('./payment/disabledContent')
-// const EnabledContent = require('./payment/enabledContent')
+const EnabledContent = require('./payment/enabledContent')
 
 class PaymentsTab extends ImmutableComponent {
   constructor () {
@@ -37,18 +34,11 @@ class PaymentsTab extends ImmutableComponent {
 
     this.printKeys = this.printKeys.bind(this)
     this.saveKeys = this.saveKeys.bind(this)
-    this.createWallet = this.createWallet.bind(this)
     this.recoverWallet = this.recoverWallet.bind(this)
     this.handleFirstRecoveryKeyChange = this.handleFirstRecoveryKeyChange.bind(this)
     this.handleSecondRecoveryKeyChange = this.handleSecondRecoveryKeyChange.bind(this)
   }
 
-  createWallet () {
-    if (!this.props.ledgerData.get('created')) {
-      aboutActions.createWallet()
-    }
-  }
-
   handleFirstRecoveryKeyChange (e) {
     this.setState({FirstRecoveryKey: e.target.value})
   }
@@ -90,97 +80,6 @@ class PaymentsTab extends ImmutableComponent {
     return getSetting(settings.PAYMENTS_ENABLED, this.props.settings)
   }
 
-  get fundsAmount () {
-    if (!this.props.ledgerData.get('created')) {
-      return null
-    }
-
-    return <div className='balance'>
-      {
-      !(this.props.ledgerData.get('balance') === undefined || this.props.ledgerData.get('balance') === null)
-        ? <FormTextbox data-test-id='fundsAmount' readOnly value={this.btcToCurrencyString(this.props.ledgerData.get('balance'))} />
-        : <span><span data-test-id='accountBalanceLoading' data-l10n-id='accountBalanceLoading' /></span>
-      }
-      <a href='https://brave.com/Payments_FAQ.html' target='_blank'>
-        <span className='fa fa-question-circle fundsFAQ' />
-      </a>
-    </div>
-  }
-
-  get walletButton () {
-    const buttonText = this.props.ledgerData.get('created')
-      ? 'addFundsTitle'
-      : (this.props.ledgerData.get('creating') ? 'creatingWallet' : 'createWallet')
-    const onButtonClick = this.props.ledgerData.get('created')
-      ? this.props.showOverlay.bind(this, 'addFunds')
-      : (this.props.ledgerData.get('creating') ? () => {} : this.createWallet)
-    return <Button data-test-id={buttonText} l10nId={buttonText} className='primaryButton addFunds' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
-  }
-
-  get paymentHistoryButton () {
-    const walletCreated = this.props.ledgerData.get('created') && !this.props.ledgerData.get('creating')
-    const walletTransactions = this.props.ledgerData.get('transactions')
-    const walletHasTransactions = walletTransactions && walletTransactions.size
-    let buttonText
-
-    if ((!walletCreated) || (!this.nextReconcileDate)) {
-      return null
-    } else if (!walletHasTransactions) {
-      buttonText = 'noPaymentHistory'
-    } else {
-      buttonText = 'viewPaymentHistory'
-    }
-
-    const l10nDataArgs = {
-      reconcileDate: this.nextReconcileDate
-    }
-
-    const onButtonClick = this.props.showOverlay.bind(this, 'paymentHistory')
-
-    return <Button
-      className='paymentHistoryButton'
-      l10nId={buttonText}
-      l10nArgs={l10nDataArgs}
-      onClick={onButtonClick.bind(this)}
-      disabled={this.props.ledgerData.get('creating')}
-      />
-  }
-
-  get walletStatus () {
-    const ledgerData = this.props.ledgerData
-    let status = {}
-    if (ledgerData.get('error')) {
-      status.id = 'statusOnError'
-    } else if (ledgerData.get('created')) {
-      const transactions = ledgerData.get('transactions')
-      const pendingFunds = Number(ledgerData.get('unconfirmed') || 0)
-      if (pendingFunds + Number(ledgerData.get('balance') || 0) <
-          0.9 * Number(ledgerData.get('btc') || 0)) {
-        status.id = 'insufficientFundsStatus'
-      } else if (pendingFunds > 0) {
-        status.id = 'pendingFundsStatus'
-        status.args = {funds: this.btcToCurrencyString(pendingFunds)}
-      } else if (transactions && transactions.size > 0) {
-        status.id = 'defaultWalletStatus'
-      } else {
-        status.id = 'createdWalletStatus'
-      }
-    } else if (ledgerData.get('creating')) {
-      status.id = 'creatingWalletStatus'
-    } else {
-      status.id = 'createWalletStatus'
-    }
-    return status
-  }
-
-  get tableContent () {
-    // TODO: This should be sortable. #2497
-    return <LedgerTable ledgerData={this.props.ledgerData}
-      settings={this.props.settings}
-      onChangeSetting={this.props.onChangeSetting}
-      siteSettings={this.props.siteSettings} />
-  }
-
   get overlayTitle () {
     if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
       return 'addFunds'
@@ -333,7 +232,7 @@ class PaymentsTab extends ImmutableComponent {
 
   get ledgerRecoveryContent () {
     const l10nDataArgs = {
-      balance: this.btcToCurrencyString(this.props.ledgerData.get('balance'))
+      balance: btcToCurrencyString(this.props.ledgerData.get('balance'), this.props.ledgerData)
     }
     const recoverySucceeded = this.props.ledgerData.get('recoverySucceeded')
     const recoveryError = this.props.ledgerData.getIn(['error', 'error'])
@@ -392,130 +291,6 @@ class PaymentsTab extends ImmutableComponent {
     </div>
   }
 
-  get nextReconcileDate () {
-    const ledgerData = this.props.ledgerData
-    if ((ledgerData.get('error')) || (!ledgerData.get('reconcileStamp'))) {
-      return null
-    }
-    const timestamp = ledgerData.get('reconcileStamp')
-    return formattedTimeFromNow(timestamp)
-  }
-
-  get nextReconcileMessage () {
-    const ledgerData = this.props.ledgerData
-    const nextReconcileDateRelative = this.nextReconcileDate
-    if (!nextReconcileDateRelative) {
-      return null
-    }
-
-    const timestamp = ledgerData.get('reconcileStamp')
-    const now = new Date().getTime()
-    let l10nDataId = 'statusNextReconcileDate'
-    if (timestamp <= now) {
-      l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
-                     ? 'paymentHistoryOverdueFooterText' : 'statusNextReconcileToday'
-    }
-
-    const l10nDataArgs = {
-      reconcileDate: nextReconcileDateRelative
-    }
-    return <div className='nextReconcileDate' data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
-  }
-
-  get ledgerDataErrorText () {
-    const ledgerError = this.props.ledgerData.get('error')
-    if (!ledgerError) {
-      return null
-    }
-    // 'error' here is a chromium webRequest error as returned by request.js
-    const errorCode = ledgerError.get('error').get('errorCode')
-    return l10nErrorText(errorCode)
-  }
-
-  btcToCurrencyString (btc) {
-    const balance = Number(btc || 0)
-    const currency = this.props.ledgerData.get('currency') || 'USD'
-    if (balance === 0) {
-      return `0 ${currency}`
-    }
-    if (this.props.ledgerData.get('btc') && typeof this.props.ledgerData.get('amount') === 'number') {
-      const btcValue = this.props.ledgerData.get('btc') / this.props.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`
-  }
-
-  get enabledContent () {
-    // TODO: report when funds are too low
-    // TODO: support non-USD currency
-    return <div>
-      <div className='walletBar'>
-        <table>
-          <thead>
-            <tr>
-              <th data-l10n-id='monthlyBudget' />
-              <th data-l10n-id='accountBalance' />
-              <th data-l10n-id='status' />
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <SettingsList>
-                  <SettingItem>
-                    <FormDropdown
-                      data-test-id='fundsSelectBox'
-                      value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT,
-                        this.props.settings)}
-                      onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)}>
-                      {
-                        [5, 10, 15, 20].map((amount) =>
-                          <option value={amount}>{amount} {this.props.ledgerData.get('currency') || 'USD'}</option>
-                        )
-                      }
-                    </FormDropdown>
-                  </SettingItem>
-                  <SettingItem>
-                    {this.paymentHistoryButton}
-                  </SettingItem>
-                </SettingsList>
-              </td>
-              <td>
-                {
-                  this.props.ledgerData.get('error') && this.props.ledgerData.get('error').get('caller') === 'getWalletProperties'
-                    ? <div>
-                      <div data-l10n-id='accountBalanceConnectionError' />
-                      <div className='accountBalanceError' data-l10n-id={this.ledgerDataErrorText} />
-                    </div>
-                    : <div>
-                      <SettingsList>
-                        <SettingItem>
-                          {this.fundsAmount}
-                          {this.walletButton}
-                        </SettingItem>
-                      </SettingsList>
-                    </div>
-                }
-              </td>
-              <td>
-                <div className='walletStatus' data-l10n-id={this.walletStatus.id} data-l10n-args={this.walletStatus.args ? JSON.stringify(this.walletStatus.args) : null} />
-                {this.nextReconcileMessage}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      {this.tableContent}
-    </div>
-  }
-
   render () {
     return <div className='paymentsContainer'>
       {
@@ -575,17 +350,18 @@ class PaymentsTab extends ImmutableComponent {
       </div>
       {
         this.enabled
-          ? this.enabledContent
+          ? <EnabledContent settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting}
+            ledgerData={this.props.ledgerData}
+            showOverlay={this.props.showOverlay}
+            siteSettings={this.props.siteSettings}
+          />
           : <DisabledContent />
       }
     </div>
   }
 }
 
-function formattedTimeFromNow (timestamp) {
-  return moment(new Date(timestamp)).fromNow()
-}
-
 const styles = StyleSheet.create({
   copyKeyContainer: {
     display: 'flex',
diff --git a/app/renderer/components/settings.js b/app/renderer/components/settings.js
index 5d4d474dbac..e2e2a3d4d98 100644
--- a/app/renderer/components/settings.js
+++ b/app/renderer/components/settings.js
@@ -9,10 +9,14 @@ const aboutActions = require('../../../js/about/aboutActions')
 const getSetting = require('../../../js/settings').getSetting
 const {changeSetting} = require('../lib/settingsUtil')
 const SwitchControl = require('../../../js/components/switchControl')
+const cx = require('../../../js/lib/classSet')
 
 class SettingsList extends ImmutableComponent {
   render () {
-    return <div className='settingsListContainer'>
+    return <div className={cx({
+      settingsListContainer: true,
+      [this.props.containerClassName]: !!this.props.containerClassName
+    })}>
       {
         this.props.dataL10nId
         ? <div className='settingsListTitle' data-l10n-id={this.props.dataL10nId} />
diff --git a/app/renderer/components/styles/payment.js b/app/renderer/components/styles/payment.js
new file mode 100644
index 00000000000..53a43749460
--- /dev/null
+++ b/app/renderer/components/styles/payment.js
@@ -0,0 +1,22 @@
+/* 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 paymentStyles = {
+  font: {
+    regular: '14.5px'
+  },
+  margin: {
+    bar: '15px',
+    barItem: '12px'
+  },
+  padding: {
+    bar: '18px' // margin.barItem * 1.5
+  },
+  width: {
+    tableRow: '235px',
+    tableCell: '265px' // width.tableRow + 30px
+  }
+}
+
+module.exports = paymentStyles
diff --git a/less/about/preferences.less b/less/about/preferences.less
index e18b5ba6682..60c1f778274 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -860,120 +860,12 @@ table.sortableTable {
       }
     }
   }
-
-  // This defines the styling of the control panel (2nd) on about:preferences#payments
   .walletBar {
-
-    background: @lightGray;
-    border-radius: @borderRadiusUIbox;
-    padding: @walletBarPadding;
-    margin: @walletBarMargin 0;
-
-    th {
-      text-align: left;
-    }
-
-    tr {
-      height: 1em;
-    }
-
     td {
-      font-size: @fontSize;
-      padding: 10px 30px 0 0; // .settingsList .settingItem > *:not(.switchControl) 10px
-      width: auto;
-      min-width: @walletBarTableRowWidth;
-      vertical-align: top;
-
       .settingsListContainer {
-        margin-bottom: 0;
-
-        .settingsList {
-          .settingItem {
-            .fundsAmount,
-            .fundsSelectBox,
-            .addFunds {
-              min-width: 180px;
-              width: auto;
-            }
-
-            .fundsSelectBox {
-              margin-bottom: 0;
-            }
-          }
-        }
-      }
-    }
-
-    .settingsList .settingItem {
-
-      .paymentHistoryButton {
-        display: block;
-        font-size: @fontSize;
-        line-height: 18px;
-        color: @braveOrange;
-        height: auto;
-        margin-top: @walletBarItemMargin;
-        padding: 0;
-        text-align: left;
-        cursor: pointer;
-        white-space: normal;
-      }
-
-      .balance {
-        display: flex;
-        align-items: center;
-        vertical-align: 0;
-        height: 100%;
-        margin-bottom: 0;
-
-        span {
-          font-size: @fontSize; // for "Loading..." and .fundsFAQ
-        }
-
-        > span {
-          height: 2.25em; // .form-control
-          display: flex;
-          align-items: center;
-          margin: 0;
-          padding: 0; // .fundsFAQ
-
-          > span {
-            margin: 0; // for "Loading..."
-            padding: 0; // .fundsFAQ
-          }
-        }
-
-        + button {
-          margin-top: @walletBarItemMargin;
-        }
-
-        a {
-          &:hover {
-            text-decoration: none;
-          }
-
-          .fundsFAQ {
-            color: @gray;
-            margin: 0 0 0 5px;
-          }
-        }
+        margin-bottom: 0; // TODO how ????
       }
     }
-
-    .fundsAmount {
-      display: inline;
-      margin: 0;
-      width: auto;
-    }
-
-    .accountBalanceError,
-    .nextReconcileDate {
-      margin-top: @walletBarItemMargin;
-    }
-
-    .nextReconcileDate {
-      margin-bottom: 0;
-    }
   }
 }