From ce442dee1bc6485862fcb6a2b6a5ae82a03ef339 Mon Sep 17 00:00:00 2001 From: Phillip Date: Thu, 2 Feb 2023 11:34:38 +0200 Subject: [PATCH 1/5] chatference, switch reference for signature --- .../plugins/core/components/ChatPage.js | 24 +++++++++---------- .../plugins/core/components/ChatScroller.js | 8 +++---- .../plugins/core/components/ChatTextEditor.js | 2 +- .../plugins/utils/replace-messages-edited.js | 4 ++-- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 91691e05..5a374a4d 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -1510,7 +1510,7 @@ class ChatPage extends LitElement { } async goToRepliedMessage(message, clickedOnMessage){ - const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.reference) + const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.signature) if(findMessage){ findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' }) @@ -1534,7 +1534,7 @@ class ChatPage extends LitElement { if((message.timestamp - this.messagesRendered[0].timestamp) < 86400000){ - const findOriginalMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(clickedOnMessage.reference) + const findOriginalMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(clickedOnMessage.signature) if(findOriginalMessage){ const messageClientRect = findOriginalMessage.getBoundingClientRect() this.isLoadingGoToRepliedMessage = { @@ -1546,7 +1546,7 @@ class ChatPage extends LitElement { } } await this.getOldMessageDynamic(0, this.messagesRendered[0].timestamp, message.timestamp - 7200000) - const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.reference) + const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.signature) if(findMessage){ this.isLoadingGoToRepliedMessage = { ...this.isLoadingGoToRepliedMessage, @@ -2014,7 +2014,7 @@ class ChatPage extends LitElement { await this.getUpdateComplete(); const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template')); - const findElement = marginElements.find((item)=> item.messageObj.reference === scrollElement.messageObj.reference) + const findElement = marginElements.find((item)=> item.messageObj.signature === scrollElement.messageObj.signature) if(findElement){ findElement.scrollIntoView({ behavior: 'auto', block: 'center' }); @@ -2047,7 +2047,7 @@ class ChatPage extends LitElement { this.isLoadingOldMessages = false await this.getUpdateComplete(); const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template')); - const findElement = marginElements.find((item)=> item.messageObj.reference === scrollElement.messageObj.reference) + const findElement = marginElements.find((item)=> item.messageObj.signature === scrollElement.messageObj.signature) if(findElement){ findElement.scrollIntoView({ behavior: 'auto', block: 'center' }); @@ -2085,7 +2085,7 @@ class ChatPage extends LitElement { await this.getUpdateComplete(); const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template')); - const findElement = marginElements.find((item)=> item.messageObj.reference === scrollElement.messageObj.reference) + const findElement = marginElements.find((item)=> item.messageObj.signature === scrollElement.messageObj.signature) if(findElement){ findElement.scrollIntoView({ behavior: 'auto', block: 'center' }); @@ -2118,7 +2118,7 @@ class ChatPage extends LitElement { this.isLoadingOldMessages = false await this.getUpdateComplete(); const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template')); - const findElement = marginElements.find((item)=> item.messageObj.reference === scrollElement.messageObj.reference) + const findElement = marginElements.find((item)=> item.messageObj.signature === scrollElement.messageObj.signature) if(findElement){ findElement.scrollIntoView({ behavior: 'auto', block: 'center' }); @@ -2224,7 +2224,7 @@ class ChatPage extends LitElement { async renderNewMessage(newMessage) { if(newMessage.chatReference){ - const findOriginalMessageIndex = this.messagesRendered.findIndex(msg=> msg.reference === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference) ) + const findOriginalMessageIndex = this.messagesRendered.findIndex(msg=> msg.signature === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference) ) if(findOriginalMessageIndex !== -1){ const newMessagesRendered = [...this.messagesRendered] newMessagesRendered[findOriginalMessageIndex] = {...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName, @@ -2632,7 +2632,7 @@ class ChatPage extends LitElement { return } typeMessage = 'edit'; - let chatReference = outSideMsg.editedMessageObj.reference; + let chatReference = outSideMsg.editedMessageObj.signature; if(outSideMsg.editedMessageObj.chatReference){ chatReference = outSideMsg.editedMessageObj.chatReference; @@ -2737,7 +2737,7 @@ class ChatPage extends LitElement { } else if (outSideMsg && outSideMsg.type === 'reaction') { const userName = await getName(this.selectedAddress.address); typeMessage = 'edit'; - let chatReference = outSideMsg.editedMessageObj.reference; + let chatReference = outSideMsg.editedMessageObj.signature; if (outSideMsg.editedMessageObj.chatReference) { chatReference = outSideMsg.editedMessageObj.chatReference; @@ -2795,7 +2795,7 @@ class ChatPage extends LitElement { } else if (this.repliedToMessageObj) { - let chatReference = this.repliedToMessageObj.reference; + let chatReference = this.repliedToMessageObj.signature; if(this.repliedToMessageObj.chatReference){ chatReference = this.repliedToMessageObj.chatReference; } @@ -2810,7 +2810,7 @@ class ChatPage extends LitElement { this.sendMessage(stringifyMessageObject, typeMessage); } else if (this.editedMessageObj) { typeMessage = 'edit' - let chatReference = this.editedMessageObj.reference + let chatReference = this.editedMessageObj.signature if(this.editedMessageObj.chatReference){ chatReference = this.editedMessageObj.chatReference diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 1337aef4..30d8cf70 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -123,7 +123,7 @@ class ChatScroller extends LitElement { ${formattedMessages.map((formattedMessage) => { return repeat( formattedMessage.messages, - (message) => message.reference, + (message) => message.signature, (message, indexMessage) => html` this.setOpenTipUser(val)} .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)} .setUserName=${(val) => this.setUserName(val)} - id=${message.reference} + id=${message.signature} .goToRepliedMessage=${this.goToRepliedMessage} .addSeenMessage=${(val)=> this.addSeenMessage(val)} .listSeenMessages=${this.listSeenMessages} @@ -346,7 +346,7 @@ class MessageTemplate extends LitElement { firstUpdated(){ const autoSeeChatList = window.parent.reduxStore.getState().app?.autoLoadImageChats - if(autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.reference)){ + if(autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.signature)){ this.viewImage = true } @@ -590,7 +590,7 @@ class MessageTemplate extends LitElement {
{ this.viewImage = true - this.addSeenMessage(this.messageObj.reference) + this.addSeenMessage(this.messageObj.signature) }} class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')} style=${this.isFirstMessage && "margin-top: 10px;"}> diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index 3c06df95..aff7c185 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -659,7 +659,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b let messageObject = {}; if (this.repliedToMessageObj) { - let chatReference = this.repliedToMessageObj.reference; + let chatReference = this.repliedToMessageObj.signature; if (this.repliedToMessageObj.chatReference) { chatReference = this.repliedToMessageObj.chatReference; } diff --git a/qortal-ui-plugins/plugins/utils/replace-messages-edited.js b/qortal-ui-plugins/plugins/utils/replace-messages-edited.js index b55e8848..db45d8e8 100644 --- a/qortal-ui-plugins/plugins/utils/replace-messages-edited.js +++ b/qortal-ui-plugins/plugins/utils/replace-messages-edited.js @@ -14,7 +14,7 @@ export const replaceMessagesEdited = async ({ } const response = await parentEpml.request("apiCall", { type: "api", - url: `/chat/messages?chatreference=${msg.reference}&reverse=true${msgQuery}`, + url: `/chat/messages?chatreference=${msg.signature}&reverse=true${msgQuery}`, }) if (response && Array.isArray(response) && response.length !== 0) { @@ -52,7 +52,7 @@ export const replaceMessagesEdited = async ({ if (parsedMessageObj.repliedTo) { const originalReply = await parentEpml.request("apiCall", { type: "api", - url: `/chat/messages?reference=${parsedMessageObj.repliedTo}&reverse=true${msgQuery}`, + url: `/chat/messages?signature=${parsedMessageObj.repliedTo}&reverse=true${msgQuery}`, }) const response = await parentEpml.request("apiCall", { type: "api", From 8b03d30f9cf30426c775cf377955ff331d2cee8d Mon Sep 17 00:00:00 2001 From: Phillip Date: Thu, 16 Feb 2023 22:58:37 +0200 Subject: [PATCH 2/5] fetch with signature --- qortal-ui-core/package.json | 23 +++++++------ qortal-ui-plugins/package.json | 29 ++++++++-------- .../plugins/core/components/ChatPage.js | 8 ++--- .../plugins/core/components/ChatScroller.js | 7 ++-- .../plugins/core/components/ChatTextEditor.js | 6 ++-- .../core/messaging/q-chat/q-chat.src.js | 2 +- .../plugins/utils/replace-messages-edited.js | 34 ++++++++++++------- 7 files changed, 61 insertions(+), 48 deletions(-) diff --git a/qortal-ui-core/package.json b/qortal-ui-core/package.json index 5515942d..16b78477 100644 --- a/qortal-ui-core/package.json +++ b/qortal-ui-core/package.json @@ -17,9 +17,9 @@ "author": "QORTAL ", "license": "GPL-3.0", "dependencies": { - "@hapi/hapi": "21.2.0", + "@hapi/hapi": "21.2.1", "@hapi/inert": "7.0.0", - "sass": "1.57.1" + "sass": "1.58.0" }, "devDependencies": { "@babel/core": "7.20.12", @@ -58,22 +58,23 @@ "@rollup/plugin-commonjs": "24.0.1", "@rollup/plugin-node-resolve": "15.0.1", "@rollup/plugin-replace": "5.0.2", - "@rollup/plugin-terser": "0.3.0", - "@vaadin/button": "23.3.5", - "@vaadin/grid": "23.3.5", - "@vaadin/icons": "23.3.5", - "@vaadin/password-field": "23.3.5", - "@vaadin/tooltip": "23.3.5", + "@rollup/plugin-terser": "0.4.0", + "@vaadin/button": "23.3.7", + "@vaadin/grid": "23.3.7", + "@vaadin/icons": "23.3.7", + "@vaadin/password-field": "23.3.7", + "@vaadin/tooltip": "23.3.7", "asmcrypto.js": "2.3.2", "bcryptjs": "2.4.3", "epml": "0.3.3", "file-saver": "2.0.5", "lit": "2.6.1", "lit-translate": "2.0.1", + "localforage": "1.10.0", "pwa-helpers": "0.9.1", - "redux": "4.2.0", + "redux": "4.2.1", "redux-thunk": "2.4.2", - "rollup": "3.10.1", + "rollup": "3.14.0", "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-progress": "1.1.2", "rollup-plugin-scss": "3.0.0", @@ -82,4 +83,4 @@ "engines": { "node": ">=16.17.1" } -} \ No newline at end of file +} diff --git a/qortal-ui-plugins/package.json b/qortal-ui-plugins/package.json index 7ab1011d..19a1297e 100644 --- a/qortal-ui-plugins/package.json +++ b/qortal-ui-plugins/package.json @@ -20,13 +20,14 @@ "@lit-labs/motion": "1.0.3", "@material/mwc-list": "0.27.0", "@material/mwc-select": "0.27.0", - "@tiptap/core": "2.0.0-beta.209", - "@tiptap/extension-highlight": "2.0.0-beta.209", - "@tiptap/extension-image": "2.0.0-beta.209", - "@tiptap/extension-placeholder": "2.0.0-beta.209", - "@tiptap/extension-underline": "2.0.0-beta.209", - "@tiptap/html": "2.0.0-beta.209", - "@tiptap/starter-kit": "2.0.0-beta.209", + "@tiptap/pm": "2.0.0-beta.212", + "@tiptap/core": "2.0.0-beta.212", + "@tiptap/extension-highlight": "2.0.0-beta.212", + "@tiptap/extension-image": "2.0.0-beta.212", + "@tiptap/extension-placeholder": "2.0.0-beta.212", + "@tiptap/extension-underline": "2.0.0-beta.212", + "@tiptap/html": "2.0.0-beta.212", + "@tiptap/starter-kit": "2.0.0-beta.212", "asmcrypto.js": "2.3.2", "compressorjs": "1.1.1", "emoji-picker-js": "https://github.com/Qortal/emoji-picker-js", @@ -69,19 +70,19 @@ "@rollup/plugin-commonjs": "24.0.1", "@rollup/plugin-node-resolve": "15.0.1", "@rollup/plugin-replace": "5.0.2", - "@rollup/plugin-terser": "0.3.0", - "@vaadin/avatar": "23.3.5", - "@vaadin/button": "23.3.5", - "@vaadin/grid": "23.3.5", - "@vaadin/icons": "23.3.5", - "@vaadin/tooltip": "23.3.5", + "@rollup/plugin-terser": "0.4.0", + "@vaadin/avatar": "23.3.7", + "@vaadin/button": "23.3.7", + "@vaadin/grid": "23.3.7", + "@vaadin/icons": "23.3.7", + "@vaadin/tooltip": "23.3.7", "epml": "0.3.3", "file-saver": "2.0.5", "highcharts": "10.3.3", "html-escaper": "3.0.3", "lit": "2.6.1", "lit-translate": "2.0.1", - "rollup": "3.10.1", + "rollup": "3.14.0", "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-progress": "1.1.2", "rollup-plugin-web-worker-loader": "1.6.1", diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 5a374a4d..820799cf 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -991,7 +991,7 @@ class ChatPage extends LitElement { ${this.repliedToMessageObj.version.toString() === '1' ? html` ${this.repliedToMessageObj.message} ` : ''} - ${this.repliedToMessageObj.version.toString() === '2' + ${+this.repliedToMessageObj.version > 1 ? html` ${unsafeHTML(generateHTML(this.repliedToMessageObj.message, [ @@ -2730,7 +2730,7 @@ class ChatPage extends LitElement { }], isImageDeleted: false, repliedTo: '', - version: 2 + version: 3 }; const stringifyMessageObject = JSON.stringify(messageObject); this.sendMessage(stringifyMessageObject, typeMessage); @@ -2804,7 +2804,7 @@ class ChatPage extends LitElement { messageText: trimmedMessage, images: [''], repliedTo: chatReference, - version: 2 + version: 3 } const stringifyMessageObject = JSON.stringify(messageObject); this.sendMessage(stringifyMessageObject, typeMessage); @@ -2836,7 +2836,7 @@ class ChatPage extends LitElement { messageText: trimmedMessage, images: [''], repliedTo: '', - version: 2 + version: 3 } const stringifyMessageObject = JSON.stringify(messageObject) diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 30d8cf70..cff2e0b5 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -371,7 +371,8 @@ class MessageTemplate extends LitElement { let isEdited = false try { const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage); - if(parsedMessageObj.version.toString() === '2'){ + console.log({parsedMessageObj}, +parsedMessageObj.version, +parsedMessageObj.version > 1) + if(+parsedMessageObj.version > 1){ messageVersion2 = generateHTML(parsedMessageObj.messageText, [ StarterKit, @@ -574,7 +575,7 @@ class MessageTemplate extends LitElement { ${version.toString() === '1' ? html` ${repliedToData.decodedMessage.messageText} ` : ''} - ${version.toString() === '2' ? html` + ${+version > 1 ? html` ${unsafeHTML(generateHTML(repliedToData.decodedMessage.messageText, [ StarterKit, Underline, @@ -627,7 +628,7 @@ class MessageTemplate extends LitElement { id="messageContent" class="message" style=${(image && replacedMessage !== "") &&"margin-top: 15px;"}> - ${version.toString() === '2' ? html` + ${+version > 1 ? html` ${unsafeHTML(messageVersion2)} ` : ''} ${version.toString() === '1' ? html` diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index aff7c185..e7879324 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -667,7 +667,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b messageText: trimmedMessage, images: [''], repliedTo: chatReference, - version: 2 + version: 3 } } else if (this.editedMessageObj) { let message = ""; @@ -690,14 +690,14 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b identifier: '123456' }], repliedTo: '', - version: 2 + version: 3 }; } else { messageObject = { messageText: trimmedMessage, images: [''], repliedTo: '', - version: 2 + version: 3 }; } diff --git a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js index a8b268e5..4b62cbf5 100644 --- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js +++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js @@ -533,7 +533,7 @@ class Chat extends LitElement { messageText: trimmedMessage, images: [''], repliedTo: '', - version: 2 + version: 3 } const stringifyMessageObject = JSON.stringify(messageObject) this.sendMessage(stringifyMessageObject); diff --git a/qortal-ui-plugins/plugins/utils/replace-messages-edited.js b/qortal-ui-plugins/plugins/utils/replace-messages-edited.js index db45d8e8..82045e6b 100644 --- a/qortal-ui-plugins/plugins/utils/replace-messages-edited.js +++ b/qortal-ui-plugins/plugins/utils/replace-messages-edited.js @@ -50,24 +50,36 @@ export const replaceMessagesEdited = async ({ msgQuery = `&txGroupId=${msg.txGroupId}` } if (parsedMessageObj.repliedTo) { - const originalReply = await parentEpml.request("apiCall", { - type: "api", - url: `/chat/messages?signature=${parsedMessageObj.repliedTo}&reverse=true${msgQuery}`, - }) + console.log({parsedMessageObj}) + let originalReply + if(+parsedMessageObj.version > 2){ + originalReply = await parentEpml.request("apiCall", { + type: "api", + url: `/chat/message/${parsedMessageObj.repliedTo}`, + }) + } + if(+parsedMessageObj.version < 3){ + originalReply = await parentEpml.request("apiCall", { + type: "api", + url: `/chat/messages?reference=${parsedMessageObj.repliedTo}&reverse=true${msgQuery}`, + }) + } + + const response = await parentEpml.request("apiCall", { type: "api", url: `/chat/messages?chatreference=${parsedMessageObj.repliedTo}&reverse=true${msgQuery}`, }) + + const originalReplyMessage = originalReply.timestamp ? originalReply : originalReply.length !== 0 ? originalReply[0] : null if ( - originalReply && - Array.isArray(originalReply) && - originalReply.length !== 0 && + originalReplyMessage && response && Array.isArray(response) && response.length !== 0 ) { - const decodeOriginalReply = decodeMessageFunc(originalReply[0], isReceipient, _publicKey) + const decodeOriginalReply = decodeMessageFunc(originalReplyMessage, isReceipient, _publicKey) const decodeUpdatedReply = decodeMessageFunc(response[0], isReceipient, _publicKey) const formattedRepliedToData = { @@ -83,14 +95,12 @@ export const replaceMessagesEdited = async ({ if ( - originalReply && - Array.isArray(originalReply) && - originalReply.length !== 0 + originalReplyMessage ) { msgItem = { ...msg, - repliedToData: decodeMessageFunc(originalReply[0], isReceipient, _publicKey), + repliedToData: decodeMessageFunc(originalReplyMessage, isReceipient, _publicKey), } } } From 215ab4ef231ae1d9d7d10441143fb806b17526f9 Mon Sep 17 00:00:00 2001 From: Phillip Date: Thu, 16 Feb 2023 23:08:07 +0200 Subject: [PATCH 3/5] switch to signature --- qortal-ui-plugins/plugins/core/components/ChatPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 7dee800d..32f5840c 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -2784,7 +2784,7 @@ class ChatPage extends LitElement { return } typeMessage = 'edit'; - let chatReference = outSideMsg.editedMessageObj.reference; + let chatReference = outSideMsg.editedMessageObj.signature; if(outSideMsg.editedMessageObj.chatReference){ chatReference = outSideMsg.editedMessageObj.chatReference; From 160b4449269f7b9e4a8fc5beb38fcdca051958b3 Mon Sep 17 00:00:00 2001 From: Phillip Date: Thu, 16 Feb 2023 23:38:09 +0200 Subject: [PATCH 4/5] remove console.log --- qortal-ui-plugins/plugins/core/components/ChatScroller.js | 1 - 1 file changed, 1 deletion(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 4a6e7111..7ed44c52 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -392,7 +392,6 @@ class MessageTemplate extends LitElement { let attachment = null; try { const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage); - console.log({parsedMessageObj}, +parsedMessageObj.version, +parsedMessageObj.version > 1) if(+parsedMessageObj.version > 1){ messageVersion2 = generateHTML(parsedMessageObj.messageText, [ 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 5/5] 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("mintingpage.mchange27")} ${this.displayLevel} +
    • +
  • + ${translate("walletprofile.blocksminted")} ${this.addressResult.blocksMinted + this.addressResult.blocksMintedAdjustment} +
    • +
  • + ${translate("explorerpage.exp15")} ${this.startMintTime} +
    • +
  • + ${translate("general.balance")} ${this.displayBalance} QORT +
    • +
  • + ${translate("explorerpage.exp6")} ${this.founderStatus()} +
    • +
+
+
+
    +
  • + ${translate("explorerpage.exp18")} ${this.allPayments.length} +
    • +
  • + ${translate("explorerpage.exp19")} ${this.allSendPayments.length} +
    • +
  • + QORT ${translate("explorerpage.exp19")} ${this.totalSent.toFixed(0)} QORT +
    • +
  • + ${translate("explorerpage.exp20")} ${this.allReceivedPayments.length} +
    • +
  • + QORT ${translate("explorerpage.exp20")} ${this.totalReceived.toFixed(0)} QORT +
    • +
+
+
+
+
${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)