Implement Tip / Contribution Banner 3.0 #28148

Miyayes · 2023-01-30T23:26:46Z

Description

Tasks

Give feedback

New design Tipping banner 3.0 (frontend UI components) #29020
Use Chromium bubble
Make closeable when clicking outside of banner: Tipping banner should be non-modal, i.e. make it easily dismissable on clicking outside of the banner #23740
Handle new PCDN entries for channel page link (QA for this will happen later)
Implement spinner when balance cannot be fetched (as done for Show spinner and Loading... on NTP Rewards widget, Rewards panel, and rewards-internals page when balance cannot be fetched from custodian #28549). Resolved with: Add base::expected<>-style API to the "fetch balance" flow #28793
Options

@Miyayes For Figma.

The text was updated successfully, but these errors were encountered:

LaurenWags · 2023-05-05T20:33:54Z

@brave/qa-team will do full testing on Windows and macOS, with reduced cases on Linux.

In particular, please pay attention to the rounded corner display on the tip banner on the various platforms.

On Linux please test

User State 3: Connected
Keep a close eye on the rounded corners of the tip banner
Confirm all screens from the appropriate "Figma" sections are observed as expected

LaurenWags · 2023-05-11T14:07:40Z

Verified with

Brave | 1.52.94 Chromium: 113.0.5672.92 (Official Build) beta (x86_64)
-- | --
Revision | b6f521170062a1fa8a82c33fb223b06fec566da1-refs/branch-heads/5672_63@{#10}
OS | macOS Version 13.3.1 (a) (Build 22E772610a)

Verified test plan from brave/brave-core#17647.

Encountered the following issues while testing:

Pulled "Web3" test cases out of the test plan and logged them under #30414 for tracking as this button is not ready for QA at the moment due to some server side items which need to be implemented.

User State 1: Rewards not enabled - PASSED

Verified when an in-page tip icon is clicked,
- The Rewards panel is opened

brave://version	GitHub	Twitter	Reddit

User State 2: Unconnected - PASSED

Verified when an in-page tip icon is clicked and a wallet provider is available,
- A message should be displayed about contributions
- A connect button is displayed
- Confirmed the "Connect" button opens brave://rewards/#verify and shows the modal to select a wallet provider

Country Selection	Rewards enabled	GitHub	Twitter	Reddit

Verified when an in-page tip icon is clicked and a wallet provider is not available,
- An alternate message should be displayed about contributions,
- The connect button is not displayed.
- Confirmed "Learn more" navigates to https://support.brave.com/hc/en-us/articles/6539887971469

Country Selection	Rewards enabled	GitHub	Twitter	Reddit

User State 3: Connected - PASSED

When the tip panel is opened,
- The user's BAT balance for their provider should be displayed.

Dark	Light

When the tip panel is opened and the user is logged out from their wallet provider,
- A login message should be displayed,
- And a "Log In" button should be displayed that will take the user to the wallet provider's authorization URL.

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

When the tip panel is opened and the publisher does not have the same wallet provider as the user,
- A "mismatch" message should be displayed.

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

When "Send" is clicked with a valid amount,
- The tip should be sent and the success UI should be displayed,
- And the "Share" button should open Twitter with a "new post" prompt.

Success Dark UI	Tweet from Dark UI	Success Light UI	Tweet from Light UI

When "Send" is clicked and the monthly toggle is set,
- A one-time tip should be sent,
- And the success UI should be displayed
- And a monthly contribution should be added to the "Monthly Contributions" list visible on the Rewards page.

Example	Example	Example	Example	Example	Example

When the tip panel is opened and a monthly contribution is already set for the publisher,
- The tip panel should display a message indicating that a monthly contribution is already set.

Dark UI panel	Dark UI banner	Light UI panel	Light UI banner

Advanced my computer clock to next monthly contribution date (Jun 12 per Monthly Contributions section of brave://rewards
- Confirmed monthly tip was sent as expected
- Confirmed next monthly tip was scheduled per Monthly Contributions section of brave://rewards)

Example	Example	Example	Example

When the Rewards panel is opened for an unverified publisher,
- A message should be displayed stating that the publisher is not verified,
- And the "Send Contribution" button should be disabled.

Dark	Light

When the Rewards panel is opened for a verified publisher,
- The "Send Contribution" button should be enabled.

Dark	Light

When an in-line tip icon is clicked for an unverified publisher,
- The Rewards panel should be opened with a message indicating the publisher is not verified,
- And the "Send Contribution" button should be disabled.

Dark	Light

When an in-line tip icon is clicked for a verified publisher,
- The tip panel should be opened.

Dark	Light

When an error is encountered when creating a transaction with the wallet provider.
- An error message should be displayed,
- And a "Try Again" button should be displayed.

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

User State 4: Grandfathered Unconnected - PASSED

When the tip panel is opened,
- The user's vBAT balance should be displayed.

Dark	Light

When the tip panel is opened and the publisher is verified for Uphold, Gemini, or bitFlyer,
- No "mismatch" message should be displayed.

Dark - Uphold	Light - Uphold	Dark - Gemini	Light - Gemini	Dark - bitFlyer	Light - bitFlyer

When "Send" is clicked with a valid amount,
- The tip should be sent and the success UI should be displayed,
- And the "Share" button should open Twitter with a "new post" prompt.

Success Dark UI	Tweet from Dark UI	Success Light UI	Tweet from Light UI

When "Send" is clicked and the monthly toggle is set,
- A one-time tip should be sent,
- And the success UI should be displayed
- And a monthly contribution should be added to the "Monthly Contributions" list visible on the Rewards page.

Example	Example	Example	Example	Example	Example

When the tip panel is opened and a monthly contribution is already set for the publisher,
- The tip panel should display a message indicating that a monthly contribution is already set.

Dark UI panel	Dark UI banner	Light UI panel	Light UI banner

Advanced my computer clock to next monthly contribution date (Jun 14 per Monthly Contributions section of brave://rewards
- Confirmed monthly tip was sent as expected
- Confirmed next monthly tip was scheduled per Monthly Contributions section of brave://rewards)

Example	Example	Example	Example

When the Rewards panel is opened for an unverified publisher,
- A message should be displayed stating that the publisher is not verified,
- And the "Send Contribution" button should be disabled.

Dark	Light

When the Rewards panel is opened for a verified publisher,
- The "Send Contribution" button should be enabled.

Dark	Light

When an in-line tip icon is clicked for an unverified publisher,
- The Rewards panel should be opened with a message indicating the publisher is not verified,
- And the "Send Contribution" button should be disabled.

Dark	Light

When an in-line tip icon is clicked for a verified publisher,
- The tip panel should be opened.

Dark	Light

When an error is encountered when creating a transaction,
- An error message should be displayed,
- And a "Try Again" button should be displayed.

Note - error message is not displayed and was logged via #30431

Dark	Light

Brave | 1.52.103 Chromium: 113.0.5672.126 (Official Build) beta (x86_64)
-- | --
Revision | c541687b21a73452ab403e2dced7033ddc97ee9d-refs/branch-heads/5672@{#1202}
OS | macOS Version 13.3.1 (a) (Build 22E772610a)

Additional tests - PASSED

Confirm when a monthly tip is configured for a creator, a one time tip can still be sent:

Fresh profile, close and relaunch to pull griffin
Join rewards, connect a custodian
Navigate to a creator who is verified with your same custodian
Set up a monthly tip
Confirm tip is sent immediately and one is scheduled for next month
Open tip banner for that same creator, see message about monthly contribution
Send another tip
Confirm tip is sent

Example	Example	Example	Example	Example	Example	Example

Confirm no more hover text on panel:

Fresh profile, close and relaunch to pull griffin
Join rewards, connect a custodian
Navigate to a creator who is verified with a different custodian than you
Example, I have an Uphold wallet and navigated to a Gemini creator
Confirm on the panel, there is no hover text when you hover over "Verified creator"
Confirm when you select "Send Contribution" button, the contribution/tip banner shows a message about this creator and you are unable to tip them

Example	Example

Rounded corners

Confirm tip banner has rounded corners

Sometimes tip banner has corners that are both rounded and square, see logged issue #30282

Confirm when clicking in-line tip button on twitter for a verified creator, that the tip banner no longer quotes the tweet

1.51.x	1.52.x

Pending Contributions - not tested, will be covered in future issues when Pending Contributions code is removed

Figma - PASSED

From the "Contribution Banner/Desktop" section

The following from Figma were generally covered during testing of "User State 3 - Connected" and "User State 4 - Grandfathered Unconnected" with various sites:
- Custom vs Standard/default images
- Click away from banner to close it
- Contribution sent icon/message
- Light and dark modes
- Custom amount entry
The following from this section of Figma are shown below:
- Verified creator icon hover text
- switch between BAT and USD
- Monthly Contribution tooltip

Creator icon hover (dark)	Creator icon hover (light)	BAT/USD switch	BAT/USD switch	Monthly tooltip (dark)	Monthly tooltip (light)

From the "Contribution Banner Error/Info States, User can continue" section - all of these were verified under "User State 3 - Connected" and/or "User State 4 - Grandfathered Unconnected" section:

User is already sending monthly tips

Dark UI banner	Light UI banner

Creator has different custodian than user

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

Creator verified - custodian but no web3 wallet (wording of this is incorrect on the figma)

Dark	Light

User is logged out of their custodian account

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

Contribution failure

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

From the "Contribution Banner Error/Info States, user dead end" section

The following from Figma were generally covered during testing of the various user states (1-4):
- Creator not registered (panel)

Dark	Light

  - Custodian is not connected to Rewards (panel)

Dark	Light

  - No custodian available in region (panel)

Dark	Light

  - User doesn't have enough tokens for transaction

Dark	Light

GeetaSarvadnya · 2023-05-15T15:45:03Z

Verification PASSED on

Brave | 1.52.94 Chromium: 113.0.5672.92 (Official Build) beta (64-bit)
-- | --
Revision | b6f521170062a1fa8a82c33fb223b06fec566da1-refs/branch-heads/5672_63@{#10}
OS | Windows 10 Version 21H2 (Build 19044.2965)

Verified test plan from Tipping Banner 3.0 brave-core#17647.
Encountered bottom corners on contribution/tip banner are rounded and square simultaneously - follow up to 30282 #30463
Logged There was a problem sending your contribution message is not shown in Grandfathered unconnected state #30431

User State 1: Rewards not enabled - PASSED

Verified when an in-page tip icon is clicked,
- The Rewards panel is opened

brave://version	GitHub	Twitter	Reddit

User State 2: Unconnected - PASSED

Verified when an in-page tip icon is clicked and a wallet provider is available,
- A message should be displayed about contributions
- A connect button is displayed
- Confirmed the "Connect" button opens brave://rewards/#verify and shows the modal to select a wallet provider

Country Selection	Rewards enabled	GitHub	Twitter	Reddit

Verified when an in-page tip icon is clicked and a wallet provider is not available,
- An alternate message should be displayed about contributions,
- The connect button is not displayed.
- Confirmed "Learn more" navigates to https://support.brave.com/hc/en-us/articles/6539887971469

Country Selection	Rewards enabled	GitHub	Twitter	Reddit

User State 3: Connected - PASSED

When the tip panel is opened,
- The user's BAT balance for their provider should be displayed.

Dark	Light

When the tip panel is opened and the user is logged out from their wallet provider,
- A login message should be displayed,
- And a "Log In" button should be displayed that will take the user to the wallet provider's authorization URL.

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

When the tip panel is opened and the publisher does not have the same wallet provider as the user,
- A "mismatch" message should be displayed.

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

When "Send" is clicked with a valid amount,
- The tip should be sent and the success UI should be displayed,
- And the "Share" button should open Twitter with a "new post" prompt.

Success Dark UI	Tweet from Dark UI	Success Light UI	Tweet from Light UI

When "Send" is clicked and the monthly toggle is set,
- A one-time tip should be sent,
- And the success UI should be displayed
- And a monthly contribution should be added to the "Monthly Contributions" list visible on the Rewards page.

Example	Example	Example	Example	Example	Example

When the tip panel is opened and a monthly contribution is already set for the publisher,
- The tip panel should display a message indicating that a monthly contribution is already set.

Dark UI panel	Dark UI banner	Light UI panel	Light UI banner

Advanced my computer clock to next monthly contribution date (June 15 per Monthly Contributions section of brave://rewards
- Confirmed monthly tip was sent as expected
- Confirmed next monthly tip was scheduled per Monthly Contributions section of brave://rewards)

Example	Example	Example	Example

When the Rewards panel is opened for an unverified publisher,
- A message should be displayed stating that the publisher is not verified,
- And the "Send Contribution" button should be disabled.

Dark	Light

When the Rewards panel is opened for a verified publisher,
- The "Send Contribution" button should be enabled.

Dark	Light

When an in-line tip icon is clicked for an unverified publisher,
- The Rewards panel should be opened with a message indicating the publisher is not verified,
- And the "Send Contribution" button should be disabled.

Dark	Light

When an in-line tip icon is clicked for a verified publisher,
- The tip panel should be opened.

Dark	Light

When an error is encountered when creating a transaction with the wallet provider.
- An error message should be displayed,
- And a "Try Again" button should be displayed.

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

User State 4: Grandfathered Unconnected - PASSED

When the tip panel is opened,
- The user's vBAT balance should be displayed.

Dark	Light

When the tip panel is opened and the publisher is verified for Uphold, Gemini, or bitFlyer,
- No "mismatch" message should be displayed.

Dark - Uphold	Light - Uphold	Dark - Gemini	Light - Gemini	Dark - bitFlyer	Light - bitFlyer

When "Send" is clicked with a valid amount,
- The tip should be sent and the success UI should be displayed,
- And the "Share" button should open Twitter with a "new post" prompt.

Success Dark UI	Tweet from Dark UI	Success Light UI	Tweet from Light UI

When "Send" is clicked and the monthly toggle is set,
- A one-time tip should be sent,
- And the success UI should be displayed
- And a monthly contribution should be added to the "Monthly Contributions" list visible on the Rewards page.

Example	Example	Example	Example	Example	Example

When the tip panel is opened and a monthly contribution is already set for the publisher,
- The tip panel should display a message indicating that a monthly contribution is already set.

Dark UI panel	Dark UI banner	Light UI panel	Light UI banner

Advanced my computer clock to next monthly contribution date (Jun 17 per Monthly Contributions section of brave://rewards
- Confirmed monthly tip was sent as expected
- Confirmed next monthly tip was scheduled per Monthly Contributions section of brave://rewards)

Example	Example	Example	Example

When the Rewards panel is opened for an unverified publisher,
- A message should be displayed stating that the publisher is not verified,
- And the "Send Contribution" button should be disabled.

Dark	Light

When the Rewards panel is opened for a verified publisher,
- The "Send Contribution" button should be enabled.

Dark	Light

When an in-line tip icon is clicked for an unverified publisher,
- The Rewards panel should be opened with a message indicating the publisher is not verified,
- And the "Send Contribution" button should be disabled.

Dark	Light

When an in-line tip icon is clicked for a verified publisher,
- The tip panel should be opened.

Dark	Light

When an error is encountered when creating a transaction,
- An error message should be displayed,
- And a "Try Again" button should be displayed.

Dark	Light

Additional tests - PASSED

Confirm when a monthly tip is configured for a creator, a one time tip can still be sent:

Fresh profile, close and relaunch to pull griffin
Join rewards, connect a custodian
Navigate to a creator who is verified with your same custodian
Set up a monthly tip
Confirm tip is sent immediately and one is scheduled for next month
Open tip banner for that same creator, see message about monthly contribution
Send another tip
Confirm tip is sent

Example	Example	Example	Example	Example	Example

Confirm no more hover text on panel:

Fresh profile, close and relaunch to pull griffin
Join rewards, connect a custodian
Navigate to a creator who is verified with a different custodian than you
Example, I have an Uphold wallet and navigated to a Gemini creator
Confirm on the panel, there is no hover text when you hover over "Verified creator"
Confirm when you select "Send Contribution" button, the contribution/tip banner shows a message about this creator and you are unable to tip them

Example	Example

Rounded corners

Confirm tip banner has rounded corners

Sometimes tip banner has corners that are both rounded and square, see encountered the issue #30282

Confirm when clicking in-line tip button on twitter for a verified creator, that the tip banner no longer quotes the tweet

1.51.x	1.52.x

Pending Contributions - not tested, will be covered in future issues when Pending Contributions code is removed

Figma - PASSED

From the "Contribution Banner/Desktop" section

The following from Figma were generally covered during testing of "User State 3 - Connected" and "User State 4 - Grandfathered Unconnected" with various sites:
- Custom vs Standard/default images
- Click away from banner to close it
- Contribution sent icon/message
- Light and dark modes
- Custom amount entry
The following from this section of Figma are shown below:
- Verified creator icon hover text
- switch between BAT and USD
- Monthly Contribution tooltip

Creator icon hover (dark)	Creator icon hover (light)	BAT/USD switch	BAT/USD switch	Monthly tooltip (dark)	Monthly tooltip (light)

From the "Contribution Banner Error/Info States, User can continue" section - all of these were verified under "User State 3 - Connected" and/or "User State 4 - Grandfathered Unconnected" section:

User is already sending monthly tips

Dark UI banner	Light UI banner

Creator has different custodian than user

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

Creator verified - custodian but no web3 wallet (wording of this is incorrect on the figma)

Dark	Light

User is logged out of their custodian account

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

Contribution failure

Uphold Dark	Uphold Light	Gemini Dark	Gemini Light	bitFlyer Dark	bitFlyer Light

From the "Contribution Banner Error/Info States, user dead end" section

The following from Figma were generally covered during testing of the various user states (1-4):
- Creator not registered (panel)

Dark	Light

  - Custodian is not connected to Rewards (panel), click on inline tip

Dark	Light

  - No custodian available in region (panel), click on inline tip

Dark	Light

  - User doesn't have enough tokens for transaction

Dark	Light

btlechowski · 2023-05-31T13:43:33Z

Verification passed on

Brave	1.52.113 Chromium: 114.0.5735.53 (Official Build) (64-bit)
Revision	c499d7ea22c8b2dba278465a5df7b86a8efa4e64-refs/branch-heads/5735@{#970}
OS	Ubuntu 18.04 LTS

User State 3: Connected - PASSED

When the tip panel is opened,
- The user's BAT balance for their provider should be displayed.

Dark	Light

When the tip panel is opened and the user is logged out from their wallet provider,
- A login message should be displayed,
- And a "Log In" button should be displayed that will take the user to the wallet provider's authorization URL.

Gemini:

bitflyer

When the tip panel is opened and the publisher does not have the same wallet provider as the user,
- A "mismatch" message should be displayed.

Gemini:

BitFlyer

When "Send" is clicked with a valid amount,
- The tip should be sent and the success UI should be displayed,
- And the "Share" button should open Twitter with a "new post" prompt.

Success Dark UI	Tweet from Dark UI	Success Light UI	Tweet from Light UI

When "Send" is clicked and the monthly toggle is set,
- A one-time tip should be sent,
- And the success UI should be displayed
- And a monthly contribution should be added to the "Monthly Contributions" list visible on the Rewards page.

When the tip panel is opened and a monthly contribution is already set for the publisher,
- The tip panel should display a message indicating that a monthly contribution is already set.

Advanced my computer clock to next monthly contribution date (Jun 12 per Monthly Contributions section of brave://rewards
- Confirmed monthly tip was sent as expected
- Confirmed next monthly tip was scheduled per Monthly Contributions section of brave://rewards)
When the Rewards panel is opened for an unverified publisher,
- A message should be displayed stating that the publisher is not verified,
- And the "Send Contribution" button should be disabled.

Dark	Light

When the Rewards panel is opened for a verified publisher,
- The "Send Contribution" button should be enabled.

Dark	Light

When an in-line tip icon is clicked for an unverified publisher,
- The Rewards panel should be opened with a message indicating the publisher is not verified,
- And the "Send Contribution" button should be disabled.

Dark	Light

When an in-line tip icon is clicked for a verified publisher,
- The tip panel should be opened.

Dark	Light

When an error is encountered when creating a transaction with the wallet provider.
- An error message should be displayed,
- And a "Try Again" button should be displayed.

Gemini:

bitFlyer

Miyayes added feature/rewards OS/Desktop feature/P2P-Send labels Jan 30, 2023

Miyayes mentioned this issue Jan 30, 2023

[Android] Implement Tip / Contribution Banner 3.0 #28149

Closed

Miyayes assigned zenparsing Feb 1, 2023

Miyayes added the priority/P2 A bad problem. We might uplift this to the next planned release. label Feb 1, 2023

Miyayes mentioned this issue Feb 1, 2023

Update "Verified creator" blue checkmark icon #28208

Closed

Miyayes added the QA/Yes label Feb 10, 2023

This was referenced Mar 3, 2023

Add tipping panel UI components brave/brave-core#17455

Merged

Implement P2P on-chain tipping in tipping banner (Phase 1) #15253

Closed

zenparsing mentioned this issue Mar 28, 2023

Tipping Banner 3.0 brave/brave-core#17647

Merged

25 tasks

zenparsing closed this as completed in brave/brave-core#17647 Apr 17, 2023

brave-builds added this to the 1.52.x - Nightly milestone Apr 17, 2023

zenparsing added the release-notes/include label Apr 17, 2023

LaurenWags added the QA/Test-All-Platforms label May 5, 2023

LaurenWags mentioned this issue May 10, 2023

update desktop rewards test cases brave/qa-resources#522

Closed

LaurenWags added the QA/In-Progress Indicates that QA is currently in progress for that particular issue label May 11, 2023

LaurenWags mentioned this issue May 17, 2023

web3 button on contribution banner #30414

Open

LaurenWags added QA Pass-macOS and removed QA/In-Progress Indicates that QA is currently in progress for that particular issue labels May 19, 2023

GeetaSarvadnya added the QA Pass-Win64 label May 22, 2023

LaurenWags mentioned this issue May 22, 2023

Change "Tip" language to "Contribution" language and remove "One-time" language #29603

Closed

2 tasks

LaurenWags mentioned this issue May 26, 2023

Desktop Release Notes for 1.52.x - Release #30620

Closed

btlechowski added the QA Pass-Linux label May 31, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Tip / Contribution Banner 3.0 #28148

Implement Tip / Contribution Banner 3.0 #28148

Miyayes commented Jan 30, 2023 •

edited

Loading

Tasks

LaurenWags commented May 5, 2023 •

edited

Loading

LaurenWags commented May 11, 2023 •

edited

Loading

GeetaSarvadnya commented May 15, 2023 •

edited

Loading

btlechowski commented May 31, 2023 •

edited

Loading

Implement Tip / Contribution Banner 3.0 #28148

Implement Tip / Contribution Banner 3.0 #28148

Comments

Miyayes commented Jan 30, 2023 • edited Loading

Description

Tasks

LaurenWags commented May 5, 2023 • edited Loading

LaurenWags commented May 11, 2023 • edited Loading

GeetaSarvadnya commented May 15, 2023 • edited Loading

btlechowski commented May 31, 2023 • edited Loading

Miyayes commented Jan 30, 2023 •

edited

Loading

LaurenWags commented May 5, 2023 •

edited

Loading

LaurenWags commented May 11, 2023 •

edited

Loading

GeetaSarvadnya commented May 15, 2023 •

edited

Loading

btlechowski commented May 31, 2023 •

edited

Loading