const { formState, onComplete, errors } = props; const initialAnswers = { name: formState.name, address: formState.address, soulBoundTokenIssuer: "", purpose: "", legalStatus: "", legalDocument: "", }; State.init({ answers: initialAnswers, }); const onValueChange = (key, value) => { State.update({ answers: { ...state.answers, [key]: value, }, }); }; return ( <div className="mt-4 ndc-card p-4"> <div className="d-flex flex-column gap-4"> <h2 className="h5 fw-bold"> <span className="rounded-circle d-inline-flex align-items-center justify-content-center fw-bolder h5 me-2" style={{ width: "48px", height: "48px", border: "1px solid #82E299", }} > 1 </span> DAO Info & KYC </h2> <Widget src="nui.sking.near/widget/Input.ExperimentalText" props={{ label: "DAO Name", placeholder: "Lorem Ipsum", size: "md", onChange: (v) => { onValueChange("name", v); // generate address onValueChange( "address", `${v .toLowerCase() .replace(/\s/g, "-") .replace(/[^a-zA-Z0-9-]/g, "")}.sputnik-dao.near` ); }, inputProps: { name: "name", }, error: errors["name"], }} /> <Widget src="nui.sking.near/widget/Input.ExperimentalText" props={{ label: ( <> DAO Address{" "} <span className="text-black-50 fw-light small"> (auto-filled) </span> </> ), placeholder: state.answers.address ?? "sample-dao-name.sputnik-dao.near", value: state.answers.address, size: "md", disabled: true, onChange: (v) => onValueChange("address", v), inputProps: { name: "address", }, error: errors["address"], }} /> <Widget src="nui.sking.near/widget/Input.ExperimentalText" props={{ label: ( <> Soul Bound Token Issuer{" "} <span className="text-black-50 fw-light small">(optional)</span> </> ), placeholder: "The address of the token issuer", size: "md", onChange: (v) => onValueChange("soulBoundTokenIssuer", v), error: errors["soulBoundTokenIssuer"], }} /> <Widget src="nui.sking.near/widget/Input.ExperimentalText" props={{ label: "Purpose", placeholder: "Please add the purpose of your DAO", size: "md", textarea: true, inputProps: { rows: 5, }, onChange: (v) => onValueChange("purpose", v), error: errors["purpose"], }} /> <h3 className="h5 fw-bold"> KYC <span className="text-black-50 fw-light small">(optional)</span> </h3> <Widget src="nui.sking.near/widget/Input.ExperimentalText" props={{ label: ( <> Please explain your DAO's Legal Status and Jurisdiction{" "} <span className="text-black-50 fw-light small">(if known)</span> </> ), placeholder: "LLC", size: "md", onChange: (v) => onValueChange("legalStatus", v), error: errors["legalStatus"], }} /> <Widget src="nui.sking.near/widget/Input.ExperimentalText" props={{ label: ( <> Please provide a link to your DAO's Legal Document{" "} <span className="text-black-50 fw-light small">(if any)</span> </> ), placeholder: "https://Legal_Document", size: "md", onChange: (v) => onValueChange("legalDocument", v), error: errors["legalDocument"], }} /> </div> <Widget src={`astro.sking.near/widget/CreateDAO.Footer`} props={{ isLast: true, hasPrevious: true, onNext: () => { onComplete(state.answers); }, onPrevious: () => {}, }} /> </div> );