Add connect wallet UI

[olszewskimar]

Your use case

Acceptance criteria:

Goal: We want to simplify the user onboarding UX by moving essential interactions out of the bot communications with integrated UI into the chat platform

• [ ] add a button to the Chat UI to connect the matrix account with your Superhero Wallet account
• [ ]
• [ ] should be similar to the connect wallet UI from SH DEX (https://aepp.dex.superhero.com/)
• [ ]
• [ ] modal should give you the same options as in the DEX:

Have you considered any alternatives?

No response

Additional context

Related to -> https://github.com/superhero-com/matrix-defi-bot/issues/229

[olszewskimar]

Comment from @onvisions

UX improvement suggestion. See the recording and the Figma project page. Connector UI display element. Connect/Disconnect + connected wallet address display + "Connecting" state. Animated transitions between states. Prototype user flow and interactions:

https://private-user-images.githubusercontent.com/12225410/301362095-253f9b06-2634-4d94-a5a1-488f7aacc945.mp4

Figma reference: https://www.figma.com/file/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?type=design&node-id=29851-313739&mode=design&t=robwIdvrmUWnL214-0

Mobile design to be provided shortly after next iteration with Product owner ( @michele-franchi) and confirmation of current UX improvement suggestion. The same UI connector display component is to be used for mobile. Exact placing in the UI is to be determined but it makes sense to be exactly where it was specified in the user story above created by @paolomolo.