Rework Name functions

qortal-ui-core/src/components/app-view.js

@@ -1516,10 +1516,18 @@ class AppView extends connect(store)(LitElement) {
                     <vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon>
                 </side-menu-item>
 
-                <side-menu-item drawer-toggle label="${translate('sidemenu.nameregistration')}" href="/app/name-registration">
+                <side-menu-item label="${translate('sidemenu.sm1')}" expanded>
+                    <vaadin-icon icon="vaadin:user-card" slot="icon"></vaadin-icon>
+
+                    <side-menu-item drawer-toggle label="${translate('sidemenu.sm2')}" href="/app/name-registration">
                         <vaadin-icon icon="vaadin:user-check" slot="icon"></vaadin-icon>
                     </side-menu-item>
 
+                    <side-menu-item drawer-toggle label="${translate('sidemenu.sm3')}" href="/app/names-market">
+                        <vaadin-icon icon="vaadin:shop" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                </side-menu-item>
+
                 <side-menu-item drawer-toggle label="${translate('sidemenu.websites')}" href="/app/websites">
                     <vaadin-icon icon="vaadin:desktop" slot="icon" ></vaadin-icon>
                 </side-menu-item>

qortal-ui-plugins/build-config.js

@@ -96,6 +96,10 @@ const generateForPlugins = () => {
 			in: 'plugins/core/name-registration/name-registration.src.js',
 			out: 'plugins/core/name-registration/name-registration.js',
 		},
+		{
+			in: 'plugins/core/names-market/names-market.src.js',
+			out: 'plugins/core/names-market/names-market.js',
+		},
 		{
 			in: 'plugins/core/qdn/websites.src.js',
 			out: 'plugins/core/qdn/websites.js',

qortal-ui-plugins/plugins/core/main.src.js

@@ -79,6 +79,15 @@ parentEpml.ready().then(() => {
 			menus: [],
 			parent: false,
 		},
+		{
+			url: 'names-market',
+			domain: 'core',
+			page: 'names-market/index.html',
+			title: 'Names Market',
+			icon: 'vaadin:user-check',
+			menus: [],
+			parent: false,
+		},
 		{
 			url: 'websites',
 			domain: 'core',

qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js

@@ -31,8 +31,6 @@ class NameRegistration extends LitElement {
             loading: { type: Boolean },
             names: { type: Array },
             marketSellNames: { type: Array },
-            filteredItems: { type: Array },
-            searchSellNames: { type: Array },
             recipientPublicKey: { type: String },
             selectedAddress: { type: Object },
             btnDisable: { type: Boolean },
@@ -43,15 +41,13 @@ class NameRegistration extends LitElement {
             removeError: { type: Boolean },
             removeMessage: { type: String },
             fee: { type: Number },
+            updateFee: { type: Number },
             sellFee: { type: Number },
             cancelSellFee: { type: Number },
-            buyFee: { type: Number },
             toSellName: { type: String },
             toSellPrice: { type: String },
             toCancelSellName: { type: String },
-            toBuyName: { type: String },
+            toUpdateName: { type: String },
-            toBuyPrice: { type: String },
-            toBuySeller: { type: String },
             errorMessage: { type: String },
             successMessage: { type: String }
         }
@@ -126,6 +122,10 @@ class NameRegistration extends LitElement {
                 --mdc-theme-primary: #198754;
             }
 
+            .warning {
+                --mdc-theme-primary: #f0ad4e;
+            }
+
             .buttons {
                 text-align: right;
             }
@@ -229,22 +229,18 @@ class NameRegistration extends LitElement {
         this.selectedAddress = {}
         this.names = []
         this.marketSellNames = []
-        this.filteredItems = []
-        this.searchSellNames = []
         this.recipientPublicKey = ''
         this.btnDisable = false
         this.isLoading = false
         this.registerNameLoading = false
         this.fee = 0.001
+        this.updateFee = 0.001
         this.sellFee = 0.001
         this.cancelSellFee = 0.001
-        this.buyFee = 0.001
         this.toSellName = ''
+        this.toUpdateName = ''
         this.toSellPrice = ''
         this.toCancelSellName = ''
-        this.toBuyName = ''
-        this.toBuyPrice = ''
-        this.toBuySeller = ''
         this.errorMessage = ''
         this.successMessage = ''
     }
@@ -253,7 +249,7 @@ class NameRegistration extends LitElement {
         return html`
             <div id="name-registration-page">
                 <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
-                    <h2 style="margin: 0; flex: 1; padding-top: .1em; display: inline;">${translate("registernamepage.nchange1")}</h2>
+                    <h3 style="margin: 0; flex: 1; padding-top: .1em; display: inline;">${translate("sidemenu.sm2")}</h3>
                     <mwc-button style="float:right;" @click=${() => this.shadowRoot.querySelector('#registerNameDialog').show()}><mwc-icon>add</mwc-icon>${translate("registernamepage.nchange2")}</mwc-button>
                 </div>
 
@@ -268,6 +264,9 @@ class NameRegistration extends LitElement {
                         <vaadin-grid-column width="14rem" flex-grow="0" header="${translate("registernamepage.nchange7")}" .renderer=${(root, column, data) => {
                             render(html`${this.renderAvatarButton(data.item)}`, root)
                         }}></vaadin-grid-column>
+                        <vaadin-grid-column width="14rem" flex-grow="0" .renderer=${(root, column, data) => {
+                            render(html`${this.renderUpdateNameButton(data.item)}`, root)
+                        }}></vaadin-grid-column>
                         <vaadin-grid-column width="14rem" flex-grow="0" .renderer=${(root, column, data) => {
                             if (this.marketSellNames.some(e => e.owner === this.selectedAddress.address)) {
                                 render(html`${this.renderCancelSellNameButton(data.item)}`, root)
@@ -280,56 +279,37 @@ class NameRegistration extends LitElement {
                         <span style="color: var(--black);">${translate("registernamepage.nchange8")}</span>
                     `: ''}
                 </div>
-                <br><br>
-                <div class="divCard">
-                    <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("registernamepage.nchange22")}</h3>
-                    <vaadin-text-field
-                        placeholder="${translate("datapage.dchange4")}"
-                        style="width: 25%; margin-bottom: 20px;"
-                        clear-button-visible
-                        @value-changed="${(e) => {
-                            this.searchSellNames = []
-                            const searchTerm = (e.target.value || '').trim()
-                            const keys = ['name', 'owner', 'salePrice']
-                            const filtered = this.marketSellNames.filter((search) => keys.some((key) => search[key].toLowerCase().includes(searchTerm.toLowerCase())))
-                            if (!e.target.value) {
-                                this.updatePageSize()
-                            } else {
-                                this.searchSellNames = filtered
-                                this.updatePageSizeSearch()
-                            }
-                        }}"
-                    >
-                    <vaadin-icon slot="prefix" icon="vaadin:search"></vaadin-icon>
-                    </vaadin-text-field><br>
-                    <vaadin-grid theme="large" id="marketSellNames" ?hidden="${this.isEmptyArray(this.marketSellNames)}" aria-label="Names" page-size="15" all-rows-visible>
-                        <vaadin-grid-column header="${translate("registernamepage.nchange5")}" path="name"></vaadin-grid-column>
-                        <vaadin-grid-column header="${translate("registernamepage.nchange6")}" path="owner"></vaadin-grid-column>
-                        <vaadin-grid-column header="${translate("registernamepage.nchange23")} (QORT)" path="salePrice"></vaadin-grid-column>
-                        <vaadin-grid-column width="14rem" flex-grow="0" header="${translate("registernamepage.nchange7")}" .renderer=${(root, column, data) => {
-                            if (data.item.owner === this.selectedAddress.address) {
-                                render(html`${this.renderCancelSellNameButton(data.item)}`, root)
-                            } else {
-                                render(html`${this.renderBuyNameButton(data.item)}`, root)
-                            }
-                        }}></vaadin-grid-column>
-                    </vaadin-grid>
-                    <div id="pages"></div>
-                    ${this.isEmptyArray(this.marketSellNames) ? html`
-                        <span style="color: var(--black);">${translate("registernamepage.nchange24")}</span>
-                    `: ''}
-                </div>
 
                 <mwc-dialog id="registerNameDialog" scrimClickAction="${this.registerNameLoading ? '' : 'close'}">
-                    <div>${translate("registernamepage.nchange9")}</div>
+                    <div style="text-align:center">
-                    <br>
+                        <h1>${translate("registernamepage.nchange9")}</h1>
-                    <mwc-textfield style="width:100%;" ?disabled="${this.registerNameLoading}" label="${translate("registernamepage.nchange5")}" id="nameInput"></mwc-textfield>
+                        <hr><br>
-                    <p style="margin-bottom:0;">
+                    </div>
-                        <mwc-textfield style="width:100%;" ?disabled="${this.registerNameLoading}" label="${translate("registernamepage.nchange10")}" id="descInput"></mwc-textfield>
+                    <p>
+                        <mwc-textfield
+                            style="width: 100%; color: var(--black);"
+                            ?disabled="${this.registerNameLoading}"
+                            required
+                            outlined
+                            id="nameInput"
+                            label="${translate("registernamepage.nchange5")}"
+                            type="text"
+                        >
+                        </mwc-textfield>
+                    </p>
+                    <p>
+                        <mwc-textfield
+                            style="width: 100%; color: var(--black);"
+                            ?disabled="${this.registerNameLoading}"
+                            outlined
+                            id="descInput"
+                            label="${translate("registernamepage.nchange10")}"
+                            type="text"
+                        >
+                        </mwc-textfield>
                     </p>
                     <div style="text-align:right; height:36px;">
                         <span ?hidden="${!this.registerNameLoading}">
-                            <!-- loading message -->
                             ${translate("registernamepage.nchange11")} &nbsp;
                             <paper-spinner-lite
                                 style="margin-top:12px;"
@@ -343,7 +323,6 @@ class NameRegistration extends LitElement {
                             <b>${translate("registernamepage.nchange13")} ${this.fee} QORT.</b>
                         </span>
                     </div>
-                    
                     <mwc-button
                         ?disabled="${this.registerNameLoading}"
                         slot="primaryAction"
@@ -361,6 +340,68 @@ class NameRegistration extends LitElement {
                     </mwc-button>
                 </mwc-dialog>
 
+                <mwc-dialog id="updateNameDialog" scrimClickAction="" escapeKeyAction="">
+                    <div style="text-align:center">
+                        <h1>${translate("publishpage.pchange2")} ${translate("login.name")}</h1>
+                        <hr><br>
+                    </div>
+                    <p>
+                        <mwc-textfield
+                            style="width: 100%; color: var(--black);"
+                            readOnly
+                            outlined
+                            id="oldNameInput"
+                            label="${translate("registernamepage.nchange41")}"
+                            type="text"
+                            value="${this.toUpdateName}"
+                        >
+                        </mwc-textfield>
+                    </p>
+                    <p>
+                        <mwc-textfield
+                            style="width: 100%; color: var(--black);"
+                            required
+                            outlined
+                            id="newNameInput"
+                            label="${translate("registernamepage.nchange42")}"
+                            type="text"
+                        >
+                        </mwc-textfield>
+                    </p>
+                    <p>
+                        <mwc-textfield
+                            style="width: 100%; color: var(--black);"
+                            outlined
+                            id="newDescInput"
+                            label="${translate("registernamepage.nchange10")}"
+                            type="text"
+                        >
+                        </mwc-textfield>
+                    </p>
+                    <div style="text-align:right; height:36px;">
+                        <span ?hidden=${this.message === ''} style="${this.error ? 'color:red;' : 'color:green;'}">
+                            ${this.message}
+                        </span><br>
+                        <span>
+                            <b>${translate("walletpage.wchange21")} ${this.updateFee} QORT.</b>
+                        </span>
+                    </div>
+                    <mwc-button
+                        slot="primaryAction"
+                        @click="${() => this.updateName()}"
+                    >
+                    ${translate("publishpage.pchange2")} ${translate("login.name")}
+                    </mwc-button>
+                    <mwc-button
+                        slot="secondaryAction"
+                        dialogAction="cancel"
+                        class="red"
+				@click="${() => this.closeUpdateNameDialog()}"
+                    >
+                    ${translate("general.close")}
+                    </mwc-button>
+                </mwc-dialog>
+
                 <mwc-dialog id="sellNameDialog" scrimClickAction="" escapeKeyAction="">
                     <div class="manage-group-dialog">
                         <div style="text-align: center;">
@@ -461,74 +502,6 @@ class NameRegistration extends LitElement {
                     </mwc-button>
                 </mwc-dialog>
 
-                <mwc-dialog id="buyNameDialog" scrimClickAction="" escapeKeyAction="">
-                    <div class="manage-group-dialog">
-                        <div style="text-align: center;">
-                            <h2>${translate("registernamepage.nchange21")}</h2>
-                            <hr />
-                            <br>
-                        </div>
-                        <p>
-                            <mwc-textfield
-                                style="width: 100%; color: var(--black);"
-                                readOnly
-                                outlined
-                                id="toBuyName"
-                                label="${translate("registernamepage.nchange5")}"
-                                type="text"
-                                value="${this.toBuyName}"
-                            >
-                            </mwc-textfield>
-                        </p>
-                        <p>
-                            <mwc-textfield
-                                style="width: 100%; color: var(--black);"
-                                readOnly
-                                outlined
-                                id="toBuySeller"
-                                label="${translate("registernamepage.nchange6")}"
-                                type="text"
-                                value="${this.toBuySeller}"
-                            >
-                            </mwc-textfield>
-                        </p>
-                        <p>
-                            <mwc-textfield
-                                style="width: 100%; color: var(--black);"
-                                readOnly
-                                outlined
-                                id="toBuyPrice"
-                                label="${translate("registernamepage.nchange23")}"
-                                type="number"
-                                value="${this.toBuyPrice}"
-                            >
-                            </mwc-textfield>
-                        </p>
-                        <div style="margin-bottom: 10px;">
-                            <p style="margin-bottom: 0;">${translate("walletpage.wchange21")} <span style="font-weight: bold;">${this.buyFee} QORT<span></p>
-                            <br>
-                        </div>
-                        ${this.renderClearSuccess()}
-                        ${this.renderClearError()}
-                        ${this.isLoading ? html`<paper-progress indeterminate style="width: 100%; margin: 4px;"></paper-progress>` : ''}
-                        <div class="buttons">
-                            <div>
-                                <vaadin-button ?disabled="${this.btnDisable}" theme="primary medium" style="width: 100%;" @click=${() => this.openCheckFunds()}>
-                                    <vaadin-icon icon="vaadin:cart" slot="prefix"></vaadin-icon>
-                                    ${translate("registernamepage.nchange21")}
-                                </vaadin-button>
-                            </div>
-                        </div>
-                    </div>
-                    <mwc-button
-                        slot="primaryAction"
-                        @click="${() => this.closeBuyNameDialog()}"
-                        class="red"
-                    >
-                    ${translate("general.close")}
-                    </mwc-button>
-                </mwc-dialog>
-
                 <mwc-dialog id="buyErrorNameDialog" scrimClickAction="" escapeKeyAction="">
                     <div class="card-container">
                         <mwc-icon class="error-icon">warning</mwc-icon>
@@ -567,9 +540,9 @@ class NameRegistration extends LitElement {
         this.changeTheme()
         this.changeLanguage()
         this.unitFee()
+        this.unitUpdateFee()
         this.unitSellFee()
         this.unitCancelSellFee()
-        this.unitBuyFee()
 
         const fetchNames = () => {
             parentEpml.request('apiCall', {
@@ -586,7 +559,6 @@ class NameRegistration extends LitElement {
             }).then(res => {
                 this.marketSellNames = res
             })
-            this.updatePageSize()
             setTimeout(fetchMarketSellNames, 180000)
         }
 
@@ -666,103 +638,6 @@ class NameRegistration extends LitElement {
         }
     }
 
-    async updatePageSize() {
-        this.filteredItems = []
-        this.marketSellNames.sort((a, b) => parseFloat(a.salePrice) - parseFloat(b.salePrice))
-        this.filteredItems = this.marketSellNames
-        await this.setPages()
-        await this.updateItemsFromPage(1, true)
-    }
-
-    async setPages() {
-        this.namesGrid = this.shadowRoot.querySelector(`#marketSellNames`)
-        this.pagesControl = this.shadowRoot.querySelector('#pages')
-        this.pages = undefined
-    }
-
-    async updatePageSizeSearch() {
-        this.filteredItems = []
-        this.searchSellNames.sort((a, b) => parseFloat(a.salePrice) - parseFloat(b.salePrice))
-        this.filteredItems = this.searchSellNames
-        await this.setPagesSearch()
-        await this.updateItemsFromPage(1, true)
-    }
-
-    async setPagesSearch() {
-        this.namesGrid = this.shadowRoot.querySelector(`#marketSellNames`)
-        this.pagesControl = this.shadowRoot.querySelector('#pages')
-        this.pages = undefined
-    }
-
-    async updateItemsFromPage(page, changeNames = false) {
-        if (page === undefined) {
-            return
-        }
-
-        changeNames === true ? (this.pagesControl.innerHTML = '') : null
-
-        if (!this.pages) {
-            this.pages = Array.apply(null, { length: Math.ceil(this.filteredItems.length / this.namesGrid.pageSize) }).map((item, index) => {
-                return index + 1
-            })
-
-            const prevBtn = document.createElement('button')
-            prevBtn.textContent = '<'
-            prevBtn.addEventListener('click', () => {
-                const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
-                this.updateItemsFromPage(selectedPage - 1)
-            })
-            this.pagesControl.appendChild(prevBtn)
-
-            this.pages.forEach((pageNumber) => {
-                const pageBtn = document.createElement('button')
-                pageBtn.textContent = pageNumber
-                pageBtn.addEventListener('click', (e) => {
-                    this.updateItemsFromPage(parseInt(e.target.textContent))
-                })
-                if (pageNumber === page) {
-                    pageBtn.setAttribute('selected', true)
-                }
-                this.pagesControl.appendChild(pageBtn)
-            })
-
-            const nextBtn = window.document.createElement('button')
-            nextBtn.textContent = '>'
-            nextBtn.addEventListener('click', () => {
-                const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
-                this.updateItemsFromPage(selectedPage + 1)
-            })
-            this.pagesControl.appendChild(nextBtn)
-        }
-
-        const buttons = Array.from(this.pagesControl.children)
-        buttons.forEach((btn, index) => {
-            if (parseInt(btn.textContent) === page) {
-                btn.setAttribute('selected', true)
-            } else {
-                btn.removeAttribute('selected')
-            }
-            if (index === 0) {
-                if (page === 1) {
-                    btn.setAttribute('disabled', '')
-                } else {
-                    btn.removeAttribute('disabled')
-                }
-            }
-            if (index === buttons.length - 1) {
-                if (page === this.pages.length) {
-                    btn.setAttribute('disabled', '')
-                } else {
-                    btn.removeAttribute('disabled')
-                }
-            }
-        })
-        let start = (page - 1) * this.namesGrid.pageSize
-        let end = page * this.namesGrid.pageSize
-
-        this.namesGrid.items = this.filteredItems.slice(start, end)
-    }
-
     async updateQortWalletBalance() {
         let qortAddress = window.parent.reduxStore.getState().app.selectedAddress.address
 
@@ -815,6 +690,10 @@ class NameRegistration extends LitElement {
         return html`${translate("registernamepage.nchange18")}`
     }
 
+    renderSuccessUpdateText() {
+        return html`${translate("registernamepage.nchange47")}`
+    }
+
     renderSellSuccessText() {
         return html`${translate("registernamepage.nchange32")}`
     }
@@ -870,6 +749,27 @@ class NameRegistration extends LitElement {
         this.shadowRoot.getElementById("toSellPrice").value = ''
     }
 
+    renderUpdateNameButton(nameObj) {
+        return html`<mwc-button class="warning" @click=${() => this.openUpdateNameDialog(nameObj)}><mwc-icon>update</mwc-icon>&nbsp;${translate("publishpage.pchange2")} ${translate("login.name")}</mwc-button>`
+    }
+
+    openUpdateNameDialog(nameObj) {
+        this.toUpdateName = ''
+        this.shadowRoot.getElementById("oldNameInput").value = ''
+        this.shadowRoot.getElementById("newNameInput").value = ''
+        this.shadowRoot.getElementById("newDescInput").value = ''
+        this.toUpdateName = nameObj.name
+        this.shadowRoot.querySelector('#updateNameDialog').show()
+    }
+
+    closeUpdateNameDialog() {
+        this.shadowRoot.querySelector('#updateNameDialog').close()
+        this.toUpdateName = ''
+        this.shadowRoot.getElementById("oldNameInput").value = ''
+        this.shadowRoot.getElementById("newNameInput").value = ''
+        this.shadowRoot.getElementById("newDescInput").value = ''
+    }
+
     renderCancelSellNameButton(nameObj) {
         return html`<mwc-button class="red" @click=${() => this.openCancelSellNameDialog(nameObj)}><mwc-icon>cancel</mwc-icon>&nbsp;${translate("registernamepage.nchange20")}</mwc-button>`
     }
@@ -887,44 +787,6 @@ class NameRegistration extends LitElement {
         this.shadowRoot.getElementById("toCancelSellName").value = ''
     }
 
-    renderBuyNameButton(nameObj) {
-        return html`<mwc-button class="green" @click=${() => this.openCheck(nameObj)}><mwc-icon>shop</mwc-icon>&nbsp;${translate("registernamepage.nchange21")}</mwc-button>`
-    }
-
-    openCheck(nameObj) {
-       const _name = nameObj.name
-       const _seller = nameObj.owner
-       const _price = nameObj.salePrice
-       if (this.isEmptyArray(this.names) === true) {
-           this.openBuyNameDialog(_name, _seller, _price)
-       } else {
-           this.shadowRoot.querySelector('#buyErrorNameDialog').show()
-       }
-    }
-
-    openBuyNameDialog(_name, _seller, _price) {
-        this.toBuyName = ''
-        this.toBuyPrice = ''
-        this.toBuySeller = ''
-        this.shadowRoot.getElementById("toBuyName").value = ''
-        this.shadowRoot.getElementById("toBuyPrice").value = ''
-        this.shadowRoot.getElementById("toBuySeller").value = ''
-        this.toBuyName = _name
-        this.toBuyPrice = _price
-        this.toBuySeller = _seller
-        this.shadowRoot.querySelector('#buyNameDialog').show()
-    }
-
-    closeBuyNameDialog() {
-        this.toBuyName = ''
-        this.toBuyPrice = ''
-        this.toBuySeller = ''
-        this.shadowRoot.getElementById("toBuyName").value = ''
-        this.shadowRoot.getElementById("toBuyPrice").value = ''
-        this.shadowRoot.getElementById("toBuySeller").value = ''
-        this.shadowRoot.querySelector('#buyNameDialog').close()
-    }
-
     async openCheckFunds() {
         await this.updateQortWalletBalance()
 
@@ -960,6 +822,20 @@ class NameRegistration extends LitElement {
         })
     }
 
+    async unitUpdateFee() {
+        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 url = `${nodeUrl}/transactions/unitfee?txType=UPDATE_NAME`
+        await fetch(url).then((response) => {
+            if (response.ok) {
+                return response.json()
+            }
+            return Promise.reject(response)
+        }).then((json) => {
+            this.updateFee = (Number(json) / 1e8).toFixed(8)
+        })
+    }
+
     async unitSellFee() {
         const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
         const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
@@ -988,20 +864,6 @@ class NameRegistration extends LitElement {
         })
     }
 
-    async unitBuyFee() {
-        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 url = `${nodeUrl}/transactions/unitfee?txType=BUY_NAME`
-        await fetch(url).then((response) => {
-            if (response.ok) {
-                return response.json()
-            }
-            return Promise.reject(response)
-        }).then((json) => {
-            this.buyFee = (Number(json) / 1e8).toFixed(8)
-        })
-    }
-
     getApiKey() {
         const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
         let apiKey = myNode.apiKey
@@ -1042,8 +904,8 @@ class NameRegistration extends LitElement {
         };
 
         const validateReceiver = async () => {
-            let nameInfo = await validateName();
+            let nameInfo = await validateName()
-            let lastRef = await getLastRef();
+            let lastRef = await getLastRef()
 
             if (nameInfo.error === 401) {
                 this.error = false
@@ -1095,6 +957,92 @@ class NameRegistration extends LitElement {
         this.registerNameLoading = false
     }
 
+    async updateName() {
+        this.error = false
+        this.message = ''
+        const updateFeeInput = this.updateFee
+        const oldNameInput = this.shadowRoot.getElementById("oldNameInput").value
+        const newNameInput = this.shadowRoot.getElementById("newNameInput").value
+        const newDescInput = this.shadowRoot.getElementById("newDescInput").value
+
+        // Get Last Ref
+        const getLastRef = async () => {
+            let myRef = await parentEpml.request('apiCall', {
+                type: 'api',
+                url: `/addresses/lastreference/${this.selectedAddress.address}`
+            })
+            return myRef
+        }
+
+        // Get Account Details
+        const validateName = async () => {
+            let isValid = await parentEpml.request('apiCall', {
+                type: 'api',
+                url: `/names/${newNameInput}`
+            })
+            return isValid
+        }
+
+        const validateReceiver = async () => {
+            let nameInfo = await validateName()
+            let lastRef = await getLastRef()
+
+            if (nameInfo.error === 401) {
+                this.error = false
+                this.message = ''
+                let myTransaction = await makeTransactionRequest(lastRef)
+                getTxnRequestResponse(myTransaction)
+            } else {
+                this.error = true
+                this.message = this.renderFailText()
+            }
+        }
+
+        // Make Transaction Request
+        const makeTransactionRequest = async (lastRef) => {
+            const myOldName = oldNameInput
+            const myNewName = newNameInput
+            const myNewDesc = newDescInput
+            const myLastRef = lastRef
+            const myFee = updateFeeInput
+            let dialogUpdateName1 = get("registernamepage.nchange43")
+            let dialogUpdateName2 = get("registernamepage.nchange44")
+            let dialogUpdateName3 = get("registernamepage.nchange45")
+            let myTxnrequest = await parentEpml.request('transaction', {
+                type: 4,
+                nonce: this.selectedAddress.nonce,
+                params: {
+                    fee: myFee,
+                    name: myOldName,
+                    newName: myNewName,
+                    newData: myNewDesc,
+                    lastReference: myLastRef,
+                    dialogUpdateName1: dialogUpdateName1,
+                    dialogUpdateName2: dialogUpdateName2,
+                    dialogUpdateName3: dialogUpdateName3
+                }
+            })
+            return myTxnrequest
+        }
+
+        const getTxnRequestResponse = (txnResponse) => {
+            if (txnResponse.success === false && txnResponse.message) {
+                this.error = true
+                this.message = txnResponse.message
+                throw new Error(txnResponse)
+            } else if (txnResponse.success === true && !txnResponse.data.error) {
+                this.message = this.renderSuccessUpdateText()
+                this.error = false
+            } else {
+                this.error = true
+                this.message = txnResponse.data.message
+                throw new Error(txnResponse)
+            }
+        }
+
+        validateReceiver()
+    }
+
     async createSellName() {
         const name = this.shadowRoot.getElementById("toSellName").value
         const price = this.shadowRoot.getElementById("toSellPrice").value
@@ -1230,82 +1178,6 @@ class NameRegistration extends LitElement {
         validateReceiver()
     }
 
-    createBuyName() {
-        const name = this.shadowRoot.getElementById("toBuyName").value
-        const price = this.shadowRoot.getElementById("toBuyPrice").value
-        const seller = this.shadowRoot.getElementById("toBuySeller").value
-        const buyFeeInput = this.buyFee
-        this.isLoading = true
-        this.btnDisable = true
-
-        const getLastRef = async () => {
-            let myRef = await parentEpml.request('apiCall', {
-                type: 'api',
-                url: `/addresses/lastreference/${this.selectedAddress.address}`
-            })
-            return myRef
-        }
-
-        const validateReceiver = async () => {
-            let lastRef = await getLastRef()
-            let myTransaction = await makeTransactionRequest(lastRef)
-            getTxnRequestResponse(myTransaction)
-        }
-
-        const makeTransactionRequest = async (lastRef) => {
-            const myName = name
-            const myPrice = price
-            const mySeller = seller
-            const myLastRef = lastRef
-            const myFee = buyFeeInput
-            const myBuyNameDialog1 = get("registernamepage.nchange39")
-            const myBuyNameDialog2 = get("registernamepage.nchange27")
-            const myBuyNameDialog3 = get("registernamepage.nchange40")
-
-            let myTxnrequest = await parentEpml.request('transaction', {
-                type: 7,
-                nonce: this.selectedAddress.nonce,
-                params: {
-                    fee: myFee,
-                    name: myName,
-                    sellPrice: myPrice,
-                    recipient: mySeller,
-                    lastReference: myLastRef,
-                    buyNameDialog1: myBuyNameDialog1,
-                    buyNameDialog2: myBuyNameDialog2,
-                    buyNameDialog3: myBuyNameDialog3
-                }
-            })
-            return myTxnrequest
-        }
-
-        const getTxnRequestResponse = (txnResponse) => {
-            if (txnResponse.success === false && txnResponse.message) {
-                this.errorMessage = txnResponse.message
-                this.isLoading = false
-                this.btnDisable = false
-                throw new Error(txnResponse)
-            } else if (txnResponse.success === true && !txnResponse.data.error) {
-                this.shadowRoot.getElementById("toBuyName").value = ''
-                this.shadowRoot.getElementById("toBuyPrice").value = ''
-                this.shadowRoot.getElementById("toBuySeller").value = ''
-                this.toBuyName = ''
-                this.toBuyPrice = ''
-                this.toBuySeller = ''
-                this.errorMessage = ''
-                this.successMessage = this.renderBuySuccessText()
-                this.isLoading = false
-                this.btnDisable = false
-            } else {
-                this.errorMessage = txnResponse.data.message
-                this.isLoading = false
-                this.btnDisable = false
-                throw new Error(txnResponse)
-            }
-        }
-        validateReceiver()
-    }
-
     _textMenu(event) {
 
         const getSelectedText = () => {

qortal-ui-plugins/plugins/core/names-market/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="/font/material-icons.css">
+    <link rel="stylesheet" href="/font/switch-theme.css">
+    <script>
+        const checkBack = localStorage.getItem('qortalTheme')
+        if (checkBack === 'dark') {
+            newtheme = 'dark';
+        } else {
+            newtheme = 'light';
+        }
+        document.querySelector('html').setAttribute('theme', newtheme);
+    </script>
+    <style>
+        html {
+            --scrollbarBG: #a1a1a1;
+            --thumbBG: #6a6c75;
+        }
+
+        *::-webkit-scrollbar {
+            width: 11px;
+        }
+
+        * {
+            scrollbar-width: thin;
+            scrollbar-color: var(--thumbBG) var(--scrollbarBG);
+        }
+
+        *::-webkit-scrollbar-track {
+            background: var(--scrollbarBG);
+        }
+
+        *::-webkit-scrollbar-thumb {
+            background-color: var(--thumbBG);
+            border-radius: 6px;
+            border: 3px solid var(--scrollbarBG);
+        }
+
+        html,
+        body {
+            margin: 0;
+            font-family: "Roboto", sans-serif;
+            background: var(--plugback);
+        }
+    </style>
+</head>
+
+<body>
+    <names-market></names-market>
+    <script src="names-market.js"></script>
+</body>
+
+</html>