Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 09:45:52 +00:00
Code Issues Projects Releases Wiki Activity

Added address info on click

Browse Source
This commit is contained in:
AlphaX-Projects 2023-12-11 10:43:13 +01:00
parent 0c002235e7
commit eca896bd09
3 changed files with 542 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

525
plugins/plugins/core/components/TradeInfoView-css.js
View File

@ -5,22 +5,32 @@ 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);
}
.get-user-info {
margin: 0;
padding: 0;
color: var(--black);
}
.get-user-info:hover {
cursor: pointer;
color: #03a9f4;
}
.pds {
background: var(--white);
border: 1px solid var(--black);
border-radius: 5px;
}
.card {
position: relative;
display: flex;
@ -144,14 +154,6 @@ export const tradeInfoViewStyle = css`
order: 1 !important;
}
.decline {
--mdc-theme-primary: var(--mdc-theme-error)
}
.warning {
--mdc-theme-primary: #f0ad4e;
}
.red {
color: #F44336;
}
@ -164,6 +166,7 @@ export const tradeInfoViewStyle = css`
display: inline;
float: right;
margin-bottom: 5px;
margin-right: 5px;
}
.loadingContainer {
@ -626,4 +629,496 @@ export const tradeInfoViewStyle = css`
.text-white {
color: #fff !important;
}
.btn {
display: inline-block;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
background-color: transparent;
border: 2px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 5px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.btn {
transition: none;
}
}
.btn:hover {
color: #212529;
}
.btn-check:focus+.btn,
.btn:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(14, 110, 255, 0.25);
}
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
pointer-events: none;
opacity: 0.65;
}
.btn-primary {
color: #fff;
background-color: #0e6eff;
border-color: #edeff4;
}
.btn-primary:hover {
color: #ddd;
background-color: #3284ff;
border-color: #267dff;
}
.btn-check:focus+.btn-primary,
.btn-primary:focus {
color: #ddd;
background-color: #3284ff;
border-color: #267dff;
box-shadow: 0 0 0 0.25rem rgba(12, 94, 217, 0.5);
}
.btn-check:checked+.btn-primary,
.btn-check:active+.btn-primary,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
color: #ddd;
background-color: #3e8bff;
border-color: #267dff;
}
.btn-check:checked+.btn-primary:focus,
.btn-check:active+.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(12, 94, 217, 0.5);
}
.btn-primary:disabled,
.btn-primary.disabled {
color: #ddd;
background-color: #0e6eff;
border-color: #0e6eff;
}
.btn-secondary {
color: #fff;
background-color: #6c757d;
border-color: #edeff4;
}
.btn-secondary:hover {
color: #ddd;
background-color: #5c636a;
border-color: #565e64;
}
.btn-check:focus+.btn-secondary,
.btn-secondary:focus {
color: #ddd;
background-color: #5c636a;
border-color: #565e64;
box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
}
.btn-check:checked+.btn-secondary,
.btn-check:active+.btn-secondary,
.btn-secondary:active,
.btn-secondary.active,
.show>.btn-secondary.dropdown-toggle {
color: #ddd;
background-color: #565e64;
border-color: #51585e;
}
.btn-check:checked+.btn-secondary:focus,
.btn-check:active+.btn-secondary:focus,
.btn-secondary:active:focus,
.btn-secondary.active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
}
.btn-secondary:disabled,
.btn-secondary.disabled {
color: #ddd;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-success {
color: #fff;
background-color: #68cf29;
border-color: #edeff4;
}
.btn-success:hover {
color: #ddd;
background-color: #7fd649;
border-color: #77d43e;
}
.btn-check:focus+.btn-success,
.btn-success:focus {
color: #ddd;
background-color: #7fd649;
border-color: #77d43e;
box-shadow: 0 0 0 0.25rem rgba(88, 176, 35, 0.5);
}
.btn-check:checked+.btn-success,
.btn-check:active+.btn-success,
.btn-success:active,
.btn-success.active,
.show>.btn-success.dropdown-toggle {
color: #ddd;
background-color: #86d954;
border-color: #77d43e;
}
.btn-check:checked+.btn-success:focus,
.btn-check:active+.btn-success:focus,
.btn-success:active:focus,
.btn-success.active:focus,
.show>.btn-success.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(88, 176, 35, 0.5);
}
.btn-success:disabled,
.btn-success.disabled {
color: #ddd;
background-color: #68cf29;
border-color: #68cf29;
}
.btn-info {
color: #fff;
background-color: #0dcaf0;
border-color: #edeff4;
}
.btn-info:hover {
color: #ddd;
background-color: #31d2f2;
border-color: #25cff2;
}
.btn-check:focus+.btn-info,
.btn-info:focus {
color: #ddd;
background-color: #31d2f2;
border-color: #25cff2;
box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
}
.btn-check:checked+.btn-info,
.btn-check:active+.btn-info,
.btn-info:active,
.btn-info.active,
.show>.btn-info.dropdown-toggle {
color: #ddd;
background-color: #3dd5f3;
border-color: #25cff2;
}
.btn-check:checked+.btn-info:focus,
.btn-check:active+.btn-info:focus,
.btn-info:active:focus,
.btn-info.active:focus,
.show>.btn-info.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
}
.btn-info:disabled,
.btn-info.disabled {
color: #000;
background-color: #0dcaf0;
border-color: #0dcaf0;
}
.btn-warning {
color: #fff;
background-color: #ffc107;
border-color: #edeff4;
}
.btn-warning:hover {
color: #ddd;
background-color: #ffca2c;
border-color: #ffc720;
}
.btn-check:focus+.btn-warning,
.btn-warning:focus {
color: #ddd;
background-color: #ffca2c;
border-color: #ffc720;
box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}
.btn-check:checked+.btn-warning,
.btn-check:active+.btn-warning,
.btn-warning:active,
.btn-warning.active,
.show>.btn-warning.dropdown-toggle {
color: #ddd;
background-color: #ffcd39;
border-color: #ffc720;
}
.btn-check:checked+.btn-warning:focus,
.btn-check:active+.btn-warning:focus,
.btn-warning:active:focus,
.btn-warning.active:focus,
.show>.btn-warning.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}
.btn-warning:disabled,
.btn-warning.disabled {
color: #ddd;
background-color: #ffc107;
border-color: #ffc107;
}
.btn-danger {
color: #fff;
background-color: #dc3545;
border-color: #edeff4;
}
.btn-danger:hover {
color: #ddd;
background-color: #bb2d3b;
border-color: #b02a37;
}
.btn-check:focus+.btn-danger,
.btn-danger:focus {
color: #ddd;
background-color: #bb2d3b;
border-color: #b02a37;
box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}
.btn-check:checked+.btn-danger,
.btn-check:active+.btn-danger,
.btn-danger:active,
.btn-danger.active,
.show>.btn-danger.dropdown-toggle {
color: #ddd;
background-color: #b02a37;
border-color: #a52834;
}
.btn-check:checked+.btn-danger:focus,
.btn-check:active+.btn-danger:focus,
.btn-danger:active:focus,
.btn-danger.active:focus,
.show>.btn-danger.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}
.btn-danger:disabled,
.btn-danger.disabled {
color: #ddd;
background-color: #dc3545;
border-color: #dc3545;
}
.btn-light {
color: #000;
background-color: #f8f9fa;
border-color: #edeff4;
}
.btn-light:hover {
color: #000;
background-color: #f9fafb;
border-color: #f9fafb;
}
.btn-check:focus+.btn-light,
.btn-light:focus {
color: #000;
background-color: #f9fafb;
border-color: #f9fafb;
box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}
.btn-check:checked+.btn-light,
.btn-check:active+.btn-light,
.btn-light:active,
.btn-light.active,
.show>.btn-light.dropdown-toggle {
color: #000;
background-color: #f9fafb;
border-color: #f9fafb;
}
.btn-check:checked+.btn-light:focus,
.btn-check:active+.btn-light:focus,
.btn-light:active:focus,
.btn-light.active:focus,
.show>.btn-light.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}
.btn-light:disabled,
.btn-light.disabled {
color: #000;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.btn-dark {
color: #fff;
background-color: #212529;
border-color: #edeff4;
}
.btn-dark:hover {
color: #ddd;
background-color: #1c1f23;
border-color: #1a1e21;
}
.btn-check:focus+.btn-dark,
.btn-dark:focus {
color: #ddd;
background-color: #1c1f23;
border-color: #1a1e21;
box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}
.btn-check:checked+.btn-dark,
.btn-check:active+.btn-dark,
.btn-dark:active,
.btn-dark.active,
.show>.btn-dark.dropdown-toggle {
color: #ddd;
background-color: #1a1e21;
border-color: #191c1f;
}
.btn-check:checked+.btn-dark:focus,
.btn-check:active+.btn-dark:focus,
.btn-dark:active:focus,
.btn-dark.active:focus,
.show>.btn-dark.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}
.btn-dark:disabled,
.btn-dark.disabled {
color: #ddd;
background-color: #212529;
border-color: #212529;
}
.btn-white {
color: #000;
background-color: #fff;
border-color: #edeff4;
}
.btn-white:hover {
color: #000;
background-color: white;
border-color: white;
}
.btn-check:focus+.btn-white,
.btn-white:focus {
color: #000;
background-color: white;
border-color: white;
box-shadow: 0 0 0 0.25rem rgba(217, 217, 217, 0.5);
}
.btn-check:checked+.btn-white,
.btn-check:active+.btn-white,
.btn-white:active,
.btn-white.active,
.show>.btn-white.dropdown-toggle {
color: #000;
background-color: white;
border-color: white;
}
.btn-check:checked+.btn-white:focus,
.btn-check:active+.btn-white:focus,
.btn-white:active:focus,
.btn-white.active:focus,
.show>.btn-white.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(217, 217, 217, 0.5);
}
.btn-white:disabled,
.btn-white.disabled {
color: #000;
background-color: #fff;
border-color: #fff;
}
.btn-lg>.btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
border-radius: 0.3rem;
}
.btn-sm>.btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.2rem;
}
.border-0 {
border: 0 !important;
}
.px-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.px-1 {
padding-right: 0.25rem !important;
padding-left: 0.25rem !important;
}
.px-2 {
padding-right: 0.5rem !important;
padding-left: 0.5rem !important;
}
.px-3 {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
.px-4 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important;
}
.px-5 {
padding-right: 3rem !important;
padding-left: 3rem !important;
}
`

42
plugins/plugins/core/components/TradeInfoView.js
View File

@ -3,10 +3,8 @@ 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 './TraderInfoView.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 })
@ -32,7 +30,9 @@ class TradeInfoView extends LitElement {
}
}
static styles = [tradeInfoViewStyle]
static get styles() {
return [tradeInfoViewStyle]
}
constructor() {
super()
@ -56,7 +56,7 @@ class TradeInfoView extends LitElement {
render() {
return html`
<paper-dialog style="background: var(--white); border: 1px solid var(--black); border-radius: 5px;" id="tradeInfoDialog" modal>
<paper-dialog class="pds" id="tradeInfoDialog" modal>
<div class="card">
<div class="card-header">
<h4 class="card-title">${translate("info.inf19")}</h4>
@ -68,15 +68,15 @@ class TradeInfoView extends LitElement {
<div class="ms-3">
<p class="fw-bold cfs-18 red">${translate("tradepage.tchange13")}</p>
<p class="fw-bold cfs-18">${this.infoSellerName}</p>
<p class="cfs-12">${this.sellerAddress}&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p class="cfs-12">${translate("explorerpage.exp6")}:&nbsp;${this.founderSellerStatus()}</p>
<span class="get-user-info cfs-14" @click="${() => this.requestUserInfo(this.sellerAddress)}">${this.sellerAddress}&nbsp;&nbsp;&nbsp;&nbsp;</span>
<p class="cfs-14">${translate("explorerpage.exp6")}:&nbsp;${this.founderSellerStatus()}</p>
</div>
</div>
<div class="d-flex mb-3">
<div class="me-sm-3 ms-3 ms-sm-0 text-sm-end order-1 order-sm-0">
<p class="fw-bold cfs-18 green">${translate("info.inf20")}</p>
<p class="fw-bold cfs-18">${this.infoBuyerName}</p>
<p class="cfs-14">&nbsp;&nbsp;&nbsp;&nbsp;${this.buyerAddress}</p>
<span class="get-user-info cfs-14" @click="${() => this.requestUserInfo(this.buyerAddress)}">&nbsp;&nbsp;&nbsp;&nbsp;${this.buyerAddress}</span>
<p class="cfs-14">${translate("explorerpage.exp6")}:&nbsp;${this.founderBuyerStatus()}</p>
</div>
${this.avatarBuyerImage()}
@ -111,9 +111,10 @@ class TradeInfoView extends LitElement {
</div>
</div>
<div class="buttons">
<mwc-button class='decline' @click=${() => this.closeTradeInfo()} dialog-dismiss>${translate("general.close")}</mwc-button>
<span class="btn btn-sm btn-danger mt-2 px-3 border-0" @click="${() => this.closeTradeInfo()}" dialog-dismiss>${translate("general.close")}</span>
</div>
</paper-dialog>
<trader-info-view></trader-info-view>
`
}
@ -147,6 +148,13 @@ class TradeInfoView extends LitElement {
this.shadowRoot.getElementById('tradeInfoDialog').close()
}
requestUserInfo(infoAddress) {
let requestAddress = ''
requestAddress = infoAddress
const theUserInfoView = this.shadowRoot.querySelector('trader-info-view')
theUserInfoView.openTraderInfo(requestAddress)
}
async getAddressSellerInfo(seller) {
this.addressSellerResult = []
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
@ -231,22 +239,6 @@ class TradeInfoView extends LitElement {
return html`<img class="cwh-80 rounded order-0 order-sm-1" src="${this.buyerImage}" onerror="this.src='/img/incognito.png';" />`
}
founderSellerBadge() {
if (this.addressSellerResult.flags === 1) {
return html`<span class="founder">${translate("explorerpage.exp6")}</span>`
} else {
return html``
}
}
founderBuyerBadge() {
if (this.addressBuyerResult.flags === 1) {
return html`<span class="founder">${translate("explorerpage.exp6")}</span>`
} else {
return html``
}
}
founderSellerStatus() {
if (this.addressSellerResult.flags === 1) {
return html`<span class="green">${translate("general.yes")}</span>`

23
plugins/plugins/core/trade-portal/trade-portal.src.js
View File

@ -1264,13 +1264,20 @@ class TradePortal extends LitElement {
}
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
let seller = ''
let buyer = ''
let qortAmount = 0
let foreignAmount = 0
let ata = ''
let time = 0
let coin = ''
seller = tradeObj.item.sellerAddress
buyer = tradeObj.item.buyerReceivingAddress
qortAmount = tradeObj.item.qortAmount
foreignAmount = tradeObj.item.foreignAmount
ata = tradeObj.item.atAddress
time = tradeObj.item.tradeTimestamp
coin = this.listedCoins.get(this.selectedCoin).coinCode
const theTradeInfoView = this.shadowRoot.querySelector('trade-info-view')
theTradeInfoView.openTradeInfo(seller, buyer, qortAmount, foreignAmount, ata, time, coin)
}
@ -2832,4 +2839,4 @@ class TradePortal extends LitElement {
}
}
window.customElements.define('trade-portal', TradePortal)
window.customElements.define('trade-portal', TradePortal)