feat(hooks-store): new design & refactoring

[shoom3301]

Summary

Design: https://www.figma.com/design/1ctikx9sFa9Ff925GRsjvC/Hook-Store

Changes:

1. Separated pure/container components
2. Simplified HookDappContext: now it is passed as a component prop instead of react context
3. Added localStorage persisting for hooks state
4. Added hooks editing
5. And of course, applied the new design from Michel's PR

--	--	--	--	--

To Test

Please, keep in mind that the feature is not ready yet and still under feature-flag.

1. UI should corrsepond to the Figma layouts. (reordering feature is not implemented yet)
2. Added hooks should be saved in localStorage (should be applied to the form after page refresh)
3. "Build your own" hook should be editable

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
cosmos	✅ Ready (Inspect)	Visit Preview	Sep 11, 2024 9:39am
cowfi	✅ Ready (Inspect)	Visit Preview	Sep 11, 2024 9:39am
explorer-dev	✅ Ready (Inspect)	Visit Preview	Sep 11, 2024 9:39am
swap-dev	✅ Ready (Inspect)	Visit Preview	Sep 11, 2024 9:39am
widget-configurator	🛑 Canceled (Inspect)		Sep 11, 2024 9:39am

[socket-security]

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert	Package	Note	Source	CI
Protestware/Troll package	npm/[email protected]	Note: This package prints a protestware console message on install regarding Ukraine for users with Russian language locale	yarn.lock	⚠︎
Critical CVE	npm/[email protected]	CVE: GHSA-h755-8qp9-cq85 protobufjs Prototype Pollution vulnerability (CRITICAL) Affected versions: >= 6.10.0, < 6.11.4 Patched version: 6.11.4	yarn.lock	⚠︎

View full report↗︎

Next steps

What is protestware?

This package is a joke, parody, or includes undocumented or hidden behavior unrelated to its primary function.

Consider that consuming this package may come along with functionality unrelated to its primary purpose.

What is a critical CVE?

Contains a Critical Common Vulnerability and Exposure (CVE).

Remove or replace dependencies that include known critical CVEs. Consumers can use dependency overrides or npm audit fix --force to remove vulnerable dependencies.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore npm/[email protected]
• @SocketSecurity ignore npm/[email protected]

[socket-security]

Report too large to display inline

View full report↗︎

[elena-zh]

@elena-zh it's a bit complicated for now, let's keep it as it is (hooks are always disabled for eth-flow)

added this case into #4662

[elena-zh]

Hey @shoom3301, there are several UI and low priority issues, but I will open a separate task to address them.
But I'd like to mention one issue that I'm concerned about:

1. Place an order with a permittable token (not approved) through Hooks form
2. While this order is Open, go to the swap page and place an order with the same token pair.

AR: there are 2 possible outcomes:

1. The app requires me to sign a permit request once again
2. The app does not allow me to place the order due to 'insufficient allowance' error
3. in both cases I see error fetching permit data on console.

Could you please double check this case and LMK whether this should be addressed in the current PR or in the another task?
Thanks

[shoom3301]

@elena-zh thanks! Please put it in a new task, we will take care of it later

[elena-zh]

@elena-zh thanks! Please put it in a new task, we will take care of it later

Now reported here: #4727
Hooks are not added to the AppData when connected to a SC wallet: #4874
All the rest issues can be found in #4662