diff --git a/src/requirements/Points/PointsRequirement.tsx b/src/requirements/Points/PointsRequirement.tsx index c16b852c5c..b7eb537097 100644 --- a/src/requirements/Points/PointsRequirement.tsx +++ b/src/requirements/Points/PointsRequirement.tsx @@ -1,5 +1,5 @@ -import { Link } from "@chakra-ui/next-js" -import { Skeleton } from "@chakra-ui/react" +import { Anchor } from "@/components/ui/Anchor" +import { Skeleton } from "@/components/ui/Skeleton" import { GuildReward } from "@guildxyz/types" import { Requirement, @@ -12,20 +12,24 @@ import useGuildPlatform from "components/[guild]/hooks/useGuildPlatform" import Star from "static/icons/star.svg" import useSWRImmutable from "swr/immutable" -const ExternalGuildLink = ({ name, urlName }) => ( +type PointsRequirementTypes = "POINTS_AMOUNT" | "POINTS_TOTAL_AMOUNT" | "POINTS_RANK" + +const ExternalGuildLink = ({ name, urlName }: { name: string; urlName: string }) => ( <> - {` in the `} - - - {name ?? "Loading..."} - - - {` guild`} + {" in the "} + {!name ? ( + + ) : ( + + {name} + + )} + {" guild"} ) const PointsRank = (props: RequirementProps): JSX.Element => { - const requirement = useRequirementContext() + const requirement = useRequirementContext() const { guildId, minAmount, maxAmount } = requirement.data const { name, urlName } = useSimpleGuild(guildId) const { id: currentGuildId } = useGuild() @@ -36,40 +40,45 @@ const PointsRank = (props: RequirementProps): JSX.Element => { return ( } + image={pointsReward.platformGuildData?.imageUrl ?? } {...props} > - {minAmount - ? `Have a rank between ${minAmount} - ${maxAmount} on the ` - : `Be in the top ${maxAmount ?? ""} members on the `} - + {minAmount + ? `Have a rank between ${minAmount} - ${maxAmount} on the ` + : `Be in the top ${maxAmount ?? ""} members on the `} + + {`${pointsReward.platformGuildData.name} leaderboard`} + variant="highlighted" + showExternal + target="_blank" + >{`${pointsReward.platformGuildData?.name ?? "Unknown"} leaderboard`} {guildId !== currentGuildId && } ) } const PointsTotalAmount = (props: RequirementProps): JSX.Element => { - const requirement = useRequirementContext() + const requirement = useRequirementContext() const { guildId, minAmount, maxAmount } = requirement.data const { name, urlName } = useSimpleGuild(guildId) const { id: currentGuildId } = useGuild() return ( } {...props}> - {maxAmount - ? `Have a total score between ${minAmount} - ${maxAmount} summing all point types` - : `Have a total score of at least ${minAmount} summing all point types`} + + {maxAmount + ? `Have a total score between ${minAmount} - ${maxAmount} summing all point types` + : `Have a total score of at least ${minAmount} summing all point types`} + {guildId !== currentGuildId && } ) } const PointsAmount = (props: RequirementProps): JSX.Element => { - const requirement = useRequirementContext() + const requirement = useRequirementContext() const { guildId, minAmount, maxAmount } = requirement.data const { name, urlName } = useSimpleGuild(guildId) const { id: currentGuildId } = useGuild() @@ -78,16 +87,18 @@ const PointsAmount = (props: RequirementProps): JSX.Element => { if (!pointsReward) return - const pointsName = pointsReward.platformGuildData.name || "points" + const pointsName = pointsReward.platformGuildData?.name || "points" return ( } + image={pointsReward.platformGuildData?.imageUrl ?? } {...props} > - {maxAmount - ? `Have between ${minAmount} - ${maxAmount} ${pointsName}` - : `Have at least ${minAmount} ${pointsName}`} + + {maxAmount + ? `Have between ${minAmount} - ${maxAmount} ${pointsName}` + : `Have at least ${minAmount} ${pointsName}`} + {guildId !== currentGuildId && } ) @@ -96,7 +107,7 @@ const PointsAmount = (props: RequirementProps): JSX.Element => { const usePointsRewardForCurrentRequirement = () => { const { data: { guildPlatformId, guildId }, - } = useRequirementContext() + } = useRequirementContext>() const { id: currentGuildId } = useGuild() const { guildPlatform: pointsRewardInCurrentGuild } = @@ -120,7 +131,7 @@ const types = { } const PointsRequirement = (props: RequirementProps) => { - const { type } = useRequirementContext() + const { type } = useRequirementContext() const Component = types[type] return }