From 6e43dddd52ce23ea642c84e30a4e34240da1d18b Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Fri, 26 Aug 2022 00:15:38 +0300 Subject: [PATCH] added popup to indicate progress --- qortal-ui-core/font/switch-theme.css | 2 + .../sponsorship-list-css.src.js | 74 +++- .../sponsorship-list/sponsorship-list.src.js | 360 +++++++++++------- 3 files changed, 296 insertions(+), 140 deletions(-) diff --git a/qortal-ui-core/font/switch-theme.css b/qortal-ui-core/font/switch-theme.css index 45fb525b..bb48fc95 100644 --- a/qortal-ui-core/font/switch-theme.css +++ b/qortal-ui-core/font/switch-theme.css @@ -30,6 +30,7 @@ html { --nav-icon-color: #080808; --nav-border-color: #eeeeee; --nav-border-selected-color: #03a9f4; + --error: #d50000; --background: url("/img/qortal_background_light_.jpg"); } @@ -65,5 +66,6 @@ html[theme="dark"] { --nav-icon-color: #008fd5; --nav-border-color: #0b305e; --nav-border-selected-color: #76c8f5; + --error: #d50000; --background: url("/img/qortal_background_dark_.jpg"); } diff --git a/qortal-ui-plugins/plugins/core/sponsorship-list/sponsorship-list-css.src.js b/qortal-ui-plugins/plugins/core/sponsorship-list/sponsorship-list-css.src.js index eb0fd61b..9e64410f 100644 --- a/qortal-ui-plugins/plugins/core/sponsorship-list/sponsorship-list-css.src.js +++ b/qortal-ui-plugins/plugins/core/sponsorship-list/sponsorship-list-css.src.js @@ -37,8 +37,8 @@ export const pageStyles = css` - .message { - color: var(--gray); + .message-error { + color: var(--error); } @@ -62,6 +62,15 @@ export const pageStyles = css` .row { display: flex; width: 100%; + align-items: center; + } + + .hide { + visibility: hidden + } + + .inactiveText { + opacity: .60 } .column { display: flex; @@ -156,6 +165,30 @@ export const pageStyles = css` z-index: 9; position: fixed; } + .marginLoader { + margin-left: 10px; + } + .marginRight { + margin-right: 10px; + } + .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; + } .loading, .loading:after { @@ -277,7 +310,9 @@ export const pageStyles = css` } - + .word-break { + word-break:break-all; + } .dialog-container { width: 300px; min-height: 300px; @@ -367,4 +402,37 @@ export const pageStyles = css` grid-column: 1 / -1; } } + + .between { + justify-content: space-between; + } + .no-width { + width: auto + } + + .between p { + margin: 0; + padding: 0; + } + + #showDialogRewardShareCreationStatus .dialog-container { + width: 300px; + min-height: 250px; + max-height: 75vh; + padding: 5px; + display: flex; + align-items: flex-start; + flex-direction: column; +} + +.warning{ + display: flex; + flex-grow: 1 +} + +#showDialogRewardShareCreationStatus li { + margin-bottom: 15px; +} ` + + diff --git a/qortal-ui-plugins/plugins/core/sponsorship-list/sponsorship-list.src.js b/qortal-ui-plugins/plugins/core/sponsorship-list/sponsorship-list.src.js index f7ee2b78..47f86313 100644 --- a/qortal-ui-plugins/plugins/core/sponsorship-list/sponsorship-list.src.js +++ b/qortal-ui-plugins/plugins/core/sponsorship-list/sponsorship-list.src.js @@ -16,11 +16,25 @@ import "@vaadin/button" import "@material/mwc-button" import "@polymer/paper-spinner/paper-spinner-lite.js" import '@material/mwc-dialog' +import {asyncReplace} from 'lit/directives/async-replace.js'; import { pageStyles } from "./sponsorship-list-css.src.js" const parentEpml = new Epml({ type: "WINDOW", source: window.parent }) +async function* countDown(count, callback) { + + + while (count > 0) { + yield count--; + await new Promise((r) => setTimeout(r, 1000)); + if(count === 0){ + console.log('hello call') + callback() + } + } + } + class SponsorshipList extends LitElement { static get properties() { return { @@ -32,11 +46,14 @@ class SponsorshipList extends LitElement { mintingAccountData: { type: Array }, sponsorships: { type: Array }, removeRewardShareLoading: { type: Array }, - createSponsorshipMessage: { type: String }, + errorMessage: { type: String }, isLoadingCreateSponsorship: { type: Array }, publicKeyValue: { type: String }, - error: { type: Boolean }, - isOpenModal: {type: Boolean} + isOpenModal: {type: Boolean}, + status: {type: Number}, + privateRewardShareKey: {type: String}, + timer: {type: Number}, + openDialogRewardShare: {type: Boolean} } } @@ -54,11 +71,14 @@ class SponsorshipList extends LitElement { this.mintingAccountData = null this.sponsorships = [] this.removeRewardShareLoading = false - this.error = false - this.createSponsorshipMessage = "" + + this.errorMessage = "" this.isLoadingCreateSponsorship = false this.publicKeyValue = "" this.isOpenModal = false + this.status = 0 + this.privateRewardShareKey = "" + this.openDialogRewardShare = false } inputHandler(e) { @@ -108,17 +128,38 @@ class SponsorshipList extends LitElement { return nodeInfo } + async saveToClipboard(text) { + try { + await navigator.clipboard.writeText(text) + parentEpml.request('showSnackBar', this.onSuccessMessage) + } catch (err) { + parentEpml.request('showSnackBar', this.onErrorMessage) + console.error('Copy to clipboard error:', err) + } + } + + changeStatus(value){ + this.status = value + saveToClipboard(translate( + "walletpage.wchange4" + )) + + } + async atMount() { this.changeLanguage() - + this.addressInfo = window.parent.reduxStore.getState().app.accountInfo.addressInfo this.isPageLoading = true try { - const address = - window.parent.reduxStore.getState().app?.selectedAddress - ?.address + // const address = + // window.parent.reduxStore.getState().app?.selectedAddress + // ?.address + + const address = 'QPsjHoKhugEADrtSQP5xjFgsaQPn9WmE3Y' + let rewardShares = await this.getRewardShareRelationship( address @@ -153,6 +194,7 @@ class SponsorshipList extends LitElement { if(openModal){ this.shadowRoot.querySelector('#showDialog').show() } + } catch (error) { @@ -251,18 +293,20 @@ class SponsorshipList extends LitElement { removeReceiver() } - async createRewardShare(e) { - this.error = false - this.createSponsorshipMessage = "" - const recipientPublicKey = this.publicKeyValue + async createRewardShare(publicKeyValue) { + this.openDialogRewardShare = true + + this.privateRewardShareKey = "" + + this.errorMessage = "" + const recipientPublicKey = publicKeyValue const percentageShare = 0 const selectedAddress = window.parent.reduxStore.getState().app?.selectedAddress // Check for valid... this.isLoadingCreateSponsorship = true + - let recipientAddress = - window.parent.base58PublicKeyToAddress(recipientPublicKey) // Get Last Ref const getLastRef = async () => { @@ -282,96 +326,39 @@ class SponsorshipList extends LitElement { return myAccountDetails } - // Get Reward Relationship if it already exists - const getRewardShareRelationship = async (minterAddr) => { - let isRewardShareExisting = false - let myRewardShareArray = await parentEpml.request("apiCall", { - type: "api", - url: `/addresses/rewardshares?minters=${minterAddr}&recipients=${recipientAddress}`, - }) - isRewardShareExisting = - myRewardShareArray.length !== 0 ? true : false - return isRewardShareExisting - } + // Validate Reward Share by Level const validateReceiver = async () => { - let accountDetails = await getAccountDetails() - let lastRef = await getLastRef() - let isExisting = await getRewardShareRelationship( - selectedAddress.address - ) - - // Check for creating self share at different levels (also adding check for flags...) - if (accountDetails.flags === 1) { - this.error = false - this.createSponsorshipMessage = "" - let myTransaction = await makeTransactionRequest(lastRef) - if (isExisting === true) { - this.error = true - this.createSponsorshipMessage = `Cannot Create Multiple Reward Shares!` - } else { - // Send the transaction for confirmation by the user - this.error = false - this.createSponsorshipMessage = "" - getTxnRequestResponse(myTransaction) - } - } else if (accountDetails.address === recipientAddress) { - if (accountDetails.level >= 1 && accountDetails.level <= 4) { - this.error = false - this.createSponsorshipMessage = "" - let myTransaction = await makeTransactionRequest(lastRef) - if (isExisting === true) { - let err1string = get("rewardsharepage.rchange18") - this.error = true - this.createSponsorshipMessage = `${err1string}` - } else { - // Send the transaction for confirmation by the user - this.error = false - this.createSponsorshipMessage = "" - getTxnRequestResponse(myTransaction) - } - } else if (accountDetails.level >= 5) { - this.error = false - this.createSponsorshipMessage = "" - let myTransaction = await makeTransactionRequest(lastRef) - if (isExisting === true) { - let err2string = get("rewardsharepage.rchange19") - this.error = true - this.createSponsorshipMessage = `${err2string}` - } else { - // Send the transaction for confirmation by the user - this.error = false - this.createSponsorshipMessage = "" - getTxnRequestResponse(myTransaction) - } - } else { - let err3string = get("rewardsharepage.rchange20") - this.error = true - this.createSponsorshipMessage = `${err3string} ${accountDetails.level}` - } - } else { - //Check for creating reward shares - if (accountDetails.level >= 5) { - this.error = false - this.createSponsorshipMessage = "" - let myTransaction = await makeTransactionRequest(lastRef) - if (isExisting === true) { - let err4string = get("rewardsharepage.rchange18") - this.error = true - this.createSponsorshipMessage = `${err4string}` - } else { - // Send the transaction for confirmation by the user - this.error = false - this.createSponsorshipMessage = "" - getTxnRequestResponse(myTransaction) - } - } else { - this.error = true - let err5string = get("rewardsharepage.rchange20") - this.createSponsorshipMessage = `${err5string} ${accountDetails.level}` - } + let accountDetails + try { + accountDetails = await getAccountDetails() + } catch (error) { + this.errorMessage = "Couldn't fetch account details" } + + let lastRef = await getLastRef() + if (accountDetails.level >= 5) { + this.status = 1 + + this.errorMessage = "" + + try { + const myTransaction = await makeTransactionRequest(lastRef) + + + getTxnRequestResponse(myTransaction) + } catch (error) { + this.errorMessage = error?.message || 'Error creating relationship' + } + + + } else { + + let err5string = get("rewardsharepage.rchange20") + this.errorMessage = `${err5string} ${accountDetails.level}` + } + } // Make Transaction Request @@ -399,27 +386,70 @@ class SponsorshipList extends LitElement { const getTxnRequestResponse = (txnResponse) => { if (txnResponse.success === false && txnResponse.message) { - this.error = true - this.createSponsorshipMessage = txnResponse.message - throw new Error(txnResponse) + + this.errorMessage = txnResponse.message + this.isLoadingCreateSponsorship = false + throw(txnResponse) } else if ( txnResponse.success === true && !txnResponse.data.error ) { - let err6string = get("rewardsharepage.rchange21") - this.createSponsorshipMessage = err6string - this.error = false + + this.isLoadingCreateSponsorship = false + + this.privateRewardShareKey = txnResponse.data + this.confirmRelationship() } else { - this.error = true - this.createSponsorshipMessage = txnResponse.data.message - throw new Error(txnResponse) + + this.errorMessage = txnResponse.data.message + this.isLoadingCreateSponsorship = false + throw(txnResponse) } } validateReceiver() - this.isLoadingCreateSponsorship = false + } + + async confirmRelationship(){ + let interval = null + let stop = false + + const getAnswer = async () => { + if (!stop) { + stop= true; + + try { + + const recipientAddress = + window.parent.base58PublicKeyToAddress(recipientPublicKey) + const minterAddress = window.parent.reduxStore.getState().app?.selectedAddress.address + const myRewardShareArray = await parentEpml.request("apiCall", { + type: "api", + url: `/addresses/rewardshares?minters=${minterAddress}&recipients=${recipientAddress}`, + }) + if(myRewardShareArray.length > 0){ + clearInterval(interval) + this.status = 3 + + + this.timer = countDown(180, ()=> this.changeStatus(4)); + } + + } catch (error) { + + } + + stop = false + } + }; + interval = setInterval(getAnswer, 2000); + } + + + + render() { console.log({sponsors: this.sponsorships}) return html` @@ -490,22 +520,8 @@ class SponsorshipList extends LitElement {

Copy Sponsorship Key

- + + this.createRewardShare(sponsorship.publicKey)}>copy
  • ` : ''} -

    ${this.createSponsorshipMessage}

    +

    ${this.errorMessage}

    @@ -605,6 +615,82 @@ class SponsorshipList extends LitElement { ${translate("general.close")} + + + +
    +
    +

    In progress

    3 && 'hide'}`}>
    +
    + +
    +
    +
    +
      + + + +
    • 1. Creating relationship
      • +
    • +

      + 2. Awaiting confirmation on blockchain +

      +
      + +
      • + +
    • +

      + 3. Finishing up +

      + +
      +
      ${asyncReplace(this.timer)} +
      + + +
      • +
    • +

      + 4. Complete +

      + + +
      • + ${this.privateRewardShareKey && this.status === 4 ? html` +
    • + +

      Copy the key below and share it with your sponsored person.

      +
      + ${this.privateRewardShareKey} +
      + + + + +
      • + ` : ''} +
    +
    +

    + Warning: do not close the Qortal UI until completion! +

    +

    ${this.errorMessage}

    +
    + +
    + { + this.openDialogRewardShare = false + this.errorMessage = '' + }} + class="red" + > + ${translate("general.close")} + + +
    `