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" && (
+
+
+
+
+
+
+
+ >
+ )
+}
+
+export default withBaseModal(DappSurveyModal)
diff --git a/src/components/Modal/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton.tsx
index 3073cfa06..7a7f5f79f 100644
--- a/src/components/Modal/ModalCloseButton.tsx
+++ b/src/components/Modal/ModalCloseButton.tsx
@@ -1,7 +1,22 @@
import { FC } from "react"
import { ModalCloseButton as _ModalCloseButton } from "@threshold-network/components"
+import { useStyles } from "@chakra-ui/system"
+import { CloseButton } from "@chakra-ui/close-button"
+
+const ModalCloseButton: FC<{ onClick?: VoidFunction }> = ({ onClick }) => {
+ const styles = useStyles()
+
+ if (onClick) {
+ // avoids the auto-close functionality of the ModalCloseButton if a custom click handler is passed
+ return (
+
+ )
+ }
-const ModalCloseButton: FC = () => {
return <_ModalCloseButton className="ph-no-capture" />
}
diff --git a/src/components/Modal/StakingBounceSurveyModal/index.tsx b/src/components/Modal/StakingBounceSurveyModal/index.tsx
new file mode 100644
index 000000000..67f288850
--- /dev/null
+++ b/src/components/Modal/StakingBounceSurveyModal/index.tsx
@@ -0,0 +1,35 @@
+import { FC } from "react"
+import DappSurveyModal from "../DappSurveyModal"
+import { PosthogEvent } from "../../../types/posthog"
+import { BaseModalProps } from "../../../types"
+
+const StakingBounceSurveyModal: FC = (props) => {
+ return (
+
+ )
+}
+
+export default StakingBounceSurveyModal
diff --git a/src/components/Modal/SubmitStake/index.tsx b/src/components/Modal/SubmitStake/index.tsx
index 98647a50b..e47875748 100644
--- a/src/components/Modal/SubmitStake/index.tsx
+++ b/src/components/Modal/SubmitStake/index.tsx
@@ -1,10 +1,10 @@
import { FC } from "react"
import {
Button,
+ Divider,
ModalBody,
ModalFooter,
ModalHeader,
- Divider,
} from "@chakra-ui/react"
import { BodyLg, BodySm, H5 } from "@threshold-network/components"
import withBaseModal from "../withBaseModal"
@@ -19,7 +19,12 @@ import StakingStats from "../../StakingStats"
import ModalCloseButton from "../ModalCloseButton"
const SubmitStakeModal: FC = () => {
- const { closeModal, openModal } = useModal()
+ const { openModal } = useModal()
+
+ const openStakingBounceSurveyModal = () => {
+ console.log("opening the modal....?")
+ openModal(ModalType.StakingBounceSurvey)
+ }
// stake transaction, opens success modal on success callback
const { stake } = useStakeTransaction((tx) =>
@@ -41,7 +46,7 @@ const SubmitStakeModal: FC = () => {
Stake Tokens
(Step 1)
-
+
You are about to make a deposit into the T Staking Contract.
@@ -59,7 +64,7 @@ const SubmitStakeModal: FC = () => {
-