Change messages and update deps

package.json

@@ -35,7 +35,7 @@
     "electron-log": "4.4.6"
   },
   "devDependencies": {
-    "electron": "17.4.1",
+    "electron": "17.4.3",
     "electron-builder": "23.0.3",
     "electron-notarize": "1.2.1",
     "electron-packager": "15.5.1",
@@ -44,4 +44,4 @@
   "engines": {
     "node": ">=14.17.0"
   }
-}
+}

qortal-ui-core/package.json

@@ -17,12 +17,12 @@
   "author": "QORTAL <admin@qortal.org>",
   "license": "GPL-3.0",
   "dependencies": {
-    "@hapi/hapi": "20.2.1",
+    "@hapi/hapi": "20.2.2",
     "@hapi/inert": "6.0.5",
-    "sass": "1.50.0"
+    "sass": "1.51.0"
   },
   "devDependencies": {
-    "@babel/core": "7.17.9",
+    "@babel/core": "7.17.10",
     "@material/mwc-button": "0.25.3",
     "@material/mwc-checkbox": "0.25.3",
     "@material/mwc-dialog": "0.25.3",
@@ -55,24 +55,24 @@
     "@polymer/paper-tooltip": "3.0.1",
     "@rollup/plugin-alias": "3.1.9",
     "@rollup/plugin-babel": "5.3.1",
-    "@rollup/plugin-commonjs": "21.1.0",
+    "@rollup/plugin-commonjs": "22.0.0",
-    "@rollup/plugin-node-resolve": "13.2.1",
+    "@rollup/plugin-node-resolve": "13.3.0",
     "@rollup/plugin-replace": "4.0.0",
-    "@vaadin/grid": "23.0.6",
+    "@vaadin/grid": "23.0.7",
-    "@vaadin/icons": "23.0.6",
+    "@vaadin/icons": "23.0.7",
-    "@vaadin/password-field": "23.0.6",
+    "@vaadin/password-field": "23.0.7",
     "asmcrypto.js": "2.3.2",
     "bcryptjs": "2.4.3",
     "epml": "0.3.3",
     "file-saver": "2.0.5",
-    "lit": "2.2.2",
+    "lit": "2.2.3",
-    "lit-translate": "2.0.0",
+    "lit-translate": "2.0.1",
-    "postcss": "8.4.12",
+    "postcss": "8.4.13",
     "pwa-helpers": "0.9.1",
     "random-sentence-generator": "0.0.8",
-    "redux": "4.1.2",
+    "redux": "4.2.0",
     "redux-thunk": "2.4.1",
-    "rollup": "2.70.2",
+    "rollup": "2.72.0",
     "rollup-plugin-node-globals": "1.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-progress": "1.1.2",

qortal-ui-plugins/package.json

@@ -22,7 +22,7 @@
     "emoji-picker-js": "https://github.com/Qortal/emoji-picker-js"
   },
   "devDependencies": {
-    "@babel/core": "7.17.9",
+    "@babel/core": "7.17.10",
     "@github/time-elements": "3.1.2",
     "@material/mwc-button": "0.25.3",
     "@material/mwc-checkbox": "0.25.3",
@@ -43,17 +43,17 @@
     "@polymer/paper-tooltip": "3.0.1",
     "@rollup/plugin-alias": "3.1.9",
     "@rollup/plugin-babel": "5.3.1",
-    "@rollup/plugin-commonjs": "21.1.0",
+    "@rollup/plugin-commonjs": "22.0.0",
-    "@rollup/plugin-node-resolve": "13.2.1",
+    "@rollup/plugin-node-resolve": "13.3.0",
     "@rollup/plugin-replace": "4.0.0",
-    "@vaadin/button": "23.0.6",
+    "@vaadin/button": "23.0.7",
-    "@vaadin/grid": "23.0.6",
+    "@vaadin/grid": "23.0.7",
-    "@vaadin/icons": "23.0.6",
+    "@vaadin/icons": "23.0.7",
     "epml": "0.3.3",
     "html-escaper": "3.0.3",
-    "lit": "2.2.2",
+    "lit": "2.2.3",
-    "lit-translate": "2.0.0",
+    "lit-translate": "2.0.1",
-    "rollup": "2.70.2",
+    "rollup": "2.72.0",
     "rollup-plugin-node-globals": "1.4.0",
     "rollup-plugin-progress": "1.1.2",
     "rollup-plugin-terser": "7.0.2"

qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js

@@ -13,6 +13,7 @@ import '@material/mwc-checkbox'
 import '@material/mwc-dialog'
 import '@material/mwc-formfield'
 import '@material/mwc-icon'
+import '@material/mwc-icon-button'
 import '@material/mwc-textfield'
 import '@polymer/paper-progress/paper-progress.js'
 import '@polymer/paper-slider/paper-slider.js'
@@ -446,6 +447,16 @@ class MultiWallet extends LitElement {
                 position: relative;
             }
 
+            .btn-clear-success {
+			--mdc-icon-button-size: 32px;
+			color: red;
+		}
+
+            .btn-clear-error {
+			--mdc-icon-button-size: 32px;
+			color: green;
+		}
+
             @keyframes fade-in {
                 0% {
                     opacity: 0;
@@ -455,6 +466,26 @@ class MultiWallet extends LitElement {
                 }
             }
 
+            .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;
+            }
+
             @media (max-width: 863px) {
                 .wallet {
                     width: 100%;
@@ -558,7 +589,7 @@ class MultiWallet extends LitElement {
         this.sendMoneyLoading = false
         this.isValidAmount = false
         this.btnDisable = false
-	this.balance = 0
+	  this.balance = 0
         this.amount = 0
         this.btcAmount = 0
         this.ltcAmount = 0
@@ -901,11 +932,11 @@ class MultiWallet extends LitElement {
                             >
                             </mwc-textfield>
                         </p>
-                        <div style="margin-bottom: 0;">
+                        <div style="margin-bottom: 10px;">
                             <p style="margin-bottom: 0;">${translate("walletpage.wchange21")} <span style="font-weight: bold;">0.001 QORT<span></p>
                         </div>
-                        <p style="color: red;">${this.errorMessage}</p>
+                        ${this.renderClearSuccess()}
-                        <p style="color: green;">${this.successMessage}</p>
+                        ${this.renderClearError()}
                         ${this.sendMoneyLoading ? html` <paper-progress indeterminate style="width: 100%; margin: 4px;"></paper-progress> ` : ''}
                         <div class="buttons">
                             <div>
@@ -918,7 +949,7 @@ class MultiWallet extends LitElement {
                     </div>
                     <mwc-button
                         slot="primaryAction"
-                        dialogAction="cancel"
+                        @click="${() => this.closeQortDialog()}"
                         class="red"
                     >
                     ${translate("general.close")}
@@ -978,8 +1009,8 @@ class MultiWallet extends LitElement {
                             >
                             </paper-slider>
                         </div>
-                        <p style="color: red;">${this.errorMessage}</p>
+                        ${this.renderClearSuccess()}
-                        <p style="color: green;">${this.successMessage}</p>
+                        ${this.renderClearError()}
                         ${this.sendMoneyLoading ? html` <paper-progress indeterminate style="width: 100%; margin: 4px;"></paper-progress> ` : ''}
                         <div class="buttons">
                             <div>
@@ -992,7 +1023,7 @@ class MultiWallet extends LitElement {
                     </div>
                     <mwc-button
                         slot="primaryAction"
-                        dialogAction="cancel"
+                        @click="${() => this.closeBtcDialog()}"
                         class="red"
                     >
                     ${translate("general.close")}
@@ -1052,8 +1083,8 @@ class MultiWallet extends LitElement {
                             >
                             </paper-slider>
                         </div>
-                        <p style="color: red;">${this.errorMessage}</p>
+                        ${this.renderClearSuccess()}
-                        <p style="color: green;">${this.successMessage}</p>
+                        ${this.renderClearError()}
                         ${this.sendMoneyLoading ? html` <paper-progress indeterminate style="width: 100%; margin: 4px;"></paper-progress> ` : ''}
                         <div class="buttons">
                             <div>
@@ -1066,7 +1097,7 @@ class MultiWallet extends LitElement {
                     </div>
                     <mwc-button
                         slot="primaryAction"
-                        dialogAction="cancel"
+                        @click="${() => this.closeLtcDialog()}"
                         class="red"
                     >
                     ${translate("general.close")}
@@ -1128,8 +1159,8 @@ class MultiWallet extends LitElement {
                             >
                             </paper-slider>
                         </div>
-                        <p style="color: red;">${this.errorMessage}</p>
+                        ${this.renderClearSuccess()}
-                        <p style="color: green;">${this.successMessage}</p>
+                        ${this.renderClearError()}
                         ${this.sendMoneyLoading ? html` <paper-progress indeterminate style="width: 100%; margin: 4px;"></paper-progress> ` : ''}
                         <div class="buttons">
                             <div>
@@ -1142,7 +1173,7 @@ class MultiWallet extends LitElement {
                     </div>
                     <mwc-button
                         slot="primaryAction"
-                        dialogAction="cancel"
+                        @click="${() => this.closeDogeDialog()}"
                         class="red"
                     >
                     ${translate("general.close")}
@@ -1157,14 +1188,6 @@ class MultiWallet extends LitElement {
         this.changeTheme()
         this.changeLanguage()
 
-	setInterval(() => {
-	    this.errorMessage = '';
-	}, 10000)
-
-	setInterval(() => {
-	    this.successMessage = '';
-	}, 10000)
-
         this.currencyBoxes = this.shadowRoot.querySelectorAll('.currency-box')
         this.transactionsDOM = this.shadowRoot.getElementById('transactionsDOM')
 
@@ -1391,6 +1414,64 @@ class MultiWallet extends LitElement {
         })
     }
 
+    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: 0;">
+                    <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>
+            `
+        }
+    }
+
+    closeQortDialog() {
+        this.shadowRoot.querySelector('#sendQortDialog').close()
+        this.successMessage = ''
+        this.errorMessage = ''
+    }
+
+    closeBtcDialog() {
+        this.shadowRoot.querySelector('#sendBtcDialog').close()
+        this.successMessage = ''
+        this.errorMessage = ''
+    }
+
+    closeLtcDialog() {
+        this.shadowRoot.querySelector('#sendLtcDialog').close()
+        this.successMessage = ''
+        this.errorMessage = ''
+    }
+
+    closeDogeDialog() {
+        this.shadowRoot.querySelector('#sendDogeDialog').close()
+        this.successMessage = ''
+        this.errorMessage = ''
+    }
+
     renderFetchText() {
         return html`${translate("walletpage.wchange1")}`
     }