Update q-chat and remove errors

plugins/plugins/core/components/ChatGifs/ChatGifs.js

@@ -5,12 +5,12 @@ import * as zip from '@zip.js/zip.js';
 import '@material/mwc-icon';
 import ShortUniqueId from 'short-unique-id';
 import {publishData} from '../../../utils/publish-image.js';
-import {translate, get} from 'lit-translate';
 import {gifExplorerStyles} from './ChatGifs-css.js';
 import { bytesToMegabytes } from '../../../utils/bytesToMegabytes.js';
 import './ChatGifsExplore.js';
 import '../ImageComponent.js';
 import '@vaadin/tooltip';
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 
 const parentEpml = new Epml({type: 'WINDOW', source: window.parent});
 
@@ -993,4 +993,4 @@ setOpenGifModal: { attribute: false }
 
 }
 
-window.customElements.define('chat-gifs', ChatGifs);
+window.customElements.define('chat-gifs', ChatGifs)

plugins/plugins/core/components/ChatGifs/ChatGifsExplore.js

@@ -1,8 +1,8 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css } from 'lit'
-import { Epml } from '../../../../epml.js';
+import { Epml } from '../../../../epml.js'
-import { chatGifsExploreStyles } from './ChatGifsExplore-css.js';
+import { chatGifsExploreStyles } from './ChatGifsExplore-css.js'
-import { translate, get } from 'lit-translate';
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
-import '@material/mwc-icon';
+import '@material/mwc-icon'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
 
@@ -69,9 +69,9 @@ class ChatGifsExplore extends LitElement {
     	this.elementObserver();
     }
 	getApiKey() {
-        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
+        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
-        let apiKey = myNode.apiKey;
+        let apiKey = myNode.apiKey
-        return apiKey;
+        return apiKey
     }
 
 		async searchCollections() {
@@ -169,4 +169,4 @@ class ChatGifsExplore extends LitElement {
 
 }
 
-window.customElements.define('chat-gifs-explore', ChatGifsExplore);
+window.customElements.define('chat-gifs-explore', ChatGifsExplore)

plugins/plugins/core/components/ChatGroupInvites.js

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit"
 import { render } from "lit/html.js"
-import { get, translate } from "lit-translate"
 import { Epml } from "../../../epml"
 import snackbar from "./snackbar.js"
 import "@material/mwc-button"
@@ -8,6 +7,7 @@ import "@material/mwc-dialog"
 import "@polymer/paper-spinner/paper-spinner-lite.js"
 import "@material/mwc-icon"
 import "./WrapperModal"
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 
 const parentEpml = new Epml({ type: "WINDOW", source: window.parent })
 

plugins/plugins/core/components/ChatGroupSettings.js

@@ -1,13 +1,13 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css } from 'lit'
-import { render } from 'lit/html.js';
+import { render } from 'lit/html.js'
-import { get, translate } from 'lit-translate';
+import { Epml } from '../../../epml'
-import { Epml } from '../../../epml';
 import snackbar from './snackbar.js'
-import '@material/mwc-button';
+import '@material/mwc-button'
-import '@material/mwc-dialog';
+import '@material/mwc-dialog'
 import '@polymer/paper-spinner/paper-spinner-lite.js'
-import '@material/mwc-icon';
+import '@material/mwc-icon'
-import './WrapperModal';
+import './WrapperModal'
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
@@ -25,7 +25,7 @@ class ChatGroupSettings extends LitElement {
   }
 
   constructor() {
-    super();
+    super()
     this.isLoading = false;
     this.isOpenLeaveModal = false
     this.leaveGroupObj = {}

plugins/plugins/core/components/ChatGroupsManagement.js

@@ -1,19 +1,19 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css } from 'lit'
-import { render } from 'lit/html.js';
+import { render } from 'lit/html.js'
-import { get, translate } from 'lit-translate';
+import { Epml } from '../../../epml'
-import { Epml } from '../../../epml';
 import snackbar from './snackbar.js'
-import '@material/mwc-button';
+import '@material/mwc-button'
-import '@material/mwc-dialog';
+import '@material/mwc-dialog'
 import '@polymer/paper-spinner/paper-spinner-lite.js'
-import '@material/mwc-icon';
+import '@material/mwc-icon'
-import './WrapperModal';
+import './WrapperModal'
 import '@vaadin/tabs'
-import '@vaadin/tabs/theme/material/vaadin-tabs.js';
+import '@vaadin/tabs/theme/material/vaadin-tabs.js'
-import '@vaadin/avatar';
+import '@vaadin/avatar'
-import '@vaadin/grid';
+import '@vaadin/grid'
-import '@vaadin/grid/vaadin-grid-filter-column.js';
+import '@vaadin/grid/vaadin-grid-filter-column.js'
-import { columnBodyRenderer } from '@vaadin/grid/lit.js';
+import { columnBodyRenderer } from '@vaadin/grid/lit.js'
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 

plugins/plugins/core/components/ChatHead.js

@@ -1,18 +1,20 @@
 import { LitElement, html, css } from 'lit'
 import { render } from 'lit/html.js'
 import { Epml } from '../../../epml.js'
-import localForage from "localforage";
+import localForage from "localforage"
-import { translate} from 'lit-translate';
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
-
 import '@material/mwc-icon'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
+
 const chatLastSeen = localForage.createInstance({
     name: "chat-last-seen",
-});
+})
+
 class ChatHead extends LitElement {
     static get properties() {
         return {
+            theme: { type: String, reflect: true },
             selectedAddress: { type: Object },
             config: { type: Object },
             chatInfo: { type: Object },
@@ -53,10 +55,7 @@ class ChatHead extends LitElement {
                 color: var(--chat-group);
             }
 
-         
-
             .about {
-   
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
@@ -109,12 +108,13 @@ class ChatHead extends LitElement {
         this.imageFetches = 0
         this.lastReadMessageTimestamp =  0
         this.loggedInAddress = window.parent.reduxStore.getState().app.selectedAddress.address
+        this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
     }
 
      createImage(imageUrl)  {
-        const imageHTMLRes = new Image();
+        const imageHTMLRes = new Image()
-        imageHTMLRes.src = imageUrl;
+        imageHTMLRes.src = imageUrl
-        imageHTMLRes.style= "width:40px; height:40px; float: left; border-radius:50%";
+        imageHTMLRes.style= "width:40px; height:40px; float: left; border-radius:50%"
         imageHTMLRes.onclick= () => {
             this.openDialogImage = true;
         }
@@ -124,29 +124,25 @@ class ChatHead extends LitElement {
         imageHTMLRes.onerror = () => {   
             if (this.imageFetches < 4) {
                 setTimeout(() => {
-                    this.imageFetches = this.imageFetches + 1;
+                    this.imageFetches = this.imageFetches + 1
-                    imageHTMLRes.src = imageUrl;
+                    imageHTMLRes.src = imageUrl
-                }, 750);
+                }, 750)
             } else {
-               
-
                 this.isImageLoaded = false
             }
         };
-        return imageHTMLRes;
+        return imageHTMLRes
       }
 
-      
-    
     render() {
-        let avatarImg = '';
+        let avatarImg = ''
         let backupAvatarImg = ''
         let isUnread = false
     
         if(this.chatInfo.name){
-            const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
+            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 nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
-            const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.chatInfo.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
+            const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.chatInfo.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`
             avatarImg= this.createImage(avatarUrl)
         }
 
@@ -189,6 +185,19 @@ class ChatHead extends LitElement {
     }
 
    async firstUpdated() {
+        this.changeTheme()
+
+        window.addEventListener('storage', () => {
+            const checkTheme = localStorage.getItem('qortalTheme')
+
+            if (checkTheme === 'dark') {
+                this.theme = 'dark'
+            } else {
+                this.theme = 'light'
+            }
+            document.querySelector('html').setAttribute('theme', this.theme)
+        })
+
         let configLoaded = false
         this.lastReadMessageTimestamp =  await chatLastSeen.getItem(this.chatInfo.url) || 0
         parentEpml.ready().then(() => {
@@ -217,6 +226,16 @@ class ChatHead extends LitElement {
         parentEpml.imReady()
     }
 
+    changeTheme() {
+        const checkTheme = localStorage.getItem('qortalTheme')
+        if (checkTheme === 'dark') {
+            this.theme = 'dark'
+        } else {
+            this.theme = 'light'
+        }
+        document.querySelector('html').setAttribute('theme', this.theme)
+    }
+
     shouldUpdate(changedProperties) {
         if(changedProperties.has('activeChatHeadUrl')){
             return true

plugins/plugins/core/components/ChatLeaveGroup.js

@@ -1,13 +1,14 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css } from 'lit'
-import { render } from 'lit/html.js';
+import { render } from 'lit/html.js'
-import { get, translate } from 'lit-translate';
+import { Epml } from '../../../epml'
-import { Epml } from '../../../epml';
 import snackbar from './snackbar.js'
-import '@material/mwc-button';
+import '@material/mwc-button'
-import '@material/mwc-dialog';
+import '@material/mwc-dialog'
 import '@polymer/paper-spinner/paper-spinner-lite.js'
-import '@material/mwc-icon';
+import '@material/mwc-icon'
-import './WrapperModal';
+import './WrapperModal'
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
+
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
 class ChatLeaveGroup extends LitElement {

plugins/plugins/core/components/ChatMessage.js

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit'
 import { render } from 'lit/html.js'
 import { Epml } from '../../../epml.js'
-
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 

plugins/plugins/core/components/ChatModals.js

@@ -1,10 +1,10 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css } from 'lit'
-import { render } from 'lit/html.js';
+import { render } from 'lit/html.js'
-import { get, translate } from 'lit-translate';
+import { Epml } from '../../../epml'
-import { Epml } from '../../../epml';
 import snackbar from './snackbar.js'
-import '@material/mwc-button';
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
-import '@material/mwc-dialog';
+import '@material/mwc-button'
+import '@material/mwc-dialog'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
@@ -18,15 +18,15 @@ class ChatModals extends LitElement {
       hidePrivateMessageModal: {type: Function},
       hideBlockUserModal: {type: Function},
       toblockaddress: { type: String, attribute: true },
-      chatBlockedAdresses: { type: Array },
+      chatBlockedAdresses: { type: Array }
     }
   }
 
   constructor() {
-    super();
+    super()
-    this.isLoading = false;
+    this.isLoading = false
-    this.hidePrivateMessageModal = () => {};
+    this.hidePrivateMessageModal = () => {}
-    this.hideBlockUserModal = () => {};
+    this.hideBlockUserModal = () => {}
     this.chatBlockedAdresses = []
   }
 
@@ -105,13 +105,13 @@ class ChatModals extends LitElement {
     } else {
         this.sendMessage()
     }
-  };
+  }
 
     async sendMessage() {
-        this.isLoading = true;
+        this.isLoading = true
-        const _recipient = this.shadowRoot.getElementById('sendTo').value;
+        const _recipient = this.shadowRoot.getElementById('sendTo').value
-        const messageBox = this.shadowRoot.getElementById('messageBox');
+        const messageBox = this.shadowRoot.getElementById('messageBox')
-        const messageText = messageBox.value;
+        const messageText = messageBox.value
         let recipient;
 
         const validateName = async (receiverName) => {
@@ -127,7 +127,7 @@ class ChatModals extends LitElement {
                 myRes = myNameRes
             }
 
-            return myRes;
+            return myRes
         }
 
         const myNameRes = await validateName(_recipient)
@@ -138,8 +138,8 @@ class ChatModals extends LitElement {
 
             recipient = myNameRes.owner
         }
-        let _reference = new Uint8Array(64);
+        let _reference = new Uint8Array(64)
-        window.crypto.getRandomValues(_reference);
+        window.crypto.getRandomValues(_reference)
 
         let sendTimestamp = Date.now()
 
@@ -200,17 +200,17 @@ class ChatModals extends LitElement {
 
     const _computePow = async (chatBytes) => {
 
-        const _chatBytesArray = Object.keys(chatBytes).map(function (key) { return chatBytes[key]; });
+        const _chatBytesArray = Object.keys(chatBytes).map(function (key) { return chatBytes[key]; })
         const chatBytesArray = new Uint8Array(_chatBytesArray)
         const chatBytesHash = new window.parent.Sha256().process(chatBytesArray).finish().result
-        const hashPtr = window.parent.sbrk(32, window.parent.heap);
+        const hashPtr = window.parent.sbrk(32, window.parent.heap)
-        const hashAry = new Uint8Array(window.parent.memory.buffer, hashPtr, 32);
+        const hashAry = new Uint8Array(window.parent.memory.buffer, hashPtr, 32)
-        hashAry.set(chatBytesHash);
+        hashAry.set(chatBytesHash)
 
-        const difficulty = this.balance < 4 ? 18 : 8;
+        const difficulty = this.balance < 4 ? 18 : 8
 
         const workBufferLength = 8 * 1024 * 1024;
-        const workBufferPtr = window.parent.sbrk(workBufferLength, window.parent.heap);
+        const workBufferPtr = window.parent.sbrk(workBufferLength, window.parent.heap)
 
         let nonce = window.parent.computePow(hashPtr, workBufferPtr, workBufferLength, difficulty)
 
@@ -250,9 +250,9 @@ class ChatModals extends LitElement {
     }
 
     getApiKey() {
-        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
+        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
-        let apiKey = myNode.apiKey;
+        let apiKey = myNode.apiKey
-        return apiKey;
+        return apiKey
     }
 
     getChatBlockedList() {
@@ -263,7 +263,7 @@ class ChatModals extends LitElement {
 
         localStorage.removeItem("ChatBlockedAddresses")
 
-        var obj = [];
+        var obj = []
 
         fetch(blockedAddressesUrl).then(response => {
             return response.json()
@@ -412,4 +412,4 @@ class ChatModals extends LitElement {
   }
 }
 
-customElements.define('chat-modals', ChatModals);
+customElements.define('chat-modals', ChatModals)

plugins/plugins/core/components/ChatPage.js

@@ -35,7 +35,7 @@ import './ChatSideNavHeads.js'
 import './ChatLeaveGroup.js'
 import './ChatGroupSettings.js'
 import './ChatRightPanel.js'
-import './ChatSeachResults.js'
+import './ChatSearchResults.js'
 import './ChatGifs/ChatGifs.js'
 
 import '@material/mwc-button'
@@ -44,10 +44,6 @@ import '@material/mwc-icon'
 import '@polymer/paper-dialog/paper-dialog.js'
 import '@polymer/paper-spinner/paper-spinner-lite.js'
 
-registerTranslateConfig({
-    loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
-})
-
 const chatLastSeen = localForage.createInstance({
     name: "chat-last-seen",
 })
@@ -57,6 +53,7 @@ const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 class ChatPage extends LitElement {
     static get properties() {
         return {
+            theme: { type: String, reflect: true },
             selectedAddress: { type: Object },
             config: { type: Object },
             messages: { type: Array },
@@ -1350,6 +1347,7 @@ class ChatPage extends LitElement {
             left: 0,
             offsetHeight: 0
         }
+        this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
     }
 
     setOpenGifModal(value) {
@@ -2377,10 +2375,20 @@ class ChatPage extends LitElement {
     }
 
     async firstUpdated() {
+        this.changeTheme()
+
         window.addEventListener('storage', () => {
             const checkLanguage = localStorage.getItem('qortalLanguage')
-            use(checkLanguage)
+            const checkTheme = localStorage.getItem('qortalTheme')
+
             this.userLanguage = checkLanguage
+
+            if (checkTheme === 'dark') {
+                this.theme = 'dark'
+            } else {
+                this.theme = 'light'
+            }
+            document.querySelector('html').setAttribute('theme', this.theme)
         })
 
         parentEpml.ready().then(() => {
@@ -2406,6 +2414,16 @@ class ChatPage extends LitElement {
 
     }
 
+    changeTheme() {
+        const checkTheme = localStorage.getItem('qortalTheme')
+        if (checkTheme === 'dark') {
+            this.theme = 'dark'
+        } else {
+            this.theme = 'light'
+        }
+        document.querySelector('html').setAttribute('theme', this.theme)
+    }
+
     async updated(changedProperties) {
         if (changedProperties && changedProperties.has('userLanguage')) {
             const userLang = changedProperties.get('userLanguage')
@@ -3926,7 +3944,6 @@ class ChatPage extends LitElement {
     }
 
     pasteToTextBox(textarea) {
-
         // Return focus to the window
         window.focus()
 

plugins/plugins/core/components/ChatRightPanel.js

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { render } from "lit/html.js";
-import { get, translate } from "lit-translate";
 import { Epml } from "../../../epml";
 import { getUserNameFromAddress } from "../../utils/getUserNameFromAddress";
 import snackbar from "./snackbar.js";
@@ -13,6 +12,9 @@ import '@vaadin/button';
 import "./WrapperModal";
 import "./TipUser"
 import "./UserInfo/UserInfo";
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
+
+const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
 class ChatRightPanel extends LitElement {
 	static get properties() {

plugins/plugins/core/components/ChatScroller.js

@@ -29,10 +29,6 @@ import '@vaadin/icon'
 import '@vaadin/icons'
 import '@vaadin/tooltip'
 
-registerTranslateConfig({
-    loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
-})
-
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
 let toggledMessage = {}
@@ -172,6 +168,7 @@ function processText(input) {
 class ChatScroller extends LitElement {
     static get properties() {
         return {
+            theme: { type: String, reflect: true },
             getNewMessage: { attribute: false },
             getOldMessage: { attribute: false },
             escapeHTML: { attribute: false },
@@ -216,6 +213,7 @@ class ChatScroller extends LitElement {
         this.openTipUser = false
         this.openUserInfo = false
         this.listSeenMessages = []
+        this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
     }
 
     addSeenMessage(val) {
@@ -259,7 +257,6 @@ class ChatScroller extends LitElement {
             return messageArray
         }, [])
 
-
         return html`
               ${this.isLoadingMessages ? html`
                 <div class="spinnerContainer">
@@ -337,8 +334,20 @@ class ChatScroller extends LitElement {
     }
 
     async firstUpdated() {
-        this.emojiPicker.on('emoji', selection => {
+        this.changeTheme()
 
+        window.addEventListener('storage', () => {
+            const checkTheme = localStorage.getItem('qortalTheme')
+
+            if (checkTheme === 'dark') {
+                this.theme = 'dark'
+            } else {
+                this.theme = 'light'
+            }
+            document.querySelector('html').setAttribute('theme', this.theme)
+        })
+
+        this.emojiPicker.on('emoji', selection => {
             this.sendMessage({
                 type: 'reaction',
                 editedMessageObj: toggledMessage,
@@ -355,6 +364,16 @@ class ChatScroller extends LitElement {
         this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
     }
 
+    changeTheme() {
+        const checkTheme = localStorage.getItem('qortalTheme')
+        if (checkTheme === 'dark') {
+            this.theme = 'dark'
+        } else {
+            this.theme = 'light'
+        }
+        document.querySelector('html').setAttribute('theme', this.theme)
+    }
+
     _getOldMessage(_scrollElement) {
         this.getOldMessage(_scrollElement)
     }
@@ -447,7 +466,7 @@ class MessageTemplate extends LitElement {
             goToRepliedMessage: { attribute: false },
             listSeenMessages: { type: Array },
             addSeenMessage: { attribute: false },
-            chatId: { type: String },
+            chatId: { type: String }
         }
     }
 
@@ -1220,7 +1239,7 @@ class ChatMenu extends LitElement {
             setOpenPrivateMessage: { attribute: false },
             setOpenTipUser: { attribute: false },
             setUserName: { attribute: false },
-            gif: { type: Boolean },
+            gif: { type: Boolean }
         }
     }
 

plugins/plugins/core/components/ChatSearchResults.js

@@ -0,0 +1,72 @@
+import { LitElement, html } from 'lit'
+import { render } from 'lit/html.js'
+import { Epml } from '../../../epml.js'
+import { chatSearchResultsStyles } from './ChatSearchResults-css.js'
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
+import '@vaadin/icon'
+import '@vaadin/icons'
+
+const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
+
+export class ChatSearchResults extends LitElement {
+  static get properties() {
+    return {
+      onClickFunc: { attribute: false },
+      closeFunc: { attribute: false },
+      searchResults: { type: Array },
+      isOpen: { type: Boolean },
+      loading: { type: Boolean }
+    }
+  }
+
+  static styles = [chatSearchResultsStyles]
+
+  render() {
+    return html`
+      <div class="chat-results-card" style=${this.isOpen ? "display: block;" : "display: none;"}>
+        <vaadin-icon 
+          @click=${() => this.closeFunc()} 
+          icon="vaadin:close-small" 
+          slot="icon"
+          class="close-icon"
+      >
+      </vaadin-icon>
+        ${this.loading ? (
+          html`
+            <div class="spinner-container">
+              <paper-spinner-lite active></paper-spinner-lite>
+            </div>
+          `
+        ) : (
+          html`
+          <p class="chat-result-header">${translate("chatpage.cchange36")}</p>
+          <div class="divider"></div>
+          <div class="chat-result-container">
+            ${this.searchResults.length === 0 ? (
+              html`<p class="no-results">${translate("chatpage.cchange37")}</p>`
+            ) : (
+              html`
+                ${this.searchResults.map((result) => {
+                  return (
+                    html`
+                      <div class="chat-result-card" @click=${() => {
+                        this.shadowRoot.querySelector(".chat-result-card").classList.add("active");
+                          this.onClickFunc(result);
+                      }}>
+                        <p class="chat-result">
+                          ${result.name}
+                        </p>
+                      </div>
+                    `
+                  )}
+                )}
+                `
+              )}
+            </div>
+          `
+        )}
+      </div>
+    `
+  }
+}
+customElements.define('chat-search-results', ChatSearchResults)

plugins/plugins/core/components/ChatSelect.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit'
+import { render } from 'lit/html.js'
 import { Epml } from '../../../epml.js'
 
 import '@material/mwc-icon'

plugins/plugins/core/components/ChatSideNavHeads.js

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit'
+import { render } from 'lit/html.js'
 import { Epml } from '../../../epml.js'
-
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 import '@material/mwc-icon'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })

plugins/plugins/core/components/ChatTextEditor copy.js

@@ -1,11 +1,12 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css } from "lit"
-import { get } from 'lit-translate';
+import { escape, unescape } from 'html-escaper'
-import { escape, unescape } from 'html-escaper';
+import { EmojiPicker } from 'emoji-picker-js'
-import { EmojiPicker } from 'emoji-picker-js';
+import { inputKeyCodes } from '../../utils/keyCodes.js'
-import { inputKeyCodes } from '../../utils/keyCodes.js';
+import { Epml } from '../../../epml.js'
-import { Epml } from '../../../epml.js';
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
+
+const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
-const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
 class ChatTextEditor extends LitElement {
 	static get properties() {
 		return {
@@ -298,13 +299,13 @@ class ChatTextEditor extends LitElement {
         }
 
         window.addEventListener('storage', () => {
-            const checkTheme = localStorage.getItem('qortalTheme');
+            const checkTheme = localStorage.getItem('qortalTheme')
-            const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId');
+            const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId')
             if (checkTheme === 'dark') {
-                this.theme = 'dark';
+                this.theme = 'dark'
                 chatbar.style.cssText = "color:#ffffff;"
             } else {
-                this.theme = 'light';
+                this.theme = 'light'
                 chatbar.style.cssText = "color:#080808;"
             }
         })
@@ -323,18 +324,18 @@ class ChatTextEditor extends LitElement {
             boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px',
             zIndex: 100
 
-        });
+        })
 
         this.emojiPicker.on('emoji', selection => {
-            const emojiHtmlString = `<img class="emoji" draggable="false" alt="${selection.emoji}" src="${selection.url}">`;
+            const emojiHtmlString = `<img class="emoji" draggable="false" alt="${selection.emoji}" src="${selection.url}">`
             this.chatEditor.insertEmoji(emojiHtmlString);
-        });
+        })
 
 
-        this.emojiPickerHandler.addEventListener('click', () => this.emojiPicker.togglePicker(this.emojiPickerHandler));
+        this.emojiPickerHandler.addEventListener('click', () => this.emojiPicker.togglePicker(this.emojiPickerHandler))
 
-        await this.updateComplete;
+        await this.updateComplete
-        this.initChatEditor();
+        this.initChatEditor()
 	}
 
     async updated(changedProperties) {
@@ -348,12 +349,12 @@ class ChatTextEditor extends LitElement {
             }
         }
         if (changedProperties && changedProperties.has('placeholder')) {
-            const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId');
+            const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId')
-            captionEditor.setAttribute('data-placeholder', this.placeholder);
+            captionEditor.setAttribute('data-placeholder', this.placeholder)
         }
        
         if (changedProperties && changedProperties.has("imageFile")) {
-            this.chatMessageInput = "newChat";
+            this.chatMessageInput = "newChat"
         }
     }
 
@@ -365,12 +366,12 @@ class ChatTextEditor extends LitElement {
 
     sendMessageFunc(props) {
         if (this.chatMessageSize > 1000 ) {
-            parentEpml.request('showSnackBar', get("chatpage.cchange29"));
+            parentEpml.request('showSnackBar', get("chatpage.cchange29"))
-            return;
+            return
         };
-        this.chatMessageSize = 0;
+        this.chatMessageSize = 0
-        this.chatEditor.updateMirror();
+        this.chatEditor.updateMirror()
-        this._sendMessage(props);
+        this._sendMessage(props)
     }
 
     getMessageSize(message){

plugins/plugins/core/components/ChatTextEditor.js

@@ -1,13 +1,13 @@
 import { LitElement, html, css } from "lit";
-import { get, translate } from 'lit-translate';
+import { render } from 'lit/html.js'
-
+import { EmojiPicker } from 'emoji-picker-js'
-import { EmojiPicker } from 'emoji-picker-js';
+import { Epml } from '../../../epml.js'
-import { Epml } from '../../../epml.js';
 import '@material/mwc-icon'
 import '@material/mwc-checkbox'
-// import { addAutoLoadImageChat } from "../../../../qortal-ui-core/src/redux/app/app-actions.js";
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
+
+const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
-const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
 class ChatTextEditor extends LitElement {
 	static get properties() {
 		return {
@@ -589,11 +589,11 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
             const checkTheme = localStorage.getItem('qortalTheme');
             const chatbar = this.shadowRoot.querySelector('.element')
             if (checkTheme === 'dark') {
-                this.theme = 'dark';
+                this.theme = 'dark'
                 chatbar.style.cssText = "color:#ffffff;"
                
             } else {
-                this.theme = 'light';
+                this.theme = 'light'
                 chatbar.style.cssText = "color:#080808;"
              
             }

plugins/plugins/core/components/ChatWelcomePage.js

@@ -3,16 +3,16 @@ import { render } from 'lit/html.js'
 import { Epml } from '../../../epml.js'
 import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 
-registerTranslateConfig({
-  loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
-})
-
 import '@material/mwc-icon'
 import '@material/mwc-button'
 import '@material/mwc-dialog'
 import '@polymer/paper-spinner/paper-spinner-lite.js'
 import '@vaadin/grid'
 
+registerTranslateConfig({
+    loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
+})
+
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
 class ChatWelcomePage extends LitElement {
@@ -258,10 +258,16 @@ class ChatWelcomePage extends LitElement {
 
     firstUpdated() {
         this.changeTheme()
+        this.changeLanguage()
+
+        this.clearConsole()
+        setInterval(() => {
+            this.clearConsole()
+        }, 60000)
 
         const stopKeyEventPropagation = (e) => {
-            e.stopPropagation();
+            e.stopPropagation()
-            return false;
+            return false
         }
 
         this.shadowRoot.getElementById('sendTo').addEventListener('keydown', stopKeyEventPropagation);
@@ -290,8 +296,6 @@ class ChatWelcomePage extends LitElement {
             document.querySelector('html').setAttribute('theme', this.theme)
         })
 
-        let configLoaded = false
-
         parentEpml.ready().then(() => {
             parentEpml.subscribe('selected_address', async selectedAddress => {
                 this.selectedAddress = {}
@@ -309,19 +313,22 @@ class ChatWelcomePage extends LitElement {
         parentEpml.imReady()
     }
 
+    clearConsole() {
+        console.clear()
+    }
+
     changeTheme() {
         const checkTheme = localStorage.getItem('qortalTheme')
         if (checkTheme === 'dark') {
-            this.theme = 'dark';
+            this.theme = 'dark'
         } else {
-            this.theme = 'light';
+            this.theme = 'light'
         }
-        document.querySelector('html').setAttribute('theme', this.theme);
+        document.querySelector('html').setAttribute('theme', this.theme)
     }
 
     changeLanguage() {
         const checkLanguage = localStorage.getItem('qortalLanguage')
-
         if (checkLanguage === null || checkLanguage.length === 0) {
             localStorage.setItem('qortalLanguage', 'us')
             use('us')
@@ -343,7 +350,7 @@ class ChatWelcomePage extends LitElement {
         } else {
             this.sendMessage();
         }
-    };
+    }
 
     async sendMessage() {
         this.isLoading = true;

plugins/plugins/core/components/ImageComponent.js

@@ -1,6 +1,6 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css } from 'lit'
-import { translate, get } from 'lit-translate';
+import { render } from 'lit/html.js'
-import { render } from 'lit/html.js';
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 
 export class ImageComponent extends LitElement {
 
@@ -48,52 +48,51 @@ border: 1px solid var(--mdc-theme-primary );
 }
 
 constructor() {
-  super();
+  super()
-  this.attempts = 0;
+  this.attempts = 0
-  this.maxAttempts = 5;
+  this.maxAttempts = 5
 }
 getApiKey() {
-  const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
+  const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
-  let apiKey = myNode.apiKey;
+  let apiKey = myNode.apiKey
-  return apiKey;
+  return apiKey
 }
 
 async _fetchImage() {
   this.attempts++;
-  if (this.attempts > this.maxAttempts) return;
+  if (this.attempts > this.maxAttempts) return
   await new Promise((res) => {
     setTimeout(() => {
-      res();
+      res()
     }, 1000)
-  });
+  })
   try {
-    const response = await fetch(this.gif.url);
+    const response = await fetch(this.gif.url)
-    const data = await response.json();
+    const data = await response.json()
-    console.log({data});
     if (data.ok) {
-    this.error = false;
+    this.error = false
     this.gif = {
       ...this.gif,
       url: data.src
     };
     this.requestUpdate();
     } else if (!data.ok || data.error) {
-      this.error = true;
+      this.error = true
     } else {
-      this.error = false;
+      this.error = false
     }
   } catch (error) {
-    this.error = true;
+    this.error = true
-    console.error(error);
+    console.error(error)
-    this._fetchImage();
+    this._fetchImage()
   }
 }
 
 render() {
 if (this.error && this.attempts <= this.maxAttempts) {
   setTimeout(() => {
-    this._fetchImage();
+    this._fetchImage()
-  }, 1000);
+  }, 1000)
 }
 return html`
 ${this.gif && !this.error 
@@ -124,4 +123,4 @@ alt=${this.alt}
 }
 }
 
-customElements.define('image-component', ImageComponent);
+customElements.define('image-component', ImageComponent)

plugins/plugins/core/components/LevelFounder.js

@@ -3,11 +3,6 @@ import { render } from 'lit/html.js'
 import { Epml } from '../../../epml.js'
 import snackbar from './snackbar.js'
 import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
-
-registerTranslateConfig({
-  loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
-})
-
 import '@polymer/paper-tooltip/paper-tooltip.js'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
@@ -15,8 +10,8 @@ const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 class LevelFounder extends LitElement {
     static get properties() {
         return {
-            checkleveladdress: { type: String, attribute: true },
+            checkleveladdress: { type: String },
-            selectedAddress: { type: Object },
+            selectedAddress: { type: String },
             config: { type: Object },
             memberInfo: { type: Array }
         }
@@ -106,16 +101,8 @@ class LevelFounder extends LitElement {
     }
 
     firstUpdated() {
-        this.changeLanguage()
         this.checkAddressInfo()
 
-        window.addEventListener('storage', () => {
-            const checkLanguage = localStorage.getItem('qortalLanguage')
-            use(checkLanguage)
-        })
-
-        let configLoaded = false
-
         parentEpml.ready().then(() => {
             parentEpml.subscribe('selected_address', async selectedAddress => {
                 this.selectedAddress = {}
@@ -127,17 +114,6 @@ class LevelFounder extends LitElement {
         parentEpml.imReady()
     }
 
-    changeLanguage() {
-        const checkLanguage = localStorage.getItem('qortalLanguage')
-
-        if (checkLanguage === null || checkLanguage.length === 0) {
-            localStorage.setItem('qortalLanguage', 'us')
-            use('us')
-        } else {
-            use(checkLanguage)
-        }
-    }
-
     async checkAddressInfo() {
         let toCheck = this.checkleveladdress
         const memberInfo = await parentEpml.request('apiCall', {
@@ -147,23 +123,23 @@ class LevelFounder extends LitElement {
     }
 
     renderFounder() {
-        let adressfounder = this.memberInfo.flags;
+        let adressfounder = this.memberInfo.flags
         if (adressfounder === 1) {
         return html `
             <span id="founderTooltip" class="badge">F</span>
             <paper-tooltip class="custom" for="founderTooltip" position="top">FOUNDER</paper-tooltip>
         `
         } else {
-            return null;
+            return html ``
         }
     }
 
     renderLevel() {
-        let adresslevel = this.memberInfo.level;
+        let adresslevel = this.memberInfo.level
         return adresslevel ? html `
             <img id="level-img" src=${`/img/badges/level-${adresslevel}.png`} alt=${`badge-${adresslevel}`} class="message-data-level" />
             <paper-tooltip class="level-img-tooltip" for="level-img" position="top" >
-            ${translate("mintingpage.mchange27")} ${adresslevel}
+                ${translate("mintingpage.mchange27")} ${adresslevel}
             </paper-tooltip>
         ` : ''
     }
@@ -174,9 +150,9 @@ class LevelFounder extends LitElement {
     }
 
     getApiKey() {
-        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
+        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
-        let apiKey = myNode.apiKey;
+        let apiKey = myNode.apiKey
-        return apiKey;
+        return apiKey
     }
 }
 

plugins/plugins/core/components/NameMenu.js

@@ -3,11 +3,6 @@ import { render } from 'lit/html.js'
 import { Epml } from '../../../epml.js'
 import snackbar from './snackbar.js'
 import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
-
-registerTranslateConfig({
-  loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
-})
-
 import '@material/mwc-snackbar'
 import '@material/mwc-button'
 import '@material/mwc-dialog'
@@ -250,17 +245,12 @@ class NameMenu extends LitElement {
     }
 
     firstUpdated() {
-        this.getChatBlockedAdresses();
+        this.getChatBlockedAdresses()
 
 	  setInterval(() => {
-	      this.getChatBlockedAdresses();
+	      this.getChatBlockedAdresses()
 	  }, 60000)
 
-        window.addEventListener('storage', () => {
-            const checkLanguage = localStorage.getItem('qortalLanguage');
-            use(checkLanguage);
-        })
-
         window.onclick = function(event) {
             if (!event.target.matches('.block')) {
                 var dropdowns = document.getElementsByClassName('dropdown-content');
@@ -275,12 +265,12 @@ class NameMenu extends LitElement {
         }
 
         const stopKeyEventPropagation = (e) => {
-            e.stopPropagation();
+            e.stopPropagation()
-            return false;
+            return false
         }
 
-        this.shadowRoot.getElementById('sendTo').addEventListener('keydown', stopKeyEventPropagation);
+        this.shadowRoot.getElementById('sendTo').addEventListener('keydown', stopKeyEventPropagation)
-        this.shadowRoot.getElementById('messageBox').addEventListener('keydown', stopKeyEventPropagation);
+        this.shadowRoot.getElementById('messageBox').addEventListener('keydown', stopKeyEventPropagation)
 
         const getDataFromURL = () => {
             let tempUrl = document.location.href
@@ -309,17 +299,6 @@ class NameMenu extends LitElement {
         parentEpml.imReady()
     }
 
-    changeLanguage() {
-        const checkLanguage = localStorage.getItem('qortalLanguage')
-
-        if (checkLanguage === null || checkLanguage.length === 0) {
-            localStorage.setItem('qortalLanguage', 'us')
-            use('us')
-        } else {
-            use(checkLanguage)
-        }
-    }
-
     myMenu() {
         this.shadowRoot.getElementById('myDropdown').classList.toggle('showList')
         this.shadowRoot.querySelector('#blockNameDialog').close()

plugins/plugins/core/components/TimeAgo.js

@@ -24,11 +24,11 @@ class TimeAgo extends LitElement {
             }
         });
 
-        this.shadowRoot.querySelector('time-ago').setAttribute('title', '');
+        this.shadowRoot.querySelector('time-ago').setAttribute('title', '')
     }
 
     constructor() {
-        super();
+        super()
         this.timestamp = 0
         this.timeIso = ''
         this.format = ''
@@ -41,7 +41,7 @@ class TimeAgo extends LitElement {
     }
 
     renderTime(timestamp) {
-        timestamp === undefined ? this.timeIso = '' : this.timeIso = new Date(timestamp).toISOString();
+        timestamp === undefined ? this.timeIso = '' : this.timeIso = new Date(timestamp).toISOString()
     }
 
     firstUpdated() {

plugins/plugins/core/components/TipUser.js

@@ -1,10 +1,10 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html } from 'lit'
-import { render } from 'lit/html.js';
+import { render } from 'lit/html.js'
-import { get, translate } from 'lit-translate';
+import { tipUserStyles } from './TipUser-css.js'
-import { tipUserStyles } from './TipUser-css.js';
+import { Epml } from '../../../epml'
-import { Epml } from '../../../epml';
+import '@vaadin/button'
-import '@vaadin/button';
+import '@polymer/paper-progress/paper-progress.js'
-import '@polymer/paper-progress/paper-progress.js';
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 
 const parentEpml = new Epml({ type: "WINDOW", source: window.parent });
 
@@ -34,15 +34,15 @@ export class TipUser extends LitElement {
     static styles = [tipUserStyles]
 
    async firstUpdated() {
-      await this.fetchWalletDetails();
+      await this.fetchWalletDetails()
     }
 
     updated(changedProperties) {
         if (changedProperties && changedProperties.has("closeTipUser")) {
             if (this.closeTipUser) {
-                this.shadowRoot.getElementById("amountInput").value = "";
+                this.shadowRoot.getElementById("amountInput").value = ""
-                this.errorMessage = "";
+                this.errorMessage = ""
-                this.successMessage = "";
+                this.successMessage = ""
             }
         }
     }
@@ -52,7 +52,7 @@ export class TipUser extends LitElement {
 			type: "api",
 			url: `/addresses/lastreference/${this.myAddress.address}`,
 		})
-		return myRef;
+		return myRef
 	}
 
     renderSuccessText() {
@@ -64,9 +64,9 @@ export class TipUser extends LitElement {
     }
 
     getApiKey() {
-        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
+        const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
-        let apiKey = myNode.apiKey;
+        let apiKey = myNode.apiKey
-        return apiKey;
+        return apiKey
     }
 
     async fetchWalletDetails() {
@@ -78,85 +78,85 @@ export class TipUser extends LitElement {
                 let snack4string = get("chatpage.cchange48")
                 parentEpml.request('showSnackBar', `${snack4string}`)
             } else {
-                this.walletBalance = Number(res).toFixed(8);
+                this.walletBalance = Number(res).toFixed(8)
             }
         })					 
     }
 
     async sendQort() {
-    const amount = this.shadowRoot.getElementById("amountInput").value;
+    const amount = this.shadowRoot.getElementById("amountInput").value
-    let recipient = this.userName;
+    let recipient = this.userName
-    this.sendMoneyLoading = true;
+    this.sendMoneyLoading = true
-    this.btnDisable = true;
+    this.btnDisable = true
 
     if (parseFloat(amount) + parseFloat(0.001) > parseFloat(this.walletBalance)) {
-        this.sendMoneyLoading = false;
+        this.sendMoneyLoading = false
-        this.btnDisable = false;
+        this.btnDisable = false
-        let snack1string = get("chatpage.cchange51");
+        let snack1string = get("chatpage.cchange51")
-        parentEpml.request('showSnackBar', `${snack1string}`);
+        parentEpml.request('showSnackBar', `${snack1string}`)
-        return false;
+        return false
     }
 
     if (parseFloat(amount) <= 0) {
-        this.sendMoneyLoading = false;
+        this.sendMoneyLoading = false
-        this.btnDisable = false;
+        this.btnDisable = false
-        let snack2string = get("chatpage.cchange52");
+        let snack2string = get("chatpage.cchange52")
-        parentEpml.request('showSnackBar', `${snack2string}`);
+        parentEpml.request('showSnackBar', `${snack2string}`)
-        return false;
+        return false
     }
 
     if (recipient.length === 0) {
-        this.sendMoneyLoading = false;
+        this.sendMoneyLoading = false
-        this.btnDisable = false;
+        this.btnDisable = false
-        let snack3string = get("chatpage.cchange53");
+        let snack3string = get("chatpage.cchange53")
-        parentEpml.request('showSnackBar', `${snack3string}`);
+        parentEpml.request('showSnackBar', `${snack3string}`)
-        return false;
+        return false
     }
 
     const validateName = async (receiverName) => {
-        let myRes;
+        let myRes
         let myNameRes = await parentEpml.request('apiCall', {
             type: 'api',
             url: `/names/${receiverName}`,
         })
 
         if (myNameRes.error === 401) {
-            myRes = false;
+            myRes = false
         } else {
-            myRes = myNameRes;
+            myRes = myNameRes
         }
         return myRes;
     }
 
     const validateAddress = async (receiverAddress) => {
-        let myAddress = await window.parent.validateAddress(receiverAddress);
+        let myAddress = await window.parent.validateAddress(receiverAddress)
-        return myAddress;
+        return myAddress
     }
 
     const validateReceiver = async (recipient) => {
-        let lastRef = await this.getLastRef();
+        let lastRef = await this.getLastRef()
-        let isAddress;
+        let isAddress
 
         try {
-            isAddress = await validateAddress(recipient);
+            isAddress = await validateAddress(recipient)
         } catch (err) {
-            isAddress = false;
+            isAddress = false
         }
 
         if (isAddress) {
-            let myTransaction = await makeTransactionRequest(recipient, lastRef);
+            let myTransaction = await makeTransactionRequest(recipient, lastRef)
-            getTxnRequestResponse(myTransaction);
+            getTxnRequestResponse(myTransaction)
         } else {
-            let myNameRes = await validateName(recipient);
+            let myNameRes = await validateName(recipient)
             if (myNameRes !== false) {
                 let myNameAddress = myNameRes.owner
                 let myTransaction = await makeTransactionRequest(myNameAddress, lastRef)
                 getTxnRequestResponse(myTransaction)
             } else {
                 console.error(this.renderReceiverText())
-                this.errorMessage = this.renderReceiverText();
+                this.errorMessage = this.renderReceiverText()
-                this.sendMoneyLoading = false;
+                this.sendMoneyLoading = false
-                this.btnDisable = false;
+                this.btnDisable = false
             }
         }
     }
@@ -169,23 +169,23 @@ export class TipUser extends LitElement {
             });
 
             if (getNames?.length > 0 ) {
-                return getNames[0].name;
+                return getNames[0].name
             } else {
-                return '';
+                return ''
             }
         } catch (error) {
-            return "";
+            return ""
         }
     }
 
     const makeTransactionRequest = async (receiver, lastRef) => {
-        let myReceiver = receiver;
+        let myReceiver = receiver
-        let mylastRef = lastRef;
+        let mylastRef = lastRef
-        let dialogamount = get("transactions.amount");
+        let dialogamount = get("transactions.amount")
-        let dialogAddress = get("login.address");
+        let dialogAddress = get("login.address")
-        let dialogName = get("login.name");
+        let dialogName = get("login.name")
-        let dialogto = get("transactions.to");
+        let dialogto = get("transactions.to")
-        let recipientName = await getName(myReceiver);
+        let recipientName = await getName(myReceiver)
         let myTxnrequest = await parentEpml.request('transaction', {
             type: 2,
             nonce: this.myAddress.nonce,
@@ -201,33 +201,33 @@ export class TipUser extends LitElement {
                 dialogName
             },
         })
-        return myTxnrequest;
+        return myTxnrequest
     }
 
     const getTxnRequestResponse = (txnResponse) => {
         if (txnResponse.success === false && txnResponse.message) {
-            this.errorMessage = txnResponse.message;
+            this.errorMessage = txnResponse.message
-            this.sendMoneyLoading = false;
+            this.sendMoneyLoading = false
-            this.btnDisable = false;
+            this.btnDisable = false
-            throw new Error(txnResponse);
+            throw new Error(txnResponse)
         } else if (txnResponse.success === true && !txnResponse.data.error) {
-            this.shadowRoot.getElementById('amountInput').value = '';
+            this.shadowRoot.getElementById('amountInput').value = ''
-            this.errorMessage = '';
+            this.errorMessage = ''
-            this.successMessage = this.renderSuccessText();
+            this.successMessage = this.renderSuccessText()
-            this.sendMoneyLoading = false;
+            this.sendMoneyLoading = false
-            this.btnDisable = false;
+            this.btnDisable = false
             setTimeout(() => {
-                this.setOpenTipUser(false);
+                this.setOpenTipUser(false)
-                this.successMessage = "";
+                this.successMessage = ""
-            }, 3000);
+            }, 3000)
         } else {
-            this.errorMessage = txnResponse.data.message;
+            this.errorMessage = txnResponse.data.message
-            this.sendMoneyLoading = false;
+            this.sendMoneyLoading = false
-            this.btnDisable = false;
+            this.btnDisable = false
-            throw new Error(txnResponse);
+            throw new Error(txnResponse)
         }
     }
-    validateReceiver(recipient);
+    validateReceiver(recipient)
     }
 
   render() {
@@ -274,4 +274,4 @@ export class TipUser extends LitElement {
     `;
   }
 }
-customElements.define('tip-user', TipUser);
+customElements.define('tip-user', TipUser)

plugins/plugins/core/components/ToolTip.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit'
 import { Epml } from '../../../epml.js'
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 

plugins/plugins/core/components/UserInfo/UserInfo.js

@@ -8,10 +8,6 @@ import { cropAddress } from '../../../utils/cropAddress.js'
 import '@polymer/paper-progress/paper-progress.js'
 import '@vaadin/button'
 
-registerTranslateConfig({
-    loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
-})
-
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
 export class UserInfo extends LitElement {

plugins/plugins/core/components/WrapperModal.js

@@ -1,33 +1,32 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html } from 'lit'
-import { render } from 'lit/html.js';
+import { render } from 'lit/html.js'
 import { wrapperModalStyles } from './WrapperModal-css.js'
 
 export class WrapperModal extends LitElement {
-  static get properties() {
+    static get properties() {
-		return {
+        return {
-      customStyle: {type: String},
+            customStyle: {type: String},
-      onClickFunc: { attribute: false },
+            onClickFunc: { attribute: false },
-      zIndex: {type: Number}
+            zIndex: {type: Number}
+        }
     }
-	}
 
-  static styles = [wrapperModalStyles]
+    static styles = [wrapperModalStyles]
 
-  render() {
+    render() {
-    return html`
+        return html`
-      <div>
+            <div>
-        <div 
+                <div 
-          style="z-index: ${this.zIndex || 50}" 
+                    style="z-index: ${this.zIndex || 50}" 
-          class="backdrop" 
+                    class="backdrop" 
-          @click=${() => {
+                    @click=${() => { this.onClickFunc() }}
-              this.onClickFunc();
+                >
-          }}>
+                </div>
-        </div>
+                <div class="modal-body" style=${this.customStyle ? this.customStyle : ""}>
-          <div class="modal-body" style=${this.customStyle ? this.customStyle : ""}>
+                    <slot></slot>
-            <slot></slot>
+                </div>
-          </div>
+            </div>
-      </div>
+        `
-    `;
+    }
-  }
 }
-customElements.define('wrapper-modal', WrapperModal);
+customElements.define('wrapper-modal', WrapperModal)

plugins/plugins/core/components/qortal-info-view.js

@@ -1,7 +1,6 @@
 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'

plugins/plugins/core/messaging/q-chat/q-chat.src.js

@@ -18,7 +18,7 @@ import '../../components/ChatWelcomePage.js'
 import '../../components/ChatHead.js'
 import '../../components/ChatPage.js'
 import '../../components/WrapperModal.js'
-import '../../components/ChatSeachResults.js'
+import '../../components/ChatSearchResults.js'
 
 import '@material/mwc-button'
 import '@material/mwc-dialog'
@@ -27,10 +27,6 @@ import '@material/mwc-snackbar'
 import '@polymer/paper-spinner/paper-spinner-lite.js'
 import '@vaadin/grid'
 
-registerTranslateConfig({
-  loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
-})
-
 passiveSupport({ events: ['touchstart'] })
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
@@ -149,7 +145,6 @@ class Chat extends LitElement {
             ]
           })
 
-         
           this.unsubscribeStore =  window.parent.reduxStore.subscribe(() => {
             try {
                 if(window.parent.location && window.parent.location.search) {
@@ -381,7 +376,6 @@ class Chat extends LitElement {
     }
 
     async firstUpdated() {
-        this.changeLanguage()
         this.changeTheme()
         this.getChatBlockedList()
         this.getLocalBlockedList()
@@ -429,11 +423,8 @@ class Chat extends LitElement {
         let runFunctionsAfterPageLoadInterval = setInterval(runFunctionsAfterPageLoad, 100)
 
         window.addEventListener('storage', () => {
-            const checkLanguage = localStorage.getItem('qortalLanguage')
             const checkTheme = localStorage.getItem('qortalTheme')
 
-            use(checkLanguage)
-
             if (checkTheme === 'dark') {
                 this.theme = 'dark'
             } else {
@@ -802,17 +793,6 @@ class Chat extends LitElement {
         document.querySelector('html').setAttribute('theme', this.theme)
     }
 
-    changeLanguage() {
-        const checkLanguage = localStorage.getItem('qortalLanguage')
-
-        if (checkLanguage === null || checkLanguage.length === 0) {
-            localStorage.setItem('qortalLanguage', 'us')
-            use('us')
-        } else {
-            use(checkLanguage)
-        }
-    }
-
     renderChatWelcomePage() {
         return html`
         <chat-welcome-page