Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-04-23 11:27:52 +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

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

@ -12,6 +12,7 @@ class WalletProfile extends connect(store)(LitElement) {
wallet: { type: Object }, wallet: { type: Object },
nodeConfig: { type: Object }, nodeConfig: { type: Object },
accountInfo: { type: Object }, accountInfo: { type: Object },
imageUrl: { type: String },
theme: { type: String, reflect: true } theme: { type: String, reflect: true }
} }
} }
@ -30,6 +31,7 @@ class WalletProfile extends connect(store)(LitElement) {
names: [], names: [],
addressInfo: {} addressInfo: {}
} }
this.imageUrl = ''
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
} }
@ -42,32 +44,27 @@ class WalletProfile extends connect(store)(LitElement) {
background: var(--sidetopbar); background: var(--sidetopbar);
color: var(--black); color: var(--black);
} }
#profileInMenu:hover { #profileInMenu:hover {
} }
#accountIcon { #accountIcon {
font-size:48px; font-size:48px;
color: var(--mdc-theme-primary); color: var(--mdc-theme-primary);
display: inline-block; display: inline-block;
} }
#accountName { #accountName {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
font-weight:500; font-weight:500;
display: inline-block;
width:100%; width:100%;
padding-bottom:8px; padding-bottom:8px;
display: flex;
} }
#blocksMinted { #blocksMinted {
margin:0; margin:0;
margin-top: 0; margin-top: 0;
font-size: 11px; font-size: 12px;
color: #03a9f4; color: #03a9f4;
} }
#address { #address {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -76,16 +73,32 @@ class WalletProfile extends connect(store)(LitElement) {
margin-top:8px; margin-top:8px;
font-size:11px; 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> </style>
<div id="profileInMenu"> <div id="profileInMenu">
<div style="padding: 8px 0;"> <div style="padding: 8px 0;">
<span id="accountName"> <div id="accountName">
${this.accountInfo.names.length !== 0 ? this.accountInfo.names[0].name : ''} <div id="child inline-block-child" class="full-info-logo">${this.getAvatar()}</div>
</span> &nbsp;&nbsp;&nbsp;
${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="inline-block-child">
<p id="blocksMinted">${translate("walletprofile.blocksminted")} - ${this.accountInfo.addressInfo.blocksMinted + this.accountInfo.addressInfo.blocksMintedAdjustment}</p> <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> <p id="address">${this.wallet.addresses[0].address}</p>
</div> </div>
</div> </div>
@ -106,6 +119,23 @@ class WalletProfile extends connect(store)(LitElement) {
this.toast = container.appendChild(toast) 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) { stateChanged(state) {
this.wallet = state.app.wallet this.wallet = state.app.wallet
this.nodeConfig = state.app.nodeConfig this.nodeConfig = state.app.nodeConfig