diff --git a/app/renderer/components/preferences/payment/advanceSettings.js b/app/renderer/components/preferences/payment/advanceSettings.js
index ca19e88b812..bf1a8e28400 100644
--- a/app/renderer/components/preferences/payment/advanceSettings.js
+++ b/app/renderer/components/preferences/payment/advanceSettings.js
@@ -14,20 +14,15 @@ const {SettingsList, SettingItem, SettingCheckbox} = require('../../settings')
 const {SettingDropdown} = require('../../dropdown')
 const ImmutableComponent = require('../../../../../js/components/immutableComponent')
 
+// other
+const settings = require('../../../../../js/constants/settings')
+
 // style
 const commonStyles = require('../../styles/commonStyles')
 const globalStyles = require('../../styles/global')
 const {paymentCommon} = require('../../styles/payment')
 
-// other
-const settings = require('../../../../../js/constants/settings')
-const getSetting = require('../../../../../js/settings').getSetting
-
 class AdvanceSettingsContent extends ImmutableComponent {
-  get enabled () {
-    return getSetting(settings.PAYMENTS_ENABLED, this.props.settings)
-  }
-
   render () {
     const minDuration = this.props.ledgerData.getIn(['synopsisOptions', 'minDuration'])
     const minPublisherVisits = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherVisits'])
@@ -64,29 +59,28 @@ class AdvanceSettingsContent extends ImmutableComponent {
           </SettingsList>
         </div>
         <div className={css(styles.settingsPanelDivider, styles.lastDivider)}>
-          {this.enabled
-            ? <SettingsList className={css(commonStyles.noMarginBottom)}
-              listClassName={css(styles.list)}>
-              <SettingCheckbox
-                dataL10nId='minimumPercentage'
-                prefKey={settings.MINIMUM_PERCENTAGE}
-                settings={this.props.settings}
-                onChangeSetting={this.props.onChangeSetting}
-                className={css(styles.listItem)}
-                switchClassName={css(styles.checkboxSwitch)}
-                labelClassName={css(commonStyles.noMarginBottom)}
-              />
-              <SettingCheckbox
-                dataL10nId='notifications'
-                prefKey={settings.PAYMENTS_NOTIFICATIONS}
-                settings={this.props.settings}
-                onChangeSetting={this.props.onChangeSetting}
-                className={css(styles.listItem, commonStyles.noMarginBottom)}
-                switchClassName={css(styles.checkboxSwitch)}
-                labelClassName={css(commonStyles.noMarginBottom)}
-              />
-            </SettingsList>
-            : null}
+          <SettingsList className={css(commonStyles.noMarginBottom)}
+            listClassName={css(styles.list)}
+          >
+            <SettingCheckbox
+              dataL10nId='minimumPercentage'
+              prefKey={settings.MINIMUM_PERCENTAGE}
+              settings={this.props.settings}
+              onChangeSetting={this.props.onChangeSetting}
+              className={css(styles.listItem)}
+              switchClassName={css(styles.checkboxSwitch)}
+              labelClassName={css(commonStyles.noMarginBottom)}
+            />
+            <SettingCheckbox
+              dataL10nId='notifications'
+              prefKey={settings.PAYMENTS_NOTIFICATIONS}
+              settings={this.props.settings}
+              onChangeSetting={this.props.onChangeSetting}
+              className={css(styles.listItem, commonStyles.noMarginBottom)}
+              switchClassName={css(styles.checkboxSwitch)}
+              labelClassName={css(commonStyles.noMarginBottom)}
+            />
+          </SettingsList>
         </div>
       </div>
     </div>
@@ -143,8 +137,8 @@ const styles = StyleSheet.create({
   },
   checkboxSwitch: {
     marginTop: '2px',
-    paddingTop: '0',
-    paddingBottom: '0'
+    paddingTop: 0,
+    paddingBottom: 0
   }
 })
 
diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js
index 09bb538829a..5e1b9f53942 100644
--- a/app/renderer/components/preferences/payment/bitcoinDashboard.js
+++ b/app/renderer/components/preferences/payment/bitcoinDashboard.js
@@ -33,37 +33,43 @@ class BitcoinDashboard extends ImmutableComponent {
     this.openBuyURLTab = this.openBuyURLTab.bind(this)
   }
 
-  openBuyURLTab () {
-    // close parent dialog
-    this.props.hideParentOverlay()
+  get currency () {
+    return this.props.ledgerData.get('currency') || 'USD'
   }
 
-  get ledgerData () {
-    return this.props.ledgerData
+  get amount () {
+    return getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings) || 0
   }
 
-  get bitcoinOverlayContent () {
-    return <iframe src={this.ledgerData.get('buyURL')} />
+  get canUseCoinbase () {
+    if (!this.props.ledgerData.get('buyMaximumUSD')) return true
+
+    return this.currency === 'USD' && this.amount < this.props.ledgerData.get('buyMaximumUSD')
   }
 
-  get bitcoinPurchaseButton () {
-    if (!this.ledgerData.get('buyURLFrame')) {
+  get userInAmerica () {
+    const countryCode = this.props.ledgerData.get('countryCode')
+    return !(countryCode && countryCode !== 'US')
+  }
+
+  bitcoinPurchaseButton () {
+    if (!this.props.ledgerData.get('buyURLFrame')) {
       return <Button l10nId='add' className={css(commonStyles.buttonPrimary, styles.panelButton)} onClick={this.props.showOverlay.bind(this)} />
     }
 
-    return <a href={this.ledgerData.get('buyURL')} target='_blank' onClick={this.openBuyURLTab}>
+    return <a href={this.props.ledgerData.get('buyURL')} target='_blank' onClick={this.openBuyURLTab}>
       <Button l10nId='add' className={css(commonStyles.buttonPrimary, styles.panelButton)} />
     </a>
   }
 
-  get qrcodeOverlayContent () {
+  qrcodeOverlayContent () {
     return <div>
-      <img className={css(styles.qrcodeImage)} src={this.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
+      <img className={css(styles.qrcodeImage)} src={this.props.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
       <div className={css(styles.bitcoinQRTitle)} data-l10n-id='bitcoinQR' />
     </div>
   }
 
-  get qrcodeOverlayFooter () {
+  qrcodeOverlayFooter () {
     if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
       return <div className={css(styles.qrcodeOverlayFooter)}>
         <div className={css(styles.coinbaseLogo)} />
@@ -75,26 +81,7 @@ class BitcoinDashboard extends ImmutableComponent {
     return null
   }
 
-  get currency () {
-    return this.props.ledgerData.get('currency') || 'USD'
-  }
-
-  get amount () {
-    return getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings) || 0
-  }
-
-  get canUseCoinbase () {
-    if (!this.props.ledgerData.get('buyMaximumUSD')) return true
-
-    return this.currency === 'USD' && this.amount < this.props.ledgerData.get('buyMaximumUSD')
-  }
-
-  get userInAmerica () {
-    const countryCode = this.props.ledgerData.get('countryCode')
-    return !(countryCode && countryCode !== 'US')
-  }
-
-  get coinbasePanel () {
+  coinbasePanel () {
     if (this.canUseCoinbase) {
       return <div className={css(paymentCommon.panel, styles.panel, commonStyles.noMarginTop)}>
         <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
@@ -131,7 +118,7 @@ class BitcoinDashboard extends ImmutableComponent {
     }
   }
 
-  get exchangePanel () {
+  exchangePanel () {
     const url = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeURL'])
     const name = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeName'])
     // Call worldWidePanel if we don't have the URL or Name
@@ -157,7 +144,7 @@ class BitcoinDashboard extends ImmutableComponent {
     }
   }
 
-  get smartphonePanel () {
+  smartphonePanel () {
     return <div className={css(paymentCommon.panel, styles.panel, commonStyles.noMarginBottom)}>
       <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst, styles.alignMiddle)}>
         <span className={cx({
@@ -174,8 +161,8 @@ class BitcoinDashboard extends ImmutableComponent {
     </div>
   }
 
-  get panelFooter () {
-    if (this.ledgerData.get('buyURLFrame')) {
+  panelFooter () {
+    if (this.props.ledgerData.get('buyURLFrame')) {
       return <div className={css(paymentCommon.panelFooter, styles.panelFooter)}>
         <Button l10nId='done' className={css(commonStyles.whiteButton)} onClick={this.props.hideParentOverlay} />
       </div>
@@ -194,6 +181,15 @@ class BitcoinDashboard extends ImmutableComponent {
     }
   }
 
+  openBuyURLTab () {
+    // close parent dialog
+    this.props.hideParentOverlay()
+  }
+
+  bitcoinOverlayContent () {
+    return <iframe src={this.props.ledgerData.get('buyURL')} />
+  }
+
   worldWidePanel () {
     return <div className={css(paymentCommon.panel, styles.panel)}>
       <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
@@ -239,6 +235,7 @@ class BitcoinDashboard extends ImmutableComponent {
 
   render () {
     window.addEventListener('message', this.onMessage.bind(this), false)
+    const ledgerData = this.props.ledgerData
 
     // TODO remove bitcoinDashboard class
     return <div className='bitcoinDashboard' data-test-id='bitcoinDashboard'>
@@ -246,7 +243,7 @@ class BitcoinDashboard extends ImmutableComponent {
         this.props.bitcoinOverlayVisible
           ? <ModalOverlay
             title={'bitcoinBuy'}
-            content={this.bitcoinOverlayContent}
+            content={this.bitcoinOverlayContent()}
             customTitleClasses={'coinbaseOverlay'}
             emptyDialog
             onHide={this.props.hideOverlay.bind(this)}
@@ -256,18 +253,18 @@ class BitcoinDashboard extends ImmutableComponent {
       {
         this.props.qrcodeOverlayVisible
           ? <ModalOverlay
-            content={this.qrcodeOverlayContent}
+            content={this.qrcodeOverlayContent()}
             customTitleClasses={'qrcodeOverlay'}
-            footer={this.qrcodeOverlayFooter}
+            footer={this.qrcodeOverlayFooter()}
             onHide={this.props.hideQRcode.bind(this)}
           />
           : null
       }
       <div className={css(paymentCommon.board)}>
         {
-          (this.userInAmerica || this.ledgerData.get('buyURLFrame'))
-            ? this.coinbasePanel
-            : this.exchangePanel
+          (this.userInAmerica || ledgerData.get('buyURLFrame'))
+            ? this.coinbasePanel()
+            : this.exchangePanel()
         }
         <div className={css(paymentCommon.panel, styles.panel)}>
           <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
@@ -295,12 +292,12 @@ class BitcoinDashboard extends ImmutableComponent {
             <div className={css(styles.settingsListTitle, styles.subTitle)} data-l10n-id='bitcoinAddDescription' />
           </div>
           {
-            this.ledgerData.get('address')
+            ledgerData.get('address')
               ? <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
                 {
-                  this.ledgerData.get('hasBitcoinHandler') && this.ledgerData.get('paymentURL')
+                  ledgerData.get('hasBitcoinHandler') && ledgerData.get('paymentURL')
                     ? <div className={css(styles.hasBitcoinHandler)}>
-                      <a href={this.ledgerData.get('paymentURL')} target='_blank'>
+                      <a href={ledgerData.get('paymentURL')} target='_blank'>
                         <Button l10nId='bitcoinVisitAccount'
                           className={css(commonStyles.buttonPrimary, styles.bitcoinAddressButton)}
                         />
@@ -311,10 +308,10 @@ class BitcoinDashboard extends ImmutableComponent {
                       <div data-l10n-id='bitcoinPaymentURL' className={css(styles.walletLabelText)} />
                     </div>
                 }
-                <div className={css(styles.walletAddressText)}>{this.ledgerData.get('address')}</div>
+                <div className={css(styles.walletAddressText)}>{ledgerData.get('address')}</div>
                 <Button className={css(commonStyles.buttonPrimary, styles.panelButton)}
                   l10nId='copyToClipboard'
-                  onClick={this.copyToClipboard.bind(this, this.ledgerData.get('address'))}
+                  onClick={this.copyToClipboard.bind(this, ledgerData.get('address'))}
                 />
               </div>
               : <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
@@ -322,8 +319,8 @@ class BitcoinDashboard extends ImmutableComponent {
               </div>
           }
         </div>
-        {this.smartphonePanel}
-        {this.panelFooter}
+        {this.smartphonePanel()}
+        {this.panelFooter()}
       </div>
     </div>
   }
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index bc085991e9d..b69105b378c 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -32,13 +32,14 @@ const aboutActions = require('../../../../../js/about/aboutActions')
 // TODO: report when funds are too low
 // TODO: support non-USD currency
 class EnabledContent extends ImmutableComponent {
-  walletButton (ledgerData) {
+  walletButton () {
+    const ledgerData = this.props.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))
+      : (ledgerData.get('creating') ? () => {} : this.createWallet())
 
     return <Button
       testId={buttonText}
@@ -50,11 +51,12 @@ class EnabledContent extends ImmutableComponent {
     />
   }
 
-  paymentHistoryButton (ledgerData) {
+  paymentHistoryButton () {
+    const ledgerData = this.props.ledgerData
     const walletCreated = ledgerData.get('created') && !ledgerData.get('creating')
     const walletTransactions = ledgerData.get('transactions')
     const walletHasTransactions = walletTransactions && walletTransactions.size
-    const nextReconcileDateValue = this.nextReconcileDate(ledgerData)
+    const nextReconcileDateValue = this.nextReconcileDate()
     let buttonText
 
     if (!walletCreated || !nextReconcileDateValue) {
@@ -81,7 +83,8 @@ class EnabledContent extends ImmutableComponent {
     />
   }
 
-  ledgerDataErrorText (ledgerData) {
+  ledgerDataErrorText () {
+    const ledgerData = this.props.ledgerData
     const ledgerError = ledgerData.get('error')
 
     if (!ledgerError) {
@@ -93,7 +96,8 @@ class EnabledContent extends ImmutableComponent {
     return l10nErrorText(errorCode)
   }
 
-  walletStatus (ledgerData) {
+  walletStatus () {
+    const ledgerData = this.props.ledgerData
     let status = {}
 
     if (ledgerData.get('error')) {
@@ -121,7 +125,8 @@ class EnabledContent extends ImmutableComponent {
     return status
   }
 
-  createWallet (ledgerData) {
+  createWallet () {
+    const ledgerData = this.props.ledgerData
     if (!ledgerData.get('created')) {
       aboutActions.createWallet()
     }
@@ -129,7 +134,8 @@ class EnabledContent extends ImmutableComponent {
     return () => {}
   }
 
-  fundsAmount (ledgerData) {
+  fundsAmount () {
+    const ledgerData = this.props.ledgerData
     if (!ledgerData.get('created')) {
       return null
     }
@@ -152,7 +158,8 @@ class EnabledContent extends ImmutableComponent {
     </div>
   }
 
-  nextReconcileDate (ledgerData) {
+  nextReconcileDate () {
+    const ledgerData = this.props.ledgerData
     if ((ledgerData.get('error')) || (!ledgerData.get('reconcileStamp'))) {
       return null
     }
@@ -160,8 +167,9 @@ class EnabledContent extends ImmutableComponent {
     return formattedTimeFromNow(timestamp)
   }
 
-  nextReconcileMessage (ledgerData) {
-    const nextReconcileDateRelative = this.nextReconcileDate(ledgerData)
+  nextReconcileMessage () {
+    const ledgerData = this.props.ledgerData
+    const nextReconcileDateRelative = this.nextReconcileDate()
     if (!nextReconcileDateRelative) {
       return null
     }
@@ -183,7 +191,7 @@ class EnabledContent extends ImmutableComponent {
 
   render () {
     const ledgerData = this.props.ledgerData
-    const walletStatus = this.walletStatus(ledgerData)
+    const walletStatus = this.walletStatus()
 
     return <div>
       <div className={css(styles.walletBar)} data-test-id='walletBar'>
@@ -202,8 +210,7 @@ class EnabledContent extends ImmutableComponent {
                   <SettingItem>
                     <FormDropdown
                       data-test-id='fundsSelectBox'
-                      value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT,
-                          this.props.settings)}
+                      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) =>
@@ -213,7 +220,7 @@ class EnabledContent extends ImmutableComponent {
                     </FormDropdown>
                   </SettingItem>
                   <SettingItem>
-                    {this.paymentHistoryButton(ledgerData)}
+                    {this.paymentHistoryButton()}
                   </SettingItem>
                 </SettingsList>
               </td>
@@ -222,13 +229,13 @@ class EnabledContent extends ImmutableComponent {
                   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 className={css(styles.accountBalanceError)} data-l10n-id={this.ledgerDataErrorText()} />
                     </div>
                     : <div>
                       <SettingsList className={css(styles.listContainer)}>
                         <SettingItem>
-                          {this.fundsAmount(ledgerData)}
-                          {this.walletButton(ledgerData)}
+                          {this.fundsAmount()}
+                          {this.walletButton()}
                         </SettingItem>
                       </SettingsList>
                     </div>
@@ -239,7 +246,7 @@ class EnabledContent extends ImmutableComponent {
                   data-l10n-id={walletStatus.id}
                   data-l10n-args={walletStatus.args ? JSON.stringify(walletStatus.args) : null}
                 />
-                {this.nextReconcileMessage(ledgerData)}
+                {this.nextReconcileMessage()}
               </td>
             </tr>
           </tbody>
diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js
index 45c03110acf..122a8cef12b 100644
--- a/app/renderer/components/preferences/payment/ledgerTable.js
+++ b/app/renderer/components/preferences/payment/ledgerTable.js
@@ -202,12 +202,12 @@ const styles = StyleSheet.create({
   disabled: verifiedBadge(verifiedWhiteIcon),
 
   neverShowSiteIcon: {
-    opacity: '0',
+    opacity: 0,
     fontSize: '20px',
     textAlign: 'center',
 
     ':hover': {
-      opacity: '1'
+      opacity: 1
     }
   },
 
@@ -257,21 +257,21 @@ const styles = StyleSheet.create({
 
   hideExcludedSites: {
     display: 'flex',
-    flex: '1',
+    flex: 1,
     alignItems: 'center',
     height: '35px'
   },
 
   columnOffset: {
     display: 'flex',
-    flexGrow: '8',
-    flexShrink: '8'
+    flexGrow: 8,
+    flexShrink: 8
   },
 
   rightColumn: {
     display: 'flex',
-    flexGrow: '1',
-    flexShrink: '1'
+    flexGrow: 1,
+    flexShrink: 1
   },
 
   alignRight: {
@@ -279,7 +279,7 @@ const styles = StyleSheet.create({
   },
 
   paymentsDisabled: {
-    opacity: '0.6'
+    opacity: 0.6
   }
 })
 
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 2fa068616e0..e95ab2d217c 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -117,7 +117,7 @@ const styles = StyleSheet.create({
     minWidth: '78px',
     fontSize: '0.9rem',
     padding: '8px 20px',
-    margin: '0',
+    margin: 0,
 
     ':hover': {
       border: `1px solid ${globalStyles.color.gray}`,
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 827cbd77be9..6afc7fb5194 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -293,14 +293,6 @@ table.sortableTable {
 
 // about:preferences#payments
 .paymentsContainer {
-  @fontSize: 14.5px; // .form-control
-
-  @walletBarTableRowWidth: 235px;
-  @walletBarTableData: @walletBarTableRowWidth + 30px; // .walletBar td (min-width + padding)
-  @walletBarMargin: 15px;
-  @walletBarItemMargin: 12px;
-  @walletBarPadding: @walletBarItemMargin * 1.5;
-
   // General properties on about:preferences#payments.
   // Make sure any change here could cause unexpected regressions.
   a {
@@ -342,17 +334,14 @@ table.sortableTable {
 
       // Specific properties of the Payment History
       &.paymentHistory {
-        @padding-horizontal: 30px;
-
-        .dialog-header,
         .dialog-footer {
-          padding: 20px @padding-horizontal;
+          padding: 20px 30px;
         }
 
         .dialog-body {
           background: #FFF;
           height: 300px;
-          overflow-y: scroll;
+          overflow-y: auto;
           padding-right: 0;
           padding-left: 0;
         }
@@ -396,36 +385,9 @@ table.sortableTable {
       }
     }
   }
-
-  // This defines the styling of the title row (1st) on about:preferences#payments
-  .titleBar {
-    .paymentsSwitches {
-
-      .enablePaymentsSwitch,
-      .autoSuggestSwitch {
-
-        .settingItem
-
-        span,
-        .moreInfoBtn {
-        }
-      }
-
-      .autoSuggestSwitch {
-        .moreInfoBtn {
-        }
-      }
-    }
-  }
-  .walletBar {
-    td {
-      .settingsListContainer {
-        margin-bottom: 0; // TODO how ????
-      }
-    }
-  }
 }
 
+// TODO check what to remove
 .board {
   overflow-x: hidden;
   clear: both;