Add vCOW balance to Profile

[alfetopito]

Description

Add vCOW balance to Profile

Crude wireframe:

Proposal

Split page into 2 sections:

1. Profile: containing only vCOW balance for the connected network
2. Affiliate Program: what we already have

When no vCOW balance, don't show anything on the Profile section

Good to have
When there's a vesting, show a dropdown with additional details

Additional context

• Data will be mocked for now, later they will read from a hook we provide
• While only the mocked data is available, show it only on dev, prs and localhost. Do not show on staging, barn nor prod. (There are flags in the code to identify the current environment)
• Wireframes: https://www.figma.com/file/DPp3awAUcqpwpV1dD4wFB9/CoW-claiming?node-id=33%3A4161

[anxolin]

The wireframes for the menu where it explains the voting power doesn't have very good numbers. Also, the claim button we won't need that for now. I wouldn't do it.

[alongoni]

Hey, here is a design for this. It's based on the new branding made by @michelbio:

[elena-zh]

Hey @alongoni , how is it going to be displayed in a mobile view?
Also, may be we could decrease a bit this balance section? Personally to me it looks too big and draws a lot of attention.

[alongoni]

Design Updated:

cc/ @elena-zh @biocom @alfetopito

[alongoni]

🧑‍🔧Experimental WIP🧑‍🔧. Just trying another approach to this UI but without the dropdown. I was thinking maybe a dropdown it's no needed here.

cc @elena-zh @biocom @anxolin

[elena-zh]

Hey @alongoni , nice approach!
But I'd second the previous option due to:

• all amounts will be displayed in one place ( in dropdown),
• again, a bit not clear how these amounts will be displayed in a mobile screen

[alfetopito]

For now I'd stick with the first version, but anyway, we'll at first focus on implementing only the balance.
The details can keep being iterated on.

I'm happy with how it looks so far 👍