+
+
+
+
+
+
)
}
export const RequirementSkeleton = () => (
+
+ {requirement?.isNegated && DON'T }
{requirement?.type === "LINK_VISIT"
? children
: requirement?.data?.customName || children}
- {!setValue ? (
+
+
+
{rightElement}
-
+
+ {!setValue && (
+ )}
+ {footer}
{showViewOriginal && (
-
+
-
-
- {children}
-
+
)}
- {footer}
-
-
+
+
+
+ {children}
{!!setValue &&
+
{
diff --git a/src/components/[guild]/Requirements/components/RequirementButton.tsx b/src/components/[guild]/Requirements/components/RequirementButton.tsx
index 95c03dc38e..c404a10e77 100644
--- a/src/components/[guild]/Requirements/components/RequirementButton.tsx
+++ b/src/components/[guild]/Requirements/components/RequirementButton.tsx
@@ -1,39 +1,74 @@
-import { Img } from "@chakra-ui/react"
-import { ArrowSquareOut } from "@phosphor-icons/react"
-import Button from "components/common/Button"
+import { Anchor, AnchorProps, anchorVariants } from "@/components/ui/Anchor"
+import { Button, ButtonProps, buttonVariants } from "@/components/ui/Button"
+import { cn } from "@/lib/utils"
+import { ArrowSquareOut } from "@phosphor-icons/react/dist/ssr"
import { PropsWithChildren, forwardRef } from "react"
-import { Rest } from "types"
-type Props = PropsWithChildren
+type Props = PropsWithChildren
-const RequirementButton = forwardRef(({ children, ...rest }: Props, ref: any) => (
-
-))
+const RequirementButton = forwardRef(
+ (
+ { variant = "unstyled", className, children, ...buttonProps }: Props,
+ ref: any
+ ) => (
+
+ )
+)
-type LinkProps = Props & { imageUrl: string }
+interface LinkProps extends Omit {
+ label: string
+ imageUrl: string
+ variant?: Omit | "link"
+}
-const RequirementLinkButton = ({ children, imageUrl, ...rest }: LinkProps) => (
- (
+
+ 
+ {label}
+
- ![]()
+ ![{CHAIN_CONFIG[chain].name}]({CHAIN_CONFIG[chain].iconUrl})
- {CHAIN_CONFIG[chain].name}
-
+ {CHAIN_CONFIG[chain].name}
+
)
}
-export default RequirementChainIndicator
+export { RequirementChainIndicator }
diff --git a/src/components/[guild]/Requirements/components/RequirementContext.tsx b/src/components/[guild]/Requirements/components/RequirementContext.tsx
index ec8959bfa7..f2be210438 100644
--- a/src/components/[guild]/Requirements/components/RequirementContext.tsx
+++ b/src/components/[guild]/Requirements/components/RequirementContext.tsx
@@ -1,5 +1,6 @@
import { schemas } from "@guildxyz/types"
import { PropsWithChildren, createContext, useContext } from "react"
+import { RequirementType } from "requirements/types"
import { Requirement } from "types"
import { z } from "zod"
@@ -24,12 +25,11 @@ const RequirementProvider = ({
)
}
-type ReqType = z.output["type"]
-const useRequirementContext = () => {
+const useRequirementContext = () => {
const requirement = useContext(RequirementContext)
return requirement as unknown as Extract<
z.output,
- { type: RequirementType }
+ { type: T }
>
}
diff --git a/src/components/[guild]/Requirements/components/RequirementDisplayComponent.tsx b/src/components/[guild]/Requirements/components/RequirementDisplayComponent.tsx
index a26e87420d..7348adec4e 100644
--- a/src/components/[guild]/Requirements/components/RequirementDisplayComponent.tsx
+++ b/src/components/[guild]/Requirements/components/RequirementDisplayComponent.tsx
@@ -1,20 +1,22 @@
import { usePostHogContext } from "@/components/Providers/PostHogProvider"
-import { Icon } from "@chakra-ui/react"
-import { Warning } from "@phosphor-icons/react"
-import DataBlock from "components/common/DataBlock"
+import { Warning } from "@phosphor-icons/react/dist/ssr"
+import { DataBlock } from "components/common/DataBlock"
import { PropsWithChildren } from "react"
import { ErrorBoundary } from "react-error-boundary"
import { REQUIREMENT_DISPLAY_COMPONENTS } from "requirements/requirementDisplayComponents"
-import { Requirement as RequirementType, Rest } from "types"
+import { Requirement as RequirementType } from "types"
import { CHAIN_CONFIG } from "wagmiConfig/chains"
-import Requirement from "./Requirement"
+import { Requirement, RequirementProps } from "./Requirement"
import { RequirementAccessIndicator } from "./RequirementAccessIndicator"
import { RequirementProvider, useRequirementContext } from "./RequirementContext"
-type Props = {
+interface Props extends RequirementProps {
requirement: RequirementType
- rightElement?: JSX.Element
-} & Rest
+}
+
+export const RequirementWarningIcon = () => (
+ {requirement.chain}
@@ -33,7 +35,7 @@ const RequirementDisplayComponent = ({
if (!RequirementComponent)
return (
- {requirement.type}
@@ -64,11 +66,8 @@ export const InvalidRequirementErrorBoundary = ({
return (
{requirement.type}
}
@@ -86,4 +85,4 @@ export const InvalidRequirementErrorBoundary = ({
)
}
-export default RequirementDisplayComponent
+export { RequirementDisplayComponent }
diff --git a/src/components/[guild]/Requirements/components/RequirementImage.tsx b/src/components/[guild]/Requirements/components/RequirementImage.tsx
index 23484ec4ba..98c7346336 100644
--- a/src/components/[guild]/Requirements/components/RequirementImage.tsx
+++ b/src/components/[guild]/Requirements/components/RequirementImage.tsx
@@ -1,5 +1,5 @@
-import { Circle, Img, SkeletonCircle, useColorModeValue } from "@chakra-ui/react"
-import { PropsWithChildren } from "react"
+import { Skeleton } from "@/components/ui/Skeleton"
+import { PropsWithChildren, ReactNode } from "react"
type Props = {
isImageLoading?: boolean
@@ -8,49 +8,21 @@ type Props = {
const RequirementImageCircle = ({
isImageLoading,
children,
-}: PropsWithChildren) => {
- const imageBgColor = useColorModeValue("blackAlpha.100", "blackAlpha.300")
-
- return (
-
-
- {children}
-
-
+}: PropsWithChildren) =>
+ isImageLoading ? (
+ 
- )
+ return
+ return
}
export { RequirementImage, RequirementImageCircle }
diff --git a/src/components/[guild]/Requirements/components/ResetRequirementButton.tsx b/src/components/[guild]/Requirements/components/ResetRequirementButton.tsx
index f2c1fa8e1b..ca33710a75 100644
--- a/src/components/[guild]/Requirements/components/ResetRequirementButton.tsx
+++ b/src/components/[guild]/Requirements/components/ResetRequirementButton.tsx
@@ -1,27 +1,24 @@
-import { Button } from "@chakra-ui/react"
+import { Button } from "@/components/ui/Button"
+import { Schemas } from "@guildxyz/types"
import useEditRequirement from "components/create-guild/Requirements/hooks/useEditRequirement"
import { useFormContext, useWatch } from "react-hook-form"
import { Requirement } from "types"
import { useRequirementContext } from "./RequirementContext"
+type Props = { requirement: Requirement }
+
export const getDefaultVisitLinkCustomName = (
requirementData: Requirement["data"]
) => `Visit link: [${requirementData.id}]`
-const ResetNewRequirementButton = ({ requirement }) => {
- const { control, setValue } = useFormContext()
+const ResetNewRequirementButton = ({ requirement }: Props) => {
+ const { control, setValue } = useFormContext()
const requirements = useWatch({ name: "requirements", control })
- /**
- * We don't get formFieldId from requirements (and useFieldArray would give a new
- * formFieldId), so we get the actual requirement's index by comparing object
- * value. It works until there're two requirements that are exactly identical,
- * which is not a usecase
- */
- const index = requirements?.findIndex((req) => {
- const reqWithoutFormFieldId = structuredClone(requirement)
- delete reqWithoutFormFieldId.formFieldId
- return JSON.stringify(req) === JSON.stringify(reqWithoutFormFieldId)
- })
+
+ // The ID field doesn't exist in the schema, but react-hook-form will generate a uuid for each field, so it's safe to use it here
+ const index = requirements?.findIndex(
+ (req) => "id" in req && req.id === requirement.id
+ )
const onReset = () => {
setValue(`requirements.${index}.data.customName`, "")
@@ -29,13 +26,13 @@ const ResetNewRequirementButton = ({ requirement }) => {
}
return (
-
diff --git a/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/DynamicSetup/BaseValueModal.tsx b/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/DynamicSetup/BaseValueModal.tsx
index 7bb893eda8..036eb850e8 100644
--- a/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/DynamicSetup/BaseValueModal.tsx
+++ b/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/DynamicSetup/BaseValueModal.tsx
@@ -11,7 +11,7 @@ import {
import { CaretRight } from "@phosphor-icons/react"
import { LogicDivider } from "components/[guild]/LogicDivider"
import { useRequirementHandlerContext } from "components/[guild]/RequirementHandlerContext"
-import RequirementDisplayComponent from "components/[guild]/Requirements/components/RequirementDisplayComponent"
+import { RequirementDisplayComponent } from "components/[guild]/Requirements/components/RequirementDisplayComponent"
import DisplayCard from "components/common/DisplayCard"
import { Modal } from "components/common/Modal"
import AddRequirement from "components/create-guild/Requirements/components/AddRequirement"
diff --git a/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/DynamicSetup/DynamicRewardSetup.tsx b/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/DynamicSetup/DynamicRewardSetup.tsx
index b601cb1bd7..33586e90be 100644
--- a/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/DynamicSetup/DynamicRewardSetup.tsx
+++ b/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/DynamicSetup/DynamicRewardSetup.tsx
@@ -10,7 +10,7 @@ import {
} from "@chakra-ui/react"
import { ArrowsClockwise, Lightning } from "@phosphor-icons/react"
import { useRequirementHandlerContext } from "components/[guild]/RequirementHandlerContext"
-import RequirementDisplayComponent from "components/[guild]/Requirements/components/RequirementDisplayComponent"
+import { RequirementDisplayComponent } from "components/[guild]/Requirements/components/RequirementDisplayComponent"
import AddCard from "components/common/AddCard"
import Button from "components/common/Button"
import Card from "components/common/Card"
diff --git a/src/components/[guild]/SetVisibility/hooks/useVisibilityTooltipLabel.tsx b/src/components/[guild]/SetVisibility/hooks/useVisibilityTooltipLabel.tsx
index 616f85c2bf..68d1a94771 100644
--- a/src/components/[guild]/SetVisibility/hooks/useVisibilityTooltipLabel.tsx
+++ b/src/components/[guild]/SetVisibility/hooks/useVisibilityTooltipLabel.tsx
@@ -29,6 +29,7 @@ const useVisibilityTooltipLabel = (
bgColor={"blackAlpha.600"}
name={role.name}
imageUrl={role.imageUrl}
+ mx="0.5"
/>
) : (
"selected"
diff --git a/src/components/[guild]/Visibility.tsx b/src/components/[guild]/Visibility.tsx
index 621981204d..e60a330d29 100644
--- a/src/components/[guild]/Visibility.tsx
+++ b/src/components/[guild]/Visibility.tsx
@@ -1,19 +1,25 @@
-import { Tag, TagLabel, TagLeftIcon, TagProps, Tooltip } from "@chakra-ui/react"
+import { Badge, BadgeProps } from "@/components/ui/Badge"
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipPortal,
+ TooltipTrigger,
+} from "@/components/ui/Tooltip"
+import { cn } from "@/lib/utils"
import { Visibility as VisibilityType } from "@guildxyz/types"
import useVisibilityTooltipLabel from "./SetVisibility/hooks/useVisibilityTooltipLabel"
import { VISIBILITY_DATA } from "./SetVisibility/visibilityData"
-type Props = {
+interface Props extends BadgeProps {
entityVisibility: VisibilityType
visibilityRoleId: number | null
- showTagLabel?: boolean
-} & TagProps
+}
const Visibility = ({
entityVisibility,
visibilityRoleId,
- showTagLabel,
- ...tagProps
+ className,
+ ...badgeProps
}: Props) => {
const VisibilityIcon = VISIBILITY_DATA[entityVisibility].Icon
@@ -22,19 +28,25 @@ const Visibility = ({
if (entityVisibility === "PUBLIC") return null
return (
-
+ {children}
+
)
-}
-const RequirementImage = ({ image }) => {
+const RequirementImage = ({ image }: { image: ReactNode | string }) => {
if (typeof image !== "string") return image
if (image.endsWith(".mp4"))
- return (
-
- )
- return (
- {error}
+