added new plugin to menu

qortal-ui-core/src/components/sidenav-menu.js

@@ -1,14 +1,14 @@
-import { LitElement, html, css } from 'lit'
+import { LitElement, html, css } from 'lit';
-import { connect } from 'pwa-helpers'
+import { connect } from 'pwa-helpers';
-import { store } from '../store.js'
+import { store } from '../store.js';
-import { translate, translateUnsafeHTML } from 'lit-translate'
+import { translate, translateUnsafeHTML } from 'lit-translate';
 
-import '@polymer/paper-ripple'
+import '@polymer/paper-ripple';
-import '@vaadin/icon'
+import '@vaadin/icon';
-import '@vaadin/icons'
+import '@vaadin/icons';
 
-import '../functional-components/side-menu.js'
+import '../functional-components/side-menu.js';
-import '../functional-components/side-menu-item.js'
+import '../functional-components/side-menu-item.js';
 
 class SidenavMenu extends connect(store)(LitElement) {
 	static get properties() {
@@ -16,8 +16,9 @@ class SidenavMenu extends connect(store)(LitElement) {
 			config: { type: Object },
 			urls: { type: Object },
 			nodeType: { type: String, reflect: true },
-            theme: { type: String, reflect: true }
+			theme: { type: String, reflect: true },
-        }
+			addressInfo: { type: Object },
+		};
 	}
 
 	static get styles() {
@@ -31,7 +32,9 @@ class SidenavMenu extends connect(store)(LitElement) {
 					--item-text-color: var(--nav-text-color);
 					--item-icon-color: var(--nav-icon-color);
 					--item-border-color: var(--nav-border-color);
-                    --item-border-selected-color: var(--nav-border-selected-color);
+					--item-border-selected-color: var(
+						--nav-border-selected-color
+					);
 				}
 
 				.s-menu {
@@ -43,117 +46,217 @@ class SidenavMenu extends connect(store)(LitElement) {
 					border-top: 1px solid var(--border);
 					outline: none;
 				}
-            `
+			`,
-        ]
+		];
 	}
 
 	constructor() {
-        super()
+		super();
-        this.urls = []
+		this.urls = [];
-        this.nodeType = ''
+		this.nodeType = '';
-        this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
+		this.theme = localStorage.getItem('qortalTheme')
+			? localStorage.getItem('qortalTheme')
+			: 'light';
+		this.addressInfo = {};
 	}
 
 	render() {
+		console.log({ myStore: store.getState() });
 		return html`
 			<div class="s-menu">
 				<side-menu>
-                    ${this.renderNodeTypeMenu()}
+					${this.renderNodeTypeMenu()} ${this.renderNodeManagement()}
-                    ${this.renderNodeManagement()}
 				</side-menu>
 			</div>
-        `
+		`;
 	}
 
 	firstUpdated() {
-        this.getNodeType()
+		this.getNodeType();
 	}
 
 	async getNodeType() {
-        const myNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
+		const myNode =
-        const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
+			store.getState().app.nodeConfig.knownNodes[
-        const url = `${nodeUrl}/admin/info`
+				store.getState().app.nodeConfig.node
+			];
+		const nodeUrl =
+			myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
+		const url = `${nodeUrl}/admin/info`;
 		await fetch(url)
-        .then(response => {
+			.then((response) => {
-            return response.json()
+				return response.json();
 			})
-        .then(data => {
+			.then((data) => {
-            this.nodeType = data.type
+				this.nodeType = data.type;
 			})
-        .catch(err => {
+			.catch((err) => {
 				console.error('Request failed', err);
-        })
+			});
 	}
 
 	renderNodeTypeMenu() {
+		const addressInfo = this.addressInfo;
+		const isMinting = addressInfo?.error !== 124 && +addressInfo?.level > 0;
+
 		if (this.nodeType === 'lite') {
 			return html`
-                <side-menu-item label="${translate("sidemenu.wallets")}" href="/app/wallet" selected>
+				<side-menu-item
+					label="${translate('sidemenu.wallets')}"
+					href="/app/wallet"
+					selected
+				>
 					<vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon>
 				</side-menu-item>
-                <side-menu-item label="${translate("sidemenu.nameregistration")}" href="/app/name-registration">
+				<side-menu-item
-                    <vaadin-icon icon="vaadin:user-check" slot="icon"></vaadin-icon>
+					label="${translate('sidemenu.nameregistration')}"
+					href="/app/name-registration"
+				>
+					<vaadin-icon
+						icon="vaadin:user-check"
+						slot="icon"
+					></vaadin-icon>
 				</side-menu-item>
-                <side-menu-item label="${translate("sidemenu.datamanagement")}" href="/app/data-management">
+				<side-menu-item
-                    <vaadin-icon icon="vaadin:database" slot="icon"></vaadin-icon>
+					label="${translate('sidemenu.datamanagement')}"
+					href="/app/data-management"
+				>
+					<vaadin-icon
+						icon="vaadin:database"
+						slot="icon"
+					></vaadin-icon>
 				</side-menu-item>
-                <side-menu-item label="${translate("sidemenu.qchat")}" href="/app/q-chat">
+				<side-menu-item
+					label="${translate('sidemenu.qchat')}"
+					href="/app/q-chat"
+				>
 					<vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon>
 				</side-menu-item>
-            `
+			`;
 		} else {
 			return html`
-                <side-menu-item label="${translate("sidemenu.mintingdetails")}" href="/app/minting">
+				${isMinting
-                    <vaadin-icon icon="vaadin:info-circle" slot="icon"></vaadin-icon>
+					? html`<side-menu-item
-                </side-menu-item>
+							label="${translate('sidemenu.mintingdetails')}"
-                <side-menu-item label="${translate("sidemenu.wallets")}" href="/app/wallet" selected>
+							href="/app/minting"
+					  >
+							<vaadin-icon
+								icon="vaadin:info-circle"
+								slot="icon"
+							></vaadin-icon>
+					  </side-menu-item>`
+					: html`<side-menu-item
+							label="${translate('sidemenu.becomeAMinter')}"
+							href="/app/become-minter"
+					  >
+							<vaadin-icon
+								icon="vaadin:info-circle"
+								slot="icon"
+							></vaadin-icon>
+					  </side-menu-item>`}
+
+				<side-menu-item
+					label="${translate('sidemenu.wallets')}"
+					href="/app/wallet"
+					selected
+				>
 					<vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon>
 				</side-menu-item>
-                <side-menu-item label="${translate("sidemenu.tradeportal")}" href="/app/trade-portal">
+				<side-menu-item
-                    <vaadin-icon icon="vaadin:bullets" slot="icon"></vaadin-icon>
+					label="${translate('sidemenu.tradeportal')}"
+					href="/app/trade-portal"
+				>
+					<vaadin-icon
+						icon="vaadin:bullets"
+						slot="icon"
+					></vaadin-icon>
 				</side-menu-item>
-                <side-menu-item label="${translate("sidemenu.rewardshare")}" href="/app/reward-share">
+				<side-menu-item
-                    <vaadin-icon icon="vaadin:share-square" slot="icon"></vaadin-icon>
+					label="${translate('sidemenu.rewardshare')}"
+					href="/app/reward-share"
+				>
+					<vaadin-icon
+						icon="vaadin:share-square"
+						slot="icon"
+					></vaadin-icon>
 				</side-menu-item>
-                <side-menu-item label="${translate("sidemenu.nameregistration")}" href="/app/name-registration">
+				<side-menu-item
-                    <vaadin-icon icon="vaadin:user-check" slot="icon"></vaadin-icon>
+					label="${translate('sidemenu.nameregistration')}"
+					href="/app/name-registration"
+				>
+					<vaadin-icon
+						icon="vaadin:user-check"
+						slot="icon"
+					></vaadin-icon>
 				</side-menu-item>
-                <side-menu-item label="${translate("sidemenu.websites")}" href="/app/websites">
+				<side-menu-item
-                    <vaadin-icon icon="vaadin:desktop" slot="icon"></vaadin-icon>
+					label="${translate('sidemenu.websites')}"
+					href="/app/websites"
+				>
+					<vaadin-icon
+						icon="vaadin:desktop"
+						slot="icon"
+					></vaadin-icon>
 				</side-menu-item>
-                <side-menu-item label="${translate("sidemenu.datamanagement")}" href="/app/data-management">
+				<side-menu-item
-                    <vaadin-icon icon="vaadin:database" slot="icon"></vaadin-icon>
+					label="${translate('sidemenu.datamanagement')}"
+					href="/app/data-management"
+				>
+					<vaadin-icon
+						icon="vaadin:database"
+						slot="icon"
+					></vaadin-icon>
 				</side-menu-item>
-                <side-menu-item label="${translate("sidemenu.qchat")}" href="/app/q-chat">
+				<side-menu-item
+					label="${translate('sidemenu.qchat')}"
+					href="/app/q-chat"
+				>
 					<vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon>
 				</side-menu-item>
-                <side-menu-item label="${translate("sidemenu.groupmanagement")}" href="/app/group-management">
+				<side-menu-item
+					label="${translate('sidemenu.groupmanagement')}"
+					href="/app/group-management"
+				>
 					<vaadin-icon icon="vaadin:group" slot="icon"></vaadin-icon>
 				</side-menu-item>
-                <side-menu-item label="${translate("sidemenu.puzzles")}" href="/app/puzzles">
+				<side-menu-item
-                    <vaadin-icon icon="vaadin:puzzle-piece" slot="icon"></vaadin-icon>
+					label="${translate('sidemenu.puzzles')}"
+					href="/app/puzzles"
+				>
+					<vaadin-icon
+						icon="vaadin:puzzle-piece"
+						slot="icon"
+					></vaadin-icon>
 				</side-menu-item>
-            `
+			`;
 		}
 	}
 
 	renderNodeManagement() {
-        const checkNodeManagement = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
+		const checkNodeManagement =
-        if (checkNodeManagement.enableManagement = true) {
+			store.getState().app.nodeConfig.knownNodes[
+				store.getState().app.nodeConfig.node
+			];
+		console.log({ store1: store.getState().app });
+		if ((checkNodeManagement.enableManagement = true)) {
 			return html`
-                <side-menu-item label="${translate("sidemenu.nodemanagement")}" href="/app/node-management">
+				<side-menu-item
+					label="${translate('sidemenu.nodemanagement')}"
+					href="/app/node-management"
+				>
 					<vaadin-icon icon="vaadin:cloud" slot="icon"></vaadin-icon>
 				</side-menu-item>
-            `
+			`;
 		} else {
-            return html``
+			return html``;
 		}
 	}
 
 	stateChanged(state) {
-        this.config = state.config
+		this.config = state.config;
-        this.urls = state.app.registeredUrls
+		this.urls = state.app.registeredUrls;
+		this.addressInfo = state.app.accountInfo.addressInfo;
 	}
 }
 
-window.customElements.define('sidenav-menu', SidenavMenu)
+window.customElements.define('sidenav-menu', SidenavMenu);