forked from Qortal/qortal-ui
New wallet menu
This commit is contained in:
AlphaX-Projects
parent
b83106d984
commit
dc3630ce06
@ -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`
|
||||
<div class="wrapper">
|
||||
<div class="wallet">
|
||||
<div style="font-size: 20px; color: var(--black); padding: 16px; border-bottom: 1px solid var(--border);">${translate("walletpage.wchange22")}</div>
|
||||
<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 class="header-title sans">
|
||||
${translate("walletpage.wchange22")}
|
||||
</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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user