Merge pull request #3463 from brave/brave-rewards-ui

Brave rewards ui

Author: NejcZdovc

.storybook/locale.ts

@@ -9,19 +9,31 @@ const locale: Record<string, string> = {
   activityNote: 'To protect your privacy, this Brave Rewards statement is not saved, recorded or logged anywhere other than on your device (this computer). It cannot be retrieved from Brave in the event of data loss on your device.',
   addFunds: 'add funds',
   addFundsFAQ: 'the FAQ',
-  addFundsNote: 'Reminder: The Brave Wallet is unidirectional and BAT flows to publisher sites. For more information about Brave Payments, please visit',
+  addFundsNote: 'Reminder: The Brave Wallet is unidirectional and BAT flows to creators sites. For more information about Brave Rewards, please visit',
   addFundsQR: 'Show QR Code',
   addFundsText: 'Be sure to use the address below that matches the type of cryto you own. It will be converted automatically to BAT by Uphold and appear as an increased balance in your Brave Rewards wallet. Please allow up to one hour for your wallet balance to update.',
   addFundsTitle: 'Send cryptocurrency from your external account to your Brave Rewards wallet.',
+  ads: 'Ads',
+  adsCurrentlyViewing: 'Your setting: maximum ads per hour: ',
+  adsEarnings: 'earned from ads',
+  adsHistoryFilterAll: 'All',
+  adsHistoryFilterSaved: 'Saved',
+  adsHistorySubTitle: 'Ads you\'ve received in the past {{totalDays}} days',
+  adsHistoryTitle: 'Ads History',
+  adsNotSupported: 'Sorry! Ads are not yet available in your region.',
+  all: 'All',
   allowTip: 'Allow tips on',
   amount: 'Amount',
+  and: 'and',
   autoTipText: 'You are automatically sending a tip to:',
   backup: 'Backup',
   backupNow: 'Backup Now',
   backupWalletTitle: 'Backup Wallet',
+  balanceUnavailable: 'Unavailable',
   bat: 'BAT',
   braveAdsDesc: 'No action required. Just collect tokens. Your data is safe with our Shields.',
   braveAdsTitle: 'Brave Ads',
+  braveAdsLaunchTitle: 'Brave Ads has arrived!',
   braveContributeDesc: 'Set budget and browse normally. Your favorite sites get paid automatically.',
   braveContributeTitle: 'Auto-Contribute',
   braveRewards: 'Brave Rewards',
@@ -30,19 +42,22 @@ const locale: Record<string, string> = {
   braveRewardsSubTitle: 'Get Rewarded for Browsing!',
   braveRewardsTeaser: 'How it works...',
   braveRewardsTitle: 'Brave Rewards',
-  braveVerified: 'Brave Verified Publishers',
+  braveVerified: 'Verified Creators',
   cancel: 'Cancel',
   captchaDrag: 'Drag the BAT Icon on to the',
-  captchaLuckyDay: 'It’s your lucky day!',
   captchaOnTheWay: 'Your token grant is on its way.',
   captchaProveHuman: 'Prove that you are human!',
   captchaTarget: 'target.',
   captchaMissedTarget: 'Hmm… Not Quite. Try Again.',
+  category: 'Category',
   claim: 'Claim',
+  click: 'Clicked',
   closeBalance: 'Closing Balance',
+  connectedText: 'This creator has not yet signed up to receive contributions from Brave users. Any tips you send will remain in your wallet until they verify.',
   contribute: 'Contribute',
   contributeAllocation: 'Auto-Contribute Allocation',
   contributeTooltip: 'Auto-Contribute Settings',
+  contributionTips: 'Contributions & Tips',
   copy: 'Copy',
   currentDonation: 'You’re currently donating {{currentDonation}} BAT to this site every month.',
   braveRewardsCreatingText: 'Creating wallet',
@@ -54,7 +69,9 @@ const locale: Record<string, string> = {
   disabledPanelSettings: 'Settings.',
   disabledPanelPrivateText: 'Brave Rewards is not available while in a Private Window.',
   disabledPanelText: 'You are not currently accruing any Rewards benefits while browsing. Turn Rewards back on in',
+  disabledPanelTextTwo: 'Earn by viewing privacy-respecting ads, and pay it forward to support content creators you love.',
   disabledPanelTitle: 'Brave Rewards is',
+  dismiss: 'Closed',
   dndCaptchaText1: 'Drag and drop the token logo onto the',
   dndCaptchaText2: 'target',
   donation: 'Donation',
@@ -72,8 +89,10 @@ const locale: Record<string, string> = {
   earningsClaimDefault: 'Your Ads earnings are available.',
   earningsClaimOne: 'Your Ads earnings,',
   earningsClaimTwo: 'are available.',
+  enableRewards: 'Enable Brave Rewards',
   enableTips: 'Enable Tips',
   excludeSite: 'Exclude this site',
+  excludedSites: 'Excluded Sites',
   excludedSitesText: 'Sites excluded from Auto-Contributions:',
   expiresOn: 'expires on',
   firstTipDateText: 'Your first monthly tip will be sent on:',
@@ -83,9 +102,12 @@ const locale: Record<string, string> = {
   grantExpire: 'Grant Expiration Date',
   import: 'import',
   includeInAuto: 'Include in Auto-Contribute',
+  landed: 'Clicked',
   learnMore: 'Learn More',
   makeMonthly: 'Make this monthly',
   manageWallet: 'Manage Your Wallet',
+  markAsInappropriate: 'Mark As Inappropriate',
+  markAsInappropriateChecked: 'Mark As Inappropriate ✓',
   monthApr: 'Apr',
   monthAug: 'August',
   monthDec: 'December',
@@ -101,8 +123,8 @@ const locale: Record<string, string> = {
   monthlyText: 'Monthly',
   monthlyTips: 'Monthly Tips!',
   newGrant: 'A free token grant is available.',
-  newTokenGrant: 'New Token Grant',
   noActivity: 'No activities yet…',
+  noAdsHistory: 'There is currently no Brave Ads history',
   noGrants: 'Currently no token grant is available.',
   notEnoughTokens: 'Not enough tokens. Please',
   noThankYou: 'No, thank you',
@@ -111,11 +133,19 @@ const locale: Record<string, string> = {
   on: 'on',
   oneTime: 'One time',
   oneTimeDonation: 'One-time Tips',
+  openAdsHistory: 'Show Ads History',
   openBalance: 'Opening Balance',
   payment: 'Payment',
   paymentMonthly: 'Payment made every {{day}}th day in each month.',
   paymentNotMade: 'Payment not made.',
   paymentWarning: 'When your balance is not enough to cover the combined total of Auto-Contribute and the recurring donations, these payments are skipped for the period.',
+  pendingContributions: 'Pending Contributions',
+  pendingContributionEmpty: 'No pending contributions…',
+  pendingContributionRemoveAll: 'Remove All',
+  pendingTypeac: 'Auto-Contribute',
+  pendingTyperecurring: 'Recurring tip',
+  pendingTypetip: 'One-time tip',
+  pendingUntil: 'Pending until',
   pinnedSitesHeader: 'Pinned sites are now',
   pinnedSitesMsg: 'Here\'s how monthly tips work:',
   pinnedSitesOne: 'Monthly tips do not come out of your Auto-Contribute payment. They\'re separate.',
@@ -124,18 +154,25 @@ const locale: Record<string, string> = {
   pinnedSitesFour: 'You can remove any site receiving monthly tips from inside of the Tips panel.',
   pleaseNote: 'Please note:',
   print: 'Print',
+  privacyPolicy: 'Privacy Policy',
+  processingRequest: 'You will be redirected shorty to verify your wallet.',
+  processingRequestButton: 'Try again',
   readyToTakePart: 'Ready to get started?',
   readyToTakePartOptInText: 'Yes I\'m Ready!',
   readyToTakePartStart: 'You can start with the',
+  reconnectWallet: 'Reconnect wallet',
   recoveryKeys: 'Recovery Key',
   recurring: 'Recurring',
   recurringDonation: 'Recurring Donation',
   recurringDonations: 'Monthly Tips',
   remove: 'remove',
+  reservedAllLink: 'Show all pending contributions',
+  removeAdFromSaved: 'Remove From Saved',
   reservedAmountText: 'You’ve designated {{reservedAmount}} BAT for creators who haven’t yet signed up to receive contributions. We’ll keep trying to contribute until they verify, or until 90 days have passed.',
   reservedMoreLink: 'Learn more.',
   restore: 'Restore',
   restoreAll: 'Restore All',
+  restoreSite: 'Restore this site',
   reviewSitesMsg: 'Your pinned sites have been moved to',
   rewardsBackupText1: 'Backup your Wallet',
   rewardsBackupText2: 'Keep this recovery key safe.',
@@ -146,38 +183,55 @@ const locale: Record<string, string> = {
   rewardsContributeAttention: 'Attention',
   rewardsContributeAttentionScore: 'Attention',
   rewardsContributeText1: 'You’re currently supporting',
+  rewardsExcludedText1: 'You\'ve excluded',
+  rewardsExcludedText2: 'sites from Auto-Contribute.',
   rewardsOffText1: 'Do you know that you’ve been paying for the web content with your data for the digital ads? You didn’t have a voice in it and worse, you’re exposed to privacy and security risks.',
   rewardsOffText2: 'Brave Rewards allows you to take control back.',
-  rewardsOffText3: 'How does it work?',
-  rewardsOffText4: 'Your attention is valuable. Get paid for the ads. And pay directly the favorite content creators at your will. That way, they can grow and continue delivering the content that delights you.',
+  rewardsOffText3: 'Today, Brave welcomes you to the new internet.',
+  rewardsOffText4: 'One where your time is valued, your personal data is kept private, and you actually get paid for your attention.',
+  rewardsOffText5: '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.',
   rewardsPanelEmptyText1: 'Sadly, no tokens yet.',
   rewardsPanelEmptyText2: '3 ways to fill your wallet:',
   rewardsPanelEmptyText3: 'You can add funds.',
   rewardsPanelEmptyText4: 'You can earn tokens from Brave Ads.',
-  rewardsPanelEmptyText5: 'Occasionally, you will also received token grants from Brave. So keep an eye out for the alert!',
+  rewardsPanelEmptyText5: 'Occasionally, you\'ll be offered free token grants from Brave. Be sure to keep an eye out for the alert!',
   rewardsPanelOffText1: 'Get Rewarded for Browsing!',
   rewardsPanelOffText2: 'Earn tokens for your attention to ads and pay it forward to support content creators you value!',
   rewardsPanelText1: 'Add, withdraw and manage funds at',
-  rewardsPanelText2: 'Brave wallet is managed by',
+  rewardsPanelText2: 'Your Brave wallet is powered by',
   rewardsPanelText3: 'Brave Rewards is built on the Basic Attention Token. Learn more about BAT',
   rewardsPanelText4: 'here',
+  rewardsPanelTextVerify: 'verify',
   rewardsRestoreText1: 'Restore your Wallet',
   rewardsRestoreText2: 'Use your recovery key to restore your wallet.',
   rewardsRestoreText3: 'Restoring with a recovery key will replace your current wallet. So make sure you empty or back up your current wallet before restoring.',
   rewardsRestoreText4: 'Enter your recovery key or',
   rewardsSummary: 'Rewards Summary',
   rewardsWhy: 'Why Brave Rewards…',
+  saveAd: 'Save',
   saveAsFile: 'Save',
+  saved: 'Saved',
   seeAllItems: 'See all {{numItems}} items',
   seeAllSites: 'See all {{numSites}} sites',
   sendDonation: 'Send my donation',
   sendTip: 'Send my Tip',
+  serviceText: 'By clicking \'Enable Brave Rewards\', you indicate that you have read and agree to the',
+  serviceTextToggle: 'By turning on Brave Rewards, you indicate that you have read and agree to the',
+  serviceTextPanelWelcome: 'By clicking ‘Join Rewards’, you indicate that you have read and agree to the',
+  serviceTextWelcome: 'By clicking ‘Yes, I\'m in!’, you indicate that you have read and agree to the',
+  serviceTextReady: 'By clicking ‘Yes, I\'m Ready!’, you indicate that you have read and agree to the',
   settings: 'Settings',
+  showAll: 'Show All',
   site: 'site',
   siteBannerNoticeNote: 'NOTE:',
-  siteBannerNoticeText: 'This creator has not yet verified their site. As soon as they verify with Brave, they will receive your tip.',
+  siteBannerNoticeText: 'This Creator has not yet verified their site. As soon as they verify with Brave, they will receive your tip.',
+  siteBannerConnectedText: 'This creator has not yet signed up to receive contributions from Brave users. Your browser will keep trying to contribute until they verify, or until 90 days have passed.',
   sites: 'sites',
+  tellOthers: 'Tell others about your tip.',
+  supportedSites: 'Supported Sites',
   thankYou: 'Thank You!',
+  termsOfService: 'Terms of Service',
+  optOutTooltip: 'You will no longer receive\nads from this category',
   tipOnLike: 'Tip on like',
   tipText: 'You\'ve just sent a tip to:',
   titleBAT: 'Basic Attention token (BAT)',
@@ -189,23 +243,46 @@ const locale: Record<string, string> = {
   tokens: 'tokens',
   total: 'Total',
   transactions: 'Transactions',
+  turnOnAds: 'Turn on Ads',
   turnOnRewardsDesc: 'This enables both Brave Ads and Auto-Contribute. You can always opt out each any time.',
   turnOnRewardsTitle: 'Turn on Rewards',
+  tweetNow: 'Tweet',
   type: 'Type',
   uhOh: 'Uh oh…',
-  unVerifiedPublisher: 'Not yet verified',
+  unVerifiedCheck: 'Refresh status',
+  unVerifiedPublisher: 'Unverified',
   unVerifiedText: 'This creator has not yet signed up to receive contributions from Brave users.',
   unVerifiedTextMore: 'Learn more.',
-  verifiedPublisher: 'Brave Verified Publisher',
+  verifiedPublisher: 'Verified Creator',
+  verifyWalletTitle: 'Verify your wallet',
   viewDetails: 'View Details',
+  view: 'Viewed',
   viewMonthly: 'View Monthly Statement for Details',
   walletActivity: 'Wallet Activity',
   walletAddress: 'Wallet Address',
   walletBalance: 'wallet balance',
+  walletButtonDisconnected: 'Disconnected',
+  walletButtonUnverified: 'Verify Wallet',
+  walletButtonVerified: 'Verified',
   walletFailedButton: 'Re-try',
   walletFailedTitle: 'Wallet creation failed',
   walletFailedText: 'Please check your internet connection.',
+  walletGoToVerifyPage: 'Complete wallet verification',
+  walletGoToUphold: 'Go to my Uphold account',
+  walletDisconnect: 'Disconnect from Brave Rewards',
+  walletVerificationButton: 'Verify wallet',
+  walletVerificationFooter: 'Our wallet service is provided by',
+  walletVerificationList1: 'Withdraw BAT that you earn from viewing privacy-respecting ads',
+  walletVerificationList2: 'Purchase additional BAT with credit cards and other sources',
+  walletVerificationList3: 'Withdraw BAT that you may have previously added to your Brave Rewards wallet',
+  walletVerificationListHeader: 'Benefits of verifying',
+  walletVerificationNote1: 'Uphold may require you to verify your identity based on services requested.',
+  walletVerificationNote2: 'Brave Software Inc. does not process, store, or access any of the personal information that you provide to Uphold when you establish an account with them.',
+  walletVerificationTitle1: 'Ready to verify your wallet?',
+  walletVerificationTitle2: 'Verification is not necessary to earn rewards for creator contributions',
+  walletVerified: 'Verified',
   welcome: 'Welcome!',
+  welcomeBack: 'Welcome Back!',
   welcomeButtonTextOne: 'Start Earning Now!',
   welcomeButtonTextTwo: 'Join Rewards',
   welcomeDescOne: 'You can now earn tokens for watching privacy focused Brave Ads. Your contribution stays the same.',
@@ -217,6 +294,7 @@ const locale: Record<string, string> = {
   whyBraveRewards: 'Why Brave Rewards?',
   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',
   yourWallet: 'Your wallet'
 }
 

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

@@ -9,9 +9,9 @@ import {
   PanelWelcome,
   WalletPanelDisabled,
   WalletWrapper
-} from 'brave-ui/features/rewards'
+} from '../../../ui/components'
 import { BatColorIcon, WalletAddIcon } from 'brave-ui/components/icons'
-import { WalletState } from 'brave-ui/features/rewards/walletWrapper'
+import { WalletState } from '../../../ui/components/walletWrapper'
 
 // Components
 import Panel from './panel'

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

@@ -6,11 +6,11 @@ import * as React from 'react'
 import { bindActionCreators, Dispatch } from 'redux'
 import { connect } from 'react-redux'
 import { WalletAddIcon, BatColorIcon } from 'brave-ui/components/icons'
-import { WalletWrapper, WalletSummary, WalletSummarySlider, WalletPanel } from 'brave-ui/features/rewards'
-import { Provider } from 'brave-ui/features/rewards/profile'
-import { NotificationType, WalletState } from 'brave-ui/features/rewards/walletWrapper'
+import { WalletWrapper, WalletSummary, WalletSummarySlider, WalletPanel } from '../../../ui/components'
+import { Provider } from '../../../ui/components/profile'
+import { NotificationType, WalletState } from '../../../ui/components/walletWrapper'
 import { RewardsNotificationType } from '../constants/rewards_panel_types'
-import { Type as AlertType } from 'brave-ui/features/rewards/alert'
+import { Type as AlertType } from '../../../ui/components/alert'
 
 // Utils
 import * as rewardsPanelActions from '../actions/rewards_panel_actions'

components/brave_rewards/resources/extension/brave_rewards/utils.ts

@@ -4,7 +4,7 @@
 
 import BigNumber from 'bignumber.js'
 import { getMessage } from './background/api/locale_api'
-import { WalletState } from 'brave-ui/features/rewards/walletWrapper'
+import { WalletState } from '../../ui/components/walletWrapper'
 
 export const convertBalance = (tokens: string, rates: Record<string, number> | undefined, currency: string = 'USD'): string => {
   const tokensNum = parseFloat(tokens)

components/brave_rewards/resources/page/components/adsBox.tsx

@@ -16,7 +16,7 @@ import {
   ModalShowAdsHistory,
   ShowAdsHistory,
   Tokens
-} from 'brave-ui/features/rewards'
+} from '../../ui/components'
 import { Grid, Column, Select, ControlWrapper } from 'brave-ui/components'
 
 // Utils

components/brave_rewards/resources/page/components/app.tsx

@@ -11,7 +11,7 @@ import SettingsPage from './settingsPage'
 
 // Utils
 import * as rewardsActions from '../actions/rewards_actions'
-import { WelcomePage } from 'brave-ui/features/rewards'
+import { WelcomePage } from '../../ui/components'
 
 interface Props extends Rewards.ComponentProps {
 }

components/brave_rewards/resources/page/components/contributeBox.tsx

@@ -8,8 +8,8 @@ import { connect } from 'react-redux'
 
 // Components
 import { Checkbox, Grid, Column, Select, ControlWrapper } from 'brave-ui/components'
-import { Box, TableContribute, DisabledContent, List, ModalContribute, Tokens, NextContribution } from 'brave-ui/features/rewards'
-import { Provider } from 'brave-ui/features/rewards/profile'
+import { Box, TableContribute, DisabledContent, List, ModalContribute, Tokens, NextContribution } from '../../ui/components'
+import { Provider } from '../../ui/components/profile'
 
 // Utils
 import { getLocale } from '../../../../common/locale'

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

@@ -11,14 +11,14 @@ import {
   GrantWrapper,
   GrantCaptcha,
   GrantComplete
-} from 'brave-ui/features/rewards'
-import GrantClaim, { Type } from 'brave-ui/features/rewards/grantClaim'
+} from '../../ui/components'
+import GrantClaim, { Type } from '../../ui/components/grantClaim'
 
 // Utils
 import * as rewardsActions from '../actions/rewards_actions'
 import { getLocale } from '../../../../common/locale'
 import { convertProbiToFixed } from '../utils'
-import GrantError from 'brave-ui/features/rewards/grantError'
+import GrantError from '../../ui/components/grantError'
 
 interface State {
   grantShow: boolean

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

@@ -14,16 +14,16 @@ import {
   WalletEmpty,
   WalletSummary,
   WalletWrapper
-} from 'brave-ui/features/rewards'
+} from '../../ui/components'
 import { WalletAddIcon, WalletWithdrawIcon } from 'brave-ui/components/icons'
-import { AlertWallet, WalletState } from 'brave-ui/features/rewards/walletWrapper'
-import { Provider } from 'brave-ui/features/rewards/profile'
-import { DetailRow as PendingDetailRow, PendingType } from 'brave-ui/features/rewards/tablePending'
+import { AlertWallet, WalletState } from '../../ui/components/walletWrapper'
+import { Provider } from '../../ui/components/profile'
+import { DetailRow as PendingDetailRow, PendingType } from '../../ui/components/tablePending'
 // Utils
 import { getLocale } from '../../../../common/locale'
 import * as rewardsActions from '../actions/rewards_actions'
 import * as utils from '../utils'
-import WalletOff from 'brave-ui/features/rewards/walletOff'
+import WalletOff from '../../ui/components/walletOff'
 
 const clipboardCopy = require('clipboard-copy')
 

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

@@ -8,7 +8,7 @@ import { connect } from 'react-redux'
 
 // Components
 import { Column, Grid } from 'brave-ui/components'
-import { DisabledBox, MainToggle, SettingsPage as Page, ModalRedirect } from 'brave-ui/features/rewards'
+import { DisabledBox, MainToggle, SettingsPage as Page, ModalRedirect } from '../../ui/components'
 import PageWallet from './pageWallet'
 import AdsBox from './adsBox'
 import ContributeBox from './contributeBox'