Deposit flow without wallet already connected

[ckpringle]

Story

As a new user of vega I want to immediately see how to make a deposit and start trading from the UI So that I can get started without having to find the right place to go

Acceptance Criteria

• [ ] There is a call to action to deposit collateral "deposit collateral" when there is no wallet connected , on the collateral tab, with intro copy e.g. "Deposit funds & start trading."
• [ ] The collateral tab is selected by default when you first come to console
• [ ] When the CTA is pressed, the deposit journey handles connecting Ethereum and vega wallets (from (Ethereum address) - to (Vega key))

Tasks

• [ ] Work out how to handle deposits in the UI when connecting a wallet is also in a modal (how do we avoid modal on top of modal, are the modals sequential? Something else?)
• [ ] Sketch out detailed flow
• [ ] Implement
• [ ] Review
• [ ] Test
• [ ] etc.

Sketch

[PeteWilliams]

I've realised that the first deposit flows outlined so far missed out the step of granting permission for Vega to access the given asset in your Ethereum wallet.

I've added this into the flow and it does make it look quite lengthy… so I've tried to streamline it slightly, by merging some modals into single steps. There's also some questions about whether we can skip any of the ethereum/vega wallet connection screens by detecting running wallets.

https://www.figma.com/file/K49Nx7XfocShhHcwwQzQkm/Console-V2?node-id=4029%3A38788

[pennyandrews]

We need to look at this again in the context of the toasts work

[neildawson]

@mattrussell36 and I agreed the third acceptance criterion, about connecting wallets, is already satisfied. Pete's concept would be an improvement, but it would be a separate ticket.

[neildawson]

Updated concepts on the Miro board after review with @mattrussell36 this afternoon:

• collateral tab and its sibling tabs
• ticket tab

I've crossed out the stuff we parked or dismissed, and annotated with rationale. It will need some visual design treatment. Note that for proposal #4 for the ticket tab, Matt suggested we use (and perhaps update) the following UI component (the yellow bordered box):

[neildawson]

As mentioned in my last comment, @mattrussell36 and I decided to split the work on the deposit entry points from work on the deposit form itself.

I've removed mention of the entry points from this ticket, and created a new one: https://github.com/vegaprotocol/frontend-monorepo/issues/2762

This ticket can remain in the backlog as a record of Pete's work, for future prioritisation.

@asiaznik, you were assigned to this ticket, so I've assigned you to the new one. If this doesn't make sense, let's have a quick chat to clarify!

[pennyandrews]

@neildawson can we get one last check on this one please