125 |
145 |
128 |
135 |
136 |
144 |
40 | 
41 |
42 |
43 | );
44 | }
45 |
46 | renderNavItem(plugin, props) {
47 | if (React.isValidElement(plugin)) {
48 | // If it is already a react element created by decorator
49 | // in the plugin, then extend with updated props and key
50 | return React.cloneElement(plugin, props);
51 | }
52 |
53 | return React.createElement(SidebarNavItem, props);
54 | }
55 |
56 | renderSidebarItems() {
57 | const {
58 | sidebarNavItems,
59 | location: { pathname = '' },
60 | match,
61 | theme
62 | } = this.props;
63 | return (
64 | sidebarNavItems
65 | // filter out any plugins w/o sidebar or nav property set to true
66 | // or that is not a valid react element (custom sidebar components)
67 | .filter(plugin => {
68 | // if it isn't a custom element confirm that it has a pathName
69 | // and its pathName isn't just a single slash
70 | if (
71 | !React.isValidElement(plugin) &&
72 | (!plugin.pathName || plugin.pathName === '/')
73 | )
74 | return false;
75 | return plugin.sidebar || plugin.nav || React.isValidElement(plugin);
76 | })
77 | // map through each parent item to create the sidebar nav element
78 | .map((plugin, index) => {
79 | // for a nav item that is already a react element
80 | // we need to retrieve the props
81 | const pluginProps = plugin.props ? plugin.props : {};
82 | const sidebarItemProps = {
83 | ...plugin,
84 | theme,
85 | match,
86 | pathname,
87 | ...pluginProps
88 | };
89 |
90 | // sanitize out any forward slashes or non-uri safe symbols from pathName
91 | // unless it is an absolute URL leading with http
92 | if (!/^(http)/.test(sidebarItemProps.pathName))
93 | sidebarItemProps.pathName = `${match.url}${sidebarItemProps.pathName}`;
94 |
95 | if (plugin.parent) {
96 | // if this sidebar item is a child then add appropriate props
97 | sidebarItemProps.subItem = true;
98 | }
99 | return this.renderNavItem(plugin, {
100 | ...sidebarItemProps,
101 | key: index
102 | });
103 | })
104 | );
105 | }
106 |
107 | renderFooter() {
108 | const { theme } = this.props;
109 | const commitHash = (commit || '').slice(0, 7);
110 | return (
111 |
112 | bPanel
113 |
117 | bpanel: {version}
118 |
119 |
123 | UI: {commitHash}
124 |
125 |
126 | );
127 | }
128 |
129 | render() {
130 | const {
131 | theme,
132 | beforeNav,
133 | afterNav,
134 | customSidebarHeader,
135 | customSidebarFooter
136 | } = this.props;
137 | return (
138 |
148 | );
149 | }
150 | }
151 |
152 | export default Sidebar;
153 |
--------------------------------------------------------------------------------
/webapp/config/appConfig.js:
--------------------------------------------------------------------------------
1 | import theme from './themeConfig/index.js';
2 | import localModules from '../plugins/local';
3 | import modules from '../plugins';
4 |
5 | const { themeVariables, themeCreator } = theme;
6 |
7 | // Here we are importing the local and published modules
8 | // from their respective entry points so they
9 | // can be exported as part of our config
10 | // localPlugins are typically for either development of a plugin or
11 | // for default/built-in plugins
12 | // IMPORTANT: plugins should be added via the pluginsConfig, not here
13 |
14 | export default async function() {
15 | const [...plugins] = await modules();
16 | const [...localPlugins] = await localModules();
17 | return {
18 | plugins: [...localPlugins, ...plugins],
19 | theme: {
20 | themeVariables,
21 | themeCreator
22 | }
23 | };
24 | }
25 |
--------------------------------------------------------------------------------
/webapp/config/themeConfig/index.js:
--------------------------------------------------------------------------------
1 | import themeVariables from './themeVariables';
2 | import themeCreator from './themeCreator';
3 |
4 | export default {
5 | themeVariables,
6 | themeCreator
7 | };
8 |
--------------------------------------------------------------------------------
/webapp/config/themeConfig/themeVariables.js:
--------------------------------------------------------------------------------
1 | import logo from '../../assets/logo.png';
2 | import favicon from '../../assets/favicon.ico';
3 |
4 | /// *****
5 | /// FONTS
6 | /// *****
7 |
8 | // Font Family
9 | const fontFamily = 'Open Sans, sans-serif';
10 |
11 | // Font Size
12 | const fontSizeBase = 1; // This gets transformed to rem
13 |
14 | const fontSizeSmall = 0.8;
15 | const fontSizeNormal = 1;
16 | const fontSizeLarge = 1.2;
17 |
18 | const fontSizeH1 = 3.2;
19 | const fontSizeH2 = 2.6;
20 | const fontSizeH3 = 2.1;
21 | const fontSizeH4 = 1.7;
22 | const fontSizeH5 = 1.3;
23 | const fontSizeH6 = 1.1;
24 |
25 | const fontOpacity = 0.75;
26 |
27 | // Font Weights
28 | const fontWeights = {
29 | light: 300,
30 | regular: 400,
31 | semiBold: 600,
32 | bold: 700
33 | };
34 |
35 | /// ***********
36 | /// BACKGROUNDS
37 | /// ***********
38 |
39 | // Background color for App
40 | // ------------------------
41 | // Here we are using a gradient for the background color.
42 | // These colors can be a string, array, or array of objects.
43 | // If you want a solid color or image, you can simply assign `appBg` to a
44 | // hex, rgb, rgba string, or image url
45 | // If using an image url, write your url like this:
46 | // 'url(http://saxony-blue.com/data/out/103/6072158-moon-image.jpg)'
47 | // replacing the example url with your own url. `appBg` is a css `background` property
48 | // so `no-repeat center center fixed` can be applied, for example:
49 | // 'url(http://saxony-blue.com/data/out/103/6072158-moon-image.jpg) no-repeat center center fixed'
50 |
51 | // purple blue and teal gradient
52 | const appBg = 'linear-gradient(-35deg, #835fac, #00558a, #009db6)';
53 |
54 | // appBgSize is mainly for background images
55 | // for full sized background images, use 'cover'
56 | const appBgSize = 'auto';
57 |
58 | /// ******
59 | /// COLORS
60 | /// ******
61 |
62 | // Primary Palette
63 | const themeColors = {
64 | // Themeable colors
65 | primary: '#fff', // white
66 | highlight1: '#00ffe0', // teal
67 | highlight2: '#83d9ff', // light blue
68 | lowlight1: '#1b1464', // dark purple
69 | lowlight2: '#9e005d', // medium purple
70 | lightBg: 'rgba(255, 255, 255, 0.1)', // transparent white 1
71 | light2Bg: 'rgba(255, 255, 255, 0.2)', // transparent white 2
72 | mediumBg: 'rgba(0, 255, 224, .2)', // transparent teal
73 | darkBg: 'rgba(0, 0, 0, .4)', // transparent black
74 | darkerBg: 'rgba(0, 0, 0, .7)', // transparent black
75 | // Constants
76 | white: '#fff',
77 | black: '#000',
78 | transparent: 'transparent',
79 | error: '#990000'
80 | };
81 |
82 | /// *******
83 | /// BORDERS
84 | /// *******
85 |
86 | const borderWidth = '1px';
87 | const borderStyle = 'solid';
88 | const border1 = `${borderWidth} ${borderStyle} ${themeColors.white}`;
89 | const border2 = `${borderWidth} ${borderStyle} ${themeColors.light2Bg}`;
90 | const borderDark = `${borderWidth} ${borderStyle} ${themeColors.lowlight1}`;
91 | const borderTransparent = `${borderWidth} ${borderStyle} ${themeColors.transparent}`;
92 | const borderRadius = '5px';
93 |
94 | /// ***********
95 | /// TRANSITIONS
96 | /// ***********
97 |
98 | const smoothTransition = '0.3s ease';
99 |
100 | /// *******************
101 | /// COMPONENT VARIABLES
102 | /// *******************
103 |
104 | // Header
105 | const headerHeight = 7;
106 |
107 | // Footer
108 | const footerHeight = 2;
109 |
110 | // Logo
111 | const logoUrl = `/${logo}`;
112 | const faviconUrl = `/${favicon}`;
113 |
114 | const themeVariables = {
115 | // rawRem holds all the values that will be converted
116 | // to a stringified rem value based off the fontSizeBase
117 | rawRem: {
118 | /// *****
119 | /// FONTS
120 | /// *****
121 | // Font Size
122 | fontSizeSmall,
123 | fontSizeNormal,
124 | fontSizeLarge,
125 | fontSizeH1,
126 | fontSizeH2,
127 | fontSizeH3,
128 | fontSizeH4,
129 | fontSizeH5,
130 | fontSizeH6,
131 | // Header
132 | headerHeight,
133 | // Footer
134 | footerHeight
135 | },
136 | /// *****
137 | /// FONTS
138 | /// *****
139 | // Font Size
140 | fontSizeBase,
141 | // Font Family
142 | fontFamily,
143 | // Font Opacity
144 | fontOpacity,
145 | // Font Weights
146 | fontWeights,
147 | /// ***********
148 | /// BACKGROUNDS
149 | /// ***********
150 | appBg,
151 | appBgSize,
152 | /// ******
153 | /// COLORS
154 | /// ******
155 | themeColors,
156 | /// *******
157 | /// BORDERS
158 | /// *******
159 | borderWidth,
160 | borderStyle,
161 | border1,
162 | border2,
163 | borderDark,
164 | borderTransparent,
165 | borderRadius,
166 | /// ***********
167 | /// TRANSITIONS
168 | /// ***********
169 | smoothTransition,
170 | /// *******************
171 | /// COMPONENT VARIABLES
172 | /// *******************
173 | // Logo
174 | logoUrl,
175 | faviconUrl
176 | };
177 |
178 | export default themeVariables;
179 |
--------------------------------------------------------------------------------
/webapp/containers/App/App.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { bindActionCreators } from 'redux';
4 | import { Route, Redirect } from 'react-router';
5 | import { getClient } from '@bpanel/bpanel-utils';
6 |
7 | import ThemeProvider from '../ThemeProvider';
8 | import {
9 | clientActions,
10 | nodeActions,
11 | socketActions,
12 | themeActions,
13 | navActions,
14 | appActions
15 | } from '../../store/actions/';
16 | import { APP_LOADED } from '../../store/constants/app';
17 | import Header from '../Header';
18 | import Footer from '../Footer';
19 | import Sidebar from '../Sidebar';
20 | import Panel from '../Panel';
21 | import { nav } from '../../store/selectors';
22 | import { pluginMetadata } from '../../store/propTypes';
23 | import { connect } from '../../plugins/plugins';
24 |
25 | import 'bootstrap/dist/css/bootstrap.min.css';
26 | import 'bootstrap/dist/css/bootstrap-grid.min.css';
27 |
28 | class App extends PureComponent {
29 | constructor(props) {
30 | super(props);
31 | props.loadSideNav();
32 | this.client = null;
33 | props.hydrateClients();
34 | this.updateClient = this.updateClient.bind(this);
35 | }
36 |
37 | static get propTypes() {
38 | return {
39 | children: PropTypes.node,
40 | loadSideNav: PropTypes.func.isRequired,
41 | sidebarNavItems: pluginMetadata.sortedMetadataPropTypes,
42 | location: PropTypes.shape({
43 | pathname: PropTypes.string
44 | }),
45 | theme: PropTypes.object,
46 | connectSocket: PropTypes.func.isRequired,
47 | disconnectSocket: PropTypes.func.isRequired,
48 | getNodeInfo: PropTypes.func.isRequired,
49 | getWindowInfo: PropTypes.func,
50 | updateTheme: PropTypes.func.isRequired,
51 | appLoaded: PropTypes.func.isRequired,
52 | hydrateClients: PropTypes.func.isRequired,
53 | resetClient: PropTypes.func.isRequired,
54 | match: PropTypes.shape({
55 | isExact: PropTypes.bool,
56 | path: PropTypes.string,
57 | url: PropTypes.string,
58 | params: PropTypes.object
59 | }).isRequired,
60 | clientsHydrated: PropTypes.bool,
61 | loading: PropTypes.bool
62 | };
63 | }
64 |
65 | async componentDidMount() {
66 | const { getNodeInfo, connectSocket } = this.props;
67 | this.client = getClient();
68 | this.client.on('set clients', this.updateClient);
69 |
70 | if (this.client.id) {
71 | connectSocket();
72 | getNodeInfo();
73 | }
74 | }
75 |
76 | updateClient(clientInfo) {
77 | const {
78 | resetClient,
79 | getNodeInfo,
80 | clientsHydrated,
81 | loading,
82 | connectSocket
83 | } = this.props;
84 | // only reset if clients have been hydrated
85 | // and the node is no longer loading
86 | if (clientsHydrated && !loading) resetClient(clientInfo);
87 | connectSocket();
88 | getNodeInfo();
89 | }
90 |
91 | UNSAFE_componentWillMount() {
92 | const { updateTheme, appLoaded, getWindowInfo } = this.props;
93 |
94 | getWindowInfo();
95 | updateTheme();
96 | appLoaded();
97 | }
98 |
99 | componentWillUnmount() {
100 | // Unload theming for the and tags
101 | document.body.className = null;
102 | document.document.documentElement.className = null;
103 | this.props.disconnectSocket();
104 | this.client.removeListener('set clients', this.updateClient);
105 | }
106 |
107 | getHomePath() {
108 | const { sidebarNavItems } = this.props;
109 | const panels = sidebarNavItems.filter(
110 | plugin => plugin.sidebar || plugin.nav || React.isValidElement(plugin)
111 | );
112 | const homePath = panels[0]
113 | ? panels[0].pathName ? panels[0].pathName : panels[0].name
114 | : '';
115 | return homePath;
116 | }
117 |
118 | render() {
119 | const { sidebarNavItems, location, theme, match } = this.props;
120 | return (
121 |
124 |
146 |
147 |
13 |
17 |
18 |
--------------------------------------------------------------------------------
/webapp/loading.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | }
4 | .loading {
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | height: 100%;
9 | width: 100%;
10 | left: 0;
11 | right: 0;
12 | top: 0;
13 | bottom: 0;
14 | position: absolute;
15 | background: linear-gradient(
16 | 124deg,
17 | #ff2400,
18 | #e81d1d,
19 | #e8b71d,
20 | #e3e81d,
21 | #1de840,
22 | #1ddde8,
23 | #2b1de8,
24 | #dd00f3,
25 | #dd00f3
26 | );
27 | background-size: 1800% 1800%;
28 |
29 | -webkit-animation: rainbow 18s ease infinite;
30 | -z-animation: rainbow 18s ease infinite;
31 | -o-animation: rainbow 18s ease infinite;
32 | animation: rainbow 18s ease infinite;
33 | }
34 |
35 | @-webkit-keyframes rainbow {
36 | 0% {
37 | background-position: 0% 82%;
38 | }
39 | 50% {
40 | background-position: 100% 19%;
41 | }
42 | 100% {
43 | background-position: 0% 82%;
44 | }
45 | }
46 | @-moz-keyframes rainbow {
47 | 0% {
48 | background-position: 0% 82%;
49 | }
50 | 50% {
51 | background-position: 100% 19%;
52 | }
53 | 100% {
54 | background-position: 0% 82%;
55 | }
56 | }
57 | @-o-keyframes rainbow {
58 | 0% {
59 | background-position: 0% 82%;
60 | }
61 | 50% {
62 | background-position: 100% 19%;
63 | }
64 | 100% {
65 | background-position: 0% 82%;
66 | }
67 | }
68 | @keyframes rainbow {
69 | 0% {
70 | background-position: 0% 82%;
71 | }
72 | 50% {
73 | background-position: 100% 19%;
74 | }
75 | 100% {
76 | background-position: 0% 82%;
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/webapp/plugins/local/.gitkeep:
--------------------------------------------------------------------------------
1 | # commit empty directory
2 | # build-plugins script will generate an index.js file
3 | # in this directory automatically
--------------------------------------------------------------------------------
/webapp/plugins/utils.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | // utilities for the plugin system modules
3 | import assert from 'assert';
4 | import semver from 'semver';
5 | import validate from 'validate-npm-package-name';
6 |
7 | export const propsReducerCallback = (name, parentProps, ...fnArgs) => (
8 | acc,
9 | decorator
10 | ) => {
11 | let props_;
12 | try {
13 | props_ = decorator(parentProps, acc, ...fnArgs);
14 | } catch (err) {
15 | console.error(
16 | 'Plugin error',
17 | `${decorator._pluginName}: Error occurred in \`${name}\``,
18 | err.stack
19 | );
20 | return;
21 | }
22 |
23 | if (!props_ || typeof props_ !== 'object') {
24 | console.error(
25 | 'Plugin error',
26 | `${
27 | decorator._pluginName
28 | }: Invalid return value of \`${name}\` (object expected).`
29 | );
30 | return;
31 | }
32 | return props_;
33 | };
34 |
35 | export const loadConnectors = (plugin, type, connectors) => {
36 | const moduleType = type
37 | .slice(0, 1)
38 | .toUpperCase()
39 | .concat(type.slice(1));
40 | const module = `mapComponent${moduleType}`;
41 | // check if the plugin has the module we're looking for
42 | // e.g. mapComponentState
43 | if (plugin[module]) {
44 | for (let key in plugin[module]) {
45 | if (key[0] === '_') continue; // skip internal properties of module
46 | if (!connectors[key]) {
47 | // the connector doesn't exist yet in the cache, initialize it
48 | connectors[key] = {
49 | state: [],
50 | dispatch: []
51 | };
52 | }
53 | // add connector to cache
54 | connectors[key][type].push(plugin[module][key]);
55 | }
56 | }
57 | };
58 |
59 | // utility to check plugin metadata
60 | // conforms to expected format.
61 | export const checkMetadata = metadata => {
62 | const { name, displayName, pathName } = metadata;
63 | const updatedMeta = { ...metadata };
64 | // check `name` exists and conforms to npm rules
65 | assert(name, 'Plugin must have a name');
66 | const { errors = [], warnings = [] } = validate(name);
67 | assert(
68 | !errors.length && !warnings.length,
69 | `${name}: ` + errors.concat(warnings).join(' & ')
70 | );
71 | // check `displayName` exists
72 | // if it doesn't, duplicate from `name`
73 | if (!displayName) updatedMeta.displayName = name;
74 | // encode pathName if it exists
75 | if (pathName) {
76 | assert(pathName !== '/', 'pathName should not be a single forward slash');
77 | updatedMeta.pathName = pathName.replace(/^(\/)+/, '');
78 | }
79 |
80 | return updatedMeta;
81 | };
82 |
83 | // add plugin to list and check for duplicates
84 | // use latest version of plugin if duplicate exists
85 | export const addPlugin = (modules = [], plugin) => {
86 | const { name: pluginName, version: pluginVersion } = plugin.metadata;
87 | assert(
88 | !pluginVersion || typeof pluginVersion === 'string',
89 | 'Plugin version must be string'
90 | );
91 |
92 | if (modules.length) {
93 | let exists = false;
94 | const updated = modules.map(module => {
95 | const { name: moduleName, version: moduleVersion } = module.metadata;
96 | if (moduleName === pluginName) {
97 | // if the plugin already exists
98 | exists = true;
99 | if (
100 | (pluginVersion && !moduleVersion) ||
101 | semver.lt(moduleVersion, pluginVersion)
102 | ) {
103 | // and only the newer one has a version but not the existing
104 | // or the newer one is newer version
105 | // then replace existing with newer version
106 | return plugin;
107 | }
108 | }
109 | // otherwise can just return the existing version
110 | return module;
111 | });
112 | // if no match in existing array
113 | // return array with new plugin pushed on
114 | if (!exists) updated.push(plugin);
115 | return updated;
116 | }
117 | return [plugin];
118 | };
119 |
120 | export const moduleLoader = (config, modules = []) => {
121 | const { plugins } = config;
122 | if (plugins) {
123 | // load plugin exports from config
124 | const pluginsArr = Array.isArray(plugins) ? plugins : [plugins];
125 | pluginsArr.forEach(plugin => {
126 | try {
127 | assert(
128 | typeof plugin !== 'string' && plugin.metadata,
129 | 'Plugin must be an exported plugin module with a metadata property'
130 | );
131 | const updatedMeta = checkMetadata(plugin.metadata);
132 | assert(updatedMeta, 'Plugin could not load due to metadata failure');
133 | plugin.metadata = updatedMeta;
134 | modules = addPlugin(modules, plugin);
135 | if (plugin.pluginConfig)
136 | // doing recursive call if plugin has plugin bundle
137 | modules = moduleLoader(plugin.pluginConfig, modules);
138 | } catch (e) {
139 | console.error(
140 | `Plugin failure: In ${plugin.metadata.name}, ${e.message} \n`,
141 | plugin
142 | );
143 | }
144 | });
145 | }
146 |
147 | return modules;
148 | };
149 |
150 | /*
151 | * Useful for skipping internal properties prefixed with underscore
152 | * such as _pluginName and _pluginVersion
153 | * @param {Object} obj - Object to filter the properties of
154 | * @param {Function} callback to operate on each property that passes
155 | * callback should accept the key of the passed property
156 | * @returns {Null}
157 | */
158 | export function filterInternalProperties(obj, callback) {
159 | for (let key in obj) {
160 | if (key[0] === '_') continue; // skip if is an internal property
161 | callback(key);
162 | }
163 | }
164 |
--------------------------------------------------------------------------------
/webapp/store/actions/appActions.js:
--------------------------------------------------------------------------------
1 | import * as types from '../constants/app';
2 |
3 | export function setWindowInfo(port, protocol, hostname, ssl) {
4 | return {
5 | type: types.SET_WINDOW,
6 | payload: { port, protocol, hostname, ssl }
7 | };
8 | }
9 |
10 | export function getWindowInfo() {
11 | return dispatch => {
12 | let port;
13 | // when served on port 80 or 443
14 | if (window.location.port) port = Number(window.location.port);
15 |
16 | const protocol = window.location.protocol;
17 | const hostname = window.location.hostname;
18 | let ssl = false;
19 | if (protocol === 'https:') ssl = true;
20 | dispatch(setWindowInfo(port, protocol, hostname, ssl));
21 | };
22 | }
23 |
24 | export default {
25 | getWindowInfo
26 | };
27 |
--------------------------------------------------------------------------------
/webapp/store/actions/chainActions.js:
--------------------------------------------------------------------------------
1 | import { getClient } from '@bpanel/bpanel-utils';
2 |
3 | import { SET_CHAIN_INFO, SET_GENESIS } from '../constants/chain';
4 |
5 | const client = getClient();
6 |
7 | export function setChainInfo(chain) {
8 | return {
9 | type: SET_CHAIN_INFO,
10 | payload: chain
11 | };
12 | }
13 |
14 | function setGenesisBlock(block) {
15 | return {
16 | type: SET_GENESIS,
17 | payload: block
18 | };
19 | }
20 |
21 | export function getGenesisBlock() {
22 | return async dispatch => {
23 | try {
24 | if (client.node) {
25 | let genesis = await client.node.getBlock(0);
26 | dispatch(setGenesisBlock(genesis));
27 | }
28 | } catch (e) {
29 | throw `Error getting genesis block: ${e.stack}`;
30 | }
31 | };
32 | }
33 |
34 | export default {
35 | getGenesisBlock,
36 | setChainInfo,
37 | setGenesisBlock
38 | };
39 |
--------------------------------------------------------------------------------
/webapp/store/actions/clientActions.js:
--------------------------------------------------------------------------------
1 | import { getClient } from '@bpanel/bpanel-utils';
2 | import {
3 | SET_CURRENT_CLIENT,
4 | SET_CLIENTS,
5 | CLEAR_CURRENT_CLIENT,
6 | CLIENTS_HYDRATED
7 | } from '../constants/clients';
8 | import { STATE_REFRESHED, RESET_STATE } from '../constants/app';
9 | import { disconnectSocket, connectSocket } from './socketActions';
10 |
11 | const client = getClient();
12 |
13 | function setClients(clients) {
14 | return {
15 | type: SET_CLIENTS,
16 | payload: clients
17 | };
18 | }
19 |
20 | function clearCurrentClient() {
21 | return {
22 | type: CLEAR_CURRENT_CLIENT
23 | };
24 | }
25 |
26 | export function setClientsHydrated(hydrated = false) {
27 | return {
28 | type: CLIENTS_HYDRATED,
29 | payload: hydrated
30 | };
31 | }
32 |
33 | function setCurrentClient(clientInfo) {
34 | return async dispatch => {
35 | if (!clientInfo.chain && clientInfo.id)
36 | // eslint-disable-next-line no-console
37 | console.warn(
38 | `No chain was set for client ${clientInfo.id}, defaulting to "bitcoin"`
39 | );
40 | const { id, chain = 'bitcoin' } = clientInfo;
41 | // get current information for client from server
42 | const client = getClient();
43 | const info = await client.getClientInfo(id, true);
44 | // set the client info for the global client
45 | if (id) client.setClientInfo(id, chain);
46 | return dispatch({
47 | type: SET_CURRENT_CLIENT,
48 | payload: { ...clientInfo, ...info }
49 | });
50 | };
51 | }
52 |
53 | function resetClient() {
54 | return dispatch => {
55 | dispatch(disconnectSocket());
56 | dispatch(connectSocket());
57 | dispatch({
58 | type: RESET_STATE
59 | });
60 | dispatch({
61 | type: STATE_REFRESHED
62 | });
63 | };
64 | }
65 |
66 | function getClients() {
67 | return async dispatch => {
68 | const clients = await client.getClients();
69 | dispatch(setClients(clients));
70 | };
71 | }
72 |
73 | function getDefaultClient() {
74 | return async dispatch => {
75 | const defaultClient = await client.getDefault();
76 | if (defaultClient) return dispatch(setCurrentClient(defaultClient));
77 | return dispatch(clearCurrentClient());
78 | };
79 | }
80 |
81 | function hydrateClients() {
82 | return async (dispatch, getState) => {
83 | try {
84 | await dispatch(getClients());
85 | const currentClient = getState().clients.currentClient;
86 | const clients = getState().clients.clients;
87 |
88 | // if there is no currentClient set or
89 | // the currentClient does not exist in clients store
90 | // reset the currentClient to a default from the server
91 | if (!currentClient.id || !clients[currentClient.id])
92 | await dispatch(getDefaultClient());
93 | else await dispatch(setCurrentClient(currentClient));
94 |
95 | // set clientsHydrated to true in state
96 | // so other parts of the app can start listening
97 | // for client changs
98 | return dispatch(setClientsHydrated(true));
99 | } catch (e) {
100 | // eslint-disable-next-line no-console
101 | console.error('There was an error hydrating clients:', e);
102 | }
103 | };
104 | }
105 |
106 | export default {
107 | hydrateClients,
108 | getDefaultClient,
109 | getClients,
110 | resetClient,
111 | setCurrentClient,
112 | setClients
113 | };
114 |
--------------------------------------------------------------------------------
/webapp/store/actions/index.js:
--------------------------------------------------------------------------------
1 | export { default as appActions } from './appActions';
2 | export { default as nodeActions } from './nodeActions';
3 | export { default as socketActions } from './socketActions';
4 | export { default as chainActions } from './chainActions';
5 | export { default as themeActions } from './themeActions';
6 | export { default as navActions } from './navActions';
7 | export { default as clientActions } from './clientActions';
8 |
--------------------------------------------------------------------------------
/webapp/store/actions/navActions.js:
--------------------------------------------------------------------------------
1 | import assert from 'assert';
2 | import { helpers } from '@bpanel/bpanel-utils';
3 | import { ADD_SIDE_NAV, REMOVE_SIDE_NAV, SET_SIDE_NAV } from '../constants/nav';
4 | import { sortedNavItems } from '../selectors/nav';
5 |
6 | export function addSideNav(metadata) {
7 | assert(metadata.name, 'nav items must include a name');
8 | const { pathName, name } = metadata;
9 | // get hash for unique id
10 | const hash = helpers.getHash(metadata);
11 | const id = hash.slice(0, 6);
12 | metadata.pathName = pathName ? pathName : name;
13 | return {
14 | type: ADD_SIDE_NAV,
15 | payload: { ...metadata, sidebar: true, id }
16 | };
17 | }
18 |
19 | export function setSideNav(sideNav) {
20 | return {
21 | type: SET_SIDE_NAV,
22 | payload: sideNav
23 | };
24 | }
25 |
26 | export function loadSideNav() {
27 | return (dispatch, getState) => {
28 | const currentSideNav = getState().nav.sidebar;
29 | // only load if there isn't already a sidebar nav
30 | if (currentSideNav.length) return;
31 |
32 | const pluginMetadata = getState().pluginMetadata;
33 | let sideNav = sortedNavItems({ pluginMetadata });
34 | // add unique id to each nav item
35 | sideNav = sideNav.map(item => {
36 | item.id = item.id ? item.id : helpers.getHash(item, 'SHA256', 0, 6);
37 | return item;
38 | });
39 | dispatch(setSideNav(sideNav));
40 | };
41 | }
42 |
43 | export function removeSideNav(metadata) {
44 | if (!metadata.id || !metadata.name)
45 | // eslint-disable-next-line no-console
46 | console.warn('Must pass an id or name to delete nav item');
47 | return {
48 | type: REMOVE_SIDE_NAV,
49 | payload: metadata
50 | };
51 | }
52 |
53 | export default {
54 | addSideNav,
55 | setSideNav,
56 | removeSideNav,
57 | loadSideNav
58 | };
59 |
--------------------------------------------------------------------------------
/webapp/store/actions/nodeActions.js:
--------------------------------------------------------------------------------
1 | import { getClient } from '@bpanel/bpanel-utils';
2 |
3 | import * as types from '../constants/node';
4 | import { setChainInfo, getGenesisBlock } from './chainActions';
5 |
6 | const client = getClient();
7 |
8 | export function setNodeInfo(info) {
9 | return {
10 | type: types.SET_NODE,
11 | payload: info
12 | };
13 | }
14 |
15 | export function requestingNode(loadingState) {
16 | return {
17 | type: types.SET_LOADING,
18 | payload: loadingState
19 | };
20 | }
21 |
22 | export function getNodeInfo() {
23 | return async dispatch => {
24 | dispatch(requestingNode(true));
25 | dispatch(getGenesisBlock());
26 | try {
27 | const nodeInfo = await client.node.getInfo();
28 | dispatch(setNodeInfo(nodeInfo));
29 | dispatch(setChainInfo(nodeInfo.chain));
30 | dispatch(requestingNode(false));
31 | } catch (e) {
32 | // eslint-disable-next-line no-console
33 | console.error(e);
34 | }
35 | };
36 | }
37 |
38 | export default {
39 | setNodeInfo,
40 | requestingNode,
41 | getNodeInfo
42 | };
43 |
--------------------------------------------------------------------------------
/webapp/store/actions/socketActions.js:
--------------------------------------------------------------------------------
1 | import { CONNECT_SOCKET, DISCONNECT_SOCKET } from '../constants/sockets';
2 | import { getClient } from '@bpanel/bpanel-utils';
3 |
4 | const client = getClient();
5 |
6 | export function connectSocket() {
7 | return (dispatch, getState) => {
8 | dispatch({
9 | type: CONNECT_SOCKET,
10 | bsock: {
11 | host: client.host ? client.host : 'localhost',
12 | port: getState().app.socketPort,
13 | namespace: client.id
14 | }
15 | });
16 | };
17 | }
18 |
19 | export const disconnectSocket = () => ({
20 | type: DISCONNECT_SOCKET,
21 | bsock: {}
22 | });
23 |
24 | export default {
25 | connectSocket,
26 | disconnectSocket
27 | };
28 |
--------------------------------------------------------------------------------
/webapp/store/actions/themeActions.js:
--------------------------------------------------------------------------------
1 | import { UPDATE_THEME } from '../constants/theme';
2 | import themeConfig from '../../config/themeConfig/';
3 | import { decorateTheme } from '../../plugins/plugins';
4 | const { themeCreator } = themeConfig;
5 |
6 | export function updateTheme() {
7 | const theme = decorateTheme(themeCreator);
8 | document.body.className = theme.app.body;
9 | document.documentElement.className = theme.app.body;
10 | return {
11 | type: UPDATE_THEME,
12 | payload: theme
13 | };
14 | }
15 |
16 | export default {
17 | updateTheme
18 | };
19 |
--------------------------------------------------------------------------------
/webapp/store/constants/app.js:
--------------------------------------------------------------------------------
1 | export const SET_WINDOW = 'SET_WINDOW';
2 | export const STATE_REFRESHED = 'STATE_REFRESHED';
3 | export const RESET_STATE = 'RESET_STATE';
4 | export const APP_LOADED = 'APP_LOADED';
5 |
--------------------------------------------------------------------------------
/webapp/store/constants/chain.js:
--------------------------------------------------------------------------------
1 | export const NEW_BLOCK = 'NEW_BLOCK';
2 | export const SET_CHAIN_INFO = 'SET_CHAIN_INFO';
3 | export const SET_GENESIS = 'SET_GENESIS';
4 |
--------------------------------------------------------------------------------
/webapp/store/constants/clients.js:
--------------------------------------------------------------------------------
1 | export const SET_CLIENTS = 'SET_CLIENTS';
2 | export const SET_CURRENT_CLIENT = 'SET_CURRENT_CLIENT';
3 | export const RESET_STATE = 'RESET_STATE';
4 | export const UPDATE_CLIENT = 'UPDATE_CLIENT';
5 | export const ADD_CLIENT = 'ADD_CLIENT';
6 | export const REMOVE_CLIENT = 'REMOVE_CLIENT';
7 | export const CLEAR_CURRENT_CLIENT = 'CLEAR_CURRENT_CLIENT';
8 | export const CLIENTS_HYDRATED = 'CLIENTS_HYDRATED';
9 |
--------------------------------------------------------------------------------
/webapp/store/constants/index.js:
--------------------------------------------------------------------------------
1 | import * as chain from './chain';
2 | import * as node from './node';
3 | import * as plugins from './plugins';
4 | import * as sockets from './sockets';
5 | import * as theme from './theme';
6 | import * as wallets from './wallets';
7 | import * as app from './app';
8 |
9 | export default {
10 | app,
11 | chain,
12 | node,
13 | plugins,
14 | sockets,
15 | theme,
16 | wallets
17 | };
18 |
--------------------------------------------------------------------------------
/webapp/store/constants/nav.js:
--------------------------------------------------------------------------------
1 | export const ADD_SIDE_NAV = 'ADD_SIDE_NAV';
2 | export const REMOVE_SIDE_NAV = 'REMOVE_SIDE_NAV';
3 | export const SET_SIDE_NAV = 'SET_SIDE_NAV';
4 |
--------------------------------------------------------------------------------
/webapp/store/constants/node.js:
--------------------------------------------------------------------------------
1 | export const SET_NODE = 'SET_NODE';
2 | export const SET_LOADING = 'SET_LOADING';
3 | export const CHAIN_PROGRESS = 'CHAIN_PROGRESS';
4 |
--------------------------------------------------------------------------------
/webapp/store/constants/plugins.js:
--------------------------------------------------------------------------------
1 | export const ADD_PLUGIN_META = 'ADD_PLUGIN_META';
2 |
--------------------------------------------------------------------------------
/webapp/store/constants/sockets.js:
--------------------------------------------------------------------------------
1 | export const CONNECT_SOCKET = 'CONNECT_SOCKET';
2 | export const DISCONNECT_SOCKET = 'DISCONNECT_SOCKET';
3 | export const EMIT_SOCKET = 'EMIT_SOCKET';
4 |
5 | // This array will get added to by plugins
6 | // who need to set their own listeners
7 | export const listeners = [];
8 |
--------------------------------------------------------------------------------
/webapp/store/constants/theme.js:
--------------------------------------------------------------------------------
1 | export const UPDATE_THEME = 'UPDATE_THEME';
2 |
--------------------------------------------------------------------------------
/webapp/store/constants/wallets.js:
--------------------------------------------------------------------------------
1 | export const ADD_ACCOUNTS = 'ADD_ACCOUNTS';
2 | export const ADD_WALLET = 'ADD_WALLET';
3 | export const REMOVE_WALLET = 'REMOVE_WALLET';
4 |
--------------------------------------------------------------------------------
/webapp/store/index.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware } from 'redux';
2 | import { composeWithDevTools } from 'redux-devtools-extension';
3 | import thunkMiddleware from 'redux-thunk';
4 | import bsockMiddleware from 'bsock-middleware';
5 | import effects from 'effects-middleware';
6 | import { persistStore } from 'redux-persist';
7 |
8 | import { errorCatcherMiddleware, clientMiddleware } from './middleware';
9 | import getPersistedReducer from './rootReducer';
10 | import { getConstants } from '../plugins/plugins';
11 | import { loadPlugins, pluginMiddleware } from '../plugins/plugins';
12 |
13 | export default async () => {
14 | // load plugin information before setting up app and store
15 | const appConfig = await import('../config/appConfig');
16 | const config = await appConfig.default();
17 | await loadPlugins(config);
18 | const persistedReducer = getPersistedReducer();
19 |
20 | const middleware = [
21 | // eslint-disable-next-line no-console
22 | errorCatcherMiddleware(console.error),
23 | clientMiddleware,
24 | thunkMiddleware,
25 | pluginMiddleware,
26 | effects
27 | ];
28 | let compose,
29 | debug = false;
30 |
31 | // get extended listeners
32 | const { listeners } = getConstants('sockets');
33 |
34 | if (NODE_ENV === 'development') {
35 | const composeEnhancers = composeWithDevTools({
36 | autoPause: true,
37 | maxAge: 15
38 | });
39 | debug = true;
40 | middleware.push(bsockMiddleware({ debug, listeners }));
41 | compose = composeEnhancers(applyMiddleware(...middleware));
42 | } else {
43 | middleware.push(bsockMiddleware({ debug, listeners }));
44 | compose = applyMiddleware(...middleware);
45 | }
46 |
47 | const store = createStore(persistedReducer, compose);
48 | persistStore(store);
49 | return store;
50 | };
51 |
--------------------------------------------------------------------------------
/webapp/store/middleware.js:
--------------------------------------------------------------------------------
1 | import { getClient } from '@bpanel/bpanel-utils';
2 |
3 | import {
4 | SET_CURRENT_CLIENT,
5 | CLEAR_CURRENT_CLIENT,
6 | RESET_STATE
7 | } from './constants/clients';
8 |
9 | export function errorCatcherMiddleware(errorHandler) {
10 | return function(store) {
11 | return function(next) {
12 | return function(action) {
13 | try {
14 | return next(action);
15 | } catch (err) {
16 | const message = `There was an error in the middleware for the action ${action.type}: `;
17 | errorHandler(message, err, store.getState, action, store.dispatch);
18 | return err;
19 | }
20 | };
21 | };
22 | };
23 | }
24 |
25 | export function clientMiddleware({ dispatch }) {
26 | return function(next) {
27 | return function(action) {
28 | const client = getClient();
29 | if (action.type === SET_CURRENT_CLIENT) {
30 | const clientInfo = action.payload;
31 |
32 | if (!clientInfo.chain && clientInfo.id)
33 | // eslint-disable-next-line no-console
34 | console.warn(
35 | `No chain was set for client ${clientInfo.id}, defaulting to "bitcoin"`
36 | );
37 | const { id, chain = 'bitcoin' } = clientInfo;
38 | // set the client info for the global client
39 | if (id) client.setClientInfo(id, chain);
40 | } else if (action.type === CLEAR_CURRENT_CLIENT) {
41 | client.reset();
42 | dispatch({ type: RESET_STATE });
43 | }
44 | return next(action);
45 | };
46 | };
47 | }
48 |
--------------------------------------------------------------------------------
/webapp/store/propTypes/index.js:
--------------------------------------------------------------------------------
1 | export { default as pluginMetadata } from './pluginMetadata';
2 |
--------------------------------------------------------------------------------
/webapp/store/propTypes/pluginMetadata.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 |
3 | export const pluginMetaProps = {
4 | name: PropTypes.string.isRequired,
5 | order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
6 | parent: PropTypes.string,
7 | icon: PropTypes.string
8 | };
9 |
10 | export const sortedMetadataPropTypes = PropTypes.arrayOf(
11 | PropTypes.oneOfType([
12 | PropTypes.node,
13 | PropTypes.shape({
14 | ...pluginMetaProps,
15 | subItems: PropTypes.arrayOf(
16 | PropTypes.oneOfType([PropTypes.node, PropTypes.shape(pluginMetaProps)])
17 | )
18 | })
19 | ])
20 | );
21 |
22 | export default {
23 | pluginMetaProps,
24 | sortedMetadataPropTypes
25 | };
26 |
--------------------------------------------------------------------------------
/webapp/store/reducers/app.js:
--------------------------------------------------------------------------------
1 | import { SET_WINDOW, CLIENTS_HYDRATED } from '../constants/app';
2 |
3 | const initialState = {
4 | port: null,
5 | protocol: null,
6 | ssl: null,
7 | socketPort: parseInt(BPANEL_SOCKET_PORT, 10),
8 | clientsHydrated: false
9 | };
10 |
11 | const appState = (state = initialState, action) => {
12 | let newState = { ...state };
13 | const { type, payload = {} } = action;
14 | switch (type) {
15 | case SET_WINDOW: {
16 | const { port, protocol, ssl, hostname } = payload;
17 | newState.port = port;
18 | newState.protocol = protocol;
19 | newState.ssl = ssl;
20 | newState.hostname = hostname;
21 | return newState;
22 | }
23 |
24 | default:
25 | return state;
26 | }
27 | };
28 |
29 | export default appState;
30 |
--------------------------------------------------------------------------------
/webapp/store/reducers/chain.js:
--------------------------------------------------------------------------------
1 | import { SET_CHAIN_INFO, SET_GENESIS } from '../constants/chain';
2 | import { decorateReducer } from '../../plugins/plugins';
3 |
4 | const initialState = {
5 | height: 0,
6 | progress: 0
7 | };
8 |
9 | const chainState = (state = initialState, action) => {
10 | let newState = { ...state };
11 | switch (action.type) {
12 | case SET_CHAIN_INFO: {
13 | newState = { ...state, ...action.payload };
14 | return newState;
15 | }
16 |
17 | case SET_GENESIS: {
18 | newState.genesis = action.payload;
19 | return newState;
20 | }
21 |
22 | default:
23 | return state;
24 | }
25 | };
26 |
27 | export default decorateReducer(chainState, 'chainReducer');
28 |
--------------------------------------------------------------------------------
/webapp/store/reducers/clients.js:
--------------------------------------------------------------------------------
1 | import {
2 | ADD_CLIENT,
3 | REMOVE_CLIENT,
4 | SET_CLIENTS,
5 | SET_CURRENT_CLIENT,
6 | UPDATE_CLIENT,
7 | CLEAR_CURRENT_CLIENT,
8 | CLIENTS_HYDRATED
9 | } from '../constants/clients';
10 | import assert from 'bsert';
11 |
12 | const initialState = {
13 | currentClient: {},
14 | clients: {}
15 | };
16 |
17 | const clientsState = (state = initialState, action) => {
18 | let newState = { ...state };
19 | const { payload, type } = action;
20 | switch (type) {
21 | case SET_CLIENTS: {
22 | newState.clients = payload;
23 | return newState;
24 | }
25 |
26 | case SET_CURRENT_CLIENT: {
27 | assert(
28 | typeof payload === 'object' && payload.id,
29 | 'Must have a client object with an id'
30 | );
31 | newState.currentClient = payload;
32 | return newState;
33 | }
34 |
35 | case UPDATE_CLIENT: {
36 | const { id, info } = payload;
37 | assert(
38 | typeof payload === 'object' && id && info,
39 | 'Must have a client object with an id and info'
40 | );
41 |
42 | // make a copy of the clients object to keep redux immutability
43 | newState.clients = { ...newState.clients };
44 | assert(newState.clients[id], `Client "${id}" does not exist`);
45 | newState.clients[id] = info;
46 | return newState;
47 | }
48 |
49 | case ADD_CLIENT: {
50 | const { id, info } = payload;
51 | assert(
52 | !newState.clients[payload.id],
53 | `Client with the id ${payload.id} already exists. Can't add duplicate.`
54 | );
55 | newState.clients = { ...newState.clients, [id]: info };
56 | return newState;
57 | }
58 |
59 | case REMOVE_CLIENT: {
60 | const { id } = payload;
61 | delete newState.clients[id];
62 | newState.clients = { ...newState.clients };
63 | return newState;
64 | }
65 |
66 | case CLEAR_CURRENT_CLIENT: {
67 | newState.currentClient = {};
68 | return newState;
69 | }
70 |
71 | case CLIENTS_HYDRATED: {
72 | newState.clientsHydrated = action.payload;
73 | return newState;
74 | }
75 |
76 | default:
77 | return state;
78 | }
79 | };
80 |
81 | export default clientsState;
82 |
--------------------------------------------------------------------------------
/webapp/store/reducers/index.js:
--------------------------------------------------------------------------------
1 | export { default as node } from './node';
2 | export { default as pluginMetadata } from './pluginMetadata';
3 | export { default as chain } from './chain';
4 | export { default as theme } from './theme';
5 | export { default as wallets } from './wallets';
6 | export { default as nav } from './nav';
7 | export { default as clients } from './clients';
8 | export { default as app } from './app';
9 |
--------------------------------------------------------------------------------
/webapp/store/reducers/nav.js:
--------------------------------------------------------------------------------
1 | import { ADD_SIDE_NAV, REMOVE_SIDE_NAV, SET_SIDE_NAV } from '../constants/nav';
2 | import { createUnique } from '../../utils/helpers';
3 |
4 | const initialState = {
5 | sidebar: []
6 | };
7 |
8 | const navStore = (state = initialState, action) => {
9 | const newState = { ...state };
10 | const { type, payload } = action;
11 |
12 | switch (type) {
13 | case ADD_SIDE_NAV: {
14 | const sidebar = [...newState.sidebar];
15 | // check if there are any duplicates. Will return true
16 | // if at least one item in the sidebar has the same name or id
17 | // as the item attempting to be added
18 | const duplicates = sidebar.some(
19 | nav => nav.name === payload.name || (!!nav.id && nav.id === payload.id)
20 | );
21 |
22 | if (duplicates)
23 | // eslint-disable-next-line no-console
24 | console.error(`Can't have duplicate names or ids for nav items`);
25 | else {
26 | const paths = sidebar.map(item => item.pathName);
27 | const names = sidebar.map(item => item.displayName);
28 | payload.pathName = createUnique(payload.pathName, new Set(paths));
29 | payload.displayName = createUnique(payload.displayName, new Set(names));
30 | newState.sidebar = [...sidebar, payload];
31 | }
32 |
33 | return newState;
34 | }
35 |
36 | case REMOVE_SIDE_NAV: {
37 | const sidebar = [...newState.sidebar];
38 | const index = sidebar.findIndex(
39 | item => item.name === payload.name || item.id === payload.id
40 | );
41 | if (index > -1) sidebar.splice(index, 1);
42 | newState.sidebar = sidebar;
43 | return newState;
44 | }
45 |
46 | case SET_SIDE_NAV: {
47 | if (!newState.sidebar.length) newState.sidebar = payload;
48 | return newState;
49 | }
50 |
51 | default:
52 | return newState;
53 | }
54 | };
55 |
56 | export default navStore;
57 |
--------------------------------------------------------------------------------
/webapp/store/reducers/node.js:
--------------------------------------------------------------------------------
1 | import { decorateReducer } from '../../plugins/plugins';
2 | import { SET_NODE, SET_LOADING } from '../constants/node';
3 |
4 | const initialState = {
5 | node: {},
6 | memory: {},
7 | mempool: {},
8 | time: {},
9 | loading: true
10 | };
11 |
12 | const nodeState = (state = initialState, action) => {
13 | let newState = { ...state };
14 | switch (action.type) {
15 | case SET_NODE: {
16 | const { version, network } = action.payload;
17 | const node = { version, network };
18 | newState = { ...newState, ...action.payload, node };
19 | return newState;
20 | }
21 |
22 | case SET_LOADING:
23 | newState.loading = action.payload;
24 | return newState;
25 |
26 | default:
27 | return state;
28 | }
29 | };
30 |
31 | export default decorateReducer(nodeState, 'nodeReducer');
32 |
--------------------------------------------------------------------------------
/webapp/store/reducers/pluginMetadata.js:
--------------------------------------------------------------------------------
1 | import { ADD_PLUGIN_META } from '../constants/plugins';
2 | import { initialMetadata } from '../../plugins/plugins';
3 |
4 | const initialPlugins = initialMetadata();
5 | const pluginMetadata = (state = initialPlugins, action) => {
6 | switch (action.type) {
7 | case ADD_PLUGIN_META: {
8 | const newPlugin = action.payload;
9 | if (!state[newPlugin.name]) {
10 | return Object.assign({}, state, { [newPlugin.name]: newPlugin });
11 | // TODO call a reload function to reload plugins
12 | } else {
13 | throw new Error(`${newPlugin.name} already exists`);
14 | }
15 | }
16 |
17 | default:
18 | return state;
19 | }
20 | };
21 |
22 | export default pluginMetadata;
23 |
--------------------------------------------------------------------------------
/webapp/store/reducers/theme.js:
--------------------------------------------------------------------------------
1 | import { UPDATE_THEME } from '../constants/theme';
2 | import themeConfig from '../../config/themeConfig/';
3 | const { themeCreator } = themeConfig;
4 |
5 | const themeReducer = (state = themeCreator(), action) => {
6 | let newState = { ...state };
7 | switch (action.type) {
8 | case UPDATE_THEME: {
9 | newState = { ...newState, ...action.payload };
10 | return newState;
11 | }
12 |
13 | default:
14 | return state;
15 | }
16 | };
17 |
18 | export default themeReducer;
19 |
--------------------------------------------------------------------------------
/webapp/store/reducers/wallets.js:
--------------------------------------------------------------------------------
1 | import { decorateReducer } from '../../plugins/plugins';
2 | import { ADD_ACCOUNTS, ADD_WALLET, REMOVE_WALLET } from '../constants/wallets';
3 |
4 | /*
5 | wallets state should be structured where key is wallet id
6 | and value is object of wallet properties
7 | e.g.
8 | {
9 | primary: {
10 | balance,
11 | receiveAddress,
12 | changeAddress,
13 | ...
14 | }
15 | }
16 | */
17 |
18 | const initialState = {};
19 |
20 | const walletsState = (state = initialState, action) => {
21 | let newState = { ...state };
22 | switch (action.type) {
23 | case ADD_WALLET: {
24 | const { id, ...rest } = action.payload;
25 |
26 | if (!(id in newState)) {
27 | newState[id] = {};
28 | }
29 |
30 | // don't overwrite old data
31 | newState[id] = { ...newState[id], ...rest };
32 | return newState;
33 | }
34 |
35 | case REMOVE_WALLET: {
36 | const { id } = action.payload;
37 | delete newState[id];
38 | return newState;
39 | }
40 |
41 | case ADD_ACCOUNTS: {
42 | const { id, accounts } = action.payload;
43 |
44 | if (!(id in newState)) {
45 | newState[id] = {};
46 | }
47 | newState[id].accounts = accounts;
48 | return newState;
49 | }
50 |
51 | default:
52 | return state;
53 | }
54 | };
55 |
56 | export default decorateReducer(walletsState, 'walletsReducer');
57 |
--------------------------------------------------------------------------------
/webapp/store/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import { persistReducer } from 'redux-persist';
3 | import storage from 'redux-persist/lib/storage';
4 |
5 | import { getPluginReducers, getPersistWhiteList } from '../plugins/plugins';
6 | import * as reducers from './reducers';
7 | import { RESET_STATE } from './constants/clients';
8 |
9 | export default function getPersistedReducer() {
10 | const rootPersistConfig = {
11 | key: 'root',
12 | storage,
13 | whitelist: ['clients']
14 | };
15 |
16 | const pluginsPersistConfig = {
17 | key: 'plugins',
18 | storage,
19 | whitelist: getPersistWhiteList()
20 | };
21 |
22 | // persistReducer will break the store if there are no
23 | // plugin reducers to pass it so set to null if getPluginReducers()
24 | // doesn't pass anything
25 | let pluginReducers = getPluginReducers();
26 | pluginReducers = pluginReducers
27 | ? persistReducer(pluginsPersistConfig, pluginReducers)
28 | : null;
29 |
30 | const appReducers = combineReducers({
31 | ...reducers,
32 | plugins: pluginReducers
33 | });
34 |
35 | const rootReducer = (state, action) => {
36 | if (action.type === RESET_STATE) {
37 | // need to clear local storage as well so it's not persisted
38 | Object.keys(state).forEach(key => {
39 | if (key !== 'plugins') storage.removeItem(`persist:${key}`);
40 | });
41 |
42 | state.chain = undefined;
43 | state.wallets = undefined;
44 | state.node = undefined;
45 | // after this clearing below, it's no longer in the local storage in browser
46 | if (state.plugins)
47 | Object.keys(state.plugins).forEach(key => {
48 | if (key !== '_persist') state.plugins[key] = undefined;
49 | });
50 | }
51 |
52 | return appReducers(state, action);
53 | };
54 |
55 | return persistReducer(rootPersistConfig, rootReducer);
56 | }
57 |
--------------------------------------------------------------------------------
/webapp/store/selectors/index.js:
--------------------------------------------------------------------------------
1 | export { default as nav } from './nav';
2 |
--------------------------------------------------------------------------------
/webapp/store/selectors/nav.js:
--------------------------------------------------------------------------------
1 | import assert from 'assert';
2 | import { createSelector } from 'reselect';
3 | import { plugins } from '@bpanel/bpanel-utils';
4 |
5 | const { comparePlugins } = plugins;
6 |
7 | const getMetadataList = state => Object.values(state.pluginMetadata);
8 | const getSidebarItems = state => state.nav.sidebar;
9 |
10 | /* Sort plugin metadata (by order and name) and insert and
11 | * sort children after parents
12 | * @param {Array{}} pluginMeta - unsorted array of plugin Metadata
13 | * @returns {Array{}} plugins - returns an array of sorted metadata objects
14 | */
15 | export const sortPluginMetadata = (pluginMeta = []) => {
16 | assert(Array.isArray(pluginMeta), 'Must pass array of metadata');
17 |
18 | const { parents, subItems } = pluginMeta.reduce(
19 | ({ parents, subItems }, plugin) => {
20 | if (plugin.parent) {
21 | // if it has a parent then add it to corresponding array in subItems map
22 | // this is so that we can get all subItems and then sort later
23 | const { parent } = plugin;
24 | if (!subItems.has(parent)) {
25 | subItems.set(parent, [plugin]);
26 | } else {
27 | const children = subItems.get(parent);
28 | children.push(plugin);
29 | subItems.set(parent, children);
30 | }
31 | } else {
32 | parents.push(plugin);
33 | }
34 | return { parents, subItems };
35 | },
36 | { parents: [], subItems: new Map() }
37 | );
38 |
39 | return parents.sort(comparePlugins).reduce((sortedPluginMetadata, parent) => {
40 | if (subItems.has(parent.name)) {
41 | const children = subItems.get(parent.name);
42 | children.sort(comparePlugins);
43 | return [...sortedPluginMetadata, parent, ...children];
44 | }
45 | return [...sortedPluginMetadata, parent];
46 | }, []);
47 | };
48 |
49 | /* Sanitize paths
50 | * @param {Array{}} navItems - array of navItem objects
51 | * @returns {Array{}} navItems - nav items with sanitized paths
52 | */
53 | export function sanitizePaths(navItems) {
54 | return navItems.map(item => {
55 | if (item.pathName && item.pathName.indexOf('http') !== 0)
56 | item.pathName = item.pathName.replace(/^(\/)+/, '');
57 | return item;
58 | });
59 | }
60 |
61 | /* Update list of plugin metadata (or nav objects) to have properly
62 | * formatted, nested paths
63 | * e.g. { name: 'child', parent: 'parent' } becomes
64 | * { name: 'child', parent: 'parent', pathName: 'parent/child'}
65 | * @param {Array{}} metadata - Array of plugin metadata objects
66 | * @returns {Array{}} plugins - returns an array of metadata w/ updated paths
67 | */
68 | export function getNestedPaths(metadata) {
69 | assert(Array.isArray(metadata), 'Must pass array of metadata');
70 | return metadata.reduce((updated, _plugin) => {
71 | const plugin = { ..._plugin };
72 | // setting a custom pathName if a sub-item and has no
73 | // existing pathName set in metadata
74 | if (plugin.parent && !plugin.pathName) {
75 | // if this plugin is a child then update its pathName property
76 | // to nest behind the parent
77 | const parentIndex = metadata.findIndex(
78 | item => item.name === plugin.parent
79 | );
80 |
81 | const parent = metadata[parentIndex];
82 | // eslint-disable-next-line no-console
83 | console.assert(
84 | parent,
85 | `Parent ${plugin.parent} could not be found for child ${plugin.name}`
86 | );
87 | // get parent path, if none, use name
88 | const parentPath = parent.pathName ? parent.pathName : parent.name;
89 |
90 | // get plugin path, if none, use name
91 | let pathName = plugin.pathName ? plugin.pathName : plugin.name;
92 |
93 | // sanitize of any other uri constructions like other nested paths
94 | pathName = pathName.slice(pathName.lastIndexOf('/') + 1);
95 |
96 | // make nested path
97 | pathName = `${parentPath}/${pathName}`;
98 | plugin.pathName = pathName;
99 | }
100 | updated.push(plugin);
101 | return updated;
102 | }, []);
103 | }
104 |
105 | export function getNavItems(metadata = []) {
106 | assert(Array.isArray(metadata), 'Must pass array to getNavItems');
107 | return metadata.filter(plugin => plugin.nav || plugin.sidebar);
108 | }
109 |
110 | // Properly compose metadata for navigation
111 | // sort list of metadata -> compose nested paths -> make paths unique
112 | function composeNavItems(_navItems = []) {
113 | assert(Array.isArray(_navItems), 'Must pass array to composeNavItems');
114 | let navItems = getNavItems(_navItems);
115 | navItems = sortPluginMetadata(navItems);
116 | navItems = sanitizePaths(navItems);
117 | navItems = getNestedPaths(navItems);
118 | return navItems;
119 | }
120 |
121 | // selectors for converting pluginMetadata to nav list
122 | export const sortedNavItems = createSelector(getMetadataList, composeNavItems);
123 |
124 | // selector for ordering and composing sidebar navigation items
125 | export const sortedSidebarItems = createSelector(
126 | getSidebarItems,
127 | composeNavItems
128 | );
129 |
130 | // Useful selector for the Panel which just needs to match names to paths
131 | export const uniquePathsByName = createSelector(getMetadataList, metadata =>
132 | metadata
133 | .filter(plugin => plugin.pathName)
134 | .reduce((paths, { name, pathName }) => ({ ...paths, [name]: pathName }), {})
135 | );
136 |
137 | export default {
138 | sortedNavItems,
139 | uniquePathsByName,
140 | sortedSidebarItems
141 | };
142 |
--------------------------------------------------------------------------------
/webapp/test/index.js:
--------------------------------------------------------------------------------
1 | // require all modules ending in "-test" from the
2 | // current directory and all subdirectories
3 | const testsContext = require.context('.', true, /-test$/);
4 |
5 | testsContext.keys().forEach(testsContext);
6 |
--------------------------------------------------------------------------------
/webapp/test/navSelector-test.js:
--------------------------------------------------------------------------------
1 | import { expect, assert } from 'chai';
2 | import sinon from 'sinon';
3 | import { plugins } from '@bpanel/bpanel-utils';
4 |
5 | import {
6 | sortPluginMetadata,
7 | getNavItems,
8 | getNestedPaths
9 | } from '../store/selectors/nav';
10 |
11 | describe('plugin selectors', () => {
12 | let sortedPlugins, subItems, parentItems, metadataList;
13 |
14 | beforeEach(() => {
15 | subItems = {
16 | 'some wallet func': {
17 | name: 'some wallet func',
18 | order: 1,
19 | nav: true,
20 | parent: 'wallets'
21 | },
22 | 'first wallet func': {
23 | name: 'first wallet func',
24 | order: 0,
25 | sidebar: true,
26 | parent: 'wallets'
27 | },
28 | 'special-plugin': {
29 | name: 'special-plugin',
30 | order: 0,
31 | nav: true,
32 | parent: 'xwallets'
33 | }
34 | };
35 |
36 | parentItems = {
37 | zwallets: {
38 | name: 'zwallets',
39 | icon: 'hdd-o',
40 | pathName: 'wallets',
41 | order: 1
42 | },
43 | wallets: {
44 | name: 'wallets',
45 | icon: 'hdd-o',
46 | pathName: 'wallets',
47 | nav: true,
48 | order: 1
49 | },
50 | dashboard: {
51 | name: 'dashboard',
52 | order: 0,
53 | nav: true,
54 | icon: 'home'
55 | },
56 | xwallets: {
57 | name: 'xwallets',
58 | icon: 'hdd-o',
59 | sidebar: true,
60 | displayName: 'zwallets',
61 | pathName: 'zwallets',
62 | order: 1
63 | }
64 | };
65 |
66 | metadataList = Object.values({ ...parentItems, ...subItems });
67 | sortedPlugins = sortPluginMetadata(metadataList);
68 | });
69 |
70 | describe('sortPluginMetadata', () => {
71 | it('should return an array of all plugins, parents and children', () => {
72 | const totalPlugins =
73 | Object.keys(parentItems).length + Object.keys(subItems).length;
74 | expect(sortedPlugins).to.have.length(totalPlugins);
75 | });
76 |
77 | it('should call comparePlugins for sorting on parents and subItems', () => {
78 | const spy = sinon.spy(Array.prototype, 'sort');
79 | sortPluginMetadata(metadataList);
80 | expect(spy.calledWith(plugins.comparePlugins)).to.be.true;
81 | const parentNames = Object.keys(parentItems).sort();
82 | expect(parentNames[0]).to.equal(sortedPlugins[0].name);
83 | });
84 |
85 | it('should only have two level hierarchy, no children w/ children', () => {
86 | const parents = new Set();
87 | sortedPlugins.forEach(plugin => {
88 | if (plugin.parent) parents.add(plugin.parent);
89 | });
90 | sortedPlugins.forEach(plugin => {
91 | if (plugin.parent)
92 | assert(
93 | !parents.has(plugin.name),
94 | `${plugin.name} has a parent and should not have children`
95 | );
96 | });
97 | });
98 |
99 | it('should add sorted subItems after parent', () => {
100 | // since parents and children are all on the same level in the array
101 | // in order to check children are in the right spot
102 | // we need to collect all chidlren first
103 | const subItems = new Map();
104 | sortedPlugins.forEach(plugin => {
105 | const { parent } = plugin;
106 | if (parent) {
107 | // if item has a parent, add it to the map, keyed by its parent
108 | if (subItems.has(parent)) {
109 | const children = subItems.get(parent);
110 | children.push(plugin);
111 | subItems.set(parent, children);
112 | } else {
113 | subItems.set(parent, [plugin]);
114 | }
115 | }
116 | });
117 |
118 | // when you find a parent, check that its children
119 | // follow it in the array
120 | sortedPlugins.forEach((plugin, index) => {
121 | // if we hit a plugin that is a key in our map
122 | // then the subsequent plugins in the array should match
123 | // the values in the map
124 | if (subItems.has(plugin.name)) {
125 | const children = subItems.get(plugin.name);
126 | let count = 0;
127 | while (count < children.length) {
128 | expect(sortedPlugins[index + count + 1]).to.deep.equal(
129 | children[count]
130 | );
131 | count++;
132 | }
133 | }
134 | });
135 | });
136 | });
137 |
138 | describe('getNavItems', () => {
139 | it('should only have items with sidebar or nav properties set to true', () => {
140 | const navItems = getNavItems(sortedPlugins);
141 | assert(navItems.length, 'Data set did not return any nav items');
142 | navItems.forEach(item =>
143 | assert(
144 | item.sidebar || item.nav,
145 | `${item.name} does not have nav or sidebar property set to true`
146 | )
147 | );
148 | });
149 | });
150 |
151 | describe('getNestedPaths', () => {
152 | it('should update child pathNames to be nested if has a parent', () => {
153 | const metadata = getNavItems(sortedPlugins);
154 | const nested = getNestedPaths(metadata);
155 | nested.forEach(plugin => {
156 | if (plugin.parent) {
157 | const parentIndex = metadata.findIndex(
158 | item => item.name === plugin.parent
159 | );
160 |
161 | const parent = metadata[parentIndex];
162 | const parentPath = parent.pathName ? parent.pathName : parent.name;
163 |
164 | expect(
165 | plugin.pathName === `${parentPath}/${plugin.pathName}`,
166 | `${plugin.name} did not nest its path in its parent correctly`
167 | );
168 | }
169 | });
170 | });
171 | });
172 | });
173 |
--------------------------------------------------------------------------------
/webapp/test/pluginMetadata-test.js:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 |
3 | import pluginMetadata from '../store/reducers/pluginMetadata';
4 | import { ADD_PLUGIN_META } from '../store/constants/plugins';
5 |
6 | describe('pluginMetadata reducer', () => {
7 | let state;
8 | beforeEach(() => {
9 | state = {
10 | dashboard: {
11 | name: 'dashboard',
12 | order: 0
13 | },
14 | wallets: {
15 | name: 'wallets',
16 | order: 1
17 | },
18 | testWallet: {
19 | name: 'testWallet',
20 | order: 0
21 | }
22 | };
23 | });
24 |
25 | describe('ADD_PLUGIN_META', () => {
26 | it('should throw error if plugin name already exists', () => {
27 | const action = {
28 | type: ADD_PLUGIN_META,
29 | payload: {
30 | name: 'dashboard'
31 | }
32 | };
33 | expect(() => {
34 | pluginMetadata(state, action);
35 | }).to.throw('already exists');
36 | });
37 |
38 | it('should add new plugin to store if not a duplicate', () => {
39 | const action = {
40 | type: ADD_PLUGIN_META,
41 | payload: {
42 | name: 'newPlugin'
43 | }
44 | };
45 | const newState = pluginMetadata(state, action);
46 |
47 | expect(Object.keys(newState)).to.have.length(
48 | Object.keys(state).length + 1
49 | );
50 | expect(newState[action.payload.name]).to.exist;
51 | });
52 | });
53 | });
54 |
--------------------------------------------------------------------------------
/webapp/test/utils-test.js:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 |
3 | import {
4 | addPlugin,
5 | checkMetadata,
6 | filterInternalProperties
7 | } from '../plugins/utils';
8 |
9 | describe('addPlugin', () => {
10 | let modules;
11 | beforeEach(() => {
12 | modules = [
13 | {
14 | metadata: {
15 | name: 'plugin1',
16 | version: '0.0.1'
17 | }
18 | },
19 | {
20 | metadata: {
21 | name: 'plugin2',
22 | version: '0.1.1'
23 | }
24 | },
25 | {
26 | metadata: {
27 | name: 'plugin3',
28 | version: '0.0.1'
29 | }
30 | }
31 | ];
32 | });
33 |
34 | it('should push a new plugin to the end of the array', () => {
35 | const plugin = {
36 | metadata: {
37 | name: 'plugin4',
38 | version: '0.0.1'
39 | }
40 | };
41 | const updatedModules = addPlugin(modules, plugin);
42 | expect(updatedModules[updatedModules.length - 1]).to.deep.equal(plugin);
43 | });
44 |
45 | it('should replace plugin of the same name if the version is smaller/older', () => {
46 | const plugin = { metadata: Object.assign({}, modules[1].metadata) };
47 | const newVersion = '0.10.1';
48 | plugin.metadata.version = newVersion;
49 | const updatedModules = addPlugin(modules, plugin);
50 |
51 | expect(updatedModules.length).to.equal(modules.length);
52 | expect(updatedModules[1].metadata.version).to.equal(newVersion);
53 | });
54 |
55 | it('should not add a plugin that already exists and has lesser version', () => {
56 | const plugin = { metadata: Object.assign({}, modules[1].metadata) };
57 | const newVersion = '0.0.5';
58 | plugin.metadata.version = newVersion;
59 | const updatedModules = addPlugin(modules, plugin);
60 |
61 | expect(updatedModules.length).to.equal(modules.length);
62 | expect(updatedModules[1].metadata.version).to.not.equal(newVersion);
63 | });
64 | });
65 |
66 | describe('checkMetadata', () => {
67 | it('should throw if there is no plugin name', () => {
68 | const test = {
69 | pathName: 'path',
70 | displayName: 'display',
71 | version: '0.0.1'
72 | };
73 | expect(() => checkMetadata(test)).to.throw();
74 | });
75 |
76 | it('should throw for file names that are not compatible with npm', () => {
77 | // examples from npm tests
78 | // https://github.com/npm/validate-npm-package-name/blob/master/test/index.js
79 | const invalid = [
80 | {
81 | name: ''
82 | },
83 | {
84 | name: ' leading'
85 | },
86 | {
87 | name: 'Capital'
88 | },
89 | {
90 | name: 'weird:character'
91 | },
92 | {
93 | name: '.start-period'
94 | },
95 | {
96 | name: ' _start-underscore'
97 | },
98 | {
99 | name: ' leading'
100 | },
101 | {
102 | name: 's/l/a/s/h/e/s'
103 | },
104 | {
105 | name: 'node_modules'
106 | },
107 | {
108 | name: 'favicon.ico'
109 | },
110 | {
111 | name: 'http'
112 | },
113 | {
114 | name:
115 | 'ifyouwanttogetthesumoftwonumberswherethosetwonumbersarechosenbyfindingthelargestoftwooutofthreenumbersandsquaringthemwhichismultiplyingthembyitselfthenyoushouldinputthreenumbersintothisfunctionanditwilldothatforyou-'
116 | }
117 | ];
118 |
119 | invalid.forEach(meta => expect(() => checkMetadata(meta)).to.throw());
120 | });
121 |
122 | it("should set displayName from name if it doesn't exist", () => {
123 | const testName = 'test-name';
124 | const expected = {
125 | name: testName,
126 | displayName: testName
127 | };
128 | const test = checkMetadata({ name: testName });
129 | expect(test).to.deep.equal(expected);
130 | });
131 | });
132 |
133 | describe('filterInternalProperties', () => {
134 | it('should skip properties whose key is prefaced with "_"', () => {
135 | const original = {
136 | _test1: 'fail',
137 | _test2: 'fail',
138 | test3: 'pass'
139 | };
140 | const final = {};
141 | filterInternalProperties(original, key => (final[key] = original[key]));
142 | for (let key in final) {
143 | expect(key[0] !== '_');
144 | }
145 | });
146 | });
147 |
--------------------------------------------------------------------------------
/webapp/test/utilsHelpers-test.js:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 |
3 | import { createUnique } from '../utils/helpers';
4 |
5 | describe('helpers', () => {
6 | describe('createUnique', () => {
7 | it('should return a copy of the same name if already unique', () => {
8 | const names = new Set();
9 | const original = 'test';
10 |
11 | const name = createUnique(original, names);
12 | expect(name).to.equal(original);
13 | });
14 |
15 | it('should increment name if already exists', () => {
16 | const names = new Set();
17 | const original = 'test';
18 | names.add(original);
19 | const test = createUnique(original, names);
20 | names.add(test);
21 | expect(test).to.equal(`${original}-1`);
22 |
23 | const secondTest = createUnique(original, names);
24 | expect(secondTest).to.equal(`${original}-2`);
25 | });
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/webapp/utils/createCss.js:
--------------------------------------------------------------------------------
1 | import { css } from 'aphrodite/no-important';
2 |
3 | // Search through the styleSheet object for aphrodite objects
4 | // that can be invoked with `css()`, then invoke css() on those objects
5 | export const createCss = styleSheet => {
6 | for (const k in styleSheet) {
7 | const currentVal = styleSheet[k];
8 | if (currentVal._definition) {
9 | styleSheet[k] = css(currentVal);
10 | } else if (typeof currentVal === 'object' && !Array.isArray(currentVal)) {
11 | createCss(currentVal);
12 | }
13 | }
14 | };
15 |
16 | export default { createCss };
17 |
--------------------------------------------------------------------------------
/webapp/utils/helpers.js:
--------------------------------------------------------------------------------
1 | import assert from 'bsert';
2 | /* Given a Set
3 | * @param {String} _name - name input to confirm if unique
4 | * @param {Set} set - set of names to confirm if unique or not
5 | * @returns {String} name - unique name given passed set of names
6 | */
7 | export function createUnique(_name, set) {
8 | assert(set instanceof Set, 'Must pass a set to test unique');
9 | let name = _name.slice();
10 | if (set.has(name)) {
11 | // find unique suffix by incrementing counter
12 | let counter = 1;
13 | while (set.has(`${name}-${counter}`)) {
14 | counter++;
15 | }
16 | return `${name}-${counter}`;
17 | }
18 | return name;
19 | }
20 |
21 | export default {
22 | createUnique
23 | };
24 |
--------------------------------------------------------------------------------
/webapp/utils/index.js:
--------------------------------------------------------------------------------
1 | export { default as createCss } from './createCss';
2 | export { default as helpers } from './helpers';
3 |
--------------------------------------------------------------------------------
14 |  %>)
15 |
16 |
15 |