Add exchange rate to every coin

qortal-ui-core/package.json

@@ -19,10 +19,10 @@
   "dependencies": {
     "@hapi/hapi": "20.2.2",
     "@hapi/inert": "7.0.0",
-    "sass": "1.54.4"
+    "sass": "1.54.7"
   },
   "devDependencies": {
-    "@babel/core": "7.18.10",
+    "@babel/core": "7.18.13",
     "@material/mwc-button": "0.27.0",
     "@material/mwc-checkbox": "0.27.0",
     "@material/mwc-dialog": "0.27.0",
@@ -58,21 +58,21 @@
     "@rollup/plugin-commonjs": "22.0.2",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@rollup/plugin-replace": "4.0.0",
-    "@vaadin/grid": "23.1.5",
+    "@vaadin/grid": "23.1.6",
-    "@vaadin/icons": "23.1.5",
+    "@vaadin/icons": "23.1.6",
-    "@vaadin/password-field": "23.1.5",
+    "@vaadin/password-field": "23.1.6",
     "asmcrypto.js": "2.3.2",
     "bcryptjs": "2.4.3",
     "epml": "0.3.3",
     "file-saver": "2.0.5",
-    "lit": "2.3.0",
+    "lit": "2.3.1",
     "lit-translate": "2.0.1",
     "postcss": "8.4.16",
     "pwa-helpers": "0.9.1",
     "random-sentence-generator": "0.0.8",
     "redux": "4.2.0",
     "redux-thunk": "2.4.1",
-    "rollup": "2.78.0",
+    "rollup": "2.79.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.18.10",
+    "@babel/core": "7.18.13",
     "@github/time-elements": "3.1.2",
     "@material/mwc-button": "0.27.0",
     "@material/mwc-checkbox": "0.27.0",
@@ -46,15 +46,15 @@
     "@rollup/plugin-commonjs": "22.0.2",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@rollup/plugin-replace": "4.0.0",
-    "@vaadin/button": "23.1.5",
+    "@vaadin/button": "23.1.6",
-    "@vaadin/grid": "23.1.5",
+    "@vaadin/grid": "23.1.6",
-    "@vaadin/icons": "23.1.5",
+    "@vaadin/icons": "23.1.6",
     "epml": "0.3.3",
     "file-saver": "2.0.5",
     "html-escaper": "3.0.3",
-    "lit": "2.3.0",
+    "lit": "2.3.1",
     "lit-translate": "2.0.1",
-    "rollup": "2.78.0",
+    "rollup": "2.79.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/trade-portal/trade-portal.src.js

@@ -42,6 +42,18 @@ class TradePortal extends LitElement {
             isLoadingMyOpenOrders: { type: Boolean },
             theme: { type: String, reflect: true },
             arrrWalletAddress: { type: String },
+            qortbtc: { type: Number },
+            qortltc: { type: Number },
+            qortdoge: { type: Number },
+            qortdgb: { type: Number },
+            qortrvn: { type: Number },
+            qortarrr: { type: Number },
+            btcqort: { type: Number },
+            ltcqort: { type: Number },
+            dogeqort: { type: Number },
+            dgbqort: { type: Number },
+            rvnqort: { type: Number },
+            arrrqort: { type: Number }
         }
     }
 
@@ -247,6 +259,26 @@ class TradePortal extends LitElement {
 			margin-bottom: 12px;
 		}
 
+		.exchange {
+			color: var(--black);
+			font-size: 18px;
+                  font-weight: bold;
+			margin-top: 5px;
+			margin-bottom: 10px;
+		}
+
+		.clear-button {
+                  display: inline;
+			float: right;
+			margin-bottom: 5px;
+		}
+
+		.exhcnage-text {
+                  display: inline;
+			float: left;
+			margin-bottom: 5px;
+		}
+
 		.balance-text {
                   display: inline;
 			float: right;
@@ -599,6 +631,18 @@ class TradePortal extends LitElement {
         this.isLoadingMyOpenOrders = false
         this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
         this.arrrWalletAddress = ''
+        this.qortbtc = 0
+        this.qortltc = 0
+        this.qortdoge = 0
+        this.qortdgb = 0
+        this.qortrvn = 0
+        this.qortarr = 0
+        this.btcqort = 0
+        this.ltcqort = 0
+        this.dogeqort = 0
+        this.dgbqort = 0
+        this.rvnqort = 0
+        this.arrqort = 0
     }
 
     // TODO: Move each template to a separate components! Maybe
@@ -703,16 +747,17 @@ class TradePortal extends LitElement {
 				<z id="tabs-1-content">
 					<div id="tab-buy-content">
 						<div class="card">
-							<div style="margin-left: auto">
+							<span class="exchange">
-								<mwc-icon-button class="btn-clear" title="${translate("tradepage.tchange15")}" icon="clear_all" @click="${() => this.clearBuyForm()}"></mwc-icon-button>
+								<span class="clear-button"><mwc-icon-button class="btn-clear" title="${translate("tradepage.tchange15")}" icon="clear_all" @click="${() => this.clearBuyForm()}"></mwc-icon-button></span>
-							</div>
+                                                <span class="exhcnage-text">1 ${this.listedCoins.get(this.selectedCoin).coinCode} = ${this.exchangeRateForeign()} QORT</span>
+							</span>
                                           <span class="tab-text">${translate("tradepage.tchange8")} (QORT)*</span>
 							<p>
 								<mwc-textfield
 									style="width: 100%; color: var(--black);"
 									id="buyAmountInput"
 									required readOnly
-                                                                        label=""
+                                                      label=""
 									placeholder="0.0000"
 									type="text" 
 									auto-validate="false"
@@ -773,9 +818,10 @@ class TradePortal extends LitElement {
 					</div>
 					<div id="tab-sell-content">
 						<div class="card">
-							<div style="margin-left: auto">
+							<span class="exchange">
-								<mwc-icon-button class="btn-clear" title="${translate("tradepage.tchange15")}" icon="clear_all" @click="${() => this.clearSellForm()}"></mwc-icon-button>
+								<span class="clear-button"><mwc-icon-button class="btn-clear" title="${translate("tradepage.tchange15")}" icon="clear_all" @click="${() => this.clearSellForm()}"></mwc-icon-button></span>
-							</div>
+                                                <span class="exhcnage-text">1 QORT = ${this.exchangeRateQort()} ${this.listedCoins.get(this.selectedCoin).coinCode}</span>
+							</span>
 							<span class="tab-text">${translate("tradepage.tchange8")} (QORT)*</span>
 							<p>
 								<mwc-textfield
@@ -1127,6 +1173,98 @@ class TradePortal extends LitElement {
         }
     }
 
+    exchangeRateQort() {
+        if (this.listedCoins.get(this.selectedCoin).coinCode === "BTC") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/BITCOIN?inverse=true`
+            }).then((res) => {
+                this.qortbtc = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.qortbtc}`
+        } else if (this.listedCoins.get(this.selectedCoin).coinCode === "LTC") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/LITECOIN?inverse=true`
+            }).then((res) => {
+                this.qortltc = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.qortltc}`
+        } else if (this.listedCoins.get(this.selectedCoin).coinCode === "DOGE") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/DOGECOIN?inverse=true`
+            }).then((res) => {
+                this.qortdoge = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.qortdoge}`
+        } else if (this.listedCoins.get(this.selectedCoin).coinCode === "DGB") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/DIGIBYTE?inverse=true`
+            }).then((res) => {
+                this.qortdgb = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.qortdgb}`
+        } else if (this.listedCoins.get(this.selectedCoin).coinCode === "RVN") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/RAVENCOIN?inverse=true`
+            }).then((res) => {
+                this.qortrvn = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.qortrvn}`
+        } else if (this.listedCoins.get(this.selectedCoin).coinCode === "ARRR") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/PIRATECHAIN?inverse=true`
+            }).then((res) => {
+                this.qortarrr = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.qortarrr}`
+        }
+    }
+
+    exchangeRateForeign() {
+        if (this.listedCoins.get(this.selectedCoin).coinCode === "BTC") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/BITCOIN?inverse=false`
+            }).then((res) => {
+                this.btcqort = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.btcqort}`
+        } else if (this.listedCoins.get(this.selectedCoin).coinCode === "LTC") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/LITECOIN?inverse=false`
+            }).then((res) => {
+                this.ltcqort = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.ltcqort}`
+        } else if (this.listedCoins.get(this.selectedCoin).coinCode === "DOGE") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/DOGECOIN?inverse=false`
+            }).then((res) => {
+                this.dogeqort = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.dogeqort}`
+        } else if (this.listedCoins.get(this.selectedCoin).coinCode === "DGB") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/DIGIBYTE?inverse=false`
+            }).then((res) => {
+                this.dgbqort = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.dgbqort}`
+        } else if (this.listedCoins.get(this.selectedCoin).coinCode === "RVN") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/RAVENCOIN?inverse=false`
+            }).then((res) => {
+                this.rvnqort = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.rvnqort}`
+        } else if (this.listedCoins.get(this.selectedCoin).coinCode === "ARRR") {
+            parentEpml.request('apiCall', {
+                url: `/crosschain/price/PIRATECHAIN?inverse=false`
+            }).then((res) => {
+                this.arrrqort = (Number(res) / 1e8).toFixed(8)
+            })
+            return html`${this.arrrqort}`
+        }
+    }
+
     updateWalletBalance() {
         let _url = ``
         let _body = null