Skip to content

Reactify MainView

Eddie Wang requested to merge reactify-sidebar into unstable

This PR is one of two main architectural changes we're making in the new UI. To understand this PR, it's important to understand how the current Sia-UI plugin architecture works.

In Sia-UI, there are two views, the main view (MainView) and the plugin view (WebView).

This MainView templates out the app.html with a Sidebar section and a Header section. Then on app load, the plugin manager hooks onto the document ids (e.g. id=sidebar, id=header), scans the plugin directory, and imperatively generates the HTML tags to fill the Sidebar / Header with information.

The WebView uses the electron webview component in order to isolate plugin processes and give us control to what the plugin can request on the user's system. It loads the index.html from each plugin when requested.

As of now, nodeintegration attribute is passed to the WebView of all the plugins, which means every plugin has full access to the node api, and the user filesystem. This is not great, as it means plugins have full access to the user's fs.

In order to make this more secure, we're going to let the MainView handle all of the calls to the user fs, and to siad/siac. The WebView will pass messages through IPC channels to the MainView, and the MainView will then process the request. This will enable us to create user-enabled permission settings for every plugin.

While this is a much more secure way to approach plugins, there will be many state changes between the MainView & WebView that need to stay in sync. In order to keep state sane, I added Redux so that we're using unidirectional data-flow patterns, and we ensure there is a single source of truth components can reference data from.

This PR tackles the first-half of this new design, which is swapping out the MainView to use React. This PR hooks into a div element called react-root and generates the rest of the view using standard declarative patterns. It does the following:

- Add Redux + React devtool extensions
- Add __DEV__ var for renderer process
- Move renderer to renderer_old as a temporary reference as we modify the mainview architechture.
- Change MainView to React
- Integrate Redux for main state (stores + reducers)
- mapPluginsToState function
- Setup Redux Saga
- Add polling sagas for consensus and gateway
- Create loading bar components w/ anim
- Consensus and gateway reducers
- Modify sidebar router to use id rather than name
- Add saga runners to store
- Extend theme options
- Fix isDevToolsOpened check
- Loading spinner screen
- Re-enable IPC callback for 'quit' event
- Move status bar to bottom of the ui
- Set polling to 1s instead of 5s
- Fix broken 'onbeforeunload' in dev mode
Edited by Eddie Wang

Merge request reports