const accountId = context.accountId; const ownerId = "opencann.near"; if (!accountId) { return "Please sign in with NEAR wallet to edit your profile"; } let profile = Social.getr(`${accountId}/profile`); if (profile === null) { return "Loading"; } State.init({ profile, skills: [], skillsError: "", }); const Wrapper = styled.div` #pills-tab, #pills-tabContent { display: none; } `; return ( <Wrapper> <div className="row"> <div className="col-lg-6"> <div> <h4>Edit profile of @{accountId}</h4> </div> <a href="#/opencann.near/widget/profile.demographics"> Click here to edit your demographic data. </a> <hr></hr> <div className="mb-2"> <Widget src="opencann.near/widget/MetadataEditor" props={{ initialMetadata: profile, onChange: (profile) => State.update({ profile }), options: { name: { label: "Profile Name" }, image: { label: "Profile picture" }, backgroundImage: { label: "Background image" }, description: { label: "About" }, tags: { label: "Tags", tagsPattern: "*/profile/tags/*", placeholder: "rust, engineer, artist, humanguild, nft, learner, founder", }, linktree: { links: [ { label: "Twitter", prefix: "https://twitter.com/", name: "twitter", }, { label: "Github", prefix: "https://github.com/", name: "github", }, { label: "Telegram", prefix: "https://t.me/", name: "telegram", }, { label: "Website", prefix: "https://", name: "website", }, { label: "Discord", prefix: "https://", name: "discord", }, ], }, }, }} /> </div> <Widget src={`${ownerId}/widget/profile.skills`} props={{ label: "Skills", placeholder: "Add skills", value: state.skills, onChange: (skills) => State.update({ skills: skills.map(({ name }) => ({ name: name.trim().replaceAll(/\s+/g, "-"), })), }), }} /> <p></p> <div className="mb-2"> <CommitButton data={{ profile: state.profile }}> Save profile </CommitButton> <a className="btn btn-outline-primary ms-2" href={`#/opencann.near/widget/profile.page?accountId=${accountId}`} > View profile </a> </div> </div> <div className="col-lg-6"> <div> <Widget src="opencann.near/widget/profile.page" props={{ accountId, profile: state.profile }} /> </div> </div> </div> </Wrapper> );