Adds new balance breakdown

Resolves brave#14229 Auditors: Test Plan:
NejcZdovc · May 25, 2018 · 80cd075 · 80cd075
1 parent d4428e0
commit 80cd075
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 30 deletions.
diff --git a/app/browser/api/ledger.js b/app/browser/api/ledger.js
@@ -1880,15 +1880,33 @@ const onWalletProperties = (state, body) => {
     state = ledgerState.setInfoProp(state, 'currentRate', rate)
   }
 
-  // Probi
+  // Grants
   const probi = parseFloat(body.get('probi'))
-  if (probi >= 0) {
-    state = ledgerState.setInfoProp(state, 'probi', probi)
+  let userFunded = probi
+  let grants = body.get('grants') || Immutable.List()
+  if (!grants.isEmpty()) {
+    let grantTotal = 0
+    grants = grants.map(grant => {
+      const amount = new BigNumber(grant.get('probi').toString()).dividedBy('1e18').toNumber()
+      grantTotal += parseFloat(grant.get('probi'))
+      return {
+        amount: amount,
+        expirationDate: grant.get('expiryTime')
+      }
+    })
+    state = ledgerState.setInfoProp(state, 'grants', grants)
 
-    const amount = info.get('balance')
+    if (!isNaN(probi)) {
+      userFunded = probi - grantTotal
+    }
+  }
+  state = ledgerState.setInfoProp(state, 'userFunded', new BigNumber(userFunded.toString()).dividedBy('1e18').toNumber())
 
-    if (amount != null && rate) {
-      const bigProbi = new BigNumber(probi.toString()).dividedBy('1e18')
+  // Probi
+  if (probi >= 0) {
+    state = ledgerState.setInfoProp(state, 'probi', probi)
+    if (userFunded != null && rate) {
+      const bigProbi = new BigNumber(userFunded.toString()).dividedBy('1e18')
       const bigRate = new BigNumber(rate.toString())
       const converted = bigProbi.times(bigRate).toNumber()
 

diff --git a/app/common/lib/ledgerUtil.js b/app/common/lib/ledgerUtil.js
@@ -65,16 +65,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)

diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
@@ -139,6 +139,7 @@ engineGoKey=Engine Go Key (Type First)
 engineGoKey=Engine Go Key (type first)
 enpass=Enpass&reg; (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
@@ -385,6 +386,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 *

diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/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 {FormDropdown} = require('../../common/dropdown')
 const LedgerTable = require('./ledgerTable')
 const Captcha = require('./captcha')
@@ -143,15 +142,31 @@ class EnabledContent extends ImmutableComponent {
 
   fundsAmount () {
     const ledgerData = this.props.ledgerData
-    const val = formatCurrentBalance(ledgerData) || ''
-    const big = val.length > 23
-
-    return <FormTextbox
-      readOnly
-      data-test-id='fundsAmount'
-      value={val}
-      customClass={big && styles.width_input}
-    />
+    if (!ledgerData) {
+      return
+    }
+
+    const total = formatCurrentBalance(ledgerData, ledgerData.get('balance'), false) || ''
+    const userFunded = formatCurrentBalance(ledgerData, ledgerData.get('userFunded')) || ''
+    const grants = ledgerData.get('grants') || Immutable.List()
+
+    // at lest 195px width
+    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 () {
@@ -179,8 +194,7 @@ class EnabledContent extends ImmutableComponent {
     }
 
     return <section>
-      <div data-l10n-id='lastContribution' />
-      <div data-l10n-id={text} data-l10n-args={JSON.stringify(l10nDataArgs)} />
+      <span data-l10n-id='lastContribution' /> <span data-l10n-id={text} data-l10n-args={JSON.stringify(l10nDataArgs)} />
     </section>
   }
 
@@ -220,8 +234,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>
   }
 
@@ -419,7 +432,7 @@ class EnabledContent extends ImmutableComponent {
             }
           </FormDropdown>
         </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' />
@@ -431,8 +444,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()} />
@@ -524,6 +535,10 @@ const gridStyles = StyleSheet.create({
     gridColumn: 3,
     marginRight: globalStyles.spacing.panelPadding,
     marginBottom: globalStyles.spacing.panelPadding
+  },
+
+  mergeRow23Col2: {
+    gridRow: '2 / span 2'
   }
 })
 
@@ -532,10 +547,6 @@ const styles = StyleSheet.create({
     marginTop: '10px'
   },
 
-  width_input: {
-    width: '195px'
-  },
-
   iconLink: {
     color: globalStyles.color.mediumGray,
     fontSize: globalStyles.payments.fontSize.regular,
@@ -679,6 +690,19 @@ const styles = StyleSheet.create({
     fontSize: globalStyles.payments.fontSize.regular,
     lineHeight: 1.5,
     marginTop: globalStyles.spacing.panelPadding
+  },
+
+  fundsAmount__item: {
+    marginBottom: '4px',
+    width: '215px',
+    fontSize: '14.5px'
+  },
+
+  fundsAmount__total: {
+    marginTop: '10px',
+    paddingTop: '12px',
+    borderTop: '1px solid #999',
+    fontSize: '15px'
   }
 })
 

diff --git a/docs/state.md b/docs/state.md
@@ -212,6 +212,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
@@ -245,6 +249,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: {