const accountId = context.accountId; if (!accountId) { return "please connect your NEAR account"; } const options = [ { title: "GitHub", value: "hack.near/widget/adapter.github", }, { title: "Obsidian", value: "hack.near/widget/adapter.obsidian", }, { title: "Tldraw", value: "hack.near/widget/adapter.tldraw", }, ]; State.init({ source: "", adapter: "hack.near/widget/adapter.github", reference: "", }); const Wrapper = styled.div` max-width: 400px; margin: 0 auto; `; const Form = styled.div` display: flex; flex-direction: column; gap: 15px; `; const Label = styled.label` font-weight: bold; `; const Input = styled.input` padding: 5px; `; const Select = styled.select` padding: 8px; `; const TextArea = styled.textarea` padding: 5px; height: 222px; resize: vertical; `; const onChangeSource = (source) => { State.update({ source, }); }; const onChangeAdapter = (adapter) => { State.update({ adapter, }); }; const onChangeReference = (reference) => { State.update({ reference, }); }; function generateUID() { return ( Math.random().toString(16).slice(2) + Date.now().toString(36) + Math.random().toString(16).slice(2) ); } const thingId = generateUID(); const handleCreate = () => { const data = { thing: { [thingId]: { source: state.source, adapter: state.adapter, reference: state.reference, }, }, }; Social.set(data); }; return ( <Wrapper> <h4 className="mb-3"> <b>hyperfile creator</b> </h4> <Form> <Label>source</Label> <Input type="text" value={state.source} onChange={(e) => onChangeSource(e.target.value)} /> <Label>adapter</Label> <Select placeholder={placeholder} value={state.adapter} onChange={({ target: { value } }) => onChangeAdapter(value)} > {options.map((o) => ( <option value={o.value}>{o.title}</option> ))} </Select> <Label htmlFor="reference">reference (JSON)</Label> <TextArea type="text" value={state.reference} onChange={(e) => onChangeReference(e.target.value)} /> <button className="btn btn-outline-success mt-3" onClick={handleCreate}> create </button> </Form> </Wrapper> );