Update Avatar, Core sync status and remove balance ticker

core/font/switch-theme.css

@@ -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");
 }

core/src/components/app-view.js

@@ -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
 

core/src/components/friends-view/core-sync-status.js

@@ -1,78 +1,160 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css } from 'lit'
-import '@material/mwc-icon';
+import { store } from '../../store'
-import { store } from '../../store';
+import { connect } from 'pwa-helpers'
-import { connect } from 'pwa-helpers';
+import { translate } from 'lit-translate'
-import '@vaadin/tooltip';
+
-import { get } from 'lit-translate';
 class CoreSyncStatus extends connect(store)(LitElement) {
 	static get properties() {
 		return {
-			nodeStatus: {type: Object}
+			nodeStatus: {type: Object},
-		};
+			coreInfos: { type: Array }
+		}
 	}
 
-
 	constructor() {
-		super();
+		super()
-		this.nodeStatus = {
+		this.nodeStatus = {}
-			isMintingPossible:false,
+		this.coreInfos = []
-isSynchronizing:true,
-syncPercent:undefined,
-numberOfConnections:undefined,
-height:undefined,
-		}
 	}
+
 	static styles = css`
-		.header {
+		.lineHeight {
-			display: flex;
+			line-height: 33%;
-			align-items: center;
-			justify-content: space-between;
-			padding: 16px;
-			border-bottom: 1px solid #e0e0e0;
 		}
 
-		.content {
+		.tooltip {
-			padding: 16px;
+			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;
+			opacity: 0;
-			z-index: -100;
+			transition: opacity 0.8s;
-			right: -1000px;
 		}
 
-		.parent-side-panel {
+		.tooltip:hover .bottom {
-			transform: translateX(100%); /* start from outside the right edge */
+			visibility: visible;
-    		transition: transform 0.3s ease-in-out;
+			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) {
+		.tooltip .bottom i::after {
-	this.nodeStatus = state.app.nodeStatus
+			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"
+			${this.renderSyncStatusIcon()}
-				>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>
-			
-			
-		`;
 	}
 
+	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)

core/src/components/settings-view/account-view.js

@@ -1,13 +1,14 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css } from 'lit'
-import { connect } from 'pwa-helpers';
+import { connect } from 'pwa-helpers'
-import { store } from '../../store.js';
+import { store } from '../../store.js'
-import { translate, translateUnsafeHTML } from 'lit-translate'
+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) {
+    firstUpdated() {
-        this.accountInfo = state.app.accountInfo
+        this.getSwitchAvatar()
+        setInterval(() => {
+             this.getSwitchAvatar()
+        }, 2000)
     }
 
     getAvatar() {
-        let numberBlocks = (this.accountInfo.addressInfo.blocksMinted + this.accountInfo.addressInfo.blocksMintedAdjustment);
+        const avatarNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
-        if (Number.isNaN(numberBlocks) || numberBlocks == "" || numberBlocks === null) {
+        const avatarUrl = avatarNode.protocol + '://' + avatarNode.domain + ':' + avatarNode.port
-            return html`<img src="/img/noavatar.png" style="width:150px; height:150px; border-radius: 50%;">`
+        const url = `${avatarUrl}/arbitrary/THUMBNAIL/${this.accountInfo.names[0].name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`
-        } else {
+        const numberBlocks = (this.accountInfo.addressInfo.blocksMinted + this.accountInfo.addressInfo.blocksMintedAdjustment)
-            const avatarNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
+
-            const avatarUrl = avatarNode.protocol + '://' + avatarNode.domain + ':' + avatarNode.port
+        if (this.switchAvatar === 'light') {
-            const url = `${avatarUrl}/arbitrary/THUMBNAIL/${this.accountInfo.names[0].name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`
+            if (Number.isNaN(numberBlocks) || numberBlocks == "" || numberBlocks === null) {
-            return html`<img src="${url}" style="width:150px; height:150px; border-radius: 50%;" onerror="this.src='/img/noavatar.png';">`
+               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];
+        const apiNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
-        let apiKey = apiNode.apiKey;
+        let apiKey = apiNode.apiKey
-        return apiKey;
+        return apiKey
+    }
+
+    stateChanged(state) {
+        this.accountInfo = state.app.accountInfo
     }
 }
 

core/src/styles/switch-theme.css

@@ -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");
 }