New wallet menu

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) {
+            .hrstyle {
-                .wrapper {
+                color: var(--border);
-                    display: grid;
+                border-radius: 80%;
-                    grid-template-columns: 0.5fr 3.5fr;
+                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`
             <div class="wrapper">
-                <div class="wallet">
+                <div class="header-title sans">
-                    <div style="font-size: 20px; color: var(--black); padding: 16px; border-bottom: 1px solid var(--border);">${translate("walletpage.wchange22")}</div>
+                    ${translate("walletpage.wchange22")}
-                    <div class="cards">
-                        <div coin="qort" class="currency-box qort active">
-                            <div class="currency-image"></div>
-                            <div class="currency-text">Qort</div>
-                        </div>
-                        <div coin="btc" class="currency-box btc">
-                            <div class="currency-image"></div>
-                            <div class="currency-text">Bitcoin</div>
-                        </div>
-                        <div coin="ltc" class="currency-box ltc">
-                            <div class="currency-image"></div>
-                            <div class="currency-text">Litecoin</div>
-                        </div>
-                        <div coin="doge" class="currency-box doge">
-                            <div class="currency-image"></div>
-                            <div class="currency-text">Dogecoin</div>
-                        </div>
-                        <div coin="dgb" class="currency-box dgb">
-                            <div class="currency-image"></div>
-                            <div class="currency-text">Digibyte</div>
-                        </div>
-				<div coin="rvn" class="currency-box rvn">
-                            <div class="currency-image"></div>
-                            <div class="currency-text">Ravencoin</div>
-                        </div>
-                        <div coin="arrr" class="currency-box arrr">
-                            <div class="currency-image"></div>
-                            <div class="currency-text">Pirate Chain</div>
-                        </div>
-                    </div>
                 </div>
 
+                <div class="fullWidth">
+                    <hr class="hrstyle">
+                </div>
+
+                <mwc-tab-bar id="tabs-1" activeIndex="0">
+                    <mwc-tab label="Qortal" hasImageIcon minWidth @click="${(e) => this.tabWalletQort()}">
+                        <img slot="icon" width="24px" height="24px" src="/img/qort.png">
+                    </mwc-tab>
+                    <mwc-tab label="Bitcoin" hasImageIcon minWidth @click="${(e) => this.tabWalletBtc()}">
+                        <img slot="icon" width="24px" height="24px" src="/img/btc.png">
+                    </mwc-tab>
+                    <mwc-tab label="Litecoin" hasImageIcon minWidth @click="${(e) => this.tabWalletLtc()}">
+                        <img slot="icon" width="24px" height="24px" src="/img/ltc.png">
+                    </mwc-tab>
+                    <mwc-tab label="Dogecoin" hasImageIcon minWidth @click="${(e) => this.tabWalletDoge()}">
+                        <img slot="icon" width="24px" height="24px" src="/img/doge.png">
+                    </mwc-tab>
+                    <mwc-tab label="Digibyte" hasImageIcon minWidth @click="${(e) => this.tabWalletDgb()}">
+                        <img slot="icon" width="24px" height="24px" src="/img/dgb.png">
+                    </mwc-tab>
+                    <mwc-tab label="Ravencoin" hasImageIcon minWidth @click="${(e) => this.tabWalletRvn()}">
+                        <img slot="icon" width="24px" height="24px" src="/img/rvn.png">
+                    </mwc-tab>
+                    <mwc-tab label="Pirate Chain" hasImageIcon minWidth @click="${(e) => this.tabWalletArrr()}">
+                        <img slot="icon" width="24px" height="24px" src="/img/arrr.png">
+                    </mwc-tab>
+                </mwc-tab-bar>
+
                 <div class="transactions-wrapper">
                     <h2 class="wallet-header">
                         ${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 {
                 </vaadin-grid-column>
                 <vaadin-grid-column
                     auto-width
-                    header="${translate("walletpage.wchange50")}"
+                    header="${translate("walletpage.wchange57")}"
                     .renderer=${(root, column, data) => {
                         render(html`${data.item.memo}`, root)
                     }}
@@ -5347,7 +5331,6 @@ class MultiWallet extends LitElement {
         })
     }
 
-
     isEmptyArray(arr) {
         if (!arr) {
             return true