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

Commit

Permalink
Merge pull request #8043 from NejcZdovc/hotfix/#7889-wallet-ui
Browse files Browse the repository at this point in the history
Improves wallet creation UI
  • Loading branch information
bsclifton authored Apr 4, 2017
2 parents 9bc4c7e + 4a1c91e commit 0353e78
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 78 deletions.
1 change: 0 additions & 1 deletion app/extensions/brave/locales/en-US/preferences.properties
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ syncCreate=Set up sync
syncEnterPassphrase=Enter your sync code words:
accountBalance=account balance
accountBalanceConnectionError=Please check your Internet connection.
accountBalanceLoading=loading…
monthlyBudget=monthly budget
status=status
statusOnError=Brave Wallet can't be reached.
Expand Down
53 changes: 18 additions & 35 deletions app/renderer/components/preferences/payment/enabledContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

const React = require('react')
const {StyleSheet, css} = require('aphrodite')
const moment = require('moment')

// util
const {btcToCurrencyString, formattedDateFromTimestamp, walletStatus} = require('../../../../common/lib/ledgerUtil')
Expand Down Expand Up @@ -75,18 +76,14 @@ class EnabledContent extends ImmutableComponent {

fundsAmount () {
const ledgerData = this.props.ledgerData
if (!ledgerData.get('created')) {
return null
let value = 0

if (!(ledgerData.get('balance') === undefined || ledgerData.get('balance') === null)) {
value = ledgerData.get('balance')
}

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>
}
<FormTextbox data-test-id='fundsAmount' readOnly value={btcToCurrencyString(value, ledgerData)} />
<a className={css(styles.iconLink)} href='https://brave.com/Payments_FAQ.html' target='_blank'>
<span className={cx({
fa: true,
Expand All @@ -106,9 +103,7 @@ class EnabledContent extends ImmutableComponent {
let prevReconcileDateValue
let text

if (!walletCreated || !walletHasReconcile) {
return null
} else if (!walletHasTransactions) {
if (!walletCreated || !walletHasReconcile || !walletHasTransactions) {
text = 'noPaymentHistory'
} else {
text = 'viewPaymentHistory'
Expand Down Expand Up @@ -143,17 +138,19 @@ class EnabledContent extends ImmutableComponent {

nextReconcileMessage () {
const ledgerData = this.props.ledgerData
const nextReconcileDateRelative = this.nextReconcileDate()
let nextReconcileDateRelative = this.nextReconcileDate()
let l10nDataId = 'statusNextReconcileDate'

if (!nextReconcileDateRelative) {
return null
}
nextReconcileDateRelative = formattedDateFromTimestamp(moment().add(1, 'months'), 'MMMM Do')
} else {
const timestamp = ledgerData.get('reconcileStamp')
const now = new Date().getTime()

const timestamp = ledgerData.get('reconcileStamp')
const now = new Date().getTime()
let l10nDataId = 'statusNextReconcileDate'
if (timestamp <= now) {
l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
? 'statusNextReconcileOverdue' : 'statusNextReconcileToday'
if (timestamp <= now) {
l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
? 'statusNextReconcileOverdue' : 'statusNextReconcileToday'
}
}

const l10nDataArgs = {
Expand Down Expand Up @@ -292,20 +289,6 @@ const styles = StyleSheet.create({
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',

Expand Down
50 changes: 19 additions & 31 deletions app/renderer/components/preferences/paymentsTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ class PaymentsTab extends ImmutableComponent {
}

render () {
const enabled = this.props.ledgerData.get('created')
return <div className={cx({
paymentsContainer: true,
[css(styles.paymentsContainer)]: true
Expand Down Expand Up @@ -176,12 +177,13 @@ class PaymentsTab extends ImmutableComponent {
/>
</div>
{
this.props.ledgerData.get('created') && this.enabled
this.enabled
? <div className={css(styles.switchWrap, styles.autoSuggestSwitch)}>
<div className={css(styles.mainIconsLeft)}>
<SettingCheckbox dataL10nId='autoSuggestSites'
prefKey={settings.AUTO_SUGGEST_SITES}
settings={this.props.settings}
disabled={!enabled}
onChangeSetting={this.props.onChangeSetting}
switchClassName={css(styles.switchControl)}
/>
Expand All @@ -197,36 +199,18 @@ class PaymentsTab extends ImmutableComponent {
/>
</div>
<div className={css(styles.mainIconsRight)}>
{
this.hasWalletTransaction && this.enabled
? <a
data-test-id='paymentHistoryButton'
data-l10n-id='paymentHistoryIcon'
className={css(styles.mainIcons, styles.historyIcon)}
onClick={this.props.showOverlay.bind(this, 'paymentHistory')}
/>
: null
}
{
!this.hasWalletTransaction && this.enabled
? <a
data-test-id='disabledPaymentHistoryButton'
data-l10n-id='paymentHistoryIcon'
className={css(styles.mainIcons, styles.historyIcon, styles.historyDisabled)}
onClick={() => {}}
/>
: null
}
{
this.props.ledgerData.get('created') && this.enabled
? <a
className={css(styles.mainIcons, styles.advanceIcon)}
data-test-id='advancedSettingsButton'
data-l10n-id='advancedSettingsIcon'
onClick={this.props.showOverlay.bind(this, 'advancedSettings')}
/>
: null
}
<a
data-test-id={this.hasWalletTransaction ? 'paymentHistoryButton' : 'disabledPaymentHistoryButton'}
data-l10n-id='paymentHistoryIcon'
className={css(styles.mainIcons, styles.historyIcon, !this.hasWalletTransaction && styles.historyDisabled)}
onClick={(enabled && this.hasWalletTransaction) ? this.props.showOverlay.bind(this, 'paymentHistory') : () => {}}
/>
<a
className={css(styles.mainIcons, styles.advanceIcon, !enabled && styles.advanceIconDisabled)}
data-test-id={!enabled ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
data-l10n-id='advancedSettingsIcon'
onClick={enabled ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
/>
</div>
</div>
: null
Expand Down Expand Up @@ -330,6 +314,10 @@ const styles = StyleSheet.create({
},
advanceIcon: {
'-webkit-mask-image': `url(${advanceIcon})`
},
advanceIconDisabled: {
backgroundColor: globalStyles.color.chromeTertiary,
cursor: 'default'
}
})

Expand Down
11 changes: 0 additions & 11 deletions test/unit/app/renderer/paymentsTabTest.js
Original file line number Diff line number Diff line change
Expand Up @@ -176,17 +176,6 @@ describe('PaymentsTab component', function () {
assert.equal(inst.fundsAmount, null)
})

it('handles missing balance', function () {
fakeSettings.mockReturnValue = true
const wrapper = mount(
<PaymentsTab
showOverlay={function () {}}
hideOverlay={function () {}}
ledgerData={Immutable.Map({created: true, balance: null})} />
)
assert.equal(wrapper.find('[data-test-id="accountBalanceLoading"]').length, 1)
})

it('handles expected balance', function () {
fakeSettings.mockReturnValue = true
const wrapper = mount(
Expand Down

0 comments on commit 0353e78

Please sign in to comment.