let accountId = props.accountId ?? context.accountId; const profile = Social.getr(`${accountId}/profile`); const showEditButton = !props.profile && accountId && accountId === context.accountId; const name = props.profile.name ?? profile.name; const description = props.profile.description ?? profile.description; const image = props.profile.image ?? profile.image; const url = (image.ipfs_cid ? `https://ipfs.near.social/ipfs/${image.ipfs_cid}` : image.url) || "https://thewiki.io/static/media/sasha_anon.6ba19561.png"; const linktree = props.profile.linktree ?? profile.linktree; return ( <div className="profile"> <Widget src="root.near/widget/ProfilePic" image=image /> <div className="profile-info d-inline-block" style={{ maxWidth: "16em" }}> <div className="profile-name text-truncate"> {name || "No-name profile"} </div> <div className="profile-description">{description}</div> <div className="profile-links d-flex"> <div className="d-inline-block profile-account text-secondary text-truncate"> @{accountId} </div> {linktree.website && ( <div className="ms-1 d-inline-block"> <a href={`https://${linktree.website.replace("https://", "")}`}> <i className="bi bi-globe2 text-secondary"></i> </a> </div> )} {linktree.github && ( <div className="ms-1 d-inline-block"> <a href={`https://github.com/${linktree.github.replace( "https://github.com/", "" )}`} > <i className="bi bi-github text-secondary"></i> </a> </div> )} {linktree.twitter && ( <div className="ms-1 d-inline-block"> <a href={`https://twitter.com/${linktree.twitter.replace( "https://twitter.com/", "" )}`} > <i className="bi bi-twitter text-secondary"></i> </a> </div> )} {linktree.telegram && ( <div className="ms-1 d-inline-block"> <a href={`https://t.me/${linktree.telegram.replace( "https://t.me/", "" )}`} > <i className="bi bi-telegram text-secondary"></i> </a> </div> )} </div> </div> {showEditButton && ( <a href="#/root.near/widget/ProfileEditor" className="profile-edit btn btn-sm btn-outline-secondary border-0 align-top" > Edit </a> )} </div> );