Transaction: HiFjNDD...V95W

{ "data": { "flowscience.near": { "widget": { "NAS": { "": "const [data, setData] = useState({});\r\nconst type = props.type || \"\";\r\nconst attestationType = \"hyperfiles.near/type/attestation\";\r\nconst [selectedSchema, setSelectedSchema] = useState(props.selectedSchema);\r\nconst schemaType = props.schemaType || \"hyperfiles.near/type/schema\";\r\nconst typeSrc = props.typeSrc || \"hyperfiles.near\";\r\nconst [schemaSrc, setSchemaSrc] = useState(\"initialSchemaSrcValue\");\r\nconst defaultView = props.defaultView || \"CREATE_THING\";\r\n\r\nif (type !== \"\") {\r\n const parts = type.split(\"/\");\r\n typeSrc = parts[0];\r\n}\r\n\r\nconst Container = styled.div`\r\n display: flex;\r\n `;\r\n\r\nconst SidePanel = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n padding: 20px;\r\n background-color: #b276f4;\r\n width: auto;\r\n z-index: 50;\r\n min-width: 400px;\r\n`;\r\n\r\nconst MainContent = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n `;\r\n\r\nconst FormContainer = styled.div`\r\n border: 1px solid #ccc;\r\n padding: 20px;\r\n`;\r\n\r\nconst Header = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n margin-bottom: 20px;\r\n gap: 8px;\r\n background-color: #b276f4;\r\n padding: 30px;\r\n `;\r\n\r\nconst Footer = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n align-self: flex-start;\r\n width: 100%;\r\n`;\r\n\r\nconst Button = styled.button`\r\n `;\r\n\r\nconst LeftPanelItem = styled.div`\r\n padding: 8px;\r\n background-color: #ccc;\r\n color: white;\r\n border-radius: 4px;\r\n `;\r\n\r\nconst Select = styled.select`\r\n `;\r\n\r\nconst Label = styled.label`\r\n`;\r\n\r\nconst Input = styled.input`\r\n `;\r\n\r\nconst ModalOverlay = styled.div`\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 100;\r\n`;\r\n\r\nconst ModalContent = styled.div`\r\n background-color: white;\r\n padding: 20px;\r\n border-radius: 4px;\r\n min-width: 500px;\r\n height: 100%;\r\n overflow: scroll;\r\n`;\r\n\r\nconst ModalTitle = styled.h3`\r\n margin-bottom: 10px;\r\n`;\r\n\r\nconst Row = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n`;\r\n\r\nconst CenteredDiv = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100%;\r\n text-align: center;\r\n`;\r\n\r\nState.init({\r\n data,\r\n config: data,\r\n typeSrc,\r\n schemaSrc,\r\n selectedType: type,\r\n selectedSchema: state.selectedSchema,\r\n view: defaultView,\r\n preview: \"TEMPLATE\",\r\n template,\r\n templateVal: template,\r\n schemas: {},\r\n loading: false,\r\n});\r\n\r\nconst handleSelectedSchemaChange = (newSelectedSchema) => {\r\n setSelectedSchema(newSelectedSchema);\r\n console.log(\"New selected schema:\", selectedSchema);\r\n};\r\n\r\nconst handleSchemaSrcChange = (newSchemaSrc) => {\r\n setSchemaSrc(newSchemaSrc);\r\n console.log(\"New schema source:\", newSchemaSrc);\r\n};\r\n\r\nuseEffect(() => {\r\n console.log(\"New schema source:\", schemaSrc); // Correctly logs after updates\r\n}, [schemaSrc]); // Listen for changes to schemaSrc\r\n\r\nconst handleOnChange = (updatedItem) => {\r\n // Assuming updatedItem is an object with { key: value } pairs representing changes\r\n //console.log(\"Changes from attest:\", updatedItem);\r\n\r\n // Update your state accordingly\r\n // This example assumes you have a state.data object that you're updating\r\n State.update({ data: { ...state.data, ...value } });\r\n\r\n // Ensure you have a state setup to handle this in NAS if using React's useState\r\n setData((prevState) => ({\r\n ...prevState,\r\n ...updatedItem,\r\n }));\r\n};\r\n\r\nuseEffect(() => {\r\n // Assuming setSelectedSchema is the state setter for selectedSchema in NAS\r\n setSelectedSchema(props.selectedSchema);\r\n console.log(\"New schema from props:\", selectedSchema);\r\n\r\n // You might also want to perform other actions when selectedSchema changes\r\n}, [props.selectedSchema]); // This effect runs whenever props.selectedSchema changes\r\n\r\nreturn (\r\n <Container>\r\n <SidePanel>\r\n <h1>Near Attestation Service (NAS)</h1>\r\n {/* <Row style={{ gap: \"8px\", marginBottom: \"16px\" }}>\r\n <h2>Make a new</h2>{\" \"}\r\n <Select\r\n value={state.view}\r\n onChange={(e) => State.update({ view: e.target.value })}\r\n >\r\n <option value=\"CREATE_THING\">attestation</option>\r\n <option value=\"CREATE_TYPE\">schema</option>\r\n </Select>\r\n </Row> */}\r\n {state.view === \"CREATE_THING\" ? (\r\n <>\r\n {/* <Widget\r\n src=\"flowscience.near/widget/SchemaSelector\"\r\n props={{\r\n onSelectedSchemaChange: handleSelectedSchemaChange,\r\n onSchemaSrcChange: handleSchemaSrcChange,\r\n }}\r\n /> */}\r\n <FormContainer>\r\n <Widget\r\n src=\"flowscience.near/widget/attestWithTypes\"\r\n props={{\r\n item: state.data,\r\n onChange: handleOnChange,\r\n selectedSchema: selectedSchema,\r\n }}\r\n />\r\n </FormContainer>\r\n <Footer></Footer>\r\n </>\r\n ) : (\r\n <Widget\r\n src=\"flowscience.near/widget/schema.editor\"\r\n props={{ schemaSrc: state.schemaSrc }}\r\n />\r\n )}\r\n </SidePanel>\r\n <MainContent>\r\n {state.view === \"CREATE_THING\" ? (\r\n <>\r\n <Header>\r\n <Row style={{ justifyContent: \"space-between\" }}>\r\n <div>\r\n <Label>Hyperfile (set of edges)</Label>\r\n <Input\r\n value={state.templateVal}\r\n onChange={(e) =>\r\n State.update({ templateVal: e.target.value })\r\n }\r\n />\r\n </div>\r\n\r\n <Button>\r\n <a\r\n className={`btn`}\r\n href={`https://draw.everything.dev/${state.template}`}\r\n target=\"_blank\"\r\n >\r\n <span>Open on Canvas</span>\r\n </a>\r\n </Button>\r\n </Row>\r\n </Header>\r\n <h3>View Data</h3>\r\n <Widget src=\"flowscience.near/widget/view\" />\r\n <hr />\r\n <Widget\r\n src=\"hack.near/widget/graph.view\"\r\n props={{\r\n accounts: [context.accountId, state.recipientId, state.refUID],\r\n }}\r\n />\r\n )\r\n </>\r\n ) : (\r\n <></>\r\n )}\r\n </MainContent>\r\n </Container>\r\n);\r\n" } } } } }