refactor: extract RoleCard

src/components/[guild]/RoleCard/RoleCard.tsx

@@ -24,7 +24,8 @@ 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 Reward from "./components/Reward"
+import { RewardIcon } from "./components/RewardIcon"
 import RoleDescription from "./components/RoleDescription"
 import RoleHeader from "./components/RoleHeader"
 import RoleRequirementsSection, {

src/components/[guild]/RoleCard/components/Reward.tsx

@@ -1,12 +1,4 @@
-import {
-  Circle,
-  Icon,
-  Img,
-  Spinner,
-  Text,
-  Tooltip,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { Icon, Spinner, Text, Tooltip } from "@chakra-ui/react"
 import { ArrowSquareOut, LockSimple } from "@phosphor-icons/react"
 import usePlatformAccessButton from "components/[guild]/AccessHub/components/usePlatformAccessButton"
 import { useOpenJoinModal } from "components/[guild]/JoinModal/JoinModalProvider"
@@ -17,15 +9,14 @@ 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 { useMemo } from "react"
 import GoogleCardWarning from "rewards/Google/GoogleCardWarning"
-import rewardComponents from "rewards/components"
+import { RoleCards } from "rewards/RoleCards"
 import { PlatformType, RolePlatform } from "types"
 import capitalize from "utils/capitalize"
 import { RewardDisplay } from "./RewardDisplay"
-import { RewardIconProps, RewardProps } from "./types"
+import { RewardIcon } from "./RewardIcon"
+import { RewardProps } from "./types"
 
 const getRewardLabel = (platform: RolePlatform) => {
   switch (platform.guildPlatform.platformId) {
@@ -148,73 +139,6 @@ const Reward = ({
   )
 }
 
-const MotionImg = motion(Img)
-const MotionCircle = motion(Circle)
-
-const RewardIcon = ({
-  rolePlatformId,
-  guildPlatform,
-  withMotionImg = true,
-  transition,
-}: RewardIconProps) => {
-  const [doIconFallback, setDoIconFallback] = useState(false)
-  const props = {
-    src:
-      guildPlatform.platformGuildData?.imageUrl ??
-      rewards[PlatformType[guildPlatform.platformId]].imageUrl,
-    alt: guildPlatform.platformGuildName,
-    boxSize: 6,
-    rounded: "full",
-    onError: () => {
-      setDoIconFallback(true)
-    },
-  }
-
-  const motionElementProps = {
-    layoutId: `${rolePlatformId}_reward_img`,
-    transition: { type: "spring", duration: 0.5, ...transition },
-  }
-  const circleBgColor = useColorModeValue("gray.700", "gray.600")
-  const circleProps = {
-    bgColor: circleBgColor,
-    boxSize: 6,
-  }
-
-  if (doIconFallback || !props.src) {
-    if (withMotionImg) {
-      return (
-        <MotionCircle {...motionElementProps} {...circleProps}>
-          <Icon
-            as={rewards[PlatformType[guildPlatform.platformId]].icon}
-            color="white"
-            boxSize={3}
-          />
-        </MotionCircle>
-      )
-    }
-    return (
-      <Circle {...circleProps}>
-        <Icon
-          as={rewards[PlatformType[guildPlatform.platformId]].icon}
-          color="white"
-          boxSize={3}
-        />
-      </Circle>
-    )
-  }
-
-  return (
-    <Circle as="picture">
-      <source srcSet={rewards[PlatformType[guildPlatform.platformId]].imageUrl} />
-      {withMotionImg ? (
-        <MotionImg {...motionElementProps} {...props} />
-      ) : (
-        <Img {...props} />
-      )}
-    </Circle>
-  )
-}
-
 const RewardWrapper = ({ platform, ...props }: RewardProps) => {
   const { guildPlatforms } = useGuild()
 
@@ -226,16 +150,17 @@ const RewardWrapper = ({ platform, ...props }: RewardProps) => {
 
   const platformWithGuildPlatform = { ...platform, guildPlatform }
 
-  const Component =
-    rewardComponents[PlatformType[guildPlatform?.platformId]].RoleCardComponent ??
-    Reward
+  const rewardName = PlatformType[guildPlatform?.platformId]
+  const RoleCard = RoleCards.hasOwnProperty(rewardName)
+    ? RoleCards[rewardName as keyof typeof RoleCards]
+    : Reward
 
   return (
     <ApiRequirementHandlerProvider roleId={platformWithGuildPlatform.roleId}>
-      <Component platform={platformWithGuildPlatform} {...props} />
+      <RoleCard platform={platformWithGuildPlatform} {...props} />
     </ApiRequirementHandlerProvider>
   )
 }
 
-export { Reward, RewardIcon, getRewardLabel }
+export { Reward, getRewardLabel }
 export default RewardWrapper

src/components/[guild]/RoleCard/components/RewardIcon.tsx

@@ -0,0 +1,64 @@
+import { Circle, Icon, Img, useColorModeValue } from "@chakra-ui/react"
+import { motion } from "framer-motion"
+import { useState } from "react"
+import rewards from "rewards"
+import { PlatformType } from "types"
+import { RewardIconProps } from "./types"
+
+const MotionImg = motion(Img)
+const MotionCircle = motion(Circle)
+
+export const RewardIcon = ({
+  rolePlatformId,
+  guildPlatform,
+  withMotionImg = true,
+  transition,
+}: RewardIconProps) => {
+  const [doIconFallback, setDoIconFallback] = useState(false)
+  const reward = rewards[PlatformType[guildPlatform.platformId]]
+  const props = {
+    src: guildPlatform.platformGuildData?.imageUrl ?? reward.imageUrl,
+    alt: guildPlatform.platformGuildName,
+    boxSize: 6,
+    rounded: "full",
+    onError: () => {
+      setDoIconFallback(true)
+    },
+  }
+
+  const motionElementProps = {
+    layoutId: `${rolePlatformId}_reward_img`,
+    transition: { type: "spring", duration: 0.5, ...transition },
+  }
+  const circleBgColor = useColorModeValue("gray.700", "gray.600")
+  const circleProps = {
+    bgColor: circleBgColor,
+    boxSize: 6,
+  }
+
+  if (doIconFallback || !props.src) {
+    if (withMotionImg) {
+      return (
+        <MotionCircle {...motionElementProps} {...circleProps}>
+          <Icon as={reward.icon} color="white" boxSize={3} />
+        </MotionCircle>
+      )
+    }
+    return (
+      <Circle {...circleProps}>
+        <Icon as={reward.icon} color="white" boxSize={3} />
+      </Circle>
+    )
+  }
+
+  return (
+    <Circle as="picture">
+      <source srcSet={reward.imageUrl} />
+      {withMotionImg ? (
+        <MotionImg {...motionElementProps} {...props} />
+      ) : (
+        <Img {...props} />
+      )}
+    </Circle>
+  )
+}

src/components/[guild]/collect/components/CollectNftContext.tsx

@@ -7,8 +7,8 @@ import {
   useTransactionStatusContext,
 } from "components/[guild]/Requirements/components/GuildCheckout/components/TransactionStatusContext"
 import TransactionStatusModal from "components/[guild]/Requirements/components/GuildCheckout/components/TransactionStatusModal"
-import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
 import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardIcon } from "components/[guild]/RoleCard/components/RewardIcon"
 import { ContractCallFunction } from "components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddContractCallPanel/components/CreateNftForm/hooks/useCreateNft"
 import {
   PropsWithChildren,

src/rewards/ContractCall/components.ts

@@ -19,10 +19,4 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RoleCardComponent: dynamic(
-    () => import("rewards/ContractCall/ContractCallReward"),
-    {
-      ssr: false,
-    }
-  ),
 } satisfies RewardComponentsData

src/rewards/Forms/components.ts

@@ -9,9 +9,6 @@ export default {
   cardPropsHook: useFormCardProps,
   cardButton: FormCardLinkButton,
   cardMenuComponent: FormCardMenu,
-  RoleCardComponent: dynamic(() => import("rewards/components/FormReward"), {
-    ssr: false,
-  }),
   AddRewardPanel: dynamic(
     () =>
       import(

src/rewards/Gather/components.ts

@@ -9,9 +9,6 @@ export default {
   cardPropsHook: useGatherCardProps,
   cardButton: GatherCardButton,
   cardMenuComponent: GatherCardMenu,
-  RoleCardComponent: dynamic(() => import("rewards/components/GatherReward"), {
-    ssr: false,
-  }),
   AddRewardPanel: dynamic(
     () =>
       import(

src/rewards/Poap/components.ts

@@ -17,7 +17,4 @@ export default {
       ssr: false,
     }
   ),
-  RoleCardComponent: dynamic(() => import("rewards/components/PoapReward"), {
-    ssr: false,
-  }),
 } satisfies RewardComponentsData

src/rewards/Points/components.tsx

@@ -19,7 +19,4 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RoleCardComponent: dynamic(() => import("rewards/components/PointsReward"), {
-    ssr: false,
-  }),
 } satisfies RewardComponentsData

src/rewards/PolygonID/components.ts

@@ -19,7 +19,4 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RoleCardComponent: dynamic(() => import("rewards/components/PolygonIDReward"), {
-    ssr: false,
-  }),
 } satisfies RewardComponentsData

src/rewards/RoleCards.ts

@@ -0,0 +1,32 @@
+import dynamic from "next/dynamic"
+import { RewardComponentMap, RoleCard } from "./types"
+
+export const RoleCards = {
+  GATHER_TOWN: dynamic(() => import("rewards/components/GatherReward"), {
+    ssr: false,
+  }),
+  POLYGON_ID: dynamic(() => import("rewards/components/PolygonIDReward"), {
+    ssr: false,
+  }),
+  ERC20: dynamic(() => import("rewards/components/TokenReward"), {
+    ssr: false,
+  }),
+  POAP: dynamic(() => import("rewards/components/PoapReward"), {
+    ssr: false,
+  }),
+  POINTS: dynamic(() => import("rewards/components/PointsReward"), {
+    ssr: false,
+  }),
+  UNIQUE_TEXT: dynamic(() => import("rewards/components/TextReward"), {
+    ssr: false,
+  }),
+  TEXT: dynamic(() => import("rewards/components/TextReward"), {
+    ssr: false,
+  }),
+  FORM: dynamic(() => import("rewards/components/FormReward"), {
+    ssr: false,
+  }),
+  CONTRACT_CALL: dynamic(() => import("rewards/ContractCall/ContractCallReward"), {
+    ssr: false,
+  }),
+} as const satisfies RewardComponentMap<RoleCard>

src/rewards/SecretText/components.ts

@@ -19,7 +19,4 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RoleCardComponent: dynamic(() => import("rewards/components/TextReward"), {
-    ssr: false,
-  }),
 } satisfies RewardComponentsData

src/rewards/Token/components.ts

@@ -17,7 +17,4 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RoleCardComponent: dynamic(() => import("rewards/components/TokenReward"), {
-    ssr: false,
-  }),
 } satisfies RewardComponentsData

src/rewards/UniqueText/components.ts

@@ -1,4 +1,3 @@
-import dynamic from "next/dynamic"
 import TextCardButton from "rewards/SecretText/TextCardButton"
 import { RewardComponentsData } from "rewards/types"
 import UniqueTextCardMenu from "./UniqueTextCardMenu"
@@ -8,7 +7,4 @@ export default {
   cardPropsHook: useUniqueTextCardProps,
   cardButton: TextCardButton,
   cardMenuComponent: UniqueTextCardMenu,
-  RoleCardComponent: dynamic(() => import("rewards/components/TextReward"), {
-    ssr: false,
-  }),
 } satisfies RewardComponentsData

src/rewards/components/FormReward.tsx

@@ -1,7 +1,7 @@
 import { Skeleton, Tooltip } from "@chakra-ui/react"
 import { ArrowRight } from "@phosphor-icons/react"
-import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
 import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardIcon } from "components/[guild]/RoleCard/components/RewardIcon"
 import { RewardProps } from "components/[guild]/RoleCard/components/types"
 import useGuild from "components/[guild]/hooks/useGuild"
 import { useGuildForm } from "components/[guild]/hooks/useGuildForms"

src/rewards/components/GatherReward.tsx

@@ -1,8 +1,8 @@
 import { Icon, Spinner, Text, Tooltip } from "@chakra-ui/react"
 import { ArrowSquareOut, LockSimple } from "@phosphor-icons/react"
 import { useOpenJoinModal } from "components/[guild]/JoinModal/JoinModalProvider"
-import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
 import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardIcon } from "components/[guild]/RoleCard/components/RewardIcon"
 import { RewardProps } from "components/[guild]/RoleCard/components/types"
 import AvailabilityTags from "components/[guild]/RolePlatforms/components/PlatformCard/components/AvailabilityTags"
 import useGuild from "components/[guild]/hooks/useGuild"

src/rewards/components/PoapReward.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from "@chakra-ui/react"
 import { ArrowRight } from "@phosphor-icons/react"
-import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
 import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardIcon } from "components/[guild]/RoleCard/components/RewardIcon"
 import { RewardProps } from "components/[guild]/RoleCard/components/types"
 import AvailabilityTags from "components/[guild]/RolePlatforms/components/PlatformCard/components/AvailabilityTags"
 import useGuild from "components/[guild]/hooks/useGuild"

src/rewards/components/PointsReward.tsx

@@ -2,8 +2,8 @@ import { Link } from "@chakra-ui/next-js"
 import { Icon, Tooltip, useColorModeValue } from "@chakra-ui/react"
 import { ArrowRight, Check } from "@phosphor-icons/react"
 import DynamicTag from "components/[guild]/RoleCard/components/DynamicReward/DynamicTag"
-import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
 import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardIcon } from "components/[guild]/RoleCard/components/RewardIcon"
 import { RewardProps } from "components/[guild]/RoleCard/components/types"
 import useGuild from "components/[guild]/hooks/useGuild"
 import { useRoleMembership } from "components/explorer/hooks/useMembership"

src/rewards/components/PolygonIDReward.tsx

@@ -1,8 +1,8 @@
 import { Icon, Spinner, Tooltip } from "@chakra-ui/react"
 import { ArrowSquareIn, LockSimple } from "@phosphor-icons/react"
 import { useOpenJoinModal } from "components/[guild]/JoinModal/JoinModalProvider"
-import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
 import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardIcon } from "components/[guild]/RoleCard/components/RewardIcon"
 import { RewardProps } from "components/[guild]/RoleCard/components/types"
 import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"

src/rewards/components/TextReward.tsx

@@ -1,8 +1,8 @@
 import { Icon, Spinner, Text, Tooltip } from "@chakra-ui/react"
 import { ArrowSquareIn, LockSimple } from "@phosphor-icons/react"
 import { useOpenJoinModal } from "components/[guild]/JoinModal/JoinModalProvider"
-import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
 import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardIcon } from "components/[guild]/RoleCard/components/RewardIcon"
 import { RewardProps } from "components/[guild]/RoleCard/components/types"
 import AvailabilityTags from "components/[guild]/RolePlatforms/components/PlatformCard/components/AvailabilityTags"
 import useGuild from "components/[guild]/hooks/useGuild"