Support Polkadot wallet connect on Vortex

[prayagd]

User Story

As a Vortex user, I want to be able to off ramp my USDC on Polkadot Asset Hub to the off-ramping currencies available on Vortex, and:

• I can connect my substrate wallet to the app
• The 'From' asset is preselected to USDC

Acceptance criteria

When the user lands on "app.vortexfinance.co"

• Accepts Terms and Conditions

• Network preselected to Asset Hub - with an option to change to others

• Connect wallet opens up option to connect with substrate wallets

• The choice of network defines the Connect wallet options i.e. EVM or Substrate, and the options shown in the 'From' asset dropdown in the following way:

Network	Assets	Wallet Options
Asset Hub	USDC	Subwallet, Polkadot.js, Talisman, Nova
Polygon	USDC.e, USDC, USDT	Default with library

• if the url query parameter "network" is given, use it to preselect a network (e.g., the strings "assethub" or "polygon") – this should work similar to the Add url parameter to preselect output token #266
• store the selected network in the local storage
  • when the website and a network is already in the local storage, select that one and don't show the network selection popup

Note

• If the user is connected to a substrate network and selects a EVM network from the network selector, disconnect the wallet connection, this does not apply if the user is connected to EVM network and selects other EVM network
• The network selector and filter of tokens is Zenlink reference, screenshot attached

Reference

https://app.zenlink.pro/swap

[prayagd]

Hey team! Please add your planning poker estimate with Zenhub @ebma @gianfra-t @Sharqiewicz @TorstenStueber

[prayagd]

@pendulum-chain/devs Let me know if any questions

[ebma]

I saw this ticket only after adding a comment to #272. I think this lacks the implications for the user experience. Similar to the question I put into the description of #272. How should we support both Polkadot and EVM wallets? What should the prototype show and how should it behave if a user connects to a Polkadot wallet?

[prayagd]

Updated the ticket, let me know if any confusion

[TorstenStueber]

The tickets in the BSC USDT epic does not define the network switcher yet. What is the relative priority of that epic to this one here (Asset Hub)?

If this one here comes first, then let's not refer to BSC yet. Then the main user facing definition of this ticket is to introduce a network switcher (the fact that we would need to have different wallet integrations is then implied and would also be a requirement of this ticket).

[vadaynujra]

Since the Binance USDT epic was picked up only as a fall back option, Asset Hub off ramp now holds higher relative priority between the 2 epics and should be progressed first, so that changes can be accommodated for the new EVM network (Binance) epic @TorstenStueber @prayagd

[Sharqiewicz]

For Polkadot-wallet connection we can use the logic from Portal. This is the useConnectWallet hook. We can then customize the appearance of Dialog ourselves - or we can also simply use https://github.com/TalismanSociety/talisman-connect

[TorstenStueber]

Yes, let's reuse the UX from the Portal.

[TorstenStueber]

I removed any reference to BSC from the ticket description.

Additionally I added another acceptance criterion to preselect the network given the url parameter.

[TorstenStueber]

@pendulum-chain/product @pendulum-chain/devs shall we store the selected network in the local storage (similar to the token selection) so that the network selection popup doesn't show up on the next reload?

[ebma]

shall we store the selected network in the local storage

Yes, let's do that.

[TorstenStueber]

Good, description added.

[Sharqiewicz]

@TorstenStueber Let's store it in the localStorage. Zenlink has the same solution