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 07eec912..1851c584 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 @@ -4,6 +4,7 @@ export const pageStyles = css` * { --mdc-theme-surface: var(--white); --mdc-dialog-content-ink-color: var(--black); + box-sizing: border-box; } .header-title { @@ -34,36 +35,28 @@ export const pageStyles = css` max-width: 1100px; } - .description { - color: var(--black); - } + .message { color: var(--gray); } - .sub-main { - width: 95%; - display: flex; - - flex-direction: column; - max-width: 1100px; - } - - .level-black { - font-size: 32px; - color: var(--black); - font-weight: 400; - text-align: center; - margin-top: 2rem; - } + .form-wrapper { display: flex; align-items: center; width: 100%; max-width: 700px; height: 50px; + flex-wrap: wrap; + } + + .sponsor-minter-text { + color: var(--black); + font-weight: bold; + margin-right: 15px; + font-size: 18px; } .row { @@ -102,38 +95,16 @@ export const pageStyles = css` .form-item--input { flex-grow: 1; margin-right: 25px; + min-width: 275px; } - .center-box { - position: absolute; - width: 100%; - top: 50%; - left: 50%; - transform: translate(-50%, 0%); - text-align: center; - } + - .content-box { - border: 1px solid var(--border); - border-radius: 10px; - padding: 10px 25px; - text-align: center; - display: inline-block; - - margin-bottom: 5px; - flex-basis: 250px; - } + .gap { gap: 10px; } - .level-black { - font-size: 32px; - color: var(--black); - font-weight: 400; - text-align: center; - margin-top: 2rem; - text-align: center; - } + .title { font-weight: 600; font-size: 20px; @@ -230,7 +201,7 @@ export const pageStyles = css` .tableGrid { display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax( + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax( 0, 1fr ) minmax(0, 1fr); @@ -251,6 +222,29 @@ export const pageStyles = css` overflow: hidden; } + .text { + color: var(--black) + } + .text--bold { + font-weight: bold; + } + + .summary-box { + + display: flex; + margin-top: 25px; + width: 100%; + flex-wrap: wrap; + } + + .summary-box p:first-child { + margin-right: 30px; + } + + .text--normal { + font-weight: normal; + } + .grid-item p { text-decoration: underline; } @@ -262,12 +256,71 @@ export const pageStyles = css` } .red { --mdc-theme-primary: #f44336; + border-radius: 2px; + + } + .btn--sponsorshipfinished { + background-color: var(--menuactive); + transition: all .2s; + animation: onOff 2s infinite; + --mdc-theme-primary: var(--black); } + + + .dialog-container { + width: 300px; + min-height: 300px; + max-height: 75vh; + padding: 5px; + display: flex; + align-items: flex-start; + flex-direction: column; + + + } + + .dialog-paragraph { + word-break: break-all; + color: var(--black) + } + + + + .dialog-header h1 { + font-size: 18px; + } + + @keyframes onOff { + from {opacity: 1} + to {opacity: .5} +} .grid-item-text { display: none; } + .sub-title { + margin-bottom: 10px; + } + + .sub-title p { + font-size: 18px; + color: var(--black); + } + + @media (max-width: 610px) { + .sponsor-minter-wrapper { + width: 100%; + margin-bottom: 10px; + } + + .form-item--input { + flex-grow: 1; + margin-right: 25px; + min-width: unset; + } + } + @media (max-width: 710px) { .table-header { display: none; 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 adc3251b..492a0782 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 @@ -15,6 +15,7 @@ import "@material/mwc-textfield" import "@vaadin/button" import "@material/mwc-button" import "@polymer/paper-spinner/paper-spinner-lite.js" +import '@material/mwc-dialog' import { pageStyles } from "./sponsorship-list-css.src.js" @@ -24,7 +25,6 @@ class SponsorshipList extends LitElement { static get properties() { return { theme: { type: String, reflect: true }, - sponsorshipKeyValue: { type: String }, nodeInfo: { type: Object }, isPageLoading: { type: Boolean }, addressInfo: { type: Object }, @@ -36,6 +36,7 @@ class SponsorshipList extends LitElement { isLoadingCreateSponsorship: { type: Array }, publicKeyValue: { type: String }, error: { type: Boolean }, + isOpenModal: {type: Boolean} } } @@ -46,7 +47,6 @@ class SponsorshipList extends LitElement { this.theme = localStorage.getItem("qortalTheme") ? localStorage.getItem("qortalTheme") : "light" - this.sponsorshipKeyValue = "" this.isPageLoading = true this.nodeInfo = {} this.addressInfo = {} @@ -58,6 +58,7 @@ class SponsorshipList extends LitElement { this.createSponsorshipMessage = "" this.isLoadingCreateSponsorship = false this.publicKeyValue = "" + this.isOpenModal = false } inputHandler(e) { @@ -114,11 +115,12 @@ class SponsorshipList extends LitElement { window.parent.reduxStore.getState().app.accountInfo.addressInfo this.isPageLoading = true try { + const address = window.parent.reduxStore.getState().app?.selectedAddress ?.address let rewardShares = await this.getRewardShareRelationship( - "QPsjHoKhugEADrtSQP5xjFgsaQPn9WmE3Y" + address ) rewardShares = rewardShares.filter((rs) => rs.recipient !== address) @@ -128,16 +130,13 @@ class SponsorshipList extends LitElement { type: "api", url: `/addresses/${rs.recipient}`, }) - const recentBlocksInfo = await parentEpml.request("apiCall", { - type: "api", - url: `/blocks/signer/${rs.recipient}?limit=5&reverse=true`, - }) + let blocksRemaining = this._levelUpBlocks(addressInfo) blocksRemaining = +blocksRemaining > 0 ? +blocksRemaining : 0 return { ...addressInfo, ...rs, - lastActiveBlock: recentBlocksInfo[0]?.height, + blocksRemaining: blocksRemaining, } }) @@ -148,8 +147,13 @@ class SponsorshipList extends LitElement { .filter((sponsorship) => sponsorship.blocksRemaining !== 0) .sort((a, b) => a.blocksRemaining - b.blocksRemaining)[0] this.isPageLoading = false + + const openModal = accountInfoValues.find(s=> s.blocksRemaining <= 0) + if(openModal){ + this.shadowRoot.querySelector('#showDialog').show() + } } catch (error) { - console.error(error) + this.isPageLoading = false } @@ -177,6 +181,7 @@ class SponsorshipList extends LitElement { } async removeRewardShare(rewardShareObject) { + const selectedAddress = window.parent.reduxStore.getState().app?.selectedAddress @@ -235,7 +240,7 @@ class SponsorshipList extends LitElement { let err7tring = get("rewardsharepage.rchange22") this.removeRewardShareLoading = false parentEpml.request("showSnackBar", `${err7tring}`) - this.atMount() + this.sponsorships = this.sponsorships.filter((s)=> s.address !== rewardShareObject.address) } else { this.removeRewardShareLoading = false parentEpml.request("showSnackBar", txnResponse.data.message) @@ -413,8 +418,8 @@ class SponsorshipList extends LitElement { this.isLoadingCreateSponsorship = false } + render() { - console.log({ sponsorships: this.sponsorships }) return html` ${ @@ -436,21 +441,22 @@ class SponsorshipList extends LitElement {
+
+

${translate("sponsorshipspage.schange1")}

+
-

Account Address

+

${translate("sponsorshipspage.schange2")}

-

Blocks Minted

+

${translate("walletprofile.blocksminted")}

+
+ +
+

${translate("becomeMinterPage.bchange17")}

-

Last Active Block

-
-
-

Sponsorship Key

-
-
- +
@@ -459,31 +465,20 @@ class SponsorshipList extends LitElement { (sponsorship) => html` ` )} - - ${ - this.sponsorships.length > 0 && + + ${this.sponsorships.length > 0 ? html` -
-

- Total Sponsorships active +

+

+ ${translate("sponsorshipspage.schange3")} = + ${this.sponsorships.length} + +

-

- Next sponsorship ending in +

+ ${translate("sponsorshipspage.schange4")} = + ${this.nextSponsorshipEnding ?.blocksRemaining} - blocks + ${translate("mintingpage.mchange26")} + +

` - } + : ''}

${this.createSponsorshipMessage}

+
+ + +
+

${translate("sponsorshipspage.schange6")}

+
+
+
+ +

${this.sponsorships.filter(s=> s.blocksRemaining <= 0).length} ${translate("sponsorshipspage.schange7")}!

+ +

${translate("sponsorshipspage.schange8")}

+ ${this.sponsorships.filter(s=> s.blocksRemaining <= 0).map((ms)=> html` +

${ms.address}

+ `)} +
+ + + ${translate("general.close")} + + +
` }