new separate components

qortal-ui-plugins/plugins/core/become-minter/become-minter.src.js

@@ -13,8 +13,8 @@ import '@material/mwc-button';
 import '@material/mwc-textfield';
 import '@vaadin/button';
 import { pageStyles } from './become-minter-css.js';
-import './components/not-sponsored';
+import './components/not-sponsored.src';
-import './components/yes-sponsored';
+import './components/yes-sponsored.src';
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
 
 class BecomeMinter extends LitElement {

qortal-ui-plugins/plugins/core/become-minter/components/not-sponsored.src.js

@@ -0,0 +1,139 @@
+import { LitElement, html } from 'lit';
+import { Epml } from '../../../../epml.js';
+import '../../components/ButtonIconCopy.js';
+import { use, translate, registerTranslateConfig } from 'lit-translate';
+
+registerTranslateConfig({
+	loader: (lang) => fetch(`/language/${lang}.json`).then((res) => res.json()),
+});
+import '@polymer/paper-spinner/paper-spinner-lite.js';
+
+import '@material/mwc-button';
+import '@material/mwc-textfield';
+import '@vaadin/button';
+import { pageStyles } from '../become-minter-css.js';
+const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
+// hello
+class NotSponsored extends LitElement {
+	static get properties() {
+		return {
+			isLoadingSponsorshipKeySubmit: { type: Boolean },
+			sponsorshipKeyValue: { type: String },
+			addMintingAccountMessage: { type: String },
+		};
+	}
+
+	static styles = [pageStyles];
+
+	constructor() {
+		super();
+		this.isLoadingSponsorshipKeySubmit = false;
+		this.sponsorshipKeyValue = '';
+		this.addMintingAccountMessage = '';
+	}
+
+	renderErr1Text() {
+		return html`${translate('nodepage.nchange27')}`;
+	}
+
+	renderErr2Text() {
+		return html`${translate('nodepage.nchange28')}`;
+	}
+
+	getApiKey() {
+		const myNode =
+			window.parent.reduxStore.getState().app.nodeConfig.knownNodes[
+				window.parent.reduxStore.getState().app.nodeConfig.node
+			];
+		let apiKey = myNode.apiKey;
+		return apiKey;
+	}
+
+	addMintingAccount(e) {
+		this.isLoadingSponsorshipKeySubmit = true;
+		this.addMintingAccountMessage = 'Loading...';
+
+		parentEpml
+			.request('apiCall', {
+				url: `/admin/mintingaccounts?apiKey=${this.getApiKey()}`,
+				method: 'POST',
+				body: this.sponsorshipKeyValue,
+			})
+			.then((res) => {
+				if (res === true) {
+					this.updateMintingAccounts();
+					this.sponsorshipKeyValue = '';
+					this.addMintingAccountMessage = this.renderErr1Text();
+					this.isLoadingSponsorshipKeySubmit = false;
+				} else {
+					this.sponsorshipKeyValue = '';
+					this.addMintingAccountMessage = this.renderErr2Text();
+					this.isLoadingSponsorshipKeySubmit = false;
+				}
+			});
+	}
+
+	inputHandler(e) {
+		this.sponsorshipKeyValue = e.target.value;
+	}
+
+	render() {
+		return html`
+			<div class="inner-container">
+				<div class="sub-main">
+					<h2 class="level-black">
+						${translate('becomeMinterPage.bchange2')}
+					</h2>
+					<p class="description">
+						${translate('becomeMinterPage.bchange3')}
+					</p>
+					<h2 class="level-black">
+						${translate('becomeMinterPage.bchange4')}
+					</h2>
+					<p class="description">
+						${translate('becomeMinterPage.bchange5')}
+					</p>
+					<p class="description">
+						${translate('becomeMinterPage.bchange6')}
+					</p>
+
+					<p class="message">${this.addMintingAccountMessage}</p>
+					<div class="form-wrapper">
+						<div class="form-item form-item--input">
+							<mwc-textfield
+								?disabled="${this
+									.isLoadingSponsorshipKeySubmit}"
+								label="${translate(
+									'becomeMinterPage.bchange8'
+								)}"
+								id="addSponsorshipKey"
+								@input="${this.inputHandler}"
+								.value="${this.sponsorshipKeyValue || ''}"
+								fullWidth
+							>
+							</mwc-textfield>
+						</div>
+
+						<div class="form-item form-item--button">
+							<vaadin-button
+								?disabled="${this
+									.isLoadingSponsorshipKeySubmit}"
+								@click="${this.addMintingAccount}"
+							>
+								${this.isLoadingSponsorshipKeySubmit === false
+									? html`${translate(
+											'becomeMinterPage.bchange9'
+									  )}`
+									: html`<paper-spinner-lite
+											active
+									  ></paper-spinner-lite>`}
+							</vaadin-button>
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+}
+
+window.customElements.define('not-sponsored', NotSponsored);

qortal-ui-plugins/plugins/core/become-minter/components/yes-sponsored.src.js

@@ -0,0 +1,123 @@
+import { LitElement, html } from 'lit';
+import { Epml } from '../../../../epml.js';
+import '../../components/ButtonIconCopy.js';
+import { use, translate, registerTranslateConfig } from 'lit-translate';
+
+registerTranslateConfig({
+	loader: (lang) => fetch(`/language/${lang}.json`).then((res) => res.json()),
+});
+import '@polymer/paper-spinner/paper-spinner-lite.js';
+
+import '@material/mwc-button';
+import '@material/mwc-textfield';
+import '@vaadin/button';
+import { blocksNeed } from '../utils/blocks-needed.js';
+import { pageStyles } from '../become-minter-css.js';
+
+class YesSponsored extends LitElement {
+	static get properties() {
+		return {
+			addressInfo: { type: Object },
+			rewardSharePublicKey: { type: String },
+		};
+	}
+
+	constructor() {
+		super();
+
+		this.addressInfo = {};
+		this.rewardSharePublicKey = '';
+	}
+
+	static styles = [pageStyles];
+
+	_levelUpBlocks() {
+		let countBlocksString = (
+			blocksNeed(0) -
+			(this.addressInfo?.blocksMinted +
+				this.addressInfo?.blocksMintedAdjustment)
+		).toString();
+		return countBlocksString;
+	}
+
+	render() {
+		return html`
+			<div class="inner-container">
+				<div class="column column-center">
+					<div class="column column-center">
+						<span class="level-black"
+							>${translate('becomeMinterPage.bchange10')}</span
+						>
+						<hr
+							style="width: 50%; color: #eee; border-radius: 80%; margin-bottom: 2rem;"
+						/>
+					</div>
+					<br />
+					<div class="row row-center gap">
+						<div class="content-box">
+							<span class="title"
+								>${translate(
+									'becomeMinterPage.bchange11'
+								)}</span
+							>
+							<hr
+								style="color: #eee; border-radius: 90%; margin-bottom: 1rem;"
+							/>
+							<h4>${translate('becomeMinterPage.bchange12')}</h4>
+						</div>
+						<div class="content-box">
+							<span class="title"
+								>${translate(
+									'becomeMinterPage.bchange13'
+								)}</span
+							>
+							<hr
+								style="color: #eee; border-radius: 90%; margin-bottom: 1rem;"
+							/>
+							<h4>
+								${this._levelUpBlocks()}
+								${translate('becomeMinterPage.bchange14')}
+							</h4>
+						</div>
+						<div class="content-box">
+							<span class="title"
+								>${translate(
+									'becomeMinterPage.bchange15'
+								)}</span
+							>
+							<hr
+								style="color: #eee; border-radius: 90%; margin-bottom: 1rem;"
+							/>
+							<h4 class="no-margin">
+								${translate('becomeMinterPage.bchange16')}
+							</h4>
+							<div class="row row-center column-center no-wrap">
+								<p class="address">
+									${this.rewardSharePublicKey}
+								</p>
+								<button-icon-copy
+									title="${translate('walletpage.wchange3')}"
+									onSuccessMessage="${translate(
+										'walletpage.wchange4'
+									)}"
+									onErrorMessage="${translate(
+										'walletpage.wchange39'
+									)}"
+									textToCopy=${this.rewardSharePublicKey}
+									buttonSize="28px"
+									iconSize="16px"
+									color="var(--copybutton)"
+									offsetLeft="4px"
+								>
+								</button-icon-copy>
+							</div>
+						</div>
+					</div>
+					<br />
+				</div>
+			</div>
+		`;
+	}
+}
+
+window.customElements.define('yes-sponsored', YesSponsored);