add friend in profile link

core/language/us.json

@@ -1249,6 +1249,8 @@
 		"profile21": "Insert address from UI",
 		"profile22": "Success",
 		"profile23": "encrypted",
-		"profile24": "You must fill out both field name and field value to add a custom property"
+		"profile24": "You must fill out both field name and field value to add a custom property",
+		"profile25": "Is your friend",
+		"profile26": "Add as friend"
 	}
 }

core/src/components/friends-view/friend-item-actions.js

@@ -40,7 +40,7 @@ export class FriendItemActions extends connect(store)(LitElement) {
 			transition: all 0.3s ease-in-out;
 			display: flex;
 			align-items: center;
-			gap: 10px
+			gap: 10px;
 		}
 
 		.send-message-button:hover {
@@ -64,7 +64,7 @@ export class FriendItemActions extends connect(store)(LitElement) {
 			message: { type: String },
 			openEditFriend: { attribute: false },
 			name: { type: String },
-			closeSidePanel: {attribute: false, type: Object}
+			closeSidePanel: { attribute: false, type: Object },
 		};
 	}
 
@@ -73,7 +73,7 @@ export class FriendItemActions extends connect(store)(LitElement) {
 		this.message = '';
 		this.nodeUrl = this.getNodeUrl();
 		this.uid = new ShortUniqueId();
-        this.getUserAddress = this.getUserAddress.bind(this)
+		this.getUserAddress = this.getUserAddress.bind(this);
 	}
 	getNodeUrl() {
 		const myNode =
@@ -93,7 +93,7 @@ export class FriendItemActions extends connect(store)(LitElement) {
 	attachToTarget(target) {
 		if (!this.popperInstance && target) {
 			this.popperInstance = createPopper(target, this, {
-				placement: 'bottom'
+				placement: 'bottom',
 			});
 		}
 	}
@@ -151,9 +151,7 @@ export class FriendItemActions extends connect(store)(LitElement) {
 							this.closePopover();
 						}}"
 					>
-					<mwc-icon style="color: var(--black)"
+						<mwc-icon style="color: var(--black)">edit</mwc-icon>
-						>edit</mwc-icon
-					>
 						${translate('friends.friend10')}
 					</div>
 					<div
@@ -185,17 +183,15 @@ export class FriendItemActions extends connect(store)(LitElement) {
 									type: 'openPrivateChat',
 									data: {
 										address,
-                                        name: this.name
+										name: this.name,
 									},
 								})
 							);
 							this.closePopover();
-							this.closeSidePanel()
+							this.closeSidePanel();
 						}}"
 					>
-					<mwc-icon style="color: var(--black)"
+						<mwc-icon style="color: var(--black)">send</mwc-icon>
-						>send</mwc-icon
-					>
 						${translate('friends.friend8')}
 					</div>
 					<div
@@ -220,13 +216,30 @@ export class FriendItemActions extends connect(store)(LitElement) {
 								})
 							);
 							this.closePopover();
-							this.closeSidePanel()
+							this.closeSidePanel();
+						}}"
+					>
+						<mwc-icon style="color: var(--black)">mail</mwc-icon>
+						${translate('friends.friend9')}
+					</div>
+					<div
+						class="send-message-button"
+						@click="${() => {
+							const customEvent = new CustomEvent(
+								'open-visiting-profile',
+								{
+									detail: this.name,
+								}
+							);
+							window.dispatchEvent(customEvent);
+							this.closePopover();
+							this.closeSidePanel();
 						}}"
 					>
 						<mwc-icon style="color: var(--black)"
-						>mail</mwc-icon
+							>person</mwc-icon
 						>
-						${translate('friends.friend9')}
+						${translate('profile.profile18')}
 					</div>
 				</div>
 			</div>

core/src/components/friends-view/friends-side-panel.js

@@ -11,7 +11,8 @@ class FriendsSidePanel extends LitElement {
 			isOpen: {type: Boolean},
 			selected: {type: String},
 			setHasNewFeed: {attribute: false},
-			closeSidePanel: {attribute: false, type: Object}
+			closeSidePanel: {attribute: false, type: Object},
+			openSidePanel: {attribute: false, type: Object}
 		};
 	}
 
@@ -19,6 +20,8 @@ class FriendsSidePanel extends LitElement {
 		super()
 		this.selected = 'friends'
 		this.closeSidePanel = this.closeSidePanel.bind(this)
+		this.openSidePanel = this.openSidePanel.bind(this)
+
 	}
 
 	static styles = css`
@@ -112,6 +115,9 @@ class FriendsSidePanel extends LitElement {
 	closeSidePanel(){
 		this.setIsOpen(false)
 	}
+	openSidePanel(){
+		this.setIsOpen(true)
+	}
 
 	render() {
 		return html`
@@ -133,7 +139,7 @@ class FriendsSidePanel extends LitElement {
 			</div>
 			<div class="content">
 				<div class="${this.selected === 'friends' ? 'active-content' : 'default-content'}">
-				<friends-view .closeSidePanel=${this.closeSidePanel} .refreshFeed=${()=>this.refreshFeed()}></friends-view>
+				<friends-view .openSidePanel=${this.openSidePanel} .closeSidePanel=${this.closeSidePanel} .refreshFeed=${()=>this.refreshFeed()}></friends-view>
 				</div>
 				<div class="${this.selected === 'feed' ? 'active-content' : 'default-content'}">
 				<friends-feed .setHasNewFeed=${(val)=> this.setHasNewFeed(val)}></friends-feed>

core/src/components/friends-view/friends-view.js

@@ -36,7 +36,8 @@ class FriendsView extends connect(store)(LitElement) {
 			editContent: {type: Object},
 			mySelectedFeeds: {type: Array},
 			refreshFeed: {attribute: false},
-			closeSidePanel: {attribute: false, type: Object}
+			closeSidePanel: {attribute: false, type: Object},
+			openSidePanel: {attribute:false, type: Object}
 		};
 	}
 	static get styles() {
@@ -65,6 +66,7 @@ class FriendsView extends connect(store)(LitElement) {
 		this.addToFriendList = this.addToFriendList.bind(this)
 		this._updateFriends = this._updateFriends.bind(this)
 		this._updateFeed = this._updateFeed.bind(this)
+		this._addFriend = this._addFriend.bind(this)
 
 	}
 
@@ -111,16 +113,35 @@ class FriendsView extends connect(store)(LitElement) {
         this.mySelectedFeeds = detail
 		this.requestUpdate()
 	}
+	_addFriend(event){
+		const name = event.detail;
+		const findFriend = this.friendList.find((friend)=> friend.name === name)
+		if(findFriend){
+			this.editContent = {...findFriend, mySelectedFeeds: this.mySelectedFeeds}
+			this.userSelected = findFriend;
+
+		} else {
+			this.userSelected = {
+				name
+			};
+		}
+		
+		this.isOpenAddFriendsModal = true
+		this.openSidePanel()
+	}
 
 	connectedCallback() {
 		super.connectedCallback()
 		window.addEventListener('friends-my-friend-list-event', this._updateFriends)
 		window.addEventListener('friends-my-selected-feeds-event', this._updateFeed)
+		window.addEventListener('add-friend', this._addFriend)
 	}
 
 	disconnectedCallback() {
 		window.removeEventListener('friends-my-friend-list-event', this._updateFriends)
 		window.addEventListener('friends-my-selected-feeds-event', this._updateFeed)
+		window.addEventListener('add-friend', this._addFriend)
+
 		super.disconnectedCallback()
 	}
 

core/src/components/friends-view/profile.js

@@ -21,7 +21,11 @@ import { publishData } from '../../../../plugins/plugins/utils/publish-image.js'
 import { parentEpml } from '../show-plugin.js';
 import '../notification-view/popover.js';
 import './avatar.js';
-import { setNewTab, setProfileData, setSideEffectAction } from '../../redux/app/app-actions.js';
+import {
+	setNewTab,
+	setProfileData,
+	setSideEffectAction,
+} from '../../redux/app/app-actions.js';
 import './profile-modal-update.js';
 import { modalHelper } from '../../../../plugins/plugins/utils/publish-modal.js';
 
@@ -45,7 +49,8 @@ class ProfileQdn extends connect(store)(LitElement) {
 			nameVisiting: { type: String },
 			hasName: { type: Boolean },
 			resourceExistsVisiting: { type: Boolean },
-			error: {type: String}
+			error: { type: String },
+			isFriend: { type: Boolean },
 		};
 	}
 
@@ -55,7 +60,7 @@ class ProfileQdn extends connect(store)(LitElement) {
 		this.getProfile = this.getProfile.bind(this);
 		this._handleQortalRequestSetData =
 			this._handleQortalRequestSetData.bind(this);
-		this._handleOpenVisiting = this._handleOpenVisiting.bind(this)
+		this._handleOpenVisiting = this._handleOpenVisiting.bind(this);
 		this.setValues = this.setValues.bind(this);
 		this.saveToQdn = this.saveToQdn.bind(this);
 		this.syncPercentage = 0;
@@ -75,18 +80,18 @@ class ProfileQdn extends connect(store)(LitElement) {
 		this.profileData = null;
 		this.qortalRequestCustomData = null;
 		this.imageUrl = '';
-		this.dialogOpenedProfile = false
+		this.dialogOpenedProfile = false;
 		this.profileDataVisiting = null;
-		this.nameVisiting = "";
+		this.nameVisiting = '';
 		this.hasName = false;
 		this.resourceExistsVisiting = undefined;
-		this.error = "";
+		this.error = '';
-		this.getUserAddress = this.getUserAddress.bind(this)
+		this.getUserAddress = this.getUserAddress.bind(this);
+		this.checkIfInFriendsList = this.checkIfInFriendsList.bind(this);
+		this.isFriend = undefined;
 	}
 	static styles = css`
-	
 		* {
-		
 			--mdc-theme-primary: rgb(3, 169, 244);
 			--mdc-theme-secondary: var(--mdc-theme-primary);
 			--mdc-theme-surface: var(--white);
@@ -94,7 +99,6 @@ class ProfileQdn extends connect(store)(LitElement) {
 			box-sizing: border-box;
 		}
 
-			
 		.header {
 			display: flex;
 			align-items: center;
@@ -217,7 +221,7 @@ class ProfileQdn extends connect(store)(LitElement) {
 			flex-shrink: 0;
 		}
 		.decline {
-                --mdc-theme-primary: var(--mdc-theme-error)
+			--mdc-theme-primary: var(--mdc-theme-error);
 		}
 
 		.warning {
@@ -276,7 +280,7 @@ class ProfileQdn extends connect(store)(LitElement) {
 			transition: all 0.2s;
 		}
 		.send-message-button:hover {
-			transform: scale(1.1)
+			transform: scale(1.1);
 		}
 	`;
 
@@ -334,7 +338,6 @@ class ProfileQdn extends connect(store)(LitElement) {
 		return ret;
 	}
 
-
 	async setValues(response, resource) {
 		if (response) {
 			let data = { ...response };
@@ -373,8 +376,9 @@ class ProfileQdn extends connect(store)(LitElement) {
 
 	async getVisitingProfile(name) {
 		try {
-			this.isLoadingVisitingProfile = true
+			this.isLoadingVisitingProfile = true;
-			this.nameVisiting = name
+			this.nameVisiting = name;
+			this.checkIfInFriendsList(this.nameVisiting);
 			const url = `${this.nodeUrl}/arbitrary/resources/search?service=DOCUMENT&identifier=qortal_profile&name=${name}&prefix=true&exactmatchnames=true&excludeblocked=true&limit=20`;
 			const res = await fetch(url);
 			let data = '';
@@ -391,7 +395,7 @@ class ProfileQdn extends connect(store)(LitElement) {
 						try {
 							const response = await this.getRawData(dataItem);
 							if (response.wallets) {
-								this.profileDataVisiting = response
+								this.profileDataVisiting = response;
 								// this.setValues(response, dataItem);
 							} else {
 								// this.error = 'Cannot get saved user settings';
@@ -412,36 +416,31 @@ class ProfileQdn extends connect(store)(LitElement) {
 					error: 'No resource found',
 				};
 			}
-
 		} catch (error) {
 			console.log({ error });
 		} finally {
-			this.isLoadingVisitingProfile = false
+			this.isLoadingVisitingProfile = false;
-
 		}
 	}
 
 	async getProfile() {
 		try {
-			this.error = ''
+			this.error = '';
 			const arbFee = await this.getArbitraryFee();
 			this.fee = arbFee;
 			this.hasAttemptedToFetchResource = true;
 			let resource;
 
-			let nameObject
+			let nameObject;
 			try {
 				nameObject = store.getState().app.accountInfo.names[0];
-
+			} catch (error) {}
-			} catch (error) {
-				
-			}
 			if (!nameObject) {
 				this.name = null;
-				this.error = 'no name'
+				this.error = 'no name';
 				throw new Error('no name');
 			}
-			this.hasName = true
+			this.hasName = true;
 			const name = nameObject.name;
 			this.name = name;
 			const url = `${this.nodeUrl}/arbitrary/resources/search?service=DOCUMENT&identifier=qortal_profile&name=${name}&prefix=true&exactmatchnames=true&excludeblocked=true&limit=20`;
@@ -505,7 +504,12 @@ class ProfileQdn extends connect(store)(LitElement) {
 			state.app.accountInfo &&
 			state.app.accountInfo.names.length &&
 			state.app.nodeStatus &&
-			state.app.nodeStatus.syncPercent === 100 && this.hasName === false && this.hasAttemptedToFetchResource && state.app.accountInfo && state.app.accountInfo.names && state.app.accountInfo.names.length > 0
+			state.app.nodeStatus.syncPercent === 100 &&
+			this.hasName === false &&
+			this.hasAttemptedToFetchResource &&
+			state.app.accountInfo &&
+			state.app.accountInfo.names &&
+			state.app.accountInfo.names.length > 0
 		) {
 			this.getProfile();
 		}
@@ -549,20 +553,23 @@ class ProfileQdn extends connect(store)(LitElement) {
 			const getArbitraryFee = await this.getArbitraryFee();
 			const feeAmount = getArbitraryFee.fee;
 
-			let newObject = structuredClone(data)
+			let newObject = structuredClone(data);
 
 			for (const key of Object.keys(newObject.customData || {})) {
 				if (key.includes('-private')) {
-					const dataKey = newObject.customData[key]
+					const dataKey = newObject.customData[key];
-					let isBase64 = false
+					let isBase64 = false;
 					try {
 						const decodedString = atob(dataKey);
-						isBase64 = decodedString.includes('qortalGroupEncryptedData')
+						isBase64 = decodedString.includes(
+							'qortalGroupEncryptedData'
+						);
 					} catch (e) {
-						console.log(e)
+						console.log(e);
 					}
 					if (isBase64) {
-						newObject['customData'][key] = newObject.customData[key];
+						newObject['customData'][key] =
+							newObject.customData[key];
 					} else {
 						const toBase64 = await objectToBase64(
 							newObject.customData[key]
@@ -573,7 +580,6 @@ class ProfileQdn extends connect(store)(LitElement) {
 						});
 						newObject['customData'][key] = encryptedData;
 					}
-					
 				} else {
 					newObject['customData'][key] = newObject.customData[key];
 				}
@@ -601,7 +607,7 @@ class ProfileQdn extends connect(store)(LitElement) {
 				this.resourceExists = true;
 				this.profileData = data;
 				store.dispatch(setProfileData(data));
-				parentEpml.request('showSnackBar', get('profile.profile22'))
+				parentEpml.request('showSnackBar', get('profile.profile22'));
 
 				worker.terminate();
 			} catch (error) {
@@ -699,11 +705,9 @@ class ProfileQdn extends connect(store)(LitElement) {
 	_handleOpenVisiting(event) {
 		try {
 			const name = event.detail;
-			this.getVisitingProfile(name)
+			this.getVisitingProfile(name);
-			this.dialogOpenedProfile = true
+			this.dialogOpenedProfile = true;
-		} catch (error) {
+		} catch (error) {}
-			
-		}
 	}
 
 	connectedCallback() {
@@ -757,10 +761,11 @@ class ProfileQdn extends connect(store)(LitElement) {
 	}
 
 	openUserInfo() {
-		
+		const infoDialog = document
-			const infoDialog = document.getElementById('main-app').shadowRoot.querySelector('app-view').shadowRoot.querySelector('user-info-view')
+			.getElementById('main-app')
-			infoDialog.openUserInfo(this.nameVisiting)
+			.shadowRoot.querySelector('app-view')
-		
+			.shadowRoot.querySelector('user-info-view');
+		infoDialog.openUserInfo(this.nameVisiting);
 	}
 
 	openEdit() {
@@ -769,9 +774,10 @@ class ProfileQdn extends connect(store)(LitElement) {
 
 	onCloseVisitingProfile() {
 		this.profileDataVisiting = null;
-		this.nameVisiting = ""
+		this.nameVisiting = '';
 		this.imageUrl = '';
-		this.resourceExistsVisiting = undefined
+		this.resourceExistsVisiting = undefined;
+		this.isFriend = undefined;
 	}
 
 	updated(changedProperties) {
@@ -780,11 +786,9 @@ class ProfileQdn extends connect(store)(LitElement) {
 			changedProperties.has('dialogOpenedProfile') &&
 			this.dialogOpenedProfile === false
 		) {
-
+			const prevVal = changedProperties.get('dialogOpenedProfile');
-			const prevVal = changedProperties.get('dialogOpenedProfile')
+			if (prevVal === true) this.onCloseVisitingProfile();
-			if(prevVal === true) this.onCloseVisitingProfile()
 		}
-		
 	}
 	async getUserAddress() {
 		try {
@@ -800,7 +804,25 @@ class ProfileQdn extends connect(store)(LitElement) {
 			return '';
 		}
 	}
+
+	checkIfInFriendsList(name) {
+		try {
+			this.isFriend = undefined;
+			const friendList = JSON.parse(
+				localStorage.getItem('friends-my-friend-list') || '[]'
+			);
+			const findIndex = friendList.findIndex(
+				(friend) => friend.name === name
+			);
+			if (findIndex !== -1) {
+				this.isFriend = true;
+			} else {
+				this.isFriend = false;
+			}
+		} catch (error) {}
+	}
 	render() {
+
 		return html`
 			${this.isSaving ||
 			(!this.error && this.resourceExists === undefined)
@@ -920,14 +942,13 @@ class ProfileQdn extends connect(store)(LitElement) {
 									return;
 								}
 								if (this.profileData) {
-									this.profileDataVisiting = this.profileData
+									this.profileDataVisiting = this.profileData;
-									this.nameVisiting = this.name
+									this.nameVisiting = this.name;
-									this.dialogOpenedProfile = true
+									this.dialogOpenedProfile = true;
 								} else {
 									this.isOpenProfileModalUpdate =
 										!this.isOpenProfileModalUpdate;
 								}
-								
 							}}
 						>
 							<avatar-component
@@ -952,22 +973,27 @@ class ProfileQdn extends connect(store)(LitElement) {
 				.qortalRequestCustomData=${this.qortalRequestCustomData}
 			></profile-modal-update>
 
-		
-
 			<!-- Profile read-view -->
-			${this.dialogOpenedProfile ? html`
+			${this.dialogOpenedProfile
+				? html`
 						<paper-dialog
 							class="full-info-wrapper"
 							?opened="${this.dialogOpenedProfile}"
-								
 						>
-				<div class="full-info-logo">${this.avatarFullImage()}</div>
+							<div class="full-info-logo">
+								${this.avatarFullImage()}
+							</div>
 							<h3>${this.nameVisiting}</h3>
-				<div style="display:flex;gap:15px;justify-content:center;margin-top:10px">
+							<div
+								style="display:flex;gap:15px;justify-content:center;margin-top:10px"
+							>
+								${this.nameVisiting !== this.name
+									? html`
 											<div
 												class="send-message-button"
 												@click="${async () => {
-							const address = await this.getUserAddress();
+													const address =
+														await this.getUserAddress();
 													if (!address) return;
 													store.dispatch(
 														setNewTab({
@@ -979,8 +1005,10 @@ class ProfileQdn extends connect(store)(LitElement) {
 																page: 'messaging/q-chat/index.html',
 																title: 'Q-Chat',
 																icon: 'vaadin:chat',
-										mwcicon: 'forum',
+																mwcicon:
-										pluginNumber: 'plugin-qhsyOnpRhT',
+																	'forum',
+																pluginNumber:
+																	'plugin-qhsyOnpRhT',
 																menus: [],
 																parent: false,
 															},
@@ -993,14 +1021,17 @@ class ProfileQdn extends connect(store)(LitElement) {
 															type: 'openPrivateChat',
 															data: {
 																address,
-                                        name: this.nameVisiting
+																name: this
+																	.nameVisiting,
 															},
 														})
 													);
-							this.dialogOpenedProfile = false
+													this.dialogOpenedProfile = false;
 												}}"
 											>
-					<mwc-icon id="send-chat-icon" style="color: var(--black)"
+												<mwc-icon
+													id="send-chat-icon"
+													style="color: var(--black)"
 													>send</mwc-icon
 												>
 												<vaadin-tooltip
@@ -1008,10 +1039,16 @@ class ProfileQdn extends connect(store)(LitElement) {
 													position="bottom"
 													hover-delay=${200}
 													hide-delay=${1}
-							text=${translate('friends.friend8')}
+													text=${translate(
+														'friends.friend8'
+													)}
 												>
 												</vaadin-tooltip>
 											</div>
+									  `
+									: ''}
+								${this.nameVisiting !== this.name
+									? html`
 											<div
 												class="send-message-button"
 												@click="${() => {
@@ -1026,17 +1063,20 @@ class ProfileQdn extends connect(store)(LitElement) {
 																page: `qdn/browser/index.html${query}`,
 																title: 'Q-Mail',
 																icon: 'vaadin:mailbox',
-										mwcicon: 'mail_outline',
+																mwcicon:
+																	'mail_outline',
 																menus: [],
 																parent: false,
 															},
 															openExisting: true,
 														})
 													);
-							this.dialogOpenedProfile = false
+													this.dialogOpenedProfile = false;
 												}}"
 											>
-					<mwc-icon id="send-mail-icon" style="color: var(--black)"
+												<mwc-icon
+													id="send-mail-icon"
+													style="color: var(--black)"
 													>mail</mwc-icon
 												>
 												<vaadin-tooltip
@@ -1044,85 +1084,214 @@ class ProfileQdn extends connect(store)(LitElement) {
 													position="bottom"
 													hover-delay=${200}
 													hide-delay=${1}
-							text=${translate('friends.friend9')}
+													text=${translate(
+														'friends.friend9'
+													)}
 												>
 												</vaadin-tooltip>
 											</div>
+									  `
+									: ''}
+								${this.nameVisiting !== this.name &&
+								this.isFriend === false
+									? html`
+											<div
+												class="send-message-button"
+												@click="${() => {
+													this.dispatchEvent(
+														new CustomEvent(
+															'add-friend',
+															{
+																bubbles: true,
+																composed: true,
+																detail: this
+																	.nameVisiting,
+															}
+														)
+													);
+													this.dialogOpenedProfile = false;
+												}}"
+											>
+												<mwc-icon
+													id="add-friend-icon"
+													style="color: var(--black)"
+													>person_add</mwc-icon
+												>
+												<vaadin-tooltip
+													for="add-friend-icon"
+													position="bottom"
+													hover-delay=${200}
+													hide-delay=${1}
+													text=${translate(
+														'profile.profile26'
+													)}
+												>
+												</vaadin-tooltip>
+											</div>
+									  `
+									: ''}
+								${this.nameVisiting !== this.name &&
+								this.isFriend === true
+									? html`
+											<div
+												class="send-message-button"
+												@click="${() => {
+													this.dispatchEvent(
+														new CustomEvent(
+															'add-friend',
+															{
+																bubbles: true,
+																composed: true,
+																detail: this
+																	.nameVisiting,
+															}
+														)
+													);
+													this.dialogOpenedProfile = false;
+												}}"
+											>
+												<mwc-icon
+													id="add-friend-icon"
+													style="color: green"
+													>person</mwc-icon
+												>
+												<vaadin-tooltip
+													for="add-friend-icon"
+													position="bottom"
+													hover-delay=${200}
+													hide-delay=${1}
+													text=${translate(
+														'profile.profile25'
+													)}
+												>
+												</vaadin-tooltip>
+											</div>
+									  `
+									: ''}
 							</div>
 
+							<div class="data-info">
+								${this.isLoadingVisitingProfile
+									? html`
 											<div
-					class="data-info"
+												style="width:100%;display:flex;justify-content:center"
 											>
-					${this.isLoadingVisitingProfile ? html`
-						<div style="width:100%;display:flex;justify-content:center">
 												<paper-spinner-lite
 													active
 													style="display: block; margin: 0 auto;"
 												></paper-spinner-lite>
 											</div>
-					` : this.resourceExistsVisiting === false ? html`
+									  `
-					<div style="width:100%;display:flex;justify-content:center">
+									: this.resourceExistsVisiting === false
-					<p>${translate('profile.profile16')}</p>
+									? html`
+											<div
+												style="width:100%;display:flex;justify-content:center"
+											>
+												<p>
+													${translate(
+														'profile.profile16'
+													)}
+												</p>
 											</div>
-					`  : this.profileDataVisiting === null ? html`
+									  `
-					<div style="width:100%;display:flex;justify-content:center">
+									: this.profileDataVisiting === null
-					<p>${translate('profile.profile17')}</p>
+									? html`
+											<div
+												style="width:100%;display:flex;justify-content:center"
+											>
+												<p>
+													${translate(
+														'profile.profile17'
+													)}
+												</p>
 											</div>
-					` :  html`
+									  `
-					<p style="font-weight:bold;color:#03a9f4;font-size:17px">${translate('profile.profile4')}</p>
+									: html`
-					<p style="font-size:15px">${this.profileDataVisiting.tagline || translate('profile.profile15')}</p>
+											<p
-					<p style="font-weight:bold;color:#03a9f4;font-size:17px">${translate('profile.profile5')}</p>
+												style="font-weight:bold;color:#03a9f4;font-size:17px"
-					<p>${this.profileDataVisiting.bio || translate('profile.profile15')}</p>
+											>
-					<p style="font-weight:bold;color:#03a9f4;font-size:17px">${translate('profile.profile6')}</p>
+												${translate('profile.profile4')}
-					${Object.keys(this.profileDataVisiting.wallets).map((key, i)=> {
+											</p>
+											<p style="font-size:15px">
+												${this.profileDataVisiting
+													.tagline ||
+												translate('profile.profile15')}
+											</p>
+											<p
+												style="font-weight:bold;color:#03a9f4;font-size:17px"
+											>
+												${translate('profile.profile5')}
+											</p>
+											<p>
+												${this.profileDataVisiting
+													.bio ||
+												translate('profile.profile15')}
+											</p>
+											<p
+												style="font-weight:bold;color:#03a9f4;font-size:17px"
+											>
+												${translate('profile.profile6')}
+											</p>
+											${Object.keys(
+												this.profileDataVisiting.wallets
+											).map((key, i) => {
 												return html`
 													<p>
-						<span style="font-weight:bold">${key}</span>: <span>${this.profileDataVisiting.wallets[key] || translate('profile.profile15')}</span>
+														<span
+															style="font-weight:bold;text-transform: uppercase"
+															>${key}</span
+														>:
+														<span
+															>${this
+																.profileDataVisiting
+																.wallets[key] ||
+															translate(
+																'profile.profile15'
+															)}</span
+														>
 													</p>
-						`
+												`;
 											})}
 									  `}
-				
 							</div>
 
-			
 							<div>
 								<span class="paybutton">
 									<mwc-button
 										class="green"
 										@click=${() => this.openUserInfo()}
-							>${translate('profile.profile14')}</mwc-button
+										>${translate(
+											'profile.profile14'
+										)}</mwc-button
 									>
 								</span>
 								<span class="buttons">
-						${this.nameVisiting === this.name ? html`
+									${this.nameVisiting === this.name
-						<mwc-button @click=${() => this.openEdit()}>${translate("profile.profile3")}</mwc-button>
+										? html`
-						` : ''}
+												<mwc-button
+													@click=${() =>
+														this.openEdit()}
+													>${translate(
+														'profile.profile3'
+													)}</mwc-button
+												>
+										  `
+										: ''}
 
 									<mwc-button
 										class="decline"
 										@click=${() => {
-								this.dialogOpenedProfile = false
+											this.dialogOpenedProfile = false;
 										}}
-							>${translate('general.close')}</mwc-button
+										>${translate(
+											'general.close'
+										)}</mwc-button
 									>
 								</span>
 							</div>
 						</paper-dialog>
-
+				  `
-			
+				: ''}
-			` : ''}
-			
-
-
-		
-
-		
-
-			
-
-		
-		
 		`;
 	}
 }