Merge pull request #3751 from brave/bat-points

BAT Points updates for unsupported regions

.storybook/locale.ts

@@ -31,6 +31,8 @@ const locale: Record<string, string> = {
   backupWalletTitle: 'Backup Wallet',
   balanceUnavailable: 'Unavailable',
   bat: 'BAT',
+  batPoints: 'BAT Points',
+  batPointsMessage: 'can be used in Brave Rewards to contribute to your favorite content creators. BAT Points cannot be exchanged for BAT.',
   braveAdsDesc: 'No action required. Just collect tokens. Your data is safe with our Shields.',
   braveAdsTitle: 'Brave Ads',
   braveAdsLaunchTitle: 'Brave Ads has arrived!',
@@ -299,6 +301,7 @@ const locale: Record<string, string> = {
   whyBraveRewardsDesc1: 'With conventional browsers, you pay to browse the web by viewing ads with your valuable attention, spending your valuable time downloading invasive ad technology, that transmits your valuable private data to advertisers — without your consent.',
   whyBraveRewardsDesc2: 'Well, you\'ve come to the right place. Brave welcomes you to the new internet. One where your time is valued, your personal data is kept private, and you actually get paid for your attention.',
   whyHow: 'Why & How',
+  yourBalance: 'Your Balance',
   yourWallet: 'Your wallet'
 }
 

browser/ui/webui/brave_webui_source.cc

@@ -244,6 +244,8 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "adsTitle",  IDS_BRAVE_REWARDS_LOCAL_ADS_TITLE },
 
         { "bat", IDS_BRAVE_UI_BAT_REWARDS_TEXT },
+        { "batPoints", IDS_BRAVE_UI_BAT_POINTS_TEXT },
+        { "batPointsMessage", IDS_BRAVE_UI_POINTS_MESSAGE },
         { "contributionTitle",  IDS_BRAVE_REWARDS_LOCAL_CONTR_TITLE },
         { "contributionDesc",  IDS_BRAVE_REWARDS_LOCAL_CONTR_DESC },
         { "contributionMonthly",  IDS_BRAVE_REWARDS_LOCAL_CONTR_MONTHLY },
@@ -558,6 +560,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "whyBraveRewards", IDS_BRAVE_UI_WHY_BRAVE_REWARDS },
         { "whyBraveRewardsDesc1", IDS_BRAVE_UI_WHY_BRAVE_REWARDS_DESC_1 },
         { "whyBraveRewardsDesc2", IDS_BRAVE_UI_WHY_BRAVE_REWARDS_DESC_2 },
+        { "yourBalance", IDS_BRAVE_UI_YOUR_BALANCE },
         { "yourWallet", IDS_BRAVE_UI_YOUR_WALLET },
 
         { "and", IDS_BRAVE_UI_AND },

components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json

@@ -43,6 +43,22 @@
     "message": "Grants",
     "description": "Title for grant section in wallet summary"
   },
+  "details": {
+    "message": "Details",
+    "description": "Title for grant section in wallet panel summary"
+  },
+  "yourBalance": {
+    "message": "Your Balance",
+    "description": "Wallet panel title for anon wallets"
+  },
+  "batPoints": {
+    "message": "BAT Points",
+    "description": "BAT Points text"
+  },
+  "batPointsMessage": {
+    "message": "can be used in Brave Rewards to contribute to your favorite content creators. BAT Points cannot be exchanged for BAT.",
+    "description": "Text for BAT Point helper message"
+  },
   "on": {
     "message": "on",
     "description": "The whole string is 'Enable tips on YouTube for like.'"
@@ -306,7 +322,7 @@
     "description": "Text for the link that explains more about reserved amount"
   },
   "reservedAmountText": {
-    "message": "You’ve designated {{reservedAmount}} BAT for creators who haven’t yet signed up to receive contributions. Your browser will keep trying to contribute until they verify, or until 90 days have passed.",
+    "message": "You’ve designated {{reservedAmount}} {{currency}} for creators who haven’t yet signed up to receive contributions. Your browser will keep trying to contribute until they verify, or until 90 days have passed.",
     "description": "Notification about how much BAT do you have reserved"
   },
   "reservedMoreLink": {

components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts

@@ -28,6 +28,8 @@ export const getUIMessages = (): Record<string, string> => {
     'backupWalletNotification',
     'backupWalletTitle',
     'bat',
+    'batPoints',
+    'batPointsMessage',
     'braveAdsLaunchTitle',
     'braveAdsLaunchMsg',
     'braveAdsTitle',
@@ -134,7 +136,8 @@ export const getUIMessages = (): Record<string, string> => {
     'walletVerificationListHeader',
     'walletVerificationTitle1',
     'walletVerificationTitle2',
-    'walletVerified'
+    'walletVerified',
+    'yourBalance'
   ]
 
   let translations = {}

components/brave_rewards/resources/extension/brave_rewards/components/app.tsx

@@ -298,6 +298,7 @@ export class RewardsPanel extends React.Component<Props, State> {
                 balance={total.toFixed(1)}
                 showSecActions={false}
                 showCopy={false}
+                onlyAnonWallet={this.state.onlyAnonWallet}
                 grants={utils.getGrants(walletProperties.grants)}
                 converted={utils.formatConverted(converted)}
                 convertProbiToFixed={utils.convertProbiToFixed}

components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx

@@ -673,6 +673,7 @@ export class Panel extends React.Component<Props, State> {
         onDisconnectClick={this.onDisconnectClick}
         goToUphold={this.goToUphold}
         userName={utils.getUserName(externalWallet)}
+        onlyAnonWallet={this.props.onlyAnonWallet}
         {...notification}
       >
         <WalletSummarySlider
@@ -709,6 +710,7 @@ export class Panel extends React.Component<Props, State> {
           <WalletSummary
             compact={true}
             reservedAmount={pendingTotal}
+            onlyAnonWallet={this.props.onlyAnonWallet}
             reservedMoreLink={'https://brave.com/faq/#unclaimed-funds'}
             {...this.getWalletSummary()}
           />

components/brave_rewards/resources/page/components/grant.tsx

@@ -26,6 +26,7 @@ interface State {
 
 interface Props extends Rewards.ComponentProps {
   grant: Rewards.Grant
+  onlyAnonWallet?: boolean
 }
 
 // TODO add local when we know what we will get from the server
@@ -139,6 +140,7 @@ class Grant extends React.Component<Props, State> {
     let title = getLocale('grantFinishTitleUGP')
     let text = getLocale('grantFinishTextUGP')
     let tokenTitle = getLocale('grantFinishTokenUGP')
+    const { onlyAnonWallet } = this.props
 
     if (type === 'ads') {
       title = getLocale('grantFinishTitleAds')
@@ -159,6 +161,7 @@ class Grant extends React.Component<Props, State> {
           date={date}
           testId={'newTokenGrant'}
           tokenTitle={tokenTitle}
+          onlyAnonWallet={onlyAnonWallet}
         />
       </GrantWrapper>
     )

components/brave_rewards/resources/page/components/pageWallet.tsx

@@ -224,7 +224,8 @@ class PageWallet extends React.Component<Props, State> {
     const {
       walletRecoverySuccess,
       walletServerProblem,
-      walletCorrupted
+      walletCorrupted,
+      onlyAnonWallet
     } = this.props.rewardsData.ui
 
     if (walletServerProblem) {
@@ -235,8 +236,10 @@ class PageWallet extends React.Component<Props, State> {
     }
 
     if (walletRecoverySuccess) {
+      const batFormatString = onlyAnonWallet ? getLocale('batPoints') : getLocale('bat')
+
       return {
-        node: <><b>{getLocale('walletRestored')}</b> {getLocale('walletRecoverySuccess', { balance: total.toString() })}</>,
+        node: <><b>{getLocale('walletRestored')}</b> {getLocale('walletRecoverySuccess', { balance: total.toString(), currency: batFormatString })}</>,
         type: 'success',
         onAlertClose: () => {
           this.actions.onClearAlert('walletRecoverySuccess')
@@ -506,13 +509,15 @@ class PageWallet extends React.Component<Props, State> {
           onDisconnectClick={this.onDisconnectClick}
           goToUphold={this.goToUphold}
           userName={this.getUserName()}
+          onlyAnonWallet={onlyAnonWallet}
         >
           {
             enabledMain
             ? emptyWallet
               ? <WalletEmpty />
               : <WalletSummary
                 reservedAmount={pendingTotal}
+                onlyAnonWallet={onlyAnonWallet}
                 reservedMoreLink={'https://brave.com/faq/#unclaimed-funds'}
                 {...this.getWalletSummary()}
               />

components/brave_rewards/resources/page/components/settingsPage.tsx

@@ -143,7 +143,7 @@ class SettingsPage extends React.Component<Props, State> {
   }
 
   getGrantClaims = () => {
-    const { grants } = this.props.rewardsData
+    const { grants, ui } = this.props.rewardsData
 
     if (!grants) {
       return null
@@ -158,7 +158,7 @@ class SettingsPage extends React.Component<Props, State> {
 
           return (
             <div key={`grant-${index}`}>
-              <Grant grant={grant} />
+              <Grant grant={grant} onlyAnonWallet={ui.onlyAnonWallet} />
             </div>
           )
         })}

components/brave_rewards/resources/ui/components/grantComplete/index.tsx

@@ -22,17 +22,19 @@ export interface Props {
   date: string
   isMobile?: boolean
   tokenTitle?: string
+  onlyAnonWallet?: boolean
 }
 
 export default class GrantComplete extends React.PureComponent<Props, {}> {
   render () {
-    const { id, testId, onClose, amount, date, isMobile, tokenTitle } = this.props
+    const { id, testId, onClose, amount, date, isMobile, tokenTitle, onlyAnonWallet } = this.props
+    const batFormatString = onlyAnonWallet ? getLocale('batPoints') : getLocale('bat')
 
     return (
       <StyledWrapper id={id} data-test-id={testId}>
         <StyledBox>
           <StyledTitle>{tokenTitle}</StyledTitle>
-          <StyledValue>{amount} BAT</StyledValue>
+          <StyledValue>{amount} {batFormatString}</StyledValue>
           {
             date && date.length > 0
             ? <>

components/brave_rewards/resources/ui/components/listToken/index.tsx

@@ -16,6 +16,7 @@ export interface Props {
   color?: Type
   border?: 'first' | 'last' | 'default'
   testId?: string
+  onlyAnonWallet?: boolean
 }
 
 export default class ListToken extends React.PureComponent<Props, {}> {
@@ -24,7 +25,7 @@ export default class ListToken extends React.PureComponent<Props, {}> {
   }
 
   render () {
-    const { id, title, value, converted, isNegative, size, color, border, testId } = this.props
+    const { id, title, value, converted, isNegative, size, color, border, testId, onlyAnonWallet } = this.props
 
     return (
       <StyledWrapper id={id} border={border} data-test-id={testId}>
@@ -36,6 +37,7 @@ export default class ListToken extends React.PureComponent<Props, {}> {
             isNegative={isNegative}
             size={size}
             color={color}
+            onlyAnonWallet={onlyAnonWallet}
           />
         </StyledContentWrapper>
       </StyledWrapper>

components/brave_rewards/resources/ui/components/listToken/style.ts

@@ -23,13 +23,13 @@ export const StyledTitle = styled<{}, 'div'>('div')`
   color: #4b4c5c;
   flex-grow: 1;
   flex-shrink: 1;
-  flex-basis: 60%;
+  flex-basis: 40%;
 `
 
 export const StyledContentWrapper = styled<{}, 'div'>('div')`
   flex-grow: 1;
   flex-shrink: 1;
-  flex-basis: 40%;
+  flex-basis: 50%;
   text-align: right;
 
   @media (max-width: 385px) {

components/brave_rewards/resources/ui/components/tokens/index.tsx

@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
+import { getLocale } from 'brave-ui/helpers'
 import { StyledWrapper, StyledTokens, StyledContent, StyledTokenValue, StyledTokenCurrency } from './style'
 
 export type Size = 'mini' | 'small' | 'normal'
@@ -17,6 +18,7 @@ export interface Props {
   isNegative?: boolean
   size?: Size
   color?: Type
+  onlyAnonWallet?: boolean
 }
 
 export default class Tokens extends React.PureComponent<Props, {}> {
@@ -28,7 +30,8 @@ export default class Tokens extends React.PureComponent<Props, {}> {
   }
 
   render () {
-    const { id, converted, value, hideText, isNegative, size, color, currency } = this.props
+    const { id, converted, value, hideText, isNegative, size, color, currency, onlyAnonWallet } = this.props
+    const batFormatString = onlyAnonWallet ? getLocale('batPoints') : getLocale('bat')
 
     return (
       <StyledWrapper id={id} size={size} color={color}>
@@ -38,7 +41,9 @@ export default class Tokens extends React.PureComponent<Props, {}> {
           </StyledTokenValue>
           {
             !hideText
-            ? <StyledTokenCurrency>BAT</StyledTokenCurrency>
+            ? <StyledTokenCurrency isAnon={onlyAnonWallet}>
+                {batFormatString}
+              </StyledTokenCurrency>
             : null
           }
         </StyledTokens>

components/brave_rewards/resources/ui/components/tokens/style.ts

@@ -5,6 +5,10 @@
 import styled, { css } from 'styled-components'
 import { Props, Size, Type } from './index'
 
+interface StyleProps {
+  isAnon?: boolean
+}
+
 const sizes: Record<Size, { token: string, tokenNum: string, text: string }> = {
   mini: {
     text: '14px',
@@ -63,8 +67,15 @@ export const StyledContent = styled<{}, 'span'>('span')`
   margin-left: 8px;
 `
 
-export const StyledTokenCurrency = styled<{}, 'span'>('span')`
+export const StyledTokenCurrency = styled<StyleProps, 'span'>('span')`
   font-size: var(--tokens-token-size);
   display: inline-block;
   margin-left: 4px;
+  ${(p) => {
+    if (!p.isAnon) {
+      return 'text-transform: uppercase;'
+    }
+
+    return null
+  }}
 `