[Android] Implement Rewards 3.0 Design: Rewards Panel

[Miyayes]

Description

1. The Rewards panel UI is transitioning from native Android components to a WebView-based implementation with Rewards 3.0. All UI elements previously rendered using Android's native toolkit are replaced with web-based counterparts.
2. The implementation requires rendering the Rewards UI within a WebView that is hosted inside a full-screen CustomTab, replacing the previous doorhanger panel approach. This change alters how the Rewards UI is presented to users when they press the BAT icon in the URL bar. Note: The implementation must ensure visual distinction from standard browser tabs (e.g., it should not show an address bar, etc.).
3. The Rewards 3.0 UI components, implemented by @zenparsing, are web-based components, and are shared across platforms (desktop/Android). The work on Android here is primarily to display the same components, except on Android. Android does not need to implement the bulk of the new Rewards 3.0 UI components.
4. Android specifics: Android-specific UX considerations require additional implementation: (i) A dismiss/close button must be implemented to compensate for the lack of off-panel click areas available on desktop; (ii) link handling within the panel requires some care (for example: navigation within the CustomTab—when a user presses on hyperlinks or is redirected—must be managed to prevent users from becoming trapped in a browserUI-less context).
5. Feature flag: The implementation is feature-flagged and can be enabled via brave://flags under the Show the new Rewards UI flag.

Figma spec

https://www.figma.com/design/3gC9Ilmk2jsCwkkPTaR3gM/Rewards-3.0?node-id=205-16935&t=W1xP9dpXrl3nniws-0

[bridiver]

This looks like exactly the same link from #38450 so which part is being done here and which part is being done in the other ticket? We really need more information in these issues so people that haven't been working on this can understand what is supposed to be done.

[Miyayes]

@bridiver I added some more color around @deeppandya's points in the description of the issue. Hope that helps!

[hffvld]

Verified on Galaxy Tab S8 using version(s):

Device/OS: Galaxy Tab S8 / gts8wifixx-user 14 UP1A.231005.007 release-keys
Brave build: 1.77.82 
Chromium: 134.0.6998.95 (Official Build) beta (64-bit) 

Filed follow-up issue #44721

STEPS:

1. Fresh install and launch Brave
2. Enable Rewards staging preferences
3. Enable Rewards 3.0 flag
4. Enable Brave Rewards > Verify
5. Connect custodian > Verify

ACTUAL RESULTS:

• Verified that the Rewards onboarding screen is shown when:
  • tapping the BR button in the URL search bar;
  • opening Brave Rewards via Hamburger menu;
  • navigating to brave://rewardsvia URL search bar;
• Verified that all elements on the Rewards welcome screen works as expected:
  • The X button is shown if Rewards is opened via the URL search bar button or Hamburger menu and closes the welcome screen when X is tapped;
  • The X button is not shown if Rewards is opened via brave://rewards;
  • How does it work?, Terms of Service, and Privacy Policy URL links open proper support page articles;
  • Start using Brave Rewards works as expected;
• Verified that the correct country is selected by default (United States in my case).
• Verified that activating Reards works as expected, and landed on the Rewards home screen afterward.
• Verified that switching between Home and Explore tabs works as expected.
• Verified that all elements on the Ads settings screen work as expected.
• Verified that the BR thumbnail in the URL search bar only shows the checkmark for the verified websites/creators.
• Verified that connecting custodian works as expected and includes:
  • Send contribution successfully;
  • Send monthly contribution successfully;
  • Send contribution/monthly contribution error when sending to the different custodian account;

---

Dark Mode / Landscape Mode

1	2	3	4

Light Mode / Portrait Mode

1	2	3	4

[Uni-verse]

Verified on Samsung Galaxy S21 using the following version:

Brave	1.77.85 Chromium: 134.0.6998.118 (Official Build) beta (64-bit) 
Revision	979ebc717a0bade18469ac1215f0cc57d27a7912
OS	Android 14; Build/UP1A.231005.007; 34; REL

STEPS:

1. Fresh install and launch Brave
2. Enable Rewards staging preferences
3. Enable Rewards 3.0 flag
4. Enable Brave Rewards > Verify
5. Connect custodian > Verify

ACTUAL RESULTS:

• Verified that the Rewards onboarding screen is shown when:
  • tapping the BR button in the URL search bar;
  • opening Brave Rewards via Hamburger menu;
  • navigating to brave://rewardsvia URL search bar;
• Verified that all elements on the Rewards welcome screen works as expected:
  • The X button is shown if Rewards is opened via the URL search bar button or Hamburger menu and closes the welcome screen when X is tapped;
  • The X button is not shown if Rewards is opened via brave://rewards;
  • How does it work?, Terms of Service, and Privacy Policy URL links open proper support page articles;
  • Start using Brave Rewards works as expected;
• Verified that the correct country is selected by default (United States in my case).
• Verified that activating Rewards works as expected, and landed on the Rewards home screen afterward.
• Verified that switching between Home and Explore tabs works as expected.
• Verified that all elements on the Ads settings screen work as expected.
• Verified that the BR thumbnail in the URL search bar only shows the checkmark for the verified websites/creators.
• Verified that connecting custodian works as expected and includes:
  • Send contribution successfully;
  • Send monthly contribution successfully;
  • Send contribution/monthly contribution error when sending to the different custodian account;

example	example	example	example	example	example

example	example	example	example

[Uni-verse]

Performed a quick spot check on Android 8 using Pixel 2XL running the following build:

Brave	1.77.85 Chromium: 134.0.6998.118 (Official Build) beta (32-bit) 
Revision	979ebc717a0bade18469ac1215f0cc57d27a7912
OS	Android 8.1.0; Build/OPM2.171026.006.H1; 27; REL

example	example	example	example	example	example	example

[kjozwiak]

Just adding some verification notes re: switching over to Solana on-chain payouts while using/running Rewards 3.0. The following was completed using the new UI/UX without issues:

• reset rewards without any issues (checked brave://rewards-internals and ensured a new paymentid was assigned)
• was whitelisted/received the rewards panel Solana opt-in without any issues
• opted-in and linked my Solana account using both Wallet & Rewards
• received ads for 1/2 a month and received payout via on-chain without any issues/failures