feat: redesign Load Safe

[usame-algan]

What it solves

Resolves #964

How this PR fixes it

• Existing components from src/components/load-safe were copied into the new structure within src/components/new-safe/load with minor layout adjustments
• The first and second step of the old flow are combined
• Removes the old routes /open and /load and their pages
• Uses the new routes /new-safe/create and /new-safe/load everywhere
• Restructures the new-safe directory

ToDos

• Move OwnerRow into the parent directory
• Remove old load safe components inside src/components/load-safe
• Find a solution for cut-off safe addresses in the new design

How to test it

1. Open the Safe
2. Navigate to the welcome page
3. Click on "Add existing Safe"
4. Observe the new design
5. Navigate to a specific safe
6. Open the safe list sidebar and click on "Add Safe"
7. Observe being navigated to the load safe flow and the safe address being pre-filled

Screenshots

[github-actions]

Branch preview

✅ Deploy successful!

https://add_safe--webcore.review-web-core.5afe.dev

[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}

[katspaugh]

☝️ these inputs look read-only until focused.

[katspaugh]

The code looks good, and in my testing, it also works fine.

I don't like calling components Step0, Step1 etc, but it's the same in the creation...

[katspaugh]

👍

[katspaugh]

☝️ can we stretch the address field to the full width?

[katspaugh]

I've stretched the address field like so:

[francovenica]

Issue:

When using and ENS name, after the name is translated to a valid address, is expected to also be autofilled in the "Name" input.
The current result is that the generic random name is still used to fill the input
Try "goerlisafe.eth" for testing

[francovenica]

Correction. I've checked and the ENS autofill name is broken in prod as well. It would be great if that can be fixed here, but is not a blocker to pass this ticket.
Let me know if that can be fixed here or if I should open a new ticket

[usame-algan]

Correction. I've checked and the ENS autofill name is broken in prod as well. It would be great if that can be fixed here, but is not a blocker to pass this ticket. Let me know if that can be fixed here or if I should open a new ticket

For me it resolves the ENS and autofills it as a placeholder to the name input. I think this is the intended behaviour as it was changed to be a placeholder in #353

The reason why goerlisafe.eth is not resolving is because it needs to be set as a reverse record entry to the safe address

[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}

[francovenica]

I didn't noticed that the name wasn't properly set. Now it works fine