chore: refactor explorer links and menu, add explorer in menu

[anxolin]

Summary

Address the issue we didn't have a explorer link in the header

Implementation notes for reviewers

TBH i thought this would be a 5min thing, and it turned out I had to implement a few features in order to make it work.

Let me drive you through the thinking process.

1. Our links are created by configuration of some const here

   cowswap/src/modules/mainMenu/constants/mainMenu.tsx

   Line 108 in b383642

   { id: MainMenuItemId.MORE_ABOUT, title: 'About', url: Routes.ABOUT, iconSVG: IMAGE_INFO },

2. The link to the explorer can't be added as a static type, because the URL changes for example between different networks

3. I decided to make a new type of Menu Item with an arbitrary component, this way we can make any dynamic logic. This new type is:

• cowswap/src/modules/mainMenu/types.ts

  Line 62 in 9f46264

  Item: () => React.ReactNode

• cowswap/src/modules/mainMenu/types.ts

  Line 10 in 9f46264

  CUSTOM_ITEM = 'CUSTOM_ITEM',

4. Then I have to adapt the <ExplorerLink /> component, because it was assumed we always use it for links with an id (a transaction, or address). In this case, i just want to send it to the home page of the explorer

   cowswap/src/legacy/components/ExplorerLink/index.tsx

   Line 56 in 9f46264

   return getExplorerBaseUrl(chainId)

• Now you can see how we have some link types that require ID and some that doesn't

  cowswap/src/legacy/components/ExplorerLink/index.tsx

  Line 27 in 9f46264

  export type Props = PropsWithId | PropsWithoutId

5. Additionally, the link HTML was not good in this case, because i needed to have some image and custom markup for the link, so i gave children support
   

   cowswap/src/legacy/components/ExplorerLink/index.tsx

   Line 72 in 9f46264

   return props.children

6. with all this, implementing the link is just to:

• add the item in the menu (in the right place):

  cowswap/src/modules/mainMenu/constants/mainMenu.tsx

  Line 110 in 9f46264

  kind: MenuItemKind.CUSTOM_ITEM,

• Pass the dynamic custom component

  cowswap/src/modules/mainMenu/constants/mainMenu.tsx

  Line 28 in 9f46264

  function ExplorerMenuLink() {

Most of the changes will be to adapt the link parameters, because the id is now optional, it should be last

EDIT: adding default network

Before @elena-zh opens an issue, i noticed the link was not displayed if the network is unsupported

Now i created a parameter to the ExplorerLink component so it can have a default network

To Test

1 .Check the link in the different networks

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
swap-dev	✅ Ready (Inspect)	Visit Preview	Jul 10, 2023 4:38pm

[elena-zh]

LGTM

[alfetopito]

Approve, just one tiny comment

[alfetopito]

Dead code?