import React , { FC , useEffect } from "react" ; import { DAOConfigForm } from "@dorgtech/daocreator-lib" ; import { observer } from "mobx-react" ; import DAOConfigEditor from "../commonV2/dao/DAOConfigEditor" ; import { MDBRow , MDBCol } from "mdbreact" ; import "./styles.css" ; interface Props { form : DAOConfigForm ; toggleCollapse : ( ) => void ; } export type NamingError = { daoName : boolean ; tokenSymbol : boolean ; } ; const NamingStep = observer ( ( { form , toggleCollapse } ) => { useEffect ( ( ) => { form . $ . tokenName . value = form . $ . daoName . value + " token" ; } , [ form . $ . daoName . $ ] ) ; return ( < div style = { styles . paddingTotal } > < br /> < DAOConfigEditor form = { form } editable = { true } / > < br /> < MDBRow style = { styles . paddingBottom } > < MDBCol > < button id = "setDescription" style = { form . hasError ? styles . buttonDeactivatedStyle : styles . buttonActivatedStyle } disabled = { form . hasError } onClick = { toggleCollapse } > Set Description < /button> < /MDBCol> < /MDBRow> < /div>); } ) ; const styles = { buttonActivatedStyle : { borderRadius : "0.37rem" , height : "45px" , fontWeight : 300 , backgroundColor : "#1976d2" , color : "white" , width : "145px" , padding : "7px" , marginBottom : "11px" , fontSize : "smaller" } , buttonDeactivatedStyle : { borderRadius : "0.37rem" , height : "45px" , fontWeight : 300 , backgroundColor : "white" , color : "#1976d2" , width : "145px" , padding : "7px" , marginBottom : "11px" , fontSize : "smaller" } , paddingBottom : { paddingBottom : "0%" } , paddingTotal : { padding : "0px" } } ; export default NamingStep ;