Strip network prefix from the Address when calling EthHashInfo

[DiogoSoaress]

What it solves

#3015 (comment) (Bug when uploading a QR code containing a chain prefix in the "Send Collectibles")
Resolves #3036

How this PR fixes it

• Pass the Address without prefix to EthHashInfo and let the appearance settings decide if prefix should be displayed
• Removes the chain prefix from "Transaction hash" and "SafeTxHash" fields in the Tx List

How to test it

From #3015 (comment)

Screenshots

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[github-actions]

• Safe Rinkeby
• Safe Mainnet
• Safe Polygon
• Safe BSC
• Safe Arbitrum
• Unified app on dev: https://safe-team.dev.gnosisdev.com/app/

[github-actions]

E2E Tests Failed
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1492048948

Failed tests:

• ❌ Add an existing safe Add an existing safe
• ❌ Address book Address book
• ❌ Safe Apps List Safe Apps List
• ❌ Read-only transaction creation and review Create and review a Send Funds transaction

[iamacook]

It's a bit convoluted not using the props as they are intended.

[iamacook]

Why are you extracting it here and not sending them via their respective props?

[DiogoSoaress]

I opted to implement it in the wrapper as a input sanitization. I don't think it invalidates the correct use of the hash prop.

Doing this in the wrapper is also a way to address it in one single place and to not repeat it every time we call the <PrefixedEthHashInfo /> component.

Let me know if it makes sense. It is a simple tweak otherwise.

[iamacook]

I think it makes the most sense to do this within the component. If you are intent on doing it in the wrapper, I think it's cleaner and more understandable to parse the hash directly and output the props accordingly, i.e.

  const getPrefixedHashInfoProps = (hash: string, shouldShowShortName: boolean ): { shortName: string | undefined, hash: string }

  <EthHashInfo
    {...getPrefixedHashInfoProps(hash, shouldShowShortName)}
    shouldShowShortName={showChainPrefix}
    shouldCopyShortName={copyChainPrefix}
  />

[DiogoSoaress]

I am not sure how this improves the solution. My view is that shortName should be calculated independently of the hash and vice versa.

The way to go would be maybe update the <EthHashInfo /> to have the input sanitization as the component responsability.

[DiogoSoaress]

@iamacook created a issue to tackle it 5afe/safe-react-components#171