feat: implement plugins logic (#3194)

.eslintignore

@@ -8,3 +8,4 @@ scripts/
 src/i18n
 src/resources/*
 src/tailwind.config.js
+src/tests

.testcafe-electron-rc.js

@@ -1,4 +1,4 @@
 module.exports = {
 	mainWindowUrl: "./build/index.html",
-	appPath: "./src/electron/index.js",
+	appPath: "./build/electron/index.js",
 };

config-overrides.js

@@ -30,8 +30,8 @@ const copyFiles = () =>
 		new CopyWebpackPlugin({
 			patterns: [
 				{
-					from: path.join(__dirname, "src/electron"),
-					to: path.join(__dirname, "build/electron"),
+					from: path.join(__dirname, "dist/main/main.js"),
+					to: path.join(__dirname, "build/electron/index.js"),
 				},
 			],
 		}),

jest.setup.js

@@ -10,6 +10,13 @@ jest.mock("electron", () => {
 	const setContentProtection = jest.fn();
 
 	return {
+		ipcMain: {
+			handle: jest.fn(),
+			invoke: jest.fn(),
+			on: jest.fn(),
+			removeListener: jest.fn(),
+			send: jest.fn(),
+		},
 		ipcRenderer: {
 			handle: jest.fn(),
 			invoke: jest.fn(),
@@ -54,7 +61,9 @@ afterEach(() => {
 });
 
 afterAll(() => {
-	global.gc();
+	if (global.gc) {
+		global.gc();
+	}
 });
 
 window.scrollTo = jest.fn();

package.json

@@ -19,15 +19,16 @@
 		"ItsANameToo <[email protected]>",
 		"Lúcio Rubens <[email protected]>"
 	],
-	"main": "src/electron/index.js",
+	"main": "build/electron/index.js",
 	"scripts": {
-		"build": "react-app-rewired build",
+		"build": "yarn compile && react-app-rewired build",
 		"build:ci": "cross-env GENERATE_SOURCEMAP=false yarn build",
 		"build:e2e": "cross-env REACT_APP_BUILD_MODE=demo yarn build:ci",
 		"build:linux": "yarn build:ci && electron-builder --linux --publish never",
 		"build:mac": "yarn build:ci && electron-builder --mac --publish never",
 		"build:win": "yarn build:ci && electron-builder --win --x64 --ia32 --publish never",
-		"dev": "cross-env REACT_APP_BUILD_MODE=demo concurrently --kill-others \"yarn start\" \"wait-on http://localhost:3000 && electron .\"",
+		"compile": "electron-webpack",
+		"dev": "cross-env REACT_APP_BUILD_MODE=demo concurrently --kill-others \"yarn start\" \"wait-on http://localhost:3000 && electron-webpack dev\"",
 		"eject": "react-app-rewired eject",
 		"electron-rebuild": "electron-builder install-app-deps",
 		"format": "yarn lint && yarn prettier",
@@ -83,6 +84,7 @@
 			"!src/**/*.styles.{js,jsx,ts,tsx}",
 			"!src/electron/**/*",
 			"!src/i18n/**/*",
+			"!src/tests/**/*",
 			"!src/tailwind.config.js",
 			"!src/utils/e2e-utils.ts",
 			"!src/polyfill/**/*"
@@ -147,16 +149,21 @@
 		"about-window": "^1.13.4",
 		"async-retry": "^1.3.1",
 		"downshift": "6.0.10",
+		"du": "^1.0.0",
 		"electron-is-dev": "^1.2.0",
 		"electron-log": "4.3.1",
 		"electron-updater": "^4.3.5",
 		"electron-window-state": "^5.0.3",
+		"enhanced-resolve": "^5.6.0",
 		"extract-domain": "^2.2.1",
 		"framer-motion": "^2.1.2",
+		"fs-extra": "^9.0.1",
+		"glob": "^7.1.6",
 		"hash-wasm": "^3.7.1",
 		"i18next": "^19.8.4",
 		"isomorphic-fetch": "^3.0.0",
 		"node-hid": "^2.1.1",
+		"parse-author": "^2.0.0",
 		"pretty-bytes": "5.5.0",
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",
@@ -173,12 +180,15 @@
 		"react-toastify": "^6.2.0",
 		"react-visibility-sensor": "^5.1.1",
 		"recharts": "^2.0.0-beta.6",
+		"semver": "^7.3.4",
 		"socks-proxy-agent": "^5.0.0",
+		"string-hash": "^1.1.3",
 		"styled-components": "^5.2.1",
 		"swiper": "6.4.5",
 		"tailwindcss": "npm:@tailwindcss/postcss7-compat",
 		"twin.macro": "^2.0.7",
 		"type-fest": "^0.20.2",
+		"vm2": "^3.9.2",
 		"yup": "^0.32.8"
 	},
 	"devDependencies": {
@@ -195,13 +205,15 @@
 		"@types/autoprefixer": "^9.7.2",
 		"@types/concurrently": "^5.2.1",
 		"@types/copy-webpack-plugin": "^6.0.0",
+		"@types/du": "^1.0.0",
 		"@types/electron-devtools-installer": "^2.2.0",
 		"@types/electron-window-state": "^2.0.34",
 		"@types/eslint-plugin-prettier": "^3.1.0",
 		"@types/isomorphic-fetch": "^0.0.35",
 		"@types/jest": "^26.0.19",
 		"@types/ledgerhq__hw-transport": "^4.21.3",
 		"@types/node": "^14.0.13",
+		"@types/parse-author": "^2.0.0",
 		"@types/postcss-import": "^12.0.0",
 		"@types/prettier": "^2.0.1",
 		"@types/react": "^16.9.0",
@@ -210,6 +222,7 @@
 		"@types/react-router-dom": "^5.1.5",
 		"@types/react-table": "^7.0.26",
 		"@types/react-test-renderer": "^17.0.0",
+		"@types/string-hash": "^1.1.1",
 		"@types/styled-components": "^5.1.5",
 		"@types/swiper": "^5.4.1",
 		"@types/testing-library__jest-dom": "^5.9.5",
@@ -231,6 +244,7 @@
 		"electron-devtools-installer": "^3.1.1",
 		"electron-notarize": "^1.0.0",
 		"electron-root-path": "^1.0.16",
+		"electron-webpack": "^2.8.2",
 		"eslint-config-prettier": "^7.0.0",
 		"eslint-config-react-app": "^6.0.0",
 		"eslint-plugin-import": "^2.20.2",
@@ -283,6 +297,15 @@
 			"autoCssProp": true
 		}
 	},
+	"electronWebpack": {
+		"main": {
+			"sourceDirectory": "src/electron",
+			"webpackConfig": "webpack.main.config.js"
+		},
+		"renderer": {
+			"sourceDirectory": null
+		}
+	},
 	"build": {
 		"productName": "ARK Desktop Wallet",
 		"appId": "io.ark.desktop-wallet",

src/app/App.test.tsx

@@ -2,6 +2,7 @@
 import { Environment, Profile } from "@arkecosystem/platform-sdk-profiles";
 import { translations as errorTranslations } from "domains/error/i18n";
 import { translations as profileTranslations } from "domains/profile/i18n";
+import electron from "electron";
 import nock from "nock";
 import React from "react";
 import * as utils from "utils/electron-utils";
@@ -17,47 +18,6 @@ import {
 
 import { App } from "./App";
 
-jest.mock(`electron`, () => {
-	let isUpdateCalled = false;
-
-	return {
-		ipcRenderer: {
-			invoke: (event: string, data) => {
-				if (event === "updater:check-for-updates") {
-					const response = {
-						cancellationToken: isUpdateCalled ? null : "1",
-						updateInfo: { version: "3.0.0" },
-					};
-					isUpdateCalled = true;
-					return response;
-				}
-				return true;
-			},
-			on: (evt: any, callback: (evt: any, progress: any) => void) => {
-				if (evt === "updater:download-progress") {
-					callback(evt, { total: 10, percent: 30, transferred: 3 });
-				}
-			},
-			handle: jest.fn(),
-			send: jest.fn(),
-			removeListener: jest.fn(),
-		},
-
-		remote: {
-			nativeTheme: {
-				shouldUseDarkColors: true,
-				themeSource: "system",
-			},
-			getCurrentWindow: () => ({
-				setContentProtection: jest.fn(),
-			}),
-			app: {
-				isPackaged: true,
-			},
-		},
-	};
-});
-
 const dashboardUrl = `/profiles/${getDefaultProfileId()}/dashboard`;
 
 let profile: Profile;
@@ -73,6 +33,32 @@ describe("App", () => {
 			.query({ limit: 20 })
 			.reply(200, require("tests/fixtures/coins/ark/devnet/notification-transactions.json"))
 			.persist();
+		jest.spyOn(electron.ipcRenderer, "invoke").mockImplementation((event: string, data) => {
+			let isUpdateCalled = false;
+			if (event === "updater:check-for-updates") {
+				const response = {
+					cancellationToken: isUpdateCalled ? null : "1",
+					updateInfo: { version: "3.0.0" },
+				};
+				isUpdateCalled = true;
+				return response;
+			}
+			if (event === "plugin:loader-fs.search") {
+				return [];
+			}
+			return true;
+		});
+		jest.spyOn(electron.ipcRenderer, "on").mockImplementation(
+			(evt: any, callback: (evt: any, progress: any) => void) => {
+				if (evt === "updater:download-progress") {
+					callback(evt, { total: 10, percent: 30, transferred: 3 });
+				}
+			},
+		);
+	});
+
+	afterAll(() => {
+		jest.clearAllMocks();
 	});
 
 	it("should render splash screen", async () => {

src/app/App.tsx

@@ -15,6 +15,8 @@ import LedgerTransportNodeHID from "@ledgerhq/hw-transport-node-hid-singleton";
 // import { XRP } from "@arkecosystem/platform-sdk-xrp";
 import { ApplicationError, Offline } from "domains/error/pages";
 import { Splash } from "domains/splash/pages";
+import { usePluginManagerContext } from "plugins";
+import { PluginRouterWrapper } from "plugins/components/PluginRouterWrapper";
 import React, { useEffect, useLayoutEffect, useState } from "react";
 import { ErrorBoundary, useErrorHandler } from "react-error-boundary";
 import { I18nextProvider } from "react-i18next";
@@ -27,13 +29,15 @@ import { middlewares, RouterView, routes } from "../router";
 import { ConfigurationProvider, EnvironmentProvider, LedgerProvider, useEnvironmentContext } from "./contexts";
 import { useDeeplink, useEnvSynchronizer, useNetworkStatus } from "./hooks";
 import { i18n } from "./i18n";
+import { PluginProviders } from "./PluginProviders";
 import { httpClient } from "./services";
 
 const __DEV__ = process.env.NODE_ENV !== "production";
 
 const Main = () => {
 	const [showSplash, setShowSplash] = useState(true);
 	const { env, persist } = useEnvironmentContext();
+	const { loadPlugins } = usePluginManagerContext();
 	const isOnline = useNetworkStatus();
 	const { start, runAll } = useEnvSynchronizer();
 
@@ -63,16 +67,18 @@ const Main = () => {
 				await env.verify(shouldUseFixture ? fixtureData : undefined);
 				await env.boot();
 				await runAll();
+				await loadPlugins();
 				await persist();
 			} catch (error) {
+				console.error(error);
 				handleError(error);
 			}
 
 			setShowSplash(false);
 		};
 
 		boot();
-	}, [env, handleError, persist, runAll]);
+	}, [env, handleError, persist, runAll, loadPlugins]);
 
 	const renderContent = () => {
 		if (showSplash) {
@@ -83,7 +89,7 @@ const Main = () => {
 			return <Offline />;
 		}
 
-		return <RouterView routes={routes} middlewares={middlewares} />;
+		return <RouterView routes={routes} middlewares={middlewares} wrapper={PluginRouterWrapper} />;
 	};
 
 	return (
@@ -131,7 +137,9 @@ export const App = () => {
 				<ConfigurationProvider>
 					<ErrorBoundary FallbackComponent={ApplicationError}>
 						<LedgerProvider transport={LedgerTransportNodeHID}>
-							<Main />
+							<PluginProviders>
+								<Main />
+							</PluginProviders>
 						</LedgerProvider>
 					</ErrorBoundary>
 				</ConfigurationProvider>

src/app/PluginProviders.tsx

@@ -0,0 +1,40 @@
+import {
+	EventsPluginService,
+	FileSystemPluginService,
+	HttpPluginProvider,
+	HttpPluginService,
+	LaunchPluginService,
+	PluginManager,
+	PluginManagerProvider,
+	ProfilePluginService,
+	StorePluginService,
+	ThemePluginService,
+} from "plugins";
+import React from "react";
+
+type Props = {
+	children: React.ReactNode;
+};
+
+const isTest = process.env.NODE_ENV === "test";
+export const pluginManager = new PluginManager();
+
+export const services = [
+	new EventsPluginService(),
+	new FileSystemPluginService(),
+	new HttpPluginService(),
+	new LaunchPluginService(),
+	new ProfilePluginService(),
+	new StorePluginService(),
+	new ThemePluginService(),
+];
+
+export const PluginProviders = ({ children }: Props) => {
+	/* istanbul ignore next */
+	const servicesData = isTest ? [] : services;
+	return (
+		<PluginManagerProvider manager={pluginManager} services={servicesData}>
+			<HttpPluginProvider manager={pluginManager}>{children}</HttpPluginProvider>
+		</PluginManagerProvider>
+	);
+};