AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

add translations to start minting

Browse Source
This commit is contained in:
AlphaX-Projects 2022-08-27 20:25:59 +02:00
parent 364c1b40cc
commit d8e67e0e85
1 changed files with 158 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
qortal-ui-core/src/components/start-minting.js
View File

@ -39,22 +39,19 @@ class StartMinting extends connect(store)(LitElement) {
static get styles() { static get styles() {
return [ return [
css` css`
.dialogCustom { .dialogCustom {
position: fixed; position: fixed;
z-index: 10000; z-index: 10000;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
left: 0px;
left: 0px; width: 100vw;
width: 100vw;
} }
.dialogCustomInner { .dialogCustomInner {
width: 300px; width: 300px;
min-height: 400px; min-height: 400px;
background-color: var(--white); background-color: var(--white);
@ -68,127 +65,110 @@ class StartMinting extends connect(store)(LitElement) {
.dialogCustomInner li { .dialogCustomInner li {
margin-bottom: 10px; margin-bottom: 10px;
} }
.start-minting-wrapper { .start-minting-wrapper {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(calc(-50% - 10px)); transform: translateX(calc(-50% - 10px));
z-index: 10; z-index: 10;
}
.dialog-header h1 {
font-size: 18px;
}
.row {
display: flex;
width: 100%;
align-items: center;
}
.modalFooter {
width: 100%;
display: flex;
justify-content: flex-end;
}
.hide {
visibility: hidden
}
.inactiveText {
opacity: .60
}
.column {
display: flex;
flex-direction: column;
width: 100%;
}
.smallLoading,
.smallLoading:after {
border-radius: 50%;
width: 2px;
height: 2px;
}
.smallLoading {
border-width: 0.6em;
border-style: solid;
border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2)
rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
font-size: 10px;
position: relative;
text-indent: -9999em;
transform: translateZ(0px);
animation: 1.1s linear 0s infinite normal none running loadingAnimation;
}
@-webkit-keyframes loadingAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
} }
100% {
.dialog-header h1 { -webkit-transform: rotate(360deg);
font-size: 18px; transform: rotate(360deg);
} }
}
.row { @keyframes loadingAnimation {
display: flex; 0% {
width: 100%; -webkit-transform: rotate(0deg);
align-items: center; transform: rotate(0deg);
} }
100% {
.modalFooter { -webkit-transform: rotate(360deg);
width: 100%; transform: rotate(360deg);
display: flex; }
justify-content: flex-end; }
} .word-break {
word-break:break-all;
}
.dialog-container {
width: 300px;
.hide { min-height: 300px;
visibility: hidden max-height: 75vh;
} padding: 5px;
display: flex;
.inactiveText { align-items: flex-start;
opacity: .60 flex-direction: column;
} }
.column { .between {
display: flex; justify-content: space-between;
flex-direction: column; }
width: 100%; .no-width {
} width: auto
}
.smallLoading, .between p {
.smallLoading:after { margin: 0;
border-radius: 50%; padding: 0;
width: 2px; }
height: 2px; .marginLoader {
} margin-left: 10px;
}
.smallLoading { .marginRight {
border-width: 0.6em; margin-right: 10px;
border-style: solid; }
border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) .warning{
rgba(3, 169, 244, 0.2) rgb(3, 169, 244); display: flex;
font-size: 10px; flex-grow: 1
position: relative; }
text-indent: -9999em; .message-error {
transform: translateZ(0px); color: var(--error);
animation: 1.1s linear 0s infinite normal none running loadingAnimation; }
}
@-webkit-keyframes loadingAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadingAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.word-break {
word-break:break-all;
}
.dialog-container {
width: 300px;
min-height: 300px;
max-height: 75vh;
padding: 5px;
display: flex;
align-items: flex-start;
flex-direction: column;
}
.between {
justify-content: space-between;
}
.no-width {
width: auto
}
.between p {
margin: 0;
padding: 0;
}
.marginLoader {
margin-left: 10px;
}
.marginRight {
margin-right: 10px;
}
.warning{
display: flex;
flex-grow: 1
}
.message-error {
color: var(--error);
}
`, `,
]; ];
} }
@ -209,12 +189,25 @@ class StartMinting extends connect(store)(LitElement) {
firstUpdated() { firstUpdated() {
this.getMintingAcccounts(); this.getMintingAcccounts();
this.shadowRoot.querySelector('mdc-dialog--open').setAttribute('style', 'width: 100vw') this.shadowRoot.querySelector('mdc-dialog--open').setAttribute('style', 'width: 100vw')
} }
this.renderErrorMsg1() {
return html`${translate("startminting.smchange1")}`
}
this.renderErrorMsg2() {
return html`${translate("startminting.smchange2")}`
}
this.renderErrorMsg3() {
return html`${translate("startminting.smchange3")}`
}
this.renderErrorMsg4() {
return html`${translate("startminting.smchange4")}`
}
async getMintingAcccounts() { async getMintingAcccounts() {
const myNode = const myNode =
store.getState().app.nodeConfig.knownNodes[ store.getState().app.nodeConfig.knownNodes[
@ -229,7 +222,7 @@ class StartMinting extends connect(store)(LitElement) {
this.mintingAccountData = mintingAccountData; this.mintingAccountData = mintingAccountData;
} catch (error) { } catch (error) {
this.errorMsg = 'Cannot fetch minting accounts'; this.errorMsg = this.renderErrorMsg1();
} }
} }
@ -278,7 +271,7 @@ class StartMinting extends connect(store)(LitElement) {
); );
} }
} catch (error) { } catch (error) {
this.errorMsg = 'Failed to remove key'; this.errorMsg = this.renderErrorMsg2();
return; return;
} }
@ -290,13 +283,11 @@ class StartMinting extends connect(store)(LitElement) {
this.status = 5; this.status = 5;
this.getMintingAcccounts(); this.getMintingAcccounts();
} catch (error) { } catch (error) {
this.errorMsg = 'Failed to add minting key'; this.errorMsg = this.renderErrorMsg3();
return; return;
} }
} }
async confirmRelationship(){ async confirmRelationship(){
const myNode = const myNode =
@ -350,16 +341,20 @@ class StartMinting extends connect(store)(LitElement) {
store.getState().app.nodeConfig.knownNodes[ store.getState().app.nodeConfig.knownNodes[
store.getState().app.nodeConfig.node store.getState().app.nodeConfig.node
]; ];
const nodeUrl = const nodeUrl =
myNode.protocol + '://' + myNode.domain + ':' + myNode.port; myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
const mintingAccountData = this.mintingAccountData; const mintingAccountData = this.mintingAccountData;
const addressInfo = this.addressInfo; const addressInfo = this.addressInfo;
const address = const address =
window.parent.reduxStore.getState().app?.selectedAddress?.address; window.parent.reduxStore.getState().app?.selectedAddress?.address;
const nonce = const nonce =
window.parent.reduxStore.getState().app?.selectedAddress?.nonce; window.parent.reduxStore.getState().app?.selectedAddress?.nonce;
const publicAddress = const publicAddress =
window.parent.reduxStore.getState().app?.selectedAddress window.parent.reduxStore.getState().app?.selectedAddress
?.base58PublicKey; ?.base58PublicKey;
@ -367,13 +362,12 @@ class StartMinting extends connect(store)(LitElement) {
const findMintingAccount = mintingAccountData.find((ma) => const findMintingAccount = mintingAccountData.find((ma) =>
ma.publicKey.includes(publicAddress) ma.publicKey.includes(publicAddress)
); );
const isMinterButKeyMintingKeyNotAssigned = const isMinterButKeyMintingKeyNotAssigned =
addressInfo?.error !== 124 && addressInfo?.error !== 124 &&
addressInfo?.level >= 1 && addressInfo?.level >= 1 &&
!findMintingAccount; !findMintingAccount;
const makeTransactionRequest = async (lastRef) => { const makeTransactionRequest = async (lastRef) => {
let mylastRef = lastRef; let mylastRef = lastRef;
let rewarddialog1 = get('transactions.rewarddialog1'); let rewarddialog1 = get('transactions.rewarddialog1');
@ -450,7 +444,7 @@ class StartMinting extends connect(store)(LitElement) {
this.confirmRelationship(publicAddress) this.confirmRelationship(publicAddress)
} catch (error) { } catch (error) {
console.log({error}) console.log({error})
this.errorMsg = error?.data?.message || 'Cannot create sponsorship key'; this.errorMsg = error?.data?.message || this.renderErrorMsg4();
return; return;
} }
@ -491,55 +485,51 @@ class StartMinting extends connect(store)(LitElement) {
<hr /> <hr />
</div> </div>
<div class="dialog-container"> <div class="dialog-container">
<ul> <ul>
<li class="row between">
<p>
1. ${translate("startminting.smchange5")}
<li class="row between">1. Creating relationship <div class=${`smallLoading marginLoader ${this.status !== 1 && 'hide'}`}></div></li> </p>
<div class=${`smallLoading marginLoader ${this.status !== 1 && 'hide'}`}></div>
</li>
<li class=${`row between ${this.status < 2 && 'inactiveText' }`}> <li class=${`row between ${this.status < 2 && 'inactiveText' }`}>
<p> <p>
2. Awaiting confirmation on blockchain 2. ${translate("startminting.smchange6")}
</p> </p>
<div class=${`smallLoading marginLoader ${this.status !== 2 && 'hide'}`}></div> <div class=${`smallLoading marginLoader ${this.status !== 2 && 'hide'}`}></div>
</li> </li>
<li class=${`row between ${this.status < 3 && 'inactiveText' }`}>
<p>
3. Finishing up relationship
</p>
<li class=${`row between ${this.status < 3 && 'inactiveText' }`}>
<p>
3. ${translate("startminting.smchange7")}
</p>
<div class="row no-width"> <div class="row no-width">
<div class=${`smallLoading marginLoader marginRight ${this.status !== 3 && 'hide'}`} ></div> ${asyncReplace(this.timer)} <div class=${`smallLoading marginLoader marginRight ${this.status !== 3 && 'hide'}`} ></div> ${asyncReplace(this.timer)}
</div> </div>
</li> </li>
<li class=${`row between ${this.status < 4 && 'inactiveText' }`}> <li class=${`row between ${this.status < 4 && 'inactiveText' }`}>
<p> <p>
4. Adding minting key to node 4. ${translate("startminting.smchange8")}
</p> </p>
<div class=${`smallLoading marginLoader ${this.status !== 4 && 'hide'}`}></div> <div class=${`smallLoading marginLoader ${this.status !== 4 && 'hide'}`}></div>
</li> </li>
<li class=${`row between ${this.status < 5 && 'inactiveText' }`}> <li class=${`row between ${this.status < 5 && 'inactiveText' }`}>
<p> <p>
5. Complete 5. ${translate("startminting.smchange9")}
</p> </p>
</li> </li>
</ul> </ul>
<div class="warning column"> <div class="warning column">
<p> <p>
Warning: do not close the Qortal UI until completion! Warning: do not close the Qortal UI until completion!
</p> </p>
<p class="message-error">${this.errorMsg}</p> <p class="message-error">${this.errorMsg}</p>
</div> </div>
</div>
</div>
<div class="modalFooter"> <div class="modalFooter">
<mwc-button <mwc-button
slot="primaryAction" slot="primaryAction"
@ -553,8 +543,6 @@ class StartMinting extends connect(store)(LitElement) {
${translate("general.close")} ${translate("general.close")}
</mwc-button> </mwc-button>
</div> </div>
</div> </div>