Adds Add Funds button to the notification

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

@@ -81,6 +81,7 @@ exports[`Amount tests basic tests matches the snapshot 1`] = `
 
 <button
   className="c0"
+  data-test-id="amount-wrapper"
   id="amount"
   onClick={[Function]}
 >

src/features/rewards/amount/index.tsx

@@ -33,7 +33,7 @@ export default class Amount extends React.PureComponent<Props, {}> {
     const { id, onSelect, amount, selected, type, converted, currency, isMobile } = this.props
 
     return (
-      <StyledWrapper id={id} onClick={onSelect.bind(this, amount)} isMobile={isMobile}>
+      <StyledWrapper id={id} onClick={onSelect.bind(this, amount)} isMobile={isMobile} data-test-id={'amount-wrapper'}>
         <StyledAmount selected={selected} type={type} isMobile={isMobile}>
           <StyledLogo isMobile={isMobile}><BatColorIcon /></StyledLogo><StyledNumber>{amount}</StyledNumber> <StyledTokens>{type === 'big' ? 'BAT' : null}</StyledTokens>
         </StyledAmount>

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

@@ -100,6 +100,7 @@ exports[`Donate tests basic tests matches the snapshot 1`] = `
   </div>
   <div
     className="c4"
+    data-test-id="send-tip-button"
     onClick={[Function]}
   >
     <div

src/features/rewards/donate/index.tsx

@@ -114,7 +114,7 @@ export default class Donate extends React.PureComponent<Props, State> {
             <StyledAmountsWrapper isMobile={isMobile}>
               {
                 donationAmounts && donationAmounts.map((donation: Donation) => {
-                  return <div key={`${id}-donate-${donation.tokens}`}>
+                  return <div key={`${id}-tip-${donation.tokens}`}>
                     <Amount
                       isMobile={isMobile}
                       amount={donation.tokens}
@@ -130,7 +130,7 @@ export default class Donate extends React.PureComponent<Props, State> {
           {children}
         </StyledContent>
 
-        <StyledSend onClick={this.validateDonation}>
+        <StyledSend onClick={this.validateDonation} data-test-id={'send-tip-button'}>
           <StyledButtonWrapper isMobile={isMobile}>
             <StyledSendButton>
               <StyledIconSend disabled={disabled} donateType={donateType}>

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

@@ -129,11 +129,13 @@ exports[`Grant complete tests basic tests matches the snapshot 1`] = `
   >
     <button
       className="c5 c6"
+      id="grant-completed-ok"
       size="call-to-action"
       type="accent"
     >
       <div
         className="c7"
+        id="grant-completed-ok"
         size="call-to-action"
         type="accent"
       >

src/features/rewards/grantComplete/index.tsx

@@ -54,6 +54,7 @@ export default class GrantComplete extends React.PureComponent<Props, {}> {
             size={'call-to-action'}
             type={'accent'}
             onClick={onClose}
+            id={'grant-completed-ok'}
           />
         </StyledButtonWrapper>
       </StyledWrapper>

src/features/rewards/listToken/index.tsx

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

src/features/rewards/profile/index.tsx

@@ -170,7 +170,7 @@ export default class Profile extends React.PureComponent<Props, {}> {
         {
           this.getUnverifiedInfo()
         }
-        <StyledVerifiedCheckLink onClick={onRefreshPublisher}>
+        <StyledVerifiedCheckLink onClick={onRefreshPublisher} data-test-id={'unverified-check-button'}>
           {getLocale('unVerifiedCheck')}
         </StyledVerifiedCheckLink>
       </StyledProviderWrap>

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

@@ -507,6 +507,7 @@ exports[`List tests basic tests matches the snapshot 1`] = `
           </div>
           <div
             className="c27"
+            data-test-id="send-tip-button"
             onClick={[Function]}
           >
             <div

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

@@ -282,6 +282,7 @@ exports[`Tip tests basic tests matches the snapshot 1`] = `
     </div>
     <div
       className="c16"
+      data-test-id="send-tip-button"
       onClick={[Function]}
     >
       <div

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

@@ -185,13 +185,14 @@ exports[`WalletSummary tests basic tests matches the snapshot 1`] = `
     <div
       className="c3"
     >
-      MISSING: monthMay
+      MISSING: monthJun
 
       2019
     </div>
     <div>
       <div
         className="c4"
+        data-test-id="summary-grant"
       >
         <div
           className="c5"
@@ -233,6 +234,7 @@ exports[`WalletSummary tests basic tests matches the snapshot 1`] = `
       </div>
       <div
         className="c4"
+        data-test-id="summary-ads"
       >
         <div
           className="c5"
@@ -274,6 +276,7 @@ exports[`WalletSummary tests basic tests matches the snapshot 1`] = `
       </div>
       <div
         className="c4"
+        data-test-id="summary-contribute"
       >
         <div
           className="c5"
@@ -315,6 +318,7 @@ exports[`WalletSummary tests basic tests matches the snapshot 1`] = `
       </div>
       <div
         className="c4"
+        data-test-id="summary-donation"
       >
         <div
           className="c5"
@@ -356,6 +360,7 @@ exports[`WalletSummary tests basic tests matches the snapshot 1`] = `
       </div>
       <div
         className="c4"
+        data-test-id="summary-tips"
       >
         <div
           className="c5"

src/features/rewards/walletSummary/index.tsx

@@ -93,6 +93,7 @@ export default class WalletSummary extends React.PureComponent<Props, {}> {
         current++
         result.push((
           <ListToken
+            testId={`summary-${item.key}`}
             key={`summary-${tokenSize}-${index}-${data.tokens}`}
             size={tokenSize}
             value={data.tokens}
@@ -144,8 +145,8 @@ export default class WalletSummary extends React.PureComponent<Props, {}> {
             {this.generateList()}
             {
               reservedAmount && reservedAmount > 0
-              ? <StyledReservedWrapper>
-                {getLocale('reservedAmountText', { reservedAmount })} <StyledReservedLink href={reservedMoreLink} target={'_blank'}>
+              ? <StyledReservedWrapper data-test-id={'pending-contribution-box'}>
+                {getLocale('reservedAmountText', { reservedAmount: reservedAmount.toFixed(1) })} <StyledReservedLink href={reservedMoreLink} target={'_blank'}>
                   {getLocale('reservedMoreLink')}
                 </StyledReservedLink>
                 {

src/features/rewards/walletWrapper/index.tsx

@@ -83,7 +83,17 @@ export interface ActionWallet {
   testId?: string
 }
 
-export type NotificationType = 'ads' | 'ads-launch' | 'backupWallet' | 'contribute' | 'grant' | 'insufficientFunds' | 'tipsProcessed' | 'error' | ''
+export type NotificationType =
+  'ads' |
+  'ads-launch' |
+  'backupWallet' |
+  'contribute' |
+  'grant' |
+  'insufficientFunds' |
+  'tipsProcessed' |
+  'error' |
+  'pendingContribution' |
+  ''
 
 export interface Notification {
   id: string
@@ -264,6 +274,10 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
         buttonText = getLocale('backupNow')
         buttonAction = this.onNotificationClick
         break
+      case 'insufficientFunds':
+        buttonText = getLocale('addFunds')
+        buttonAction = this.onNotificationClick
+        break
       default:
         buttonText = getLocale('ok').toUpperCase()
         break
@@ -289,8 +303,8 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
 
     return (
       <>
-        <StyledNotificationCloseIcon>
-          <CloseCircleOIcon onClick={onClose} />
+        <StyledNotificationCloseIcon data-test-id={'notification-close'} onClick={onClose}>
+          <CloseCircleOIcon />
         </StyledNotificationCloseIcon>
         <StyledNotificationContent>
           {this.getNotificationIcon(notification)}
@@ -323,6 +337,7 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
         break
       case 'contribute':
       case 'tipsProcessed':
+      case 'pendingContribution':
         icon = loveIconUrl
         break
       case 'grant':
@@ -370,6 +385,9 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
       case 'tipsProcessed':
         typeText = getLocale('contributionTips')
         break
+      case 'pendingContribution':
+        typeText = getLocale('pendingContributionTitle')
+        break
       default:
         typeText = ''
         break