Implement Rewards UI 2.0 for Rewards panel

[Miyayes]

Description

This is part of the Rewards UI/UX overhaul effort. This work will endure as it will not be replaced with the upcoming unified wallets work. (The new card look better coheres with the unified wallet.)

Related

Estimated pending rewards counter should reset monthly: #15005

Current Design

New Design

See design spec.

cc: @jenn-rhim

[LaurenWags]

Verification passed with

Brave | 1.31.73 Chromium: 94.0.4606.71 (Official Build) beta (x86_64)
-- | --
Revision | 1d32b169326531e600d836bd395efc1b53d0f6ef-refs/branch-heads/4606@{#1256}
OS | macOS Version 10.15.7 (Build 19H1417)

Verified test plan from brave/brave-core#9883 (comment)

Functional differences from previous UI - PASSED

1. Publisher verification status notice scenarios can be found under Do not show tipping notice for unverified rewards user case #18341 (comment). This covers the appropriate notice being displayed for various publisher verification statuses, the notice being displayed on hover on the panel, the notice being shown on the tipping banner, and confirming that the tip goes through or is sent to "Pending" list when appropriate. This is for anon, Uphold, bitFlyer, and Gemini user wallets.

2. Confirmed "BAT arriving soon" msg has been added to panel/wallet card. Confirmed the value displaying for this message is the same in all places (panel, NTP, brave://rewards):

Panel - Summary View	Panel - Publisher View	NTP Widget	brave://rewards page

3. Confirmed rewards summary no longer contains "Total Grants Claimed". In both clean and upgrade cases I had claimed the staging UGP grant (balance is 30 BAT).

Clean profile panel	Clean profile brave://rewards	Upgrade panel	Upgrade brave://rewards

4. Confirm rewards summary no longer displays "Rewards from Ads" when user has connected an external wallet.

Uphold	Uphold	bitFlyer	bitFlyer	Gemini	Gemini

5. Confirmed UGP grant captcha is no longer shown directly on the rewards page. Instead, the rewards panel is always opened. Confirmed able to claim from brave://rewards page, panel, and NTP widget. In all cases, panel was opened to claim captcha. Confirmed able to claim successfully from all 3 places.

NTP Widget Example	NTP Widget Example	NTP Widget Example

brave://rewards Example	brave://rewards Example	brave://rewards Example

Panel Example	Panel Example	Panel Example

Test cases: Rewards Panel (Part 1) - PASSED

1. Wallet Card

Confirmed "Verify Wallet" opens the verify wallet modal when accessed from brave://rewards or the panel:

Uphold wallet checks - PASSED

Confirmed "Verified" UI for Uphold wallet:

Example	Example

Confirmed that clicking on "Go to my Uphold account" navigated to the Uphold site as expected. (https://wallet-sandbox.uphold.com/dashboard on staging env)
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[26695:775:1006/160335.477385:VERBOSE1:uphold.cc(188)] Disconnecting wallet

Confirmed "Pending" UI for Uphold wallet:

Example	Example

Confirmed that clicking on "Go to Uphold to complete verification" navigated to the Uphold site.
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[26967:775:1006/161605.174910:VERBOSE1:uphold.cc(188)] Disconnecting wallet

Note - to get this "Pending" state, Charles Proxy was used with the following steps taken from #17316:

1. Clean profile, staging env
2. Enable Rewards, connect Uphold account.
3. Disconnect from Uphold.
4. Close browser.
5. Open Charles Proxy.
6. Set up rewrite rule to rewrite the response to https://api-sandbox.uphold.com/v0/me from 200 --> 404.
7. Launch browser
8. Click on "Verify Wallet" and navigate to Uphold option, chose this option/auth with Uphold
9. Confirm logs are reflecting your rewrite, and review the UI to confirm it is as expected.

Confirmed "Disconnected" UI for Uphold wallet:

Example	Example

Confirmed that clicking on "Log into your Uphold account" navigated to the Uphold site for reauthorization.
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[26967:775:1006/162454.517340:VERBOSE1:uphold.cc(188)] Disconnecting wallet

bitFlyer wallet checks - PASSED

Confirmed "Verified" UI for bitFlyer wallet:

Example	Example

Confirmed that clicking on "Go to my bitFlyer account" navigated to the bitFlyer site as expected. (checked staging env)
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[28488:775:1007/101103.040857:VERBOSE1:bitflyer.cc(166)] Disconnecting wallet

For "Pending", checked with Kevin and confirmed bitFlyer does not support "Pending" state, so UI does not need to be checked.

Confirmed "Disconnected" UI for bitFlyer wallet:

Example	Example

Confirmed that clicking on "Log into your bitFlyer account" navigated to the bitFlyer site for reauthorization.
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[28760:775:1007/103600.470661:VERBOSE1:bitflyer.cc(166)] Disconnecting wallet

Gemini wallet checks - PASSED

Confirmed "Verified" UI for Gemini wallet:

Example	Example

Confirmed that clicking on "Go to my Gemini account" navigated to the Gemini site as expected. (checked staging env)
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[9186:259:1007/110519.441672:VERBOSE1:gemini.cc(166)] Disconnecting wallet

For "Pending", checked with Kevin and confirmed Gemini does not support "Pending" state, so UI does not need to be checked.

Confirmed "Disconnected" UI for Gemini wallet:

Example	Example

Confirmed that clicking on "Log into your Gemini account" navigated to the Gemini site for reauthorization.
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[9186:259:1007/110419.996637:VERBOSE1:gemini.cc(166)] Disconnecting wallet

Brave | 1.31.74 Chromium: 94.0.4606.71 (Official Build) beta (x86_64)
-- | --
Revision | 1d32b169326531e600d836bd395efc1b53d0f6ef-refs/branch-heads/4606@{#1256}
OS | macOS Version 10.15.7 (Build 19H1417)

Encountered and logged #18651

Test cases: Rewards Panel (Part 2) - PASSED

2. Publisher Info

From brave/brave-core#9883, verified the following on the panel:

• Confirmed refresh status button worked as expected. Clicking on "Refresh Status" made the below request:

[ REQUEST ]
> URL: https://pcdn.bravesoftware.com/publishers/prefixes/6a92
> Method: GET
[30203:775:1007/154912.661397:VERBOSE6:logging_util.cc(136)] 
[ RESPONSE - OnRequest ]
> Url: https://pcdn.bravesoftware.com/publishers/prefixes/6a92
> Result: Success
> HTTP Code: 200
> Body: 

• Confirmed creator information is displayed as expected "normal" sites
• Confirmed creator information is displayed as expected for greaselion domains
• Confirmed Verified/Unverified icon is displayed as expected (including hover messaging which is referenced earlier in these notes)
• Confirmed creator icons are displayed as expected
• Confirmed Attention % updates on the panel

Verified publisher examples:

Regular site	YouTube	Twitter	Twitch	GitHub	Vimeo	Reddit

Unverified publisher examples:

Regular site	YouTube	Twitter	Twitch	GitHub	Vimeo	Reddit

• Confirmed if Auto Contribute is off, Attention % does not display on the panel
• Confirmed if you toggle AC off from the panel, it is removed from AC list

Example	Example	Example

• Confirmed "Set" button opens the tip panel for monthly tips
• Confirmed when a monthly tip is set, the value displays on the panel
• Confirmed once a monthly tip is set, the "Change amount" button opens the tip panel for monthly tips
• Confirmed once a monthly tip is set, the "Cancel" button opens the tip panel for clearing the monthly tip

Example	Example

3. Grant Captcha

Covered under "Functional differences from previous UI" item 5. Confirmed UGP grant captcha is no longer shown directly on the rewards page. Instead, the rewards panel is always opened. Confirmed able to claim from brave://rewards page, panel, and NTP widget. In all cases, panel was opened to claim captcha. Confirmed able to claim successfully from all 3 places.

Test cases: Rewards Page - PASSED

• Confirmed "Claim" button opens the rewards panel with the captcha displayed and confirmed able to claim this captcha from the panel successfully
• Confirmed "Manage your wallet" button opens the manage wallet modal
• Confirmed "View statement" link opens the wallet activity modal
• Confirmed "Verify wallet" button opens the Connect Wallet modal
• Covered above --> "Disconnect" link should allow disconnection from external wallet (checked for Uphold, bitFlyer, and Gemini wallets)

Figma checks - PASSED

Reference: https://www.figma.com/file/p4F6ItJQVeKPeFQhjoaPGm/BR-panel-2.0?node-id=1170%3A35310

• Confirmed panel supports both light and dark theme
• Confirmed able to switch between Tip and Summary views when both are available
• Confirmed only summary view is available on brave:// pages, clicking on "Tip" does not show anything

Example	Example	Example	Example

• Confirmed if you do not have a user wallet linked (Uphold, Gemini, bitFlyer), clicking on "Add Funds" directs you to the "Verify Wallet" modal:

• Confirmed that if you have a user wallet linked, clicking on "Add Funds" directs you to the wallet provider's site

  • Uphold --> clicking on "Add Funds" takes you to https://wallet-sandbox.uphold.com/dashboard/transact (staging env)
  • bitFlyer --> clicking on "Add Funds" takes you to https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/ex/Home?login=1 (staging env)
  • Gemini --> clicking on "Add Funds" takes you to https://exchange.qa6.aurora7.net/transfer/deposit (staging env)

• Unverified/Connected messaging was checked under item 1 of "Functional differences from previous UI" from earlier in the notes. This referenced Do not show tipping notice for unverified rewards user case #18341 (comment) which covers the appropriate notice being displayed for various publisher verification statuses, the notice being displayed on hover on the panel, the notice being shown on the tipping banner, and confirming that the tip goes through or is sent to "Pending" list when appropriate. This is for anon, Uphold, bitFlyer, and Gemini user wallets.

• Confirmed the red bubble shows on the BAT logo if there is a notification present. Example below is for Ad grant, which was used in the Figma doc. Other notifications will be spot checked as well (all notifications I can think of) in a later section. Note - confirmed with Kevin that the existing bubble is to be used. Bubble shown in Figma is out of scope for 1.31.x and will be addressed at a later time with other work. Also, Figma notification text for Ad earnings notification is not in scope, will be handled with Add UI messaging/design that tells users they have 90 days to claim ad earnings and solve CAPTCHA #17133.

Notification Bubble	Ad Grant Arrival Notification	Ad Grant Claim Captcha	Success on Claim message	Ads reflected in Summary View

• Captcha changes were covered under item 5 from "Functional differences from previous UI" above

• Custodial wallet verification states (Verified/Pending/Disconnected) are covered in testing notes above

• Confirmed clicking on the gear icon opens the brave://rewards page

Notifications - PASSED

Confirmed notifications on the panel displayed as expected. Verified each of the notifications below and confirmed they could be closed via "x" or clicking on the blue button. Blue button closed notification and in certain cases opened expected site in a new tab or showed captcha.

Note - Wallet Verified/Disconnected (natural disconnect) notifications can be checked using any provider, I chose Uphold.
Note - Pending, Blocked, Restricted, and BAT not available are only applicable to Uphold
Note - For 2nd Acct Linked, only Uphold shows this as a panel notification. BitFlyer and Gemini show this as a modal on brave://rewards and are out of scope for this testing.

UGP Grant	Ad Grant	Wallet Verified	Wallet Disconnected	Pending	Blocked	Restricted	BAT not available	2nd Acct Linked

Also, checked the scenario where I was sent multiple ad grants by Chris. Confirmed was able to claim the multiple ad grants from the panel as expected.

Clean Profile checks - PASSED

Set up one time tips, recurring tips, and AC on a clean 1.31.x profile.
Confirmed after all are completed, the summary values are correct on the panel and brave://rewards page.

Example	Example

Verified the AC notification occurs after successful Auto Contribute.
Verified the Monthly Tip notification which occurs after monthly tips have been contributed but only shows when AC is off.

AC notification	Monthly Tip Notification

Brave | 1.31.82 Chromium: 95.0.4638.40 (Official Build) beta (x86_64)
-- | --
Revision | e3e7c76ba0284b16087cf4cf3153abfaef6470c7-refs/branch-heads/4638@{#624}
OS | macOS Version 10.15.7 (Build 19H1417)

Upgrade Profile checks - PASSED

Upgrade Scenario 1 - PASSED

Created a profile with 1.30.87 (staging env --enable-logging=stderr --vmodule="*/bat-native-ledger/*"=9,"*/brave_rewards/*"=9,"*/bat-native-ads/*"=9,"*/bat-native-confirmations/*"=9,"*/brave_ads/*"=9,"*/brave_user_model/*"=9 --brave-ads-staging --rewards=staging=true,reconcile-interval=10,retry-interval=30)
Enabled Rewards and claimed UGP + Ad grant
Set up 1 time tips, recurring tips and AC
Had recurring tips and AC complete
Confirmed all items showed as expected in the wallet summary panel:

1.30.x UI	1.30.x UI

Closed the browser and renamed to Beta
Launched with 1.31.x
Confirmed all data displayed as expected with the new UI:

1.31.x UI	1.31.x UI

Upgrade Scenario 2 - PASSED

Created a profile with 1.30.87 (staging env --enable-logging=stderr --vmodule="*/bat-native-ledger/*"=9,"*/brave_rewards/*"=9,"*/bat-native-ads/*"=9,"*/bat-native-confirmations/*"=9,"*/brave_ads/*"=9,"*/brave_user_model/*"=9 --brave-ads-staging --rewards=staging=true,reconcile-interval=7,retry-interval=30)
Enabled Rewards and link KYC Uphold acct
Set up 1 time tips, recurring tips and AC
Had recurring tips and AC complete
Confirmed all items showed as expected in the wallet summary panel:

1.30.x UI	1.30.x UI

Closed the browser and renamed to Beta
Launched with 1.31.x
Confirmed all data displayed as expected with the new UI:

1.31.x UI	1.31.x UI

Upgrade Scenario 3 - PASSED

Created a profile with 1.30.87 (staging env --enable-logging=stderr --vmodule="*/bat-native-ledger/*"=9,"*/brave_rewards/*"=9,"*/bat-native-ads/*"=9,"*/bat-native-confirmations/*"=9,"*/brave_ads/*"=9,"*/brave_user_model/*"=9 --brave-ads-staging --rewards=staging=true,reconcile-interval=7,retry-interval=30)
Enabled Rewards and link KYC Gemini acct
Set up 1 time tips, recurring tips and AC
Had recurring tips and AC complete
Confirmed all items showed as expected in the wallet summary panel:

1.30.x UI	1.30.x UI

Closed the browser and renamed to Beta
Launched with 1.31.x
Confirmed all data displayed as expected with the new UI:

1.31.x UI	1.31.x UI

Upgrade Scenario 4 - PASSED

Created a profile with 1.30.87 (staging env --enable-logging=stderr --vmodule="*/bat-native-ledger/*"=9,"*/brave_rewards/*"=9,"*/bat-native-ads/*"=9,"*/bat-native-confirmations/*"=9,"*/brave_ads/*"=9,"*/brave_user_model/*"=9 --brave-ads-staging --rewards=staging=true,reconcile-interval=7,retry-interval=30)
Enabled Rewards and link KYC bitFlyer acct
Set up 1 time tips, recurring tips
Had recurring tips complete
Confirmed all items showed as expected in the wallet summary panel:

1.30.x UI	1.30.x UI

Closed the browser and renamed to Beta
Launched with 1.31.x
Confirmed all data displayed as expected with the new UI:

1.31.x UI	1.31.x UI

[stephendonner]

Verified PASSED, with

Brave	1.31.81 Chromium: 95.0.4638.40 (Official Build) beta (64-bit)
Revision	e3e7c76ba0284b16087cf4cf3153abfaef6470c7-refs/branch-heads/4638@{#624}
OS	Linux

Verified test plan from brave/brave-core#9883 (comment)

Functional differences from previous UI - PASSED

1. Publisher verification status notice scenarios can be found under Do not show tipping notice for unverified rewards user case #18341 (comment). This covers the appropriate notice being displayed for various publisher verification statuses, the notice being displayed on hover on the panel, the notice being shown on the tipping banner, and confirming that the tip goes through or is sent to "Pending" list when appropriate. This is for anon, Uphold, bitFlyer, and Gemini user wallets.

2. Confirmed "BAT arriving soon" msg has been added to panel/wallet card. Confirmed the value displaying for this message is the same in all places (panel, NTP, brave://rewards):

Unable to test due to #18221

3. Confirmed rewards summary no longer contains "Total Grants Claimed". In both clean and upgrade cases I had claimed the staging UGP grant (balance is 30 BAT).

Clean profile panel	Clean profile brave://rewards	Upgrade panel	Upgrade brave://rewards

4. Confirm rewards summary no longer displays "Rewards from Ads" when user has connected an external wallet.

Uphold	bitFlyer

5. Confirmed UGP grant captcha is no longer shown directly on the rewards page. Instead, the rewards panel is always opened. Confirmed able to claim from brave://rewards page, panel, and NTP widget. In all cases, panel was opened to claim captcha. Confirmed able to claim successfully from all 3 places.

NTP Widget Example	NTP Widget Example	NTP Widget Example

brave://rewards Example	brave://rewards Example	brave://rewards Example

Panel Example	Panel Example	Panel Example

Test cases: Rewards Panel (Part 1) - PASSED

1. Wallet Card

Confirmed "Verify Wallet" opens the verify wallet modal when accessed from brave://rewards or the panel:

Uphold wallet checks - PASSED

Confirmed "Verified" UI for Uphold wallet:

Example	Example

Confirmed that clicking on "Go to my Uphold account" navigated to the Uphold site as expected. (https://wallet-sandbox.uphold.com/dashboard on staging env)
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[23587:23587:1013/100151.610196:VERBOSE1:uphold.cc(188)] Disconnecting wallet

Confirmed that clicking on "Go to Uphold to complete verification" navigated to the Uphold site.
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[6567:6567:1012/174251.117972:VERBOSE1:uphold.cc(188)] Disconnecting wallet

Confirmed "Disconnected" UI for Uphold wallet:

Example	Example

Confirmed that clicking on "Log into your Uphold account" navigated to the Uphold site for reauthorization.
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[23587:23587:1013/100151.610196:VERBOSE1:uphold.cc(188)] Disconnecting wallet

bitFlyer wallet checks - PASSED

Confirmed "Verified" UI for bitFlyer wallet:

Example	Example

Confirmed that clicking on "Go to my bitFlyer account" navigated to the bitFlyer site as expected. (checked staging env)
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[7749:7749:1012/174624.973121:VERBOSE1:bitflyer.cc(166)] Disconnecting wallet

For "Pending", checked with Kevin and confirmed bitFlyer does not support "Pending" state, so UI does not need to be checked.

Confirmed "Disconnected" UI for bitFlyer wallet:

Example	Example

Confirmed that clicking on "Log into your bitFlyer account" navigated to the bitFlyer site for reauthorization.
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[7749:7749:1012/174624.973121:VERBOSE1:bitflyer.cc(166)] Disconnecting wallet

Gemini wallet checks - PASSED

Confirmed "Verified" UI for Gemini wallet:

Example	Example

Confirmed that clicking on "Go to my Gemini account" navigated to the Gemini site as expected. (checked staging env)
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[22898:22898:1013/095608.440795:VERBOSE1:gemini.cc(166)] Disconnecting wallet

For "Pending", checked with Kevin and confirmed Gemini does not support "Pending" state, so UI does not need to be checked.

Confirmed "Disconnected" UI for Gemini wallet:

Example	Example

Confirmed that clicking on "Log into your Gemini account" navigated to the Gemini site for reauthorization.
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[24673:24673:1013/101150.405894:VERBOSE1:gemini.cc(166)] Disconnecting wallet

Test cases: Rewards Panel (Part 2) - PASSED

2. Publisher Info

From brave/brave-core#9883, verified the following on the panel:

• Confirmed refresh status button worked as expected. Clicking on "Refresh Status" made the below request:

[9555:9555:1012/182255.359595:VERBOSE5:ledger_impl.cc(119)] 
[ REQUEST ]
> URL: https://pcdn.bravesoftware.com/publishers/prefixes/d4c9
> Method: GET
[9555:9555:1012/182255.376267:VERBOSE6:logging_util.cc(136)] 
[ RESPONSE - OnRequest ]
> Url: https://pcdn.bravesoftware.com/publishers/prefixes/d4c9
> Result: Success
> HTTP Code: 200

• Confirmed creator information is displayed as expected for "normal" sites
• Confirmed creator information is displayed as expected for greaselion domains
• Confirmed Verified/Unverified icon is displayed as expected (including hover messaging which is referenced earlier in these notes)
• Confirmed creator icons are displayed as expected
• Confirmed Attention % updates on the panel

Verified publisher examples:

Regular site	Twitter	GitHub	Reddit

Unverified publisher examples:

Regular site	YouTube	Twitch	Vimeo

• Confirmed if Auto Contribute is off, Attention % does not display on the panel
• Confirmed if you toggle AC off from the panel, it is removed from AC list

Example	Example	Example

• Confirmed "Set" button opens the tip panel for monthly tips
• Confirmed when a monthly tip is set, the value displays on the panel
• Confirmed once a monthly tip is set, the "Change amount" button opens the tip panel for monthly tips
• Confirmed once a monthly tip is set, the "Cancel" button opens the tip panel for clearing the monthly tip

Example	Example

3. Grant Captcha

Covered under "Functional differences from previous UI" item 5. Confirmed UGP grant captcha is no longer shown directly on the rewards page. Instead, the rewards panel is always opened. Confirmed able to claim from brave://rewards page, panel, and NTP widget. In all cases, panel was opened to claim captcha. Confirmed able to claim successfully from all 3 places.

Test cases: Rewards Page - PASSED

• Confirmed "Claim" button opens the rewards panel with the captcha displayed and confirmed able to claim this captcha from the panel successfully
• Confirmed "Manage your wallet" button opens the manage wallet modal
• Confirmed "View statement" link opens the wallet activity modal
• Confirmed "Verify wallet" button opens the Connect Wallet modal
• Covered above --> "Disconnect" link should allow disconnection from external wallet (checked for Uphold, bitFlyer, and Gemini wallets)

Figma checks - PASSED

Reference: https://www.figma.com/file/p4F6ItJQVeKPeFQhjoaPGm/BR-panel-2.0?node-id=1170%3A35310

• Confirmed panel supports both light and dark theme

• Confirmed able to switch between Tip and Summary views when both are available

• Confirmed only summary view is available on brave:// pages, clicking on "Tip" does not show anything

• Confirmed if you do not have a user wallet linked (Uphold, Gemini, bitFlyer), clicking on "Add Funds" directs you to the "Verify Wallet" modal

• Confirmed that if you have a user wallet linked, clicking on "Add Funds" directs you to the wallet provider's site

  • Uphold --> clicking on "Add Funds" takes you to https://wallet-sandbox.uphold.com/dashboard/transact (staging env)
  • bitFlyer --> clicking on "Add Funds" takes you to https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/ex/Home?login=1 (staging env)
  • Gemini --> clicking on "Add Funds" takes you to https://exchange.qa6.aurora7.net/transfer/deposit (staging env)

• Unverified/Connected messaging was checked under item 1 of "Functional differences from previous UI" from earlier in the notes. This referenced Do not show tipping notice for unverified rewards user case #18341 (comment) which covers the appropriate notice being displayed for various publisher verification statuses, the notice being displayed on hover on the panel, the notice being shown on the tipping banner, and confirming that the tip goes through or is sent to "Pending" list when appropriate. This is for anon, Uphold, bitFlyer, and Gemini user wallets.

• Confirmed the red bubble shows on the BAT logo if there is a notification present. Example below is for Ad grant, which was used in the Figma doc. Other notifications will be spot checked as well (all notifications I can think of) in a later section. Note - confirmed with Kevin that the existing bubble is to be used. Bubble shown in Figma is out of scope for 1.31.x and will be addressed at a later time with other work. Also, Figma notification text for Ad earnings notification is not in scope, will be handled with Add UI messaging/design that tells users they have 90 days to claim ad earnings and solve CAPTCHA #17133.

• Captcha changes were covered under item 5 from "Functional differences from previous UI" above

• Custodial wallet verification states (Verified/Pending/Disconnected) are covered in testing notes above

• Confirmed clicking on the gear icon opens the brave://rewards page

Notifications - PASSED

Confirmed notifications on the panel displayed as expected. Verified each of the notifications below and confirmed they could be closed via "x" or clicking on the blurple button. Clicking the blurpleClaim button opens the CAPTCHA.

UGP Grant

Upgrade Scenario 1 - PASSED

• Created a profile with 1.30.87 (staging env --enable-logging=stderr --vmodule="*/bat-native-ledger/*"=9,"*/brave_rewards/*"=9,"*/bat-native-ads/*"=9,"*/bat-native-confirmations/*"=9,"*/brave_ads/*"=9,"*/brave_user_model/*"=9 --brave-ads-staging --rewards=staging=true,reconcile-interval=10,retry-interval=30)
• Enabled Rewards and claimed UGP + Ad grant
• Set up 1 time tips, recurring tips, and AC
• Had recurring tips and AC complete
• Confirmed all items showed as expected in the wallet summary panel:

1.30.x UI	1.30.x UI

• Closed the browser and renamed to Beta
• Launched with 1.31.x
• Confirmed all data displayed as expected with the new UI:

1.31.x UI	1.31.x UI

[GeetaSarvadnya]

Verification passed on

Brave | 1.31.82 Chromium: 95.0.4638.40 (Official Build) beta (64-bit)
-- | --
Revision | e3e7c76ba0284b16087cf4cf3153abfaef6470c7-refs/branch-heads/4638@{#624}
OS | Windows 10 Version 21H1 (Build 19043.1266)

• Verified the test plan from Integrate Rewards panel 2.0 brave-core#9883
• Encountered Remove "Auto-Contribute" from Rewards Summary for Japan region #18651

Functional differences from previous UI - PASSED

1. Publisher verification status notice scenarios can be found under Do not show tipping notice for unverified rewards user case #18341 (comment). This covers the appropriate notice being displayed for various publisher verification statuses, the notice being displayed on hover on the panel, the notice being shown on the tipping banner, and confirming that the tip goes through or is sent to "Pending" list when appropriate. This is for anon, Uphold, bitFlyer, and Gemini user wallets.

2. Confirmed "BAT arriving soon" msg has been added to panel/wallet card. Confirmed the value displaying for this message is the same in all places (panel, NTP, brave://rewards):

Panel - Summary View	Panel - Publisher View	NTP Widget	brave://rewards page

3. Confirmed rewards summary no longer contains "Total Grants Claimed". In both clean and upgrade cases I had claimed the staging UGP grant (balance is 30 BAT).

Clean profile panel	Clean profile brave://rewards	Upgrade panel	Upgrade brave://rewards

4. Confirm rewards summary no longer displays "Rewards from Ads" when user has connected an external wallet.

Uphold	Uphold	bitFlyer	bitFlyer	Gemini	Gemini

5. Confirmed UGP grant captcha is no longer shown directly on the rewards page. Instead, the rewards panel is always opened. Confirmed able to claim from brave://rewards page, panel, and NTP widget. In all cases, panel was opened to claim captcha. Confirmed able to claim successfully from all 3 places.

NTP Widget Example	NTP Widget Example	NTP Widget Example

brave://rewards Example	brave://rewards Example	brave://rewards Example

Panel Example	Panel Example	Panel Example

Test cases: Rewards Panel (Part 1) - PASSED

1. Wallet Card

Confirmed "Verify Wallet" opens the verify wallet modal when accessed from brave://rewards or the panel:

Uphold wallet checks - PASSED

Confirmed "Verified" UI for Uphold wallet:

Example	Example

Confirmed that clicking on "Go to my Uphold account" navigated to the Uphold site as expected. (https://wallet-sandbox.uphold.com/dashboard on staging env)
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[16428:22968:1014/102454.709:VERBOSE1:uphold.cc(188)] Disconnecting wallet

Confirmed "Disconnected" UI for Uphold wallet:

Example	Example

Confirmed "Pending" UI for Uphold wallet:

Example	Example

bitFlyer wallet checks - PASSED

Confirmed "Verified" UI for bitFlyer wallet:

Example	Example

Confirmed that clicking on "Go to my bitFlyer account" navigated to the bitFlyer site as expected. (checked staging env)
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[3752:6848:1013/225755.289:VERBOSE1:bitflyer.cc(166)] Disconnecting wallet

Confirmed that clicking on "Log into your bitFlyer account" navigated to the bitFlyer site for reauthorization.
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

Confirmed "Disconnected" UI for bitFlyer wallet:

Example	Example

[732:5180:1014/042629.942:VERBOSE1:contribution.cc(362)] Creating contribution for wallet type bitflyer (amount: 1, type: ONE_TIME_TIP)
[732:5180:1014/042629.951:VERBOSE1:contribution.cc(91)] Queue timer set for 45 s
[732:5180:1014/042629.953:VERBOSE1:database_server_publisher_banner.cc(142)] Server publisher banner not found
[732:5180:1014/042629.955:VERBOSE5:ledger_impl.cc(119)]
[ REQUEST ]
> URL: https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/api/link/v1/coin/withdraw-to-deposit-id/request
> Method: POST
> Content: {"amount":"0.950000","currency_code":"BAT","deposit_id":"7d7ff5b9-2424-4f0d-8f6b-29ffb928aa15","dry_run":false,"transfer_id":"001a0fb3-3cf4-4cc0-bf73-836bf5127017"}
> Content Type: application/json; charset=utf-8
[732:5180:1014/042631.099:VERBOSE6:logging_util.cc(136)]
[ RESPONSE - OnRequest ]
> Url: https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/api/link/v1/coin/withdraw-to-deposit-id/request
> Result: Failure
> HTTP Code: 409
> Body: {
  "dry_run": false,
  "currency_code": "BAT",
  "amount": 0.950000,
  "message": "期限切れのため再認証が必要です",
  "transfer_status": "SESSION_TIME_OUT",
  "transfer_id": "001a0fb3-3cf4-4cc0-bf73-836bf5127017"
}
[732:5180:1014/042631.099:INFO:post_transaction_bitflyer.cc(68)] Conflict
[732:5180:1014/042631.106:INFO:post_transaction_bitflyer.cc(155)] Transfer failed (status: SESSION_TIME_OUT)
[732:5180:1014/042631.106:INFO:post_transaction_bitflyer.cc(156)] 期限切れのため再認証が必要です
[732:5180:1014/042631.107:VERBOSE1:bitflyer.cc(166)] Disconnecting wallet

Gemini wallet checks - PASSED

Confirmed "Verified" UI for Gemini wallet:

Example	Example

Confirmed that clicking on "Go to my Gemini account" navigated to the Gemini site as expected. (checked staging env)
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[456:21728:1014/115652.861:VERBOSE1:gemini.cc(166)] Disconnecting wallet

Confirmed "Disconnected" UI for Gemini wallet:

Example	Example

Confirmed that clicking on "Log into your Gemini account" navigated to the Gemini site for reauthorization.
Confirmed that clicking on "Disconnect from Brave Rewards" disconnected the wallet as expected.

[456:21728:1014/120248.066:VERBOSE1:gemini.cc(166)] Disconnecting wallet

Test cases: Rewards Panel (Part 2) - PASSED

2. Publisher Info

From brave/brave-core#9883, verified the following on the panel:

• Confirmed refresh status button worked as expected. Clicking on "Refresh Status" made the below request:

[ REQUEST ]
> URL: https://pcdn.bravesoftware.com/publishers/prefixes/6a92
> Method: GET
[17724:15312:1014/121018.979:VERBOSE6:logging_util.cc(136)]
[ RESPONSE - OnRequest ]
> Url: https://pcdn.bravesoftware.com/publishers/prefixes/6a92
> Result: Success
> HTTP Code: 200

• Confirmed creator information is displayed as expected "normal" sites
• Confirmed creator information is displayed as expected for greaselion domains
• Confirmed Verified/Unverified icon is displayed as expected (including hover messaging which is referenced earlier in these notes)
• Confirmed creator icons are displayed as expected
• Confirmed Attention % updates on the panel

Verified publisher examples:

Regular site	YouTube	Twitter	Twitch	GitHub	Vimeo	Reddit

Unverified publisher examples:

Regular site	YouTube	Twitter	Twitch	GitHub	Vimeo	Reddit

• Confirmed if Auto Contribute is off, Attention % does not display on the panel
• Confirmed if you toggle AC off from the panel, it is removed from AC list

Example	Example	Example

• Confirmed "Set" button opens the tip panel for monthly tips
• Confirmed when a monthly tip is set, the value displays on the panel
• Confirmed once a monthly tip is set, the "Change amount" button opens the tip panel for monthly tips
• Confirmed once a monthly tip is set, the "Cancel" button opens the tip panel for clearing the monthly tip

Example	Example

3. Grant Captcha

Covered under "Functional differences from previous UI" item 5. Confirmed UGP grant captcha is no longer shown directly on the rewards page. Instead, the rewards panel is always opened. Confirmed able to claim from brave://rewards page, panel, and NTP widget. In all cases, panel was opened to claim captcha. Confirmed able to claim successfully from all 3 places.

Test cases: Rewards Page - PASSED

• Confirmed "Claim" button opens the rewards panel with the captcha displayed and confirmed able to claim this captcha from the panel successfully
• Confirmed "Manage your wallet" button opens the manage wallet modal
• Confirmed "View statement" link opens the wallet activity modal
• Confirmed "Verify wallet" button opens the Connect Wallet modal
• Covered above --> "Disconnect" link should allow disconnection from external wallet (checked for Uphold, bitFlyer, and Gemini wallets)

Figma checks - PASSED

Reference: https://www.figma.com/file/p4F6ItJQVeKPeFQhjoaPGm/BR-panel-2.0?node-id=1170%3A35310

• Confirmed panel supports both light and dark theme

• Confirmed able to switch between Tip and Summary views when both are available

• Confirmed only summary view is available on brave:// pages, clicking on "Tip" does not show anything

• Confirmed if you do not have a user wallet linked (Uphold, Gemini, bitFlyer), clicking on "Add Funds" directs you to the "Verify Wallet" modal

• Confirmed that if you have a user wallet linked, clicking on "Add Funds" directs you to the wallet provider's site

  • Uphold --> clicking on "Add Funds" takes you to https://wallet-sandbox.uphold.com/dashboard/transact (staging env)
  • bitFlyer --> clicking on "Add Funds" takes you to https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/ex/Home?login=1 (staging env)
  • Gemini --> clicking on "Add Funds" takes you to https://exchange.qa6.aurora7.net/transfer/deposit (staging env)

• Unverified/Connected messaging was checked under item 1 of "Functional differences from previous UI" from earlier in the notes. This referenced Do not show tipping notice for unverified rewards user case #18341 (comment) which covers the appropriate notice being displayed for various publisher verification statuses, the notice being displayed on hover on the panel, the notice being shown on the tipping banner, and confirming that the tip goes through or is sent to "Pending" list when appropriate. This is for anon, Uphold, bitFlyer, and Gemini user wallets.

• Confirmed the red bubble shows on the BAT logo if there is a notification present. Example below is for Ad grant, which was used in the Figma doc. Other notifications will be spot checked as well (all notifications I can think of) in a later section. Note - confirmed with Kevin that the existing bubble is to be used. Bubble shown in Figma is out of scope for 1.31.x and will be addressed at a later time with other work. Also, Figma notification text for Ad earnings notification is not in scope, will be handled with Add UI messaging/design that tells users they have 90 days to claim ad earnings and solve CAPTCHA #17133.

• Captcha changes were covered under item 5 from "Functional differences from previous UI" above

• Custodial wallet verification states (Verified/Pending/Disconnected) are covered in testing notes above

• Confirmed clicking on the gear icon opens the brave://rewards page

Notifications - PASSED

Confirmed notifications on the panel displayed as expected. Verified each of the notifications below and confirmed they could be closed via "x" or clicking on the blurple button. Clicking the blurpleClaim button opens the CAPTCHA.

UGP Grant

Upgrade Scenario 1 - PASSED

• Created a profile with 1.30.87 (staging env --enable-logging=stderr --vmodule="*/bat-native-ledger/*"=9,"*/brave_rewards/*"=9,"*/bat-native-ads/*"=9,"*/bat-native-confirmations/*"=9,"*/brave_ads/*"=9,"*/brave_user_model/*"=9 --brave-ads-staging --rewards=staging=true,reconcile-interval=10,retry-interval=30)
• Enabled Rewards and claimed UGP + Ad grant
• Set up 1 time tips, recurring tips, and AC
• Had recurring tips and AC complete
• Confirmed all items showed as expected in the wallet summary panel:

1.30.x UI	1.30.x UI

• Closed the browser and renamed to Beta
• Launched with 1.31.x
• Confirmed all data displayed as expected with the new UI:

1.31.x UI	1.31.x UI