diff --git a/core/font/switch-theme.css b/core/font/switch-theme.css index 7a0f6a9e..b7a342ba 100644 --- a/core/font/switch-theme.css +++ b/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"); } \ No newline at end of file diff --git a/core/src/components/app-view.js b/core/src/components/app-view.js index ff27a441..253472d2 100644 --- a/core/src/components/app-view.js +++ b/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) { - - @@ -598,6 +578,8 @@ class AppView extends connect(store)(LitElement) {
  
    
+ +
  
  
${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` -
-
-
- ` - await tickerTime(1000) - this.balanceTicker = html` -
-
- QORT ${translate("general.balance")}: ${this.qortWalletBalance} - BTC ${translate("general.balance")}: ${this.btcWalletBalance} - LTC ${translate("general.balance")}: ${this.ltcWalletBalance} - DOGE ${translate("general.balance")}: ${this.dogeWalletBalance} - DGB ${translate("general.balance")}: ${this.dgbWalletBalance} - RVN ${translate("general.balance")}: ${this.rvnWalletBalance} - ARRR ${translate("general.balance")}: ${this.arrrWalletBalance} -
-
- ` - 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 diff --git a/core/src/components/friends-view/core-sync-status.js b/core/src/components/friends-view/core-sync-status.js index 8ec00f68..9abc3e05 100644 --- a/core/src/components/friends-view/core-sync-status.js +++ b/core/src/components/friends-view/core-sync-status.js @@ -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` - lightbulb - - - - - `; + ${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` +
+ +
+

${translate("walletprofile.wp3")}

+

${translate("appinfo.coreversion")}: ${this.coreInfos.buildVersion ? (this.coreInfos.buildVersion).substring(0,12) : ''}

+

${translate("appinfo.synchronizing")}... ${this.nodeStatus.syncPercent !== undefined ? this.nodeStatus.syncPercent + '%' : ''}

+

${translate("appinfo.blockheight")}: ${this.nodeStatus.height ? this.nodeStatus.height : ''}

+

${translate("appinfo.peers")}: ${this.nodeStatus.numberOfConnections ? this.nodeStatus.numberOfConnections : ''}

+ +
+
+ ` + } else if (this.nodeStatus.isSynchronizing === false && this.nodeStatus.isMintingPossible === false) { + return html` +
+ +
+

${translate("walletprofile.wp3")}

+

${translate("appinfo.coreversion")}: ${this.coreInfos.buildVersion ? (this.coreInfos.buildVersion).substring(0,12) : ''}

+

${translate("walletprofile.wp4")} ${translate("walletprofile.wp2")}

+

${translate("appinfo.blockheight")}: ${this.nodeStatus.height ? this.nodeStatus.height : ''}

+

${translate("appinfo.peers")}: ${this.nodeStatus.numberOfConnections ? this.nodeStatus.numberOfConnections : ''}

+ +
+
+ ` + } else if (this.nodeStatus.isSynchronizing === false && this.nodeStatus.isMintingPossible === true) { + return html` +
+ +
+

${translate("walletprofile.wp3")}

+

${translate("appinfo.coreversion")}: ${this.coreInfos.buildVersion ? (this.coreInfos.buildVersion).substring(0,12) : ''}

+

${translate("walletprofile.wp4")} ( ${translate("walletprofile.wp1")} )

+

${translate("appinfo.blockheight")}: ${this.nodeStatus.height ? this.nodeStatus.height : ''}

+

${translate("appinfo.peers")}: ${this.nodeStatus.numberOfConnections ? this.nodeStatus.numberOfConnections : ''}

+ +
+
+ ` + } + } + + stateChanged(state) { + this.nodeStatus = state.app.nodeStatus + } } -customElements.define('core-sync-status', CoreSyncStatus); +customElements.define('core-sync-status', CoreSyncStatus) diff --git a/core/src/components/settings-view/account-view.js b/core/src/components/settings-view/account-view.js index 43aa9e1d..2e2e2b72 100644 --- a/core/src/components/settings-view/account-view.js +++ b/core/src/components/settings-view/account-view.js @@ -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,27 +90,47 @@ 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`` - } 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`` + 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`` + } else { + return html`` + } + } else if (this.switchAvatar === 'dark') { + if (Number.isNaN(numberBlocks) || numberBlocks == "" || numberBlocks === null) { + return html`` + } else { + return html`` + } } } + 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 } } -window.customElements.define('account-view', AccountView) +window.customElements.define('account-view', AccountView) \ No newline at end of file diff --git a/core/src/styles/switch-theme.css b/core/src/styles/switch-theme.css index 4d308e76..b7a342ba 100644 --- a/core/src/styles/switch-theme.css +++ b/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"); } \ No newline at end of file diff --git a/img/noavatar.png b/img/noavatar.png deleted file mode 100644 index 1bde9230..00000000 Binary files a/img/noavatar.png and /dev/null differ diff --git a/img/noavatar_dark.png b/img/noavatar_dark.png new file mode 100644 index 00000000..c48e426c Binary files /dev/null and b/img/noavatar_dark.png differ diff --git a/img/noavatar_light.png b/img/noavatar_light.png new file mode 100644 index 00000000..d72e9393 Binary files /dev/null and b/img/noavatar_light.png differ diff --git a/img/synced.png b/img/synced.png new file mode 100644 index 00000000..f944bad9 Binary files /dev/null and b/img/synced.png differ diff --git a/img/synced_minting.png b/img/synced_minting.png new file mode 100644 index 00000000..567e784b Binary files /dev/null and b/img/synced_minting.png differ diff --git a/img/syncing.png b/img/syncing.png new file mode 100644 index 00000000..82d39bbb Binary files /dev/null and b/img/syncing.png differ