name and avatar to sponsorship list

qortal-ui-plugins/plugins/core/sponsorship-list/sponsorship-list-css.src.js

@@ -13,6 +13,13 @@ export const pageStyles = css`
 		font-weight: 400;
 		text-align: center;
 	}
+	.avatar-img {
+		border-radius: 50%;
+	
+    height: 20px;
+    width: 20px;
+	margin-right: 10px;
+	}
 	.divider {
 		color: #eee;
 		border-radius: 80%;
@@ -263,6 +270,17 @@ export const pageStyles = css`
 		color: var(--black);
 		word-break: break-all;
 		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.name-container {
+		text-align: center;
+		color: var(--black);
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 
 	.text {
@@ -385,6 +403,9 @@ export const pageStyles = css`
 			display: grid;
 			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 		}
+		.name-container {
+			justify-content: flex-start
+		}
 
 		.grid-item p {
 			text-decoration: none;

qortal-ui-plugins/plugins/core/sponsorship-list/sponsorship-list.src.js

@@ -142,7 +142,11 @@ class SponsorshipList extends LitElement {
 		this.saveToClipboard('Copied to clipboard')
 	}
 
-	
+	getApiKey() {
+        const apiNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
+        let apiKey = apiNode.apiKey;
+        return apiKey;
+    }
 
 	async atMount() {
 		
@@ -163,18 +167,34 @@ class SponsorshipList extends LitElement {
 			)
 
 			rewardShares = rewardShares.filter((rs) => rs.recipient !== address)
-
+			
 			const getAccountInfo = rewardShares.map(async (rs) => {
 				const addressInfo = await parentEpml.request("apiCall", {
 					type: "api",
 					url: `/addresses/${rs.recipient}`,
 				})
+
+				const getNames = await parentEpml.request("apiCall", {
+					type: "api",
+					url: `/names/address/${rs.recipient}`,
+				})
+				let url = ""
+				if(getNames?.length > 0 ){
+					const avatarNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
+				const avatarUrl = avatarNode.protocol + '://' + avatarNode.domain + ':' + avatarNode.port
+				const urlPic = `${avatarUrl}/arbitrary/THUMBNAIL/${getNames[0].name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`
+				url = urlPic
+				}
+				
+
+			
 				let blocksRemaining = this._levelUpBlocks(addressInfo)
 				blocksRemaining = +blocksRemaining > 0 ? +blocksRemaining : 0
 				return {
 					...addressInfo,
 					...rs,
-					
+					name: getNames?.length > 0 ? getNames[0].name : '',
+					url,
 					blocksRemaining: blocksRemaining,
 				}
 			})
@@ -192,7 +212,7 @@ class SponsorshipList extends LitElement {
 			}
 
 		} catch (error) {
-			
+			console.log({error})
 
 			this.isPageLoading = false
 		}
@@ -491,7 +511,7 @@ class SponsorshipList extends LitElement {
 					</div>
 					<div class="tableGrid table-header">
 						<div class="grid-item header">
-							<p>${translate("sponsorshipspage.schange2")}</p>
+							<p>${translate("settings.account")}</p>
 						</div>
 						<div class="grid-item header">
 							<p>${translate("walletprofile.blocksminted")}</p>
@@ -511,9 +531,19 @@ class SponsorshipList extends LitElement {
 								<ul class="tableGrid">
 									<li class="grid-item">
 									<p class="grid-item-text">
-											Account Address
+											Account
 										</p>
-										${sponsorship.address}
+										<div class="name-container">
+											${sponsorship?.name ? html`
+											<img  src=${sponsorship.url}
+										class="avatar-img"
+										onerror="this.src='/img/incognito.png'"
+										/>
+											` : ''}
+										
+										${sponsorship?.name || sponsorship.address}
+										</div>
+									
 									</li>
 									<li class="grid-item">
 									<p class="grid-item-text">