diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties index 4b6b0cffe6..f5318a8e1a 100644 --- a/app/extensions/brave/locales/en-US/preferences.properties +++ b/app/extensions/brave/locales/en-US/preferences.properties @@ -112,8 +112,8 @@ contributionStatementFooterNoteBoxBody2=Brave Payments uses a statistical model contributionStatementCopyrightFooter=©2016 - {{currentYear}} Brave Software. Brave is a registered trademark of Brave Software. Site names may be trademarks or registered trademarks of the site owner. contributionStatements=Contribution statements listOfContributionStatements=List of contribution statements -bitcoinAddress=Your Brave wallet address is: bitcoinPaymentURL=Your Brave wallet address +bitcoinQRImg.title=Brave wallet QR code bitcoinQR=Your Brave wallet QR code paymentHistoryTitle=Your Payment History bitcoinCopyAddress=Copy Bitcoin address to clipboard diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js index 1102ec16eb..c71ce3a2db 100644 --- a/app/renderer/components/preferences/payment/advancedSettings.js +++ b/app/renderer/components/preferences/payment/advancedSettings.js @@ -18,7 +18,6 @@ const ImmutableComponent = require('../../immutableComponent') // style const commonStyles = require('../../styles/commonStyles') const globalStyles = require('../../styles/global') -const {paymentCommon} = require('../../styles/payment') // other const settings = require('../../../../../js/constants/settings') @@ -28,90 +27,89 @@ class AdvancedSettingsContent extends ImmutableComponent { const minPublisherDuration = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherDuration']) const minPublisherVisits = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherVisits']) - return
-
-
-
- - - - - - -
- - - - - - -
-
- - - - -
+ return
+
+
+ + + + + + +
+ + + + + +
-
+
+ + + + +
+
} } class AdvancedSettingsFooter extends ImmutableComponent { render () { - return
-
+ } } const styles = StyleSheet.create({ advancedSettings: { - paddingLeft: '50px', - paddingRight: '50px', display: 'flex', flexWrap: 'nowrap' }, diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js index 0815c0ffee..f728d53cae 100644 --- a/app/renderer/components/preferences/payment/bitcoinDashboard.js +++ b/app/renderer/components/preferences/payment/bitcoinDashboard.js @@ -3,18 +3,18 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ const React = require('react') -const {StyleSheet, css} = require('aphrodite') +const {StyleSheet, css} = require('aphrodite/no-important') // components const Button = require('../../../../../js/components/button') +const cx = require('../../../../../js/lib/classSet') const ModalOverlay = require('../../../../../js/components/modalOverlay') const ImmutableComponent = require('../../immutableComponent') // styles -const commonStyles = require('../../styles/commonStyles') const globalStyles = require('../../styles/global') -const {paymentCommon} = require('../../styles/payment') -const cx = require('../../../../../js/lib/classSet') +const commonStyles = require('../../styles/commonStyles') + const CoinBase = require('../../../../extensions/brave/img/coinbase_logo.png') const Andorid = require('../../../../extensions/brave/img/android_download.svg') const IOS = require('../../../../extensions/brave/img/ios_download.svg') @@ -52,6 +52,45 @@ class BitcoinDashboard extends ImmutableComponent { return !(countryCode && countryCode !== 'US') } + openBuyURLTab () { + // close parent dialog + this.props.hideParentOverlay() + } + + faCreditCard () { + return + } + faBitcoin () { + return + + + + } + faSmartphone () { + return + } + bitcoinPurchaseButton () { if (!this.props.ledgerData.get('buyURLFrame')) { /* TODO refactor button */ @@ -61,7 +100,8 @@ class BitcoinDashboard extends ImmutableComponent { })} l10nId='add' testId='bitcoinPurchaseButton' - onClick={this.props.showOverlay.bind(this)} /> + onClick={this.props.showOverlay.bind(this)} + /> } return @@ -71,66 +111,58 @@ class BitcoinDashboard extends ImmutableComponent { [css(styles.panelButton)]: true })} l10nId='add' - testId='bitcoinPurchaseButton' /> + testId='bitcoinPurchaseButton' + /> } - qrcodeOverlayContent () { - return
- -
-
- } - - qrcodeOverlayFooter () { - if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) { - return
- - } - - return null - } - coinbasePanel () { if (this.canUseCoinbase) { - return
-
- -
-
+ return
+
+
+
+ {this.faCreditCard()} +
+
+
+
+
+
-
+
{this.bitcoinPurchaseButton()} -
+
-
+
} else { - return
-
- -
-
+ return
+
+
+
+ {this.faCreditCard()} +
+
+
+
+
+
-
+
-
+
} } - exchangePanel () { const url = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeURL']) const name = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeName']) @@ -138,17 +170,18 @@ class BitcoinDashboard extends ImmutableComponent { if (!url || !name) { return this.worldWidePanel() } else { - return
-
- -
+ return
+
+
+
+ {this.faCreditCard()} +
+
+
+
+
- +
} } + worldWidePanel () { + return
+
+ } + + bitcoinPanel () { + const ledgerData = this.props.ledgerData + + return
+
+
+
+ {this.faBitcoin()} +
+
+
+
+
+
+
+ { + ledgerData.get('address') + ?
+ { + ledgerData.get('hasBitcoinHandler') && ledgerData.get('paymentURL') + ? + : null + } +
+
{ledgerData.get('address')}
+ {/* TODO: refactor button.js */} +
+ :
+
+
+ } +
+ } smartphonePanel () { - return
-
- -
+ return
+
+
+
+ {this.faSmartphone()} +
+
+
+
+
-
+
{/* TODO: refactor button.js */}
-
+
} - panelFooter () { - if (this.props.ledgerData.get('buyURLFrame')) { - return
- {/* TODO: refactor button.js */} -
- } else if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) { - return
-
-
- -
- {/* TODO: refactor button.js */} -
- } else { - return
- {/* TODO: refactor button.js */} -
- } + qrcodeOverlayContent () { + return
+ +
+
} - - openBuyURLTab () { - // close parent dialog - this.props.hideParentOverlay() + qrcodeOverlayFooter () { + if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) { + return
+
+ } + return null } bitcoinOverlayContent () { - return