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 ?? {}, nft: profile.image.nft ?? {}, linktree: profile.linktree ?? {}, img: { cid: profile.image.ipfs_cid }, }); profile = { name: state.profile.name, description: state.profile.description, image: {}, linktree: state.linktree, }; if (state.nft.contractId && state.nft.tokenId) { profile.image.nft = state.nft; } else if (state.img.cid) { profile.image.ipfs_cid = state.img.cid; } else if (state.profile.image.url) { profile.image.url = state.profile.image.url; } return ( <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> <div className="mb-2"> Picture: <br /> <IpfsImageUpload image={state.img} /> </div> <div className="mb-2"> NFT contract: <input type="text" value={state.nft.contractId} /> NFT token id: <input type="text" value={state.nft.tokenId} /> </div> {!state.img.cid && state.profile.image.url && ( <div className="mb-2"> Image URL: <input type="text" value={state.profile.image.url} /> </div> )} <div className="mb-2"> About: <input type="text" value={state.profile.description} /> </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> <hr /> <div> <Widget src="mob.near/widget/Profile" props={{ accountId, profile }} /> </div> <div className="mt-2"> <CommitButton data={{ profile }}>Save profile</CommitButton> <a className="btn btn-outline-primary ms-2" href={`#/mob.near/widget/Profile?accountId=${accountId}`} > View profile </a> </div> </div> );