diff --git a/src/components/Modal/DappSurveyModal/RadioCard.tsx b/src/components/Modal/DappSurveyModal/RadioCard.tsx new file mode 100644 index 000000000..afdff57c0 --- /dev/null +++ b/src/components/Modal/DappSurveyModal/RadioCard.tsx @@ -0,0 +1,37 @@ +import { + Box, + Card, + Radio, + useRadio, + RadioProps, +} from "@threshold-network/components" +import theme from "../../../theme" + +const RadioCard = (props: RadioProps) => { + const { getInputProps, getCheckboxProps } = useRadio(props) + + const input = getInputProps() + const checkbox = getCheckboxProps() + + return ( + + + + {/* @ts-ignore*/} + + {props.children} + + + ) +} + +export default RadioCard diff --git a/src/components/Modal/DappSurveyModal/index.tsx b/src/components/Modal/DappSurveyModal/index.tsx new file mode 100644 index 000000000..d95cc7817 --- /dev/null +++ b/src/components/Modal/DappSurveyModal/index.tsx @@ -0,0 +1,97 @@ +import { FC, useState } from "react" +import { + Box, + Button, + Divider, + H5, + ModalBody, + ModalCloseButton, + ModalFooter, + ModalHeader, + RadioGroup, + Stack, + Textarea, + useRadioGroup, +} from "@threshold-network/components" +import { BaseModalProps } from "../../../types" +import withBaseModal from "../withBaseModal" +import InfoBox from "../../InfoBox" +import { PosthogEvent } from "../../../types/posthog" +import RadioCard from "./RadioCard" + +interface SurveyQuestion { + text: string + value: string +} + +interface DappSurveyModalProps extends BaseModalProps { + title: string + captureEvent: PosthogEvent + surveyQuestions: SurveyQuestion[] +} + +const DappSurveyModal: FC = ({ + closeModal, + title, + captureEvent, + surveyQuestions, +}) => { + const [value, setValue] = useState("") + const [extraInfo, setExtraInfo] = useState("") + + const handleSubmit = () => { + console.log("post hog capture ", captureEvent) + } + + const { getRootProps, getRadioProps } = useRadioGroup({ + defaultValue: "", + onChange: setValue, + }) + + const group = getRootProps() + + return ( + <> + dApp Survey + + + +
{title}
+
+ + + + {surveyQuestions.map(({ value, text }) => { + const radio = getRadioProps({ value }) + return ( + + {text} + + ) + })} + + + {value === "OTHER" && ( +