Adds reserved amount to wallet summary

src/features/rewards/walletPanel/index.tsx

@@ -23,8 +23,7 @@ import {
   StyledColumn,
   StyleToggleTips,
   StyledNoticeWrapper,
-  StyledNoticeLink,
-  StyledChangeButton
+  StyledNoticeLink
 } from './style'
 
 // Components
@@ -59,9 +58,7 @@ export interface Props {
   onAmountChange: () => void
   onIncludeInAuto: () => void
   showUnVerified?: boolean
-  showChangeSetting?: boolean
   moreLink?: string
-  onChangeSetting?: () => void
 }
 
 export default class WalletPanel extends React.PureComponent<Props, {}> {
@@ -167,9 +164,7 @@ export default class WalletPanel extends React.PureComponent<Props, {}> {
       toggleTips,
       showUnVerified,
       isVerified,
-      moreLink,
-      showChangeSetting,
-      onChangeSetting
+      moreLink
     } = this.props
 
     return (
@@ -179,13 +174,7 @@ export default class WalletPanel extends React.PureComponent<Props, {}> {
           {
             !isVerified && showUnVerified
             ? <StyledNoticeWrapper>
-              {getLocale('unVerifiedText')}
-              <StyledNoticeLink href={moreLink} target={'_blank'}> {getLocale('unVerifiedTextMore')}</StyledNoticeLink>
-              {
-                showChangeSetting
-                ? <StyledChangeButton onClick={onChangeSetting}>{getLocale('changeSettingsButton')}</StyledChangeButton>
-                : null
-              }
+              {getLocale('unVerifiedText')} <StyledNoticeLink href={moreLink} target={'_blank'}> {getLocale('unVerifiedTextMore')}</StyledNoticeLink>
             </StyledNoticeWrapper>
             : null
           }

src/features/rewards/walletPanel/style.ts

@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled from 'styled-components'
+import palette from '../../../theme/palette'
 
 interface StyleProps {
   size?: string
@@ -94,19 +95,8 @@ export const StyledNoticeWrapper = styled<StyleProps, 'div'>('div')`
 `
 
 export const StyledNoticeLink = styled<StyleProps, 'a'>('a')`
-  color: #0089FF;
+  color: ${palette.blue400};
   font-weight: bold;
   text-decoration: none;
   display: inline-block;
-  margin-left: 4px;
-`
-
-export const StyledChangeButton = styled<StyleProps, 'button'>('button')`
-  font-family: ${p => p.theme.fontFamily.body};
-  font-weight: bold;
-  background: none;
-  border: none;
-  padding: 0;
-  margin-top: 2px;
-  cursor: pointer;
 `

src/features/rewards/walletSummary/index.tsx

@@ -11,7 +11,9 @@ import {
   StyledActivity,
   StyledActivityIcon,
   StyledNoActivity,
-  StyledNoActivityWrapper
+  StyledNoActivityWrapper,
+  StyledReservedWrapper,
+  StyledReservedLink
 } from './style'
 import ListToken from '../listToken'
 import { Type } from '../tokens'
@@ -36,6 +38,8 @@ export interface Props {
   }
   id?: string
   compact?: boolean
+  reservedAmount?: number
+  reservedMoreLink?: string
 }
 
 export default class WalletSummary extends React.PureComponent<Props, {}> {
@@ -117,7 +121,9 @@ export default class WalletSummary extends React.PureComponent<Props, {}> {
     const {
       id,
       onActivity,
-      compact
+      compact,
+      reservedAmount,
+      reservedMoreLink
     } = this.props
     const date = new Date()
     const month = getLocale(`month${date.toLocaleString('en-us', { month: 'short' })}`)
@@ -133,6 +139,15 @@ export default class WalletSummary extends React.PureComponent<Props, {}> {
           <StyledTitle>{month} {year}</StyledTitle>
           <div>
             {this.generateList()}
+            {
+              reservedAmount && reservedAmount > 0
+              ? <StyledReservedWrapper>
+                {getLocale('reservedAmountText', { reservedAmount })} <StyledReservedLink href={reservedMoreLink} target={'_blank'}>
+                  {getLocale('reservedMoreLink')}
+                </StyledReservedLink>
+              </StyledReservedWrapper>
+              : null
+            }
           </div>
           {
             onActivity

src/features/rewards/walletSummary/style.ts

@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled from 'styled-components'
+import palette from '../../../theme/palette'
 
 interface StyleProps {
   compact?: boolean
@@ -73,3 +74,23 @@ export const StyledNoActivity = styled<{}, 'span'>('span')`
   color: #B8B9C4;
   font-size: 18px;
 `
+
+export const StyledReservedWrapper = styled<{}, 'div'>('div')`
+  background: rgba(0, 0, 0, 0.04);
+  color: #676283;
+  font-size: 12px;
+  font-family: ${p => p.theme.fontFamily.body};
+  font-weight: normal;
+  letter-spacing: 0;
+  line-height: 16px;
+  padding: 10px 12px;
+  border-radius: 4px;
+  margin: 20px 0 10px;
+`
+
+export const StyledReservedLink = styled<StyleProps, 'a'>('a')`
+  color: ${palette.blue400};
+  font-weight: bold;
+  text-decoration: none;
+  display: inline-block;
+`

src/features/rewards/walletWrapper/__snapshots__/spec.tsx.snap

@@ -57,7 +57,7 @@ exports[`WalletWrapper tests basic tests matches the snapshot 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  height: 361px;
+  height: 381px;
 }
 
 .c6 {

src/features/rewards/walletWrapper/style.ts

@@ -78,7 +78,7 @@ export const StyledContent = styled<StyledProps, 'div'>('div')`
   position: relative;
   background: #f9fbfc;
   flex: 1;
-  height: 361px;
+  height: 381px;
 `
 
 export const StyledAction = styled<{}, 'button'>('button')`

stories/assets/locale.ts

@@ -36,7 +36,6 @@ const locale: Record<string, string> = {
   captchaMissedTarget: 'Hmm… Not Quite. Try Again.',
   claim: 'Claim',
   closeBalance: 'Closing Balance',
-  changeSettingsButton: 'Change Auto-Contribute settings',
   contribute: 'Contribute',
   contributeAllocation: 'Auto-Contribute Allocation',
   contributeTooltip: 'Auto-Contribute Settings',
@@ -123,6 +122,8 @@ const locale: Record<string, string> = {
   recurringDonation: 'Recurring Donation',
   recurringDonations: 'Monthly Tips',
   remove: 'remove',
+  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',
   reviewSitesMsg: 'Your pinned sites have been moved to',

stories/features/rewards/wallet.tsx

@@ -4,7 +4,7 @@
 
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
-import { withKnobs, object, select, text, boolean } from '@storybook/addon-knobs'
+import { withKnobs, object, select, text, boolean, number } from '@storybook/addon-knobs'
 // @ts-ignore
 import centered from '@storybook/addon-centered/dist'
 
@@ -93,6 +93,8 @@ storiesOf('Feature Components/Rewards/Wallet/Desktop', module)
             tips: object('Tips', { tokens: '19.0', converted: '5.25' })
           }}
           onActivity={doNothing}
+          reservedAmount={number('Reserved amount', 52)}
+          reservedMoreLink={'https://brave.com'}
         />
       </div>
     )
@@ -135,7 +137,6 @@ storiesOf('Feature Components/Rewards/Wallet/Desktop', module)
           onAmountChange={doNothing}
           onIncludeInAuto={doNothing}
           showUnVerified={boolean('Show unverified content', true)}
-          showChangeSetting={boolean('Show change setting', true)}
         />
       </div>
     )