From 34cd6cd4e01a18d36780584e748a3b1361eb5623 Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Fri, 17 Feb 2023 13:51:22 +0100 Subject: [PATCH] Add info view for plugins --- .../core/components/qortal-info-view.js | 1869 +++++++++++++++++ 1 file changed, 1869 insertions(+) create mode 100644 qortal-ui-plugins/plugins/core/components/qortal-info-view.js diff --git a/qortal-ui-plugins/plugins/core/components/qortal-info-view.js b/qortal-ui-plugins/plugins/core/components/qortal-info-view.js new file mode 100644 index 00000000..98b17540 --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/qortal-info-view.js @@ -0,0 +1,1869 @@ +import { LitElement, html, css } from 'lit' +import { render } from 'lit/html.js' +import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate' + +import '@polymer/paper-dialog/paper-dialog.js' +import '@material/mwc-button' +import '@material/mwc-icon' +import '@vaadin/grid' +import '@vaadin/grid/vaadin-grid-sorter' + +class QortalInfoView extends LitElement { + static get properties() { + return { + theme: { type: String, reflect: true }, + isLoadingBoughtTradesBTC: { type: Boolean }, + isLoadingBoughtTradesLTC: { type: Boolean }, + isLoadingBoughtTradesDOGE: { type: Boolean }, + isLoadingBoughtTradesDGB: { type: Boolean }, + isLoadingBoughtTradesRVN: { type: Boolean }, + isLoadingBoughtTradesARRR: { type: Boolean }, + isLoadingSoldTradesBTC: { type: Boolean }, + isLoadingSoldTradesLTC: { type: Boolean }, + isLoadingSoldTradesDOGE: { type: Boolean }, + isLoadingSoldTradesDGB: { type: Boolean }, + isLoadingSoldTradesRVN: { type: Boolean }, + isLoadingSoldTradesARRR: { type: Boolean }, + isLoadingCompleteInfo: { type: Boolean }, + infoAccountName: { type: String }, + imageUrl: { type: String }, + addressResult: { type: Array }, + nameAddressResult: { type: Array }, + displayAddress: { type: String }, + displayLevel: { type: String }, + displayBalance: { type: Number }, + explorerBoughtBTCTrades: { type: Array }, + explorerBoughtLTCTrades: { type: Array }, + explorerBoughtDOGETrades: { type: Array }, + explorerBoughtDGBTrades: { type: Array }, + explorerBoughtRVNTrades: { type: Array }, + explorerBoughtARRRTrades: { type: Array }, + explorerSoldBTCTrades: { type: Array }, + explorerSoldLTCTrades: { type: Array }, + explorerSoldDOGETrades: { type: Array }, + explorerSoldDGBTrades: { type: Array }, + explorerSoldRVNTrades: { type: Array }, + explorerSoldARRRTrades: { type: Array }, + allPayments: { type: Array }, + allReceivedPayments: { type: Array }, + allSendPayments: { type: Array }, + actualBlockheight: { type: Number }, + reduceBlockheight: { type: Number }, + startMintBlockheight: { type: Number }, + startMintTime: { type: String }, + startMintBlock: { type: Array }, + totalSent: { type: Number }, + totalReceived: { type: Number }, + txtimestamp: { type: String }, + txcreatorAddress: { type: String }, + txrecipient: { type: String }, + txamount: { type: String }, + txfee: { type: String }, + txblockHeight: { type: String } + } + } + + static get styles() { + return css` + * { + --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-secondary: var(--mdc-theme-primary); + --mdc-theme-surface: var(--white); + --mdc-dialog-content-ink-color: var(--black); + box-sizing: border-box; + } + + h2 { + margin: 10px 0; + } + + h3 { + margin-top: -80px; + color: #03a9f4; + font-size: 18px; + } + + h4 { + margin: 5px 0; + } + + p { + margin-top: 5px; + font-size: 14px; + line-height: 16px; + } + + ul { + list-style: none; + display: flex; + } + + ul li { + margin: 15px auto; + font-size: 15px; + font-weight: 600; + color: #03a9f4; + } + + .btn-info { + color: #03a9f4; + --mdc-icon-size: 16px; + padding-top: 3px; + } + + .data-info{ + margin-top: 10px; + margin-right: 25px; + } + + .data-items { + font-weight: 600; + color: var(--black); + display: block; + text-align: center; + } + + .title { + font-weight: 600; + font-size: 12px; + line-height: 32px; + opacity: 0.66; + } + + #transactionList { + color: var(--black); + padding: 15px; + } + + .color-in { + color: #02977e; + background-color: rgba(0, 201, 167, 0.2); + font-weight: 700; + font-size: 0.60938rem; + border-radius: 0.25rem !important; + padding: 0.2rem 0.5rem; + margin-left: 4px; + } + + .color-out { + color: #b47d00; + background-color: rgba(219, 154, 4, 0.2); + font-weight: 700; + font-size: 0.60938rem; + border-radius: 0.25rem !important; + padding: 0.2rem 0.5rem; + margin-left: 4px; + } + + .card-body { + background-color: var(--white); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + min-height: 100vh; + margin: 0; + } + + .card-container { + background-color: var(--white); + border-radius: 5px; + color: var(--black); + padding-top: 30px; + position: relative; + width: 350px; + max-width: 100%; + text-align: center; + } + + .card-container-button { + background-color: var(--white); + border-radius: 5px; + color: var(--black); + padding-top: 30px; + position: relative; + width: 500px; + max-width: 100%; + text-align: center; + } + + .card-explorer-container { + background-color: var(--white); + border-radius: 5px; + color: var(--black); + padding-top: 10px; + position: relative; + width: 900px; + max-width: 100%; + text-align: center; + } + + .card-container .level { + color: #ffffff; + background-color: #03a9f4; + border-radius: 3px; + font-size: 14px; + font-weight: bold; + padding: 3px 7px; + position: absolute; + top: 30px; + left: 30px; + } + + .card-container .founder { + color: #ffffff; + background-color: #03a9f4; + border-radius: 3px; + font-size: 14px; + font-weight: bold; + padding: 3px 7px; + position: absolute; + top: 30px; + right: 30px; + } + + .card-container .round { + width: 96px; + height: 96px; + border: 1px solid #03a9f4; + border-radius: 50%; + padding: 2px; + } + + .card-container .badge { + width: 200px; + height: 135px; + border: 1px solid transparent; + border-radius: 10%; + padding: 2px; + } + + .userdata { + background-color: #1F1A36; + text-align: left; + padding: 15px; + margin-top: 30px; + } + + .userdata ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + .userdata ul li { + border: 1px solid #2D2747; + border-radius: 2px; + display: inline-block; + font-size: 12px; + margin: 0 7px 7px 0; + padding: 7px; + } + + .decline { + --mdc-theme-primary: #F44336; + } + + .buttons { + text-align:right; + } + + .loadingContainer { + height: 100%; + width: 100%; + } + + .loading, + .loading:after { + border-radius: 50%; + width: 5em; + height: 5em; + } + + .loading { + margin: 10px auto; + border-width: .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; + } + + .explorer-trades { + text-align: center; + } + + .box { + margin: 0; + padding: 0; + display: flex; + flex-flow: column; + height: 100%; + } + + .box-info { + margin: 0; + padding: 0; + display: flex; + flex-flow: column; + height: 250px; + } + + header { + display: flex; + flex: 0 1 auto; + align-items: center; + justify-content: center; + padding: 0px 10px; + font-size: 16px; + color: var(--white); + background-color: var(--tradehead); + border-left: 1px solid var(--tradeborder); + border-top: 1px solid var(--tradeborder); + border-right: 1px solid var(--tradeborder); + min-height: 40px; + } + + .border-wrapper { + border: 1px var(--tradeborder) solid; + overflow: hidden; + } + + #first-explorer-section { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: max(250px); + column-gap: 0.5em; + row-gap: 0.4em; + justify-items: stretch; + align-items: stretch; + margin-bottom: 10px; + } + + #second-explorer-section { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: max(250px); + column-gap: 0.5em; + row-gap: 0.4em; + justify-items: stretch; + align-items: stretch; + margin-bottom: 10px; + } + + #third-explorer-section { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: max(250px); + column-gap: 0.5em; + row-gap: 0.4em; + justify-items: stretch; + align-items: stretch; + margin-bottom: 10px; + } + + #first-explorer-section > div { + } + + #second-explorer-section > div { + } + + #third-explorer-section > div { + } + + @-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); + } + } + + .full-info { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #1da1f2; + } + + .full-info-wrapper { + width: 100%; + min-width: 600px; + max-width: 600px; + text-align: center; + background: var(--white); + border: 1px solid var(--black); + border-radius: 15px; + padding: 25px; + box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); + } + + .full-info-logo { + width: 120px; + height: 120px; + background: var(--white); + border: 1px solid var(--black); + border-radius: 50%; + position: relative; + top: -110px; + left: 210px; + } + + .round-fullinfo { + position: relative; + width: 120px; + height: 120px; + border-radius: 50%; + right: 25px; + top: -1px; + } + + ` + } + + constructor() { + super() + this.infoAccountName = '' + this.imageUrl = '' + this.addressResult = [] + this.nameAddressResult = [] + this.displayAddress = '' + this.displayLevel = '' + this.displayBalance = 0 + this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' + this.isLoadingBoughtTradesBTC = false + this.isLoadingBoughtTradesLTC = false + this.isLoadingBoughtTradesDOGE = false + this.isLoadingBoughtTradesDGB = false + this.isLoadingBoughtTradesRVN = false + this.isLoadingBoughtTradesARRR = false + this.isLoadingSoldTradesBTC = false + this.isLoadingSoldTradesLTC = false + this.isLoadingSoldTradesDOGE = false + this.isLoadingSoldTradesDGB = false + this.isLoadingSoldTradesRVN = false + this.isLoadingSoldTradesARRR = false + this.isLoadingCompleteInfo = false + this.explorerBoughtBTCTrades = [] + this.explorerBoughtLTCTrades = [] + this.explorerBoughtDOGETrades = [] + this.explorerBoughtDGBTrades = [] + this.explorerBoughtRVNTrades = [] + this.explorerBoughtARRRTrades = [] + this.explorerSoldBTCTrades = [] + this.explorerSoldLTCTrades = [] + this.explorerSoldDOGETrades = [] + this.explorerSoldDGBTrades = [] + this.explorerSoldRVNTrades = [] + this.explorerSoldARRRTrades = [] + this.allPayments = [] + this.allReceivedPayments = [] + this.allSendPayments = [] + this.actualBlockheight = 0 + this.reduceBlockheight = 0 + this.startMintBlockheight = 0 + this.startMintTime = '' + this.startMintBlock = [] + this.totalSent = 0 + this.totalReceived = 0 + this.txtimestamp = '' + this.txcreatorAddress = '' + this.txrecipient = '' + this.txamount = '' + this.txfee = '' + this.txblockHeight = '' + } + + boughtBTCTemplate() { + return html` +
+
+
${translate("explorerpage.exp10")} (BTC)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerBoughtBTCTrades) ? html` + ${translate("explorerpage.exp12")} + `: ''} +
+
+
+
+ ` + } + + boughtLTCTemplate() { + return html` +
+
+
${translate("explorerpage.exp10")} (LTC)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerBoughtLTCTrades) ? html` + ${translate("explorerpage.exp12")} + `: ''} +
+
+
+
+ ` + } + + boughtDOGETemplate() { + return html` +
+
+
${translate("explorerpage.exp10")} (DOGE)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerBoughtDOGETrades) ? html` + ${translate("explorerpage.exp12")} + `: ''} +
+
+
+
+ ` + } + + boughtDGBTemplate() { + return html` +
+
+
${translate("explorerpage.exp10")} (DGB)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerBoughtDGBTrades) ? html` + ${translate("explorerpage.exp12")} + `: ''} +
+
+
+
+ ` + } + + boughtRVNTemplate() { + return html` +
+
+
${translate("explorerpage.exp10")} (RVN)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerBoughtRVNTrades) ? html` + ${translate("explorerpage.exp12")} + `: ''} +
+
+
+
+ ` + } + + boughtARRRTemplate() { + return html` +
+
+
${translate("explorerpage.exp10")} (ARRR)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerBoughtARRRTrades) ? html` + ${translate("explorerpage.exp12")} + `: ''} +
+
+
+
+ ` + } + + soldBTCTemplate() { + return html` +
+
+
${translate("explorerpage.exp11")} (BTC)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerSoldBTCTrades) ? html` + ${translate("explorerpage.exp13")} + `: ''} +
+
+
+
+ ` + } + + soldLTCTemplate() { + return html` +
+
+
${translate("explorerpage.exp11")} (LTC)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerSoldLTCTrades) ? html` + ${translate("explorerpage.exp13")} + `: ''} +
+
+
+
+ ` + } + + soldDOGETemplate() { + return html` +
+
+
${translate("explorerpage.exp11")} (DOGE)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerSoldDOGETrades) ? html` + ${translate("explorerpage.exp13")} + `: ''} +
+
+
+
+ ` + } + + soldDGBTemplate() { + return html` +
+
+
${translate("explorerpage.exp11")} (DGB)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerSoldDGBTrades) ? html` + ${translate("explorerpage.exp13")} + `: ''} +
+
+
+
+ ` + } + + soldRVNTemplate() { + return html` +
+
+
${translate("explorerpage.exp11")} (RVN)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerSoldRVNTrades) ? html` + ${translate("explorerpage.exp13")} + `: ''} +
+
+
+
+ ` + } + + soldARRRTemplate() { + return html` +
+
+
${translate("explorerpage.exp11")} (ARRR)
+
+
${translate("login.loading")}
+ + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + +
+ ${this.isEmptyArray(this.explorerSoldARRRTrades) ? html` + ${translate("explorerpage.exp13")} + `: ''} +
+
+
+
+ ` + } + + render() { + return html` + + +

${this.infoAccountName}

+

${this.displayAddress}

+
${translate("login.loading")}
+
+ +
+
+ +
+
+
+
${translate("explorerpage.exp17")}
+
+
${translate("login.loading")}
+ + { + render(html`${translate("walletpage.wchange40")} ${data.item.creatorAddress === this.displayAddress ? html`${translate("walletpage.wchange7")}` : html`${translate("walletpage.wchange8")}`} `, root) + }} + > + + + { + const dateString = new Date(data.item.timestamp).toLocaleDateString() + render(html`${dateString}`, root) + }} + > + + { + render(html`info`, root) + }} + > + + + ${this.isEmptyArray(this.allPayments) ? html` + ${translate("walletpage.wchange38")} + `: ''} +
+
+
+
+ this.openTrades()}>${translate("explorerpage.exp21")} + this.closeCompleteInfoDialog()} dialog-dismiss>${translate("general.close")} +
+ + + +
+ +

${translate("explorerpage.exp4")}

+

${translate("explorerpage.exp5")}

+
+
+ this.closeErrorDialog()} dialog-dismiss>${translate("general.close")} +
+ + + +
+ this.openUserBoughtDialog()}>

+ this.openUserSoldDialog()}>

+
+
+ this.closeTrades()} dialog-dismiss>${translate("general.close")} +
+ + + +
+
+ ${this.boughtBTCTemplate()} + ${this.boughtLTCTemplate()} +
+
+ ${this.boughtDOGETemplate()} + ${this.boughtDGBTemplate()} +
+
+ ${this.boughtRVNTemplate()} + ${this.boughtARRRTemplate()} +
+
+
+ this.closeBoughtDialog()} dialog-dismiss>${translate("general.close")} +
+ + + +
+
+ ${this.soldBTCTemplate()} + ${this.soldLTCTemplate()} +
+
+ ${this.soldDOGETemplate()} + ${this.soldDGBTemplate()} +
+
+ ${this.soldRVNTemplate()} + ${this.soldARRRTemplate()} +
+
+
+ this.closeSoldDialog()} dialog-dismiss>${translate("general.close")} +
+ + + +
+

${translate("walletpage.wchange5")}

+
+
+
+ ${translate("walletpage.wchange6")} +
+
+ ${translate("walletpage.wchange40")} ${this.txcreatorAddress === this.displayAddress ? html`${translate("walletpage.wchange7")}` : html`${translate("walletpage.wchange8")}`} +
+ + ${translate("walletpage.wchange9")} +
+
${this.txcreatorAddress}
+ + ${translate("walletpage.wchange10")} +
+
${this.txrecipient}
+ + ${translate("walletpage.wchange12")} +
+
${this.txfee} QORT
+ + ${translate("walletpage.wchange37")} +
+
${this.txamount} QORT
+ + ${translate("walletpage.wchange13")} +
+
${this.txblockHeight}
+ + ${translate("walletpage.wchange14")} +
+
${new Date(this.txtimestamp).toString()}
+
+
+ this.closeSoldDialog()} dialog-dismiss>${translate("general.close")} +
+ + + ` + } + + openUserInfo(userData) { + if (userData.startsWith('Q') && userData.length == 34) { + this.getAddressUserResult(userData) + } else { + this.getNameUserResult(userData) + } + } + + async getAddressUserResult(resultAddress) { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const addressUrl = `${nodeUrl}/addresses/${resultAddress}` + + await fetch(addressUrl).then(res => { + if (res.status === 400) { + this.shadowRoot.getElementById('userErrorDialog').open() + } else { + this.getAllWithAddress(resultAddress) + } + }) + } + + async getNameUserResult(resultName) { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const nameUrl = `${nodeUrl}/names/${resultName}` + + await fetch(nameUrl).then(res => { + if (res.status === 404) { + this.shadowRoot.getElementById('userErrorDialog').open() + } else { + this.getAddressFromName(resultName) + } + }) + } + + async getAddressFromName(fromName) { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const fromNameUrl = `${nodeUrl}/names/${fromName}` + + const qortalNameInfo = await fetch(fromNameUrl).then(response => { + return response.json() + }) + + this.nameAddressResult = qortalNameInfo + const nameAddress = this.nameAddressResult.owner + this.getAllWithAddress(nameAddress) + } + + async getAllWithAddress(myAddress) { + await this.getAddressUserInfo(myAddress) + await this.getAddressUserAvatar(myAddress) + await this.getAddressUserBalance(myAddress) + this.displayAddress = this.addressResult.address + this.displayLevel = this.addressResult.level + this.isLoadingCompleteInfo = true + this.shadowRoot.getElementById('userFullInfoDialog').open() + await this.getStartMint() + await this.getPaymentsGridItems() + this.isLoadingCompleteInfo = false + } + + async getAddressUserInfo(infoAddress) { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const infoAddressUrl = `${nodeUrl}/addresses/${infoAddress}` + + const qortalAddressInfo = await fetch(infoAddressUrl).then(response => { + return response.json() + }) + + this.addressResult = qortalAddressInfo + } + + async getAddressUserAvatar(avatarAddress) { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const nameUrl = `${nodeUrl}/names/address/${avatarAddress}?limit=0&reverse=true` + + await fetch(nameUrl).then(res => { + return res.json() + }).then(jsonRes => { + if(jsonRes.length) { + jsonRes.map (item => { + this.infoAccountName = item.name + this.imageName = item.name + }) + } else { + this.infoAccountName = "No registered name" + this.imageName = avatarAddress + } + }) + + const myImageUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.imageName}/qortal_avatar?async=true&apiKey=${this.getApiKey()}` + this.imageUrl = myImageUrl + } + + async getAddressUserBalance(balanceAddress) { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const balanceAddressUrl = `${nodeUrl}/addresses/balance/${balanceAddress}` + + const qortalBalanceInfo = await fetch(balanceAddressUrl).then(res => { + return res.json() + }) + + this.displayBalance = qortalBalanceInfo.toFixed(4) + } + + async getStartMint() { + this.actualBlockheight = 0 + this.reduceBlockheight = 0 + this.startMintBlockheight = 0 + this.startMintTime = '' + this.startMintBlock = [] + const checkBlocks = this.addressResult.blocksMinted + this.addressResult.blocksMintedAdjustment + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + + if (checkBlocks === 0) { + let noMinterString = get("explorerpage.exp16") + this.startMintTime = noMinterString + } else { + const blockheightUrl = `${nodeUrl}/blocks/height` + + const currentBlockheight = await fetch(blockheightUrl).then(response => { + return response.json() + }) + + this.actualBlockheight = currentBlockheight + this.reduceBlockheight = this.addressResult.blocksMinted + this.addressResult.blocksMintedAdjustment + this.startMintBlockheight = (this.actualBlockheight - this.reduceBlockheight) + const startMintUrl = `${nodeUrl}/blocks/byheight/${this.startMintBlockheight}?includeOnlineSignatures=false` + + const startMintBlock = await fetch(startMintUrl).then(response => { + return response.json() + }) + + this.startMintBlock = startMintBlock + + const mintString = new Date(this.startMintBlock.timestamp).toLocaleDateString() + this.startMintTime = mintString + } + } + + avatarImage() { + return html`` + } + + avatarFullImage() { + return html`` + } + + founderBadge() { + if (this.addressResult.flags === 1) { + return html`${translate("explorerpage.exp6")}` + } else { + return html`` + } + } + + founderStatus() { + if (this.addressResult.flags === 1) { + return html`${translate("general.yes")}` + } else { + return html`${translate("general.no")}` + } + } + + async getPaymentsGridItems() { + this.allPayments = [] + this.allReceivedPayments = [] + this.allSendPayments = [] + this.totalSent = 0 + this.totalReceived = 0 + const paymentsAddress = this.displayAddress + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const paymentsUrl = `${nodeUrl}/transactions/address/${paymentsAddress}?limit=0&reverse=true` + + const paymentsAll = await fetch(paymentsUrl).then(response => { + return response.json() + }) + + this.allPayments = paymentsAll.map(item => { + const searchType = item.type + if (searchType == "PAYMENT") { + return { + timestamp: item.timestamp, + creatorAddress: item.creatorAddress, + recipient: item.recipient, + amount: item.amount, + fee: item.fee, + blockHeight: item.blockHeight + } + } + }).filter(item => !!item) + + this.allSendPayments = this.allPayments.map(item => { + const searchSendAddress = item.creatorAddress + if (searchSendAddress == paymentsAddress) { + return { + timestamp: item.timestamp, + creatorAddress: item.creatorAddress, + recipient: item.recipient, + amount: item.amount + + } + } + }).filter(item => !!item) + + this.allSendPayments.map(item => { + this.totalSent += parseFloat(item.amount) + }) + + this.allReceivedPayments = this.allPayments.map(item => { + const searchReceivedAddress = item.recipient + if (searchReceivedAddress == paymentsAddress) { + return { + timestamp: item.timestamp, + creatorAddress: item.creatorAddress, + recipient: item.recipient, + amount: item.amount + + } + } + }).filter(item => !!item) + + this.allReceivedPayments.map(item => { + this.totalReceived += parseFloat(item.amount) + }) + } + + showPaymentDetails(paymentsData) { + this.txtimestamp = '' + this.txcreatorAddress = '' + this.txrecipient = '' + this.txamount = '' + this.txfee = '' + this.txblockHeight = '' + this.txtimestamp = paymentsData.item.timestamp + this.txcreatorAddress = paymentsData.item.creatorAddress + this.txrecipient = paymentsData.item.recipient + this.txamount = paymentsData.item.amount + this.txfee = paymentsData.item.fee + this.txblockHeight = paymentsData.item.blockHeight + this.shadowRoot.getElementById('showTxDetailsDialog').open() + } + + async getBoughtBTCGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesBoughtBTCUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=BITCOIN&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myBTCAddress = this.displayAddress + + const boughtBTCTradesAll = await fetch(tradesBoughtBTCUrl).then(response => { + return response.json() + }) + + this.explorerBoughtBTCTrades = boughtBTCTradesAll.map(item => { + const searchAddress = item.buyerReceivingAddress + if (searchAddress == myBTCAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + async getBoughtLTCGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesBoughtLTCUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=LITECOIN&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myLTCAddress = this.displayAddress + + const boughtLTCTradesAll = await fetch(tradesBoughtLTCUrl).then(response => { + return response.json() + }) + + this.explorerBoughtLTCTrades = boughtLTCTradesAll.map(item => { + const searchAddress = item.buyerReceivingAddress + if (searchAddress == myLTCAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + async getBoughtDOGEGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesBoughtDOGEUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=DOGECOIN&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myDOGEAddress = this.displayAddress + + const boughtDOGETradesAll = await fetch(tradesBoughtDOGEUrl).then(response => { + return response.json() + }) + + this.explorerBoughtDOGETrades = boughtDOGETradesAll.map(item => { + const searchAddress = item.buyerReceivingAddress + if (searchAddress == myDOGEAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + async getBoughtDGBGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesBoughtDGBUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=DIGIBYTE&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myDGBAddress = this.displayAddress + + const boughtDGBTradesAll = await fetch(tradesBoughtDGBUrl).then(response => { + return response.json() + }) + + this.explorerBoughtDGBTrades = boughtDGBTradesAll.map(item => { + const searchAddress = item.buyerReceivingAddress + if (searchAddress == myDGBAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + async getBoughtRVNGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesBoughtRVNUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=RAVENCOIN&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myRVNAddress = this.displayAddress + + const boughtRVNTradesAll = await fetch(tradesBoughtRVNUrl).then(response => { + return response.json() + }) + + this.explorerBoughtRVNTrades = boughtRVNTradesAll.map(item => { + const searchAddress = item.buyerReceivingAddress + if (searchAddress == myRVNAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + async getBoughtARRRGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesBoughtARRRUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=PIRATECHAIN&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myARRRAddress = this.displayAddress + + const boughtARRRTradesAll = await fetch(tradesBoughtARRRUrl).then(response => { + return response.json() + }) + + this.explorerBoughtARRRTrades = boughtARRRTradesAll.map(item => { + const searchAddress = item.buyerReceivingAddress + if (searchAddress == myARRRAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + async getSoldBTCGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesSoldBTCUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=BITCOIN&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myBTCAddress = this.displayAddress + + const soldBTCTradesAll = await fetch(tradesSoldBTCUrl).then(response => { + return response.json() + }) + + this.explorerSoldBTCTrades = soldBTCTradesAll.map(item => { + const searchAddress = item.sellerAddress + if (searchAddress == myBTCAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + async getSoldLTCGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesSoldLTCUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=LITECOIN&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myLTCAddress = this.displayAddress + + const soldLTCTradesAll = await fetch(tradesSoldLTCUrl).then(response => { + return response.json() + }) + + this.explorerSoldLTCTrades = soldLTCTradesAll.map(item => { + const searchAddress = item.sellerAddress + if (searchAddress == myLTCAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + async getSoldDOGEGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesSoldDOGEUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=DOGECOIN&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myDOGEAddress = this.displayAddress + + const soldDOGETradesAll = await fetch(tradesSoldDOGEUrl).then(response => { + return response.json() + }) + + this.explorerSoldDOGETrades = soldDOGETradesAll.map(item => { + const searchAddress = item.sellerAddress + if (searchAddress == myDOGEAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + async getSoldDGBGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesSoldDGBUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=DIGIBYTE&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myDGBAddress = this.displayAddress + + const soldDGBTradesAll = await fetch(tradesSoldDGBUrl).then(response => { + return response.json() + }) + + this.explorerSoldDGBTrades = soldDGBTradesAll.map(item => { + const searchAddress = item.sellerAddress + if (searchAddress == myDGBAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + async getSoldRVNGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesSoldRVNUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=RAVENCOIN&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myRVNAddress = this.displayAddress + + const soldRVNTradesAll = await fetch(tradesSoldRVNUrl).then(response => { + return response.json() + }) + + this.explorerSoldRVNTrades = soldRVNTradesAll.map(item => { + const searchAddress = item.sellerAddress + if (searchAddress == myRVNAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + async getSoldARRRGridItems() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const tradesSoldARRRUrl = `${nodeUrl}/crosschain/trades?foreignBlockchain=PIRATECHAIN&minimumTimestamp=1597310000000&limit=0&reverse=true` + const myARRRAddress = this.displayAddress + + const soldARRRTradesAll = await fetch(tradesSoldARRRUrl).then(response => { + return response.json() + }) + + this.explorerSoldARRRTrades = soldARRRTradesAll.map(item => { + const searchAddress = item.sellerAddress + if (searchAddress == myARRRAddress) { + return { + timestamp: item.tradeTimestamp, + foreignAmount: item.foreignAmount, + qortAmount: item.qortAmount + } + } + }).filter(item => !!item) + } + + openTrades() { + this.shadowRoot.getElementById('userTrades').open() + this.shadowRoot.getElementById('userFullInfoDialog').close() + } + + async openUserBoughtDialog() { + this.shadowRoot.getElementById('userBoughtDialog').open() + this.explorerBoughtBTCTrades = [] + this.explorerBoughtLTCTrades = [] + this.explorerBoughtDOGETrades = [] + this.explorerBoughtDGBTrades = [] + this.explorerBoughtRVNTrades = [] + this.explorerBoughtARRRTrades = [] + this.isLoadingBoughtTradesBTC = true + this.isLoadingBoughtTradesLTC = true + this.isLoadingBoughtTradesDOGE = true + this.isLoadingBoughtTradesDGB = true + this.isLoadingBoughtTradesRVN = true + this.isLoadingBoughtTradesARRR = true + await this.getBoughtBTCGridItems() + this.isLoadingBoughtTradesBTC = false + await this.getBoughtLTCGridItems() + this.isLoadingBoughtTradesLTC = false + await this.getBoughtDOGEGridItems() + this.isLoadingBoughtTradesDOGE = false + await this.getBoughtDGBGridItems() + this.isLoadingBoughtTradesDGB = false + await this.getBoughtRVNGridItems() + this.isLoadingBoughtTradesRVN = false + await this.getBoughtARRRGridItems() + this.isLoadingBoughtTradesARRR = false + } + + async openUserSoldDialog() { + this.shadowRoot.getElementById('userSoldDialog').open() + this.explorerSoldBTCTrades = [] + this.explorerSoldLTCTrades = [] + this.explorerSoldDOGETrades = [] + this.explorerSoldDGBTrades = [] + this.explorerSoldRVNTrades = [] + this.explorerSoldARRRTrades = [] + this.isLoadingSoldTradesBTC = true + this.isLoadingSoldTradesLTC = true + this.isLoadingSoldTradesDOGE = true + this.isLoadingSoldTradesDGB = true + this.isLoadingSoldTradesRVN = true + this.isLoadingSoldTradesARRR = true + await this.getSoldBTCGridItems() + this.isLoadingSoldTradesBTC = false + await this.getSoldLTCGridItems() + this.isLoadingSoldTradesLTC = false + await this.getSoldDOGEGridItems() + this.isLoadingSoldTradesDOGE = false + await this.getSoldDGBGridItems() + this.isLoadingSoldTradesDGB = false + await this.getSoldRVNGridItems() + this.isLoadingSoldTradesRVN = false + await this.getSoldARRRGridItems() + this.isLoadingSoldTradesARRR = false + } + + closeErrorDialog() { + this.shadowRoot.getElementById('userErrorDialog').close() + } + + closeTrades() { + this.shadowRoot.getElementById('userTrades').close() + } + + closeCompleteInfoDialog() { + this.shadowRoot.getElementById('userFullInfoDialog').close() + } + + closeBoughtDialog() { + this.shadowRoot.getElementById('userBoughtDialog').close() + } + + closeSoldDialog() { + this.shadowRoot.getElementById('userSoldDialog').close() + } + + getApiKey() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + let apiKey = myNode.apiKey + return apiKey + } + + isEmptyArray(arr) { + if (!arr) { + return true + } + return arr.length === 0 + } + + round(number) { + let result = (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8) + return result + } +} + +window.customElements.define('qortal-info-view', QortalInfoView)