Skip to content

Commit

Permalink
Merge pull request #3751 from brave/bat-points
Browse files Browse the repository at this point in the history
BAT Points updates for unsupported regions
  • Loading branch information
NejcZdovc authored Oct 24, 2019
2 parents de99303 + adb1861 commit c562531
Show file tree
Hide file tree
Showing 22 changed files with 151 additions and 47 deletions.
3 changes: 3 additions & 0 deletions .storybook/locale.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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!',
Expand Down Expand Up @@ -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'
}

Expand Down
3 changes: 3 additions & 0 deletions browser/ui/webui/brave_webui_source.cc
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -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 },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.'"
Expand Down Expand Up @@ -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": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ export const getUIMessages = (): Record<string, string> => {
'backupWalletNotification',
'backupWalletTitle',
'bat',
'batPoints',
'batPointsMessage',
'braveAdsLaunchTitle',
'braveAdsLaunchMsg',
'braveAdsTitle',
Expand Down Expand Up @@ -135,7 +137,8 @@ export const getUIMessages = (): Record<string, string> => {
'walletVerificationListHeader',
'walletVerificationTitle1',
'walletVerificationTitle2',
'walletVerified'
'walletVerified',
'yourBalance'
]

let translations = {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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()}
/>
Expand Down
3 changes: 3 additions & 0 deletions components/brave_rewards/resources/page/components/grant.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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')
Expand All @@ -159,6 +161,7 @@ class Grant extends React.Component<Props, State> {
date={date}
testId={'newTokenGrant'}
tokenTitle={tokenTitle}
onlyAnonWallet={onlyAnonWallet}
/>
</GrantWrapper>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,8 @@ class PageWallet extends React.Component<Props, State> {
const {
walletRecoverySuccess,
walletServerProblem,
walletCorrupted
walletCorrupted,
onlyAnonWallet
} = this.props.rewardsData.ui

if (walletServerProblem) {
Expand All @@ -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')
Expand Down Expand Up @@ -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()}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
)
})}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
? <>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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, {}> {
Expand All @@ -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}>
Expand All @@ -36,6 +37,7 @@ export default class ListToken extends React.PureComponent<Props, {}> {
isNegative={isNegative}
size={size}
color={color}
onlyAnonWallet={onlyAnonWallet}
/>
</StyledContentWrapper>
</StyledWrapper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -17,6 +18,7 @@ export interface Props {
isNegative?: boolean
size?: Size
color?: Type
onlyAnonWallet?: boolean
}

export default class Tokens extends React.PureComponent<Props, {}> {
Expand All @@ -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}>
Expand All @@ -38,7 +41,9 @@ export default class Tokens extends React.PureComponent<Props, {}> {
</StyledTokenValue>
{
!hideText
? <StyledTokenCurrency>BAT</StyledTokenCurrency>
? <StyledTokenCurrency isAnon={onlyAnonWallet}>
{batFormatString}
</StyledTokenCurrency>
: null
}
</StyledTokens>
Expand Down
13 changes: 12 additions & 1 deletion components/brave_rewards/resources/ui/components/tokens/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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
}}
`
Loading

0 comments on commit c562531

Please sign in to comment.