From 4bb492083e498c27333256b87f0fdce5ae80b7fc Mon Sep 17 00:00:00 2001 From: BrickheadJohnny <92519134+BrickheadJohnny@users.noreply.github.com> Date: Tue, 13 Aug 2024 15:01:36 +0200 Subject: [PATCH 1/3] feat: simplify access hub (#1436) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: remove rewards from the access hub * simplify `RoleCardComponent` & rename to `SmallRewardPreview` * fix: access hub shadow visibility * feat(GuildPinRewardCard): remove labael & border * feat(page cards): use tailwind css * feat: use the big reward cards on role cards * feat: wider layout * feat: remove text above the requirements * Revert "feat: remove text above the requirements" This reverts commit df53e123cdc67b72dde40b17e4bb2e33f244ab03. * feat(RoleRequirementsSection): update copy * fix(StickyAction): container width * feat(RoleRewards): display token rewards * fix(PlatformCardMenu): lighter icon button color in light mode * feat(AccessedGuildPlatformCard): remove shadow * fix(LogicDivider): update `ANY_OF` label * fix(RoleRewards): temporarily use `PointsRewardCard` for point rewards * fix(RoleRewards): use 1 column grid below `xl` viewports * fix(AccessHub): responsiveness * feat(points reward): use the generic reward card component * fix(RoleDescription): decrease max description height * fix(RoleCard): add `SlideFade` animation to reward icons * feat(HiddenReward): use the `RewardCard` component * cleanup(AccessHub): remove unused `useAccessedGuildPlatforms` hook * feat(group page): wider container * fix(GuildTabs): don't show Settings on Leaderboard for simple users * feat(CardPropsHook): remove `shouldHide` property * feat: responsive reward cards & buttons * feat(PlatformCardMenu): ghost variant * fix(GuildPinRewardCard): use custom card * cleanup(AccessHub): remove the "No rewards yet" card * feat: `RewardCardButton` component * fix(AccessHub): `showAccessHub` condition * fix(RoleRewards): move `TokenRewardProvider` to `ClaimTokenButton` * cleanup: remove empty imports * fix(ClaimTextModal): remove now invalid info about disappearing * RewardCardButton: tooltip & outline if not member, always bypass if link, fix optional chaining, copy impro, simpler conditions * fix(RoleRewards): define default grid cols * fix(RoleCard): don't close the card by default --------- Co-authored-by: valid --- .../[guild]/AccessHub/AccessHub.tsx | 137 +++--------------- .../components/AccessedGuildPlatformCard.tsx | 26 ++-- .../CampaignCards/CampaignCards.tsx | 107 +++++--------- .../AccessHub/components/CreatePageCard.tsx | 75 +++------- .../components/GuildPinRewardCard.tsx | 68 ++++----- .../components/PlatformAccessButton.tsx | 6 +- src/components/[guild]/LogicDivider.tsx | 2 +- .../PaymentTransactionStatusModal.tsx | 1 - src/components/[guild]/RoleCard/RoleCard.tsx | 61 ++------ .../RoleCard/components/HiddenRewards.tsx | 25 ++-- .../[guild]/RoleCard/components/Reward.tsx | 37 +---- .../RoleCard/components/RoleDescription.tsx | 10 +- .../components/RoleRequirementsSection.tsx | 2 +- .../RoleCard/components/RoleRewards.tsx | 52 +++++++ .../[guild]/RoleCard/components/types.ts | 2 - .../components/PlatformCard/PlatformCard.tsx | 4 +- .../components/PlatformCardMenu.tsx | 2 +- src/components/[guild]/Tabs/GuildTabs.tsx | 11 +- src/components/common/RewardCard.tsx | 28 ++-- src/pages/[guild]/[group].tsx | 8 +- src/pages/[guild]/dashboard/index.tsx | 1 - src/pages/[guild]/index.tsx | 8 +- .../ContractCall/ContractCallReward.tsx | 36 +---- .../ContractCallRewardCardButton.tsx | 10 +- src/rewards/ContractCall/components.ts | 2 +- .../ContractCall/useContractCallCardProps.tsx | 11 -- src/rewards/Forms/FormCardLinkButton.tsx | 16 +- src/rewards/Forms/components.ts | 2 +- src/rewards/Forms/useFormCardProps.tsx | 3 - src/rewards/Gather/GatherCardButton.tsx | 14 +- src/rewards/Gather/components.ts | 2 +- src/rewards/Poap/PoapCardButton.tsx | 15 +- src/rewards/Poap/components.ts | 2 +- src/rewards/Points/PointsCardButton.tsx | 21 ++- src/rewards/Points/PointsRewardCard.tsx | 59 -------- src/rewards/Points/components.tsx | 6 +- src/rewards/Points/usePointsCardProps.tsx | 9 +- src/rewards/PolygonID/PolygonIDCardButton.tsx | 7 +- src/rewards/PolygonID/components.ts | 2 +- src/rewards/SecretText/TextCardButton.tsx | 28 +--- src/rewards/SecretText/components.ts | 2 +- .../SecretText/useSecretTextCardProps.tsx | 6 - src/rewards/Token/ClaimTokenButton.tsx | 22 ++- src/rewards/Token/TokenRewardCard.tsx | 1 + src/rewards/Token/TokenRewardContext.tsx | 7 +- src/rewards/Token/components.ts | 2 +- src/rewards/UniqueText/components.ts | 2 +- .../UniqueText/useUniqueTextCardProps.tsx | 6 - src/rewards/components/FormReward.tsx | 3 +- src/rewards/components/GatherReward.tsx | 3 +- src/rewards/components/PoapReward.tsx | 3 +- src/rewards/components/PointsReward.tsx | 3 +- src/rewards/components/PolygonIDReward.tsx | 3 +- src/rewards/components/RewardCardButton.tsx | 48 ++++++ src/rewards/components/TextReward.tsx | 3 +- src/rewards/types.ts | 3 +- src/utils/rolePlatformHelpers.ts | 7 +- src/v2/components/StickyAction.tsx | 9 +- 58 files changed, 387 insertions(+), 664 deletions(-) create mode 100644 src/components/[guild]/RoleCard/components/RoleRewards.tsx delete mode 100644 src/rewards/Points/PointsRewardCard.tsx create mode 100644 src/rewards/components/RewardCardButton.tsx diff --git a/src/components/[guild]/AccessHub/AccessHub.tsx b/src/components/[guild]/AccessHub/AccessHub.tsx index 5d7450641d..e4736c663c 100644 --- a/src/components/[guild]/AccessHub/AccessHub.tsx +++ b/src/components/[guild]/AccessHub/AccessHub.tsx @@ -1,27 +1,11 @@ -import { - Alert, - AlertDescription, - AlertTitle, - Collapse, - Icon, - SimpleGrid, - Stack, -} from "@chakra-ui/react" -import { StarHalf } from "@phosphor-icons/react" -import Card from "components/common/Card" +import { Collapse, SimpleGrid } from "@chakra-ui/react" import ClientOnly from "components/common/ClientOnly" import useMembership from "components/explorer/hooks/useMembership" import dynamic from "next/dynamic" -import PointsRewardCard from "rewards/Points/PointsRewardCard" -import { TokenRewardCard } from "rewards/Token/TokenRewardCard" -import { PlatformType } from "types" import useGuild from "../hooks/useGuild" import useGuildPermission from "../hooks/useGuildPermission" import useRoleGroup from "../hooks/useRoleGroup" -import AccessedGuildPlatformCard from "./components/AccessedGuildPlatformCard" import CampaignCards from "./components/CampaignCards" -import { useAccessedGuildPoints } from "./hooks/useAccessedGuildPoints" -import { useTokenRewards } from "./hooks/useTokenRewards" const DynamicGuildPinRewardCard = dynamic( () => import("./components/GuildPinRewardCard") @@ -31,54 +15,6 @@ const DynamicCreatedPageCard = dynamic(() => import("./components/CreatePageCard").then((m) => m.CreatePageCard) ) -export const useAccessedGuildPlatforms = (groupId?: number) => { - const { guildPlatforms, roles } = useGuild() - const { isAdmin } = useGuildPermission() - const { roleIds } = useMembership() - - const relevantRoles = groupId - ? roles.filter((role) => role.groupId === groupId) - : roles.filter((role) => !role.groupId) - - const relevantGuildPlatformIds = relevantRoles.flatMap((role) => - role.rolePlatforms.map((rp) => rp.guildPlatformId) - ) - const relevantGuildPlatforms = guildPlatforms.filter( - (gp) => - relevantGuildPlatformIds.includes(gp.id) && - gp.platformId !== PlatformType.POINTS && - gp.platformId !== PlatformType.ERC20 - ) - - // Displaying CONTRACT_CALL rewards for everyone, even for users who aren't members - const contractCallGuildPlatforms = - relevantGuildPlatforms?.filter( - (guildPlatform) => guildPlatform.platformId === PlatformType.CONTRACT_CALL - ) ?? [] - - if (isAdmin) return relevantGuildPlatforms - - if (!roleIds) return contractCallGuildPlatforms - - const accessedRoles = roles.filter((role) => roleIds.includes(role.id)) - const accessedRolePlatforms = accessedRoles - .map((role) => role.rolePlatforms) - .flat() - .filter((rolePlatform) => !!rolePlatform) - const accessedGuildPlatformIds = [ - ...new Set( - accessedRolePlatforms.map((rolePlatform) => rolePlatform.guildPlatformId) - ), - ] - const accessedGuildPlatforms = relevantGuildPlatforms?.filter( - (guildPlatform) => - accessedGuildPlatformIds.includes(guildPlatform.id) || - guildPlatform.platformId === PlatformType.CONTRACT_CALL - ) - - return accessedGuildPlatforms -} - const AccessHub = (): JSX.Element => { const { featureFlags, guildPin, groups, roles } = useGuild() @@ -86,73 +22,40 @@ const AccessHub = (): JSX.Element => { const { isAdmin } = useGuildPermission() const { isMember } = useMembership() - const accessedGuildPlatforms = useAccessedGuildPlatforms(group?.id) - const accessedGuildPoints = useAccessedGuildPoints("ACCESSED_ONLY") - const accessedGuildTokens = useTokenRewards(!isAdmin) - const shouldShowGuildPin = !group && - featureFlags.includes("GUILD_CREDENTIAL") && + featureFlags?.includes("GUILD_CREDENTIAL") && ((isMember && guildPin?.isActive) || isAdmin) const hasVisiblePages = !!groups?.length && roles?.some((role) => !!role.groupId) - const showAccessHub = - isAdmin || - isMember || - !!accessedGuildPlatforms?.length || - (hasVisiblePages && !group) + const showAccessHub = isAdmin || (hasVisiblePages && !group) || shouldShowGuildPin return ( - + - - {accessedGuildPlatforms?.map((platform) => ( - - ))} - - {accessedGuildPoints?.map((pointPlatform) => ( - - ))} - - {accessedGuildTokens?.map((platform) => ( - - ))} - - {(isMember || isAdmin) && - (!group ? !groups?.length : true) && - !shouldShowGuildPin && - !accessedGuildPlatforms?.length && - !accessedGuildPoints?.length && - !accessedGuildTokens?.length && ( - - - - - - {!group ? "No accessed reward" : "No rewards yet"} - - - {!!group && isAdmin - ? "This page doesn’t have any auto-managed rewards yet. Add some roles below so their rewards will appear here!" - : "You're a member of the guild, but your roles don't give you any auto-managed rewards. The owner might add some in the future or reward you another way!"} - - - - - )} - - {shouldShowGuildPin && } - {isAdmin && } + {shouldShowGuildPin && } diff --git a/src/components/[guild]/AccessHub/components/AccessedGuildPlatformCard.tsx b/src/components/[guild]/AccessHub/components/AccessedGuildPlatformCard.tsx index 042fde1bdc..fad99083e6 100644 --- a/src/components/[guild]/AccessHub/components/AccessedGuildPlatformCard.tsx +++ b/src/components/[guild]/AccessHub/components/AccessedGuildPlatformCard.tsx @@ -1,42 +1,46 @@ import PlatformCard from "components/[guild]/RolePlatforms/components/PlatformCard" +import { useRolePlatform } from "components/[guild]/RolePlatforms/components/RolePlatformProvider" import useGuild from "components/[guild]/hooks/useGuild" import useGuildPermission from "components/[guild]/hooks/useGuildPermission" import rewards from "rewards" import { cardPropsHooks } from "rewards/cardPropsHooks" import rewardComponents from "rewards/components" -import { GuildPlatform, PlatformName, PlatformType } from "types" +import { PlatformName, PlatformType } from "types" import PlatformAccessButton from "./PlatformAccessButton" -const AccessedGuildPlatformCard = ({ platform }: { platform: GuildPlatform }) => { +const AccessedGuildPlatformCard = () => { + const { guildPlatform } = useRolePlatform() const { isDetailed } = useGuild() const { isAdmin } = useGuildPermission() - if (!rewards[PlatformType[platform.platformId]]) return null + if (!rewards[PlatformType[guildPlatform.platformId]]) return null const { - // cardPropsHook: useCardProps, cardMenuComponent: PlatformCardMenu, cardWarningComponent: PlatformCardWarning, cardButton: PlatformCardButton, - } = rewardComponents[PlatformType[platform.platformId] as PlatformName] - const useCardProps = cardPropsHooks[PlatformType[platform.platformId]] + } = rewardComponents[PlatformType[guildPlatform.platformId] as PlatformName] + const useCardProps = cardPropsHooks[PlatformType[guildPlatform.platformId]] return ( + ) : PlatformCardWarning ? ( - + ) : null } + h="full" + p={{ base: 3, sm: 4 }} + boxShadow="none" > {PlatformCardButton ? ( - + ) : ( - + )} ) diff --git a/src/components/[guild]/AccessHub/components/CampaignCards/CampaignCards.tsx b/src/components/[guild]/AccessHub/components/CampaignCards/CampaignCards.tsx index 7134759efc..cd6683723b 100644 --- a/src/components/[guild]/AccessHub/components/CampaignCards/CampaignCards.tsx +++ b/src/components/[guild]/AccessHub/components/CampaignCards/CampaignCards.tsx @@ -1,24 +1,13 @@ -import { - Circle, - HStack, - Img, - SkeletonCircle, - Tag, - TagLabel, - TagLeftIcon, - Text, - Tooltip, - VStack, - useColorModeValue, -} from "@chakra-ui/react" -import { ArrowRight, EyeSlash, Plus } from "@phosphor-icons/react" +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar" +import { Badge } from "@/components/ui/Badge" +import { Card } from "@/components/ui/Card" +import { Skeleton } from "@/components/ui/Skeleton" +import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip" +import { ArrowRight, EyeSlash, Plus } from "@phosphor-icons/react/dist/ssr" import useGuild from "components/[guild]/hooks/useGuild" import useGuildPermission from "components/[guild]/hooks/useGuildPermission" import Button from "components/common/Button" -import ColorCard from "components/common/ColorCard" -import ColorCardLabel from "components/common/ColorCard/ColorCardLabel" import dynamic from "next/dynamic" -import Image from "next/image" import Link from "next/link" import { useRouter } from "next/router" @@ -37,8 +26,6 @@ const CampaignCards = () => { } = useGuild() const { query } = useRouter() - const imageBgColor = useColorModeValue("gray.700", "gray.600") - if (!groups?.length || !!query.group) return null const renderedGroups = isAdmin @@ -58,60 +45,46 @@ const CampaignCards = () => { campaignImage = guildImageUrl return ( - {isAdmin && } - - {campaignImage.length > 0 ? ( - - {campaignImage.match("guildLogos") ? ( - Guild logo - ) : ( - {name} - )} - - ) : ( - - )} +
+ + + + + + - - {name} +
+ {name} {hideFromGuildPage && ( - - - - Hidden - + + + + + Hidden + + + +

+ Members don't see this, they can only access this page by + visiting it's link directly +

+ )} - - - +
+
{groupHasRoles ? ( )} - - - + ) })} diff --git a/src/components/[guild]/AccessHub/components/CreatePageCard.tsx b/src/components/[guild]/AccessHub/components/CreatePageCard.tsx index 750f760905..59eea194b3 100644 --- a/src/components/[guild]/AccessHub/components/CreatePageCard.tsx +++ b/src/components/[guild]/AccessHub/components/CreatePageCard.tsx @@ -1,67 +1,32 @@ -import { - Circle, - HStack, - Icon, - Text, - VStack, - useColorModeValue, - useDisclosure, -} from "@chakra-ui/react" -import { FolderSimplePlus } from "@phosphor-icons/react" -import { Plus } from "@phosphor-icons/react/dist/ssr" +import { Button } from "@/components/ui/Button" +import { Card } from "@/components/ui/Card" +import { useDisclosure } from "@/hooks/useDisclosure" +import { FolderSimplePlus, Plus } from "@phosphor-icons/react/dist/ssr" import CreateCampaignModal from "components/[guild]/CreateCampaignModal" -import Button from "components/common/Button" -import ColorCard from "components/common/ColorCard" -import ColorCardLabel from "components/common/ColorCard/ColorCardLabel" const CreatePageCard = () => { - const imageBgColor = useColorModeValue("gray.700", "gray.600") const { isOpen, onOpen, onClose } = useDisclosure() return ( - - - - - - - Create page - - Group roles on a separate page - - - + +
+
+ +
-
+ - - - - + ) } diff --git a/src/components/[guild]/AccessHub/components/GuildPinRewardCard.tsx b/src/components/[guild]/AccessHub/components/GuildPinRewardCard.tsx index 5441d55a9e..8470756d83 100644 --- a/src/components/[guild]/AccessHub/components/GuildPinRewardCard.tsx +++ b/src/components/[guild]/AccessHub/components/GuildPinRewardCard.tsx @@ -1,9 +1,9 @@ -import { Icon, Tooltip, useColorModeValue } from "@chakra-ui/react" -import { CircleWavyCheck, Question } from "@phosphor-icons/react" +import { Avatar, AvatarImage } from "@/components/ui/Avatar" +import { Card } from "@/components/ui/Card" +import { useColorModeValue } from "@chakra-ui/react" import { useMintGuildPinContext } from "components/[guild]/Requirements/components/GuildCheckout/MintGuildPinContext" import useGuild from "components/[guild]/hooks/useGuild" import useGuildPermission from "components/[guild]/hooks/useGuildPermission" -import RewardCard from "components/common/RewardCard" import dynamic from "next/dynamic" const DynamicMintGuildPin = dynamic( @@ -18,7 +18,6 @@ const DynamicMintFuelGuildPin = dynamic( ) const GuildPinRewardCard = () => { - const bgColor = useColorModeValue("var(--chakra-colors-gray-100)", "#343439") const bgFile = useColorModeValue("bg_light.svg", "bg.svg") const { isAdmin } = useGuildPermission() @@ -27,48 +26,37 @@ const GuildPinRewardCard = () => { const { isInvalidImage, isTooSmallImage } = useMintGuildPinContext() return ( - - - Guild.xyz - - - - - } - title="Guild Pin" - image="/img/guild-pin-key-3d.svg" - colorScheme={!guildPin?.isActive ? "gray" : "GUILD"} - borderStyle={!guildPin?.isActive && "dashed"} - description={ - !guildPin?.isActive - ? "Mintable badge of membership" - : "Onchain badge that shows your support and belonging to this community." - } - bg={bgColor} - _before={{ - content: '""', - position: "absolute", - top: 0, - bottom: 0, - left: 0, - right: 0, - bg: `linear-gradient(to top right, ${bgColor} 70%, transparent), url('/landing/${bgFile}')`, - bgSize: "140%", - bgRepeat: "no-repeat", - bgPosition: "top 7px right 7px", - opacity: "0.07", - }} - > + +
+
+
+
+ + + +
+ +
+ Guild Pin + + {!guildPin?.isActive + ? "Mintable badge of membership" + : "Onchain badge that shows your support and belonging to this community."} + +
+
{(!(isInvalidImage || isTooSmallImage) || isAdmin) && (guildPin?.chain !== "FUEL" ? ( ) : ( ))} - + ) } diff --git a/src/components/[guild]/AccessHub/components/PlatformAccessButton.tsx b/src/components/[guild]/AccessHub/components/PlatformAccessButton.tsx index 0239a54f9d..f33018aab4 100644 --- a/src/components/[guild]/AccessHub/components/PlatformAccessButton.tsx +++ b/src/components/[guild]/AccessHub/components/PlatformAccessButton.tsx @@ -1,7 +1,7 @@ import { Icon } from "@chakra-ui/react" import { ArrowSquareOut } from "@phosphor-icons/react" -import Button from "components/common/Button" import rewards from "rewards" +import { RewardCardButton } from "rewards/components/RewardCardButton" import { GuildPlatform, PlatformType } from "types" import usePlatformAccessButton from "./usePlatformAccessButton" @@ -14,14 +14,14 @@ const PlatformAccessButton = ({ platform }: Props) => { const { colorScheme, icon } = rewards[PlatformType[platform.platformId]] return ( - + ) } diff --git a/src/components/[guild]/LogicDivider.tsx b/src/components/[guild]/LogicDivider.tsx index b6fe0a393f..8fb2cc75e7 100644 --- a/src/components/[guild]/LogicDivider.tsx +++ b/src/components/[guild]/LogicDivider.tsx @@ -7,7 +7,7 @@ type Props = { logic: Logic } & Rest export const formattedLogic: Record = { AND: "AND", OR: "OR", - ANY_OF: "AND / OR", + ANY_OF: "OR", } const LogicDivider = ({ logic, ...rest }: Props): JSX.Element => { diff --git a/src/components/[guild]/Requirements/components/GuildCheckout/components/PaymentTransactionStatusModal.tsx b/src/components/[guild]/Requirements/components/GuildCheckout/components/PaymentTransactionStatusModal.tsx index 13fa37a5dc..bbf60791dc 100644 --- a/src/components/[guild]/Requirements/components/GuildCheckout/components/PaymentTransactionStatusModal.tsx +++ b/src/components/[guild]/Requirements/components/GuildCheckout/components/PaymentTransactionStatusModal.tsx @@ -46,7 +46,6 @@ export const UnlockingRewards = ({ roleId }: { roleId: number }) => { key={rp.guildPlatformId} platform={{ ...rp, guildPlatform }} role={role} - withMotionImg={false} withLink isLinkColorful /> diff --git a/src/components/[guild]/RoleCard/RoleCard.tsx b/src/components/[guild]/RoleCard/RoleCard.tsx index d2140a733f..f5a0b66055 100644 --- a/src/components/[guild]/RoleCard/RoleCard.tsx +++ b/src/components/[guild]/RoleCard/RoleCard.tsx @@ -1,5 +1,4 @@ import { - Box, Collapse, Flex, HStack, @@ -16,20 +15,19 @@ import useMembership, { } from "components/explorer/hooks/useMembership" import dynamic from "next/dynamic" import { memo, useEffect, useRef } from "react" -import rewards from "rewards" -import { PlatformType, Role } from "types" +import { Role } from "types" import RoleRequirements from "../Requirements" import useGuild from "../hooks/useGuild" import useGuildPermission from "../hooks/useGuildPermission" import AccessIndicator from "./components/AccessIndicator" -import HiddenRewards from "./components/HiddenRewards" import { RoleCardMemberCount } from "./components/MemberCount" -import Reward, { RewardIcon } from "./components/Reward" +import { RewardIcon } from "./components/Reward" import RoleDescription from "./components/RoleDescription" import RoleHeader from "./components/RoleHeader" import RoleRequirementsSection, { RoleRequirementsSectionHeader, } from "./components/RoleRequirementsSection" +import { RoleRewards } from "./components/RoleRewards" type Props = { role: Role @@ -63,11 +61,6 @@ const RoleCard = memo(({ role }: Props) => { if (!isOpen) onCloseExpanded() }, [isOpen, onCloseExpanded]) - useEffect(() => { - if (isMember && hasRoleAccess && !isAdmin) onClose() - else onOpen() - }, [isMember, hasRoleAccess, isAdmin, onClose, onOpen]) - const isMobile = useBreakpointValue({ base: true, md: false }, { fallback: "md" }) const collapsedHeight = isMobile && role.visibility === "PUBLIC" ? "90px" : "94px" @@ -109,15 +102,12 @@ const RoleCard = memo(({ role }: Props) => { ) return ( - + + + ) })} @@ -167,39 +157,8 @@ const RoleCard = memo(({ role }: Props) => { /> )} - - - {role.rolePlatforms?.map((platform, i) => { - const guildPlatformType = guildPlatforms.find( - (gp) => gp.id === platform.guildPlatformId - )?.platformId - - if (!rewards[PlatformType[guildPlatformType]]) return - return ( - - - - ) - })} - {role.hiddenRewards && } - - + diff --git a/src/components/[guild]/RoleCard/components/HiddenRewards.tsx b/src/components/[guild]/RoleCard/components/HiddenRewards.tsx index cf4d7cc8a3..923e41373e 100644 --- a/src/components/[guild]/RoleCard/components/HiddenRewards.tsx +++ b/src/components/[guild]/RoleCard/components/HiddenRewards.tsx @@ -1,22 +1,21 @@ -import { Center, useColorModeValue } from "@chakra-ui/react" +import { Circle, useColorModeValue } from "@chakra-ui/react" import { Question } from "@phosphor-icons/react" -import { RewardDisplay } from "./RewardDisplay" +import RewardCard from "components/common/RewardCard" const HiddenRewards = () => { - const rewardImageBgColor = useColorModeValue("blackAlpha.100", "blackAlpha.300") + const rewardImageBgColor = useColorModeValue("gray.700", "gray.600") return ( - - - + + + } + p={4} + pt={4} /> ) } diff --git a/src/components/[guild]/RoleCard/components/Reward.tsx b/src/components/[guild]/RoleCard/components/Reward.tsx index a7af0d5015..de8dce07ad 100644 --- a/src/components/[guild]/RoleCard/components/Reward.tsx +++ b/src/components/[guild]/RoleCard/components/Reward.tsx @@ -17,7 +17,6 @@ import Button from "components/common/Button" import useMembership, { useRoleMembership, } from "components/explorer/hooks/useMembership" -import { motion } from "framer-motion" import { useMemo, useState } from "react" import rewards from "rewards" import GoogleCardWarning from "rewards/Google/GoogleCardWarning" @@ -40,13 +39,7 @@ const getRewardLabel = (platform: RolePlatform) => { } } -const Reward = ({ - role, - platform, - withLink, - withMotionImg = false, - isLinkColorful, -}: RewardProps) => { +const Reward = ({ role, platform, withLink, isLinkColorful }: RewardProps) => { const { isMember } = useMembership() const openJoinModal = useOpenJoinModal() @@ -100,7 +93,6 @@ const Reward = ({ ) } @@ -148,13 +140,9 @@ const Reward = ({ ) } -const MotionImg = motion(Img) -const MotionCircle = motion(Circle) - const RewardIcon = ({ rolePlatformId, guildPlatform, - withMotionImg = true, transition, }: RewardIconProps) => { const [doIconFallback, setDoIconFallback] = useState(false) @@ -170,10 +158,6 @@ const RewardIcon = ({ }, } - const motionElementProps = { - layoutId: `${rolePlatformId}_reward_img`, - transition: { type: "spring", duration: 0.5, ...transition }, - } const circleBgColor = useColorModeValue("gray.700", "gray.600") const circleProps = { bgColor: circleBgColor, @@ -181,17 +165,6 @@ const RewardIcon = ({ } if (doIconFallback || !props.src) { - if (withMotionImg) { - return ( - - - - ) - } return ( - {withMotionImg ? ( - - ) : ( - - )} + ) } @@ -227,7 +196,7 @@ const RewardWrapper = ({ platform, ...props }: RewardProps) => { const platformWithGuildPlatform = { ...platform, guildPlatform } const Component = - rewardComponents[PlatformType[guildPlatform?.platformId]].RoleCardComponent ?? + rewardComponents[PlatformType[guildPlatform?.platformId]].SmallRewardPreview ?? Reward return ( diff --git a/src/components/[guild]/RoleCard/components/RoleDescription.tsx b/src/components/[guild]/RoleCard/components/RoleDescription.tsx index cbae80d15e..32b8596bf7 100644 --- a/src/components/[guild]/RoleCard/components/RoleDescription.tsx +++ b/src/components/[guild]/RoleCard/components/RoleDescription.tsx @@ -12,7 +12,7 @@ import { useEffect, useState } from "react" import parseDescription from "utils/parseDescription" import { RoleCardCollapseProps } from ".." -const MAX_INITIAL_REQS_HEIGHT = 250 +const MAX_INITIAL_DESCRIPTION_HEIGHT = 160 type Props = { description: string @@ -24,7 +24,7 @@ const RoleDescription = (props: Props) => { const descriptionHeight = descriptionRef.current?.getBoundingClientRect().height || 24 - if (descriptionHeight <= MAX_INITIAL_REQS_HEIGHT) + if (descriptionHeight <= MAX_INITIAL_DESCRIPTION_HEIGHT) return ( {parseDescription(description)} @@ -42,7 +42,7 @@ const CollapsableRoleDescription = ({ onToggleExpanded, }: Props) => { const [maxInitialReqsHeight, setMaxInitialReqsHeight] = useState( - MAX_INITIAL_REQS_HEIGHT + MAX_INITIAL_DESCRIPTION_HEIGHT ) useEffect(() => { @@ -50,8 +50,8 @@ const CollapsableRoleDescription = ({ const observer = new ResizeObserver((entries) => { const reqsHeight = entries[0].contentRect.height - if (reqsHeight > MAX_INITIAL_REQS_HEIGHT) - setMaxInitialReqsHeight(reqsHeight - 25) + if (reqsHeight > MAX_INITIAL_DESCRIPTION_HEIGHT) + setMaxInitialReqsHeight(MAX_INITIAL_DESCRIPTION_HEIGHT) }) observer.observe(initialRequirementsRef.current) diff --git a/src/components/[guild]/RoleCard/components/RoleRequirementsSection.tsx b/src/components/[guild]/RoleCard/components/RoleRequirementsSection.tsx index 10d0a36bab..484aa7a531 100644 --- a/src/components/[guild]/RoleCard/components/RoleRequirementsSection.tsx +++ b/src/components/[guild]/RoleCard/components/RoleRequirementsSection.tsx @@ -50,7 +50,7 @@ const RoleRequirementsSectionHeader = ({ pointerEvents={!isOpen ? "none" : "auto"} transition="opacity .2s" > - Requirements to qualify + Unlock rewards {children} diff --git a/src/components/[guild]/RoleCard/components/RoleRewards.tsx b/src/components/[guild]/RoleCard/components/RoleRewards.tsx new file mode 100644 index 0000000000..4cddd46a0c --- /dev/null +++ b/src/components/[guild]/RoleCard/components/RoleRewards.tsx @@ -0,0 +1,52 @@ +import { SlideFade } from "@chakra-ui/react" +import AccessedGuildPlatformCard from "components/[guild]/AccessHub/components/AccessedGuildPlatformCard" +import { RolePlatformProvider } from "components/[guild]/RolePlatforms/components/RolePlatformProvider" +import useGuild from "components/[guild]/hooks/useGuild" +import { Role } from "types" +import HiddenRewards from "./HiddenRewards" + +type Props = { + role: Role + isOpen: boolean +} + +const RoleRewards = ({ role, isOpen }: Props) => { + const { guildPlatforms } = useGuild() + + return ( +
+ {role.rolePlatforms?.map((rolePlatform, i) => { + const guildPlatform = guildPlatforms?.find( + (gp) => gp.id === rolePlatform.guildPlatformId + ) + + return ( + + + + + + ) + })} + + {role.hiddenRewards && } +
+ ) +} + +export { RoleRewards } diff --git a/src/components/[guild]/RoleCard/components/types.ts b/src/components/[guild]/RoleCard/components/types.ts index 6f5b37b746..791ec4b485 100644 --- a/src/components/[guild]/RoleCard/components/types.ts +++ b/src/components/[guild]/RoleCard/components/types.ts @@ -5,13 +5,11 @@ export type RewardProps = { role: Role // should change to just roleId when we won't need memberCount anymore platform: RolePlatform withLink?: boolean - withMotionImg?: boolean isLinkColorful?: boolean } export type RewardIconProps = { rolePlatformId: number guildPlatform: GuildPlatform - withMotionImg?: boolean transition?: Transition } diff --git a/src/components/[guild]/RolePlatforms/components/PlatformCard/PlatformCard.tsx b/src/components/[guild]/RolePlatforms/components/PlatformCard/PlatformCard.tsx index 323d02f1b7..7a67323066 100644 --- a/src/components/[guild]/RolePlatforms/components/PlatformCard/PlatformCard.tsx +++ b/src/components/[guild]/RolePlatforms/components/PlatformCard/PlatformCard.tsx @@ -22,9 +22,7 @@ const PlatformCard = ({ children, ...rest }: PropsWithChildren) => { - const { info, name, image, type, shouldHide } = usePlatformCardProps(guildPlatform) - - if (shouldHide) return null + const { info, name, image, type } = usePlatformCardProps(guildPlatform) return ( ) => ( boxSize={8} minW={8} rounded="full" - colorScheme="alpha" + variant="ghost" /> diff --git a/src/components/[guild]/Tabs/GuildTabs.tsx b/src/components/[guild]/Tabs/GuildTabs.tsx index 00ae174c24..01cc66cffd 100644 --- a/src/components/[guild]/Tabs/GuildTabs.tsx +++ b/src/components/[guild]/Tabs/GuildTabs.tsx @@ -25,9 +25,14 @@ const GuildTabs = ({ activeTab, ...rest }: Props): JSX.Element => { return ( - - Settings - + {isAdmin && ( + + Settings + + )} {firstExistingPointsReward && ( @@ -53,7 +54,6 @@ const RewardCard = ({ {typeof image === "string" ? ( @@ -94,16 +94,20 @@ const RewardCard = ({ {actionRow} + {children} - + + {label && ( + + )} ) diff --git a/src/pages/[guild]/[group].tsx b/src/pages/[guild]/[group].tsx index 86226a738c..823d9a207f 100644 --- a/src/pages/[guild]/[group].tsx +++ b/src/pages/[guild]/[group].tsx @@ -80,11 +80,11 @@ const GroupPage = (): JSX.Element => {
- + - +
@@ -99,13 +99,13 @@ const GroupPage = (): JSX.Element => { {group?.description && ( - + {parseDescription(group.description)} )} - +
{
- + - +
@@ -129,7 +129,7 @@ const GuildPage = (): JSX.Element => { {(description || Object.keys(socialLinks ?? {}).length > 0) && ( - + {description && parseDescription(description)} {Object.keys(socialLinks ?? {}).length > 0 && (
@@ -157,7 +157,7 @@ const GuildPage = (): JSX.Element => { )} - +
{ +const ContractCallReward = ({ platform, isLinkColorful }: RewardProps) => { const { urlName } = useGuild() const { captureEvent } = usePostHogContext() @@ -33,7 +27,6 @@ const ContractCallReward = ({ } @@ -69,22 +62,8 @@ const ContractCallReward = ({ ) } -const MotionImg = motion(Img) - -const MotionSkeletonCircle = motion( - forwardRef((props: SkeletonProps, ref: any) => ( - - - - )) -) - const ContractCallRewardIcon = ({ - rolePlatformId, guildPlatform, - isLoading, - withMotionImg = true, - transition, }: RewardIconProps & { isLoading?: boolean }) => { const { image } = useNftDetails( guildPlatform?.platformGuildData?.chain, @@ -98,17 +77,6 @@ const ContractCallRewardIcon = ({ borderRadius: "full", } - if (withMotionImg) - return isLoading || !props.src ? ( - - ) : ( - - ) - return } diff --git a/src/rewards/ContractCall/ContractCallRewardCardButton.tsx b/src/rewards/ContractCall/ContractCallRewardCardButton.tsx index c78931d70a..7efd5a6a3f 100644 --- a/src/rewards/ContractCall/ContractCallRewardCardButton.tsx +++ b/src/rewards/ContractCall/ContractCallRewardCardButton.tsx @@ -2,8 +2,8 @@ import { usePostHogContext } from "@/components/Providers/PostHogProvider" import { Tooltip } from "@chakra-ui/react" import useGuildRewardNftBalanceByUserId from "components/[guild]/collect/hooks/useGuildRewardNftBalanceByUserId" import useGuild from "components/[guild]/hooks/useGuild" -import Button from "components/common/Button" import Link from "next/link" +import { RewardCardButton } from "rewards/components/RewardCardButton" import { GuildPlatform } from "types" import { Chains } from "wagmiConfig/chains" @@ -31,14 +31,14 @@ const ContractCallRewardCardButton = ({ platform }: Props) => { if (!role) return ( - + ) return ( - + ) } diff --git a/src/rewards/ContractCall/components.ts b/src/rewards/ContractCall/components.ts index 502e2570a0..57de512d63 100644 --- a/src/rewards/ContractCall/components.ts +++ b/src/rewards/ContractCall/components.ts @@ -17,7 +17,7 @@ export default { loading: AddRewardPanelLoadingSpinner, } ), - RoleCardComponent: dynamic( + SmallRewardPreview: dynamic( () => import("rewards/ContractCall/ContractCallReward"), { ssr: false, diff --git a/src/rewards/ContractCall/useContractCallCardProps.tsx b/src/rewards/ContractCall/useContractCallCardProps.tsx index 7f7c4270fd..968c41991f 100644 --- a/src/rewards/ContractCall/useContractCallCardProps.tsx +++ b/src/rewards/ContractCall/useContractCallCardProps.tsx @@ -1,26 +1,16 @@ -import useGuildRewardNftBalanceByUserId from "components/[guild]/collect/hooks/useGuildRewardNftBalanceByUserId" import useNftDetails from "components/[guild]/collect/hooks/useNftDetails" import useGuild from "components/[guild]/hooks/useGuild" -import useGuildPermission from "components/[guild]/hooks/useGuildPermission" import { CardPropsHook } from "rewards/types" import { GuildPlatformWithOptionalId, PlatformName } from "types" -import { Chains } from "wagmiConfig/chains" import NftAvailabilityTags from "./components/NftAvailabilityTags" const useContractCallCardProps: CardPropsHook = ( guildPlatform: GuildPlatformWithOptionalId ) => { const { roles } = useGuild() - const { isAdmin } = useGuildPermission() const { chain, contractAddress } = guildPlatform.platformGuildData const { name, image } = useNftDetails(chain, contractAddress) - const { data: nftBalance } = useGuildRewardNftBalanceByUserId({ - nftAddress: contractAddress, - chainId: Chains[chain], - }) - const alreadyCollected = nftBalance && nftBalance > 0 - const rolePlatform = roles ?.flatMap((role) => role.rolePlatforms) .find((rp) => rp.guildPlatformId === guildPlatform.id) @@ -36,7 +26,6 @@ const useContractCallCardProps: CardPropsHook = ( mt={1} /> ), - shouldHide: !isAdmin && Boolean(alreadyCollected), } } diff --git a/src/rewards/Forms/FormCardLinkButton.tsx b/src/rewards/Forms/FormCardLinkButton.tsx index 18b0674369..6e20da12a9 100644 --- a/src/rewards/Forms/FormCardLinkButton.tsx +++ b/src/rewards/Forms/FormCardLinkButton.tsx @@ -2,10 +2,9 @@ import { Check } from "@phosphor-icons/react" import useGuild from "components/[guild]/hooks/useGuild" import { useGuildForm } from "components/[guild]/hooks/useGuildForms" import useGuildPermission from "components/[guild]/hooks/useGuildPermission" -import Button from "components/common/Button" -import { LinkButton } from "components/common/LinkMenuItem" import Link from "next/link" import rewards from "rewards" +import { RewardCardButton } from "rewards/components/RewardCardButton" import { GuildPlatform } from "types" import { useUserFormSubmission } from "./hooks/useFormSubmissions" @@ -24,29 +23,28 @@ const FormCardLinkButton = ({ platform }: Props) => { if (isAdmin && !!userSubmission) return ( - View responses - + ) return ( - + ) } export default FormCardLinkButton diff --git a/src/rewards/Forms/components.ts b/src/rewards/Forms/components.ts index 8f0e5c388f..62ba8859b6 100644 --- a/src/rewards/Forms/components.ts +++ b/src/rewards/Forms/components.ts @@ -7,7 +7,7 @@ import FormCardMenu from "./FormCardMenu" export default { cardButton: FormCardLinkButton, cardMenuComponent: FormCardMenu, - RoleCardComponent: dynamic(() => import("rewards/components/FormReward"), { + SmallRewardPreview: dynamic(() => import("rewards/components/FormReward"), { ssr: false, }), AddRewardPanel: dynamic( diff --git a/src/rewards/Forms/useFormCardProps.tsx b/src/rewards/Forms/useFormCardProps.tsx index 3da8cbcdef..28f5f7c26e 100644 --- a/src/rewards/Forms/useFormCardProps.tsx +++ b/src/rewards/Forms/useFormCardProps.tsx @@ -11,7 +11,6 @@ import { CardPropsHook } from "rewards/types" import { GuildPlatformWithOptionalId, PlatformName } from "types" import pluralize from "utils/pluralize" import { formData } from "./data" -import { useUserFormSubmission } from "./hooks/useFormSubmissions" const useFormCardProps: CardPropsHook = ( guildPlatform: GuildPlatformWithOptionalId @@ -20,7 +19,6 @@ const useFormCardProps: CardPropsHook = ( const circleBgColor = useColorModeValue("gray.700", "blackAlpha.300") const { form, isSigned } = useGuildForm(guildPlatform?.platformGuildData?.formId) - const { userSubmission } = useUserFormSubmission(form ?? null) return { type: "FORM" as PlatformName, @@ -34,7 +32,6 @@ const useFormCardProps: CardPropsHook = ( isSigned && isAdmin ? ( ) : undefined, - shouldHide: !isAdmin && !!userSubmission, } } diff --git a/src/rewards/Gather/GatherCardButton.tsx b/src/rewards/Gather/GatherCardButton.tsx index af115aff86..951b86393e 100644 --- a/src/rewards/Gather/GatherCardButton.tsx +++ b/src/rewards/Gather/GatherCardButton.tsx @@ -1,8 +1,8 @@ import { Tooltip } from "@chakra-ui/react" import { ArrowSquareOut } from "@phosphor-icons/react" import useGuild from "components/[guild]/hooks/useGuild" -import Button from "components/common/Button" import { claimTextButtonTooltipLabel } from "rewards/SecretText/TextCardButton" +import { RewardCardButton } from "rewards/components/RewardCardButton" import { GuildPlatform } from "types" import { getRolePlatformStatus, @@ -40,17 +40,16 @@ const GatherCardButton = ({ platform }: Props) => { return ( <> {claimed ? ( - + ) : ( { shouldWrapChildren w="full" > - + )} diff --git a/src/rewards/Gather/components.ts b/src/rewards/Gather/components.ts index b65edcd7f7..8899f0c355 100644 --- a/src/rewards/Gather/components.ts +++ b/src/rewards/Gather/components.ts @@ -7,7 +7,7 @@ import GatherCardMenu from "./GatherCardMenu" export default { cardButton: GatherCardButton, cardMenuComponent: GatherCardMenu, - RoleCardComponent: dynamic(() => import("rewards/components/GatherReward"), { + SmallRewardPreview: dynamic(() => import("rewards/components/GatherReward"), { ssr: false, }), AddRewardPanel: dynamic( diff --git a/src/rewards/Poap/PoapCardButton.tsx b/src/rewards/Poap/PoapCardButton.tsx index 7b310889d6..7ffacc5a8c 100644 --- a/src/rewards/Poap/PoapCardButton.tsx +++ b/src/rewards/Poap/PoapCardButton.tsx @@ -1,12 +1,12 @@ import { Tooltip, useDisclosure } from "@chakra-ui/react" import useGuild from "components/[guild]/hooks/useGuild" import useGuildPermission from "components/[guild]/hooks/useGuildPermission" -import Button from "components/common/Button" import { useClaimedReward } from "hooks/useClaimedReward" import dynamic from "next/dynamic" import Link from "next/link" import rewards from "rewards" import { claimTextButtonTooltipLabel } from "rewards/SecretText/TextCardButton" +import { RewardCardButton } from "rewards/components/RewardCardButton" import { GuildPlatform } from "types" import { getRolePlatformStatus, @@ -46,16 +46,18 @@ const PoapCardButton = ({ platform }: Props) => { {claimed ? ( Show mint link ) : !rolePlatform?.capacity && isAdmin ? ( <> - + { /> ) : ( - + )} diff --git a/src/rewards/Poap/components.ts b/src/rewards/Poap/components.ts index 8861c01611..87f76358db 100644 --- a/src/rewards/Poap/components.ts +++ b/src/rewards/Poap/components.ts @@ -15,7 +15,7 @@ export default { ssr: false, } ), - RoleCardComponent: dynamic(() => import("rewards/components/PoapReward"), { + SmallRewardPreview: dynamic(() => import("rewards/components/PoapReward"), { ssr: false, }), } satisfies RewardComponentsData diff --git a/src/rewards/Points/PointsCardButton.tsx b/src/rewards/Points/PointsCardButton.tsx index b3b22f25e4..56616d0c41 100644 --- a/src/rewards/Points/PointsCardButton.tsx +++ b/src/rewards/Points/PointsCardButton.tsx @@ -1,8 +1,7 @@ -import { Icon } from "@chakra-ui/react" import { ArrowRight } from "@phosphor-icons/react" import useGuild from "components/[guild]/hooks/useGuild" -import Button from "components/common/Button" import Link from "next/link" +import { RewardCardButton } from "rewards/components/RewardCardButton" import { GuildPlatform } from "types" type Props = { @@ -14,16 +13,14 @@ const PointsCardButton = ({ platform }: Props) => { const id = platform.id return ( - <> - - + } + > + View leaderboard + ) } diff --git a/src/rewards/Points/PointsRewardCard.tsx b/src/rewards/Points/PointsRewardCard.tsx deleted file mode 100644 index 1200701f9f..0000000000 --- a/src/rewards/Points/PointsRewardCard.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { Circle, useColorModeValue } from "@chakra-ui/react" -import useGuildPermission from "components/[guild]/hooks/useGuildPermission" -import RewardCard from "components/common/RewardCard" -import dynamic from "next/dynamic" -import rewards from "rewards" -import Star from "static/icons/star.svg" -import numberToOrdinal from "utils/numberToOrdinal" -import PointsCardButton from "./PointsCardButton" -import useUsersPoints from "./useUsersPoints" - -const DynamicPointsCardMenu = dynamic(() => import("./PointsCardMenu"), { - ssr: false, -}) - -const PointsRewardCard = ({ guildPlatform }) => { - const { isAdmin } = useGuildPermission() - const { name, imageUrl } = guildPlatform.platformGuildData - - const { data, isLoading, error } = useUsersPoints(guildPlatform.id) - - const bgColor = useColorModeValue("gray.700", "gray.600") - - if (error && !isAdmin) return null - - return ( - <> - - - - ) - } - colorScheme={rewards.POINTS.colorScheme} - cornerButton={ - isAdmin && ( - - ) - } - description={ - data?.rank && `${numberToOrdinal(data?.rank)} on the leaderboard` - } - > - - - - ) -} - -export default PointsRewardCard diff --git a/src/rewards/Points/components.tsx b/src/rewards/Points/components.tsx index 782a5c3d4a..788d909f02 100644 --- a/src/rewards/Points/components.tsx +++ b/src/rewards/Points/components.tsx @@ -1,6 +1,8 @@ import dynamic from "next/dynamic" import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner" import { RewardComponentsData } from "rewards/types" +import PointsCardButton from "./PointsCardButton" +import PointsCardMenu from "./PointsCardMenu" export default { AddRewardPanel: dynamic( @@ -13,7 +15,9 @@ export default { loading: AddRewardPanelLoadingSpinner, } ), - RoleCardComponent: dynamic(() => import("rewards/components/PointsReward"), { + SmallRewardPreview: dynamic(() => import("rewards/components/PointsReward"), { ssr: false, }), + cardButton: PointsCardButton, + cardMenuComponent: PointsCardMenu, } satisfies RewardComponentsData diff --git a/src/rewards/Points/usePointsCardProps.tsx b/src/rewards/Points/usePointsCardProps.tsx index e8f02685cd..37b351f906 100644 --- a/src/rewards/Points/usePointsCardProps.tsx +++ b/src/rewards/Points/usePointsCardProps.tsx @@ -1,3 +1,4 @@ +import { Circle, useColorModeValue } from "@chakra-ui/react" import useDynamicRewardUserAmount from "rewards/Token/hooks/useDynamicRewardUserAmount" import { CardPropsHook } from "rewards/types" import Star from "static/icons/star.svg" @@ -14,9 +15,15 @@ const usePointsCardProps: CardPropsHook = ( ? dynamicUserAmount ?? "some" : rolePlatform?.platformRoleData?.score + const bgColor = useColorModeValue("gray.700", "gray.600") + return { type: "POINTS", - image: guildPlatform.platformGuildData?.imageUrl || , + image: guildPlatform.platformGuildData?.imageUrl || ( + + + + ), // if undefined at admin setup -> "some", if saved with no value (empty string) -> 0 name: `Get ${score ?? 0} ${guildPlatform.platformGuildData?.name || "points"}`, } diff --git a/src/rewards/PolygonID/PolygonIDCardButton.tsx b/src/rewards/PolygonID/PolygonIDCardButton.tsx index 12a09585e7..434f12c74d 100644 --- a/src/rewards/PolygonID/PolygonIDCardButton.tsx +++ b/src/rewards/PolygonID/PolygonIDCardButton.tsx @@ -1,4 +1,4 @@ -import Button from "components/common/Button" +import { RewardCardButton } from "rewards/components/RewardCardButton" import { useMintPolygonIDProofContext } from "./components/MintPolygonIDProofProvider" import useConnectedDID from "./hooks/useConnectedDID" @@ -8,15 +8,14 @@ const PolygonIDCardButton = () => { const { isLoading, data } = useConnectedDID() return ( - + ) } diff --git a/src/rewards/PolygonID/components.ts b/src/rewards/PolygonID/components.ts index d05a17412f..e8bbe3a252 100644 --- a/src/rewards/PolygonID/components.ts +++ b/src/rewards/PolygonID/components.ts @@ -17,7 +17,7 @@ export default { loading: AddRewardPanelLoadingSpinner, } ), - RoleCardComponent: dynamic(() => import("rewards/components/PolygonIDReward"), { + SmallRewardPreview: dynamic(() => import("rewards/components/PolygonIDReward"), { ssr: false, }), } satisfies RewardComponentsData diff --git a/src/rewards/SecretText/TextCardButton.tsx b/src/rewards/SecretText/TextCardButton.tsx index a7bd7f1a99..8a1d910481 100644 --- a/src/rewards/SecretText/TextCardButton.tsx +++ b/src/rewards/SecretText/TextCardButton.tsx @@ -1,7 +1,7 @@ -import { ModalFooter, Text, Tooltip } from "@chakra-ui/react" -import useGuild from "components/[guild]/hooks/useGuild" +import { Tooltip } from "@chakra-ui/react" +import { useRolePlatform } from "components/[guild]/RolePlatforms/components/RolePlatformProvider" import useGuildPermission from "components/[guild]/hooks/useGuildPermission" -import Button from "components/common/Button" +import { RewardCardButton } from "rewards/components/RewardCardButton" import { GuildPlatform, PlatformType, RolePlatformStatus } from "types" import { getRolePlatformStatus, @@ -25,12 +25,9 @@ export const claimTextButtonTooltipLabel: Record< } const TextCardButton = ({ platform }: Props) => { - const { roles } = useGuild() const { isAdmin } = useGuildPermission() + const rolePlatform = useRolePlatform() - const rolePlatform = roles - ?.find((r) => r.rolePlatforms.some((rp) => rp.guildPlatformId === platform.id)) - ?.rolePlatforms?.find((rp) => rp.guildPlatformId === platform?.id) const { onSubmit, isLoading, @@ -51,7 +48,7 @@ const TextCardButton = ({ platform }: Props) => { hasArrow shouldWrapChildren > - + { isLoading={isLoading} error={error} response={response} - > - {!isAdmin && response?.uniqueValue && !claimed && ( - - - By refreshing, the reward will disappear from the highlighted cards at - the top of the guild, but you will still be able to access it from it's - role anytime - - - )} - + /> ) } diff --git a/src/rewards/SecretText/components.ts b/src/rewards/SecretText/components.ts index 9b4efbda0d..46ef0793e7 100644 --- a/src/rewards/SecretText/components.ts +++ b/src/rewards/SecretText/components.ts @@ -17,7 +17,7 @@ export default { loading: AddRewardPanelLoadingSpinner, } ), - RoleCardComponent: dynamic(() => import("rewards/components/TextReward"), { + SmallRewardPreview: dynamic(() => import("rewards/components/TextReward"), { ssr: false, }), } satisfies RewardComponentsData diff --git a/src/rewards/SecretText/useSecretTextCardProps.tsx b/src/rewards/SecretText/useSecretTextCardProps.tsx index 06deb704e8..15dd526ca3 100644 --- a/src/rewards/SecretText/useSecretTextCardProps.tsx +++ b/src/rewards/SecretText/useSecretTextCardProps.tsx @@ -1,8 +1,6 @@ import { Circle, Icon, useColorModeValue } from "@chakra-ui/react" import AvailabilityTags from "components/[guild]/RolePlatforms/components/PlatformCard/components/AvailabilityTags" import useGuild from "components/[guild]/hooks/useGuild" -import useGuildPermission from "components/[guild]/hooks/useGuildPermission" -import { useClaimedReward } from "hooks/useClaimedReward" import { CardPropsHook } from "rewards/types" import { GuildPlatformWithOptionalId, PlatformName } from "types" import { secretTextData } from "./data" @@ -19,9 +17,6 @@ const useSecretTextCardProps: CardPropsHook = ( ?.flatMap((role) => role.rolePlatforms) .find((rp) => rp.guildPlatformId === guildPlatform.id) - const { isAdmin } = useGuildPermission() - const { claimed } = useClaimedReward(rolePlatform?.id) - return { name: platformGuildData?.name || secretTextData.name, type: "TEXT" as PlatformName, @@ -31,7 +26,6 @@ const useSecretTextCardProps: CardPropsHook = ( ), info: rolePlatform && , - shouldHide: !isAdmin && claimed, } } diff --git a/src/rewards/Token/ClaimTokenButton.tsx b/src/rewards/Token/ClaimTokenButton.tsx index 0ce76486e8..efcc2a44fb 100644 --- a/src/rewards/Token/ClaimTokenButton.tsx +++ b/src/rewards/Token/ClaimTokenButton.tsx @@ -1,7 +1,8 @@ import { ButtonProps, Tooltip, useDisclosure } from "@chakra-ui/react" -import Button from "components/common/Button" +import { useRolePlatform } from "components/[guild]/RolePlatforms/components/RolePlatformProvider" import dynamic from "next/dynamic" import { claimTextButtonTooltipLabel } from "rewards/SecretText/TextCardButton" +import { RewardCardButton } from "rewards/components/RewardCardButton" import { RolePlatform } from "types" import { getRolePlatformStatus, @@ -11,6 +12,7 @@ import { GeogatedCountryPopover, useIsFromGeogatedCountry, } from "./GeogatedCountryAlert" +import { TokenRewardProvider } from "./TokenRewardContext" type Props = { isDisabled?: boolean @@ -19,19 +21,16 @@ type Props = { const DynamicClaimTokenModal = dynamic(() => import("./ClaimTokenModal")) -const ClaimTokenButton = ({ - rolePlatform, - isDisabled, - children, - ...rest -}: Props) => { +const ClaimTokenButton = ({ isDisabled, children, ...rest }: Props) => { + const rolePlatform = useRolePlatform() + const { isOpen, onOpen, onClose } = useDisclosure() const isFromGeogatedCountry = useIsFromGeogatedCountry() const { isAvailable } = getRolePlatformTimeframeInfo(rolePlatform) return ( - <> + - + {!isDisabled && } - + ) } diff --git a/src/rewards/Token/TokenRewardCard.tsx b/src/rewards/Token/TokenRewardCard.tsx index a9caa247b7..9a5f2a1508 100644 --- a/src/rewards/Token/TokenRewardCard.tsx +++ b/src/rewards/Token/TokenRewardCard.tsx @@ -91,6 +91,7 @@ const TokenRewardCard = () => { cornerButton={ isAdmin && } + p={{ base: 3, sm: 4 }} > { +}>): JSX.Element => { const { platformGuildData: { tokenAddress, chain, imageUrl }, } = guildPlatform || { platformGuildData: {} } diff --git a/src/rewards/Token/components.ts b/src/rewards/Token/components.ts index a328d114c6..999589a747 100644 --- a/src/rewards/Token/components.ts +++ b/src/rewards/Token/components.ts @@ -15,7 +15,7 @@ export default { loading: AddRewardPanelLoadingSpinner, } ), - RoleCardComponent: dynamic(() => import("rewards/components/TokenReward"), { + SmallRewardPreview: dynamic(() => import("rewards/components/TokenReward"), { ssr: false, }), } satisfies RewardComponentsData diff --git a/src/rewards/UniqueText/components.ts b/src/rewards/UniqueText/components.ts index 9f4534802b..e282ac53d5 100644 --- a/src/rewards/UniqueText/components.ts +++ b/src/rewards/UniqueText/components.ts @@ -6,7 +6,7 @@ import UniqueTextCardMenu from "./UniqueTextCardMenu" export default { cardButton: TextCardButton, cardMenuComponent: UniqueTextCardMenu, - RoleCardComponent: dynamic(() => import("rewards/components/TextReward"), { + SmallRewardPreview: dynamic(() => import("rewards/components/TextReward"), { ssr: false, }), } satisfies RewardComponentsData diff --git a/src/rewards/UniqueText/useUniqueTextCardProps.tsx b/src/rewards/UniqueText/useUniqueTextCardProps.tsx index b6a3364917..ae581a305d 100644 --- a/src/rewards/UniqueText/useUniqueTextCardProps.tsx +++ b/src/rewards/UniqueText/useUniqueTextCardProps.tsx @@ -1,8 +1,6 @@ import { Circle, Icon, useColorModeValue } from "@chakra-ui/react" import AvailabilityTags from "components/[guild]/RolePlatforms/components/PlatformCard/components/AvailabilityTags" import useGuild from "components/[guild]/hooks/useGuild" -import useGuildPermission from "components/[guild]/hooks/useGuildPermission" -import { useClaimedReward } from "hooks/useClaimedReward" import { CardPropsHook } from "rewards/types" import { GuildPlatformWithOptionalId } from "types" import { uniqueTextData } from "./data" @@ -19,9 +17,6 @@ const useUniqueTextCardProps: CardPropsHook = ( ?.flatMap((role) => role.rolePlatforms) .find((rp) => rp.guildPlatformId === guildPlatform.id) - const { isAdmin } = useGuildPermission() - const { claimed } = useClaimedReward(rolePlatform?.id) - return { name: platformGuildData?.name || uniqueTextData.name, type: "UNIQUE_TEXT", @@ -31,7 +26,6 @@ const useUniqueTextCardProps: CardPropsHook = ( ), info: rolePlatform && , - shouldHide: !isAdmin && claimed, } } diff --git a/src/rewards/components/FormReward.tsx b/src/rewards/components/FormReward.tsx index a5e296e533..31c04dc146 100644 --- a/src/rewards/components/FormReward.tsx +++ b/src/rewards/components/FormReward.tsx @@ -9,7 +9,7 @@ import Button from "components/common/Button" import Link from "next/link" import { useUserFormSubmission } from "rewards/Forms/hooks/useFormSubmissions" -const FormReward = ({ platform, withMotionImg }: RewardProps) => { +const FormReward = ({ platform }: RewardProps) => { const { urlName } = useGuild() const { platformGuildData } = platform.guildPlatform const { form, isValidating: isFormsValidating } = useGuildForm( @@ -25,7 +25,6 @@ const FormReward = ({ platform, withMotionImg }: RewardProps) => { } label={ diff --git a/src/rewards/components/GatherReward.tsx b/src/rewards/components/GatherReward.tsx index 0541aad441..26fdb99255 100644 --- a/src/rewards/components/GatherReward.tsx +++ b/src/rewards/components/GatherReward.tsx @@ -19,7 +19,7 @@ import { getRolePlatformTimeframeInfo, } from "utils/rolePlatformHelpers" -const GatherReward = ({ platform, withMotionImg }: RewardProps) => { +const GatherReward = ({ platform }: RewardProps) => { const { platformId, platformGuildData } = platform.guildPlatform const { @@ -86,7 +86,6 @@ const GatherReward = ({ platform, withMotionImg }: RewardProps) => { ) } diff --git a/src/rewards/components/PoapReward.tsx b/src/rewards/components/PoapReward.tsx index c6d79d1e65..ffc5af8f7d 100644 --- a/src/rewards/components/PoapReward.tsx +++ b/src/rewards/components/PoapReward.tsx @@ -24,7 +24,7 @@ const DynamicShowMintLinkButton = dynamic( } ) -const PoapReward = ({ platform: platform, withMotionImg }: RewardProps) => { +const PoapReward = ({ platform: platform }: RewardProps) => { const { platformId, platformGuildData } = platform.guildPlatform const { urlName } = useGuild() const { claimed } = useClaimedReward(platform.id) @@ -37,7 +37,6 @@ const PoapReward = ({ platform: platform, withMotionImg }: RewardProps) => { } label={ diff --git a/src/rewards/components/PointsReward.tsx b/src/rewards/components/PointsReward.tsx index 710257c149..1dcea46d76 100644 --- a/src/rewards/components/PointsReward.tsx +++ b/src/rewards/components/PointsReward.tsx @@ -9,7 +9,7 @@ import useGuild from "components/[guild]/hooks/useGuild" import { useRoleMembership } from "components/explorer/hooks/useMembership" import useDynamicRewardUserAmount from "rewards/Token/hooks/useDynamicRewardUserAmount" -const PointsReward = ({ platform, withMotionImg }: RewardProps) => { +const PointsReward = ({ platform }: RewardProps) => { const { urlName } = useGuild() const { platformGuildData } = platform.guildPlatform const name = platformGuildData?.name || "points" @@ -29,7 +29,6 @@ const PointsReward = ({ platform, withMotionImg }: RewardProps) => { } label={ diff --git a/src/rewards/components/PolygonIDReward.tsx b/src/rewards/components/PolygonIDReward.tsx index bce3b121c7..55f2243e33 100644 --- a/src/rewards/components/PolygonIDReward.tsx +++ b/src/rewards/components/PolygonIDReward.tsx @@ -15,7 +15,7 @@ import { useMintPolygonIDProofContext } from "rewards/PolygonID/components/MintP import useConnectedDID from "rewards/PolygonID/hooks/useConnectedDID" import { PlatformType } from "types" -const PolygonIDReward = ({ platform, withMotionImg }: RewardProps) => { +const PolygonIDReward = ({ platform }: RewardProps) => { const { platformId } = platform.guildPlatform const { roles } = useGuild() @@ -80,7 +80,6 @@ const PolygonIDReward = ({ platform, withMotionImg }: RewardProps) => { } label={ diff --git a/src/rewards/components/RewardCardButton.tsx b/src/rewards/components/RewardCardButton.tsx new file mode 100644 index 0000000000..a0c78f2f22 --- /dev/null +++ b/src/rewards/components/RewardCardButton.tsx @@ -0,0 +1,48 @@ +import { ButtonProps, ComponentWithAs, Tooltip } from "@chakra-ui/react" +import { useOpenJoinModal } from "components/[guild]/JoinModal/JoinModalProvider" +import { useRolePlatform } from "components/[guild]/RolePlatforms/components/RolePlatformProvider" +import Button from "components/common/Button" +import useMembership from "components/explorer/hooks/useMembership" +import { ComponentProps } from "react" + +const RewardCardButton = ({ + onClick, + ...props +}: ComponentProps>) => { + const { isMember, membership } = useMembership() + const openJoinModal = useOpenJoinModal() + + const { roleId } = useRolePlatform() + + const buttonProps = { + size: { base: "sm", xl: "md" }, + ...props, + } satisfies ButtonProps + + if ("href" in props) return