Transaction: 7aMue4n...XJVo

{ "data": { "flowscience.near": { "widget": { "NAS": { "": "const data = props.data || {};\nconst type = props.type || \"\";\nconst typeSrc = props.typeSrc || \"flowscience.near\";\nconst buildEdges = props.buildEdges;\nconst template = props.template || \"\";\nconst thingId = props.thingId;\nconst defaultView = props.defaultView || \"CREATE_THING\";\n\nif (type !== \"\") {\n const parts = type.split(\"/\");\n typeSrc = parts[0];\n}\n\nconst Container = styled.div`\n display: flex;\n `;\n\nconst SidePanel = styled.div`\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 20px;\n background-color: #b276f4;\n width: auto;\n z-index: 50;\n min-width: 400px;\n`;\n\nconst MainContent = styled.div`\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n `;\n\nconst FormContainer = styled.div`\n border: 1px solid #ccc;\n padding: 20px;\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n margin-bottom: 20px;\n gap: 8px;\n background-color: #b276f4;\n padding: 30px;\n `;\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n align-self: flex-start;\n width: 100%;\n`;\n\nconst Button = styled.button`\n `;\n\nconst LeftPanelItem = styled.div`\n padding: 8px;\n background-color: #ccc;\n color: white;\n border-radius: 4px;\n `;\n\nconst Select = styled.select`\n `;\n\nconst Label = styled.label`\n`;\n\nconst Input = styled.input`\n `;\n\nconst ModalOverlay = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n`;\n\nconst ModalContent = styled.div`\n background-color: white;\n padding: 20px;\n border-radius: 4px;\n min-width: 500px;\n height: 100%;\n overflow: scroll;\n`;\n\nconst ModalTitle = styled.h3`\n margin-bottom: 10px;\n`;\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst CenteredDiv = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n text-align: center;\n`;\n\nState.init({\n data,\n config: data,\n isModalOpen: false,\n typeSrc,\n selectedType: type,\n view: defaultView,\n preview: \"TEMPLATE\",\n template,\n templateVal: template,\n thingId,\n});\n\nconst handleOnChange = (value) => {\n State.update({ data: { ...state.data, ...value } });\n};\n\nconst handleApply = () => {\n State.update({\n config: state.data,\n template: state.templateVal,\n });\n // set the props for the main content\n};\n\nconst handleSave = () => {\n // create the thing\n State.update({ isModalOpen: false });\n const thingId = state.thingId || Math.random();\n let edges = [];\n if (buildEdges) {\n const newPath = `${context.accountId}/thing/${thingId}`;\n edges = buildEdges(newPath, state.selectedType);\n }\n\n const data = {\n thing: {\n [thingId]: JSON.stringify({\n data: state.config,\n template: {\n src: state.template,\n },\n type: state.selectedType,\n }),\n },\n index: {\n thing: JSON.stringify({\n key: thingId,\n value: {\n type: state.selectedType,\n },\n }),\n },\n };\n if (edges.length) {\n data.index.edge = JSON.stringify(edges);\n }\n Social.set(data, {\n onCommit: () => {\n State.update({\n data: {},\n isModalOpen: false,\n config: undefined,\n });\n },\n onCancel: () => {\n State.update({\n isModalOpen: false,\n });\n },\n });\n};\n\nlet availableTypes = [];\nconst types = Social.get(`${state.typeSrc}/type/**`, \"final\");\nif (types !== null) {\n availableTypes =\n Object.keys(types)?.map((it) => `${state.typeSrc}/type/${it}`) || [];\n}\n\nconst handleTypeChange = (e) => {\n State.update({ selectedType: e.target.value, templateVal: \"\", data: {} });\n};\n\nreturn (\n <Container>\n <SidePanel>\n <h1>Near Attestation Service (NAS)</h1>\n <Row style={{ gap: \"8px\", marginBottom: \"16px\" }}>\n <h2>Make a</h2>{\" \"}\n <Select\n value={state.view}\n onChange={(e) => State.update({ view: e.target.value })}\n >\n <option value=\"CREATE_THING\">schema</option>\n <option value=\"CREATE_TYPE\">attestation</option>\n </Select>\n </Row>\n {state.view === \"CREATE_THING\" ? (\n <>\n <FormContainer>\n <Label>Schema Owner:</Label>\n <Row>\n <Input\n type=\"text\"\n value={state.newTypeSrc}\n onChange={(e) => State.update({ newTypeSrc: e.target.value })}\n placeholder={\"accountId\"}\n />\n <Button\n onClick={() => State.update({ typeSrc: state.newTypeSrc })}\n >\n apply\n </Button>\n </Row>\n <Label>Schema</Label>\n <Row>\n <Select value={state.selectedType} onChange={handleTypeChange}>\n <option value=\"\">Choose a schema</option>\n {availableTypes?.map((it) => (\n <option value={it} key={it}>\n {it}\n </option>\n ))}\n </Select>\n </Row>\n </FormContainer>\n <FormContainer>\n <Widget\n src=\"efiz.near/widget/create\"\n props={{\n item: {\n type: state.selectedType,\n value: state.data,\n },\n onChange: handleOnChange,\n }}\n />\n </FormContainer>\n <Footer>\n <Button onClick={() => handleApply()}>apply</Button>\n <Button\n onClick={() => State.update({ isModalOpen: true })}\n disabled={state.config === undefined}\n >\n save\n </Button>\n </Footer>\n </>\n ) : (\n <Widget\n src=\"every.near/widget/every.type.create\"\n props={{ typeSrc: state.selectedType }}\n />\n )}\n </SidePanel>\n <MainContent>\n {state.view === \"CREATE_THING\" ? (\n <>\n <Header>\n <Row style={{ justifyContent: \"space-between\" }}>\n <div>\n <Label>Template:</Label>\n <Input\n value={state.templateVal}\n onChange={(e) =>\n State.update({ templateVal: e.target.value })\n }\n />\n </div>\n <Select\n value={state.preview}\n onChange={(e) => State.update({ preview: e.target.value })}\n >\n <option value=\"TEMPLATE\">template</option>\n <option value=\"RAW\">raw</option>\n </Select>\n <Button>\n <a\n className={`btn`}\n href={`https://jutsu.ai/editor/${state.template}`}\n target=\"_blank\"\n >\n <i className=\" me-1\">\n <svg\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"2 2 18 18\"\n width=\"16px\"\n height=\"16px\"\n >\n <path d=\"M12.16 3h-.32L9.21 8.25h5.58zm4.3 5.25h5.16l-2.07-4.14C19.21 3.43 18.52 3 17.76 3h-3.93l2.63 5.25zm4.92 1.5h-8.63V20.1zM11.25 20.1V9.75H2.62zM7.54 8.25 10.16 3H6.24c-.76 0-1.45.43-1.79 1.11L2.38 8.25h5.16z\"></path>\n </svg>\n </i>\n <span>Open in Jutsu</span>\n </a>\n </Button>\n </Row>\n </Header>\n {state.preview === \"TEMPLATE\" ? (\n <>\n {(state.template && (\n <Widget src={state.template} props={{ data: state.config }} />\n )) || <CenteredDiv>set a template and click apply</CenteredDiv>}\n </>\n ) : (\n <Widget\n src=\"efiz.near/widget/Every.Raw.View\"\n props={{ value: state.config || {} }}\n />\n )}\n </>\n ) : (\n <></>\n )}\n </MainContent>\n {state.isModalOpen && (\n <ModalOverlay>\n <ModalContent>\n <ModalTitle>Make an attestation</ModalTitle>\n <p>option to provide a thing id</p>\n <Row style={{ gap: \"8px\" }}>\n <Input\n value={state.thingId}\n onChange={(e) => State.update({ thingId: e.target.value })}\n placeholder=\"thing id\"\n />\n </Row>\n <Widget\n src=\"efiz.near/widget/Every.Raw.View\"\n props={{\n value: { data: state.config, template: { src: state.template } },\n }}\n />\n <Button onClick={handleSave}>Save</Button>\n <Button onClick={() => State.update({ isModalOpen: false })}>\n Cancel\n </Button>\n </ModalContent>\n </ModalOverlay>\n )}\n </Container>\n);\n" } } } } }