Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Refactor of paymentTab (#7481)
Browse files Browse the repository at this point in the history
Resolves #7501 #7380 #6364

Auditors: @bsclifton @cezaraugusto

Test plan:
- everything should work the same as was before the chage
  • Loading branch information
NejcZdovc authored and cezaraugusto committed Mar 12, 2017
1 parent 3ad0f41 commit 0bfceeb
Show file tree
Hide file tree
Showing 21 changed files with 1,954 additions and 1,458 deletions.
67 changes: 67 additions & 0 deletions app/common/lib/ledgerUtil.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
}
6 changes: 6 additions & 0 deletions app/extensions/brave/locales/en-US/preferences.properties
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
147 changes: 147 additions & 0 deletions app/renderer/components/preferences/payment/advancedSettings.js
Original file line number Diff line number Diff line change
@@ -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 <div className={css(paymentCommon.board)}>
<div className={css(paymentCommon.panel, styles.advancedSettings, commonStyles.noMarginTop, commonStyles.noMarginBottom)} data-test-id='advancedSettings'>
<div className={css(styles.settingsPanelDivider, styles.deviderFirst)}>
<div className={css(styles.minimumSetting)} data-l10n-id='minimumPageTimeSetting' />
<SettingsList>
<SettingItem>
<SettingDropdown
data-test-id='durationSelector'
defaultValue={minDuration || 8000}
onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISIT_TIME)}>
<option data-l10n-id='minimumPageTimeLow' value='5000' />
<option data-l10n-id='minimumPageTimeMedium' value='8000' />
<option data-l10n-id='minimumPageTimeHigh' value='60000' />
</SettingDropdown>
</SettingItem>
</SettingsList>
<div className={css(styles.minimumSetting)} data-l10n-id='minimumVisitsSetting' />
<SettingsList className={css(commonStyles.noMarginBottom)}>
<SettingItem>
<SettingDropdown
data-test-id='visitSelector'
defaultValue={minPublisherVisits || 1}
onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISITS)}>
<option data-l10n-id='minimumVisitsLow' value='1' />
<option data-l10n-id='minimumVisitsMedium' value='5' />
<option data-l10n-id='minimumVisitsHigh' value='10' />
</SettingDropdown>
</SettingItem>
</SettingsList>
</div>
<div className={css(styles.settingsPanelDivider, styles.lastDivider)}>
<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>
}
}

class AdvancedSettingsFooter extends ImmutableComponent {
render () {
return <div className={css(paymentCommon.advanceFooter)}>
<Button l10nId='backupLedger'
className={css(commonStyles.buttonPrimary)}
onClick={this.props.showOverlay.bind(this, 'ledgerBackup')}
/>
<Button l10nId='recoverLedger'
className={css(commonStyles.buttonPrimary, paymentCommon.marginButtons)}
onClick={this.props.showOverlay.bind(this, 'ledgerRecovery')}
/>
<Button l10nId='done'
className={css(commonStyles.whiteButton, commonStyles.inlineButton, paymentCommon.marginButtons)}
onClick={this.props.hideOverlay.bind(this, 'advancedSettings')}
/>
</div>
}
}

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
}
Loading

0 comments on commit 0bfceeb

Please sign in to comment.