[Explorer] Custom hook for getting explorer data for BlockExplorerLink component when it is not a gpv2 tx

[matextrem]

Summary

Closes #857

Added a custom hook useTxOrderExplorerLink that returns the data needed to be used in BlockExplorerLink component in case it is not a Gpv2 tx otherwise returns an empty object.

To Test

Since tx table is not ready yet, there's no UI to reproduce this behaviour. You can test it by importing useTxOrderExplorerLink from hooks/useGetOrders and use it with a tx hash. i.e:
const explorerLinkData = useTxOrderExplorerLink('0xd51f28edffcaaa76be4a22f6375ad289272c037f3cc072345676e88d92ced8b5')

And then use this data in BlockExplorerLink component:

<BlockExplorerLink {...explorerLinkData} />

[github-actions]

• 🔭 Explorer: Explorer test app
• 🔒 Safe Swap App: Trade test app (add to your safe apps)
• 📈 Trade: Trade test app
• 📚 Storybook: Component stories

[elena-zh]

Hey @matextrem , can we finish this task?

[matextrem]

@elena-zh Sure. Do we have a design for this? Where will the link be located?

[henrypalacios]

I'm in doubt as to how to evaluate this PR, since I'm not sure where this hook should be implemented in the first instance.

Would be in the link from the detail view?

Maybe @alfetopito can clarify it.

[elena-zh]

@matextrem , the only thing I could clarify is that we have already discussed it in the 'parent' issue: #857 (comment)

[matextrem]

@elena-zh regarding that comment, the logic is already done. The only thing left is where to show the Explorer link.

[alfetopito]

This should be used when searching for a tx by hash.

The steps are basically:

1. Search by a string
2. If it matches txHash regex, checks whether it's a protocol tx
3. If it is, show the tx view
4. Else, check from which network it is (this hook)
5. If it matches any network, return a link to etherscan for given tx
6. Else, search not found.

For example, if I search right now for a non-protocol tx I get a not found https://explorer.cow.fi/search/0x46abe93685cc328f908f44695cd2cc2e65bf75c45b69fc787867468e8735653c
This hook enhances it a little bit by offering the link to the correct block explorer of an existing tx

[alfetopito]

Regarding where to display it, I think the appropriate place is in the not found page with a sentence like:

This is not a CowProtocol transaction.
See it in the <a>block explorer</a>

Feel free to propose a better sentence

[elena-zh]

Hey @matextrem , great changes!

However, I'd move the message outside the search block area

Besides, I'd add an etherscan icon to the link like we do for the all the rest external links in the Explorer

and showed 'etherscan' instead of the cropped hash for TxHash from Etherscan/Rinkeby, and 'blocscout' for TxHash in GC.

Also, I noticed that the app navigates always to Etherscan for external transactions: I searched for GC TXHash, and was navigated to the 404 page in Etherscan:

I searched for this TxHash https://blockscout.com/xdai/mainnet/tx/0xb97a644f31364f47efa2a8e3cb98b2c6ed29846aa6a71f514087523b1f2df845
The same is for Rinkeby transactions.

Could you please fix it?

[elena-zh]

Hey @matextrem , looks much-much better!
However, the app does not offer me a link to the Blockscout when I search for an external transaction:

Also, it would be nice to increase margin between lines in the mobile view:

[matextrem]

@elena-zh I've just tested it and it is working for me. Maybe you have it cached?

Besides, I'm working on your feedback regarding styling.

[elena-zh]

@matextrem , hmm, thanks. Will check.
I will retest it when you merge you latest changes then.

[matextrem]

@elena-zh done!

[elena-zh]

@matextrem , changes LGTM now.
Thank you!

[alfetopito]

Minor comments, looking good otherwise

[elena-zh]

LGTM now!

[henrypalacios]

👍

@matextrem Just Nitpick: How about not explicitly using undefined in the state initialization? in order to be consistent with the rest of the state definitions