[Android] Implement Tip / Contribution Banner 3.0

[Miyayes]

Description

Android version of: #28148

Note: This issue excludes the Android Tablet implementation. Android Tablet implementation will be done separately: #30371

[LaurenWags]

@brave/qa-team when testing this issue on Android, please also verify updated tweet text from #30331.

[LaurenWags]

@brave/qa-team added QA/Test-All-Device-Types since this is new UI so we should verify on phone and tablet.

[GeetaSarvadnya]

Verification PASSED on Vivo X70 Pro version 12 running Bravemonoarm64.apk_1.53.83

• Logged You don't have enough tokens message is not refreshed/removed from the tipping banner when the tip amount is lesser than the wallet balance #30907
• Logged Unable to empty or make the custom tip value to 0.0 always 5 BAT is displayed in the text box #30908
• Logged Send tip button doesn't get activated when min custom tip of 0.25 BAT is entered #30909
• Logged USD and BAT conversion is not working as expected for the default tip amounts #30910
• Logged You don't have enough token message is shown when USD to BAT or vice versa conversion #30911
• Logged Lots of space in the tipping banner #30912
• Logged Set as monthly contribution notification message is overlapping on the monthly tip switch and message textbox UI is not as per the figma #30913
• Logged Logged out of {custodian} message doesn't have the alert icon indicator #30914
• Logged Custodian "mismatch" message doesn't have an indicator icon in it #30915
• Logged You're already sending a monthly contribution message doesn't have the indicator icon #30923
• Logged Transaction failed error message doesn't have an indicator icon in it  #30924
• Logged UPHOLD icon is displayed next to the Brave Rewards balance in the tipping banner for Grandfathered unconnected user in 1.53.x #30936
• Logged Custodian mismatch message is displayed in the tipping banner for the grandfathered unconnected user in 1.53 #30935

User State 1: Rewards not enabled - No change in 1.53 works same as RC 1.52

There is no inline tip icon in RC 1.52.x and 1.53.x for the github/reddit/twitter pubs

User State 2: Unconnected - No change in 1.53 works same as RC 1.52

There is no inline tip icon in RC 1.52.x and 1.53.x for the github/reddit/twitter pubs

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

• 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

• 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, - NA
  • The Rewards panel should be opened with a message indicating the publisher is not verified,
  • And the "Send Contribution" button should be disabled.

Note : There is no inline tip icon in RC 1.52.x and 1.53.x for the github/reddit/twitter pubs

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

Note : There is no inline tip icon in RC 1.52.x and 1.53.x for the github/reddit/twitter pubs

• 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 - FAILED
  • mismatch message is displayed for Gemini and bitFlyer custodians, logged Custodian mismatch message is displayed in the tipping banner for the grandfathered unconnected user in 1.53 #30935 and UPHOLD icon is displayed next to the Brave Rewards balance in the tipping banner for Grandfathered unconnected user in 1.53.x #30936

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

• 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

• 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, NA
  • The Rewards panel should be opened with a message indicating the publisher is not verified,
  • And the "Send Contribution" button should be disabled.

there is no inline tip icon in RC 1.52.x and 1.53.x github/reddit/twitter pubs for grandfathered unconnected state

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

there is no inline tip icon in RC 1.52.x and 1.53.x github/reddit/twitter pubs for grandfathered unconnected state

• 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

Additional tests - PASSED

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

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

3. Rounded corners - NA

• Confirm tip banner has rounded corners

In android tip panels are already rounded

Example	Example

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

Note: there is no inline tip icon in RC 1.52.x and 1.53.x github/reddit/twitter pubs for grandfathered unconnected state

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

Figma - PASSED

1. From the "Contribution Banner/Android" 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)

2. 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, covered the testing in User State 3: Connected case

• Creator verified - custodian but no web3 wallet (wording of this is incorrect on the figma)
  User State 3: Connected case

Dark UI banner	Light UI banner

• User is logged out of their custodian account

covered the testing in User State 3: Connected case

• Contribution failure

covered the testing in User State 3: Connected case

3. 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]

@Miyayes There are few differences found while testing the issue on Android ARM. I am assuming these changes are expected, please log an issue if these are not expected. Thanks!

1. no inline tip icon for both connected and non-connected users in Android I think which is known
2. No custodian available in region (panel) message is little different in Android, it's not same as Desktop

Desktop	Android

4. Custodian is not connected to Rewards (panel) message is little different in Android, it's not same as Desktop

Desktop	Android

cc: @LaurenWags @deeppandya

[LaurenWags]

fyi @kjozwiak @vlad-hoff @Uni-verse -

Per discussion with @Miyayes @sujitacharya2005 @deeppandya the Tablet implementation of the tip banner has been deferred and will be implemented with #30371.