[L2-UX] Indicate chain id in transaction popups

[juampibermani]

What it solves

Resolves #2619

I also created a ModalHeader component so we don't repeat the same header and styles on each component

[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 Multisig app rinkeby

[github-actions]

• Safe Multisig app polygon

[github-actions]

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

Failed tests:

• ❌ Add an existing safe Add an existing safe

[github-actions]

• Safe Multisig app mainnet

[francovenica]

I can't connect to the application at all. I tried in Rinkeby and Polygon and is the same for both networks
With MM it throws no error what so ever, but It just won't connect at all
I tried with the Trezor device, but it throws an error

Gif for the MM conection:

Snapshot of the error I get with Trezor:

[katspaugh]

It should actually be useSelector(currentChainId).
We should indicate the contract/chain the app is pointing to, not the wallet connection.

[katspaugh]

@francovenica this bug is on the l2-ux branch, I'll fix it.

[francovenica]

I still cannot connect with any wallet. I'll check with @juampibermani

[dasanra]

@katspaugh @francovenica @juampibermani Bug with hardware wallets was on L2-UX branch. I was working on that while solving the multiple clicks issue. Now it should be solved

[github-actions]

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

Failed tests:

• ❌ Add an existing safe Add an existing safe

[francovenica]

Ok, I can connect the wallet now and work on the ticket. Thanks @dasanra

[francovenica]

Send funds, send collectibles and contract interactions are fine.

Issue:
In the issue ticket it says "Affects: Send ERC20s, Send collectibles, contract interaction, Safe app tx flow"

The safe app tx workflow don't show the icon. Was that idea scrapped at some point?

[github-actions]

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

Failed tests:

• ❌ Add an existing safe Add an existing safe

[github-actions]

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

Failed tests:

• ❌ Add an existing safe Add an existing safe

[francovenica]

A few places where the indicator is missing:
Add owner, replace owner, delete owner. For all 3 forms, only the very last step shows the icon:

[github-actions]

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

Failed tests:

• ❌ Add an existing safe Add an existing safe

[francovenica]

Looks good now.

[katspaugh]

Something is wrong with this branch. I see changes that aren't related to this PR.

[dasanra]

@katspaugh there is a direct merge from dev when this branch should only bring changes from l2-ux to keep consistency. Will fix it

https://github.com/gnosis/safe-react/pull/2721/commits

[katspaugh]

Thanks Dani!