import React , { FC } from "react" ; import { MembersForm , SchemesForm , DAOConfigForm } from "@dorgtech/daocreator-lib" ; import LineGraphic from "../LineGraphic" ; import { MDBIcon , MDBRow , MDBCol } from "mdbreact" ; import { SimpleOption , getSimpleOptions } from "../../utils" ; import './styles.css' ; export const ConfigPreview = ( { form } ) => ( < MDBRow style = { styles . configPreview } > < MDBCol > < span > Name : < strong > { form . $ . daoName . value } < /strong> < /span> < /MDBCol> < MDBCol > < span > Symbol : < strong > { form . $ . tokenSymbol . value } < /strong> < /span> < /MDBCol> < /MDBRow>); export const SchemesPreview = ( { form } ) => { const simpleOptions = getSimpleOptions ( form ) ; return ( < div id = "preview" style = { styles . schemePreview } > < p > < strong > Recommended < /strong> < /p> { simpleOptions . map ( ( { text , checked } , index ) => ( < div key = { index } > < p > < MDBIcon icon = { checked ? "check" : "times" } className = { checked ? "blue-text" : "red-text" } style = { checked ? { marginRight : "10px" } : { marginLeft : "3px" , marginRight : "12px" } } /> { text } < /p> < /div>))} < /div>); } ; export const MembersPreview = ( { form } ) => { const reputationConfig = { showPercentage : false , height : "0.5rem" , symbol : "REP" , dataKey : "reputation" , nameKey : "address" } ; const tokenConfig = { showPercentage : false , height : "0.5rem" , symbol : form . getDAOTokenSymbol ( ) , dataKey : "tokens" , nameKey : "address" } ; let totalReputationAmount = 0 ; let totalTokenAmount = 0 ; form . toState ( ) . map ( ( { reputation , tokens } ) => { totalReputationAmount += reputation ; totalTokenAmount += tokens ; return null ; } ) ; const numberOfMembers = form . $ . length ; return ( < div id = "preview" style = { styles . membersPreview } > < p id = "membersCount" > { numberOfMembers } Member { numberOfMembers > 1 && "s" } < /p> < div style = { { width : "17.5em" } } > < p > Reputation Distribution < /p> < LineGraphic data = { form . toState ( ) as any } total = { totalReputationAmount } config = { reputationConfig } style = { styles . lineGraphic } / > < /div> { totalTokenAmount > 0 && ( < div style = { { paddingTop : "20px" , width : "17.5em" } } > < p > { form . getDAOTokenSymbol ( ) } Token Distribution < /p> < LineGraphic data = { form . toState ( ) as any } total = { totalTokenAmount } config = { tokenConfig } style = { styles . lineGraphic } / > < /div>)} < /div>); } ; const styles = { configPreview : { marginTop : 33 , marginRight : "auto" , marginLeft : "1.5rem" , whiteSpace : "nowrap" } , schemePreview : { marginTop : 33 , } , membersPreview : { marginTop : 33 , paddingRight : "8rem" } , lineGraphic : { padding : "unset" } } ;