Add Avatar To Account Info

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

@@ -1,8 +1,13 @@
-import { LitElement, html, css } from 'lit-element'
-import { connect } from 'pwa-helpers'
-import { store } from '../../store.js'
+import { LitElement, html, css } from 'lit-element';
+import { connect } from 'pwa-helpers';
+import { store } from '../../store.js';
 
 class AccountView extends connect(store)(LitElement) {
+    static get properties() {
+        return {
+            accountInfo: { type: Object }
+        }
+    }
 
     static get styles() {
         return css`
@@ -21,8 +26,8 @@ class AccountView extends connect(store)(LitElement) {
             }
 
             .img-icon {
-                font-size: 150px;
                 display: block;
+                margin-top: 10px;
             }
 
             .content-box {
@@ -30,7 +35,6 @@ class AccountView extends connect(store)(LitElement) {
                 padding: 10px 25px;
                 text-align: left;
                 display: inline-block;
-                /* min-width: 350px; */
             }
 
             .title {
@@ -46,49 +50,61 @@ class AccountView extends connect(store)(LitElement) {
                 display: inline-block;
             }
 
-            .start-chat {
-                display: inline-flex;
-                flex-direction: column;
-                justify-content: center;
-                align-content: center;
-                border: none;
-                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;
+            #accountName {
+                margin: 0;
+                font-size: 24px;
+                font-weight:500;
+                display: inline-block;
+                width:100%;
             }
         `
     }
 
+    constructor() {
+        super()
+        this.accountInfo = { names: [], addressInfo: {} };
+    }
+
     render() {
         return html`
-                <div class="sub-main">
-                    <div class="center-box">
-                        <mwc-icon class="img-icon">account_circle</mwc-icon>
-                        <div class="content-box">
-                            <span class="title">Address: </span>
-                            <span class="value">${store.getState().app.selectedAddress.address}</span>
-                            <br/>
-                            <span class="title">Public Key: </span>
-                            <span class="value">${store.getState().app.selectedAddress.base58PublicKey}</span>
-                        </div>
+            <div class="sub-main">
+                <div class="center-box">
+                    <div class="img-icon">${this.getAvatar()}</div>
+                    <span id="accountName">
+                        ${this.accountInfo.names.length !== 0 ? this.accountInfo.names[0].name : 'No Registered Name'}
+                    </span>
+                    <div class="content-box">
+                        <span class="title">Address: </span>
+                        <span class="value">${store.getState().app.selectedAddress.address}</span>
+                        <br/>
+                        <span class="title">Public Key: </span>
+                        <span class="value">${store.getState().app.selectedAddress.base58PublicKey}</span>
                     </div>
                 </div>
+            </div>
         `
     }
 
     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;
     }
 }