Update UI for Offramp from USDC (Assethub)

prayagd commented 2 weeks ago

User Story

As an Asset Hub user, I want to off-ramp my USDC from Assethub to the off-ramping currencies available on Vortex

Requirements

This ticket contains all the UI changes related to the Asset Hub addition to Vortex. This includes:

Ensure that all token icons for the input token also show the network (to be implemented for Asset Hub tokens and Polygon tokens)
Updating the Progress screen steps

Assumption: switching between networks / wallets will be implemented in #271

Note

icon - https://drive.google.com/file/d/1yIS4NVYSyRvg8v_03d3J6XILmUOBbvrS/view?usp=drive_link

prayagd commented 2 weeks ago

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

prayagd commented 2 weeks ago

@pendulum-chain/devs should there be one more ticket to implement the automation between Assethub and Pendulum?

ebma commented 2 weeks ago

I think we need another ticket for adding the Assethub USDC to Nabla or a different instance of the deployment, however we want to achieve it. I would understand that the automation between Assethub and Pendulum is the goal of this very ticket so there is no other needed IMO. There are however some open questions we still need to clarify. I'll add some to the description.

TorstenStueber commented 1 week ago

I created a separate ticket that defines only the business logic of the new offramping flow: https://github.com/pendulum-chain/vortex/issues/283

I propose that we use this ticket here only for UI changes. Usually we should do logic + UI in one ticket but I think in this case splitting this makes sense.

So what are the required UI changes? Assume that the switch between networks/wallets will be implemented in https://github.com/pendulum-chain/vortex/issues/271

We would need to specify that USDC will be (the) one of the input assets that can be used with Asset Hub. The rest of the UI will then already work out of the box.

Another change is the progress screen where the current progress needs to be determined differently as there will be a different number and order of steps for each kind of flow (from EVM via Moonbeam or from Asset Hub).

vadaynujra commented 1 week ago

I updated the ticket to reflect only UI changes expected with this epic. The solution for #271 is also now different than initially planned based on internal feedback.

TorstenStueber commented 1 week ago

Showing the Asset Hub USDC with the correct icon in the 'From' asset dropdown

I think we should first clarify this. I notice that some team members take inspiration from Uniswap (e.g., this comment), but I think that we should either emulate Uniswap behavior almost 100% or do it our way, otherwise the UX will be inconsistent.

What I mean are consistent answers to these questions: (1) do we also want to show assets that don't belong to the currently selected network and (2) do we want to show particular icons for assets dependent that include their network?

For uniswap the answers are: (1) yes and (2) yes. We decided to answer (1) with "no". But I think then it is more consistent to also answer both questions with no and don't show the network icon in the asset icon.

(We already started doing so for Polygon USDC but I would roll this back for consistency).

TorstenStueber commented 1 week ago

Showing the Asset Hub logo and network in the network dropdown This is already part of https://github.com/pendulum-chain/vortex/issues/271

Hence, my opinion the only thing left to do in this ticket here is the point

Updating the Progress screen steps

vadaynujra commented 1 week ago

(1) do we also want to show assets that don't belong to the currently selected network and
I don't see the benefit of this. The only pro - the user sees which other assets they could off ramp from other networks. Con - choosing the asset not linked to the network would stop the user from going ahead, potentially adding confusion. My suggestion - NO.
(2) do we want to show particular icons for assets dependent that include their network?
This is not a hard requirement, but given each asset is unique on each network, the same could be also shown at the UI level, to indicate to the user the network they are on. My suggestion - YES.

TorstenStueber commented 1 week ago

If the answer to (2) is yes, shall we not do it consistently then? In that case we should always add the current network logo to the asset logo (only talking about input tokens of course).

vadaynujra commented 1 week ago

Yes, we should be consistent in that case for all networks. For Polygon it's already there, let's continue in the same way.

TorstenStueber commented 1 week ago

I changed the description accordingly and consider this ticket Ready.

pendulum-chain / vortex