Profile page: Add vCOW swap feature cards #2564

fairlighteth · 2022-03-18T15:48:33Z

Summary

🡒 Note: This is part of a waterfall PR series 🡐

Adds styled component (cards) to support the vCOW/COW token balance display and conversion.

Desktop

Tablet/Medium resolutions

Mobile/small resolutions

No vCOW card container: Governance card falls in to place:

Only the COW balance:

Just to demonstrate the sizing flexibility of the card elements.

Light mode

Todo

Style the unvested/vested tooltip further + light mode [?] icon
Center page titles (Profile). Need to check as this affects all content pages.
Style/create the governance card
Cross browser/device tests

github-actions · 2022-03-18T15:56:00Z

🔭 GP Swap: CoW Protocol v2 Swap UI

fairlighteth · 2022-03-18T17:45:07Z

Noticed on medium resolution, the COW balance token icon position/margin could be improved. Will handle in a up following PR (cc @elena-zh )

alfetopito · 2022-03-18T17:52:48Z

Noticed on medium resolution, the COW balance token icon position/margin could be improved. Will handle in a up following PR (cc @elena-zh )

You mean this, right?

elena-zh · 2022-03-21T12:46:57Z

Hey @fairlighteth , great changes!
And thanks for making me aware of the issue about token icon position/margin as I wanted to report it

What I'd like to add, is that it would be nice to make alignment of all components more or less the same in a middle-screen devices. Look:

Another proposal I'd like to make, is to re-use a component from the bottom affiliate forms to show Vested tokens amount. WDYT?

Just to confirm: if a user does not have (v)COW tokens on the balance/not connected, we will show a regular Profile page without newly added components, right?

I have to notice, that I was not able to test cases when a user does not have vCOW card container, or COW balance only, so I will retest it later.
All the rest changes LGTM (tested in Win10+Chrome, FF, Brave, iOS 15.3 +Chrome, Androind 10+Chrome).

* Add governance card banner. * Governance banner update styles.

fairlighteth · 2022-03-21T16:39:31Z

Updated the tooltip icons to be dynamically use the right dark/light mode colors. Also updated the (swap) container background color to match the others below:

Screen.Recording.2022-03-21.at.16.35.35.mov

fairlighteth · 2022-03-21T17:19:05Z

@elena-zh Made some updates to properly align elements for different viewports:

fairlighteth · 2022-03-21T17:21:40Z

Just to confirm: if a user does not have (v)COW tokens on the balance/not connected, we will show a regular Profile page without newly added components, right?

@elena-zh I think at the very least we show the COW balance + governance banner. I think it's beneficial to show both these to make users more aware of COW/Governance. Perhaps we could even add a button 'Buy COW token' when your balance is 0. Obviously this can only be implemented once vCOW is swappable.

the vCOW / convert card we would not show, unless you have >0 vCOW balance.

alfetopito · 2022-03-21T22:59:53Z

BTW, latest changes are failing the build

Just comment out/remove those variables

fairlighteth · 2022-03-22T10:22:58Z

@alfetopito Right, forgot that it would break the build, fixed now!

elena-zh · 2022-03-22T11:17:01Z

Hey @fairlighteth , changes LGTM now!
The only thing I'd like to mention, that it would be nice to make formatting of these amounts locale dependable

Also, it would be nice to show full amounts on hover as we do for all amounts across the app

But I feel that everything I have mention is our of scope of the current task.

Thanks!

fairlighteth · 2022-03-22T11:24:06Z

@elena-zh Thanks for reviewing again:

The only thing I'd like to mention, that it would be nice to make formatting of these amounts locale dependable
Also, it would be nice to show full amounts on hover as we do for all amounts across the app

Yes agreed, let's keep this in mind when the actual balances are connected (now hard coded).

elena-zh · 2022-03-22T11:29:17Z

@fairlighteth , I have created #2571 task for this

anxolin

Look great to me!

I only have two tiny nitpicks, which you can ignore.

One is, that i think in responsive, is more relevant the COW than vCow so it should be higher:

The other, is I kind of liked more your original proposal for the background of the vested amount. I agree with making it coherent, but maybe your proposed background was nicer than the one we had for the affiliate.

fairlighteth · 2022-03-22T14:14:35Z

One is, that i think in responsive, is more relevant the COW than vCow so it should be higher

Yes, I can see that. I think I'll add a custom 'order' prop on an upcoming PR for the vCOW container.

The other, is I kind of liked more your original proposal for the background of the vested amount. I agree with making it coherent, but maybe your proposed background was nicer than the one we had for the affiliate.

Agreed. Didn't want to add too many changes on this PR and just make it coherent instead. Will adjust this in an upcoming PR for all elements on this page.

* Profile page: Add vCOW swap feature cards (#2564) * Style vCOW swap cards. * Style vCOW swap cards. (#2565) * Add governance card banner. (#2566) * Add governance card banner. * Governance banner update styles. * Make question icon use dynamic dark/light mode colors. * Center content properly cross devices. * Dummy values. * Disable unused vars * Cleanup obsolete color * Styling of vesting breakdown tooltip.

* Profile page: Add vCOW swap feature cards (#2564) * Style vCOW swap cards. * Style vCOW swap cards. (#2565) * Add governance card banner. (#2566) * Add governance card banner. * Governance banner update styles. * Make question icon use dynamic dark/light mode colors. * Center content properly cross devices. * Dummy values. * Disable unused vars * Cleanup obsolete color * Styled governance banner and inner card container. * Fix code style issues with Prettier * Style update (trigger build) Co-authored-by: Lint Action <lint-action@samuelmeuli.com>

* Profile page: Add vCOW swap feature cards (#2564) * Style vCOW swap cards. * Style vCOW swap cards. (#2565) * Add governance card banner. (#2566) * Add governance card banner. * Governance banner update styles. * Make question icon use dynamic dark/light mode colors. * Center content properly cross devices. * Dummy values. * Disable unused vars * Cleanup obsolete color * Connect UI and vCow data * Added PR changes * Remove some previous change * Added swapAll abi (#2576) Co-authored-by: fairlight <31534717+fairlighteth@users.noreply.github.com>

* Update FAQ to reflect Token Launch This PR pushes a new content section from lines 559 - 627 that addresses questions related to the token launch. I have tried format everything as good as I possibly know/can, apologies if it needs to be reworked. Questions are: 562 - Does CowSwap Have a token? 580 - Is there a proposal to make vCOW transferrable? 585 - what is the purspose of the COW tokens? 605 - what was the criteria for the token airdrop? * Fix code style issues with Prettier * Fix building error * Add space * Profile page: Add vCOW swap feature cards (#2564) * Style vCOW swap cards. * Style vCOW swap cards. (#2565) * Add governance card banner. (#2566) * Add governance card banner. * Governance banner update styles. * Make question icon use dynamic dark/light mode colors. * Center content properly cross devices. * Dummy values. * Disable unused vars * Cleanup obsolete color * Moving custom components to mod file to avoid circular dependencies/lazy loading issues (#2580) Co-authored-by: Leandro <leandro.boscariol@gnosis.io> * Remove isClaiming flag (#2586) * Remove lint warn (#2587) * Update index.tsx * Fix code style issues with Prettier * Split and refactor FAQ * Update FAQ to reflect Token Launch (#2540) * Update FAQ to reflect Token Launch This PR pushes a new content section from lines 559 - 627 that addresses questions related to the token launch. I have tried format everything as good as I possibly know/can, apologies if it needs to be reworked. Questions are: 562 - Does CowSwap Have a token? 580 - Is there a proposal to make vCOW transferrable? 585 - what is the purspose of the COW tokens? 605 - what was the criteria for the token airdrop? * Fix code style issues with Prettier * Fix building error * Add space * Update index.tsx * Fix code style issues with Prettier * Add punctuantions Co-authored-by: Lint Action <lint-action@samuelmeuli.com> Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> * Fix links * Add footer * Add footer to index too * Update metrics * Fix internal links * Hide back in home * Link to FAQ * Correct year * Fix typo. Fixes #2067 * Re-style FAQ menu. * Title styles. * Cleanup console.log * Fix merge and style back to top + misc. * Text updates. * Fix code style issues with Prettier * Remove click events. * Fix lint issue. * Remove is claim enabled Co-authored-by: Alex V <80408352+avsavsavs@users.noreply.github.com> Co-authored-by: Lint Action <lint-action@samuelmeuli.com> Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> Co-authored-by: Leandro Boscariol <alfetopito@users.noreply.github.com> Co-authored-by: Leandro <leandro.boscariol@gnosis.io> Co-authored-by: w3stside <david.sato64@gmail.com>

* Split refactor faq (#2592) * Update FAQ to reflect Token Launch This PR pushes a new content section from lines 559 - 627 that addresses questions related to the token launch. I have tried format everything as good as I possibly know/can, apologies if it needs to be reworked. Questions are: 562 - Does CowSwap Have a token? 580 - Is there a proposal to make vCOW transferrable? 585 - what is the purspose of the COW tokens? 605 - what was the criteria for the token airdrop? * Fix code style issues with Prettier * Fix building error * Add space * Update index.tsx * Fix code style issues with Prettier * Split and refactor FAQ * Fix links * Add footer * Add footer to index too * Update metrics * Fix internal links * Hide back in home * Link to FAQ * Correct year * Fix typo. Fixes #2067 Co-authored-by: Alex V <80408352+avsavsavs@users.noreply.github.com> Co-authored-by: Lint Action <lint-action@samuelmeuli.com> * Re-style FAQ menu. (#2611) * Update FAQ to reflect Token Launch This PR pushes a new content section from lines 559 - 627 that addresses questions related to the token launch. I have tried format everything as good as I possibly know/can, apologies if it needs to be reworked. Questions are: 562 - Does CowSwap Have a token? 580 - Is there a proposal to make vCOW transferrable? 585 - what is the purspose of the COW tokens? 605 - what was the criteria for the token airdrop? * Fix code style issues with Prettier * Fix building error * Add space * Profile page: Add vCOW swap feature cards (#2564) * Style vCOW swap cards. * Style vCOW swap cards. (#2565) * Add governance card banner. (#2566) * Add governance card banner. * Governance banner update styles. * Make question icon use dynamic dark/light mode colors. * Center content properly cross devices. * Dummy values. * Disable unused vars * Cleanup obsolete color * Moving custom components to mod file to avoid circular dependencies/lazy loading issues (#2580) Co-authored-by: Leandro <leandro.boscariol@gnosis.io> * Remove isClaiming flag (#2586) * Remove lint warn (#2587) * Update index.tsx * Fix code style issues with Prettier * Split and refactor FAQ * Update FAQ to reflect Token Launch (#2540) * Update FAQ to reflect Token Launch This PR pushes a new content section from lines 559 - 627 that addresses questions related to the token launch. I have tried format everything as good as I possibly know/can, apologies if it needs to be reworked. Questions are: 562 - Does CowSwap Have a token? 580 - Is there a proposal to make vCOW transferrable? 585 - what is the purspose of the COW tokens? 605 - what was the criteria for the token airdrop? * Fix code style issues with Prettier * Fix building error * Add space * Update index.tsx * Fix code style issues with Prettier * Add punctuantions Co-authored-by: Lint Action <lint-action@samuelmeuli.com> Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> * Fix links * Add footer * Add footer to index too * Update metrics * Fix internal links * Hide back in home * Link to FAQ * Correct year * Fix typo. Fixes #2067 * Re-style FAQ menu. * Title styles. * Cleanup console.log * Fix merge and style back to top + misc. * Text updates. * Fix code style issues with Prettier * Remove click events. * Fix lint issue. * Remove is claim enabled Co-authored-by: Alex V <80408352+avsavsavs@users.noreply.github.com> Co-authored-by: Lint Action <lint-action@samuelmeuli.com> Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> Co-authored-by: Leandro Boscariol <alfetopito@users.noreply.github.com> Co-authored-by: Leandro <leandro.boscariol@gnosis.io> Co-authored-by: w3stside <david.sato64@gmail.com> Co-authored-by: Anxo Rodriguez <anxolin@gmail.com> Co-authored-by: Alex V <80408352+avsavsavs@users.noreply.github.com> Co-authored-by: Lint Action <lint-action@samuelmeuli.com> Co-authored-by: fairlight <31534717+fairlighteth@users.noreply.github.com> Co-authored-by: Leandro Boscariol <alfetopito@users.noreply.github.com> Co-authored-by: Leandro <leandro.boscariol@gnosis.io> Co-authored-by: w3stside <david.sato64@gmail.com>

Style vCOW swap cards.

65d8da4

fairlighteth requested review from a team March 18, 2022 15:48

Style vCOW swap cards. (#2565)

8742bb3

alfetopito approved these changes Mar 18, 2022

View reviewed changes

fairlighteth and others added 2 commits March 21, 2022 15:40

Add governance card banner. (#2566)

340a812

* Add governance card banner. * Governance banner update styles.

Make question icon use dynamic dark/light mode colors.

bab6979

Center content properly cross devices.

e967317

biocom added 2 commits March 21, 2022 17:43

Resolve merge conflict.

ad542c8

Dummy values.

afb52d1

Disable unused vars

d6b1aa5

elena-zh approved these changes Mar 22, 2022

View reviewed changes

elena-zh mentioned this pull request Mar 22, 2022

Make (v)COW balances formatting locale dependable + show full amounts on hover #2571

Open

elena-zh mentioned this pull request Mar 22, 2022

Show real vCow and Cow data on profile page #2568

Merged

Cleanup obsolete color

776f9a1

anxolin approved these changes Mar 22, 2022

View reviewed changes

fairlighteth merged commit baf2293 into develop Mar 22, 2022

alfetopito deleted the convert-vcow branch March 22, 2022 22:13

elena-zh mentioned this pull request Mar 23, 2022

Do not show vCOW card to a not connected user/user with 0 (v)COW balance #2579

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Profile page: Add vCOW swap feature cards #2564

Profile page: Add vCOW swap feature cards #2564

fairlighteth commented Mar 18, 2022

github-actions bot commented Mar 18, 2022

fairlighteth commented Mar 18, 2022

alfetopito commented Mar 18, 2022

elena-zh commented Mar 21, 2022

fairlighteth commented Mar 21, 2022 •

edited

Loading

fairlighteth commented Mar 21, 2022

fairlighteth commented Mar 21, 2022

alfetopito commented Mar 21, 2022

fairlighteth commented Mar 22, 2022

elena-zh commented Mar 22, 2022

fairlighteth commented Mar 22, 2022

elena-zh commented Mar 22, 2022

anxolin left a comment •

edited

Loading

fairlighteth commented Mar 22, 2022

Profile page: Add vCOW swap feature cards #2564

Profile page: Add vCOW swap feature cards #2564

Conversation

fairlighteth commented Mar 18, 2022

Summary

Todo

github-actions bot commented Mar 18, 2022

fairlighteth commented Mar 18, 2022

alfetopito commented Mar 18, 2022

elena-zh commented Mar 21, 2022

fairlighteth commented Mar 21, 2022 • edited Loading

fairlighteth commented Mar 21, 2022

fairlighteth commented Mar 21, 2022

alfetopito commented Mar 21, 2022

fairlighteth commented Mar 22, 2022

elena-zh commented Mar 22, 2022

fairlighteth commented Mar 22, 2022

elena-zh commented Mar 22, 2022

anxolin left a comment • edited Loading

Choose a reason for hiding this comment

fairlighteth commented Mar 22, 2022

fairlighteth commented Mar 21, 2022 •

edited

Loading

anxolin left a comment •

edited

Loading