From 0bfceebebd1b29d6ea047864ab4206e6ef78d4b2 Mon Sep 17 00:00:00 2001 From: Nejc Zdovc Date: Sun, 12 Mar 2017 21:44:25 +0100 Subject: [PATCH] Refactor of paymentTab (#7481) Resolves #7501 #7380 #6364 Auditors: @bsclifton @cezaraugusto Test plan: - everything should work the same as was before the chage --- app/common/lib/ledgerUtil.js | 67 ++ .../locales/en-US/preferences.properties | 6 + .../preferences/payment/advancedSettings.js | 147 ++++ .../preferences/payment/bitcoinDashboard.js | 465 ++++++++++++ .../preferences/payment/disabledContent.js | 121 +++ .../preferences/payment/enabledContent.js | 337 +++++++++ .../{paymentHistory.js => payment/history.js} | 71 +- .../preferences/payment/ledgerBackup.js | 128 ++++ .../preferences/payment/ledgerRecovery.js | 193 +++++ .../preferences/{ => payment}/ledgerTable.js | 41 +- .../components/preferences/paymentsTab.js | 699 ++++-------------- app/renderer/components/publisherToggle.js | 4 + app/renderer/components/settings.js | 53 +- .../components/styles/commonStyles.js | 72 +- app/renderer/components/styles/payment.js | 57 ++ js/about/preferences.js | 223 +----- js/components/button.js | 4 + less/about/preferences.less | 618 +--------------- test/lib/selectors.js | 18 +- test/unit/about/preferencesTest.js | 13 +- test/unit/app/renderer/paymentsTabTest.js | 75 +- 21 files changed, 1954 insertions(+), 1458 deletions(-) create mode 100644 app/renderer/components/preferences/payment/advancedSettings.js create mode 100644 app/renderer/components/preferences/payment/bitcoinDashboard.js create mode 100644 app/renderer/components/preferences/payment/disabledContent.js create mode 100644 app/renderer/components/preferences/payment/enabledContent.js rename app/renderer/components/preferences/{paymentHistory.js => payment/history.js} (64%) create mode 100644 app/renderer/components/preferences/payment/ledgerBackup.js create mode 100644 app/renderer/components/preferences/payment/ledgerRecovery.js rename app/renderer/components/preferences/{ => payment}/ledgerTable.js (88%) 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..6f3b7fb7a58 100644 --- a/app/common/lib/ledgerUtil.js +++ b/app/common/lib/ledgerUtil.js @@ -5,6 +5,7 @@ 'use strict' const {responseHasContent} = require('./httpUtil') +const moment = require('moment') /** * Is page an actual page being viewed by the user? (not an error page, etc) @@ -39,3 +40,69 @@ 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) => { + moment.locale(navigator.language) + return moment(new Date(timestamp)).fromNow() +} + +module.exports.formattedDateFromTimestamp = (timestamp) => { + moment.locale(navigator.language) + return moment(new Date(timestamp)).format('YYYY-MM-DD') +} + +module.exports.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: module.exports.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 +} diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties index b856f2e03dd..03d8f9c1cc7 100644 --- a/app/extensions/brave/locales/en-US/preferences.properties +++ b/app/extensions/brave/locales/en-US/preferences.properties @@ -205,6 +205,12 @@ ledgerBackupTitle=Backup your Brave wallet ledgerBackupContent=Below, you will find the anonymized recovery keys that are required if you ever lose access to this computer. minimumPageTimeSetting=Minimum page time before logging a visit minimumVisitsSetting=Minimum visits for publisher relevancy +minimumPageTimeLow=5 seconds +minimumPageTimeMedium=8 seconds +minimumPageTimeHigh=1 minute +minimumVisitsLow=1 visit +minimumVisitsMedium=5 visits +minimumVisitsHigh=10 visits backupLedger=Backup your wallet balanceRecovered={{balance}} was recovered and transferred to your Brave wallet. recoverLedger=Recover your wallet diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js new file mode 100644 index 00000000000..fb81cc9bf07 --- /dev/null +++ b/app/renderer/components/preferences/payment/advancedSettings.js @@ -0,0 +1,147 @@ +/* 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') + +// util +const {changeSetting} = require('../../../lib/settingsUtil') + +// components +const Button = require('../../../../../js/components/button') +const {SettingsList, SettingItem, SettingCheckbox} = require('../../settings') +const {SettingDropdown} = require('../../dropdown') +const ImmutableComponent = require('../../../../../js/components/immutableComponent') + +// style +const commonStyles = require('../../styles/commonStyles') +const globalStyles = require('../../styles/global') +const {paymentCommon} = require('../../styles/payment') + +// other +const settings = require('../../../../../js/constants/settings') + +class AdvancedSettingsContent extends ImmutableComponent { + render () { + const minDuration = this.props.ledgerData.getIn(['synopsisOptions', 'minDuration']) + const minPublisherVisits = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherVisits']) + + return
+
+
+
+ + + + + + +
+ + + + + + +
+
+ + + + +
+
+
+ } +} + +class AdvancedSettingsFooter extends ImmutableComponent { + render () { + return
+
+ } +} + +const styles = StyleSheet.create({ + advancedSettings: { + paddingLeft: '50px', + paddingRight: '50px', + display: 'flex', + flexWrap: 'nowrap' + }, + settingsPanelDivider: { + width: '100%' + }, + minimumSetting: { + marginBottom: globalStyles.spacing.modalPanelHeaderMarginBottom + }, + lastDivider: { + display: 'flex', + alignItems: 'center', + width: 'auto', + position: 'relative', + left: '1em' + }, + list: { + display: 'flex', + flexFlow: 'column nowrap', + justifyContent: 'space-between' + }, + listItem: { + display: 'flex', + marginBottom: '1em' + }, + checkboxSwitch: { + marginTop: '2px', + paddingTop: 0, + paddingBottom: 0 + } +}) + +module.exports = { + AdvancedSettingsContent, + AdvancedSettingsFooter +} diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js new file mode 100644 index 00000000000..5e1b9f53942 --- /dev/null +++ b/app/renderer/components/preferences/payment/bitcoinDashboard.js @@ -0,0 +1,465 @@ +/* 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 ModalOverlay = require('../../../../../js/components/modalOverlay') +const ImmutableComponent = require('../../../../../js/components/immutableComponent') + +// styles +const commonStyles = require('../../styles/commonStyles') +const globalStyles = require('../../styles/global') +const {paymentCommon} = require('../../styles/payment') +const cx = require('../../../../../js/lib/classSet') +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') + +// other +const coinbaseCountries = require('../../../../../js/constants/coinbaseCountries') +const config = require('../../../../../js/constants/config') +const getSetting = require('../../../../../js/settings').getSetting +const settings = require('../../../../../js/constants/settings') +const aboutActions = require('../../../../../js/about/aboutActions') + +class BitcoinDashboard extends ImmutableComponent { + constructor () { + super() + this.buyCompleted = false + this.openBuyURLTab = this.openBuyURLTab.bind(this) + } + + 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') + } + + bitcoinPurchaseButton () { + if (!this.props.ledgerData.get('buyURLFrame')) { + return + +
+
+ } + } + + smartphonePanel () { + return
+
+ +
+
+
+
+
+ } + + panelFooter () { + if (this.props.ledgerData.get('buyURLFrame')) { + return
+
+ } else if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) { + return
+
+
+ +
+
+ } else { + return
+
+ } + } + + openBuyURLTab () { + // close parent dialog + this.props.hideParentOverlay() + } + + bitcoinOverlayContent () { + return