From adb18611a9d93c70957656b38e56686e6a4e8678 Mon Sep 17 00:00:00 2001 From: ryanml <rlanese@asu.edu> Date: Fri, 18 Oct 2019 19:07:27 -0700 Subject: [PATCH] BAT Points updates for unsupported regions Fixes brave/brave-browser#6480 --- .storybook/locale.ts | 3 + browser/ui/webui/brave_webui_source.cc | 3 + .../_locales/en_US/messages.json | 18 ++++- .../background/api/locale_api.ts | 5 +- .../brave_rewards/components/app.tsx | 1 + .../brave_rewards/components/panel.tsx | 2 + .../resources/page/components/grant.tsx | 3 + .../resources/page/components/pageWallet.tsx | 9 ++- .../page/components/settingsPage.tsx | 4 +- .../ui/components/grantComplete/index.tsx | 6 +- .../ui/components/listToken/index.tsx | 4 +- .../ui/components/listToken/style.ts | 4 +- .../resources/ui/components/tokens/index.tsx | 9 ++- .../resources/ui/components/tokens/style.ts | 13 +++- .../ui/components/walletSummary/index.tsx | 73 +++++++++++++------ .../ui/components/walletSummary/style.ts | 4 + .../ui/components/walletWrapper/index.tsx | 19 +++-- .../ui/components/walletWrapper/style.ts | 5 +- .../resources/ui/stories/concepts.tsx | 2 + .../ui/stories/settings/pageWallet.tsx | 2 + .../resources/ui/stories/wallet.tsx | 2 + .../resources/brave_components_strings.grd | 7 +- 22 files changed, 151 insertions(+), 47 deletions(-) diff --git a/.storybook/locale.ts b/.storybook/locale.ts index 84e8418a8e95..f786275fcf02 100644 --- a/.storybook/locale.ts +++ b/.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!', @@ -300,6 +302,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' } diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc index d26826765aa4..662db126ab0a 100644 --- a/browser/ui/webui/brave_webui_source.cc +++ b/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 }, @@ -559,6 +561,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 }, diff --git a/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json b/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json index 0e749fcad3b0..c68896aacf40 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json +++ b/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": { diff --git a/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts b/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts index e966dd870668..28f543f516fb 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts +++ b/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', @@ -135,7 +137,8 @@ export const getUIMessages = (): Record<string, string> => { 'walletVerificationListHeader', 'walletVerificationTitle1', 'walletVerificationTitle2', - 'walletVerified' + 'walletVerified', + 'yourBalance' ] let translations = {} diff --git a/components/brave_rewards/resources/extension/brave_rewards/components/app.tsx b/components/brave_rewards/resources/extension/brave_rewards/components/app.tsx index b78359acd872..9f0b7b3affe9 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/components/app.tsx +++ b/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} diff --git a/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx b/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx index b11f9eeb60b3..b0694001d486 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx +++ b/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()} /> diff --git a/components/brave_rewards/resources/page/components/grant.tsx b/components/brave_rewards/resources/page/components/grant.tsx index b9be2c57fde8..7011bc8c4a65 100644 --- a/components/brave_rewards/resources/page/components/grant.tsx +++ b/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> ) diff --git a/components/brave_rewards/resources/page/components/pageWallet.tsx b/components/brave_rewards/resources/page/components/pageWallet.tsx index 15e0f9a0cc05..dfc3bbde06c0 100644 --- a/components/brave_rewards/resources/page/components/pageWallet.tsx +++ b/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,6 +509,7 @@ class PageWallet extends React.Component<Props, State> { onDisconnectClick={this.onDisconnectClick} goToUphold={this.goToUphold} userName={this.getUserName()} + onlyAnonWallet={onlyAnonWallet} > { enabledMain @@ -513,6 +517,7 @@ class PageWallet extends React.Component<Props, State> { ? <WalletEmpty /> : <WalletSummary reservedAmount={pendingTotal} + onlyAnonWallet={onlyAnonWallet} reservedMoreLink={'https://brave.com/faq/#unclaimed-funds'} {...this.getWalletSummary()} /> diff --git a/components/brave_rewards/resources/page/components/settingsPage.tsx b/components/brave_rewards/resources/page/components/settingsPage.tsx index 952e776b5f88..96ba79eeb030 100644 --- a/components/brave_rewards/resources/page/components/settingsPage.tsx +++ b/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> ) })} diff --git a/components/brave_rewards/resources/ui/components/grantComplete/index.tsx b/components/brave_rewards/resources/ui/components/grantComplete/index.tsx index b3731728d674..41fc822ac015 100644 --- a/components/brave_rewards/resources/ui/components/grantComplete/index.tsx +++ b/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 ? <> diff --git a/components/brave_rewards/resources/ui/components/listToken/index.tsx b/components/brave_rewards/resources/ui/components/listToken/index.tsx index 039323fb114f..0bc86481aca4 100644 --- a/components/brave_rewards/resources/ui/components/listToken/index.tsx +++ b/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> diff --git a/components/brave_rewards/resources/ui/components/listToken/style.ts b/components/brave_rewards/resources/ui/components/listToken/style.ts index 34e756dac13e..5ac459a826a2 100644 --- a/components/brave_rewards/resources/ui/components/listToken/style.ts +++ b/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) { diff --git a/components/brave_rewards/resources/ui/components/tokens/index.tsx b/components/brave_rewards/resources/ui/components/tokens/index.tsx index 161cf26aa2cb..c280d342d561 100644 --- a/components/brave_rewards/resources/ui/components/tokens/index.tsx +++ b/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> diff --git a/components/brave_rewards/resources/ui/components/tokens/style.ts b/components/brave_rewards/resources/ui/components/tokens/style.ts index f88f859e62ca..312eda0cf810 100644 --- a/components/brave_rewards/resources/ui/components/tokens/style.ts +++ b/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 + }} ` diff --git a/components/brave_rewards/resources/ui/components/walletSummary/index.tsx b/components/brave_rewards/resources/ui/components/walletSummary/index.tsx index 5de61e44ce76..b39a809d7881 100644 --- a/components/brave_rewards/resources/ui/components/walletSummary/index.tsx +++ b/components/brave_rewards/resources/ui/components/walletSummary/index.tsx @@ -14,7 +14,8 @@ import { StyledNoActivityWrapper, StyledReservedWrapper, StyledReservedLink, - StyledAllReserved + StyledAllReserved, + StyledBatPoints } from './style' import ListToken from '../listToken' import { Type } from '../tokens' @@ -41,11 +42,13 @@ export interface Props { compact?: boolean reservedAmount?: number reservedMoreLink?: string + onlyAnonWallet?: boolean onSeeAllReserved?: () => void } export default class WalletSummary extends React.PureComponent<Props, {}> { generateList = () => { + const { onlyAnonWallet } = this.props const tokenSize = this.props.compact ? 'small' : 'normal' const list = [ { @@ -101,6 +104,7 @@ export default class WalletSummary extends React.PureComponent<Props, {}> { color={item.color as Type} title={getLocale(item.translation)} isNegative={item.negative} + onlyAnonWallet={onlyAnonWallet} border={all === current ? 'last' : undefined} /> )) @@ -120,14 +124,56 @@ export default class WalletSummary extends React.PureComponent<Props, {}> { return result } + generateInfo = () => { + const { + reservedAmount, + onlyAnonWallet, + onSeeAllReserved, + reservedMoreLink + } = this.props + const showReserved = reservedAmount && reservedAmount > 0 + + if (!onlyAnonWallet && !showReserved) { + return null + } + + const amount = (reservedAmount && reservedAmount.toFixed(1)) || '0.0' + const batFormatString = onlyAnonWallet ? getLocale('batPoints') : getLocale('bat') + + return ( + <StyledReservedWrapper data-test-id={'pending-contribution-box'}> + { + onlyAnonWallet + ? <p> + <StyledBatPoints>{getLocale('batPoints')}</StyledBatPoints> {getLocale('batPointsMessage')} + </p> + : null + } + { + showReserved + ? <> + {getLocale('reservedAmountText', { reservedAmount: amount, currency: batFormatString })} <StyledReservedLink href={reservedMoreLink} target={'_blank'}> + {getLocale('reservedMoreLink')} + </StyledReservedLink> + { + onSeeAllReserved + ? <StyledAllReserved onClick={onSeeAllReserved} data-test-id={'reservedAllLink'}> + {getLocale('reservedAllLink')} + </StyledAllReserved> + : null + } + </> + : null + } + </StyledReservedWrapper> + ) + } + render () { const { id, onActivity, - compact, - reservedAmount, - reservedMoreLink, - onSeeAllReserved + compact } = this.props const date = new Date() const month = getLocale(`month${date.toLocaleString('en-us', { month: 'short' })}`) @@ -143,22 +189,7 @@ export default class WalletSummary extends React.PureComponent<Props, {}> { <StyledTitle>{month} {year}</StyledTitle> <div> {this.generateList()} - { - reservedAmount && reservedAmount > 0 - ? <StyledReservedWrapper data-test-id={'pending-contribution-box'}> - {getLocale('reservedAmountText', { reservedAmount: reservedAmount.toFixed(1) })} <StyledReservedLink href={reservedMoreLink} target={'_blank'}> - {getLocale('reservedMoreLink')} - </StyledReservedLink> - { - onSeeAllReserved - ? <StyledAllReserved onClick={onSeeAllReserved} data-test-id={'reservedAllLink'}> - {getLocale('reservedAllLink')} - </StyledAllReserved> - : null - } - </StyledReservedWrapper> - : null - } + {this.generateInfo()} </div> { onActivity diff --git a/components/brave_rewards/resources/ui/components/walletSummary/style.ts b/components/brave_rewards/resources/ui/components/walletSummary/style.ts index cb4c46c1e570..c8927088a8c8 100644 --- a/components/brave_rewards/resources/ui/components/walletSummary/style.ts +++ b/components/brave_rewards/resources/ui/components/walletSummary/style.ts @@ -104,3 +104,7 @@ export const StyledAllReserved = styled<StyleProps, 'button'>('button')` color: ${palette.blue400}; cursor: pointer; ` + +export const StyledBatPoints = styled<{}, 'span'>('span')` + font-weight: 600; +` diff --git a/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx b/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx index e6c675d1d909..4737f1463c17 100644 --- a/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx +++ b/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx @@ -149,6 +149,7 @@ export interface Props { onDisconnectClick?: () => void goToUphold?: () => void userName?: string + onlyAnonWallet?: boolean } export type Step = '' | 'captcha' | 'complete' @@ -580,7 +581,8 @@ export default class WalletWrapper extends React.PureComponent<Props, State> { isMobile, convertProbiToFixed, onVerifyClick, - onDisconnectClick + onDisconnectClick, + onlyAnonWallet } = this.props const hasGrants = this.hasGrants(grants) @@ -597,6 +599,7 @@ export default class WalletWrapper extends React.PureComponent<Props, State> { const walletVerified = walletState === 'verified' || walletState === 'disconnected_verified' const connectedVerified = walletState === 'verified' + const batFormatString = onlyAnonWallet ? getLocale('batPoints') : getLocale('bat') return ( <> @@ -619,7 +622,7 @@ export default class WalletWrapper extends React.PureComponent<Props, State> { title={grant.finishTitle || ''} text={grant.finishText} > - <GrantComplete isMobile={true} onClose={this.onFinish} amount={tokens} date={date} tokenTitle={grant.finishTokenTitle} /> + <GrantComplete isMobile={true} onClose={this.onFinish} amount={tokens} date={date} tokenTitle={grant.finishTokenTitle} onlyAnonWallet={onlyAnonWallet} /> </GrantWrapper> : null } @@ -649,9 +652,9 @@ export default class WalletWrapper extends React.PureComponent<Props, State> { : null } { - walletState + walletState && !onlyAnonWallet ? this.generateWalletButton(walletState) - : <StyledTitle>{getLocale('yourWallet')}</StyledTitle> + : <StyledTitle>{getLocale('yourBalance')}</StyledTitle> } { showSecActions @@ -662,7 +665,7 @@ export default class WalletWrapper extends React.PureComponent<Props, State> { } <StyledBalance> <StyledBalanceTokens data-test-id='balance'> - {balance} <StyledBalanceCurrency>BAT</StyledBalanceCurrency> + {balance} <StyledBalanceCurrency>{batFormatString}</StyledBalanceCurrency> </StyledBalanceTokens> { converted @@ -690,7 +693,7 @@ export default class WalletWrapper extends React.PureComponent<Props, State> { { grants && grants.map((grant: Grant, i: number) => { return <StyledGrant key={`${id}-grant-${i}`}> - <b>{grant.tokens} BAT</b> + <b>{grant.tokens} {batFormatString}</b> { grant.type === 'ads' ? <span>{getLocale('adsEarnings')}</span> @@ -716,7 +719,7 @@ export default class WalletWrapper extends React.PureComponent<Props, State> { {children} </StyledContent> { - showCopy + showCopy && !onlyAnonWallet ? <StyledCopy connected={connectedVerified}> { walletVerified @@ -749,7 +752,7 @@ export default class WalletWrapper extends React.PureComponent<Props, State> { } </StyledWrapper> { - showCopy + showCopy && !onlyAnonWallet ? <StyledBAT> {getLocale('rewardsPanelText3')} <a href={'https://basicattentiontoken.org/'} target={'_blank'}>{getLocale('rewardsPanelText4')}</a> </StyledBAT> diff --git a/components/brave_rewards/resources/ui/components/walletWrapper/style.ts b/components/brave_rewards/resources/ui/components/walletWrapper/style.ts index 4fd58ee1380a..d4ce8e090748 100644 --- a/components/brave_rewards/resources/ui/components/walletWrapper/style.ts +++ b/components/brave_rewards/resources/ui/components/walletWrapper/style.ts @@ -56,10 +56,11 @@ export const StyledHeader = styled<{}, 'div'>('div')` export const StyledTitle = styled<{}, 'div'>('div')` font-size: 16px; - font-weight: 500; + font-weight: bold; line-height: 1.38; - letter-spacing: -0.2px; + letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.65); + margin-bottom: 30px; ` export const StyledBalance = styled<{}, 'div'>('div')` diff --git a/components/brave_rewards/resources/ui/stories/concepts.tsx b/components/brave_rewards/resources/ui/stories/concepts.tsx index ad30f9c30acf..cc153ae4bb75 100644 --- a/components/brave_rewards/resources/ui/stories/concepts.tsx +++ b/components/brave_rewards/resources/ui/stories/concepts.tsx @@ -495,6 +495,7 @@ storiesOf('Rewards/Concepts/Desktop', module) onVerifyClick={onVerifyClick} onDisconnectClick={onDisconnectClick} userName={text('user name', 'jennrhim')} + onlyAnonWallet={boolean('Anon Wallet Only', false)} > <WalletSummarySlider id={'panel-slider'} @@ -531,6 +532,7 @@ storiesOf('Rewards/Concepts/Desktop', module) donation: object('Donation', { tokens: '2.0', converted: '0.25' }), tips: object('Tips', { tokens: '19.0', converted: '5.25' }) }} + onlyAnonWallet={boolean('Anon Wallet Only', false)} /> </WalletSummarySlider> </WalletWrapper> diff --git a/components/brave_rewards/resources/ui/stories/settings/pageWallet.tsx b/components/brave_rewards/resources/ui/stories/settings/pageWallet.tsx index f62e51a24571..233dbcf69f50 100644 --- a/components/brave_rewards/resources/ui/stories/settings/pageWallet.tsx +++ b/components/brave_rewards/resources/ui/stories/settings/pageWallet.tsx @@ -268,6 +268,7 @@ class PageWallet extends React.Component<Props, State> { onSettingsClick={this.onBackupModalOpen} onActivityClick={doNothing} showCopy={true} + onlyAnonWallet={false} showSecActions={true} grants={grants} walletState={walletState} @@ -287,6 +288,7 @@ class PageWallet extends React.Component<Props, State> { tips: { tokens: '19.0', converted: '5.25' } }} onActivity={this.onActivity} + onlyAnonWallet={false} /> : null } diff --git a/components/brave_rewards/resources/ui/stories/wallet.tsx b/components/brave_rewards/resources/ui/stories/wallet.tsx index 2510e5b8cbf2..7f7cf14d31a1 100644 --- a/components/brave_rewards/resources/ui/stories/wallet.tsx +++ b/components/brave_rewards/resources/ui/stories/wallet.tsx @@ -54,6 +54,7 @@ storiesOf('Rewards/Wallet/Desktop', module) onNotificationClick={onEnableAds} notification={boolean('Show notification', true) ? adsLaunchNotification : undefined} showCopy={boolean('Show Uphold', false)} + onlyAnonWallet={boolean('Anon Wallet Only', false)} showSecActions={boolean('Show secondary actions', true)} balance={text('Balance', '25.0')} converted={text('Converted', '163230.50 USD')} @@ -118,6 +119,7 @@ storiesOf('Rewards/Wallet/Desktop', module) reservedAmount={number('Reserved amount', 52)} reservedMoreLink={'https://brave.com'} onSeeAllReserved={doNothing} + onlyAnonWallet={boolean('Anon Wallet Only', false)} /> </div> ) diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd index 68841b8a7c44..b5f7df14d0c6 100644 --- a/components/resources/brave_components_strings.grd +++ b/components/resources/brave_components_strings.grd @@ -225,6 +225,8 @@ <message name="IDS_BRAVE_REWARDS_LOCAL_ADS_PER_HOUR_4" desc="">4 ads per hour</message> <message name="IDS_BRAVE_REWARDS_LOCAL_ADS_PER_HOUR_5" desc="">5 ads per hour</message> <message name="IDS_BRAVE_UI_BAT_REWARDS_TEXT" desc="">BAT</message> + <message name="IDS_BRAVE_UI_BAT_POINTS_TEXT" desc="">BAT Points</message> + <message name="IDS_BRAVE_UI_POINTS_MESSAGE" desc="">can be used in Brave Rewards to contribute to your favorite content creators. BAT Points cannot be exchanged for BAT.</message> <message name="IDS_BRAVE_REWARDS_LOCAL_DEVICE_OFFLINE" desc="">The device is offline, please try again later.</message> <message name="IDS_BRAVE_REWARDS_LOCAL_CONTR_MONTHLY" desc="">Monthly Payment</message> <message name="IDS_BRAVE_REWARDS_LOCAL_CONTR_NEXT_DATE" desc="">Next contribution date</message> @@ -266,7 +268,7 @@ <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_ABILITY_TW" desc="">Twitter</message> <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_DISABLED_TEXT1" desc="">Tip on the spot as you find gems.</message> <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_DISABLED_TEXT2" desc="">If you like, let people know with a quick tweet.</message> - <message name="IDS_BRAVE_REWARDS_LOCAL_WALLET_RECOVERY_SUCCESS" desc="">{{balance}} BAT was recovered. Your wallet key has been verified and loaded successfully.</message> + <message name="IDS_BRAVE_REWARDS_LOCAL_WALLET_RECOVERY_SUCCESS" desc="">{{balance}} {{currency}} was recovered. Your wallet key has been verified and loaded successfully.</message> <message name="IDS_BRAVE_REWARDS_LOCAL_WALLET_RESTORED" desc="">Wallet restored!</message> <message name="IDS_BRAVE_REWARDS_LOCAL_WALLET_RECOVERY_FAIL" desc="">Please re-enter keys or try different keys.</message> <message name="IDS_BRAVE_REWARDS_LOCAL_ALMOST_THERE" desc="">Almost there…</message> @@ -479,7 +481,7 @@ <message name="IDS_BRAVE_UI_GITHUB_TIP_TITLE_EMPTY" desc="We use this title when github text is empty">Tip {{ user }} </message> <message name="IDS_BRAVE_UI_REMOVE" desc="">remove</message> <message name="IDS_BRAVE_UI_REMOVE_AD_FROM_SAVED" desc="">Remove From Saved</message> - <message name="IDS_BRAVE_UI_RESERVED_AMOUNT_TEXT" desc="Notification about how much BAT do you have reserved">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> + <message name="IDS_BRAVE_UI_RESERVED_AMOUNT_TEXT" desc="Notification about how much BAT do you have reserved">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.</message> <message name="IDS_BRAVE_UI_RESERVED_MORE_LINK" desc="Text for the link that explains more about reserved amount">Learn more.</message> <message name="IDS_BRAVE_UI_RESTORE" desc="">Restore</message> <message name="IDS_BRAVE_UI_RESTORE_ALL" desc="">Restore All</message> @@ -562,6 +564,7 @@ <message name="IDS_BRAVE_UI_WHY_BRAVE_REWARDS" desc="">Why Brave Rewards?</message> <message name="IDS_BRAVE_UI_WHY_BRAVE_REWARDS_DESC_1" desc="">With your old browser, you paid to browse the web by viewing ads with your valuable attention. You spent your valuable time downloading invasive ad technology that transmitted your valuable private data to advertisers — without your consent.</message> <message name="IDS_BRAVE_UI_WHY_BRAVE_REWARDS_DESC_2" desc="">Today, 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.</message> + <message name="IDS_BRAVE_UI_YOUR_BALANCE" desc="">Your Balance</message> <message name="IDS_BRAVE_UI_YOUR_WALLET" desc="">Your wallet</message> <message name="IDS_BRAVE_UI_VIEW_DETAILS" desc="">View Details</message> <message name="IDS_BRAVE_UI_REWARDS_CREATING_TEXT" desc="">Creating wallet</message>