diff --git a/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js b/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js index 07de779c..ae817975 100644 --- a/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js +++ b/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js @@ -18,6 +18,7 @@ import '@material/mwc-dialog' import '@material/mwc-formfield' import '@material/mwc-icon' import '@material/mwc-icon-button' +import '@material/mwc-tab-bar' import '@material/mwc-textfield' import '@polymer/paper-progress/paper-progress.js' import '@polymer/paper-slider/paper-slider.js' @@ -60,19 +61,18 @@ class MultiWallet extends LitElement { arrrAmount: { type: Number }, arrrMemo: { type: String }, errorMessage: { type: String }, + arrrWalletAddress: { type: String }, successMessage: { type: String }, sendMoneyLoading: { type: Boolean }, btnDisable: { type: Boolean }, isValidAmount: { type: Boolean }, balance: { type: Number }, + balanceString: { type: String }, btcFeePerByte: { type: Number }, ltcFeePerByte: { type: Number }, dogeFeePerByte: { type: Number }, dgbFeePerByte: { type: Number }, rvnFeePerByte: { type: Number }, - balanceString: { type: String }, - arrrWalletAddress: { type: String }, - exportErrorMessage: { type: String }, qortBook: { type: Array }, btcBook: { type: Array }, ltcBook: { type: Array }, @@ -159,6 +159,21 @@ class MultiWallet extends LitElement { cursor: default; } + #tabs-height { + --mdc-tab-height: 50px; + } + + #tabs-1-content { + height: 100%; + padding-bottom: 10px; + } + + mwc-tab-bar { + --mdc-text-transform: none; + --mdc-tab-color-default: var(--black); + --mdc-tab-text-label-color-default: var(--black); + } + paper-slider.blue { --paper-slider-knob-color: var(--paper-light-blue-500); --paper-slider-active-color: var(--paper-light-blue-500); @@ -196,6 +211,10 @@ class MultiWallet extends LitElement { font-family: 'Roboto Mono', monospace; } + .sans { + font-family: 'Open Sans', sans-serif; + } + .weight-100 { font-weight: 100; } @@ -273,25 +292,37 @@ class MultiWallet extends LitElement { -moz-osx-font-smoothing: grayscale; } - h2 { margin: 0; + color: var(--black); font-weight: 400; font: 24px/24px 'Open Sans', sans-serif; } h3 { margin: 0 0 5px; + color: var(--black); font-weight: 600; font-size: 18px; line-height: 18px; } - @media (min-width: 765px) { - .wrapper { - display: grid; - grid-template-columns: 0.5fr 3.5fr; - } + .hrstyle { + color: var(--border); + border-radius: 80%; + margin-bottom: 1rem; + } + + .header-title { + font-size: 32px; + color: var(--black); + font-weight: 600; + text-align: center; + margin-top: 1rem; + } + + .fullWidth { + width: 100%; } .wrapper { @@ -405,19 +436,6 @@ class MultiWallet extends LitElement { display: inline-block; } - .currency-box { - display: flex; - background-color: var(--white); - text-align: center; - padding: 12px; - cursor: pointer; - transition: 0.1s ease-in-out; - } - - .currency-box:not(:last-child) { - border-bottom: var(--border); - } - .active { background: var(--menuactive); } @@ -432,27 +450,6 @@ class MultiWallet extends LitElement { filter: grayscale(100%); } - .currency-box.active .currency-image, - .currency-box:hover .currency-image { - filter: none; - } - - .currency-box:hover { - background: var(--menuhover); - } - - .currency-box.active, - .currency-box:hover .currency-text { - font-weight: 500; - } - - .currency-text { - margin: auto 0; - margin-left: 8px; - font-size: 20px; - color: var(--black); - } - .qort .currency-image { background-image: url('/img/qort.png'); } @@ -572,9 +569,6 @@ class MultiWallet extends LitElement { .cards { margin-top: 25px; } - .currency-box:nth-of-type(2) { - margin-right: 0; - } } .checkboxLabel:hover{ @@ -591,16 +585,6 @@ class MultiWallet extends LitElement { .cards { margin-top: 25px; } - .currency-box { - width: calc(50% - 25px); - max-width: 260px; - display: inline-block; - margin-right: 25px; - margin-bottom: 25px; - } - .currency-box:nth-of-type(2) { - margin-right: 0; - } } @media (max-width: 530px) { @@ -610,16 +594,6 @@ class MultiWallet extends LitElement { .cards { text-align: center; } - .currency-box { - width: calc(100% - 25px); - max-width: 260px; - } - .currency-box:nth-of-type(2) { - margin-right: 25px; - } - .currency-box:last-of-type { - margin-bottom: 0; - } .wallet-balance { font-size: 22px; } @@ -652,11 +626,8 @@ class MultiWallet extends LitElement { this.isTextMenuOpen = false this.loading = true - this.selectWallet = this.selectWallet.bind(this) - this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'; - this.exportErrorMessage = '' this.qortBook = [] this.btcBook = [] this.ltcBook = [] @@ -767,40 +738,38 @@ class MultiWallet extends LitElement { render() { return html`
-
-
${translate("walletpage.wchange22")}
-
-
-
-
Qort
-
-
-
-
Bitcoin
-
-
-
-
Litecoin
-
-
-
-
Dogecoin
-
-
-
-
Digibyte
-
-
-
-
Ravencoin
-
-
-
-
Pirate Chain
-
-
+
+ ${translate("walletpage.wchange22")} +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + +

${translate("walletpage.wchange2")} @@ -1205,7 +1174,7 @@ class MultiWallet extends LitElement { - +
@@ -1271,7 +1240,7 @@ class MultiWallet extends LitElement { - +
@@ -1348,7 +1317,7 @@ class MultiWallet extends LitElement { - +
@@ -1425,7 +1394,7 @@ class MultiWallet extends LitElement { - +
@@ -1504,7 +1473,7 @@ class MultiWallet extends LitElement { - +
@@ -1583,7 +1552,7 @@ class MultiWallet extends LitElement { - +
@@ -1662,7 +1631,7 @@ class MultiWallet extends LitElement { - +
@@ -1974,7 +1943,7 @@ class MultiWallet extends LitElement { - +

Qortal ${translate("walletpage.wchange47")}


@@ -2023,7 +1992,7 @@ class MultiWallet extends LitElement { - +

Bitcoin ${translate("walletpage.wchange47")}


@@ -2072,7 +2041,7 @@ class MultiWallet extends LitElement { - +

Litecoin ${translate("walletpage.wchange47")}


@@ -2121,7 +2090,7 @@ class MultiWallet extends LitElement { - +

Dogecoin ${translate("walletpage.wchange47")}


@@ -2170,7 +2139,7 @@ class MultiWallet extends LitElement { - +

Digibyte ${translate("walletpage.wchange47")}


@@ -2219,7 +2188,7 @@ class MultiWallet extends LitElement { - +

Ravencoin ${translate("walletpage.wchange47")}


@@ -2268,7 +2237,7 @@ class MultiWallet extends LitElement { - +

Pirate Chain ${translate("walletpage.wchange47")}


@@ -2479,13 +2448,8 @@ class MultiWallet extends LitElement { this.rvnAddressbook() this.arrrAddressbook() - this.currencyBoxes = this.shadowRoot.querySelectorAll('.currency-box') this.transactionsDOM = this.shadowRoot.getElementById('transactionsDOM') - this.currencyBoxes.forEach((currencyBox) => { - currencyBox.addEventListener('click', this.selectWallet) - }) - this.showWallet() window.addEventListener('contextmenu', (event) => { @@ -2900,6 +2864,41 @@ class MultiWallet extends LitElement { } } + tabWalletQort() { + this._selectedWallet = 'qort' + this.showWallet() + } + + tabWalletBtc() { + this._selectedWallet = 'btc' + this.showWallet() + } + + tabWalletLtc() { + this._selectedWallet = 'ltc' + this.showWallet() + } + + tabWalletDoge() { + this._selectedWallet = 'doge' + this.showWallet() + } + + tabWalletDgb() { + this._selectedWallet = 'dgb' + this.showWallet() + } + + tabWalletRvn() { + this._selectedWallet = 'rvn' + this.showWallet() + } + + tabWalletArrr() { + this._selectedWallet = 'arrr' + this.showWallet() + } + qortAddressbook() { if (localStorage.getItem("addressbookQort") === null) { localStorage.setItem("addressbookQort", "") @@ -3588,42 +3587,71 @@ class MultiWallet extends LitElement { closeQortDialog() { this.shadowRoot.querySelector('#sendQortDialog').close() + this.shadowRoot.getElementById('amountInput').value = '' + this.shadowRoot.getElementById('recipient').value = '' + this.recipient = '' + this.amount = 0 this.successMessage = '' this.errorMessage = '' } closeBtcDialog() { this.shadowRoot.querySelector('#sendBtcDialog').close() + this.shadowRoot.getElementById('btcAmountInput').value = 0 + this.shadowRoot.getElementById('btcRecipient').value = '' + this.btcRecipient = '' + this.btcAmount = 0 this.successMessage = '' this.errorMessage = '' } closeLtcDialog() { this.shadowRoot.querySelector('#sendLtcDialog').close() + this.shadowRoot.getElementById('ltcAmountInput').value = 0 + this.shadowRoot.getElementById('ltcRecipient').value = '' + this.ltcRecipient = '' + this.ltcAmount = 0 this.successMessage = '' this.errorMessage = '' } closeDogeDialog() { this.shadowRoot.querySelector('#sendDogeDialog').close() + this.shadowRoot.getElementById('dogeAmountInput').value = 0 + this.shadowRoot.getElementById('dogeRecipient').value = '' + this.dogeRecipient = '' + this.dogeAmount = 0 this.successMessage = '' this.errorMessage = '' } closeDgbDialog() { this.shadowRoot.querySelector('#sendDgbDialog').close() + this.shadowRoot.getElementById('dgbAmountInput').value = 0 + this.shadowRoot.getElementById('dgbRecipient').value = '' + this.dgbRecipient = '' + this.dgbAmount = 0 this.successMessage = '' this.errorMessage = '' } closeRvnDialog() { this.shadowRoot.querySelector('#sendRvnDialog').close() + this.shadowRoot.getElementById('rvnAmountInput').value = 0 + this.shadowRoot.getElementById('rvRecipient').value = '' + this.rvnRecipient = '' + this.rvnAmount = 0 this.successMessage = '' this.errorMessage = '' } closeArrrDialog() { this.shadowRoot.querySelector('#sendArrrDialog').close() + this.shadowRoot.getElementById('arrrRecipient').value = '' + this.shadowRoot.getElementById('arrrMemo').value = '' + this.arrrRecipient = '' + this.arrrMemo='' + this.arrrAmount = 0 this.successMessage = '' this.errorMessage = '' } @@ -3779,21 +3807,6 @@ class MultiWallet extends LitElement { return html`${translate("walletpage.wchange8")}` } - selectWallet(event) { - event.preventDefault() - - const target = event.currentTarget - - this.currencyBoxes.forEach((currencyBox) => { - if (currencyBox.classList.contains('active')) { - currencyBox.classList.remove('active') - } - }) - target.classList.add('active') - this._selectedWallet = target.attributes.coin.value - this.showWallet() - } - _checkAmount(e) { const targetAmount = e.target.value const target = e.target @@ -4695,7 +4708,7 @@ class MultiWallet extends LitElement { return render(html``, root) } const confirmed = data.item.confirmations >= requiredConfirmations - const unconfirmed = data.item.confirmations == 0 + const unconfirmed = data.item.confirmations == 0 if (confirmed) { render(html`check`, root) } else if (unconfirmed) { @@ -4708,20 +4721,22 @@ class MultiWallet extends LitElement { { render(html` ${data.item.type} ${data.item.creatorAddress === this.wallets.get('qort').wallet.address ? html`${translate("walletpage.wchange7")}` : html`${translate("walletpage.wchange8")}`} `, root) }} > - - - - + + + + + { const time = new Date(data.item.timestamp) @@ -4748,7 +4763,6 @@ class MultiWallet extends LitElement { { render(html` ${translate("walletpage.wchange40")} ${data.item.inputs[0].address === this.wallets.get(this._selectedWallet).wallet.address ? html`${translate("walletpage.wchange7")}` : html`${translate("walletpage.wchange8")}`} `, root) @@ -4757,7 +4771,6 @@ class MultiWallet extends LitElement { { render(html`${data.item.inputs[0].address}`, root) @@ -4766,7 +4779,6 @@ class MultiWallet extends LitElement { { render(html`${data.item.outputs[0].address}`, root) @@ -4776,7 +4788,6 @@ class MultiWallet extends LitElement { { const amount = (Number(data.item.totalAmount) / 1e8).toFixed(8) @@ -4786,7 +4797,6 @@ class MultiWallet extends LitElement { { const time = new Date(data.item.timestamp) @@ -4813,7 +4823,6 @@ class MultiWallet extends LitElement { { render(html` ${translate("walletpage.wchange40")} ${data.item.inputs[0].address === this.wallets.get(this._selectedWallet).wallet.address ? html`${translate("walletpage.wchange7")}` : html`${translate("walletpage.wchange8")}`} `, root) @@ -4822,7 +4831,6 @@ class MultiWallet extends LitElement { { render(html`${data.item.inputs[0].address}`, root) @@ -4831,7 +4839,6 @@ class MultiWallet extends LitElement { { render(html`${data.item.outputs[0].address}`, root) @@ -4841,7 +4848,6 @@ class MultiWallet extends LitElement { { const amount = (Number(data.item.totalAmount) / 1e8).toFixed(8) @@ -4851,7 +4857,6 @@ class MultiWallet extends LitElement { { const time = new Date(data.item.timestamp) @@ -4878,7 +4883,6 @@ class MultiWallet extends LitElement { { render(html` ${translate("walletpage.wchange40")} ${data.item.inputs[0].address === this.wallets.get(this._selectedWallet).wallet.address ? html`${translate("walletpage.wchange7")}` : html`${translate("walletpage.wchange8")}`} `, root) @@ -4887,7 +4891,6 @@ class MultiWallet extends LitElement { { render(html`${data.item.inputs[0].address}`, root) @@ -4896,7 +4899,6 @@ class MultiWallet extends LitElement { { render(html`${data.item.outputs[0].address}`, root) @@ -4906,7 +4908,6 @@ class MultiWallet extends LitElement { { const amount = (Number(data.item.totalAmount) / 1e8).toFixed(8) @@ -4916,7 +4917,6 @@ class MultiWallet extends LitElement { { const time = new Date(data.item.timestamp) @@ -4943,7 +4943,6 @@ class MultiWallet extends LitElement { { render(html` ${translate("walletpage.wchange40")} ${data.item.inputs[0].address === this.wallets.get(this._selectedWallet).wallet.address ? html`${translate("walletpage.wchange7")}` : html`${translate("walletpage.wchange8")}`} `, root) @@ -4952,7 +4951,6 @@ class MultiWallet extends LitElement { { render(html`${data.item.inputs[0].address}`, root) @@ -4961,7 +4959,6 @@ class MultiWallet extends LitElement { { render(html`${data.item.outputs[0].address}`, root) @@ -4971,7 +4968,6 @@ class MultiWallet extends LitElement { { const amount = (Number(data.item.totalAmount) / 1e8).toFixed(8) @@ -4981,7 +4977,6 @@ class MultiWallet extends LitElement { { const time = new Date(data.item.timestamp) @@ -5008,7 +5003,6 @@ class MultiWallet extends LitElement { { render(html` ${translate("walletpage.wchange40")} ${data.item.inputs[0].address === this.wallets.get(this._selectedWallet).wallet.address ? html`${translate("walletpage.wchange7")}` : html`${translate("walletpage.wchange8")}`} `, root) @@ -5017,7 +5011,6 @@ class MultiWallet extends LitElement { { render(html`${data.item.inputs[0].address}`, root) @@ -5026,7 +5019,6 @@ class MultiWallet extends LitElement { { render(html`${data.item.outputs[0].address}`, root) @@ -5036,7 +5028,6 @@ class MultiWallet extends LitElement { { const amount = (Number(data.item.totalAmount) / 1e8).toFixed(8) @@ -5046,7 +5037,6 @@ class MultiWallet extends LitElement { { const time = new Date(data.item.timestamp) @@ -5073,7 +5063,6 @@ class MultiWallet extends LitElement { { render(html` ${translate("walletpage.wchange40")} ${data.item.totalAmount < 0 ? html`${translate("walletpage.wchange7")}` : html`${translate("walletpage.wchange8")}`} `, root) @@ -5082,7 +5071,6 @@ class MultiWallet extends LitElement {