Deposit assets from trade page

[jonator]

Figma discussion

We should remove the roadblock for users loading the app for the first time having to go to the assets page to deposit before the go to the trade page to swap.

[jonator]

6/28 sprint planning -

Waiting on design work @victortokaito

[victortokaito]

Trade UI: Deposit function for '0 Balances'

[milesz8]

Is there a design you want implemented? I can't access the figma discussion. Otherwise I have some ideas

I think you might just have to change the permissions.

[jonator]

@milesz8 don't think we have a design for this yet. Or decided we want to do this.

We're currently undergoing a frontend redesign. May want to look into another issue for now.

[jonator]

One idea- what if when a user has a "from" asset selected with a positive balance on the counterparty chain, we can have the button change to deposit? They can click that, then the UI is locked until the IBC transfer completes, then the button says swap. Seems like a simple workflow that doesn't require another control @milesz8.

Perhaps to further clarify that a deposit is happening, the "to" box can have a lower opacity to de-emphasize the output asset and further convey that they won't be receiving that asset just yet.

Caveat- we may first have the button say "Approve counterparty chain" if they haven't given Osmosis Frontend access to query balances on the counterparty.

[jonator]

9/29 meeting update -

We decided the best design would be to link to the assets page from the swap page if they have a 0 balance in Osmosis for the "from" asset. This would help inform users of the assets page, and would serve as a tutorial for how assets are deposited, withdrawn, and displayed.

It would work as follows from the swap page:

1. If a user has a 0 Osmosis balance for the asset in the "from" page, the swap button (or a link near it, design TBD) would show: "Deposit x ASSET from network" if they've approved the counterparty in Keplr, or "Deposit from network" otherwise
2. If they click the deposit button from the swap widget, we'd link to the assets page with query parameters in the URL to determine which transfer modal to have automatically opened.
3. User can carry out standard transfer from the transfer modal.
4. (Optional/stretch) when the transfer completes we'd keep the modal open and the "Transfer" button would be replaced with a "Back to Swap" button to let the user go back to the swap page with the query parameters populated to the relevant assets. (We've also considered having a link to Swap page in the success toast message)

[victortokaito]

'Begin a deposit from the swap page' Prototype:

• Given that a user has assets on another network, clicking deposit links them to the appropriate transfer modal.
• Details are filled in. User just has to be along for the ride as the modal navigates them through the steps.
• Helps directly onboard a user to making their first IBC transfer!
• link to figma frame

[jonator]

Added benefit of being able to link to a transfer window. The correct query params should be set when the transfer modal is opened.