[Profile] Add explorer orders link to Profile page and app menu

[matextrem]

Summary

Fixes #1883

Added a link to Orders explorer from Profile page and App menu

To Test

1. Open profile page

• Connect an account
• You'll see a View all orders link

2. Open app menu clicking on the three dots in the upper right corner

• Connect an account
• You'll see a View all orders link

[github-actions]

• 🔭 GP Swap: Gnosis Protocol v2 Swap UI

[elena-zh]

Hey @matextrem , good job! Now a user may see his/her orders from the menu/profile page.
However, some issues:

1. I'd prefer hiding this empty section from the Profile page when a wallet is not connected/connected to an unsupported network
   
2. Then, it would be good not to show it to a new user when he/she has not placed any order yet. It would be good to start displaying it when at least a user has 1 order in user's order lint in the Explorer
3. 'View all orders' link should navigate a user not only to the https://gnosis-protocol.io/address/... , it should take into account the environment a user is working in:

• cowswap.dev.gnosisdev.com --> protocol-explorer.dev.gnosisdev.com/
• cowswap.staging.gnosisdev.com --> protocol-explorer.staging.gnosisdev.com
• barn.cowswap.exchange --> /barn.gnosis-protocol.io
• cowswap.exchange --> gnosis-protocol.io

4. When connected to xDAI network. View all orders link navigates to the etherscan.io
   https://watch.screencastify.com/v/HOHCEiJ5HThSvzeW1J0p

Also, I have some doubts related to the UI. It seems to me that the section for the link is too big.. Could we make it a bit narrower?

Then, it might be goo to show 'View all orders' link at the top or at the bottom of the list to make it a bit more visible. @alfetopito , @alongoni , @biocom , WDYT?

[alongoni]

Maybe we can show the "View all orders" link here:

[alfetopito]

Great summary @elena-zh. Mati, whatever she said hehe

For 3, there's is a function for that

cowswap/src/custom/utils/explorer.ts

Line 27 in 161d8a7

function _getExplorerBaseUrl(chainId: ChainId): string {

For 4, one could argue that we should always show mainnet orders since the affiliate program only counts them, but I agree with Elena and the expectation would be to link to the correct network, even if there's no tracking of those orders.

The same function above also takes care of that.

And I also like @alongoni 's suggestion. The only concern is how the top of the modal will look like on mobile.
Otherwise, I like the idea and would prefer it there instead of a whole row inside the modal.

[elena-zh]

Hey @matextrem , great job!
Some cases:

1. I would vote for moving 'View all orders' menu item to the bottom to make it more visible
   

2. 'View all orders' menu item is still displayed when it is not displayed in a Profile page to a user with no orders placed:
   

3. There is no 'View all orders' link in the profile page when 'Last updated' date is not empty
   

4. Also, different fonts and text colors for link and the date label look strange a bit.
   

Could we display the link under the page header?

And in different lines in a mobile view

@alongoni , WDYT?

[alongoni]

hey @elena-zh I was thinking to move the "Last updated" indicator next to the "Profile overview" title. In this way the "View all orders" link is more visible there. Do you think it could work better?

cc @alfetopito

[elena-zh]

Hey @matextrem ,

1. still I do not see 'View all orders' link in Profile page for accounts with no orders in Mainnet, but with orders in xDAI/Rinkeby. Btw, 'View all orders' link in the menu is displayed for these cases:
   

Account details: https://protocol-explorer.dev.gnosisdev.com/xdai/address/0xFF714b8b0e2700303eC912BD40496C3997ceEa2b

2. Also, it would be nice to remove a margin before Last updated field in a mobile view to make all lines center-aligned
   
   here the result of removing:
   

3. It would be great if all fields in the lines have the same font-size:

• mobile:
  
• desktop:

@alongoni , I still vote for moving these fields under the page name. But it is my personal point of view, and might be skipped if everyone else thinks differently.

[matextrem]

@elena-zh regarding 1, the thing is we are using /profile request info for showing/not showing orders link and using /trades request info for showing/not showing orders link on the app menu. It will be fixed once this PR is merged

[elena-zh]

@matextrem , #1900 PR takes into account trades in the Mainnet only.
But 'view all orders' link should appear for all networks: XDAI, Rinkeby, if there are any orders there.
Another question is: why does 'view all orders' link works as expected in the menu, but does not in the profile page?

[matextrem]

@elena-zh I'm using /profile request info for profile page and /trades request info for the app menu bar. So you are saying we are using the info given by /trades only ?

[elena-zh]

@matextrem , seems that this one
/api/v1/account/ < account > /orders/?limit=100&offset=0

At least, it works from here

@alfetopito , am I correct?

[alfetopito]

Let's see, trying to address all comments in one place

1. To check whether to display the View all orders link

Here we are looking at orders rather than trades, so use the function getOrders with limit=1, similar to how hasTrades function does it

2. Where should View all orders point to

To Explorer's /address/<address> endpoint.
Simply use this function

cowswap/src/custom/utils/explorer.ts

Line 43 in 2fc6c81

export function getExplorerAddressLink(chainId: ChainId, address: string): string {

3. View all orders placement on mobile

Looking great! Besides Elena's comments I have nothing to add

4. View all orders placement on desktop

I'm not too keen on swapping the position with last updated as suggested.
Maybe Elena's idea of putting it on another row addresses it better?

I'd like to invoke @biocom 's Design powers to give his input and help us settle the matter.

[anxolin]

Great to see we are adding the links

I could see the two things in the right corner, view orders, last update (below), from the ideas is the one that seems better.

Anyways, I wanted just to mention that we have a menu problem 😅
This need a full redesign, not everything there is equally important, and it's hard to use that menu.

Maybe not part of this PR, but I wouldn't add a new link unless we redesign it to acomodate better the content.

[anxolin]

I will expand on my last comment regarding the menu.

I see that Discord, Twitter, Github could be just some nice icons that are located at the top or bottom of the menu
The links could be in sectors, where the About, Faq, Docs would be the highlight. Maybe even the stats, not sure.

Then the games could be in another section and presented differently.

[elena-zh]

@anxolin , I opened a new issue for the menu reorganizing #1956

[elena-zh]

Works nicely in terms of functionality.
In terms of the menu, I have created a separate issue for this (mentioned above).
Still we need to find the final decision in terms of the link displaying on the form.

[fairlighteth]

I think it makes sense to put the 'view all orders' in the right corner:

[elena-zh]

Changes LGTM!

[alfetopito]

👍