From 2996f7122dcafce2ab42e6f967f2cca783780749 Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Sun, 10 Dec 2023 11:18:17 +0100 Subject: [PATCH] Add trade information --- .../core/components/TradeInfoView-css.js | 629 ++++++++++ .../plugins/core/components/TradeInfoView.js | 285 +++++ .../core/trade-portal/trade-portal.src.js | 1024 +++++++++-------- 3 files changed, 1476 insertions(+), 462 deletions(-) create mode 100644 plugins/plugins/core/components/TradeInfoView-css.js create mode 100644 plugins/plugins/core/components/TradeInfoView.js diff --git a/plugins/plugins/core/components/TradeInfoView-css.js b/plugins/plugins/core/components/TradeInfoView-css.js new file mode 100644 index 00000000..a3b60d27 --- /dev/null +++ b/plugins/plugins/core/components/TradeInfoView-css.js @@ -0,0 +1,629 @@ +import {css} from 'lit' + +export const tradeInfoViewStyle = css` + * { + --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-secondary: var(--mdc-theme-primary); + --mdc-theme-surface: var(--white); + --mdc-dialog-content-ink-color: var(--black); + box-sizing: border-box; + } + + p { + margin-top: 0; + margin-bottom: 1rem; + color: var(--black); + } + + p { + margin: 0; + padding: 0; + color: var(--black); + } + + .card { + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + height: calc(100% - 1rem); + word-wrap: break-word; + background-color: var(--white); + background-clip: border-box; + margin-bottom: 1rem; + } + + .card-header { + padding: 0.5rem 1rem; + margin-bottom: 0; + background-color: rgba(0, 0, 0, 0.03); + border-bottom: 2px solid rgba(0, 0, 0, 0.125); + } + + .card-header { + background: none; + border-width: 0; + padding: 10px; + padding-bottom: 0rem; + } + + .card-title { + font-size: 1.2rem; + color: var(--black); + margin-bottom: 0.5rem; + } + + .card-body { + flex: 1 1 auto; + padding: 1rem 1rem; + } + + .card-body { + padding: 20px; + } + + .d-sm-flex { + display: flex !important; + } + + .align-items-center { + align-items: center !important; + } + + .justify-content-between { + justify-content: space-between !important; + } + + .d-flex { + display: flex !important; + } + + .mb-3 { + margin-bottom: 1rem !important; + } + + .cwh-64 { + width: 64px !important; + height: 64px !important; + } + + .cwh-80 { + width: 80px !important; + height: 80px !important; + } + + .rounded { + border-radius: 25% !important; + } + + .ms-3 { + margin-left: 1rem !important; + } + + .cfs-12 { + font-size: 12px !important; + } + + .cfs-14 { + font-size: 14px !important; + } + + .cfs-16 { + font-size: 16px !important; + } + + .cfs-18 { + font-size: 18px !important; + } + + .me-sm-3 { + margin-right: 1rem !important; + } + + .ms-sm-0 { + margin-left: 0 !important; + } + + .text-sm-end { + text-align: right !important; + } + + .order-0 { + order: 0 !important; + } + + .order-1 { + order: 1 !important; + } + + .order-sm-0 { + order: 0 !important; + } + + .order-sm-1 { + order: 1 !important; + } + + .decline { + --mdc-theme-primary: var(--mdc-theme-error) + } + + .warning { + --mdc-theme-primary: #f0ad4e; + } + + .red { + color: #F44336; + } + + .green { + color: #198754; + } + + .buttons { + display: inline; + float: right; + margin-bottom: 5px; + } + + .loadingContainer { + height: 100%; + width: 100%; + } + + .loading, + .loading:after { + border-radius: 50%; + width: 5em; + height: 5em; + } + + .loading { + margin: 10px auto; + border-width: .6em; + border-style: solid; + border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgb(3, 169, 244); + font-size: 10px; + position: relative; + text-indent: -9999em; + transform: translateZ(0px); + animation: 1.1s linear 0s infinite normal none running loadingAnimation; + } + + @-webkit-keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + table { + caption-side: bottom; + border-collapse: collapse; + } + + caption { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + color: #6c757d; + text-align: left; + } + + th { + text-align: inherit; + text-align: -webkit-match-parent; + } + + thead, + tbody, + tfoot, + tr, + td, + th { + border-color: inherit; + border-style: solid; + border-width: 0; + } + + .table { + --bs-table-bg: transparent; + --bs-table-striped-color: #212529; + --bs-table-striped-bg: rgba(255, 255, 255, 0.2); + --bs-table-active-color: #212529; + --bs-table-active-bg: rgba(0, 0, 0, 0.1); + --bs-table-hover-color: #212529; + --bs-table-hover-bg: rgba(0, 0, 0, 0.075); + width: 100%; + margin-bottom: 1rem; + color: var(--black); + vertical-align: top; + border-color: #edeff4; + } + + .table> :not(caption)>*>* { + padding: 0.75rem 0.75rem; + background-color: var(--bs-table-bg); + background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg)); + border-bottom-width: 2px; + } + + .table>tbody { + vertical-align: inherit; + } + + .table>thead { + vertical-align: bottom; + } + + .table> :not(:last-child)> :last-child>* { + border-bottom-color: currentColor; + } + + .caption-top { + caption-side: top; + } + + .table-sm> :not(caption)>*>* { + padding: 0.5rem 0.5rem; + } + + .table-bordered> :not(caption)>* { + border-width: 2px 0; + } + + .table-bordered> :not(caption)>*>* { + border-width: 0 2px; + } + + .table-borderless> :not(caption)>*>* { + border-bottom-width: 0; + } + + .table-striped>tbody>tr:nth-of-type(odd) { + --bs-table-accent-bg: var(--bs-table-striped-bg); + color: var(--black); + } + + .table-active { + --bs-table-accent-bg: var(--bs-table-active-bg); + color: var(--bs-table-active-color); + } + + .table-hover>tbody>tr:hover { + --bs-table-accent-bg: var(--bs-table-hover-bg); + color: var(--bs-table-hover-color); + } + + .table-primary { + --bs-table-bg: #cfe2ff; + --bs-table-striped-bg: #c5d7f2; + --bs-table-striped-color: #000; + --bs-table-active-bg: #bacbe6; + --bs-table-active-color: #000; + --bs-table-hover-bg: #bfd1ec; + --bs-table-hover-color: #000; + color: #000; + border-color: #bacbe6; + } + + .table-secondary { + --bs-table-bg: #e2e3e5; + --bs-table-striped-bg: #d7d8da; + --bs-table-striped-color: #000; + --bs-table-active-bg: #cbccce; + --bs-table-active-color: #000; + --bs-table-hover-bg: #d1d2d4; + --bs-table-hover-color: #000; + color: #000; + border-color: #cbccce; + } + + .table-success { + --bs-table-bg: #e1f5d4; + --bs-table-striped-bg: #d6e9c9; + --bs-table-striped-color: #000; + --bs-table-active-bg: #cbddbf; + --bs-table-active-color: #000; + --bs-table-hover-bg: #d0e3c4; + --bs-table-hover-color: #000; + color: #000; + border-color: #cbddbf; + } + + .table-info { + --bs-table-bg: #cff4fc; + --bs-table-striped-bg: #c5e8ef; + --bs-table-striped-color: #000; + --bs-table-active-bg: #badce3; + --bs-table-active-color: #000; + --bs-table-hover-bg: #bfe2e9; + --bs-table-hover-color: #000; + color: #000; + border-color: #badce3; + } + + .table-warning { + --bs-table-bg: #fff3cd; + --bs-table-striped-bg: #f2e7c3; + --bs-table-striped-color: #000; + --bs-table-active-bg: #e6dbb9; + --bs-table-active-color: #000; + --bs-table-hover-bg: #ece1be; + --bs-table-hover-color: #000; + color: #000; + border-color: #e6dbb9; + } + + .table-danger { + --bs-table-bg: #f8d7da; + --bs-table-striped-bg: #eccccf; + --bs-table-striped-color: #000; + --bs-table-active-bg: #dfc2c4; + --bs-table-active-color: #000; + --bs-table-hover-bg: #e5c7ca; + --bs-table-hover-color: #000; + color: #000; + border-color: #dfc2c4; + } + + .table-light { + --bs-table-bg: #f8f9fa; + --bs-table-striped-bg: #ecedee; + --bs-table-striped-color: #000; + --bs-table-active-bg: #dfe0e1; + --bs-table-active-color: #000; + --bs-table-hover-bg: #e5e6e7; + --bs-table-hover-color: #000; + color: #000; + border-color: #dfe0e1; + } + + .table-dark { + --bs-table-bg: #212529; + --bs-table-striped-bg: #2c3034; + --bs-table-striped-color: #fff; + --bs-table-active-bg: #373b3e; + --bs-table-active-color: #fff; + --bs-table-hover-bg: #323539; + --bs-table-hover-color: #fff; + color: #fff; + border-color: #373b3e; + } + + .table-responsive { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + @media (max-width: 359.98px) { + .table-responsive-xxs { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + } + + @media (max-width: 499.98px) { + .table-responsive-xsm { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + } + + @media (max-width: 575.98px) { + .table-responsive-sm { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + } + + @media (max-width: 767.98px) { + .table-responsive-md { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + } + + @media (max-width: 991.98px) { + .table-responsive-lg { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + } + + @media (max-width: 1199.98px) { + .table-responsive-xl { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + } + + @media (max-width: 1399.98px) { + .table-responsive-xxl { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + } + + th { + font-weight: 500; + } + + tbody::-webkit-scrollbar, + tbody::-webkit-scrollbar-thumb, + tbody::-webkit-scrollbar-track { + opacity: 0; + width: 5px; + border-radius: 6px; + position: absolute; + right: 0; + top: 0; + } + + tbody:hover::-webkit-scrollbar, + tbody:hover::-webkit-scrollbar-thumb, + tbody:hover::-webkit-scrollbar-track { + opacity: 0.9; + width: 5px; + border-radius: 6px; + right: 2px; + position: absolute; + transition: background-color 0.2s linear, width 0.2s ease-in-out; + } + + tbody:hover::-webkit-scrollbar-thumb { + background-color: #eee; + } + + .mt-0 { + margin-top: 0 !important; + } + + .mt-1 { + margin-top: 0.25rem !important; + } + + .mt-2 { + margin-top: 0.5rem !important; + } + + .mt-3 { + margin-top: 1rem !important; + } + + .mt-4 { + margin-top: 1.5rem !important; + } + + .mt-5 { + margin-top: 3rem !important; + } + + .mt-auto { + margin-top: auto !important; + } + + .w-25 { + width: 25% !important; + } + + .w-50 { + width: 50% !important; + } + + .w-75 { + width: 75% !important; + } + + .w-100 { + width: 100% !important; + } + + .w-auto { + width: auto !important; + } + + .cmw-30 { + min-width: 30rem; + } + + .fst-normal { + font-style: normal !important; + } + + .fw-light { + font-weight: 300 !important; + } + + .fw-lighter { + font-weight: lighter !important; + } + + .fw-normal { + font-weight: 400 !important; + } + + .fw-bold { + font-weight: 500 !important; + } + + .fw-bolder { + font-weight: bolder !important; + } + + .text-lowercase { + text-transform: lowercase !important; + } + + .text-uppercase { + text-transform: uppercase !important; + } + + .text-capitalize { + text-transform: capitalize !important; + } + + .text-start { + text-align: left !important; + } + + .text-end { + text-align: right !important; + } + + .text-center { + text-align: center !important; + } + + .text-primary { + color: #0e6eff !important; + } + + .text-secondary { + color: #6c757d !important; + } + + .text-success { + color: #68cf29 !important; + } + + .text-info { + color: #03a9f4 !important; + } + + .text-warning { + color: #ffc107 !important; + } + + .text-danger { + color: #dc3545 !important; + } + + .text-light { + color: #f8f9fa !important; + } + + .text-dark { + color: #212529 !important; + } + + .text-white { + color: #fff !important; + } +` \ No newline at end of file diff --git a/plugins/plugins/core/components/TradeInfoView.js b/plugins/plugins/core/components/TradeInfoView.js new file mode 100644 index 00000000..e4877bf6 --- /dev/null +++ b/plugins/plugins/core/components/TradeInfoView.js @@ -0,0 +1,285 @@ +import {css, html, LitElement} from 'lit' +import {render} from 'lit/html.js' +import {Epml} from '../../../epml.js' +import {get, translate} from '../../../../core/translate/index.js' +import {tradeInfoViewStyle} from './TradeInfoView-css.js' + +import '@polymer/paper-dialog/paper-dialog.js' +import '@material/mwc-button' +import '@material/mwc-icon' + +const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) + +class TradeInfoView extends LitElement { + static get properties() { + return { + sellerAddress: { type: String }, + buyerAddress: { type: String }, + sellqortAmount: { type: Number }, + buyforeignAmount: { type: Number }, + tradeTime: { type: String }, + coinCode: { type: String }, + addressSellerResult: { type: Array }, + addressBuyerResult: { type: Array }, + sellerImage: { type: String }, + infoSellerName: { type: String }, + buyerImage: { type: String }, + infoBuyerName: { type: String }, + priceEach: { type: Number }, + atAddress: { type: String }, + isLoadingCompleteInfo: { type: Boolean }, + theme: { type: String, reflect: true } + } + } + + static styles = [tradeInfoViewStyle] + + constructor() { + super() + this.sellerAddress = '' + this.buyerAddress = '' + this.sellqortAmount = 0 + this.buyforeignAmount = 0 + this.tradeTime = '' + this.coinCode = '' + this.addressSellerResult = [] + this.addressBuyerResult = [] + this.sellerImage = '' + this.infoSellerName = '' + this.buyerImage = '' + this.infoBuyerName = '' + this.priceEach = 0 + this.atAddress = '' + this.isLoadingCompleteInfo = false + this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' + } + + render() { + return html` + +
+
+

${translate("info.inf19")}

+
+
+
+
+ ${this.avatarSellerImage()} +
+

${translate("tradepage.tchange13")}

+

${this.infoSellerName}

+

${this.sellerAddress}    

+

${translate("explorerpage.exp6")}: ${this.founderSellerStatus()}

+
+
+
+
+

${translate("info.inf20")}

+

${this.infoBuyerName}

+

    ${this.buyerAddress}

+

${translate("explorerpage.exp6")}: ${this.founderBuyerStatus()}

+
+ ${this.avatarBuyerImage()} +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
${translate("tradepage.tchange8")} ( QORT )${this.sellqortAmount} QORT
${translate("tradepage.tchange9")} ( ${this.coinCode} )${this.priceEach} ${this.coinCode}
${translate("tradepage.tchange10")} ( ${this.coinCode} )${this.buyforeignAmount} ${this.coinCode}
AT ${translate("settings.address")}${this.atAddress}
${translate("tradepage.tchange11")}${this.tradeTime}
+
+
+
+
+ this.closeTradeInfo()} dialog-dismiss>${translate("general.close")} +
+ + ` + } + + async openTradeInfo(seller, buyer, qortAmount, foreignAmount, ata, time, coin) { + this.sellerAddress = '' + this.buyerAddress = '' + this.sellqortAmount = 0 + this.buyforeignAmount = 0 + this.tradeTime = '' + this.coinCode = '' + this.priceEach = 0 + this.atAddress = '' + this.shadowRoot.getElementById('tradeInfoDialog').open() + this.isLoadingCompleteInfo = true + this.sellerAddress = seller + this.buyerAddress = buyer + this.sellqortAmount = qortAmount + this.buyforeignAmount = foreignAmount + this.tradeTime = new Date(time).toLocaleString() + this.coinCode = coin + this.priceEach = this.round(parseFloat(foreignAmount) / parseFloat(qortAmount)) + this.atAddress = ata + await this.getAddressSellerInfo(seller) + await this.getAddressBuyerInfo(buyer) + await this.getAddressSellerAvatar(seller) + await this.getAddressBuyerAvatar(buyer) + this.isLoadingCompleteInfo = false + } + + closeTradeInfo() { + this.shadowRoot.getElementById('tradeInfoDialog').close() + } + + async getAddressSellerInfo(seller) { + this.addressSellerResult = [] + 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 infoSellerAddressUrl = `${nodeUrl}/addresses/${seller}` + + const qortalSellerAddressInfo = await fetch(infoSellerAddressUrl).then(response => { + return response.json() + }) + + this.addressSellerResult = qortalSellerAddressInfo + } + + async getAddressBuyerInfo(buyer) { + this.addressBuyerResult = [] + 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 infoBuyerAddressUrl = `${nodeUrl}/addresses/${buyer}` + + const qortalBuyerAddressInfo = await fetch(infoBuyerAddressUrl).then(response => { + return response.json() + }) + + this.addressBuyerResult = qortalBuyerAddressInfo + } + + async getAddressSellerAvatar(seller) { + this.sellerImage = '' + this.infoSellerName = '' + 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 sellerNameUrl = `${nodeUrl}/names/address/${seller}?limit=0&reverse=true` + + await fetch(sellerNameUrl).then(res => { + return res.json() + }).then(jsonRes => { + if(jsonRes.length) { + jsonRes.map (item => { + this.infoSellerName = item.name + this.sellerImageName = item.name + }) + } else { + this.infoSellerName = get("chatpage.cchange15") + this.sellerImageName = seller + } + }) + + const sellerImageUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.sellerImageName}/qortal_avatar?async=true&apiKey=${this.getApiKey()}` + this.sellerImage = sellerImageUrl + } + + async getAddressBuyerAvatar(buyer) { + this.buyerImage = '' + this.infoBuyerName = '' + 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 buyerNameUrl = `${nodeUrl}/names/address/${buyer}?limit=0&reverse=true` + + await fetch(buyerNameUrl).then(res => { + return res.json() + }).then(jsonRes => { + if(jsonRes.length) { + jsonRes.map (item => { + this.infoBuyerName = item.name + this.buyerImageName = item.name + }) + } else { + this.infoBuyerName = get("chatpage.cchange15") + this.buyerImageName = seller + } + }) + + const buyerImageUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.buyerImageName}/qortal_avatar?async=true&apiKey=${this.getApiKey()}` + this.buyerImage = buyerImageUrl + } + + avatarSellerImage() { + return html`` + } + + avatarBuyerImage() { + return html`` + } + + founderSellerBadge() { + if (this.addressSellerResult.flags === 1) { + return html`${translate("explorerpage.exp6")}` + } else { + return html`` + } + } + + founderBuyerBadge() { + if (this.addressBuyerResult.flags === 1) { + return html`${translate("explorerpage.exp6")}` + } else { + return html`` + } + } + + founderSellerStatus() { + if (this.addressSellerResult.flags === 1) { + return html`${translate("general.yes")}` + } else { + return html`${translate("general.no")}` + } + } + + founderBuyerStatus() { + if (this.addressBuyerResult.flags === 1) { + return html`${translate("general.yes")}` + } else { + return html`${translate("general.no")}` + } + } + + getApiKey() { + const apiNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + let apiKey = apiNode.apiKey; + return apiKey; + } + + isEmptyArray(arr) { + if (!arr) { + return true + } + return arr.length === 0 + } + + round(number) { + let result = (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8) + return result + } +} + +window.customElements.define('trade-info-view', TradeInfoView) diff --git a/plugins/plugins/core/trade-portal/trade-portal.src.js b/plugins/plugins/core/trade-portal/trade-portal.src.js index 3a05741a..41ba9d19 100644 --- a/plugins/plugins/core/trade-portal/trade-portal.src.js +++ b/plugins/plugins/core/trade-portal/trade-portal.src.js @@ -5,6 +5,7 @@ import isElectron from 'is-electron' import {get, registerTranslateConfig, translate, use} from '../../../../core/translate/index.js' import Base58 from '../../../../crypto/api/deps/Base58.js' import {decryptData, encryptData} from '../../../../core/src/lockScreen.js' +import {tradeStyles} from './trade-portal-css.js' import '@material/mwc-button' import '@material/mwc-textfield' import '@material/mwc-icon' @@ -29,6 +30,7 @@ import chartsdgb from './charts/dgb-charts.js' import chartsrvn from './charts/rvn-charts.js' import chartsarrr from './charts/arrr-charts.js' import '../components/TraderInfoView.js' +import '../components/TradeInfoView.js' registerTranslateConfig({ loader: lang => fetch(`/language/${lang}.json`).then(res => res.json()) @@ -98,114 +100,133 @@ class TradePortal extends LitElement { static get styles() { return css` - * { - --mdc-theme-primary: rgb(3, 169, 244); - --mdc-theme-secondary: var(--mdc-theme-primary); - --mdc-theme-error: rgb(255, 89, 89); - --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-select-outlined-idle-border-color: var(--txtfieldborder); - --mdc-select-outlined-hover-border-color: var(--txtfieldhoverborder); - --mdc-select-label-ink-color: var(--black); - --mdc-select-ink-color: var(--black); - --mdc-theme-surface: var(--white); - --mdc-dialog-content-ink-color: var(--black); - --mdc-dialog-shape-radius: 25px; - --paper-input-container-focus-color: var(--mdc-theme-primary); - --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); - } + * { + --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-secondary: var(--mdc-theme-primary); + --mdc-theme-error: rgb(255, 89, 89); + --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-select-outlined-idle-border-color: var(--txtfieldborder); + --mdc-select-outlined-hover-border-color: var(--txtfieldhoverborder); + --mdc-select-label-ink-color: var(--black); + --mdc-select-ink-color: var(--black); + --mdc-theme-surface: var(--white); + --mdc-dialog-content-ink-color: var(--black); + --mdc-dialog-shape-radius: 25px; + --paper-input-container-focus-color: var(--mdc-theme-primary); + --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); + } + + .myhover vaadin-grid-cell-content { + cursor: pointer; + } + + .myhover vaadin-grid::part(selected-row) { + color: green; + cursor: pointer; + } + + .myhover vaadin-grid::part(focused-selected-row) { + color: green; + cursor: pointer; + } + + .myhover vaadin-grid::part(cell):hover { + cursor: pointer; + } + + .myhover vaadin-grid::part(row):hover { + color: green; + cursor: pointer; + } + + .myhover vaadin-grid::part(selected-row-cell) { + color: green; + cursor: pointer; + } + + paper-spinner-lite { + height: 30px; + width: 30px; + --paper-spinner-color: var(--mdc-theme-primary); + --paper-spinner-stroke-width: 3px; + } + + mwc-tab-bar { + --mdc-text-transform: none; + --mdc-tab-color-default: var(--black); + --mdc-tab-text-label-color-default: var(--black); + } + + #tabs-1 { + --mdc-tab-height: 42px; + border-left: 1px solid var(--tradeborder); + border-top: 1px solid var(--tradeborder); + border-right: 1px solid var(--tradeborder); + color: var(--black); + } + + #tab-buy[active] { + --mdc-theme-primary: rgba(55, 160, 51, 0.9); + } + + #tabs-1-content { + height: 100%; + padding-bottom: 10px; + } + + #tabs-1-content>div { + height: 100%; + border: 1px solid var(--tradeborder); + } + + #tabs-1-content .card { + border: none; + } + + #tabs-1-content .btn-clear { + --mdc-icon-button-size: 32px; + color: var(--black); + } + + .btn-clear-bot { + --mdc-icon-button-size: 32px; + color: var(--black); + float: right; + } + + .btn-info { + color: #03a9f4; + --mdc-icon-size: 16px; + padding-top: 3px; + } + + #tab-sell[active] { + --mdc-theme-primary: rgb(255, 89, 89); + } + + #trade-portal-page { + background: var(--white); + padding: 12px 24px; + } + + .divCard { + border: 1px solid var(--black); + padding: 1em; + box-shadow: 0 0.3px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); + } - .myhover vaadin-grid-cell-content { - cursor: pointer; - } - .myhover vaadin-grid::part(selected-row) { - color: green; - cursor: pointer; - } - .myhover vaadin-grid::part(focused-selected-row) { - color: green; - cursor: pointer; - } - .myhover vaadin-grid::part(cell):hover { - cursor: pointer; - } - .myhover vaadin-grid::part(row):hover { - color: green; - cursor: pointer; - } - .myhover vaadin-grid::part(selected-row-cell) { - color: green; - cursor: pointer; - } - paper-spinner-lite { - height: 30px; - width: 30px; - --paper-spinner-color: var(--mdc-theme-primary); - --paper-spinner-stroke-width: 3px; - } - mwc-tab-bar { - --mdc-text-transform: none; - --mdc-tab-color-default: var(--black); - --mdc-tab-text-label-color-default: var(--black); - } - #tabs-1 { - --mdc-tab-height: 42px; - border-left: 1px solid var(--tradeborder); - border-top: 1px solid var(--tradeborder); - border-right: 1px solid var(--tradeborder); - color: var(--black); - } - #tab-buy[active] { - --mdc-theme-primary: rgba(55, 160, 51, 0.9); - } - #tabs-1-content { - height: 100%; - padding-bottom: 10px; - } - #tabs-1-content > div { - height: 100%; - border: 1px solid var(--tradeborder); - } - #tabs-1-content .card { - border: none; - } - #tabs-1-content .btn-clear { - --mdc-icon-button-size: 32px; - color: var(--black); - } - .btn-clear-bot { - --mdc-icon-button-size: 32px; - color: var(--black); - float: right; - } - .btn-info { - color: #03a9f4; - --mdc-icon-size: 16px; - padding-top: 3px; - } - #tab-sell[active] { - --mdc-theme-primary: rgb(255, 89, 89); - } - #trade-portal-page { - background: var(--white); - padding: 12px 24px; - } - .divCard { - border: 1px solid var(--black); - padding: 1em; - box-shadow: 0 0.3px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); - } h2 { margin: 10px 0; } @@ -302,288 +323,344 @@ class TradePortal extends LitElement { padding: 7px; } - h2, - h3, - h4, - h5 { - color: var(--black); - font-weight: 400; - } - header { - display: flex; - flex: 0 1 auto; - align-items: center; - justify-content: center; - padding: 0px 10px; - font-size: 16px; - color: var(--white); - background-color: var(--tradehead); - border-left: 1px solid var(--tradeborder); - border-top: 1px solid var(--tradeborder); - border-right: 1px solid var(--tradeborder); - min-height: 40px; - } - p { - margin-bottom: 12px; - } - #trade-portal { - max-width: 100vw; - margin-left: auto; - margin-right: auto; - } - .box { - margin: 0; - padding: 0; - display: flex; - flex-flow: column; - height: 100%; - } - .box-bot { - margin: 0; - padding: 0; - display: flex; - flex-flow: column; - height: 150px; - } - #first-trade-section { - margin-bottom: 10px; - } - #first-trade-section > div { - } - #second-trade-section { - margin-bottom: 10px; - } - #second-trade-section > div { - } - #third-trade-section { - margin-bottom: 10px; - } - #third-trade-section > div { - } - .trade-chart { - background-color: var(--white); - border: 2px #ddd solid; - text-align: center; - } - .open-trades { - text-align: center; - } - .open-market-container { - text-align: center; - } - .trade-bot-container { - text-align: center; - } - .no-last-seen { - background: rgb(255, 89, 89); - padding: 9px 1.3px; - border-radius: 50%; - width: 1rem; - margin: 0 auto; - } - .card { - padding: 1em; - border: 1px var(--tradeborder) solid; - flex: 1 1 auto; - display: flex; - flex-flow: column; - justify-content: space-evenly; - min-height: inherit; - } - .card-bot { - padding: 1em; - flex: 1 1 auto; - display: flex; - flex-flow: column; - justify-content: space-evenly; - width: 350px; - min-height: inherit; - } - .cancel { - --mdc-theme-primary: rgb(255, 89, 89); - } - .border-wrapper { - border: 1px var(--tradeborder) solid; - overflow: hidden; - } - .amt-text { - color: var(--tradehave); - font-size: 15px; - margin-top: 5px; - 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; - margin-bottom: 5px; - } - .fee-text { - display: inline; - float: left; - margin-bottom: 5px; - } - .tab-text { - color: var(--tradehave); - font-size: 12px; - text-align: left; - margin-top: 2px; - margin-bottom: -12px; - } - .historic-trades { - text-align: center; - } - .my-open-orders { - text-align: center; - } - .my-historic-trades { - text-align: center; - } - .buttons { - width: auto !important; - } - .buy-button { - --mdc-theme-primary: rgba(55, 160, 51, 0.9); - } - .sell-button { - --mdc-theme-primary: rgb(255, 89, 89); - } - .trade-bot-button { - margin-top: 20px; - margin-bottom: 20px; - --mdc-theme-primary: rgba(55, 160, 51, 0.9); - } - .full-width { - background-color: var(--white); - border: 2px var(--black); - height: 200px; - text-align: center; - } - vaading-grid { - font-size: .8em; - } - vaadin-grid-column { - flex-grow: 1; - } - .loadingContainer { - height: 100%; - width: 100%; - } - .loading, - .loading:after { - border-radius: 50%; - width: 5em; - height: 5em; - } - .loading { - margin: 10px auto; - border-width: .6em; - border-style: solid; - border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgb(3, 169, 244); - font-size: 10px; - position: relative; - text-indent: -9999em; - transform: translateZ(0px); - animation: 1.1s linear 0s infinite normal none running loadingAnimation; - } - mwc-select#coinSelectionMenu { - font-size: 24px; - width:220px; - } - mwc-select#coinSelectionMenu mwc-list-item { - line-height: 30px; - } - .coinName::before { - content: ""; - display: inline-block; - height: 26px; - width: 45px; - position: absolute; - background-repeat: no-repeat; - background-size: cover; - left: 10px; - top: 10px; - } - .btc.coinName:before { - background-image: url('/img/qortbtc.png'); - } - .ltc.coinName:before { - background-image: url('/img/qortltc.png'); - } - .doge.coinName:before { - background-image: url('/img/qortdoge.png'); - } - .dgb.coinName:before { - background-image: url('/img/qortdgb.png'); - } - .rvn.coinName:before { - background-image: url('/img/qortrvn.png'); - } - .arrr.coinName:before { - background-image: url('/img/qortarrr.png'); - } - .coinName { - display: inline-block; - height: 26px; - padding-left: 45px; - } - .warning-text { - animation: blinker 1.5s linear infinite; - display: inline; - float: left; - margin-bottom: 5px; - color: rgb(255, 89, 89); - } - .warning-bot-text { - animation: blinker 1.5s linear infinite; - display: inline; - text-align: center; - color: rgb(255, 89, 89); - } - .red { - --mdc-theme-primary: #F44336; - } - @-webkit-keyframes loadingAnimation { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } - } - @keyframes loadingAnimation { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } - } - @keyframes blinker { - 50% { - opacity: 0; - } - } + h2, + h3, + h4, + h5 { + color: var(--black); + font-weight: 400; + } + + header { + display: flex; + flex: 0 1 auto; + align-items: center; + justify-content: center; + padding: 0px 10px; + font-size: 16px; + color: var(--white); + background-color: var(--tradehead); + border-left: 1px solid var(--tradeborder); + border-top: 1px solid var(--tradeborder); + border-right: 1px solid var(--tradeborder); + min-height: 40px; + } + + p { + margin-bottom: 12px; + } + + #trade-portal { + max-width: 100vw; + margin-left: auto; + margin-right: auto; + } + + .box { + margin: 0; + padding: 0; + display: flex; + flex-flow: column; + height: 100%; + } + + .box-bot { + margin: 0; + padding: 0; + display: flex; + flex-flow: column; + height: 150px; + } + + #first-trade-section { + margin-bottom: 10px; + } + + #first-trade-section>div {} + + #second-trade-section { + margin-bottom: 10px; + } + + #second-trade-section>div {} + + #third-trade-section { + margin-bottom: 10px; + } + + #third-trade-section>div {} + + .trade-chart { + background-color: var(--white); + border: 2px #ddd solid; + text-align: center; + } + + .open-trades { + text-align: center; + } + + .open-market-container { + text-align: center; + } + + .trade-bot-container { + text-align: center; + } + + .no-last-seen { + background: rgb(255, 89, 89); + padding: 9px 1.3px; + border-radius: 50%; + width: 1rem; + margin: 0 auto; + } + + .card { + padding: 1em; + border: 1px var(--tradeborder) solid; + flex: 1 1 auto; + display: flex; + flex-flow: column; + justify-content: space-evenly; + min-height: inherit; + } + + .card-bot { + padding: 1em; + flex: 1 1 auto; + display: flex; + flex-flow: column; + justify-content: space-evenly; + width: 350px; + min-height: inherit; + } + + .cancel { + --mdc-theme-primary: rgb(255, 89, 89); + } + + .border-wrapper { + border: 1px var(--tradeborder) solid; + overflow: hidden; + } + + .amt-text { + color: var(--tradehave); + font-size: 15px; + margin-top: 5px; + 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; + margin-bottom: 5px; + } + + .fee-text { + display: inline; + float: left; + margin-bottom: 5px; + } + + .tab-text { + color: var(--tradehave); + font-size: 12px; + text-align: left; + margin-top: 2px; + margin-bottom: -12px; + } + + .historic-trades { + text-align: center; + } + + .my-open-orders { + text-align: center; + } + + .my-historic-trades { + text-align: center; + } + + .buttons { + width: auto !important; + } + + .buy-button { + --mdc-theme-primary: rgba(55, 160, 51, 0.9); + } + + .sell-button { + --mdc-theme-primary: rgb(255, 89, 89); + } + + .trade-bot-button { + margin-top: 20px; + margin-bottom: 20px; + --mdc-theme-primary: rgba(55, 160, 51, 0.9); + } + + .full-width { + background-color: var(--white); + border: 2px var(--black); + height: 200px; + text-align: center; + } + + vaading-grid { + font-size: .8em; + } + + vaadin-grid-column { + flex-grow: 1; + } + + .loadingContainer { + height: 100%; + width: 100%; + } + + .loading, + .loading:after { + border-radius: 50%; + width: 5em; + height: 5em; + } + + .loading { + margin: 10px auto; + border-width: .6em; + border-style: solid; + border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgb(3, 169, 244); + font-size: 10px; + position: relative; + text-indent: -9999em; + transform: translateZ(0px); + animation: 1.1s linear 0s infinite normal none running loadingAnimation; + } + + mwc-select#coinSelectionMenu { + font-size: 24px; + width: 220px; + } + + mwc-select#coinSelectionMenu mwc-list-item { + line-height: 30px; + } + + .coinName::before { + content: ""; + display: inline-block; + height: 26px; + width: 45px; + position: absolute; + background-repeat: no-repeat; + background-size: cover; + left: 10px; + top: 10px; + } + + .btc.coinName:before { + background-image: url('/img/qortbtc.png'); + } + + .ltc.coinName:before { + background-image: url('/img/qortltc.png'); + } + + .doge.coinName:before { + background-image: url('/img/qortdoge.png'); + } + + .dgb.coinName:before { + background-image: url('/img/qortdgb.png'); + } + + .rvn.coinName:before { + background-image: url('/img/qortrvn.png'); + } + + .arrr.coinName:before { + background-image: url('/img/qortarrr.png'); + } + + .coinName { + display: inline-block; + height: 26px; + padding-left: 45px; + } + + .warning-text { + animation: blinker 1.5s linear infinite; + display: inline; + float: left; + margin-bottom: 5px; + color: rgb(255, 89, 89); + } + + .warning-bot-text { + animation: blinker 1.5s linear infinite; + display: inline; + text-align: center; + color: rgb(255, 89, 89); + } + + .red { + --mdc-theme-primary: #F44336; + } + + @-webkit-keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @keyframes blinker { + 50% { + opacity: 0; + } + } + paper-dialog.info { width: 100%; max-width: 75vw; @@ -596,15 +673,18 @@ class TradePortal extends LitElement { line-height: 1.6; overflow-y: auto; } + .actions { display: flex; justify-content: space-between; padding: 0 1em; margin: 12px 0 -6px 0; } + .close-icon { font-size: 36px; } + .close-icon:hover { cursor: pointer; opacity: .6; @@ -620,34 +700,34 @@ class TradePortal extends LitElement { border-radius: 15px; padding: 10px 10px 0px; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); - } + } - .lock-wrapper { - width: 100%; - height: 100%; - min-width: 600px; - max-width: 600px; - min-height: 400px; - max-height: 400px; - text-align: center; - background: url("/img/qortal-lock.jpg"); - border: 1px solid var(--black); - border-radius: 25px; - padding: 10px 10px 0px; - } + .lock-wrapper { + width: 100%; + height: 100%; + min-width: 600px; + max-width: 600px; + min-height: 400px; + max-height: 400px; + text-align: center; + background: url("/img/qortal-lock.jpg"); + border: 1px solid var(--black); + border-radius: 25px; + padding: 10px 10px 0px; + } - .text-wrapper { - width: 100%; - height: 100%; - min-width: 280px; - max-width: 280px; - min-height: 64px; - max-height: 64px; - text-align: center; - margin-left: 35px; - margin-top: 125px; - overflow: hidden; - } + .text-wrapper { + width: 100%; + height: 100%; + min-width: 280px; + max-width: 280px; + min-height: 64px; + max-height: 64px; + text-align: center; + margin-left: 35px; + margin-top: 125px; + overflow: hidden; + } .lock-title-white { font-family: 'magistralbold'; @@ -666,12 +746,13 @@ class TradePortal extends LitElement { } @media (min-width: 701px) { - * { - } + * {} + #trade-portal {} + #first-trade-section { display: grid; - grid-template-columns:1fr 1fr 2fr; + grid-template-columns: 1fr 1fr 2fr; grid-auto-rows: max(450px); column-gap: 0.5em; row-gap: 0.4em; @@ -679,6 +760,7 @@ class TradePortal extends LitElement { align-items: stretch; margin-bottom: 10px; } + #second-trade-section { display: grid; grid-template-columns: 2fr 1fr; @@ -689,6 +771,7 @@ class TradePortal extends LitElement { align-items: stretch; margin-bottom: 10px; } + #third-trade-section { display: grid; grid-template-columns: 1fr 2fr 1fr; @@ -914,20 +997,28 @@ class TradePortal extends LitElement { historicTradesTemplate() { return html` -
+
${translate("tradepage.tchange3")}
${translate("login.loading")}
- + { + render(html`${data.item.qortAmount}`, root) + }} + > + { const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) - render(html`${price}`, root) + render(html`${price}`, root) }} > @@ -936,7 +1027,7 @@ class TradePortal extends LitElement { resizable header="${translate("tradepage.tchange10")} (${this.listedCoins.get(this.selectedCoin).coinCode})" .renderer=${(root, column, data) => { - render(html` ${data.item.foreignAmount} `, root) + render(html`${data.item.foreignAmount}`, root) }} > @@ -1211,8 +1302,7 @@ class TradePortal extends LitElement { + ` } - pingCoinBalancesController(){ + pingCoinBalancesController() { if(!this.selectedCoin) return let coin = '' - switch (this.selectedCoin) { - case 'BITCOIN': - coin ='btc' - break - case 'LITECOIN': - coin = 'ltc' - break - case 'DOGECOIN': - coin = 'doge' - break - case 'DIGIBYTE': - coin = 'dgb' - break - case 'RAVENCOIN': - coin = 'rvn' - break - case 'PIRATECHAIN': - coin = 'arrr' - break - default: - break - } + switch (this.selectedCoin) { + case 'BITCOIN': + coin ='btc' + break + case 'LITECOIN': + coin = 'ltc' + break + case 'DOGECOIN': + coin = 'doge' + break + case 'DIGIBYTE': + coin = 'dgb' + break + case 'RAVENCOIN': + coin = 'rvn' + break + case 'PIRATECHAIN': + coin = 'arrr' + break + default: + break + } const customEvent = new CustomEvent('ping-coin-controller-with-coin', { detail: coin - }); - window.parent.dispatchEvent(customEvent); + }) + window.parent.dispatchEvent(customEvent) } - connectedCallback() { - super.connectedCallback(); - this.intervalID = setInterval(this.pingCoinBalancesController, 30000); - - } - - disconnectedCallback() { - - super.disconnectedCallback(); - if(this.intervalID){ - clearInterval(this.intervalID); + connectedCallback() { + super.connectedCallback() + this.intervalID = setInterval(this.pingCoinBalancesController, 30000) + } + disconnectedCallback() { + super.disconnectedCallback() + if (this.intervalID) { + clearInterval(this.intervalID) } - } + } async firstUpdated() { let _this = this @@ -1671,7 +1759,7 @@ class TradePortal extends LitElement { break case 'DIGIBYTE': coin = 'dgb' - break + break case 'RAVENCOIN': coin = 'rvn' break @@ -1859,6 +1947,18 @@ class TradePortal extends LitElement { theInfoView.openTraderInfo(getAddress) } + requestTradeInfo(tradeObj) { + let seller = tradeObj.item.sellerAddress + let buyer = tradeObj.item.buyerReceivingAddress + let qortAmount = tradeObj.item.qortAmount + let foreignAmount = tradeObj.item.foreignAmount + let ata = tradeObj.item.atAddress + let time = tradeObj.item.tradeTimestamp + let coin = this.listedCoins.get(this.selectedCoin).coinCode + const theTradeInfoView = this.shadowRoot.querySelector('trade-info-view') + theTradeInfoView.openTradeInfo(seller, buyer, qortAmount, foreignAmount, ata, time, coin) + } + changeTheme() { const checkTheme = localStorage.getItem('qortalTheme') this.theme = (checkTheme === 'dark') ? 'dark' : 'light'