const accountId = props.accountId ?? context.accountId; if (!accountId) { return "missing *accountId*"; } const link = props.link && (props.link === true ? `https://social.near.page/u/${accountId}` : props.link); const profile = props.profile ?? Social.getr(`${accountId}/profile`); if (profile === null) { return "Loading"; } const showEditButton = profile !== undefined && (!props.profile || props.showEditButton) && accountId && accountId === context.accountId; const name = profile.name || "No-name profile"; const image = profile.image; const backgroundImage = profile.backgroundImage; const tags = Object.keys(profile.tags ?? {}); const nameHeader = <h4 className="mt-0 mb-0 text-truncate">{name}</h4>; // IAH Verification let human = false; const userSBTs = Near.view("registry.i-am-human.near", "sbt_tokens_by_owner", { account: props.accountId, }); for (let i = 0; i < userSBTs.length; i++) { if ("fractal.i-am-human.near" == userSBTs[i][0]) { human = true; } } const Title = styled.h1` font-weight: 600; font-size: ${(p) => p.size || "25px"}; line-height: 1.2em; color: #11181c; margin: ${(p) => (p.margin ? "0 0 23px" : "0")}; overflow-wrap: anywhere; `; const Text = styled.p` margin: 0; line-height: 1.5rem; color: ${(p) => (p.bold ? "#11181C" : "#687076")} !important; font-weight: ${(p) => (p.bold ? "600" : "400")}; font-size: ${(p) => (p.small ? "12px" : "14px")}; overflow: ${(p) => (p.ellipsis ? "hidden" : "")}; text-overflow: ${(p) => (p.ellipsis ? "ellipsis" : "")}; white-space: ${(p) => (p.ellipsis ? "nowrap" : "")}; overflow-wrap: anywhere; b { font-weight: 600; color: #11181c; } `; const TextBadge = styled.p` display: inline-block; margin: 0; font-size: 10px; line-height: 1.1rem; background: #687076; color: #fff; font-weight: 600; white-space: nowrap; padding: 0 6px; border-radius: 3px; `; const accountConnections = Social.keys( `${accountId}/graph/connect/${context.accountId}`, undefined, { values_only: true, } ); const accountIsConnected = Object.keys(accountConnections || {}).length > 0; return ( <div className="bg-white shadow rounded overflow-hidden m-3"> <div className="px-4 pt-0 pb-5 bg-dark position-relative"> {backgroundImage && ( <Widget src="mob.near/widget/Image" props={{ image: backgroundImage, alt: "profile background", className: "position-absolute w-100 h-100", style: { objectFit: "cover", left: 0, top: 0 }, fallbackUrl: "https://ipfs.near.social/ipfs/bafkreibmiy4ozblcgv3fm3gc6q62s55em33vconbavfd2ekkuliznaq3zm", }} /> )} {showEditButton && ( <a href="#/mob.near/widget/ProfileEditor" className="btn mt-4 btn-outline-light float-end position-relative" style={{ zIndex: 1 }} > Edit profile </a> )} <div className="profile-picture d-inline-block" style={{ transform: "translateY(7rem)" }} > <Widget src="mob.near/widget/ProfileImage" props={{ profile, accountId, style: { width: "10rem", height: "10rem" }, className: "mb-2", imageClassName: "rounded-circle w-100 h-100 img-thumbnail d-block", thumbnail: false, }} /> </div> </div> <div className="bg-light px-4 pb-4"> <div className="d-md-flex justify-content-between pt-3 mb-2"> <div style={{ paddingTop: "3rem" }}> <div className="me-2 d-sm-flex gap-1 flex-row align-items-center"> <Title>{profile.name || accountId}</Title> {accountIsConnected && ( <h5 className="m-2"> <i className="bi bi-patch-check me-1"></i> </h5> )} </div> <Text>@{accountId}</Text> <div className="m-1"> <Widget src="hack.near/widget/connect.stats" props={{ accountId }} /> </div> </div> <div style={{ minWidth: "12rem" }}> <Widget src="mob.near/widget/LinkTree" props={{ linktree: profile.linktree }} /> </div> </div> {tags.length > 0 && ( <div> {tags.map((tag, i) => ( <span key={i} className="me-1 mb-1 fw-light badge border border-secondary text-bg-light" > #{tag} </span> ))} </div> )} <div> <div className="float-end"> <Widget src="hack.near/widget/connect.button" props={{ accountId }} /> </div> <div className="public-tags collapse show"> <button className="btn btn-sm btn-outline-secondary border-0" data-bs-toggle="collapse" data-bs-target={`.public-tags`} aria-expanded="false" aria-controls={"public-tags"} > <i className="bi bi-arrows-angle-expand me-1"></i>Show public tags </button> </div> <div className="collapse public-tags"> <Widget src="mob.near/widget/PublicTags" props={{ accountId }} /> </div> </div> </div> </div> );