Claim available on profile

[alfetopito]

Summary

Depends on #2062

Shows Claimable amount on Profile page

To Test

1. Load this test PK on Rinkeby 0xdd0cd0b5ab9055ca8b4ac7fcc6c54d179f38e9c9f59b52d22b4022fbb672187a
2. Go to profile page

• It should show you how much this account can claim
• It should show you a button to the claim page
• If you don't have anything to claim, it won't be visible (duh)
• Networks where vCOW is not deployed (anything but Rinkeby) will not show you anything

Note horrible styled, meant to only connect the dots. Styling work desperately needed

[github-actions]

• 🔭 GP Swap: Gnosis Protocol v2 Swap UI

[anxolin]

Light approve.
My initial thinking was that i was not sure if we wanted to do this. It was not part of the initial plan at least. Since it's done, we can leave it, but this will require someone to style the profile a bit better.

The whole profile could use a bit of redesign, but im happy if at least we present the balance and claimable balance a bit better and we keep in mind to do a deeper redesign at a later point.

[elena-zh]

I think, the idea is great to show a user an amount of available to claim tokens.
Besides, in the future I'd add something like a tooltip with claimable tokens expiration date or so.
Btw, how the claimable amount is calculated? Will it show only airdrop tokens?
And what if a user has an investment opportunity? Will we show this info?

Getting back to the current implementation, I agree on the point that the UI looks a bit horrible.

1. Balance field becomes too big when there are no unclaimed tokens
   

2. The fields are jumping when Profile page is loading

3. Mobile view needs to be adjusted
   
   

4. Text in the Unclaimable tokens section could look better (add margins, etc.)
   

[alfetopito]

Btw, how the claimable amount is calculated? Will it show only airdrop tokens? And what if a user has an investment opportunity? Will we show this info?

Everything that's still claimable summed up. Includes both airdrop and investment opportunities, given that their time windows are still open.
For more details the user should go to the claim page where the breakdown is displayed.

Getting back to the current implementation, I agree on the point that the UI looks a bit horrible.

Yeah, that's what I meant :D
Design work desperately needed and not intended to be part of this PR

[alfetopito]

Light approve. My initial thinking was that i was not sure if we wanted to do this. It was not part of the initial plan at least. Since it's done, we can leave it, but this will require someone to style the profile a bit better.

Of course, styling to be done for sure - if we decided to keep this.

As for why, this is a compromise for not showing the value on top and for showing the vCOW balance on this page.

What I mean is:

1. Uniswap and our initial plan was to show the claimable balance on top but for various reasons we settled only on the button to always be displayed.
2. We will show this vCOW balance in this page, and people who might not have checked the claim page yet (🤷) would see here in the same place whether they have something claimable

Code wise, it's ready. Style wise of course not.

Is this reasoning strong enough to justify it?
What do you all think @gnosis/gp-frontend @annamsgeorge

[W3stside]

nice! bit of a margin issue:

[anxolin]

Is this reasoning strong enough to justify it?

sure :)
im not against it, that's a good reasoning. It was just in the train of thought of removing some optionals. Happy to include it.

if this doens't add to much distraction, im up for it 👌

[anxolin]

@alfetopito i change your base branch to develop

[alfetopito]

I'm leaving this on-hold until the other stuff is ready

[alfetopito]

Let's not go with this