const initialMetadata = props.initialMetadata ?? {}; const onChange = props.onChange; const options = props.options; State.init({ initialMetadata, metadata: initialMetadata, reportedMetadata: initialMetadata, linktree: initialMetadata.linktree ?? {}, image: initialMetadata.image, backgroundImage: initialMetadata.backgroundImage, screenshots: initialMetadata.screenshots ?? {}, }); const metadata = { name: options.name ? state.metadata.name : undefined, description: options.name ? state.metadata.description : undefined, linktree: options.linktree ? state.linktree : undefined, image: options.image ? state.image : undefined, backgroundImage: options.backgroundImage ? state.backgroundImage : undefined, tags: options.tags ? state.metadata.tags : undefined, screenshots: options.screenshots ? state.metadata.screenshots : undefined, }; if ( onChange && JSON.stringify(state.reportedMetadata) !== JSON.stringify(metadata) ) { State.update({ reportedMetadata: metadata, }); onChange(metadata); } return ( <> {options.name && ( <div className="mb-2"> {options.name.label ?? "Name"} <input type="text" value={state.metadata.name} /> </div> )} {options.image && ( <div className="mb-2"> {options.image.label ?? "Image"} <Widget src="mob.near/widget/ImageEditorTabs" props={{ image: state.image, onChange: (image) => State.update({ image }), }} /> </div> )} {options.backgroundImage && ( <div className="mb-2"> {options.backgroundImage.label ?? "Background image"} <Widget src="mob.near/widget/ImageEditorTabs" props={{ image: state.backgroundImage, onChange: (backgroundImage) => State.update({ backgroundImage }), }} /> </div> )} {options.description && ( <div className="mb-2"> {options.description.label ?? "Description"} <span className="text-secondary"> (supports markdown)</span> <textarea className="form-control" rows={5} value={state.metadata.description} onChange={(e) => { state.metadata.description = e.target.value; State.update(); }} /> </div> )} {options.tags && ( <div className="mb-2"> {options.tags.label ?? "Tags"} <Widget src="mob.near/widget/TagsEditor" props={{ initialTagsObject: metadata.tags, tagsPattern: options.tags.pattern, placeholder: options.tags.placeholder ?? "rust, engineer, artist, humanguild, nft, learner, founder", setTagsObject: (tags) => { state.metadata.tags = tags; State.update(); }, }} /> </div> )} {options.linktree && (options.linktree.links ?? []).map((link) => ( <div className="mb-2"> {link.label} <div className="input-group"> <span className="input-group-text">{link.prefix}</span> <input type="text" value={state.linktree[link.name]} /> </div> </div> ))} </> );