qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update Avatar, Core sync status and remove balance ticker

Browse Source
This commit is contained in:
AlphaX-Projects 2023-11-05 13:54:59 +01:00
parent 66c270163c
commit c12f7859b5
11 changed files with 183 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/font/switch-theme.css
View File

@ -65,6 +65,7 @@ html {
--app-icon: #ffffff;
--app-hr: rgba(0, 0, 0, .3);
--code-block-text-color: #008fd5;
--noavatar: url("/img/noavatar_light.png");
}
html[theme="dark"] {
@ -134,4 +135,5 @@ html[theme="dark"] {
--app-icon: #03a9f4;
--app-hr: rgba(255, 255, 255, .3);
--code-block-text-color: #008fd5;
--noavatar: url("/img/noavatar_dark.png");
}

84
core/src/components/app-view.js
View File

@ -57,7 +57,6 @@ class AppView extends connect(store)(LitElement) {
nodeType: { type: String, reflect: true },
theme: { type: String, reflect: true },
addressInfo: { type: Object },
getAllBalancesLoading: { type: Boolean },
botQortWallet: { type: String },
botBtcWallet: { type: String },
botLtcWallet: { type: String },
@ -447,7 +446,6 @@ class AppView extends connect(store)(LitElement) {
this.urls = []
this.nodeType = ''
this.addressInfo = {}
this.getAllBalancesLoading = false
this.botQortWallet = ''
this.botBtcWallet = ''
this.botLtcWallet = ''
@ -553,24 +551,6 @@ class AppView extends connect(store)(LitElement) {
</side-menu>
</div>
</div>
<button class="balanceButton" @click="${() => this.shBalanceTicker()}">${translate("grouppage.gchange59")}</button>
<div id="theTicker" style="display: none; margin-bottom: 20px;">
<div id="balanceheader">
<span class="balanceheadertext">
${this.getAllBalancesLoading ? html`
${translate("general.update")}
` : html`
${translate("general.balances")}
<vaadin-button theme="icon" id="reload" @click="${() => this.getAllBalances()}">
<vaadin-icon icon="vaadin:refresh"></vaadin-icon>
</vaadin-button>
<vaadin-tooltip text="${translate("general.update")}" for="reload" position="top"></vaadin-tooltip>
`}
</span>
</div>
${this.getAllBalancesLoading ? html`<paper-progress indeterminate style="width: 100%; margin: 4px;"></paper-progress>` : ''}
${this.balanceTicker}
</div>
<app-info></app-info>
</div>
</app-header-layout>
@ -598,6 +578,8 @@ class AppView extends connect(store)(LitElement) {
<div>&nbsp;&nbsp;</div>
<language-selector></language-selector>
<div>&nbsp;&nbsp;&nbsp;&nbsp;</div>
<core-sync-status></core-sync-status>
<div>&nbsp;&nbsp;</div>
<theme-toggle></theme-toggle>
<div>&nbsp;&nbsp;</div>
${this.renderLockButton()}
@ -752,8 +734,6 @@ class AppView extends connect(store)(LitElement) {
this.botRvnWallet = store.getState().app.selectedAddress.rvnWallet.address
this.botArrrWallet = store.getState().app.selectedAddress.arrrWallet.address
await this.getAllBalances()
await this.botBtcTradebook()
await this.botLtcTradebook()
await this.botDogeTradebook()
@ -770,8 +750,6 @@ class AppView extends connect(store)(LitElement) {
this.tradeBotArrrBook = JSON.parse(localStorage.getItem(this.botArrrWallet) || "[]")
})
this.renderBalances()
const getOpenTradesBTC = async () => {
let timerBTC
@ -1802,15 +1780,6 @@ class AppView extends connect(store)(LitElement) {
}, 60000)
}
shBalanceTicker() {
const targetDiv = this.shadowRoot.getElementById("theTicker")
if (targetDiv.style.display !== "none") {
targetDiv.style.display = "none"
} else {
targetDiv.style.display = "inline"
}
}
clearTheCache() {
if (!isElectron()) {
} else {
@ -2093,55 +2062,6 @@ class AppView extends connect(store)(LitElement) {
}
}
async getAllBalances() {
this.getAllBalancesLoading = true
await this.updateQortWalletBalance()
await this.updateBtcWalletBalance()
await this.updateLtcWalletBalance()
await this.updateDogeWalletBalance()
await this.updateDgbWalletBalance()
await this.updateRvnWalletBalance()
await this.fetchArrrWalletAddress()
await this.updateArrrWalletBalance()
this.getAllBalancesLoading = false
}
async renderBalances() {
const tickerTime = ms => new Promise(res => setTimeout(res, ms))
clearTimeout(this.updateBalancesTimeout)
this.balanceTicker = html`
<div id="balances">
<div class="balancelist"></div>
</div>
`
await tickerTime(1000)
this.balanceTicker = html`
<div id="balances">
<div class="balancelist">
<span class="balanceinfo qort">QORT ${translate("general.balance")}: ${this.qortWalletBalance}</span>
<span class="balanceinfo btc">BTC ${translate("general.balance")}: ${this.btcWalletBalance}</span>
<span class="balanceinfo ltc">LTC ${translate("general.balance")}: ${this.ltcWalletBalance}</span>
<span class="balanceinfo doge">DOGE ${translate("general.balance")}: ${this.dogeWalletBalance}</span>
<span class="balanceinfo dgb">DGB ${translate("general.balance")}: ${this.dgbWalletBalance}</span>
<span class="balanceinfo rvn">RVN ${translate("general.balance")}: ${this.rvnWalletBalance}</span>
<span class="balanceinfo arrr">ARRR ${translate("general.balance")}: ${this.arrrWalletBalance}</span>
</div>
</div>
`
this.updateBalancesTimeout = setTimeout(() => this.renderBalances(), 45000)
}
async fetchArrrWalletAddress() {
let res = await parentEpml.request('apiCall', {
url: `/crosschain/arrr/walletaddress?apiKey=${this.getApiKey()}`,
method: 'POST',
body: `${store.getState().app.selectedAddress.arrrWallet.seed58}`,
})
if (res != null && res.error != 1201) {
this.arrrWalletAddress = res
}
}
async updateQortWalletBalance() {
let qortAddress = store.getState().app.selectedAddress.address

186
core/src/components/friends-view/core-sync-status.js
View File

@ -1,78 +1,160 @@
import { LitElement, html, css } from 'lit';
import '@material/mwc-icon';
import { store } from '../../store';
import { connect } from 'pwa-helpers';
import '@vaadin/tooltip';
import { get } from 'lit-translate';
import { LitElement, html, css } from 'lit'
import { store } from '../../store'
import { connect } from 'pwa-helpers'
import { translate } from 'lit-translate'
class CoreSyncStatus extends connect(store)(LitElement) {
static get properties() {
return {
nodeStatus: {type: Object}
};
nodeStatus: {type: Object},
coreInfos: { type: Array }
}
}
constructor() {
super();
this.nodeStatus = {
isMintingPossible:false,
isSynchronizing:true,
syncPercent:undefined,
numberOfConnections:undefined,
height:undefined,
}
super()
this.nodeStatus = {}
this.coreInfos = []
}
static styles = css`
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid #e0e0e0;
.lineHeight {
line-height: 33%;
}
.content {
padding: 16px;
.tooltip {
display: inline-block;
position: relative;
text-align: left;
}
.close {
.tooltip .bottom {
min-width: 200px;
max-width: 250px;
top: 35px;
left: 50%;
transform: translate(-50%, 0);
padding: 10px 10px;
color: var(--black);
background-color: var(--white);
font-weight: normal;
font-size: 13px;
border-radius: 8px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
box-shadow: 0 1px 8px rgba(0,0,0,0.5);
border: 1px solid var(--black);
visibility: hidden;
position: fixed;
z-index: -100;
right: -1000px;
opacity: 0;
transition: opacity 0.8s;
}
.parent-side-panel {
transform: translateX(100%); /* start from outside the right edge */
transition: transform 0.3s ease-in-out;
.tooltip:hover .bottom {
visibility: visible;
opacity: 1;
}
.parent-side-panel.open {
transform: translateX(0); /* slide in to its original position */
.tooltip .bottom i {
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -12px;
width: 24px;
height: 12px;
overflow: hidden;
}
`;
stateChanged(state) {
this.nodeStatus = state.app.nodeStatus
}
.tooltip .bottom i::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: 50%;
transform: translate(-50%,50%) rotate(45deg);
background-color: var(--white);
border: 1px solid var(--black);
box-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
`
render() {
return html`
<mwc-icon id="icon" style="color: ${this.nodeStatus.syncPercent === 100 ? 'green': 'red'};user-select:none;margin-right:20px"
>lightbulb</mwc-icon
>
<vaadin-tooltip
for="icon"
position="bottom"
hover-delay=${400}
hide-delay=${1}
text=${this.nodeStatus.syncPercent === 100 ? get('notifications.status1'): get('notifications.status2')}>
</vaadin-tooltip>
`;
${this.renderSyncStatusIcon()}
`
}
firstUpdated() {
this.getCoreInfos()
setInterval(() => {
this.getCoreInfos()
}, 60000)
}
async getCoreInfos() {
const corInfo = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
const coreInfoUrl = corInfo.protocol + '://' + corInfo.domain + ':' + corInfo.port
const infoUrl = `${coreInfoUrl}/admin/info`
await fetch(infoUrl).then(response => {
return response.json()
}).then(data => {
this.coreInfos = data
}).catch(err => {
})
}
renderSyncStatusIcon() {
if (this.nodeStatus.isSynchronizing === true) {
return html`
<div class="tooltip" style="display: inline;">
<span><img src="/img/syncing.png" style="height: 24px; width: 24px; padding-top: 4px;"></span>
<div class="bottom">
<h3>${translate("walletprofile.wp3")}</h3>
<h4 class="lineHeight">${translate("appinfo.coreversion")}: <span style="color: #03a9f4">${this.coreInfos.buildVersion ? (this.coreInfos.buildVersion).substring(0,12) : ''}</span></h4>
<h4 class="lineHeight">${translate("appinfo.synchronizing")}... <span style="color: #03a9f4">${this.nodeStatus.syncPercent !== undefined ? this.nodeStatus.syncPercent + '%' : ''}</span></h4>
<h4 class="lineHeight">${translate("appinfo.blockheight")}: <span style="color: #03a9f4">${this.nodeStatus.height ? this.nodeStatus.height : ''}</span></h4>
<h4 class="lineHeight">${translate("appinfo.peers")}: <span style="color: #03a9f4">${this.nodeStatus.numberOfConnections ? this.nodeStatus.numberOfConnections : ''}</span></h4>
<i></i>
</div>
</div>
`
} else if (this.nodeStatus.isSynchronizing === false && this.nodeStatus.isMintingPossible === false) {
return html`
<div class="tooltip" style="display: inline;">
<span><img src="/img/synced.png" style="height: 24px; width: 24px; padding-top: 4px;"></span>
<div class="bottom">
<h3>${translate("walletprofile.wp3")}</h3>
<h4 class="lineHeight">${translate("appinfo.coreversion")}: <span style="color: #03a9f4">${this.coreInfos.buildVersion ? (this.coreInfos.buildVersion).substring(0,12) : ''}</span></h4>
<h4 class="lineHeight">${translate("walletprofile.wp4")} ${translate("walletprofile.wp2")}</h4>
<h4 class="lineHeight">${translate("appinfo.blockheight")}: <span style="color: #03a9f4">${this.nodeStatus.height ? this.nodeStatus.height : ''}</span></h4>
<h4 class="lineHeight">${translate("appinfo.peers")}: <span style="color: #03a9f4">${this.nodeStatus.numberOfConnections ? this.nodeStatus.numberOfConnections : ''}</span></h4>
<i></i>
</div>
</div>
`
} else if (this.nodeStatus.isSynchronizing === false && this.nodeStatus.isMintingPossible === true) {
return html`
<div class="tooltip" style="display: inline;">
<span><img src="/img/synced_minting.png" style="height: 24px; width: 24px; padding-top: 4px;"></span>
<div class="bottom">
<h3>${translate("walletprofile.wp3")}</h3>
<h4 class="lineHeight">${translate("appinfo.coreversion")}: <span style="color: #03a9f4">${this.coreInfos.buildVersion ? (this.coreInfos.buildVersion).substring(0,12) : ''}</span></h4>
<h4 class="lineHeight">${translate("walletprofile.wp4")} <span style="color: #03a9f4">( ${translate("walletprofile.wp1")} )</span></h4>
<h4 class="lineHeight">${translate("appinfo.blockheight")}: <span style="color: #03a9f4">${this.nodeStatus.height ? this.nodeStatus.height : ''}</span></h4>
<h4 class="lineHeight">${translate("appinfo.peers")}: <span style="color: #03a9f4">${this.nodeStatus.numberOfConnections ? this.nodeStatus.numberOfConnections : ''}</span></h4>
<i></i>
</div>
</div>
`
}
}
stateChanged(state) {
this.nodeStatus = state.app.nodeStatus
}
}
customElements.define('core-sync-status', CoreSyncStatus);
customElements.define('core-sync-status', CoreSyncStatus)

58
core/src/components/settings-view/account-view.js
View File

@ -1,13 +1,14 @@
import { LitElement, html, css } from 'lit';
import { connect } from 'pwa-helpers';
import { store } from '../../store.js';
import { translate, translateUnsafeHTML } from 'lit-translate'
import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers'
import { store } from '../../store.js'
import { translate } from 'lit-translate'
class AccountView extends connect(store)(LitElement) {
static get properties() {
return {
accountInfo: { type: Object },
theme: { type: String, reflect: true }
theme: { type: String, reflect: true },
switchAvatar: { type: String }
}
}
@ -66,6 +67,7 @@ class AccountView extends connect(store)(LitElement) {
super()
this.accountInfo = { names: [], addressInfo: {} }
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
this.switchAvatar = ''
}
render() {
@ -88,26 +90,46 @@ class AccountView extends connect(store)(LitElement) {
`
}
stateChanged(state) {
this.accountInfo = state.app.accountInfo
firstUpdated() {
this.getSwitchAvatar()
setInterval(() => {
this.getSwitchAvatar()
}, 2000)
}
getAvatar() {
let numberBlocks = (this.accountInfo.addressInfo.blocksMinted + this.accountInfo.addressInfo.blocksMintedAdjustment);
if (Number.isNaN(numberBlocks) || numberBlocks == "" || numberBlocks === null) {
return html`<img src="/img/noavatar.png" style="width:150px; height:150px; border-radius: 50%;">`
} else {
const avatarNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
const avatarUrl = avatarNode.protocol + '://' + avatarNode.domain + ':' + avatarNode.port
const url = `${avatarUrl}/arbitrary/THUMBNAIL/${this.accountInfo.names[0].name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`
return html`<img src="${url}" style="width:150px; height:150px; border-radius: 50%;" onerror="this.src='/img/noavatar.png';">`
const avatarNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
const avatarUrl = avatarNode.protocol + '://' + avatarNode.domain + ':' + avatarNode.port
const url = `${avatarUrl}/arbitrary/THUMBNAIL/${this.accountInfo.names[0].name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`
const numberBlocks = (this.accountInfo.addressInfo.blocksMinted + this.accountInfo.addressInfo.blocksMintedAdjustment)
if (this.switchAvatar === 'light') {
if (Number.isNaN(numberBlocks) || numberBlocks == "" || numberBlocks === null) {
return html`<img src="/img/noavatar_light.png" style="width:150px; height:150px; border-radius: 25%;">`
} else {
return html`<img src="${url}" style="width:150px; height:150px; border-radius: 25%;" onerror="this.src='/img/noavatar_light.png';">`
}
} else if (this.switchAvatar === 'dark') {
if (Number.isNaN(numberBlocks) || numberBlocks == "" || numberBlocks === null) {
return html`<img src="/img/noavatar_dark.png" style="width:150px; height:150px; border-radius: 25%;">`
} else {
return html`<img src="${url}" style="width:150px; height:150px; border-radius: 25%;" onerror="this.src='/img/noavatar_dark.png';">`
}
}
}
getSwitchAvatar() {
this.switchAvatar = localStorage.getItem('qortalTheme')
}
getApiKey() {
const apiNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node];
let apiKey = apiNode.apiKey;
return apiKey;
const apiNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
let apiKey = apiNode.apiKey
return apiKey
}
stateChanged(state) {
this.accountInfo = state.app.accountInfo
}
}

4
core/src/styles/switch-theme.css
View File

@ -64,6 +64,8 @@ html {
--app-background-2: #09c6f9;
--app-icon: #ffffff;
--app-hr: rgba(0, 0, 0, .3);
--code-block-text-color: #008fd5;
--noavatar: url("/img/noavatar_light.png");
}
html[theme="dark"] {
@ -132,4 +134,6 @@ html[theme="dark"] {
--app-background-2: #0d324d;
--app-icon: #03a9f4;
--app-hr: rgba(255, 255, 255, .3);
--code-block-text-color: #008fd5;
--noavatar: url("/img/noavatar_dark.png");
}

BIN
img/noavatar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

BIN
img/noavatar_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
img/noavatar_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
img/synced.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/synced_minting.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/syncing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB