WIP: Staking flow survey

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 (
+    <Box as="label">
+      <input {...input} />
+      <Card
+        {...checkbox}
+        boxShadow="none"
+        cursor="pointer"
+        display="flex"
+        _checked={{
+          border: `2px solid ${theme.colors.brand[400]}`,
+        }}
+        p={4}
+      >
+        {/*  @ts-ignore*/}
+        <Radio isChecked={input.checked} />
+        <Box>{props.children}</Box>
+      </Card>
+    </Box>
+  )
+}
+
+export default RadioCard

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<DappSurveyModalProps> = ({
+  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 (
+    <>
+      <ModalHeader>dApp Survey</ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>
+        <InfoBox>
+          <H5 mb={2}>{title}</H5>
+        </InfoBox>
+        <Box px={4} my={4}>
+          <RadioGroup onChange={setValue} value={value}>
+            <Stack spacing={2} {...group}>
+              {surveyQuestions.map(({ value, text }) => {
+                const radio = getRadioProps({ value })
+                return (
+                  <RadioCard key={value} {...radio}>
+                    {text}
+                  </RadioCard>
+                )
+              })}
+            </Stack>
+          </RadioGroup>
+          {value === "OTHER" && (
+            <Textarea
+              mt={2}
+              placeholder="Type your reasons here"
+              value={extraInfo}
+              onChange={(e) => setExtraInfo(e.target.value)}
+            />
+          )}
+        </Box>
+        <Divider />
+      </ModalBody>
+      <ModalFooter>
+        <Button onClick={closeModal} variant="outline" mr={2}>
+          Dismiss
+        </Button>
+        <Button disabled={value === ""} onClick={handleSubmit}>
+          Submit
+        </Button>
+      </ModalFooter>
+    </>
+  )
+}
+
+export default withBaseModal(DappSurveyModal)

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 (
+      <CloseButton
+        __css={styles.closeButton}
+        className="chakra-modal__close-btn ph-no-capture"
+        onClick={onClick}
+      />
+    )
+  }
 
-const ModalCloseButton: FC = () => {
   return <_ModalCloseButton className="ph-no-capture" />
 }
 

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<BaseModalProps> = (props) => {
+  return (
+    <DappSurveyModal
+      title="We've noticed you did not complete your staking. What happened?"
+      captureEvent={PosthogEvent.StakingFlowBounce}
+      surveyQuestions={[
+        { text: "I misclicked", value: "MISCLICK" },
+        {
+          text: "I have trouble with my hardware wallet",
+          value: "HARDWARE_ISSUE",
+        },
+        {
+          text: "I added one wrong address",
+          value: "ADDED_WRONG_ADDRESS",
+        },
+        {
+          text: "I just wanted to test the dApp",
+          value: "TEST",
+        },
+        {
+          text: "Other",
+          value: "OTHER",
+        },
+      ]}
+      {...props}
+    />
+  )
+}
+
+export default StakingBounceSurveyModal

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<BaseModalProps> = () => {
-  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<BaseModalProps> = () => {
         <H5 mr={2}>Stake Tokens</H5>
         <BodySm>(Step 1)</BodySm>
       </ModalHeader>
-      <ModalCloseButton />
+      <ModalCloseButton onClick={openStakingBounceSurveyModal} />
       <ModalBody>
         <InfoBox variant="modal" spacing={6} mb={6}>
           <H5>You are about to make a deposit into the T Staking Contract.</H5>
@@ -59,7 +64,7 @@ const SubmitStakeModal: FC<BaseModalProps> = () => {
         <Divider mt="4" />
       </ModalBody>
       <ModalFooter>
-        <Button onClick={closeModal} variant="outline" mr={2}>
+        <Button onClick={openStakingBounceSurveyModal} variant="outline" mr={2}>
           Cancel
         </Button>
         <Button onClick={submitStake}>Stake</Button>

src/enums/modal.ts

@@ -36,4 +36,5 @@ export enum ModalType {
   DeauthorizationInitiated = "DEAUTHORIZATION_INITIATED",
   Analytics = "ANALYTICS",
   FeedbackSubmission = "FEEDBACK_SUBMIT",
+  StakingBounceSurvey = "STAKING_BOUNCE_SURVEY",
 }

src/types/modal.ts

@@ -46,6 +46,7 @@ import MapOperatorToStakingProviderConfirmationModal from "../components/Modal/M
 import { MapOperatorToStakingProviderSuccess } from "../components/Modal/MapOperatorToStakingProviderSuccessModal"
 import AnalyticsModal from "../components/Modal/AnalyticsModal"
 import FeedbackSubmissionModal from "../components/Modal/FeedbackSubmissionModal"
+import StakingBounceSurveyModal from "../components/Modal/StakingBounceSurveyModal"
 
 export const MODAL_TYPES: Record<ModalType, ElementType> = {
   [ModalType.SelectWallet]: SelectWalletModal,
@@ -82,14 +83,14 @@ export const MODAL_TYPES: Record<ModalType, ElementType> = {
   [ModalType.StakingApplicationsAuthorized]: StakingApplicationsAuthorized,
   [ModalType.IncreaseAuthorization]: IncreaseAuthorization,
   [ModalType.IncreaseAuthorizationSuccess]: IncreaseAuthorizationSuccess,
-  [ModalType.SubmitStake]: SubmitStakeModal,
   [ModalType.NewStakerAuthorizeStakingApplication]:
     NewStakerAuthorizeStakingApplicationModal,
   [ModalType.ConfirmDeauthorization]: ConfirmDeauthorization,
   [ModalType.DeauthorizationCompleted]: DeauthorizationCompleted,
   [ModalType.DeauthorizationInitiated]: DeauthorizationInitiated,
   [ModalType.Analytics]: AnalyticsModal,
   [ModalType.FeedbackSubmission]: FeedbackSubmissionModal,
+  [ModalType.StakingBounceSurvey]: StakingBounceSurveyModal,
 }
 
 export interface BaseModalProps {

src/types/posthog.ts

@@ -1,3 +1,4 @@
 export enum PosthogEvent {
   ClosedModal = "Closed Modal",
+  StakingFlowBounce = "Staking Flow Bounce",
 }