diff --git a/src/requirements/VisitLink/VisitLinkRequirement.tsx b/src/requirements/VisitLink/VisitLinkRequirement.tsx
index 704f15a163..74c4fdf080 100644
--- a/src/requirements/VisitLink/VisitLinkRequirement.tsx
+++ b/src/requirements/VisitLink/VisitLinkRequirement.tsx
@@ -1,20 +1,18 @@
import {
+ AlertDialog,
+ AlertDialogAction,
AlertDialogBody,
+ AlertDialogCancel,
AlertDialogContent,
AlertDialogFooter,
AlertDialogHeader,
- AlertDialogOverlay,
- Box,
- Button,
- HStack,
- Icon,
- Link,
- Stack,
- Text,
- useColorModeValue,
- useDisclosure,
-} from "@chakra-ui/react"
-import { ArrowSquareOut, Link as LinkIcon } from "@phosphor-icons/react"
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@/components/ui/AlertDialog"
+import { Anchor } from "@/components/ui/Anchor"
+import { Button, buttonVariants } from "@/components/ui/Button"
+import { useErrorToast } from "@/components/ui/hooks/useErrorToast"
+import { ArrowSquareOut, Link } from "@phosphor-icons/react/dist/ssr"
import { useMembershipUpdate } from "components/[guild]/JoinModal/hooks/useMembershipUpdate"
import {
Requirement,
@@ -31,12 +29,9 @@ import {
} from "components/[guild]/Requirements/components/ResetRequirementButton"
import { ViewOriginalPopover } from "components/[guild]/Requirements/components/ViewOriginalPopover"
import useUser from "components/[guild]/hooks/useUser"
-import { Alert } from "components/common/Modal"
import { useRoleMembership } from "components/explorer/hooks/useMembership"
-import useShowErrorToast from "hooks/useShowErrorToast"
import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
-import NextLink from "next/link"
-import { useRef } from "react"
+import { ReactNode } from "react"
import { useFormContext } from "react-hook-form"
import fetcher from "utils/fetcher"
@@ -50,7 +45,6 @@ const visitLink = (signedValidation: SignedValidation) =>
const VisitLinkRequirement = ({ ...props }: RequirementProps) => {
const formContext = useFormContext()
- const { isOpen, onOpen, onClose } = useDisclosure()
const { id: requirementId, data, roleId } = useRequirementContext()
const { id: userId } = useUser()
@@ -61,10 +55,10 @@ const VisitLinkRequirement = ({ ...props }: RequirementProps) => {
(req) => req.requirementId === requirementId
)?.access
- const showErrorToast = useShowErrorToast()
+ const errorToast = useErrorToast()
const { onSubmit } = useSubmitWithSign(visitLink, {
onSuccess: () => triggerMembershipUpdate({ roleIds: [roleId] }),
- onError: () => showErrorToast("Something went wrong"),
+ onError: () => errorToast("Something went wrong"),
})
const isCustomName =
@@ -89,125 +83,120 @@ const VisitLinkRequirement = ({ ...props }: RequirementProps) => {
return (
<>
{"Visit link: "}
-
{data.id}
-
+
>
)
}
return (
This link is taking you to the following website. Please confirm it's
safe before continuing!
-
+ {urlArray[0]} + {urlObj.hostname} + {urlArray[1]} +
+