Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-04-24 20:07:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #118 from Pigpig105/wallet-profile-update

Browse Source 
Add avatar to wallet-profile
This commit is contained in:
QuickMythril 2023-04-14 01:04:40 -04:00 committed by GitHub
commit 4bcbabdeca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
qortal-ui-core/src/components/wallet-profile.js
View File

@ -12,6 +12,7 @@ class WalletProfile extends connect(store)(LitElement) {
wallet: { type: Object },
nodeConfig: { type: Object },
accountInfo: { type: Object },
imageUrl: { type: String },
theme: { type: String, reflect: true }
}
}
@ -30,6 +31,7 @@ class WalletProfile extends connect(store)(LitElement) {
names: [],
addressInfo: {}
}
this.imageUrl = ''
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
}
@ -42,32 +44,27 @@ class WalletProfile extends connect(store)(LitElement) {
background: var(--sidetopbar);
color: var(--black);
}
#profileInMenu:hover {
}
#accountIcon {
font-size:48px;
color: var(--mdc-theme-primary);
display: inline-block;
}
#accountName {
margin: 0;
font-size: 18px;
font-weight:500;
display: inline-block;
width:100%;
padding-bottom:8px;
display: flex;
}
#blocksMinted {
margin:0;
margin-top: 0;
font-size: 11px;
font-size: 12px;
color: #03a9f4;
}
#address {
white-space: nowrap;
overflow: hidden;
@ -76,16 +73,32 @@ class WalletProfile extends connect(store)(LitElement) {
margin-top:8px;
font-size:11px;
}
.round-fullinfo {
position: relative;
width: 68px;
height: 68px;
border-radius: 50%;
}
.full-info-logo {
width: 68px;
height: 68px;
border-radius: 50%;
}
.inline-block-child {
flex: 1;
}
</style>
<div id="profileInMenu">
<div style="padding: 8px 0;">
<span id="accountName">
${this.accountInfo.names.length !== 0 ? this.accountInfo.names[0].name : ''}
</span>
${this.accountInfo.addressInfo ? html`<span style="margin-bottom: 8px; display: inline-block; font-size: 14px;">${translate("walletprofile.minterlevel")} - <span style="color: #03a9f4;">${this.accountInfo.addressInfo.level} ${this.accountInfo.addressInfo.flags === 1 ? html`<strong>(F)</strong>` : ''}</span>` : ''}
<div id="accountName">
<div id="child inline-block-child" class="full-info-logo">${this.getAvatar()}</div>
&nbsp;&nbsp;&nbsp;
<div id="inline-block-child">
<div>${this.accountInfo.names.length !== 0 ? this.accountInfo.names[0].name : ''}</div>
<div>${this.accountInfo.addressInfo ? html`<span style="margin-bottom: 8px; display: inline-block; font-size: 14px;">${translate("walletprofile.minterlevel")} - <span style="color: #03a9f4;">${this.accountInfo.addressInfo.level} ${this.accountInfo.addressInfo.flags === 1 ? html`<strong>(F)</strong>` : ''}</span>` : ''}</div>
<p id="blocksMinted">${translate("walletprofile.blocksminted")} - ${this.accountInfo.addressInfo.blocksMinted + this.accountInfo.addressInfo.blocksMintedAdjustment}</p>
</div>
</div>
<p id="address">${this.wallet.addresses[0].address}</p>
</div>
</div>
@ -106,6 +119,23 @@ class WalletProfile extends connect(store)(LitElement) {
this.toast = container.appendChild(toast)
}
async getAllWithAddress(myAddress) {
await this.getAddressUserAvatar(myAddress)
}
getAvatar() {
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 class="round-fullinfo" src="${url}" onerror="this.src='/img/incognito.png';" />`
}
getApiKey() {
const apiNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node];
let apiKey = apiNode.apiKey;
return apiKey;
}
stateChanged(state) {
this.wallet = state.app.wallet
this.nodeConfig = state.app.nodeConfig