diff --git a/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js b/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js index b6565c7c..8fc798a9 100644 --- a/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js +++ b/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js @@ -53,6 +53,8 @@ class TradePortal extends LitElement { --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); --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); @@ -66,6 +68,13 @@ class TradePortal extends LitElement { --_lumo-grid-secondary-border-color: var(--border2); } + 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); @@ -389,8 +398,9 @@ class TradePortal extends LitElement { column-gap: 0.5em; row-gap: 0.4em; } + } - `; + ` } constructor() { @@ -468,390 +478,390 @@ class TradePortal extends LitElement { // TODO: Move each template to a separate components! Maybe historicTradesTemplate() { return html` -
-
-
HISTORIC MARKET TRADES
-
-
Loading...
- - - { - const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) - render(html`${price}`, root) - }} - > - - { - render(html` ${data.item.foreignAmount} `, root) - }} - > - - -
+
+
+
HISTORIC MARKET TRADES
+
+
Loading...
+ + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + { + render(html` ${data.item.foreignAmount} `, root) + }} + > + +
- `; +
+ ` } openTradesTemplate() { return html` -
-
-
OPEN MARKET SELL ORDERS
-
-
Loading...
- - { - render(html` ${this.round(data.item.qortAmount)} `, root) - }} - > - - { - render(html` ${this.round(data.item.price)} `, root) - }} - > - - { - render(html` ${data.item.foreignAmount} `, root) - }} - > - - { - render(html` ${data.item.qortalCreator} `, root) - }} - > - - -
+
+
+
OPEN MARKET SELL ORDERS
+
+
Loading...
+ + { + render(html` ${this.round(data.item.qortAmount)} `, root) + }} + > + + { + render(html` ${this.round(data.item.price)} `, root) + }} + > + + { + render(html` ${data.item.foreignAmount} `, root) + }} + > + + { + render(html` ${data.item.qortalCreator} `, root) + }} + > + +
- `; +
+ ` } openMarketTemplate() { return html` -
-
- - - - - -
-
-
- -
-

- - -

-

- - -

-

- - - -

- You have: ${this.listedCoins.get(this.selectedCoin).balance} ${this.listedCoins.get(this.selectedCoin).coinCode} -
-
- - ${this.isBuyLoading === false ? 'BUY' : html``} - -
-
+
+
+ + + + + +
+
+
+
-
-
-
-
- -
-

- - -

-

- - -

-

- - -

- You have: ${this.listedCoins.get("QORTAL").balance} QORT -
-
- - ${this.isSellLoading === false ? 'SELL' : html``} - -
+

+ + +

+

+ + +

+

+ + + +

+ You have: ${this.listedCoins.get(this.selectedCoin).balance} ${this.listedCoins.get(this.selectedCoin).coinCode} +
+
+ + ${this.isBuyLoading === false ? 'BUY' : html``} +
-
-
- `; +
+
+
+ +
+

+ + +

+

+ + +

+

+ + +

+ You have: ${this.listedCoins.get("QORTAL").balance} QORT +
+
+ + ${this.isSellLoading === false ? 'SELL' : html``} + +
+
+
+
+
+
+
+ ` } myOpenOrdersTemplate() { return html` -
-
-
MY ORDERS this.showStuckOrdersDialog()}>
-
-
Loading...
- - { - const dateString = new Date(data.item.timestamp).toLocaleString() - render(html`${dateString}`, root) - }} - > - - { - render(html` ${data.item._tradeState} `, root) - }} - > - - { - const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) - render(html`${price}`, root) - }} - > - - - - - - { - render(html`${this.renderCancelButton(data.item)}`, root) - }} - > - - -
+
+
+
MY ORDERS this.showStuckOrdersDialog()}>
+
+
Loading...
+ + { + const dateString = new Date(data.item.timestamp).toLocaleString() + render(html`${dateString}`, root) + }} + > + + { + render(html` ${data.item._tradeState} `, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + + + { + render(html`${this.renderCancelButton(data.item)}`, root) + }} + > + +
- `; +
+ ` } myHistoricTradesTemplate() { return html` -
-
-
MY TRADE HISTORY
-
- - { - const dateString = new Date(data.item.timestamp).toLocaleString() - render(html`${dateString}`, root) - }} - > - - { - if (data.item.mode === 'SOLD') return render(html` ${data.item.mode} `, root) - if (data.item.mode === 'BOUGHT') return render(html` ${data.item.mode} `, root) - return render(html` ${data.item.mode} `, root) - }} - > - - { - const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) - render(html`${price}`, root) - }} - > - - - - { - render(html` ${data.item.foreignAmount} `, root) - }} - > - - -
+
+
+
MY TRADE HISTORY
+
+ + { + const dateString = new Date(data.item.timestamp).toLocaleString() + render(html`${dateString}`, root) + }} + > + + { + if (data.item.mode === 'SOLD') return render(html` ${data.item.mode} `, root) + if (data.item.mode === 'BOUGHT') return render(html` ${data.item.mode} `, root) + return render(html` ${data.item.mode} `, root) + }} + > + + { + const price = this.round(parseFloat(data.item.foreignAmount) / parseFloat(data.item.qortAmount)) + render(html`${price}`, root) + }} + > + + + + { + render(html` ${data.item.foreignAmount} `, root) + }} + > + +
- `; +
+ ` } render() { return html` -
-
-

Qortal Trade Portal -  

- - QORT / LTC - QORT / DOGE - +
+
+

Qortal Trade Portal -  

+ + QORT / LTC + QORT / DOGE + +
+
+
+ ${this.historicTradesTemplate()} + ${this.myHistoricTradesTemplate()} + ${this.openTradesTemplate()}
-
-
- ${this.historicTradesTemplate()} - ${this.myHistoricTradesTemplate()} - ${this.openTradesTemplate()} -
-
- ${this.myOpenOrdersTemplate()} - ${this.openMarketTemplate()} -
+
+ ${this.myOpenOrdersTemplate()} + ${this.openMarketTemplate()}
- - -
-

Stuck Offers

-
-
-
- - - - - { render(html`${this.renderCancelStuckOfferButton(data.item)}`, root) }}> - -
- Close - - `; +
+ + +
+

Stuck Offers

+
+
+
+ + + + + { render(html`${this.renderCancelStuckOfferButton(data.item)}`, root) }}> + +
+ Close + + ` } firstUpdated() {