How can we refactor how modals work so that plugins can provide their own modals?

[cjthompson]

Overview

Currently, there is a local ModalProvider that can render a few specific modals, like Send or Receive.

As we move into our plugin model, we want plugins to be able to support rendering modals without the need to touch any code outside of the src/plugins directory

This is a research spike looking for suggestions from React experts on how we should refactor our code to allow for arbitrary modals to be shown.

Reference

See src/context/ModalProvider/ModalProvider.tsx for how the useModal hook works

See src/components/AssetHeader/AssetActions.tsx for how useModal is currently used to show a Send and Receive modal

See src/plugins/index.tsx and src/plugins/cosmos/index.tsx for how plugins work. This plugin registration feature could be expanded to include registering modals in some way?

Questions to answer:

• How to support additional modals without having to directly modify any files outside of src/plugins
• How a plugin in src/plugins can cause a modal to be open or closed

Example: The Cosmos Plugin needs to be able to render it's own Send modal and not the current global Send modal.

[GMSteuart]

While not react specific, I would take a look at the plug-and-play package as it's the defacto standard for implementing a plugin system. Then after that, looking into Nest.js and other frameworks that have implemented plugins to any degree would provide food for thought. With that in mind, since auto-loading of plugins is desired, updating the codebase to use Nest.js may be beneficial as there is a bunch of additional functionality the framework would end up providing.

[cjthompson]

We need our code to compile to static files so we can deploy to IPFS. Nest.js requires a server.

[GMSteuart]

@cjthompson there is also react-pluggable for inspiration. As primarily a Vue developer and knowing Nuxt.js (based off Nest.js) doesn't require server-side rendering, I had to double check Nest.js's docs; Nest.js can compile to a static site, see Nest.js Docs - Serve Static.