From 6110fc4f0cf7392ba13591248ccaac3a4993541c Mon Sep 17 00:00:00 2001
From: Max Karolinskiy <max@brave.com>
Date: Tue, 8 Mar 2022 18:15:02 -0500
Subject: [PATCH 1/3] [Rewards] Modified profile component for Android pending
 contributions.

---
 .../resources/ui/components/profile/index.tsx |  8 ++---
 .../resources/ui/components/profile/style.ts  | 35 ++++++++++++-------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/components/brave_rewards/resources/ui/components/profile/index.tsx b/components/brave_rewards/resources/ui/components/profile/index.tsx
index 7d893d3aff5b..feed98317af3 100644
--- a/components/brave_rewards/resources/ui/components/profile/index.tsx
+++ b/components/brave_rewards/resources/ui/components/profile/index.tsx
@@ -37,7 +37,7 @@ export interface Props {
   id?: string
   src?: string
   title: string
-  type?: 'big' | 'small'
+  type?: 'big' | 'small' | 'mobile'
   provider?: Provider
   verified?: boolean
   tableCell?: boolean
@@ -286,7 +286,7 @@ export default class Profile extends React.PureComponent<Props, {}> {
     } = this.props
 
     return (
-      <StyledWrapper id={id}>
+      <StyledWrapper id={id} type={type}>
         <StyledImageWrapper type={type}>
           <StyledImage src={this.getSrc(src)} />
           {verified && type === 'small' ? (
@@ -295,8 +295,8 @@ export default class Profile extends React.PureComponent<Props, {}> {
             </StyledVerified>
           ) : null}
         </StyledImageWrapper>
-        <StyledContent>
-          <StyledTitleWrap>
+        <StyledContent type={type}>
+          <StyledTitleWrap type={type}>
             <StyledTitle type={type}>{title}</StyledTitle>
             {provider ? (
               <StyledProvider type={type}>
diff --git a/components/brave_rewards/resources/ui/components/profile/style.ts b/components/brave_rewards/resources/ui/components/profile/style.ts
index 3ff527b97288..d187b348da82 100644
--- a/components/brave_rewards/resources/ui/components/profile/style.ts
+++ b/components/brave_rewards/resources/ui/components/profile/style.ts
@@ -56,11 +56,11 @@ const fadeOutToNull = keyframes`
   }
 `
 
-export const StyledWrapper = styled('div')<{}>`
+export const StyledWrapper = styled('div')<Partial<Props>>`
   position: relative;
   display: flex;
   align-items: center;
-  font-family: ${p => p.theme.fontFamily.body};
+  font-family: ${p => p.type === 'mobile' ? 'var(--brave-font-heading)' : p.theme.fontFamily.body};
 `
 
 export const StyledImageWrapper = styled('div')<Partial<Props>>`
@@ -72,10 +72,15 @@ export const StyledImageWrapper = styled('div')<Partial<Props>>`
       height: 32px;
       width: 32px;
     `
+    : p.type === 'small'
+    ? css`
+      height: 24px;
+      width: 24px;
+    `
     : css`
-    height: 24px;
-    width: 24px
-  `
+      height: 20px;
+      width: 20px;
+    `
   };
 `
 
@@ -97,25 +102,29 @@ export const StyledVerified = styled('span')<{}>`
   position: absolute;
 `
 
-export const StyledContent = styled.div`
-  padding: 0 0 0 12px;
+export const StyledContent = styled('div')<Partial<Props>>`
+  padding: 0px;
+  padding-left: ${p => p.type === 'mobile' ? '8px' : '12px'}
 `
 
-export const StyledTitleWrap = styled.div`
+export const StyledTitleWrap = styled('div')<Partial<Props>>`
   display: flex;
-  font-size: 14px;
-  font-weight: 700;
+  font-size: ${p => p.type === 'mobile' ? '16px' : '14px'};
+  font-weight: ${p => p.type === 'mobile' ? '500' : '700'};
   color: ${p => p.theme.palette.grey800};
+  display: ${p => p.type === 'mobile' ? 'block' : 'flex'};
+
 `
 
 export const StyledTitle = styled('span')<Partial<Props>>`
-  font-size: ${p => p.type === 'big' ? '18px' : null};
+  font-size: ${p => p.type === 'big' ? '18px' : p.type === 'mobile' ? '16px' : null};
+  font-weight: ${p => p.type === 'mobile' ? '500' : null};
 `
 
 export const StyledProvider = styled('span')<Partial<Props>>`
   padding-left: 4px;
-  font-size: ${p => p.type === 'big' ? '16px' : null};
-  font-weight: ${p => p.type === 'big' ? '400' : null};
+  font-size: ${p => p.type === 'big' ? '16px' : p.type === 'mobile' ? '16px' : null};
+  font-weight: ${p => p.type === 'big' ? '400' : p.type === 'mobile' ? '500' : null};
 `
 
 export const StyledProviderWrap = styled('div')<{}>`

From 32cfdac683a3472f36c6a7ea096253ead69d8d78 Mon Sep 17 00:00:00 2001
From: Max Karolinskiy <max@brave.com>
Date: Tue, 8 Mar 2022 18:15:37 -0500
Subject: [PATCH 2/3] [Rewards] Modified tokens component for Android pending
 contributions.

---
 .../resources/ui/components/tokens/index.tsx           | 10 ++++++----
 .../resources/ui/components/tokens/style.ts            |  4 ++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/brave_rewards/resources/ui/components/tokens/index.tsx b/components/brave_rewards/resources/ui/components/tokens/index.tsx
index 93c1572f5bda..751c21344fab 100644
--- a/components/brave_rewards/resources/ui/components/tokens/index.tsx
+++ b/components/brave_rewards/resources/ui/components/tokens/index.tsx
@@ -18,6 +18,7 @@ export interface Props {
   isNegative?: boolean
   size?: Size
   color?: Type
+  showApproxSign?: boolean
 }
 
 export default class Tokens extends React.PureComponent<Props, {}> {
@@ -25,12 +26,13 @@ export default class Tokens extends React.PureComponent<Props, {}> {
     size: 'normal',
     color: 'default',
     currency: 'USD',
-    toFixed: 'true'
+    showApproxSign: false
   }
 
   render () {
-    const { id, converted, value, hideText, isNegative, size, color, currency } = this.props
+    const { id, converted, value, hideText, isNegative, size, color, currency, showApproxSign } = this.props
     const batFormatString = getLocale('bat')
+    const approxSign = showApproxSign ? '≈' : ''
 
     return (
       <StyledWrapper id={id} size={size} color={color}>
@@ -48,8 +50,8 @@ export default class Tokens extends React.PureComponent<Props, {}> {
         </StyledTokens>
         {
           converted !== undefined
-          ? <StyledContent>
-            {converted} {currency}
+          ? <StyledContent showApproxSign={showApproxSign}>
+            {approxSign} {converted} {currency}
           </StyledContent>
           : null
         }
diff --git a/components/brave_rewards/resources/ui/components/tokens/style.ts b/components/brave_rewards/resources/ui/components/tokens/style.ts
index 55690769a709..620aa6f814d3 100644
--- a/components/brave_rewards/resources/ui/components/tokens/style.ts
+++ b/components/brave_rewards/resources/ui/components/tokens/style.ts
@@ -54,11 +54,11 @@ export const StyledTokenValue = styled('span')<{}>`
   font-size: var(--tokens-tokenNum-size);
 `
 
-export const StyledContent = styled('span')<{}>`
+export const StyledContent = styled('span')<Partial<Props>>`
   color: #9E9FAB;
   font-size: var(--tokens-text-size);
   display: inline-block;
-  margin-left: 8px;
+  margin-left: ${p => p.showApproxSign ? '4px' : '8px'};
 `
 
 export const StyledTokenCurrency = styled('span')<{}>`

From 325cafaf63b80de050a2984bdadaa26905cb65b3 Mon Sep 17 00:00:00 2001
From: Max Karolinskiy <max@brave.com>
Date: Mon, 7 Mar 2022 18:46:05 -0500
Subject: [PATCH 3/3] [Rewards] Added pending contributions UI for Android.

---
 browser/ui/webui/brave_webui_source.cc        |   1 +
 .../components/icons/trash_icon.tsx           |  13 ++
 .../android_page/components/pageWallet.tsx    |   7 +-
 .../pending_contributions_modal.style.ts      | 137 ++++++++++++++++++
 .../pending_contributions_modal.tsx           |  92 ++++++++++++
 .../ui/components/tablePending/index.tsx      |  13 +-
 .../resources/brave_components_strings.grd    |   3 +
 7 files changed, 261 insertions(+), 5 deletions(-)
 create mode 100644 components/brave_rewards/resources/android_page/components/icons/trash_icon.tsx
 create mode 100644 components/brave_rewards/resources/android_page/components/pending_contributions_modal.style.ts
 create mode 100644 components/brave_rewards/resources/android_page/components/pending_contributions_modal.tsx

diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index eca5993e5e64..a2224bd34958 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -769,6 +769,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "continue", IDS_BRAVE_REWARDS_CONTINUE },
         { "continueToLogin", IDS_BRAVE_REWARDS_CONTINUE_TO_LOGIN },
         { "minimumBalanceWarning", IDS_BRAVE_REWARDS_MINIMUM_BALANCE_WARNING },
+        { "contributionPendingUntil", IDS_BRAVE_REWARDS_CONTRIBUTION_PENDING_UNTIL },  // NOLINT
 
         { "walletAccountLink", IDS_REWARDS_WALLET_ACCOUNT_LINK },
         { "walletAddFunds", IDS_REWARDS_WALLET_ADD_FUNDS },
diff --git a/components/brave_rewards/resources/android_page/components/icons/trash_icon.tsx b/components/brave_rewards/resources/android_page/components/icons/trash_icon.tsx
new file mode 100644
index 000000000000..db15c9c328f4
--- /dev/null
+++ b/components/brave_rewards/resources/android_page/components/icons/trash_icon.tsx
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ import * as React from 'react'
+
+ export function TrashIcon () {
+   return (
+    <svg className='icon' width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M13 4H12.2734L11.07 14.7447C10.9914 15.4487 10.3747 16 9.66671 16H4.33337C3.62404 16 3.00871 15.448 2.93071 14.7433L1.74671 4H1.00004C0.632041 4 0.333374 3.70133 0.333374 3.33333C0.333374 2.96533 0.632041 2.66667 1.00004 2.66667H4.33337V2C4.33337 0.897333 5.23071 0 6.33337 0H7.66671C8.76937 0 9.66671 0.897333 9.66671 2V2.66667H13C13.368 2.66667 13.6667 2.96533 13.6667 3.33333C13.6667 3.70133 13.368 4 13 4ZM8.33337 2C8.33337 1.63267 8.03404 1.33333 7.66671 1.33333H6.33337C5.96604 1.33333 5.66671 1.63267 5.66671 2V2.66667H8.33337V2ZM3.08804 4L4.25671 14.598C4.25937 14.624 4.30671 14.6667 4.33337 14.6667H9.66671C9.69337 14.6667 9.74204 14.6233 9.74537 14.5967L10.932 4H3.08804Z" fill="#AEB1C2"/>
+    </svg>
+   )
+ }
diff --git a/components/brave_rewards/resources/android_page/components/pageWallet.tsx b/components/brave_rewards/resources/android_page/components/pageWallet.tsx
index a006638b3224..cf73524a126c 100644
--- a/components/brave_rewards/resources/android_page/components/pageWallet.tsx
+++ b/components/brave_rewards/resources/android_page/components/pageWallet.tsx
@@ -9,9 +9,9 @@ import { connect } from 'react-redux'
 import {
   ModalActivity,
   ModalBackupRestore,
-  ModalPending,
   ModalQRCode
 } from '../../ui/components'
+import { PendingContributionsModal } from './pending_contributions_modal'
 import { WalletCard, ExternalWalletAction } from '../../shared/components/wallet_card'
 import { ExternalWallet, ExternalWalletProvider, ExternalWalletStatus } from '../../shared/lib/external_wallet'
 import { Provider } from '../../ui/components/profile'
@@ -790,7 +790,7 @@ class PageWallet extends React.Component<Props, State> {
           summaryData={summaryData}
           autoContributeEnabled={enabledContribute}
           onExternalWalletAction={this.onExternalWalletAction}
-          onViewPendingTips={undefined}
+          onViewPendingTips={this.onModalPendingToggle}
         />
         { this.props.showManageWalletButton && <ManageWalletButton onClick={this.onModalBackupOpen} /> }
         {
@@ -815,10 +815,9 @@ class PageWallet extends React.Component<Props, State> {
         }
         {
           this.state.modalPendingContribution
-            ? <ModalPending
+            ? <PendingContributionsModal
               onClose={this.onModalPendingToggle}
               rows={this.getPendingRows()}
-              onRemoveAll={this.removeAllPendingContribution}
             />
             : null
         }
diff --git a/components/brave_rewards/resources/android_page/components/pending_contributions_modal.style.ts b/components/brave_rewards/resources/android_page/components/pending_contributions_modal.style.ts
new file mode 100644
index 000000000000..d1bc77280079
--- /dev/null
+++ b/components/brave_rewards/resources/android_page/components/pending_contributions_modal.style.ts
@@ -0,0 +1,137 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled from 'styled-components'
+
+export const root = styled.div`
+  position: absolute;
+  left: 0px;
+  top: 8px;
+  width: 100%;
+  height: calc(100% - 16px);
+  max-width: 700px;
+  min-height: 545px;
+
+  border-radius: 8px;
+  background: var(--brave-palette-white);
+
+  display: block;
+  overflow-y: hidden;
+
+  font-family: var(--brave-font-heading);
+  line-height: 24px;
+`
+
+export const header = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 18px;
+  grid-template-rows: 1;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 21px 24px;
+
+  button {
+    grid-column-start: 2;
+    justify-self: end;
+  }
+
+  div {
+    display: flex;
+    align-items: baseline;
+    padding-top: 2px;
+  }
+`
+
+export const title = styled.span`
+  grid-column-start: 1;
+  justify-self: start;
+  line-height: 24px;
+  font-size: 22px;
+  font-weight: 500;
+  font-color: rgba(33, 37, 41, 1);
+`
+
+export const constributionsList = styled.div`
+  height: calc(100% - 16px - 67px);
+  overflow-y: scroll;
+`
+
+export const constributionsListItem = styled.div`
+  display: grid;
+  grid-template-columns: 29px 1fr 1fr 14px;
+  grid-template-rows: 3;
+  padding: 16px;
+  align-items: center;
+  justify-items: start;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  overflow-y: visible;
+  white-space: nowrap;
+`
+
+export const contributionReceiver = styled.div`
+  grid-row-start: 1;
+  grid-column: 1 / 4;
+  display: flex;
+  font-size: 16px;
+  font-weight: 500;
+
+  a {
+    text-decoration: none;
+  }
+`
+
+export const contributionDelete = styled.div`
+  grid-row-start: 1;
+  grid-column-start: 4;
+  justify-self: end;
+  align-self: center;
+  line-height: 16px;
+
+  button {
+    padding: 2px 0px 0px 0px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    text-align: center;
+    width: 100%;
+
+    .icon {
+      color: var(--brave-palette-grey500);
+      width: 14px;
+      height: 16px;
+      display: inline-block;
+    }
+  }
+`
+
+export const contributionAmount = styled.div`
+  grid-row-start: 2;
+  grid-column: 2 / -1;
+  font-size: 14px;
+  font-weight: 500;
+`
+
+export const contributionType = styled.div`
+  grid-row-start: 3;
+  grid-column-start: 2;
+  font-size: 14px;
+  line-height: 22px;
+`
+
+export const contributionDate = styled.div`
+  grid-row-start: 3;
+  grid-column: 3 / -1;
+  font-size: 12px;
+  justify-self: end;
+  text-align: right;
+  line-height: 20px;
+  padding-top: 2px;
+`
+
+export const noContent = styled.div`
+  text-align: center;
+  padding: 30px 0;
+  color: #989898;
+  font-size: 14px;
+`
diff --git a/components/brave_rewards/resources/android_page/components/pending_contributions_modal.tsx b/components/brave_rewards/resources/android_page/components/pending_contributions_modal.tsx
new file mode 100644
index 000000000000..2aa43ef82aab
--- /dev/null
+++ b/components/brave_rewards/resources/android_page/components/pending_contributions_modal.tsx
@@ -0,0 +1,92 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+import Profile from '../../ui/components/profile/index'
+import { DetailRow, getTypeMessage } from '../../ui/components/tablePending/index'
+import { LocaleContext, formatMessage } from '../../shared/lib/locale_context'
+import { Modal, ModalCloseButton } from '../../shared/components/modal'
+import { NewTabLink } from '../../shared/components/new_tab_link'
+import Tokens from '../../ui/components/tokens/index'
+import { TrashIcon } from './icons/trash_icon'
+
+import * as style from './pending_contributions_modal.style'
+
+interface Props {
+  rows: DetailRow[]
+  onClose: () => void
+}
+
+export function PendingContributionsModal (props: Props) {
+  const { getString } = React.useContext(LocaleContext)
+  function renderRow (row: DetailRow) {
+    /* Each row is a grid
+       ---------------------------------------------
+       |   | 1(29px) | 2(1fr) |  3(1fr)  | 4(14px) |
+       ---------------------------------------------
+       | 1 |  Icon     Site              |     |_| |
+       | 2 |         | Pending Amount              |
+       | 3 |         | Type  |                Date |
+       ---------------------------------------------
+    */
+     return (
+      <style.constributionsListItem>
+        <style.contributionReceiver>
+          <NewTabLink href={row.url}>
+            <Profile
+              title={row.profile.name}
+              provider={row.profile.provider}
+              verified={row.profile.verified}
+              src={row.profile.src}
+              type='mobile'
+            />
+          </NewTabLink>
+        </style.contributionReceiver>
+        <style.contributionDelete>
+          <button onClick={row.onRemove}><TrashIcon /></button>
+        </style.contributionDelete>
+        <style.contributionAmount>
+          <Tokens
+            value={row.amount.tokens}
+            converted={row.amount.converted}
+            size={'small'}
+            showApproxSign={true}
+          />
+        </style.contributionAmount>
+        <style.contributionType>
+          {getString(getTypeMessage(row.type))}
+        </style.contributionType>
+        <style.contributionDate>
+          {
+            formatMessage(getString('contributionPendingUntil'), [
+              row.date
+            ])
+          }
+        </style.contributionDate>
+      </style.constributionsListItem>
+    )
+  }
+
+   return (
+    <Modal>
+      <style.root>
+        <style.header>
+          <style.title>
+            {getString('pendingContributions')}
+          </style.title>
+          <ModalCloseButton onClick={props.onClose} />
+        </style.header>
+        { props.rows && props.rows.length > 0
+          ? <style.constributionsList>
+            {props.rows.map(renderRow)}
+          </style.constributionsList>
+          : <style.noContent>
+            {getString('pendingContributionEmpty')}
+          </style.noContent>
+        }
+      </style.root>
+    </Modal>
+  )
+}
diff --git a/components/brave_rewards/resources/ui/components/tablePending/index.tsx b/components/brave_rewards/resources/ui/components/tablePending/index.tsx
index 40b5fac54d50..9499c8ecfefe 100644
--- a/components/brave_rewards/resources/ui/components/tablePending/index.tsx
+++ b/components/brave_rewards/resources/ui/components/tablePending/index.tsx
@@ -23,6 +23,17 @@ interface ProfileCell {
 
 export type PendingType = 'tip' | 'ac' | 'recurring'
 
+export function getTypeMessage (type: PendingType) {
+  switch (type) {
+    case 'ac':
+      return 'pendingTypeac'
+    case 'recurring':
+      return 'pendingTyperecurring'
+    case 'tip':
+      return 'pendingTypetip'
+  }
+}
+
 export interface DetailRow {
   profile: ProfileCell
   amount: {
@@ -64,7 +75,7 @@ export default class TableDonation extends React.PureComponent<Props, {}> {
           },
           {
             content: (
-              <>{getLocale(`pendingType${row.type}`)}</>
+              <>{getLocale(getTypeMessage(row.type))}</>
             )
           },
           {
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index 30a9fc658125..5075789af54b 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -529,6 +529,9 @@
       <message name="IDS_BRAVE_REWARDS_CONTINUE" desc="">Continue</message>
       <message name="IDS_BRAVE_REWARDS_CONTINUE_TO_LOGIN" desc="">Continue to login</message>
       <message name="IDS_BRAVE_REWARDS_MINIMUM_BALANCE_WARNING" desc=""><ph name="PROVIDER">$1</ph> requires a minimum balance of <ph name="AMOUNT">$2</ph> BAT to create an account. If you connected an account previously,</message>
+      <message name="IDS_BRAVE_REWARDS_CONTRIBUTION_PENDING_UNTIL" desc="A label on Pending Contributions modal showing the date until which the contribution will be pending">
+        Pending until <ph name="DATE">$1</ph>
+      </message>
 
       <!-- WebUI rewards internals resources -->
       <message name="IDS_BRAVE_REWARDS_INTERNALS_ADS_NOT_INITIALIZED" desc="Ads not initialized">Ads not initialized, please refresh the page.</message>