Add sell name

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

@@ -7,11 +7,17 @@ registerTranslateConfig({
   loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
 })
 
-import '@material/mwc-icon'
 import '@material/mwc-button'
-import '@material/mwc-textfield'
 import '@material/mwc-dialog'
+import '@material/mwc-formfield'
+import '@material/mwc-icon'
+import '@material/mwc-icon-button'
+import '@material/mwc-textfield'
 import '@polymer/paper-spinner/paper-spinner-lite.js'
+import '@polymer/paper-progress/paper-progress.js'
+import '@vaadin/button'
+import '@vaadin/icon'
+import '@vaadin/icons'
 import '@vaadin/grid'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
@@ -19,17 +25,32 @@ const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 class NameRegistration extends LitElement {
     static get properties() {
         return {
+            theme: { type: String, reflect: true },
+            qortWalletBalance: { type: Number },
             loading: { type: Boolean },
             names: { type: Array },
+            marketSellNames: { type: Array },
             recipientPublicKey: { type: String },
             selectedAddress: { type: Object },
             btnDisable: { type: Boolean },
+            isLoading: { type: Boolean },
             registerNameLoading: { type: Boolean },
             error: { type: Boolean },
             message: { type: String },
             removeError: { type: Boolean },
             removeMessage: { type: String },
-            theme: { type: String, reflect: true }
+            fee: { type: Number },
+            sellFee: { type: Number },
+            cancelSellFee: { type: Number },
+            buyFee: { type: Number },
+            toSellName: { type: String },
+            toSellPrice: { type: String },
+            toCancelSellName: { type: String },
+            toBuyName: { type: String },
+            toBuyPrice: { type: String },
+            toBuySeller: { type: String },
+            errorMessage: { type: String },
+            successMessage: { type: String }
         }
     }
 
@@ -37,20 +58,32 @@ class NameRegistration extends LitElement {
         return css`
             * {
                 --mdc-theme-primary: rgb(3, 169, 244);
-                --mdc-theme-secondary: var(--mdc-theme-primary);
                 --paper-input-container-focus-color: var(--mdc-theme-primary);
                 --mdc-theme-surface: var(--white);
+                --mdc-text-field-outlined-idle-border-color: var(--txtfieldborder);
+                --mdc-text-field-outlined-hover-border-color: var(--txtfieldhoverborder);
+                --mdc-text-field-label-ink-color: var(--black);
+                --mdc-text-field-ink-color: var(--black);
                 --mdc-dialog-content-ink-color: var(--black);
+                --mdc-dialog-min-width: 400px;
+                --mdc-dialog-max-width: 1024px;
                 --lumo-primary-text-color: rgb(0, 167, 245);
                 --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
                 --lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
                 --lumo-primary-color: hsl(199, 100%, 48%);
                 --lumo-base-color: var(--white);
                 --lumo-body-text-color: var(--black);
+                --lumo-secondary-text-color: var(--sectxt);
+                --lumo-contrast-60pct: var(--vdicon);
                 --_lumo-grid-border-color: var(--border);
                 --_lumo-grid-secondary-border-color: var(--border2);
             }
 
+            [hidden] {
+                display: hidden !important;
+                visibility: none !important;
+            }
+
             #name-registration-page {
                 background: var(--white);
                 padding: 12px 24px;
@@ -78,21 +111,100 @@ class NameRegistration extends LitElement {
                 max-height: 42px;
             }
 
+            paper-progress {
+                --paper-progress-active-color: var(--mdc-theme-primary);
+            }
+
             .red {
                 --mdc-theme-primary: #F44336;
             }
+
+            .green {
+                --mdc-theme-primary: #198754;
+            }
+
+            .buttons {
+                text-align: right;
+            }
+
+            .card-container {
+                background-color: var(--white);
+                border-radius: 5px;
+                color: var(--black);
+                padding-top: 30px;
+                position: relative;
+                width: 350px;
+                max-width: 100%;
+                text-align: center;
+            }
+
+            .successBox {
+                height: 34px;
+                min-width: 300px;
+                width: 100%;
+                border: 1px solid green;
+                border-radius: 5px;
+                background-color: transparent;
+                margin-top: 15px;
+            }
+
+            .errorBox {
+                height: 34px;
+                min-width: 300px;
+                width: 100%;
+                border: 1px solid red;
+                border-radius: 5px;
+                background-color: transparent;
+                margin-top: 15px;
+            }
+
+            .manage-group-dialog {
+                min-height: 300px;
+                min-width: 350px;
+                box-sizing: border-box;
+                position: relative;
+            }
+
+            .btn-clear-success {
+			--mdc-icon-button-size: 32px;
+			color: red;
+		}
+
+            .btn-clear-error {
+			--mdc-icon-button-size: 32px;
+			color: green;
+		}
+
+            .error-icon {
+                font-size: 48px;
+                color: red;
+            }
         `
     }
 
     constructor() {
         super()
+        this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
+        this.qortWalletBalance = 0
         this.selectedAddress = {}
         this.names = []
+        this.marketSellNames = []
         this.recipientPublicKey = ''
         this.btnDisable = false
+        this.isLoading = false
         this.registerNameLoading = false
         this.fee = 0.001
-        this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
+        this.sellFee = 0.001
+        this.cancelSellFee = 0.001
+        this.buyFee = 0.001
+        this.toSellName = ''
+        this.toSellPrice = ''
+        this.toCancelSellName = ''
+        this.toBuyName = ''
+        this.toBuyPrice = ''
+        this.toBuySeller = ''
+        this.errorMessage = ''
+        this.successMessage = ''
     }
 
     render() {
@@ -114,13 +226,38 @@ 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) => {
+                            if (this.marketSellNames.some(e => e.owner === this.selectedAddress.address)) {
+                                render(html`${this.renderCancelSellNameButton(data.item)}`, root)
+                            } else {
+                                render(html`${this.renderSellNameButton(data.item)}`, root)
+                            }
+                        }}></vaadin-grid-column>
                     </vaadin-grid>
                     ${this.isEmptyArray(this.names) ? html`
                         <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-grid theme="large" id="marketSellNames" ?hidden="${this.isEmptyArray(this.marketSellNames)}" aria-label="Names" .items="${this.marketSellNames}" 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>
+                    ${this.isEmptyArray(this.marketSellNames) ? html`
+                        <span style="color: var(--black);">${translate("registernamepage.nchange24")}</span>
+                    `: ''}
+                </div>
 
-                <!-- Register Name Dialog -->
                 <mwc-dialog id="registerNameDialog" scrimClickAction="${this.registerNameLoading ? '' : 'close'}">
                     <div>${translate("registernamepage.nchange9")}</div>
                     <br>
@@ -161,6 +298,204 @@ class NameRegistration extends LitElement {
                     ${translate("general.close")}
                     </mwc-button>
                 </mwc-dialog>
+
+                <mwc-dialog id="sellNameDialog" scrimClickAction="" escapeKeyAction="">
+                    <div class="manage-group-dialog">
+                        <div style="text-align: center;">
+                            <h2>${translate("registernamepage.nchange19")}</h2>
+                            <hr />
+                            <br>
+                        </div>
+                        <p>
+                            <mwc-textfield
+                                style="width: 100%; color: var(--black);"
+                                readOnly
+                                outlined
+                                id="toSellName"
+                                label="${translate("registernamepage.nchange25")}"
+                                type="text"
+                                value="${this.toSellName}"
+                            >
+                            </mwc-textfield>
+                        </p>
+                        <p>
+                            <mwc-textfield
+                                style="width: 100%; color: var(--black);"
+                                required
+                                outlined
+                                id="toSellPrice"
+                                label="${translate("registernamepage.nchange23")} (QORT)"
+                                type="number"
+                                value="${this.toSellPrice}"
+                            >
+                            </mwc-textfield>
+                        </p>
+                        <div style="margin-bottom: 10px;">
+                            <p style="margin-bottom: 0;">${translate("walletpage.wchange21")} <span style="font-weight: bold;">${this.sellFee} 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.createSellName()}>
+                                    <vaadin-icon icon="vaadin:exit" slot="prefix"></vaadin-icon>
+                                    ${translate("registernamepage.nchange19")}
+                                </vaadin-button>
+                            </div>
+                        </div>
+                    </div>
+                    <mwc-button
+                        slot="primaryAction"
+                        @click="${() => this.closeSellNameDialog()}"
+                        class="red"
+                    >
+                    ${translate("general.close")}
+                    </mwc-button>
+                </mwc-dialog>
+
+                <mwc-dialog id="cancelSellNameDialog" scrimClickAction="" escapeKeyAction="">
+                    <div class="manage-group-dialog">
+                        <div style="text-align: center;">
+                            <h2>${translate("registernamepage.nchange20")} ${translate("registernamepage.nchange5")}</h2>
+                            <hr />
+                            <br>
+                        </div>
+                        <p>
+                            <mwc-textfield
+                                style="width: 100%; color: var(--black);"
+                                readOnly
+                                outlined
+                                id="toCancelSellName"
+                                label="${translate("registernamepage.nchange29")}"
+                                type="text"
+                                value="${this.toCancelSellName}"
+                            >
+                            </mwc-textfield>
+                        </p>
+                        <div style="margin-bottom: 10px;">
+                            <p style="margin-bottom: 0;">${translate("walletpage.wchange21")} <span style="font-weight: bold;">${this.cancelSellFee} 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.createCancelSellName()}>
+                                    <vaadin-icon icon="vaadin:close-circle-o" slot="prefix"></vaadin-icon>
+                                    ${translate("registernamepage.nchange20")} ${translate("registernamepage.nchange5")}
+                                </vaadin-button>
+                            </div>
+                        </div>
+                    </div>
+                    <mwc-button
+                        slot="primaryAction"
+                        @click="${() => this.closeCancelSellNameDialog()}"
+                        class="red"
+                    >
+                    ${translate("general.close")}
+                    </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>
+                        <h2>${translate("registernamepage.nchange35")}</h2>
+                        <h4>${translate("registernamepage.nchange36")}</h4>
+                    </div>
+                    <mwc-button
+                        slot="primaryAction"
+                        @click=${() => this.closeBuyErrorNameDialog()}
+                        class="red"
+                    >
+                    ${translate("general.close")}
+                    </mwc-button>
+                </mwc-dialog>
+
+                <mwc-dialog id="buyErrorPriceDialog" scrimClickAction="" escapeKeyAction="">
+                    <div class="card-container">
+                        <mwc-icon class="error-icon">warning</mwc-icon>
+                        <h2>${translate("registernamepage.nchange37")}</h2>
+                        <h4>${translate("registernamepage.nchange38")}</h4>
+                    </div>
+                    <mwc-button
+                        slot="primaryAction"
+                        @click=${() => this.closeBuyErrorPriceDialog()}
+                        class="red"
+                    >
+                    ${translate("general.close")}
+                    </mwc-button>
+                </mwc-dialog>
             </div>
         `
     }
@@ -170,6 +505,9 @@ class NameRegistration extends LitElement {
         this.changeTheme()
         this.changeLanguage()
         this.unitFee()
+        this.unitSellFee()
+        this.unitCancelSellFee()
+        this.unitBuyFee()
 
         const fetchNames = () => {
             parentEpml.request('apiCall', {
@@ -180,6 +518,15 @@ class NameRegistration extends LitElement {
             setTimeout(fetchNames, this.config.user.nodeSettings.pingInterval)
         }
 
+        const fetchMarketSellNames = async () => {
+            await parentEpml.request('apiCall', {
+                url: `/names/forsale?limit=0&reverse=true`
+            }).then(res => {
+                this.marketSellNames = res
+            })
+            setTimeout(fetchMarketSellNames, 60000)
+        }
+
         window.addEventListener("contextmenu", (event) => {
             event.preventDefault()
             this._textMenu(event)
@@ -221,6 +568,7 @@ class NameRegistration extends LitElement {
             parentEpml.subscribe('config', c => {
                 if (!configLoaded) {
                     setTimeout(fetchNames, 1)
+                    setTimeout(fetchMarketSellNames, 1)
                     configLoaded = true
                 }
                 this.config = JSON.parse(c)
@@ -237,11 +585,11 @@ class NameRegistration extends LitElement {
     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() {
@@ -255,6 +603,50 @@ class NameRegistration extends LitElement {
         }
     }
 
+    async updateQortWalletBalance() {
+        let qortAddress = window.parent.reduxStore.getState().app.selectedAddress.address
+
+        await parentEpml.request('apiCall', {
+            url: `/addresses/balance/${qortAddress}`,
+        }).then((res) => {
+            this.qortWalletBalance = res
+        })
+    }
+
+    renderClearSuccess() {
+        let strSuccessValue = this.successMessage
+        if (strSuccessValue === "") {
+            return html``
+        } else {
+            return html`
+                <div class="successBox">
+                    <span style="color: green; float: left; padding-top: 4px; padding-left: 7px;">${this.successMessage}</span>
+                    <span style="padding-top: 4px: padding-right: 7px; float: right;"><mwc-icon-button class="btn-clear-success" title="${translate("general.close")}" icon="close" @click="${() => this.successMessage = ''}"></mwc-icon-button></span>
+                </div>
+                <div style="margin-bottom: 15px;">
+                    <p style="margin-bottom: 0;">${translate("walletpage.wchange43")}</p>
+                </div>
+            `
+        }
+    }
+
+    renderClearError() {
+        let strErrorValue = this.errorMessage
+        if (strErrorValue === "") {
+            return html``
+        } else {
+            return html`
+                <div class="errorBox">
+                    <span style="color: red; float: left; padding-top: 4px; padding-left: 7px;">${this.errorMessage}</span>
+                    <span style="padding-top: 4px: padding-right: 7px; float: right;"><mwc-icon-button class="btn-clear-error" title="${translate("general.close")}" icon="close" @click="${() => this.errorMessage = ''}"></mwc-icon-button></span>
+                </div>
+                <div style="margin-bottom: 15px;">
+                    <p style="margin-bottom: 0;">${translate("walletpage.wchange44")}</p>
+                </div>
+            `
+        }
+    }
+
     renderCoreText() {
         return html`${translate("registernamepage.nchange16")}`
     }
@@ -263,6 +655,18 @@ class NameRegistration extends LitElement {
         return html`${translate("registernamepage.nchange18")}`
     }
 
+    renderSellSuccessText() {
+        return html`${translate("registernamepage.nchange32")}`
+    }
+
+    renderCancelSuccessText() {
+        return html`${translate("registernamepage.nchange33")}`
+    }
+
+    renderBuySuccessText() {
+        return html`${translate("registernamepage.nchange34")}`
+    }
+
     renderFailText() {
         return html`${translate("registernamepage.nchange17")}`
     }
@@ -271,7 +675,7 @@ class NameRegistration extends LitElement {
         let name = nameObj.name
         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}/arbitrary/THUMBNAIL/${name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`;
+        const url = `${nodeUrl}/arbitrary/THUMBNAIL/${name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`
         return html`<img src="${url}" onerror="this.onerror=null; this.src='/img/incognito.png';">`
     }
 
@@ -280,28 +684,168 @@ class NameRegistration extends LitElement {
     }
 
     async uploadAvatar(nameObj) {
-        let name = encodeURIComponent(nameObj.name)
+        let name = nameObj.name
         window.location.href = `../qdn/publish/index.html?service=THUMBNAIL&identifier=qortal_avatar&name=${name}&uploadType=file&category=Avatar&showName=false&showService=false&showIdentifier=false`
     }
 
+    renderSellNameButton(nameObj) {
+        return html`<mwc-button class="green" @click=${() => this.openSellNameDialog(nameObj)}><mwc-icon>sell</mwc-icon>&nbsp;${translate("registernamepage.nchange19")}</mwc-button>`
+    }
+
+    openSellNameDialog(nameObj) {
+        this.toSellName = ''
+        this.toSellPrice = ''
+        this.shadowRoot.getElementById("toSellName").value = ''
+        this.shadowRoot.getElementById("toSellPrice").value = ''
+        this.toSellName = nameObj.name
+        this.toSellPrice = '5'
+        this.shadowRoot.querySelector('#sellNameDialog').show()
+    }
+
+    closeSellNameDialog() {
+        this.shadowRoot.querySelector('#sellNameDialog').close()
+        this.toSellName = ''
+        this.toSellPrice = ''
+        this.shadowRoot.getElementById("toSellName").value = ''
+        this.shadowRoot.getElementById("toSellPrice").value = ''
+    }
+
+    renderCancelSellNameButton(nameObj) {
+        return html`<mwc-button class="red" @click=${() => this.openCancelSellNameDialog(nameObj)}><mwc-icon>cancel</mwc-icon>&nbsp;${translate("registernamepage.nchange20")}</mwc-button>`
+    }
+
+    openCancelSellNameDialog(nameObj) {
+        this.toCancelSellName = ''
+        this.shadowRoot.getElementById("toCancelSellName").value = ''
+        this.toCancelSellName = nameObj.name
+        this.shadowRoot.querySelector('#cancelSellNameDialog').show()
+    }
+
+    closeCancelSellNameDialog() {
+        this.shadowRoot.querySelector('#cancelSellNameDialog').close()
+        this.toCancelSellName = ''
+        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()
+
+        const myFunds = this.round(parseFloat(this.qortWalletBalance))
+        const myBuyPrice = this.round(parseFloat(this.toBuyPrice))
+
+        if (Number(myFunds) < Number(myBuyPrice)) {
+            this.shadowRoot.querySelector('#buyErrorPriceDialog').show()
+        } else {
+            this.createBuyName()
+        }
+    }
+
+    closeBuyErrorNameDialog() {
+        this.shadowRoot.querySelector('#buyErrorNameDialog').close()
+    }
+
+    closeBuyErrorPriceDialog() {
+        this.shadowRoot.querySelector('#buyErrorPriceDialog').close()
+    }
+
     async unitFee() {
-        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 url = `${nodeUrl}/transactions/unitfee?txType=REGISTER_NAME`;
+        const url = `${nodeUrl}/transactions/unitfee?txType=REGISTER_NAME`
         await fetch(url).then((response) => {
             if (response.ok) {
-                return response.json();
+                return response.json()
             }
-            return Promise.reject(response);
+            return Promise.reject(response)
         }).then((json) => {
-            this.fee = (Number(json) / 1e8).toFixed(2);
+            this.fee = (Number(json) / 1e8).toFixed(2)
+        })
+    }
+
+    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
+        const url = `${nodeUrl}/transactions/unitfee?txType=SELL_NAME`
+        await fetch(url).then((response) => {
+            if (response.ok) {
+                return response.json()
+            }
+            return Promise.reject(response)
+        }).then((json) => {
+            this.sellFee = (Number(json) / 1e8).toFixed(8)
+        })
+    }
+
+    async unitCancelSellFee() {
+        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=CANCEL_SELL_NAME`
+        await fetch(url).then((response) => {
+            if (response.ok) {
+                return response.json()
+            }
+            return Promise.reject(response)
+        }).then((json) => {
+            this.cancelSellFee = (Number(json) / 1e8).toFixed(8)
+        })
+    }
+
+    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];
+        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
     }
 
     clearSelection() {
@@ -391,16 +935,227 @@ class NameRegistration extends LitElement {
         this.registerNameLoading = false
     }
 
+    async createSellName() {
+        const name = this.shadowRoot.getElementById("toSellName").value
+        const price = this.shadowRoot.getElementById("toSellPrice").value
+        const sellFeeInput = this.sellFee
+        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 myLastRef = lastRef
+            const myFee = sellFeeInput
+            const mySellNameDialog1 = get("registernamepage.nchange26")
+            const mySellNameDialog2 = get("registernamepage.nchange27")
+            const mySellNameDialog3 = get("registernamepage.nchange28")
+
+            let myTxnrequest = await parentEpml.request('transaction', {
+                type: 5,
+                nonce: this.selectedAddress.nonce,
+                params: {
+                    fee: myFee,
+                    name: myName,
+                    sellPrice: myPrice,
+                    lastReference: myLastRef,
+                    sellNameDialog1: mySellNameDialog1,
+                    sellNameDialog2: mySellNameDialog2,
+                    sellNameDialog3: mySellNameDialog3
+                }
+            })
+            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("toSellName").value = ''
+                this.shadowRoot.getElementById("toSellPrice").value = ''
+                this.toSellName = ''
+                this.toSellPrice = ''
+                this.errorMessage = ''
+                this.successMessage = this.renderSellSuccessText()
+                this.isLoading = false
+                this.btnDisable = false
+            } else {
+                this.errorMessage = txnResponse.data.message
+                this.isLoading = false
+                this.btnDisable = false
+                throw new Error(txnResponse)
+            }
+        }
+        validateReceiver()
+    }
+
+    async createCancelSellName() {
+        const name = this.shadowRoot.getElementById("toCancelSellName").value
+        const cancelSellFeeInput = this.cancelSellFee
+        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 myLastRef = lastRef
+            const myFee = cancelSellFeeInput
+            const myCancelSellNameDialog1 = get("registernamepage.nchange30")
+            const myCancelSellNameDialog2 = get("registernamepage.nchange31")
+
+            let myTxnrequest = await parentEpml.request('transaction', {
+                type: 6,
+                nonce: this.selectedAddress.nonce,
+                params: {
+                    fee: myFee,
+                    name: myName,
+                    lastReference: myLastRef,
+                    cancelSellNameDialog1: myCancelSellNameDialog1,
+                    cancelSellNameDialog2: myCancelSellNameDialog2
+                }
+            })
+            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("toCancelSellName").value = ''
+                this.toCancelSellName = ''
+                this.errorMessage = ''
+                this.successMessage = this.renderCancelSuccessText()
+                this.isLoading = false
+                this.btnDisable = false
+            } else {
+                this.errorMessage = txnResponse.data.message
+                this.isLoading = false
+                this.btnDisable = false
+                throw new Error(txnResponse)
+            }
+        }
+        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 = () => {
-            var text = "";
+            var text = ""
             if (typeof window.getSelection != "undefined") {
-                text = window.getSelection().toString();
+                text = window.getSelection().toString()
             } else if (typeof this.shadowRoot.selection != "undefined" && this.shadowRoot.selection.type == "Text") {
-                text = this.shadowRoot.selection.createRange().text;
+                text = this.shadowRoot.selection.createRange().text
             }
-            return text;
+            return text
         }
 
         const checkSelectedTextAndShowMenu = () => {
@@ -414,10 +1169,14 @@ class NameRegistration extends LitElement {
                 parentEpml.request('openCopyTextMenu', textMenuObject)
             }
         }
-
         checkSelectedTextAndShowMenu()
     }
 
+    round(number) {
+        let result = (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8)
+        return result
+    }
+
     isEmptyArray(arr) {
         if (!arr) { return true }
         return arr.length === 0