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

Add Avatar To Account Info

Browse Source
This commit is contained in:
AlphaX-Projects 2022-01-20 13:46:01 +01:00 committed by GitHub
parent fd4a91367b
commit ef9c294557
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
qortal-ui-core/src/components/settings-view/account-view.js
View File

@ -1,8 +1,13 @@
import { LitElement, html, css } from 'lit-element' import { LitElement, html, css } from 'lit-element';
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers';
import { store } from '../../store.js' import { store } from '../../store.js';
class AccountView extends connect(store)(LitElement) { class AccountView extends connect(store)(LitElement) {
static get properties() {
return {
accountInfo: { type: Object }
}
}
static get styles() { static get styles() {
return css` return css`
@ -21,8 +26,8 @@ class AccountView extends connect(store)(LitElement) {
} }
.img-icon { .img-icon {
font-size: 150px;
display: block; display: block;
margin-top: 10px;
} }
.content-box { .content-box {
@ -30,7 +35,6 @@ class AccountView extends connect(store)(LitElement) {
padding: 10px 25px; padding: 10px 25px;
text-align: left; text-align: left;
display: inline-block; display: inline-block;
/* min-width: 350px; */
} }
.title { .title {
@ -46,49 +50,61 @@ class AccountView extends connect(store)(LitElement) {
display: inline-block; display: inline-block;
} }
.start-chat { #accountName {
display: inline-flex; margin: 0;
flex-direction: column; font-size: 24px;
justify-content: center; font-weight:500;
align-content: center; display: inline-block;
border: none; width:100%;
border-radius: 20px;
padding-left: 25px;
padding-right: 25px;
color: white;
background: #6a6c75;
width: 50%;
font-size: 17px;
cursor: pointer;
height: 50px;
margin-top: 1rem;
text-transform: uppercase;
text-decoration: none;
transition: all .2s;
position: relative;
} }
` `
} }
constructor() {
super()
this.accountInfo = { names: [], addressInfo: {} };
}
render() { render() {
return html` return html`
<div class="sub-main"> <div class="sub-main">
<div class="center-box"> <div class="center-box">
<mwc-icon class="img-icon">account_circle</mwc-icon> <div class="img-icon">${this.getAvatar()}</div>
<div class="content-box"> <span id="accountName">
<span class="title">Address: </span> ${this.accountInfo.names.length !== 0 ? this.accountInfo.names[0].name : 'No Registered Name'}
<span class="value">${store.getState().app.selectedAddress.address}</span> </span>
<br/> <div class="content-box">
<span class="title">Public Key: </span> <span class="title">Address: </span>
<span class="value">${store.getState().app.selectedAddress.base58PublicKey}</span> <span class="value">${store.getState().app.selectedAddress.address}</span>
</div> <br/>
<span class="title">Public Key: </span>
<span class="value">${store.getState().app.selectedAddress.base58PublicKey}</span>
</div> </div>
</div> </div>
</div>
` `
} }
stateChanged(state) { stateChanged(state) {
// ... this.accountInfo = state.app.accountInfo
}
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;">`
} 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?apiKey=${this.getApiKey()}`
return html`<img src="${url}" style="width:150px; height:150px;" onerror="this.onerror=null;this.src="/img/noavatar.png";">`
}
}
getApiKey() {
const apiNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node];
let apiKey = apiNode.apiKey;
return apiKey;
} }
} }