Implement Rewards UI 2.0 for Rewards panel

Miyayes commented 3 years ago

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.)

Current Design

New Design

See design spec.

cc: @jenn-rhim

LaurenWags commented 3 years ago

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 https://github.com/brave/brave-core/pull/9883#issue-981456162

Functional differences from previous UI - PASSED

1. Publisher verification status notice scenarios can be found under https://github.com/brave/brave-browser/issues/18341#issuecomment-933506070. 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 ----- | ----- | ----- | ----- panel-summary view

|

|

|

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 ----- | ----- | ----- | ----- Screen Shot 2021-10-06 at 10 36 12 AM

|

|

|

4. Confirm rewards summary no longer displays "Rewards from Ads" when user has connected an external wallet. Uphold | Uphold | bitFlyer | bitFlyer | Gemini | Gemini ----- | ----- | ----- | ----- | ----- | ----- Uphold1

|

|

|

|

|

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 ----- | ----- | ----- Screen Shot 2021-10-06 at 11 20 55 AM

|

|

brave://rewards Example | brave://rewards Example | brave://rewards Example ----- | ----- | ----- Screen Shot 2021-10-06 at 11 23 38 AM

|

|

Panel Example | Panel Example | Panel Example ----- | ----- | ----- Screen Shot 2021-10-06 at 11 25 32 AM

|

|

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 ----- | ----- Verified1

|

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 ----- | ----- Pending1

|

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 https://github.com/brave/brave-browser/issues/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 ----- | ----- Disconnected1

|

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 ----- | ----- bitFlyer1

|

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 ----- | ----- Disconnected1

|

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 ----- | ----- Verified1

|

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 ----- | ----- Disconnected1

|

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 https://github.com/brave/brave-browser/issues/18651

Test cases: Rewards Panel (Part 2) - PASSED

2. Publisher Info From https://github.com/brave/brave-core/pull/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 ----- | ----- | ----- | ----- | ----- | ----- | ----- normal site-verified

|

|

|

|

|

|

Unverified publisher examples: Regular site | YouTube | Twitter | Twitch | GitHub | Vimeo | Reddit ----- | ----- | ----- | ----- | ----- | ----- | ----- normal site-unverified

|

|

|

|

|

|

- 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 ----- | ----- | ----- AC off

|

|

- 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 ----- | ----- set monthly tip1

|

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 ----- | ----- | ----- | ----- Lt-Tip

|

|

|

- 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 https://github.com/brave/brave-browser/issues/18341#issuecomment-933506070 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 https://github.com/brave/brave-browser/issues/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 ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- UGP

|

|

|

|

|

|

|

|

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 ----- | ----- Clean1

|

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 ----- | ----- 1 30 x2

|

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 ----- | ----- 1 31 x2

|

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 ----- | ----- Screen Shot 2021-10-12 at 3 21 22 PM

|

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 ----- | ----- Screen Shot 2021-10-12 at 3 22 09 PM

|

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 ----- | ----- Screen Shot 2021-10-12 at 3 49 00 PM

|

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 ----- | ----- Screen Shot 2021-10-12 at 3 49 54 PM

|

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 ----- | ----- Screen Shot 2021-10-12 at 16 01 44

|

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 ----- | ----- Screen Shot 2021-10-12 at 16 02 27

|

stephendonner commented 3 years ago

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 https://github.com/brave/brave-core/pull/9883#issue-981456162

Functional differences from previous UI - PASSED

1. Publisher verification status notice scenarios can be found under https://github.com/brave/brave-browser/issues/18341#issuecomment-933506070. 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 https://github.com/brave/brave-browser/issues/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` ----- | ----- | ----- | ----- Screen Shot 2021-10-12 at 7 12 32 PM

|

|

|

4. Confirm rewards summary no longer displays "Rewards from Ads" when user has connected an external wallet. Uphold | bitFlyer --------|-------- Screen Shot 2021-10-12 at 4 08 58 PM

|

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 ----- | ----- | ----- Screen Shot 2021-10-12 at 5 09 38 PM

|

|

brave://rewards Example | brave://rewards Example | brave://rewards Example ----- | ----- | ----- Screen Shot 2021-10-12 at 5 12 48 PM

|

|

Panel Example | Panel Example | Panel Example ----- | ----- | ----- Screen Shot 2021-10-12 at 5 15 24 PM

|

|

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: Screen Shot 2021-10-12 at 5 23 16 PM

Uphold wallet checks - PASSED

Confirmed "Verified" UI for Uphold wallet: Example | Example ----- | ----- Screen Shot 2021-10-12 at 5 29 54 PM

|

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 ----- | ----- Screen Shot 2021-10-13 at 9 40 23 AM

|

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 ----- | ----- Screen Shot 2021-10-12 at 5 29 54 PM

|

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 ----- | ----- Screen Shot 2021-10-13 at 9 23 26 AM

|

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 ----- | ----- Screen Shot 2021-10-13 at 9 50 33 AM

|

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 ----- | ----- Screen Shot 2021-10-13 at 9 32 34 AM

|

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 https://github.com/brave/brave-core/pull/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 ----- | ----- | ----- | ----- | Screen Shot 2021-10-12 at 5 51 42 PM

|

|

|

Unverified publisher examples: Regular site | YouTube | Twitch | Vimeo ----- | ----- | ----- | ----- Screen Shot 2021-10-12 at 5 57 05 PM

|

|

|

- 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 ----- | ----- | ----- Screen Shot 2021-10-12 at 6 00 07 PM

|

|

- 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 ----- | ----- Screen Shot 2021-10-12 at 6 06 04 PM

|

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 https://github.com/brave/brave-browser/issues/18341#issuecomment-933506070 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 https://github.com/brave/brave-browser/issues/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 blurple`Claim` button opens the CAPTCHA. UGP Grant Screen Shot 2021-10-12 at 6 42 53 PM

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 ----- | ----- Screen Shot 2021-10-12 at 7 03 40 PM

|

* 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 ----- | ----- Screen Shot 2021-10-12 at 7 04 31 PM

|

GeetaSarvadnya commented 3 years ago

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 https://github.com/brave/brave-core/pull/9883
Encountered https://github.com/brave/brave-browser/issues/18651

Functional differences from previous UI - PASSED

Publisher verification status notice scenarios can be found under https://github.com/brave/brave-browser/issues/18341#issuecomment-933506070. 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.
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

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

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

Uphold	Uphold	bitFlyer	bitFlyer	Gemini	Gemini

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: ![image](https://user-images.githubusercontent.com/38657976/137161251-9f75d0a2-bd4d-4989-b853-e7fb15245f1f.png)

Uphold wallet checks - PASSED

Confirmed "Verified" UI for Uphold wallet: Example | Example ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137254215-376e6cdd-1175-4698-8c96-5dc7b7f6cd7c.png) | ![image](https://user-images.githubusercontent.com/38657976/137254253-f2b876cf-f1e2-4ae3-a5c5-dbc7b4df072b.png) 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 ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137254614-d691e740-874a-42dd-b1c0-a4e45bfeb6a5.png) | ![image](https://user-images.githubusercontent.com/38657976/137254669-b13ba899-f894-4c28-a99f-bfe5d6ab487c.png) Confirmed "Pending" UI for Uphold wallet: Example | Example ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137258601-cfb62985-c03b-4b57-808d-7e801dc7a16e.png) | ![image](https://user-images.githubusercontent.com/38657976/137258669-d258faf7-2d12-4533-a576-9eeeb7218577.png)

bitFlyer wallet checks - PASSED

Confirmed "Verified" UI for bitFlyer wallet: Example | Example ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137260108-9a28a60b-f16d-470d-a16a-ed144f4f7025.png) | ![image](https://user-images.githubusercontent.com/38657976/137260135-d411055e-e156-4608-a30c-ae81bffc874a.png) 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 ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137308925-0aeea13c-a3a2-4cc2-93ea-d352d2880b76.png) | ![image](https://user-images.githubusercontent.com/38657976/137308968-63292349-8877-4c88-84c8-41af389fde40.png) ``` [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 ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137263371-0a6c3c41-55f6-4251-ae06-495bfe683459.png) | ![image](https://user-images.githubusercontent.com/38657976/137263322-813b91e1-f398-434d-9655-44f99b599609.png) 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 ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137263950-f8db87e8-8aa2-4ccb-983f-5743104befbb.png) | ![image](https://user-images.githubusercontent.com/38657976/137263901-6c1fb8d7-fc82-438e-852a-fc990729930e.png) 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 https://github.com/brave/brave-core/pull/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 ----- | ----- | ----- | ----- | ----- | ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137265362-3e21b5cf-4543-4c82-a48b-654bf4eb784c.png) | ![image](https://user-images.githubusercontent.com/38657976/137265459-b0c7d15d-e535-4f2d-86e7-3a886a690072.png) | ![image](https://user-images.githubusercontent.com/38657976/137265553-e75bf8e5-72c6-4f58-b80c-9df12700dbcf.png) | ![image](https://user-images.githubusercontent.com/38657976/137265663-103e2ebe-925a-4d96-abfe-2ced30916630.png) | ![image](https://user-images.githubusercontent.com/38657976/137265741-355ddb19-0ab9-4406-ab5e-62d08eaa83a2.png) | ![image](https://user-images.githubusercontent.com/38657976/137265835-f30ac531-a7eb-4179-bcd4-c264ba2ee737.png) | ![image](https://user-images.githubusercontent.com/38657976/137265915-65faedf5-1da8-4053-a9ff-c5d6e22153f1.png) Unverified publisher examples: Regular site | YouTube | Twitter | Twitch | GitHub | Vimeo | Reddit ----- | ----- | ----- | ----- | ----- | ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137266156-7076d6f2-8400-40d2-9fba-dd847813b9ca.png) | ![image](https://user-images.githubusercontent.com/38657976/137266250-6084d3cc-0fbc-40ae-80e5-3e1965807565.png) | ![image](https://user-images.githubusercontent.com/38657976/137266472-3e8bfca0-eb33-4be7-a7b7-079c0ea8166c.png) | ![image](https://user-images.githubusercontent.com/38657976/137266609-e0e46213-eb6a-4cf7-bc61-b2beec53b313.png) | ![image](https://user-images.githubusercontent.com/38657976/137266721-4b936678-3fae-4e71-832a-34e435357f40.png) | ![image](https://user-images.githubusercontent.com/38657976/137266846-4c714d15-e802-406a-ba4d-dd77b09f4d16.png) | ![image](https://user-images.githubusercontent.com/38657976/137267134-2ef19a08-1f18-482f-a145-8632b8623315.png) - 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 ----- | ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137267290-4323b970-2f84-4781-b38d-dd6fbb7dfe49.png) | ![image](https://user-images.githubusercontent.com/38657976/137267412-7c8d7498-7aa6-43e0-980c-dbcdcb51763e.png) | ![image](https://user-images.githubusercontent.com/38657976/137267469-bb33b997-1c77-4544-9584-a3be4e40355c.png) - 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 ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137267747-206e22e1-c547-42e1-9580-f094f540c893.png) | ![image](https://user-images.githubusercontent.com/38657976/137267793-c11fd1c2-c3f3-4a68-a9e1-553fa139ac6e.png) 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 https://github.com/brave/brave-browser/issues/18341#issuecomment-933506070 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 https://github.com/brave/brave-browser/issues/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 blurple`Claim` button opens the CAPTCHA. UGP Grant ![image](https://user-images.githubusercontent.com/38657976/137276017-b761e6c9-9b07-4a18-9e6f-0dc2adde4514.png)

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 ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137278052-605ba98d-f07e-41b8-be6a-7979ed2c0183.png) | ![image](https://user-images.githubusercontent.com/38657976/137278103-b42e140d-3581-4f9d-9123-bbd39eb7ea8a.png) * 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 ----- | ----- ![image](https://user-images.githubusercontent.com/38657976/137278469-ea97c29a-2bb7-47fb-8de0-467d782c6530.png) | ![image](https://user-images.githubusercontent.com/38657976/137278501-3c8e98c6-fafe-464f-86ed-d2f4ff8ae9e7.png)

brave / brave-browser