Merge pull request #14251 from NejcZdovc/feature/#14229-breakdown

Adds balance breakdown

app/browser/api/ledger.js

@@ -1881,15 +1881,33 @@ const onWalletProperties = (state, body) => {
     state = ledgerState.setInfoProp(state, 'currentRate', rate)
   }
 
+  // Grants
+  let probi = parseFloat(body.get('probi'))
+  let userFunded = null
+  if (!isNaN(probi)) {
+    userFunded = probi
+    let grants = body.get('grants') || Immutable.List()
+    if (!grants.isEmpty()) {
+      let grantTotal = 0
+      grants = grants.map(grant => {
+        grantTotal += parseFloat(grant.get('probi'))
+        return {
+          amount: new BigNumber(grant.get('probi').toString()).dividedBy('1e18').toNumber(),
+          expirationDate: grant.get('expiryTime')
+        }
+      })
+      state = ledgerState.setInfoProp(state, 'grants', grants)
+      userFunded = probi - grantTotal
+    }
+
+    state = ledgerState.setInfoProp(state, 'userFunded', new BigNumber(userFunded.toString()).dividedBy('1e18').toNumber())
+  }
+
   // Probi
-  const probi = parseFloat(body.get('probi'))
   if (probi >= 0) {
     state = ledgerState.setInfoProp(state, 'probi', probi)
-
-    const amount = info.get('balance')
-
-    if (amount != null && rate) {
-      const bigProbi = new BigNumber(probi.toString()).dividedBy('1e18')
+    if (userFunded != null && rate) {
+      const bigProbi = new BigNumber(userFunded.toString()).dividedBy('1e18')
       const bigRate = new BigNumber(rate.toString())
       const converted = bigProbi.times(bigRate).toNumber()
 

app/common/lib/ledgerUtil.js

@@ -64,16 +64,16 @@ const batToCurrencyString = (bat, ledgerData) => {
   return `${converted} ${currency}`
 }
 
-const formatCurrentBalance = (ledgerData) => {
+const formatCurrentBalance = (ledgerData, amount, showAlt = true) => {
   let currency = 'USD'
   let balance = 0
   let converted = 0
   let hasRate = false
 
   if (ledgerData != null) {
-    balance = Number(ledgerData.get('balance') || 0)
+    balance = Number(amount || 0)
     converted = Number.parseFloat(ledgerData.get('converted')) || 0
-    hasRate = ledgerData.has('currentRate') && ledgerData.hasIn(['rates', 'BTC'])
+    hasRate = showAlt ? ledgerData.has('currentRate') && ledgerData.hasIn(['rates', 'BTC']) : false
   }
 
   balance = balance.toFixed(2)

app/extensions/brave/locales/en-US/preferences.properties

@@ -138,6 +138,7 @@ engineGoKey=Engine Go Key (Type First)
 engineGoKey=Engine Go Key (type first)
 enpass=Enpass® (requires application)
 extensions=Extensions
+expires=expires
 flash=Run Adobe Flash Player
 flashAllowAlways=Allow until {{time}}
 flashTroubleshooting=Flash not working? Try the troubleshooting tips on our
@@ -383,6 +384,7 @@ tabsSettings=Tabs Settings
 termsOfService=Terms of Service
 timeSpent=Time Spent
 toolbarUserInterfaceScale=Toolbar and UI elements scale
+total=total
 totalAmount=Total Amount
 update=Update
 updateToPreviewReleases=Update to preview releases *

app/renderer/components/preferences/payment/enabledContent.js

@@ -10,7 +10,6 @@ const Immutable = require('immutable')
 // Components
 const ImmutableComponent = require('../../immutableComponent')
 const BrowserButton = require('../../common/browserButton')
-const {FormTextbox} = require('../../common/textbox')
 const {PanelDropdown} = require('../../common/dropdown')
 const LedgerTable = require('./ledgerTable')
 const Captcha = require('./captcha')
@@ -143,19 +142,28 @@ class EnabledContent extends ImmutableComponent {
 
   fundsAmount () {
     const ledgerData = this.props.ledgerData
-    const val = formatCurrentBalance(ledgerData) || ''
-    const big = val.length > 23
+    if (!ledgerData) {
+      return
+    }
 
-    return <section className={css(styles.balance)}>
-      <FormTextbox data-test-id='fundsAmount' readOnly value={val} customClass={big && styles.width_input} />
-      <a className={cx({
-        [globalStyles.appIcons.question]: true,
-        [css(styles.balance__iconLink)]: true
-      })}
-        href='https://brave.com/Payments_FAQ.html'
-        target='_blank' rel='noopener'
-      />
-    </section>
+    const total = formatCurrentBalance(ledgerData, ledgerData.get('balance'), false) || ''
+    const userFunded = formatCurrentBalance(ledgerData, ledgerData.get('userFunded')) || ''
+    const grants = ledgerData.get('grants') || Immutable.List()
+
+    return <div className={css(styles.fundsAmount)}>
+      <div className={css(styles.fundsAmount__item)}>{userFunded}</div>
+      {
+        grants.map(grant => {
+          return <div className={css(styles.fundsAmount__item)}>
+            {formatCurrentBalance(ledgerData, grant.get('amount'), false)}
+            <span> (<span data-l10n-id='expires' /> {new Date(grant.get('expirationDate') * 1000).toLocaleDateString()})</span>
+          </div>
+        })
+      }
+      <div className={css(styles.fundsAmount__item, styles.fundsAmount__total)}>
+        {total} (<span data-l10n-id='total' />)
+      </div>
+    </div>
   }
 
   lastReconcileMessage () {
@@ -183,8 +191,12 @@ class EnabledContent extends ImmutableComponent {
     }
 
     return <section>
-      <div data-l10n-id='lastContribution' />
-      <div data-l10n-id={text} data-l10n-args={JSON.stringify(l10nDataArgs)} />
+      {
+        prevReconcileDateValue
+        ? <span data-l10n-id='lastContribution' className={css(styles.lastContribution)} />
+        : null
+      }
+      <span data-l10n-id={text} data-l10n-args={JSON.stringify(l10nDataArgs)} />
     </section>
   }
 
@@ -224,8 +236,7 @@ class EnabledContent extends ImmutableComponent {
     }
 
     return <section>
-      <div data-l10n-id='nextContribution' />
-      <div data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
+      <span data-l10n-id='nextContribution' /> <span data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
     </section>
   }
 
@@ -422,7 +433,7 @@ class EnabledContent extends ImmutableComponent {
             }
           </PanelDropdown>
         </div>
-        <div className={css(gridStyles.row2col2)}>
+        <div className={css(gridStyles.row2col2, gridStyles.mergeRow23Col2)}>
           {
             ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
               ? <div data-l10n-id='accountBalanceConnectionError' />
@@ -434,8 +445,6 @@ class EnabledContent extends ImmutableComponent {
         </div>
         <div className={css(gridStyles.row3col1, styles.enabledContent__walletBar__message)}>
           {this.lastReconcileMessage()}
-        </div>
-        <div className={css(gridStyles.row3col2, styles.enabledContent__walletBar__message)}>
           {
             ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
               ? <div data-l10n-id={this.ledgerDataErrorText()} />
@@ -510,6 +519,10 @@ const gridStyles = StyleSheet.create({
   row3col3: {
     gridRow: 3,
     gridColumn: 3
+  },
+
+  mergeRow23Col2: {
+    gridRow: '2 / span 2'
   }
 })
 
@@ -541,10 +554,6 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
 
-  width_input: {
-    width: '195px'
-  },
-
   balance__iconLink: {
     color: globalStyles.color.mediumGray,
     fontSize: globalStyles.payments.fontSize.regular,
@@ -661,6 +670,23 @@ const styles = StyleSheet.create({
     ':hover': {
       textDecoration: 'underline'
     }
+  },
+
+  fundsAmount__item: {
+    marginBottom: '4px',
+    width: '215px',
+    fontSize: '14.5px'
+  },
+
+  fundsAmount__total: {
+    marginTop: '10px',
+    paddingTop: '12px',
+    borderTop: '1px solid #999',
+    fontSize: '15px'
+  },
+
+  lastContribution: {
+    paddingRight: '4px'
   }
 })
 

app/renderer/components/preferences/paymentsTab.js

@@ -82,7 +82,7 @@ class PaymentsTab extends ImmutableComponent {
     const addresses = ledgerData.get('addresses') || Immutable.List()
     const walletQR = ledgerData.get('walletQR') || Immutable.List()
     const wizardData = ledgerData.get('wizardData') || Immutable.Map()
-    const funds = formatCurrentBalance(ledgerData)
+    const funds = formatCurrentBalance(ledgerData, ledgerData.get('balance'))
     const budget = ledgerState.getContributionAmount(null, ledgerData.get('contributionAmount'), this.props.settings)
     const minAmount = batToCurrencyString(budget, ledgerData)
 
@@ -110,7 +110,7 @@ class PaymentsTab extends ImmutableComponent {
 
   get getOverlayFunds () {
     const ledgerData = this.props.ledgerData || Immutable.Map()
-    return formatCurrentBalance(ledgerData)
+    return formatCurrentBalance(ledgerData, ledgerData.get('balance'))
   }
 
   get deletedSitesFooter () {

docs/state.md

@@ -211,6 +211,10 @@ AppStore
       created, boolean, // wallet is created
       creating: boolean, // wallet is being created
       currentRate: number,
+      grants: [{
+        amount: number,
+        expirationDate: number
+      }]
       hasBitcoinHandler: boolean, // brave browser has a `bitcoin:` URI handler
       monthlyAmounts: Array<float> // list of all monthly amounts for the contribution
       passphrase: string, // the BAT wallet passphrase
@@ -244,6 +248,7 @@ AppStore
         viewingId: string, // UUIDv4 for this contribution
       }],
       unconfirmed: string, // unconfirmed balance in BAT.toFixed(2)
+      userFunded: number, // amount funded by the user
       userHasFunded: boolean // permanently true once user funds wallet
     },
     locations: {

test/unit/app/browser/api/ledgerTest.js

@@ -1504,19 +1504,18 @@ describe('ledger api unit tests', function () {
         const expectedState = state
           .setIn(['ledger', 'info', 'probi'], probi)
           .setIn(['ledger', 'info', 'balance'], 25)
+          .setIn(['ledger', 'info', 'userFunded'], 25)
           .setIn(['ledger', 'info', 'userHasFunded'], true)
         assert.deepEqual(result.toJS(), expectedState.toJS())
       })
 
       it('amount is null', function () {
         const result = ledgerApi.onWalletProperties(state, Immutable.fromJS({
-          probi: probi,
           rates: rates
         }))
         const expectedState = state
           .setIn(['ledger', 'info', 'rates'], Immutable.fromJS(rates))
           .setIn(['ledger', 'info', 'currentRate'], rate)
-          .setIn(['ledger', 'info', 'probi'], probi)
         assert.deepEqual(result.toJS(), expectedState.toJS())
       })
 
@@ -1531,13 +1530,14 @@ describe('ledger api unit tests', function () {
           .setIn(['ledger', 'info', 'currentRate'], rate)
           .setIn(['ledger', 'info', 'converted'], 3.5836474125)
           .setIn(['ledger', 'info', 'balance'], 25)
+          .setIn(['ledger', 'info', 'userFunded'], 25)
           .setIn(['ledger', 'info', 'probi'], probi)
           .setIn(['ledger', 'info', 'userHasFunded'], true)
         assert.deepEqual(result.toJS(), expectedState.toJS())
       })
 
       it('big probi', function () {
-        const bigProbi = '7.309622404968674704085e+21'
+        const bigProbi = 7.309622404968674704085e+21
         const result = ledgerApi.onWalletProperties(state, Immutable.fromJS({
           probi: bigProbi,
           balance: '7309.6224',
@@ -1548,6 +1548,7 @@ describe('ledger api unit tests', function () {
           .setIn(['ledger', 'info', 'currentRate'], rate)
           .setIn(['ledger', 'info', 'converted'], 1047.8043767167208)
           .setIn(['ledger', 'info', 'balance'], 7309.6224)
+          .setIn(['ledger', 'info', 'userFunded'], 7309.622404968675)
           .setIn(['ledger', 'info', 'probi'], bigProbi)
           .setIn(['ledger', 'info', 'userHasFunded'], true)
         assert.deepEqual(result.toJS(), expectedState.toJS())
@@ -1642,6 +1643,55 @@ describe('ledger api unit tests', function () {
         contributionAmount = 10
       })
     })
+
+    describe('grants', function () {
+      const probi = 25000000000000000000
+
+      it('probi is missing', function () {
+        const expectedState = state
+          .setIn(['ledger', 'info', 'balance'], 25)
+          .setIn(['ledger', 'info', 'userHasFunded'], true)
+        const result = ledgerApi.onWalletProperties(state, Immutable.fromJS({
+          balance: 25
+        }))
+        assert.deepEqual(result.toJS(), expectedState.toJS())
+      })
+
+      it('is missing', function () {
+        const expectedState = state
+          .setIn(['ledger', 'info', 'balance'], 25)
+          .setIn(['ledger', 'info', 'userHasFunded'], true)
+          .setIn(['ledger', 'info', 'probi'], probi)
+          .setIn(['ledger', 'info', 'userFunded'], 25)
+        const result = ledgerApi.onWalletProperties(state, Immutable.fromJS({
+          probi,
+          balance: 25
+        }))
+        assert.deepEqual(result.toJS(), expectedState.toJS())
+      })
+
+      it('grant is saved', function () {
+        const expectedState = state
+          .setIn(['ledger', 'info', 'balance'], 25)
+          .setIn(['ledger', 'info', 'userHasFunded'], true)
+          .setIn(['ledger', 'info', 'probi'], probi)
+          .setIn(['ledger', 'info', 'userFunded'], 15)
+          .setIn(['ledger', 'info', 'grants'], Immutable.fromJS([{
+            expirationDate: 2130600234,
+            amount: 10
+          }]))
+        const result = ledgerApi.onWalletProperties(state, Immutable.fromJS({
+          probi,
+          balance: 25,
+          grants: [{
+            altcurrency: 'BAT',
+            expiryTime: 2130600234,
+            probi: 10000000000000000000
+          }]
+        }))
+        assert.deepEqual(result.toJS(), expectedState.toJS())
+      })
+    })
   })
 
   describe('claimPromotion', function () {