Adds balance info to internals page

Resolves brave/brave-browser#9512

browser/ui/webui/brave_rewards_internals_ui.cc

@@ -45,6 +45,10 @@ class RewardsInternalsDOMHandler : public content::WebUIMessageHandler {
   void OnGetRewardsInternalsInfo(
       std::unique_ptr<brave_rewards::RewardsInternalsInfo> info);
   void OnPreferenceChanged();
+  void GetBalance(const base::ListValue* args);
+  void OnGetBalance(
+    int32_t result,
+    std::unique_ptr<brave_rewards::Balance> balance);
 
   brave_rewards::RewardsService* rewards_service_;  // NOT OWNED
   Profile* profile_;
@@ -69,6 +73,11 @@ void RewardsInternalsDOMHandler::RegisterMessages() {
       base::BindRepeating(
           &RewardsInternalsDOMHandler::HandleGetRewardsInternalsInfo,
           base::Unretained(this)));
+  web_ui()->RegisterMessageCallback(
+      "brave_rewards_internals.getBalance",
+      base::BindRepeating(
+          &RewardsInternalsDOMHandler::GetBalance,
+          base::Unretained(this)));
 }
 
 void RewardsInternalsDOMHandler::Init() {
@@ -140,6 +149,39 @@ void RewardsInternalsDOMHandler::OnGetRewardsInternalsInfo(
       "brave_rewards_internals.onGetRewardsInternalsInfo", info_dict);
 }
 
+void RewardsInternalsDOMHandler::GetBalance(const base::ListValue* args) {
+  if (!rewards_service_) {
+    return;
+  }
+  rewards_service_->FetchBalance(base::BindOnce(
+      &RewardsInternalsDOMHandler::OnGetBalance,
+      weak_ptr_factory_.GetWeakPtr()));
+}
+
+void RewardsInternalsDOMHandler::OnGetBalance(
+    int32_t result,
+    std::unique_ptr<brave_rewards::Balance> balance) {
+  if (!web_ui()->CanCallJavascript()) {
+    return;
+  }
+
+  base::Value balance_value(base::Value::Type::DICTIONARY);
+
+  if (result == 0 && balance) {
+    balance_value.SetDoubleKey("total", balance->total);
+
+    base::Value wallets(base::Value::Type::DICTIONARY);
+    for (auto const& wallet : balance->wallets) {
+      wallets.SetDoubleKey(wallet.first, wallet.second);
+    }
+    balance_value.SetKey("wallets", std::move(wallets));
+  }
+
+  web_ui()->CallJavascriptFunctionUnsafe(
+      "brave_rewards_internals.balance",
+      std::move(balance_value));
+}
+
 }  // namespace
 
 BraveRewardsInternalsUI::BraveRewardsInternalsUI(content::WebUI* web_ui,

browser/ui/webui/brave_webui_source.cc

@@ -815,11 +815,17 @@ void CustomizeWebUIHTMLSource(const std::string &name,
     }, {
       std::string("rewards-internals"), {
         { "amount", IDS_BRAVE_REWARDS_INTERNALS_AMOUNT },
+        { "balanceInfo", IDS_BRAVE_REWARDS_INTERNALS_BALANCE_INFO },
+        { "bat", IDS_BRAVE_UI_BAT_TEXT },
         { "bootStamp", IDS_BRAVE_REWARDS_INTERNALS_BOOT_STAMP },
+        { "contributionsInProgress", IDS_BRAVE_REWARDS_INTERNALS_CONTRIBUTIONS_IN_PROGRESS },   // NOLINT
         { "currentReconcile", IDS_BRAVE_REWARDS_INTERNALS_CURRENT_RECONCILE },
         { "invalid", IDS_BRAVE_REWARDS_INTERNALS_INVALID },
         { "keyInfoSeed", IDS_BRAVE_REWARDS_INTERNALS_KEY_INFO_SEED },
         { "personaId", IDS_BRAVE_REWARDS_INTERNALS_PERSONA_ID },
+        { "processorBraveTokens", IDS_BRAVE_UI_PROCESSOR_BRAVE_TOKENS },
+        { "processorUphold", IDS_BRAVE_UI_PROCESSOR_UPHOLD },
+        { "processorBraveUserFunds", IDS_BRAVE_UI_PROCESSOR_BRAVE_USER_FUNDS },
         { "refreshButton", IDS_BRAVE_REWARDS_INTERNALS_REFRESH_BUTTON },
         { "retryLevel", IDS_BRAVE_REWARDS_INTERNALS_RETRY_LEVEL },
         { "retryStep", IDS_BRAVE_REWARDS_INTERNALS_RETRY_STEP },
@@ -835,9 +841,11 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "retryStepVote", IDS_BRAVE_REWARDS_INTERNALS_RETRY_STEP_VOTE },
         { "retryStepWinners", IDS_BRAVE_REWARDS_INTERNALS_RETRY_STEP_WINNERS },
         { "rewardsNotEnabled", IDS_BRAVE_REWARDS_INTERNALS_REWARDS_NOT_ENABLED },                // NOLINT
+        { "totalBalance", IDS_BRAVE_REWARDS_INTERNALS_TOTAL_BALANCE },
         { "userId", IDS_BRAVE_REWARDS_INTERNALS_USER_ID },
         { "valid", IDS_BRAVE_REWARDS_INTERNALS_VALID },
         { "viewingId", IDS_BRAVE_REWARDS_INTERNALS_VIEWING_ID },
+        { "walletInfo", IDS_BRAVE_REWARDS_INTERNALS_WALLET_INFO },
         { "walletPaymentId", IDS_BRAVE_REWARDS_INTERNALS_WALLET_PAYMENT_ID },
       }
     }, {

components/brave_rewards/resources/internals/actions/rewards_internals_actions.ts

@@ -8,13 +8,22 @@ import { action } from 'typesafe-actions'
 import { types } from '../constants/rewards_internals_types'
 
 export const getRewardsEnabled = () => action(types.GET_REWARDS_ENABLED)
+
 export const onGetRewardsEnabled = (enabled: boolean) =>
   action(types.ON_GET_REWARDS_ENABLED, {
     enabled
   })
 
 export const getRewardsInternalsInfo = () => action(types.GET_REWARDS_INTERNALS_INFO)
+
 export const onGetRewardsInternalsInfo = (info: RewardsInternals.State) =>
   action(types.ON_GET_REWARDS_INTERNALS_INFO, {
     info
   })
+
+export const getBalance = () => action(types.GET_BALANCE)
+
+export const onBalance = (balance: RewardsInternals.Balance) =>
+  action(types.ON_BALANCE, {
+    balance
+  })

components/brave_rewards/resources/internals/brave_rewards_internals.tsx

@@ -6,6 +6,7 @@ import * as React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import { getActions as getUtilActions, setActions } from './utils'
 
 // Components
 import App from './components/app'
@@ -17,45 +18,44 @@ import * as rewardsInternalsActions from './actions/rewards_internals_actions'
 window.cr.define('brave_rewards_internals', function () {
   'use strict'
 
-  function getRewardsEnabled () {
-    const actions = bindActionCreators(rewardsInternalsActions, store.dispatch.bind(store))
-    actions.getRewardsEnabled()
-  }
+  function getActions () {
+    const actions: any = getUtilActions()
+    if (actions) {
+      return actions
+    }
 
-  function getRewardsInternalsInfo () {
-    const actions = bindActionCreators(rewardsInternalsActions, store.dispatch.bind(store))
-    actions.getRewardsInternalsInfo()
+    const newActions = bindActionCreators(rewardsInternalsActions, store.dispatch.bind(store))
+    setActions(newActions)
+    return newActions
   }
 
   function onGetRewardsEnabled (enabled: boolean) {
-    const actions = bindActionCreators(rewardsInternalsActions, store.dispatch.bind(store))
-    actions.onGetRewardsEnabled(enabled)
-    window.i18nTemplate.process(window.document, window.loadTimeData)
+    getActions().onGetRewardsEnabled(enabled)
   }
 
   function onGetRewardsInternalsInfo (info: RewardsInternals.State) {
-    const actions = bindActionCreators(rewardsInternalsActions, store.dispatch.bind(store))
-    actions.onGetRewardsInternalsInfo(info)
-    window.i18nTemplate.process(window.document, window.loadTimeData)
+    getActions().onGetRewardsInternalsInfo(info)
+  }
+
+  function balance (balance: RewardsInternals.Balance) {
+    getActions().onBalance(balance)
   }
 
   function initialize () {
-    getRewardsEnabled()
-    getRewardsInternalsInfo()
+    window.i18nTemplate.process(window.document, window.loadTimeData)
+
     render(
       <Provider store={store}>
         <App />
       </Provider>,
       document.getElementById('root'))
-    window.i18nTemplate.process(window.document, window.loadTimeData)
   }
 
   return {
-    getRewardsEnabled,
-    getRewardsInternalsInfo,
     initialize,
     onGetRewardsEnabled,
-    onGetRewardsInternalsInfo
+    onGetRewardsInternalsInfo,
+    balance
   }
 })
 

components/brave_rewards/resources/internals/components/app.tsx

@@ -7,9 +7,9 @@ import { bindActionCreators, Dispatch } from 'redux'
 import { connect } from 'react-redux'
 
 // Components
-import { CurrentReconcile } from './currentReconcile'
-import { KeyInfoSeed } from './keyInfoSeed'
-import { WalletPaymentId } from './walletPaymentId'
+import { Contributions } from './contributions'
+import { WalletInfo } from './walletInfo'
+import { Balance } from './balance'
 
 // Utils
 import { getLocale } from '../../../../common/locale'
@@ -21,40 +21,35 @@ interface Props {
 }
 
 export class RewardsInternalsPage extends React.Component<Props, {}> {
+  componentDidMount () {
+    this.getData()
+  }
+
   get actions () {
     return this.props.actions
   }
 
+  getData = () => {
+    this.actions.getRewardsEnabled()
+    this.actions.getRewardsInternalsInfo()
+    this.actions.getBalance()
+  }
+
   onRefresh = () => {
-    chrome.send('brave_rewards_internals.getRewardsInternalsInfo')
+    this.getData()
   }
 
   render () {
-    const { isRewardsEnabled, info } = this.props.rewardsInternalsData
+    const { isRewardsEnabled, balance, info } = this.props.rewardsInternalsData
     if (isRewardsEnabled) {
       return (
         <div id='rewardsInternalsPage'>
-          <KeyInfoSeed isKeyInfoSeedValid={info.isKeyInfoSeedValid || false} />
-          <WalletPaymentId walletPaymentId={info.walletPaymentId || ''} />
-          <div>
-            <span i18n-content='personaId'/>: {info.personaId}
-          </div>
-          <div>
-            <span i18n-content='userId'/>: {info.userId}
-          </div>
-          <div>
-            <span i18n-content='bootStamp'/>: {new Date(info.bootStamp * 1000).toLocaleDateString()}
-          </div>
-          <button type='button' style={{ marginTop: '10px' }} onClick={this.onRefresh}>{getLocale('refreshButton')}</button>
-          {info.currentReconciles.map((item, index) => (
-            <span>
-              <hr/>
-              <div>
-                <span i18n-content='currentReconcile'/> {index + 1}
-                <CurrentReconcile currentReconcile={item || ''} />
-              </div>
-            </span>
-          ))}
+          <WalletInfo state={this.props.rewardsInternalsData} />
+          <Balance info={balance} />
+          <br/>
+          <br/>
+          <button type='button' onClick={this.onRefresh}>{getLocale('refreshButton')}</button>
+          <Contributions items={info.currentReconciles} />
         </div>)
     } else {
       return (

components/brave_rewards/resources/internals/components/balance.tsx

@@ -0,0 +1,52 @@
+/* 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/. */
+
+import * as React from 'react'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  info: RewardsInternals.Balance
+}
+
+const getWalletName = (walletKey: string) => {
+  switch (walletKey) {
+    case 'anonymous': {
+      return getLocale('processorBraveUserFunds')
+    }
+    case 'blinded': {
+      return getLocale('processorBraveTokens')
+    }
+    case 'uphold': {
+      return getLocale('processorUphold')
+    }
+  }
+
+  return 'Missing wallet'
+}
+
+const getWalletBalance = (wallets: Record<string, number>) => {
+  let items = []
+  for (let key in wallets) {
+    items.push(<div key={'wallet-' + key}> {getWalletName(key)}: {wallets[key]} {getLocale('bat')} </div>)
+  }
+
+  return items
+}
+
+export const Balance = (props: Props) => {
+  if (!props.info) {
+    return null
+  }
+
+  return (
+    <>
+      <h3>{getLocale('balanceInfo')}</h3>
+      <div>
+        {getLocale('totalBalance')} {props.info.total} {getLocale('bat')}
+      </div>
+      {getWalletBalance(props.info.wallets)}
+    </>)
+}

components/brave_rewards/resources/internals/components/currentReconcile.tsx → components/brave_rewards/resources/internals/components/contribution.tsx

@@ -4,13 +4,13 @@
 
 import * as React from 'react'
 
-// Utils
-import { getLocale } from '../../../../common/locale'
-
 interface Props {
-  currentReconcile: RewardsInternals.CurrentReconcile
+  reconcile: RewardsInternals.CurrentReconcile
 }
 
+// Utils
+import { getLocale } from '../../../../common/locale'
+
 const getRetryStepString = (retryStep: number) => {
   switch (retryStep) {
     case 1:
@@ -38,15 +38,15 @@ const getRetryStepString = (retryStep: number) => {
   return getLocale('retryStepUnknown')
 }
 
-export const CurrentReconcile = (props: Props) => (
+export const Contribution = (props: Props) => (
   <div>
-    <span i18n-content='viewingId'/> {props.currentReconcile.viewingId || ''}
+    {getLocale('viewingId')} {props.reconcile.viewingId || ''}
     <br/>
-    <span i18n-content='amount'/> {props.currentReconcile.amount || ''}
+    {getLocale('amount')} {props.reconcile.amount || ''}
     <br/>
-    <span i18n-content='retryStep'/> {getRetryStepString(props.currentReconcile.retryStep) || ''}
+    {getLocale('retryStep')} {getRetryStepString(props.reconcile.retryStep) || ''}
     <br/>
-    <span i18n-content='retryLevel'/> {props.currentReconcile.retryLevel || ''}
+    {getLocale('retryLevel')} {props.reconcile.retryLevel || ''}
     <br/>
   </div>
 )

components/brave_rewards/resources/internals/components/contributions.tsx

@@ -0,0 +1,35 @@
+/* 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/. */
+
+import * as React from 'react'
+
+import { Contribution } from './contribution'
+
+interface Props {
+  items: RewardsInternals.CurrentReconcile[]
+}
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+export const Contributions = (props: Props) => {
+  if (!props.items || props.items.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      <h3>{getLocale('contributionsInProgress')}</h3>
+      {props.items.map((item, index) => (
+        <>
+          <div>
+            {getLocale('currentReconcile')} {index + 1}
+            <Contribution reconcile={item || ''} />
+          </div>
+          <hr/>
+        </>
+      ))}
+    </>
+  )
+}