mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-08-01 14:41:24 +00:00
Merge branch 'master' into feature/tour
This commit is contained in:
AlphaX-Projects
GitHub
679
plugins/plugins/core/trade-bot/trade-bot-portal-css.js
Normal file
679
plugins/plugins/core/trade-bot/trade-bot-portal-css.js
Normal file
@@ -0,0 +1,679 @@
|
||||
import {css} from 'lit'
|
||||
|
||||
export const tradebotStyles = css`
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
--mdc-theme-error: rgb(255, 89, 89);
|
||||
--mdc-text-field-outlined-idle-border-color: var(--txtfieldborder);
|
||||
--mdc-text-field-outlined-hover-border-color: var(--txtfieldhoverborder);
|
||||
--mdc-text-field-label-ink-color: var(--black);
|
||||
--mdc-text-field-ink-color: var(--black);
|
||||
--mdc-select-outlined-idle-border-color: var(--txtfieldborder);
|
||||
--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);
|
||||
--mdc-dialog-shape-radius: 25px;
|
||||
--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);
|
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
|
||||
--lumo-primary-color: hsl(199, 100%, 48%);
|
||||
--lumo-base-color: var(--white);
|
||||
--lumo-body-text-color: var(--black);
|
||||
--lumo-secondary-text-color: var(--sectxt);
|
||||
--lumo-contrast-60pct: var(--vdicon);
|
||||
--_lumo-grid-border-color: var(--border);
|
||||
--_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);
|
||||
--mdc-tab-text-label-color-default: var(--black);
|
||||
}
|
||||
|
||||
#tabs-1 {
|
||||
--mdc-tab-height: 42px;
|
||||
border-left: 1px solid var(--tradeborder);
|
||||
border-top: 1px solid var(--tradeborder);
|
||||
border-right: 1px solid var(--tradeborder);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
#tab-buy[active] {
|
||||
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
|
||||
}
|
||||
|
||||
#tabs-1-content {
|
||||
height: 100%;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#tabs-1-content>div {
|
||||
height: 100%;
|
||||
border: 1px solid var(--tradeborder);
|
||||
}
|
||||
|
||||
#tabs-1-content .card {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#tabs-1-content .btn-clear {
|
||||
--mdc-icon-button-size: 32px;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.btn-clear-bot {
|
||||
--mdc-icon-button-size: 32px;
|
||||
color: var(--black);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
color: #03a9f4;
|
||||
--mdc-icon-size: 16px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
#tab-sell[active] {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
|
||||
#trade-portal-page {
|
||||
background: var(--white);
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.divCard {
|
||||
border: 1px solid var(--black);
|
||||
padding: 1em;
|
||||
box-shadow: 0 0.3px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
background-color: var(--white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
background-color: var(--white);
|
||||
border-radius: 5px;
|
||||
color: var(--black);
|
||||
padding-top: 30px;
|
||||
position: relative;
|
||||
width: 350px;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-container .level {
|
||||
color: #ffffff;
|
||||
background-color: #03a9f4;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 3px 7px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.card-container .founder {
|
||||
color: #ffffff;
|
||||
background-color: #03a9f4;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 3px 7px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.card-container .round {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border: 1px solid #03a9f4;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.card-container .badge {
|
||||
width: 200px;
|
||||
height: 135px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10%;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.userdata {
|
||||
background-color: #1F1A36;
|
||||
text-align: left;
|
||||
padding: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.userdata ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.userdata ul li {
|
||||
border: 1px solid #2D2747;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin: 0 7px 7px 0;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: var(--black);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0px 10px;
|
||||
font-size: 16px;
|
||||
color: var(--white);
|
||||
background-color: var(--tradehead);
|
||||
border-left: 1px solid var(--tradeborder);
|
||||
border-top: 1px solid var(--tradeborder);
|
||||
border-right: 1px solid var(--tradeborder);
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#trade-portal {
|
||||
max-width: 100vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.box-bot {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#first-trade-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#first-trade-section>div {}
|
||||
|
||||
#second-trade-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#second-trade-section>div {}
|
||||
|
||||
#third-trade-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#third-trade-section>div {}
|
||||
|
||||
.trade-chart {
|
||||
background-color: var(--white);
|
||||
border: 2px #ddd solid;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.open-trades {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.open-market-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.trade-bot-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-last-seen {
|
||||
background: rgb(255, 89, 89);
|
||||
padding: 9px 1.3px;
|
||||
border-radius: 50%;
|
||||
width: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1em;
|
||||
border: 1px var(--tradeborder) solid;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-evenly;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.card-bot {
|
||||
padding: 1em;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-evenly;
|
||||
width: 350px;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
|
||||
.border-wrapper {
|
||||
border: 1px var(--tradeborder) solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.amt-text {
|
||||
color: var(--tradehave);
|
||||
font-size: 15px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.exchange {
|
||||
color: var(--black);
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.clear-button {
|
||||
display: inline;
|
||||
float: right;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.exhcnage-text {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.balance-text {
|
||||
display: inline;
|
||||
float: right;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.fee-text {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
color: var(--tradehave);
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
margin-top: 2px;
|
||||
margin-bottom: -12px;
|
||||
}
|
||||
|
||||
.historic-trades {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my-open-orders {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my-historic-trades {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.buy-button {
|
||||
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
|
||||
}
|
||||
|
||||
.sell-button {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
|
||||
.trade-bot-button {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
|
||||
}
|
||||
|
||||
.full-width {
|
||||
background-color: var(--white);
|
||||
border: 2px var(--black);
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
vaading-grid {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
vaadin-grid-column {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.loadingContainer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.loading:after {
|
||||
border-radius: 50%;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin: 10px auto;
|
||||
border-width: .6em;
|
||||
border-style: solid;
|
||||
border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0px);
|
||||
animation: 1.1s linear 0s infinite normal none running loadingAnimation;
|
||||
}
|
||||
|
||||
mwc-select#coinSelectionMenu {
|
||||
font-size: 24px;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
mwc-select#coinSelectionMenu mwc-list-item {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.coinName::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
width: 45px;
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.btc.coinName:before {
|
||||
background-image: url('/img/qortbtc.png');
|
||||
}
|
||||
|
||||
.ltc.coinName:before {
|
||||
background-image: url('/img/qortltc.png');
|
||||
}
|
||||
|
||||
.doge.coinName:before {
|
||||
background-image: url('/img/qortdoge.png');
|
||||
}
|
||||
|
||||
.dgb.coinName:before {
|
||||
background-image: url('/img/qortdgb.png');
|
||||
}
|
||||
|
||||
.rvn.coinName:before {
|
||||
background-image: url('/img/qortrvn.png');
|
||||
}
|
||||
|
||||
.arrr.coinName:before {
|
||||
background-image: url('/img/qortarrr.png');
|
||||
}
|
||||
|
||||
.coinName {
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
animation: blinker 1.5s linear infinite;
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
color: rgb(255, 89, 89);
|
||||
}
|
||||
|
||||
.warning-bot-text {
|
||||
animation: blinker 1.5s linear infinite;
|
||||
display: inline;
|
||||
text-align: center;
|
||||
color: rgb(255, 89, 89);
|
||||
}
|
||||
|
||||
.red {
|
||||
--mdc-theme-primary: #F44336;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
paper-dialog.info {
|
||||
width: 75%;
|
||||
max-width: 75vw;
|
||||
height: 50%;
|
||||
max-height: 50vh;
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 15px;
|
||||
line-height: 1.6;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 1em;
|
||||
margin: 12px 0 -6px 0;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.close-icon:hover {
|
||||
cursor: pointer;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.setpass-wrapper {
|
||||
width: 100%;
|
||||
min-width: 400px;
|
||||
max-width: 450px;
|
||||
text-align: center;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 15px;
|
||||
padding: 10px 10px 0px;
|
||||
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.lock-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 600px;
|
||||
max-width: 600px;
|
||||
min-height: 400px;
|
||||
max-height: 400px;
|
||||
text-align: center;
|
||||
background: url("/img/qortal-lock.jpg");
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 25px;
|
||||
padding: 10px 10px 0px;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 280px;
|
||||
max-width: 280px;
|
||||
min-height: 64px;
|
||||
max-height: 64px;
|
||||
text-align: center;
|
||||
margin-left: 35px;
|
||||
margin-top: 125px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lock-title-white {
|
||||
font-family: 'magistralbold';
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.lock-title-red {
|
||||
font-family: 'magistralbold';
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
color: #df3636;
|
||||
}
|
||||
|
||||
@media (min-width: 701px) {
|
||||
* {}
|
||||
|
||||
#trade-bot-portal {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 4fr 2fr;
|
||||
grid-auto-rows: max(80px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#first-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-auto-rows: max(250px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#second-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-auto-rows: max(250px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#third-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-auto-rows: max(150px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#fourth-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-auto-rows: max(150px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -5,6 +5,7 @@ import isElectron from 'is-electron'
|
||||
import {get, registerTranslateConfig, translate, use} from '../../../../core/translate/index.js'
|
||||
import Base58 from '../../../../crypto/api/deps/Base58.js'
|
||||
import {decryptData, encryptData} from '../../../../core/src/lockScreen.js'
|
||||
import {tradebotStyles} from './trade-bot-portal-css.js'
|
||||
import '@material/mwc-button'
|
||||
import '@material/mwc-textfield'
|
||||
import '@material/mwc-icon'
|
||||
@@ -38,7 +39,6 @@ class TradeBotPortal extends LitElement {
|
||||
config: { type: Object },
|
||||
listedCoins: { type: Map },
|
||||
blockedTradesList: { type: Array },
|
||||
preparedPresence: { type: Array },
|
||||
tradesPresenceCleaned: { type: Array },
|
||||
sellBtnDisable: { type: Boolean },
|
||||
isSellLoading: { type: Boolean },
|
||||
@@ -95,600 +95,7 @@ class TradeBotPortal extends LitElement {
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
--mdc-theme-error: rgb(255, 89, 89);
|
||||
--mdc-text-field-outlined-idle-border-color: var(--txtfieldborder);
|
||||
--mdc-text-field-outlined-hover-border-color: var(--txtfieldhoverborder);
|
||||
--mdc-text-field-label-ink-color: var(--black);
|
||||
--mdc-text-field-ink-color: var(--black);
|
||||
--mdc-select-outlined-idle-border-color: var(--txtfieldborder);
|
||||
--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);
|
||||
--mdc-dialog-shape-radius: 25px;
|
||||
--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);
|
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
|
||||
--lumo-primary-color: hsl(199, 100%, 48%);
|
||||
--lumo-base-color: var(--white);
|
||||
--lumo-body-text-color: var(--black);
|
||||
--lumo-secondary-text-color: var(--sectxt);
|
||||
--lumo-contrast-60pct: var(--vdicon);
|
||||
--_lumo-grid-border-color: var(--border);
|
||||
--_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);
|
||||
--mdc-tab-text-label-color-default: var(--black);
|
||||
}
|
||||
#tabs-1 {
|
||||
--mdc-tab-height: 42px;
|
||||
border-left: 1px solid var(--tradeborder);
|
||||
border-top: 1px solid var(--tradeborder);
|
||||
border-right: 1px solid var(--tradeborder);
|
||||
color: var(--black);
|
||||
}
|
||||
#tab-buy[active] {
|
||||
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
|
||||
}
|
||||
#tabs-1-content {
|
||||
height: 100%;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#tabs-1-content > div {
|
||||
height: 100%;
|
||||
border: 1px solid var(--tradeborder);
|
||||
}
|
||||
#tabs-1-content .card {
|
||||
border: none;
|
||||
}
|
||||
#tabs-1-content .btn-clear {
|
||||
--mdc-icon-button-size: 32px;
|
||||
color: var(--black);
|
||||
}
|
||||
.btn-clear-bot {
|
||||
--mdc-icon-button-size: 32px;
|
||||
color: var(--black);
|
||||
float: right;
|
||||
}
|
||||
.btn-info {
|
||||
color: #03a9f4;
|
||||
--mdc-icon-size: 16px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
#tab-sell[active] {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
#trade-portal-page {
|
||||
background: var(--white);
|
||||
padding: 12px 24px;
|
||||
}
|
||||
.divCard {
|
||||
border: 1px solid var(--black);
|
||||
padding: 1em;
|
||||
box-shadow: 0 0.3px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
h2 {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
background-color: var(--white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
background-color: var(--white);
|
||||
border-radius: 5px;
|
||||
color: var(--black);
|
||||
padding-top: 30px;
|
||||
position: relative;
|
||||
width: 350px;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-container .level {
|
||||
color: #ffffff;
|
||||
background-color: #03a9f4;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 3px 7px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.card-container .founder {
|
||||
color: #ffffff;
|
||||
background-color: #03a9f4;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 3px 7px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.card-container .round {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border: 1px solid #03a9f4;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.card-container .badge {
|
||||
width: 200px;
|
||||
height: 135px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10%;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.userdata {
|
||||
background-color: #1F1A36;
|
||||
text-align: left;
|
||||
padding: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.userdata ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.userdata ul li {
|
||||
border: 1px solid #2D2747;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin: 0 7px 7px 0;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: var(--black);
|
||||
font-weight: 400;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0px 10px;
|
||||
font-size: 16px;
|
||||
color: var(--white);
|
||||
background-color: var(--tradehead);
|
||||
border-left: 1px solid var(--tradeborder);
|
||||
border-top: 1px solid var(--tradeborder);
|
||||
border-right: 1px solid var(--tradeborder);
|
||||
min-height: 40px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#trade-portal {
|
||||
max-width: 100vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
.box-bot {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 150px;
|
||||
}
|
||||
#first-trade-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#first-trade-section > div {
|
||||
}
|
||||
#second-trade-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#second-trade-section > div {
|
||||
}
|
||||
#third-trade-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#third-trade-section > div {
|
||||
}
|
||||
.trade-chart {
|
||||
background-color: var(--white);
|
||||
border: 2px #ddd solid;
|
||||
text-align: center;
|
||||
}
|
||||
.open-trades {
|
||||
text-align: center;
|
||||
}
|
||||
.open-market-container {
|
||||
text-align: center;
|
||||
}
|
||||
.trade-bot-container {
|
||||
text-align: center;
|
||||
}
|
||||
.no-last-seen {
|
||||
background: rgb(255, 89, 89);
|
||||
padding: 9px 1.3px;
|
||||
border-radius: 50%;
|
||||
width: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.card {
|
||||
padding: 1em;
|
||||
border: 1px var(--tradeborder) solid;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-evenly;
|
||||
min-height: inherit;
|
||||
}
|
||||
.card-bot {
|
||||
padding: 1em;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-evenly;
|
||||
width: 350px;
|
||||
min-height: inherit;
|
||||
}
|
||||
.cancel {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
.border-wrapper {
|
||||
border: 1px var(--tradeborder) solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
.amt-text {
|
||||
color: var(--tradehave);
|
||||
font-size: 15px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.exchange {
|
||||
color: var(--black);
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.clear-button {
|
||||
display: inline;
|
||||
float: right;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.exhcnage-text {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.balance-text {
|
||||
display: inline;
|
||||
float: right;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.fee-text {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.tab-text {
|
||||
color: var(--tradehave);
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
margin-top: 2px;
|
||||
margin-bottom: -12px;
|
||||
}
|
||||
.historic-trades {
|
||||
text-align: center;
|
||||
}
|
||||
.my-open-orders {
|
||||
text-align: center;
|
||||
}
|
||||
.my-historic-trades {
|
||||
text-align: center;
|
||||
}
|
||||
.buttons {
|
||||
width: auto !important;
|
||||
}
|
||||
.buy-button {
|
||||
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
|
||||
}
|
||||
.sell-button {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
.trade-bot-button {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
|
||||
}
|
||||
.full-width {
|
||||
background-color: var(--white);
|
||||
border: 2px var(--black);
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
vaading-grid {
|
||||
font-size: .8em;
|
||||
}
|
||||
vaadin-grid-column {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.loadingContainer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.loading,
|
||||
.loading:after {
|
||||
border-radius: 50%;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
.loading {
|
||||
margin: 10px auto;
|
||||
border-width: .6em;
|
||||
border-style: solid;
|
||||
border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0px);
|
||||
animation: 1.1s linear 0s infinite normal none running loadingAnimation;
|
||||
}
|
||||
mwc-select#coinSelectionMenu {
|
||||
font-size: 24px;
|
||||
width:220px;
|
||||
}
|
||||
mwc-select#coinSelectionMenu mwc-list-item {
|
||||
line-height: 30px;
|
||||
}
|
||||
.coinName::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
width: 45px;
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
.btc.coinName:before {
|
||||
background-image: url('/img/qortbtc.png');
|
||||
}
|
||||
.ltc.coinName:before {
|
||||
background-image: url('/img/qortltc.png');
|
||||
}
|
||||
.doge.coinName:before {
|
||||
background-image: url('/img/qortdoge.png');
|
||||
}
|
||||
.dgb.coinName:before {
|
||||
background-image: url('/img/qortdgb.png');
|
||||
}
|
||||
.rvn.coinName:before {
|
||||
background-image: url('/img/qortrvn.png');
|
||||
}
|
||||
.arrr.coinName:before {
|
||||
background-image: url('/img/qortarrr.png');
|
||||
}
|
||||
.coinName {
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
padding-left: 45px;
|
||||
}
|
||||
.warning-text {
|
||||
animation: blinker 1.5s linear infinite;
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
color: rgb(255, 89, 89);
|
||||
}
|
||||
.warning-bot-text {
|
||||
animation: blinker 1.5s linear infinite;
|
||||
display: inline;
|
||||
text-align: center;
|
||||
color: rgb(255, 89, 89);
|
||||
}
|
||||
.red {
|
||||
--mdc-theme-primary: #F44336;
|
||||
}
|
||||
@-webkit-keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
paper-dialog.info {
|
||||
width: 75%;
|
||||
max-width: 75vw;
|
||||
height: 50%;
|
||||
max-height: 50vh;
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 15px;
|
||||
line-height: 1.6;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.actions {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 1em;
|
||||
margin: 12px 0 -6px 0;
|
||||
}
|
||||
.close-icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
.close-icon:hover {
|
||||
cursor: pointer;
|
||||
opacity: .6;
|
||||
}
|
||||
.setpass-wrapper {
|
||||
width: 100%;
|
||||
min-width: 400px;
|
||||
max-width: 450px;
|
||||
text-align: center;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 15px;
|
||||
padding: 10px 10px 0px;
|
||||
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.lock-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 600px;
|
||||
max-width: 600px;
|
||||
min-height: 400px;
|
||||
max-height: 400px;
|
||||
text-align: center;
|
||||
background: url("/img/qortal-lock.jpg");
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 25px;
|
||||
padding: 10px 10px 0px;
|
||||
}
|
||||
.text-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 280px;
|
||||
max-width: 280px;
|
||||
min-height: 64px;
|
||||
max-height: 64px;
|
||||
text-align: center;
|
||||
margin-left: 35px;
|
||||
margin-top: 125px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lock-title-white {
|
||||
font-family: 'magistralbold';
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.lock-title-red {
|
||||
font-family: 'magistralbold';
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
color: #df3636;
|
||||
}
|
||||
@media (min-width: 701px) {
|
||||
* {
|
||||
}
|
||||
#trade-bot-portal {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 4fr 2fr;
|
||||
grid-auto-rows: max(80px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#first-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-auto-rows: max(250px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#second-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-auto-rows: max(250px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#third-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-auto-rows: max(150px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#fourth-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-auto-rows: max(150px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
`
|
||||
return [tradebotStyles]
|
||||
}
|
||||
|
||||
constructor() {
|
||||
@@ -851,7 +258,6 @@ class TradeBotPortal extends LitElement {
|
||||
this.selectedAddress = {}
|
||||
this.config = {}
|
||||
this.blockedTradesList = []
|
||||
this.preparedPresence = []
|
||||
this.tradesPresenceCleaned = []
|
||||
this.sellBtnDisable = false
|
||||
this.isSellLoading = false
|
||||
@@ -3827,9 +3233,22 @@ class TradeBotPortal extends LitElement {
|
||||
if (!message.isRestarted) this.processTradeBotStates(JSON.parse(message.data))
|
||||
return null
|
||||
case 'PRESENCE':
|
||||
this.tradesPresenceCleaned = []
|
||||
this.listedCoins.get(message.data.relatedCoin).openOrders = message.data.offers
|
||||
this.preparedPresence = message.data.filteredOffers
|
||||
this.filterPresenceTrades()
|
||||
this.tradesPresenceCleaned = message.data.filteredOffers
|
||||
|
||||
const filterPresenceList = () => {
|
||||
this.blockedTradesList.forEach(item => {
|
||||
const toDelete = item.recipient
|
||||
this.tradesPresenceCleaned = this.tradesPresenceCleaned.filter(el => {
|
||||
return el.qortalCreatorTradeAddress !== toDelete
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
filterPresenceList()
|
||||
this.listedCoins.get(message.data.relatedCoin).openFilteredOrders = this.tradesPresenceCleaned
|
||||
this.reRenderOpenFilteredOrders()
|
||||
return null
|
||||
default:
|
||||
break
|
||||
@@ -3893,24 +3312,6 @@ class TradeBotPortal extends LitElement {
|
||||
|
||||
await filterUnconfirmedTransactionsList()
|
||||
}
|
||||
|
||||
async filterPresenceTrades() {
|
||||
this.tradesPresenceCleaned = this.preparedPresence
|
||||
|
||||
const filterPresenceList = async () => {
|
||||
this.blockedTradesList.forEach(item => {
|
||||
const toDelete = item.recipient
|
||||
this.tradesPresenceCleaned = this.tradesPresenceCleaned.filter(el => {
|
||||
return el.qortalCreatorTradeAddress !== toDelete
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
await filterPresenceList()
|
||||
|
||||
this.listedCoins.get(this.selectedCoin).openFilteredOrders = this.tradesPresenceCleaned
|
||||
this.reRenderOpenFilteredOrders()
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('trade-bot-portal', TradeBotPortal)
|
||||
@@ -48,7 +48,6 @@ class TradePortal extends LitElement {
|
||||
listedCoins: { type: Map },
|
||||
nodeInfo: { type: Array },
|
||||
blockedTradesList: { type: Array },
|
||||
preparedPresence: { type: Array },
|
||||
tradesPresenceCleaned: { type: Array },
|
||||
sellBtnDisable: { type: Boolean },
|
||||
isSellLoading: { type: Boolean },
|
||||
@@ -2644,9 +2643,22 @@ class TradePortal extends LitElement {
|
||||
if (!message.isRestarted) this.processTradeBotStates(JSON.parse(message.data))
|
||||
return null
|
||||
case 'PRESENCE':
|
||||
this.tradesPresenceCleaned = []
|
||||
this.listedCoins.get(message.data.relatedCoin).openOrders = message.data.offers
|
||||
this.preparedPresence = message.data.filteredOffers
|
||||
this.filterPresenceTrades()
|
||||
this.tradesPresenceCleaned = message.data.filteredOffers
|
||||
|
||||
const filterPresenceList = () => {
|
||||
this.blockedTradesList.forEach(item => {
|
||||
const toDelete = item.recipient
|
||||
this.tradesPresenceCleaned = this.tradesPresenceCleaned.filter(el => {
|
||||
return el.qortalCreatorTradeAddress !== toDelete
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
filterPresenceList()
|
||||
this.listedCoins.get(message.data.relatedCoin).openFilteredOrders = this.tradesPresenceCleaned
|
||||
this.reRenderOpenFilteredOrders()
|
||||
return null
|
||||
default:
|
||||
break
|
||||
@@ -2712,24 +2724,6 @@ class TradePortal extends LitElement {
|
||||
await filterUnconfirmedTransactionsList()
|
||||
}
|
||||
|
||||
async filterPresenceTrades() {
|
||||
this.tradesPresenceCleaned = this.preparedPresence
|
||||
|
||||
const filterPresenceList = async () => {
|
||||
this.blockedTradesList.forEach(item => {
|
||||
const toDelete = item.recipient
|
||||
this.tradesPresenceCleaned = this.tradesPresenceCleaned.filter(el => {
|
||||
return el.qortalCreatorTradeAddress !== toDelete
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
await filterPresenceList()
|
||||
|
||||
this.listedCoins.get(this.selectedCoin).openFilteredOrders = this.tradesPresenceCleaned
|
||||
this.reRenderOpenFilteredOrders()
|
||||
}
|
||||
|
||||
handleStuckTrades() {
|
||||
let tradeBotStates = []
|
||||
|
||||
|
||||
@@ -606,12 +606,6 @@ class MultiWallet extends LitElement {
|
||||
width: 185px;
|
||||
}
|
||||
|
||||
.unused-pos {
|
||||
margin-top: -44px;
|
||||
margin-left: 410px;
|
||||
width: 185px;
|
||||
}
|
||||
|
||||
@media (max-width: 863px) {
|
||||
.wallet {
|
||||
width: 100%;
|
||||
@@ -980,9 +974,6 @@ class MultiWallet extends LitElement {
|
||||
<div class="book-pos" ?hidden="${this.getSelectedWalletAddress().length < 1}">
|
||||
${this.renderAddressbookButton()}
|
||||
</div>
|
||||
<div class="unused-pos" ?hidden="${this.getSelectedWalletAddress().length < 1}">
|
||||
${this.renderUnusedAddressButton()}
|
||||
</div>
|
||||
<div class="qrcode-pos" ?hidden="${this.getSelectedWalletAddress().length < 1}">
|
||||
<qortal-qrcode-generator data="${this.getSelectedWalletAddress()}" mode="octet" format="html" auto></qortal-qrcode-generator>
|
||||
</div>
|
||||
@@ -2158,171 +2149,6 @@ class MultiWallet extends LitElement {
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
|
||||
<mwc-dialog id="btcUnusedAddressDialog" scrimClickAction="" escapeKeyAction="">
|
||||
<div class="unused-address-dialog">
|
||||
<div style="text-align: center;">
|
||||
<img src="/img/btc.png" width="32" height="32">
|
||||
<h2>BTC</h2>
|
||||
<hr />
|
||||
</div>
|
||||
<p>
|
||||
<span style="font-weight: bold;">${this.wallets.get(this._selectedWallet).unusedWalletAddress}</span>
|
||||
<button-icon-copy
|
||||
title="${translate("walletpage.wchange3")}"
|
||||
onSuccessMessage="${translate("walletpage.wchange4")}"
|
||||
onErrorMessage="${translate("walletpage.wchange39")}"
|
||||
textToCopy=${this.wallets.get(this._selectedWallet).unusedWalletAddress}
|
||||
buttonSize="24px"
|
||||
iconSize="16px"
|
||||
color="var(--copybutton)"
|
||||
offsetLeft="4px"
|
||||
>
|
||||
</button-icon-copy>
|
||||
<br />
|
||||
<span>${translate("walletpage.wchange38")}</span>
|
||||
</p>
|
||||
</div>
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
dialogAction="cancel"
|
||||
class="red"
|
||||
>
|
||||
${translate("general.close")}
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
|
||||
<mwc-dialog id="ltcUnusedAddressDialog" scrimClickAction="" escapeKeyAction="">
|
||||
<div class="unused-address-dialog">
|
||||
<div style="text-align: center;">
|
||||
<img src="/img/ltc.png" width="32" height="32">
|
||||
<h2>LTC</h2>
|
||||
<hr />
|
||||
</div>
|
||||
<p>
|
||||
<span style="font-weight: bold;">${this.wallets.get(this._selectedWallet).unusedWalletAddress}</span>
|
||||
<button-icon-copy
|
||||
title="${translate("walletpage.wchange3")}"
|
||||
onSuccessMessage="${translate("walletpage.wchange4")}"
|
||||
onErrorMessage="${translate("walletpage.wchange39")}"
|
||||
textToCopy=${this.wallets.get(this._selectedWallet).unusedWalletAddress}
|
||||
buttonSize="24px"
|
||||
iconSize="16px"
|
||||
color="var(--copybutton)"
|
||||
offsetLeft="4px"
|
||||
>
|
||||
</button-icon-copy>
|
||||
<br />
|
||||
<span>${translate("walletpage.wchange38")}</span>
|
||||
</p>
|
||||
</div>
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
dialogAction="cancel"
|
||||
class="red"
|
||||
>
|
||||
${translate("general.close")}
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
|
||||
<mwc-dialog id="dogeUnusedAddressDialog" scrimClickAction="" escapeKeyAction="">
|
||||
<div class="unused-address-dialog">
|
||||
<div style="text-align: center;">
|
||||
<img src="/img/doge.png" width="32" height="32">
|
||||
<h2>DOGE</h2>
|
||||
<hr />
|
||||
</div>
|
||||
<p>
|
||||
<span style="font-weight: bold;">${this.wallets.get(this._selectedWallet).unusedWalletAddress}</span>
|
||||
<button-icon-copy
|
||||
title="${translate("walletpage.wchange3")}"
|
||||
onSuccessMessage="${translate("walletpage.wchange4")}"
|
||||
onErrorMessage="${translate("walletpage.wchange39")}"
|
||||
textToCopy=${this.wallets.get(this._selectedWallet).unusedWalletAddress}
|
||||
buttonSize="24px"
|
||||
iconSize="16px"
|
||||
color="var(--copybutton)"
|
||||
offsetLeft="4px"
|
||||
>
|
||||
</button-icon-copy>
|
||||
<br />
|
||||
<span>${translate("walletpage.wchange38")}</span>
|
||||
</p>
|
||||
</div>
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
dialogAction="cancel"
|
||||
class="red"
|
||||
>
|
||||
${translate("general.close")}
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
|
||||
<mwc-dialog id="dgbUnusedAddressDialog" scrimClickAction="" escapeKeyAction="">
|
||||
<div class="unused-address-dialog">
|
||||
<div style="text-align: center;">
|
||||
<img src="/img/dgb.png" width="32" height="32">
|
||||
<h2>DGB</h2>
|
||||
<hr />
|
||||
</div>
|
||||
<p>
|
||||
<span style="font-weight: bold;">${this.wallets.get(this._selectedWallet).unusedWalletAddress}</span>
|
||||
<button-icon-copy
|
||||
title="${translate("walletpage.wchange3")}"
|
||||
onSuccessMessage="${translate("walletpage.wchange4")}"
|
||||
onErrorMessage="${translate("walletpage.wchange39")}"
|
||||
textToCopy=${this.wallets.get(this._selectedWallet).unusedWalletAddress}
|
||||
buttonSize="24px"
|
||||
iconSize="16px"
|
||||
color="var(--copybutton)"
|
||||
offsetLeft="4px"
|
||||
>
|
||||
</button-icon-copy>
|
||||
<br />
|
||||
<span>${translate("walletpage.wchange38")}</span>
|
||||
</p>
|
||||
</div>
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
dialogAction="cancel"
|
||||
class="red"
|
||||
>
|
||||
${translate("general.close")}
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
|
||||
<mwc-dialog id="rvnUnusedAddressDialog" scrimClickAction="" escapeKeyAction="">
|
||||
<div class="unused-address-dialog">
|
||||
<div style="text-align: center;">
|
||||
<img src="/img/rvn.png" width="32" height="32">
|
||||
<h2>RVN</h2>
|
||||
<hr />
|
||||
</div>
|
||||
<p>
|
||||
<span style="font-weight: bold;">${this.wallets.get(this._selectedWallet).unusedWalletAddress}</span>
|
||||
<button-icon-copy
|
||||
title="${translate("walletpage.wchange3")}"
|
||||
onSuccessMessage="${translate("walletpage.wchange4")}"
|
||||
onErrorMessage="${translate("walletpage.wchange39")}"
|
||||
textToCopy=${this.wallets.get(this._selectedWallet).unusedWalletAddress}
|
||||
buttonSize="24px"
|
||||
iconSize="16px"
|
||||
color="var(--copybutton)"
|
||||
offsetLeft="4px"
|
||||
>
|
||||
</button-icon-copy>
|
||||
<br />
|
||||
<span>${translate("walletpage.wchange38")}</span>
|
||||
</p>
|
||||
</div>
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
dialogAction="cancel"
|
||||
class="red"
|
||||
>
|
||||
${translate("general.close")}
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
|
||||
<mwc-dialog id="addQortAddressDialog" scrimClickAction="" escapeKeyAction="">
|
||||
<div style="text-align:center">
|
||||
<img src="/img/qort.png" width="32" height="32">
|
||||
@@ -5009,70 +4835,6 @@ class MultiWallet extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
async getUnusedAddress(coin) {
|
||||
this.wallets.get(this._selectedWallet).unusedWalletAddress = ''
|
||||
let _url = ``
|
||||
let _body = null
|
||||
|
||||
switch (coin) {
|
||||
case 'qort':
|
||||
case 'arrr':
|
||||
_url = ``
|
||||
_body = null
|
||||
break
|
||||
case 'btc':
|
||||
case 'ltc':
|
||||
case 'doge':
|
||||
case 'dgb':
|
||||
case 'rvn':
|
||||
const walletName = `${coin}Wallet`
|
||||
_url = `/crosschain/${coin}/unusedaddress?apiKey=${this.getApiKey()}`
|
||||
_body = `${window.parent.reduxStore.getState().app.selectedAddress[walletName].derivedMasterPublicKey}`
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
if (_body === null) {
|
||||
this.unusedAddressString = ""
|
||||
} else {
|
||||
await parentEpml.request('apiCall', {
|
||||
url: _url,
|
||||
method: 'POST',
|
||||
body: _body,
|
||||
}).then((res) => {
|
||||
this.wallets.get(this._selectedWallet).unusedWalletAddress = res
|
||||
this.unusedAddressString = this.wallets.get(this._selectedWallet).unusedWalletAddress
|
||||
this.openUnusedAddressDialog(coin)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
openUnusedAddressDialog(coin) {
|
||||
switch (coin) {
|
||||
case 'qort':
|
||||
case 'arrr':
|
||||
break
|
||||
case 'btc':
|
||||
this.shadowRoot.querySelector("#btcUnusedAddressDialog").show();
|
||||
break
|
||||
case 'ltc':
|
||||
this.shadowRoot.querySelector("#ltcUnusedAddressDialog").show();
|
||||
break
|
||||
case 'doge':
|
||||
this.shadowRoot.querySelector("#dogeUnusedAddressDialog").show();
|
||||
break
|
||||
case 'dgb':
|
||||
this.shadowRoot.querySelector("#dgbUnusedAddressDialog").show();
|
||||
break
|
||||
case 'rvn':
|
||||
this.shadowRoot.querySelector("#rvnUnusedAddressDialog").show();
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
renderSendButton() {
|
||||
if ( this._selectedWallet === "qort" ) {
|
||||
return html`<vaadin-button theme="primary medium" style="width: 100%;" @click=${() => this.openSendQort()}><vaadin-icon icon="vaadin:coin-piles" slot="prefix"></vaadin-icon> ${translate("walletpage.wchange17")} QORT</vaadin-button>`
|
||||
@@ -5113,22 +4875,6 @@ class MultiWallet extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
renderUnusedAddressButton() {
|
||||
switch (this._selectedWallet) {
|
||||
case "qort":
|
||||
case "arrr":
|
||||
return html`<vaadin-button disabled theme="primary medium" style="width: 100%;" @click=${() => this.getUnusedAddress(this._selectedWallet)}><vaadin-icon icon="vaadin:magic" slot="prefix"></vaadin-icon> ${translate("walletpage.wchange58")}</vaadin-button>`
|
||||
case "btc":
|
||||
case "ltc":
|
||||
case "doge":
|
||||
case "dgb":
|
||||
case "rvn":
|
||||
return html`<vaadin-button theme="primary medium" style="width: 100%;" @click=${() => this.getUnusedAddress(this._selectedWallet)}><vaadin-icon icon="vaadin:magic" slot="prefix"></vaadin-icon> ${translate("walletpage.wchange58")}</vaadin-button>`
|
||||
default:
|
||||
return html``
|
||||
}
|
||||
}
|
||||
|
||||
renderExportAddressbookButton() {
|
||||
if ( this._selectedWallet === "qort" ) {
|
||||
return html`<vaadin-button theme="primary small" style="width: 100%;" @click=${() => this.exportQortAddressbook()}><vaadin-icon icon="vaadin:cloud-download" slot="prefix"></vaadin-icon> ${translate("walletpage.wchange54")}</vaadin-button>`
|
||||
|
||||
Reference in New Issue
Block a user