Update on-ramp providers and add purchase method screen

[simoarpe]

Resolves brave/brave-browser#23316 (Update on-ramp methods)

Resolves brave/brave-browser#27996 (Switch to new API getBuyUrlV1)

Implements a new screen to select a purchase method containing Ramp.Network, Sardine and Transak.
Adopted new API getBuyUrlV1.

• ⚠️ Sardine will appear only in US locales.
• Ramp.Network needs modified symbols obtained by mapToRampNetworkSymbol.
• New core method that accepts an array of providers, and returns the full list.
• Implemented removeDuplicates to avoid showing duplication in the EditVisibleAssetsBottomSheetDialogFragment UI.
• Update Sardine with new logo.

Demo

demo.mov

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally:
  • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
  • npm run lint, npm run presubmit wiki, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

• Open the wallet section
• Tap on FAB icon and select "Buy"
• Tap on "Select purchase method" button
• Observe the new screen "Select purchase method"
• Verify that tapping on the "Buy with Ramp" button opens a new page on Ramp network
• Verify that tapping on the "Buy with Sardine" button opens a new page on Sardine
• Verify that tapping on the "Buy with Transak" button opens a new page on Transak

[Pavneet-Sing]

I believe the primary task with on-ramp implementation is to expand the support by adding additional Ramp networks(Sardine etc). The UI is good to have but it was previously required due to multiple options: ramp and wyre.
As of now, it's just an extra step to select the only one option available.
Isn't it better to keep the previous implementation to use ramp as a default option for buy?
Is there any plan to add more network options to this screen?
cc: @jamesmudgett @SergeyZhukovsky

[simoarpe]

Is there any description of the actual changes required? I copied the iOS flow but couldn't find any other differences other than the extra screen "Select purchase method".

[SergeyZhukovsky]

could we have it in svg format? We are going to convert all pictures to vector graphic soon. That will decrease resources size plus they are scalable. It doesn't make sense to add anything new via png.

[simoarpe]

Extracted from iOS, so the only option available was PNG. I'm going to try to manually convert this.

[SergeyZhukovsky]

Or ask design team for a help

[simoarpe]

The results were low quality, I'll ask the design team for some help.

[SergeyZhukovsky]

I believe the primary task with on-ramp implementation is to expand the support by adding additional Ramp networks(Sardine etc). The UI is good to have but it was previously required due to multiple options: ramp and wyre. As of now, it's just an extra step to select the only one option available. Isn't it better to keep the previous implementation to use ramp as a default option for buy? Is there any plan to add more network options to this screen? cc: @jamesmudgett @SergeyZhukovsky

I would say there are plans to add more, but @jamesmudgett would know better.

[simoarpe]

@Pavneet-Sing, here is a recording of the iOS flow that I copied. Compiled a debug version from the latest changes (Pulled the latest changes and recompiled right now just to be extra sure). The only difference seems to be this extra screen. Tried on both Solana and Ethereum networks. Let me know I'm missing something obvious.

Screen.Recording.2023-01-26.at.2.41.49.PM.mov

[simoarpe]

Update: I've just had a call with @jamesmudgett discussing the changes required. I'm going to ping you again once this PR is ready to review.

[Pavneet-Sing]

@Pavneet-Sing, here is a recording of the iOS flow that I copied. Compiled a debug version from the latest changes (Pulled the latest changes and recompiled right now just to be extra sure). The only difference seems to be this extra screen. Tried on both Solana and Ethereum networks. Let me know I'm missing something obvious.

Screen.Recording.2023-01-26.at.2.41.49.PM.mov

IOS sardine support: https://github.com/brave/brave-ios/blob/development/Sources/BraveWallet/Crypto/Stores/BuyTokenStore.swift#L24 but it is for US only: https://github.com/brave/brave-ios/blob/development/Sources/BraveWallet/Crypto/Stores/BuyTokenStore.swift#L160

Additionally, Desktop has Transak as well

[simoarpe]

Review feedback addressed @SergeyZhukovsky.

[SergeyZhukovsky]

++

[Pavneet-Sing]

I am noticing a small delay to show Sardine option that can be displayed instantly. Just create a method to check if sardine is enabled and show it instantly. This will also simplify getBuyUrl:

brave-core/android/java/org/chromium/chrome/browser/app/domain/OnRampModel.java

Lines 27 to 37 in 46bc711

	public void getBuyUrl(int onRampProvider, String chainId, String from, String rampNetworkSymbol,
	String amount, Resources resources, OnRampCallback callback) {
	if (onRampProvider == OnRampProvider.SARDINE) {
	// Sardine services are available only for US locales.
	Locale currentLocale =
	ConfigurationCompat.getLocales(resources.getConfiguration()).get(0);
	if (currentLocale == null || !currentLocale.getCountry().equals("US")) {
	callback.OnUrlReady(null);
	return;
	}
	}

sardine-delay.webm

[Pavneet-Sing]

I missed to notice this before but this should be done where the data is fetched or processed then passed the filtered data to UI. Ok for now as a workaround, probably address this in the next PR.

[Pavneet-Sing]

It is causing an issue to remove tokens while showing tokens from all networks so logged an issue brave/brave-browser#28506