+ {firstCharToUpperCase(key)}: {children[key]} +
+ ))} + + ); +}; + +const ListCard = ({ children }) => { + // if array retun as list + if (Array.isArray(children) && typeof children[0] === "string") { + return children.map((child) =>{child}
); + } + + // if array of objects return as json + if (Array.isArray(children) && typeof children[0] === "object") { + return children.map((item, index) => ( ++ DAO ID: {data.id} +
++ + Date registered: {data.createdAt} + +
+{item.value}
+ ) : ( +{item.value}
+ ) : ( ++ {data.legalRepresentative.name || "None"} +
+{item.value}
+ ) : ( ++ {children} +
+ ); +}; + +export default Helptext; diff --git a/daostar-website/src/pages/POCRegistrationPage/Register.css b/daostar-website/src/pages/POCRegistrationPage/Register.css new file mode 100644 index 0000000..f227f60 --- /dev/null +++ b/daostar-website/src/pages/POCRegistrationPage/Register.css @@ -0,0 +1,78 @@ +.centered-wizard { + max-width: 640px; + margin: 20vh auto; +} + +.centered-wizard * { + font-family: 'IBM Plex Mono', monospace; +} + +.wizard-card h3 { + text-transform: none; + font-size: 24px; + line-height: 32px; + margin: 0 0 20px; + font-weight: 400; + color: #fff; +} + +.wizard-row { + margin: 48px 24px 16px; +} + +.wizard-row-flex { + display: flex; + gap: 6px; + align-items: end; +} + +.wizard-card p { + font-size: 14px; +} + +.wizard-card p.bp4-text-small { + font-size: 12px; +} + +.wizard-row .bp4-form-group { + margin-bottom: 0; +} + +.wizard-row .bp4-text-small { + font-size: 12px; +} + +.wizard-center { + text-align: center; +} + +.wizard-no-margin { + margin: 0; +} + +.wizard-margin-bottom-8 { + margin-bottom: 8px; +} + +.wizard-side-padding { + padding-left: 24px; + padding-right: 24px; +} + +.wizard-centered-row-flex { + gap: 10px; + align-items: center; + margin-bottom: 10px; + } + +.repeated-object-input { + margin-bottom: 10px; +} + +.bp4-label { + font-size: 16px !important; +} + +.bp4-radio, .bp4-checkbox { + font-size: 0.8rem; +} \ No newline at end of file diff --git a/daostar-website/src/pages/POCRegistrationPage/RegistrationForm.js b/daostar-website/src/pages/POCRegistrationPage/RegistrationForm.js new file mode 100644 index 0000000..7c2d3f7 --- /dev/null +++ b/daostar-website/src/pages/POCRegistrationPage/RegistrationForm.js @@ -0,0 +1,563 @@ +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { API, graphqlOperation } from "aws-amplify"; +import { createDAO } from "../../graphql/mutations"; +import cleanDeep from "clean-deep"; + +import validator from "validator"; +import { + Button, + Callout, + Checkbox, + Divider, + FormGroup, + Radio, + RadioGroup, +} from "@blueprintjs/core"; +import TextInput from "./TextInput"; +import RepeatableTextInput from "./RepeatableTextInput"; +import RepeatableObjectInput from "./RepeatableObjectInput"; +import Helptext from "./Helptext"; + +const RegistrationForm = () => { + const navigate = useNavigate(); + + // FORM STATE + const [submitting, setSubmitting] = useState(false); + const [registrationError, setRegError] = useState(null); + const [validationErrors, setErrors] = useState(null); + const [DaoId, setDaoId] = useState(null); + const [daoStatus, setDaoStatus] = useState("withGovernance"); + const [daoType, setDaoType] = useState([]); + const [amlStatus, setAmlStatus] = useState("false"); + const [daoRegistrations, setDaoRegistrations] = useState([]); + const [daoName, setDaoName] = useState(""); + const [formationDate, setFormationDate] = useState(""); + const [reviewDate, setReviewDate] = useState(""); + const [fora, setFora] = useState([""]); + const [factories, setFactories] = useState([""]); + const [exclusions, setExclusions] = useState([""]); + const [presence, setPresence] = useState([""]); + const [treasuryAddresses, setTreasuryAddresses] = useState([ + { address: "", description: "" }, + ]); + const [tokenAddresses, setTokenAddresses] = useState([ + { address: "", description: "" }, + ]); + const [legalRepresentative, setLegalRepresentative] = useState({ + name: "", + contact: [""], + }); + const [wrappers, setWrappers] = useState([ + { name: "", jurisdiction: "", regulator: "", functions: "" }, + ]); + const [contactName, setContactName] = useState(""); + const [contactEmail, setContactEmail] = useState(""); + const [contactPhone, setContactPhone] = useState(""); + const [contactCompany, setContactCompany] = useState(""); + const [contactRole, setContactRole] = useState(""); + + // CHANGE HANDLERS + const handleTypeChange = (e) => { + const { name } = e.target; + if (daoType.includes(name)) { + setDaoType(daoType.filter((type) => type !== name)); + } else { + setDaoType([...daoType, name]); + } + }; + + const handleRegistrationsChange = (e) => { + const { name } = e.target; + if (daoRegistrations.includes(name)) { + return setDaoRegistrations( + daoRegistrations.filter((type) => type !== name) + ); + } + setDaoRegistrations([...daoRegistrations, name]); + }; + + const handleLegalRepChange = (val, key) => { + setLegalRepresentative({ ...legalRepresentative, [key]: val }); + }; + + const handleSubmit = async () => { + setSubmitting(true); + setErrors(null); + setRegError(null); + + let errors = []; + + const payload = { + name: daoName, + searchField: daoName.toLowerCase(), + treasuryAddresses, + tokenAddresses, + factories, + fora, + formationDate, + reviewDate, + status: daoStatus, + type: daoType, + amlStatus, + legalRepresentative, + registrations: daoRegistrations, + presence, + exclusions, + wrappers, + contact: { + name: contactName, + email: contactEmail, + phone: contactPhone, + company: contactCompany, + role: contactRole, + }, + }; + + // iterate through payload and check for empty fields + Object.keys(payload).forEach((key) => { + if (payload[key] === "") { + errors.push(`${key} is required`); + } + }); + + // check all address fields are valid + + for (let i = 0; i < payload.treasuryAddresses.length; i++) { + const element = payload.treasuryAddresses[i]; + if (!element.address || !validator.isEthereumAddress(element.address)) { + errors.push( + `Treasury Address ${i + 1} is not a valid Ethereum address` + ); + } + } + for (let i = 0; i < payload.tokenAddresses.length; i++) { + const element = payload.tokenAddresses[i]; + if (!element.address || !validator.isEthereumAddress(element.address)) { + errors.push(`Token Address ${i + 1} is not a valid Ethereum address`); + } + } + + // check review date is after formation date + if ( + payload.formationDate && + payload.reviewDate && + payload.formationDate > payload.reviewDate + ) { + errors.push(`Review date must be after formation date`); + } + + // check all email fields are valid + if (!validator.isEmail(payload.contact.email)) { + errors.push(`Contact email is not a valid email address`); + } + + if (errors.length > 0) { + setErrors(errors); + setSubmitting(false); + window.scrollTo(0, 0); + return; + } + + try { + console.log("registrationData", payload); + const res = await API.graphql( + graphqlOperation(createDAO, { input: cleanDeep(payload) }) + ); + setDaoId(res.data.createDAO.id); + } catch (err) { + console.log("error creating DAO:", err); + setRegError("An error occurred during registration."); + } + + setSubmitting(false); + }; + + return ( + <> +