Header/Menu improvement (waterfall PR FINAL)

[fairlighteth]

Summary

This branch improve-header-12 is the last in the waterfall PR to improve the header/menu for all viewports:

• Addresses issue Create new Menu / Header #570
• Removes decimals for the shown COW balance
• For small/mobile devices, it shows a fixed footer menu, with the COW button and the connected account.
• Introduces a drop down menu structure/component. Incl. mobile (hamburger) menu support.

Screen.Recording.2022-05-30.at.16.13.24.mov

Screen.Recording.2022-05-30.at.16.59.46.mov

Screen.Recording.2022-05-30.at.16.13.05.mov

Screen.Recording.2022-05-30.at.16.12.36.mov

Screen.Recording.2022-05-30.at.16.12.05.mov

Screen.Recording.2022-05-30.at.16.11.29.mov

Screen.Recording.2022-05-30.at.17.01.07.mov

Todo for future PRs:

• Style the network selector for mobile/small viewports. Specifically to have it be an overlay menu covering ~70% of the viewport.
• Appzi button probably should not overlay the mobile main menu.

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[github-actions]

• 🔭 GP Swap: CoW Protocol v2 Swap UI

[fairlighteth]

Got a failed cypress test:

/home/runner/work/cowswap/cowswap/cypress-custom/screenshots/swapMod.ts/Swap (mo (1920x1080)
d) -- can enter an amount into output

[alfetopito]

Small issue with desktop when the network menu is collapsed

Screen.Recording.2022-05-31.at.10.31.15.mov

Also, isn't the threshold for collapsing the menu too harsh?

There's plenty of space to show it with that size IMO

[fairlighteth]

Small issue with desktop when the network menu is collapsed

Good find there. I think I'll apply a simple fix for now, until I make it an actual 'mobile' like menu.

There's plenty of space to show it with that size IMO

In this state you showed me, yes there's space. But a few things to consider:

• In the future the menu can grow in number of items
• Your (v)COW balance here is 0, but theoretically could have multiple digits.
• Your connected wallet could have a longer ENS name
• Your connect wallet ETH balance could have multiple digits

All of this can be optimized for individually (eg ellipsis or number abbreviation), but keeping a safe margin here seems sensible from that point of view.