const accountId = context.accountId; if (!accountId) { return "Please sign in with NEAR wallet to edit your profile"; } let profile = Social.getr(`${accountId}/profile`); if (profile === null) { return "Loading"; } initState({ profile: profile ?? {}, linktree: profile.linktree ?? {}, image: profile.image, backgroundImage: profile.backgroundImage, }); profile = { name: state.profile.name, description: state.profile.description, linktree: state.linktree, image: state.image, backgroundImage: state.backgroundImage, }; return ( <div className="row"> <div className="col-lg-6"> <div className="row mb-3"> <div> <h4>Edit profile of @{accountId}</h4> </div> <div className="mb-2"> Name <input type="text" value={state.profile.name} /> </div> <b>Profile picture</b> <Widget src="mob.near/widget/ImageEditor" props={{ image: state.image, onChange: (image) => State.update({ image }), }} /> <b>Background image</b> <Widget src="mob.near/widget/ImageEditor" props={{ image: state.backgroundImage, onChange: (backgroundImage) => State.update({ backgroundImage }), }} /> <div className="mb-2"> About <span className="text-secondary">(supports markdown)</span> <textarea className="form-control" rows={5} value={state.profile.description} onChange={(e) => { state.profile.description = e.target.value; State.update(); }} /> </div> <div className="mb-2"> Twitter <div className="input-group"> <span className="input-group-text">https://twitter.com/</span> <input className="form-control" type="text" value={state.linktree.twitter} /> </div> <div> Github <div className="input-group"> <span className="input-group-text">https://github.com/</span> <input type="text" value={state.linktree.github} /> </div> </div> <div> Telegram <div className="input-group"> <span className="input-group-text">https://t.me/</span> <input type="text" value={state.linktree.telegram} /> </div> </div> <div> Website <div className="input-group"> <span className="input-group-text">https://</span> <input type="text" value={state.linktree.website} /> </div> </div> <div> Feed URL: <div className="input-group"> <input type="text" value={state.linktree.feed_url} /> </div> </div> </div> <div className="mb-2"> <CommitButton data={{ profile }}>Save profile</CommitButton> <a className="btn btn-outline-primary ms-2" href={`#/${accountId}/widget/ProfilePage?accountId=${accountId}`} > View profile </a> </div> </div> </div> </div> );