Update the progress screen

[prayagd]

Context

Currently there is a constantly loading animation on the progress screen of the vortex app, as per the tech team we can now update the screen based on the txn executed on the backed for ex. Bridge completed, XCM completed etc etc

Requirements

Note

• The design is not ready will update once the it is.

[prayagd]

@ebma @TorstenStueber Can you please list down in how many step this process can be broken down? Is it?

• Bridge completed
• XCM completed
• Forex AMM swap completed
• Redeem completed
• Transfer to Anchor stellar address

Would it be 5 steps?

[TorstenStueber]

Display the phase below the string "Your transaction is in progress.".

@prayagd we have the following 11 phases:

• prepareTransactions: prepare all transactions
• squidRouter: Axelar bridge and Moonbeam
• pendulumFundEphemeral: fund ephemeral account on Pendulum
• subsidizePreSwap (will come with https://github.com/pendulum-chain/vortex/pull/97): subsidize missing USDC.axl amount
• nablaApprove: Nabla approval transaction
• nablaSwap: Nabla swap transaction
• subsidizePostSwap (will come with https://github.com/pendulum-chain/vortex/pull/97): subsidize missing EURC amount
• executeSpacewalkRedeem: Spacewalk
• pendulumCleanup: Cleanup Pendulum ephemeral account
• stellarOfframp: Offramp on Stellar
• stellarCleanup: Cleanup Stellar ephemeral account

Shall we display each of them? Then I suggest we write something like "3/11: Fund Pendulum ephemeral account".

@prayagd can you define the sentence to display for each phase?

[prayagd]

Shall we display each of them? Then I suggest we write something like "3/11: Fund Pendulum ephemeral account".

@TorstenStueber I suggest we only go with the numbers i.e 3/11 and no text, the text would confuse users and personally think its not a value add, wdyt?

[TorstenStueber]

I actually think that it does add value as the user will know what is actually happening. I think it is more interesting this way for stakeholders we demo it to...

[TorstenStueber]

I will go ahead with this ticket. @prayagd I suggest the following wording, feel free to change it:

• prepareTransactions: Prepare transactions
• squidRouter: Axelar bridge
• pendulumFundEphemeral: Create Pendulum ephemeral account
• subsidizePreSwap: Compensate swap risk
• nablaApprove: Forex AMM approval
• nablaSwap: Forex AMM swap
• subsidizePostSwap: Compensate swap risk
• executeSpacewalkRedeem: Spacewalk bridge
• pendulumCleanup: Cleanup Pendulum ephemeral account
• stellarOfframp: Stellar Offramp
• stellarCleanup: Cleanup Stellar ephemeral account

[prayagd]

cc @Klausdmz

[vadaynujra]

@prayagd @TorstenStueber the user requirement here is:

• User wants to know the overall progress of their transaction i.e. how long they need to keep the tab open for and when they can expect the money to reach their bank account
• User isn't interested in the detailed backend on-chain magic happening in the background - this is what we refer to as 'network abstraction'

So while this might be fine for the demos, we don't don't this detailed breakdown for the public version of the app as it Is too much information for the user.

[ebma]

@vadaynujra I understand why you would like to hide it, but like @TorstenStueber I would also be interested in reading a description of the current step in the process. Maybe it's because we are tech people but I would assume that there are more (possibly technically inclined) users out there who are curious to see what's happening and what exactly is taking so long. If I use an application and see a stuck progress bar, having some info might make me able to troubleshoot it myself instead of having to reach out to support.

How about we hide the info by default in an optional drop-down or similar? So that it is available but hidden by default.

[vadaynujra]

Great early user feedback @ebma. I think it goes down to the persona we want to target. I would also assume that the majority of freelancers are devs and would find value in knowing the backend steps, and maybe even want to troubleshoot themselves, but given that the business requirement is to keep it simple and only show the progress bar (start and end point), my understanding is that we are looking to target the lesser tech-savvy freelancer audience. Your suggested solution should work and cater to both types of audiences. @prayag could you share the current implemented and suggested (by Marcel) solution with the stakeholders for awareness.

[TorstenStueber]

Maybe we can just shortcut the discussion here: my PR is already implemented and ready to be reviewed. I implemented this before Klaus provided designs. I showed here how it looks like. You can also test it in the deploy preview.

This is a minimal code change. Shall we not just merge it and then it is done?

[TorstenStueber]

The way it is implemented now is that the text will always be shown and is not optional. We can add more fine-grained control later if we deem necessary.