From dc3630ce06063d5e378a965264944e5c8e1d1476 Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Fri, 26 Aug 2022 15:14:18 +0200 Subject: [PATCH] New wallet menu --- .../plugins/core/wallet/wallet-app.src.js | 229 ++++++++---------- 1 file changed, 106 insertions(+), 123 deletions(-) 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 48e1dd62..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")} @@ -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", "") @@ -3808,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 @@ -5122,7 +5106,7 @@ class MultiWallet extends LitElement { { render(html`${data.item.memo}`, root) }} @@ -5347,7 +5331,6 @@ class MultiWallet extends LitElement { }) } - isEmptyArray(arr) { if (!arr) { return true