refactor: extract cardPropsHook

src/components/[guild]/AccessHub/components/AccessedGuildPlatformCard.tsx

@@ -2,6 +2,7 @@ import PlatformCard from "components/[guild]/RolePlatforms/components/PlatformCa
 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 PlatformAccessButton from "./PlatformAccessButton"
@@ -13,11 +14,12 @@ const AccessedGuildPlatformCard = ({ platform }: { platform: GuildPlatform }) =>
   if (!rewards[PlatformType[platform.platformId]]) return null
 
   const {
-    cardPropsHook: useCardProps,
+    // cardPropsHook: useCardProps,
     cardMenuComponent: PlatformCardMenu,
     cardWarningComponent: PlatformCardWarning,
     cardButton: PlatformCardButton,
   } = rewardComponents[PlatformType[platform.platformId] as PlatformName]
+  const useCardProps = cardPropsHooks[PlatformType[platform.platformId]]
 
   return (
     <PlatformCard

src/components/[guild]/AddAndOrderRoles/components/NewRolePlatformCard.tsx

@@ -12,6 +12,7 @@ import Button from "components/common/Button"
 import { useFormContext, useWatch } from "react-hook-form"
 import { CAPACITY_TIME_PLATFORMS } from "rewards"
 import NftAvailabilityTags from "rewards/ContractCall/components/NftAvailabilityTags"
+import { cardPropsHooks } from "rewards/cardPropsHooks"
 import rewardComponents from "rewards/components"
 import {
   GuildPlatformWithOptionalId,
@@ -58,8 +59,9 @@ const NewRolePlatformCard = ({ rolePlatform, remove }: Props) => {
     guildPlatform.platformGuildData.function ===
       ContractCallFunction.DEPRECATED_SIMPLE_CLAIM
 
-  const { cardPropsHook: useCardProps, cardSettingsComponent } =
-    rewardComponents[type]
+  const { cardSettingsComponent } =
+    rewardComponents[type as keyof typeof rewardComponents]
+  const useCardProps = cardPropsHooks[type as keyof typeof cardPropsHooks]
 
   return (
     <RolePlatformProvider

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

@@ -12,6 +12,7 @@ import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"
 import rewards, { CAPACITY_TIME_PLATFORMS } from "rewards"
 import NftAvailabilityTags from "rewards/ContractCall/components/NftAvailabilityTags"
+import { cardPropsHooks } from "rewards/cardPropsHooks"
 import rewardComponents from "rewards/components"
 import {
   GuildPlatformWithOptionalId,
@@ -68,8 +69,8 @@ const ExistingRolePlatformCard = ({ rolePlatform }: Props) => {
     guildPlatform.platformGuildData.function ===
       ContractCallFunction.DEPRECATED_SIMPLE_CLAIM
 
-  const { cardPropsHook: useCardProps, cardSettingsComponent } =
-    rewardComponents[type]
+  const { cardSettingsComponent } = rewardComponents[type]
+  const useCardProps = cardPropsHooks[type]
   const { isPlatform } = rewards[type]
 
   return (

src/rewards/ContractCall/components.ts

@@ -3,10 +3,8 @@ import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelL
 import { RewardComponentsData } from "rewards/types"
 import ContractCallCardMenu from "./ContractCallCardMenu"
 import ContractCallRewardCardButton from "./ContractCallRewardCardButton"
-import useContractCallCardProps from "./useContractCallCardProps"
 
 export default {
-  cardPropsHook: useContractCallCardProps,
   cardButton: ContractCallRewardCardButton,
   cardMenuComponent: ContractCallCardMenu,
   AddRewardPanel: dynamic(

src/rewards/Discord/components.ts

@@ -3,10 +3,8 @@ import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelL
 import { RewardComponentsData } from "rewards/types"
 import DiscordCardMenu from "./DiscordCardMenu"
 import DiscordCardSettings from "./DiscordCardSettings"
-import useDiscordCardProps from "./useDiscordCardProps"
 
 export default {
-  cardPropsHook: useDiscordCardProps,
   cardSettingsComponent: DiscordCardSettings,
   cardMenuComponent: DiscordCardMenu,
   AddRewardPanel: dynamic(

src/rewards/Forms/components.ts

@@ -3,10 +3,8 @@ import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelL
 import { RewardComponentsData } from "rewards/types"
 import FormCardLinkButton from "./FormCardLinkButton"
 import FormCardMenu from "./FormCardMenu"
-import useFormCardProps from "./useFormCardProps"
 
 export default {
-  cardPropsHook: useFormCardProps,
   cardButton: FormCardLinkButton,
   cardMenuComponent: FormCardMenu,
   RoleCardComponent: dynamic(() => import("rewards/components/FormReward"), {

src/rewards/Gather/components.ts

@@ -3,10 +3,8 @@ import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelL
 import { RewardComponentsData } from "rewards/types"
 import GatherCardButton from "./GatherCardButton"
 import GatherCardMenu from "./GatherCardMenu"
-import useGatherCardProps from "./useGatherCardProps"
 
 export default {
-  cardPropsHook: useGatherCardProps,
   cardButton: GatherCardButton,
   cardMenuComponent: GatherCardMenu,
   RoleCardComponent: dynamic(() => import("rewards/components/GatherReward"), {

src/rewards/Github/components.ts

@@ -2,10 +2,8 @@ import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
 import { RewardComponentsData } from "rewards/types"
 import GithubCardMenu from "./GithubCardMenu"
-import useGithubCardProps from "./useGithubCardProps"
 
 export default {
-  cardPropsHook: useGithubCardProps,
   cardMenuComponent: GithubCardMenu,
   AddRewardPanel: dynamic(
     () =>

src/rewards/Google/components.ts

@@ -4,10 +4,8 @@ import { RewardComponentsData } from "rewards/types"
 import GoogleCardMenu from "./GoogleCardMenu"
 import GoogleCardSettings from "./GoogleCardSettings"
 import GoogleCardWarning from "./GoogleCardWarning"
-import useGoogleCardProps from "./useGoogleCardProps"
 
 export default {
-  cardPropsHook: useGoogleCardProps,
   cardSettingsComponent: GoogleCardSettings,
   cardMenuComponent: GoogleCardMenu,
   cardWarningComponent: GoogleCardWarning,

src/rewards/Poap/components.ts

@@ -2,10 +2,8 @@ import dynamic from "next/dynamic"
 import { RewardComponentsData } from "rewards/types"
 import PoapCardButton from "./PoapCardButton"
 import PoapCardMenu from "./PoapCardMenu"
-import usePoapCardProps from "./usePoapCardProps"
 
 export default {
-  cardPropsHook: usePoapCardProps,
   cardButton: PoapCardButton,
   cardMenuComponent: PoapCardMenu,
   AddRewardPanel: dynamic(

src/rewards/Points/components.tsx

@@ -1,10 +1,8 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
 import { CardSettings, RewardComponentsData } from "rewards/types"
-import usePointsCardProps from "./usePointsCardProps"
 
 export default {
-  cardPropsHook: usePointsCardProps,
   cardSettingsComponent: dynamic(() => import("rewards/Points/PointsCardSettings"), {
     ssr: false,
     loading: () => <AddRewardPanelLoadingSpinner height={20} />,

src/rewards/PolygonID/components.ts

@@ -3,10 +3,8 @@ import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelL
 import { RewardComponentsData } from "rewards/types"
 import PolygonIDCardButton from "./PolygonIDCardButton"
 import PolygonIDCardMenu from "./PolygonIDCardMenu"
-import usePolygonIDCardProps from "./usePolygonIDCardProps"
 
 export default {
-  cardPropsHook: usePolygonIDCardProps,
   cardButton: PolygonIDCardButton,
   cardMenuComponent: PolygonIDCardMenu,
   AddRewardPanel: dynamic(

src/rewards/SecretText/components.ts

@@ -3,10 +3,8 @@ import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelL
 import { RewardComponentsData } from "rewards/types"
 import SecretTextCardMenu from "./SecretTextCardMenu"
 import TextCardButton from "./TextCardButton"
-import useSecretTextCardProps from "./useSecretTextCardProps"
 
 export default {
-  cardPropsHook: useSecretTextCardProps,
   cardButton: TextCardButton,
   cardMenuComponent: SecretTextCardMenu,
   AddRewardPanel: dynamic(

src/rewards/Telegram/components.ts

@@ -2,10 +2,8 @@ import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
 import { RewardComponentsData } from "rewards/types"
 import TelegramCardMenu from "./TelegramCardMenu"
-import useTelegramCardProps from "./useTelegramCardProps"
 
 export default {
-  cardPropsHook: useTelegramCardProps,
   cardMenuComponent: TelegramCardMenu,
   AddRewardPanel: dynamic(
     () =>

src/rewards/Token/DynamicRewardCalculationTable.tsx

@@ -3,7 +3,7 @@ import { LockSimple, X } from "@phosphor-icons/react"
 import FeesTable from "components/[guild]/Requirements/components/GuildCheckout/components/FeesTable"
 import OptionImage from "components/common/StyledSelect/components/CustomSelectOption/components/OptionImage"
 import { REQUIREMENT_PROVIDED_VALUES } from "requirements/requirementProvidedValues"
-import rewardComponents from "rewards/components"
+import { cardPropsHooks } from "rewards/cardPropsHooks"
 import { PlatformType, Requirement, RolePlatform } from "types"
 import useDynamicRewardUserAmount from "./hooks/useDynamicRewardUserAmount"
 
@@ -17,10 +17,8 @@ const DynamicRewardCalculationTable = ({ requirement, rolePlatform }: Props) =>
     useDynamicRewardUserAmount(rolePlatform)
 
   const rewardName = rolePlatform.guildPlatform.platformGuildData.name
-
   const propsHook =
-    rewardComponents[PlatformType[rolePlatform.guildPlatform.platformId]]
-      ?.cardPropsHook
+    cardPropsHooks[PlatformType[rolePlatform.guildPlatform.platformId]]
 
   const { image = null } = propsHook ? propsHook(rolePlatform.guildPlatform) : {}
   const ImageComponent =

src/rewards/Token/components.ts

@@ -2,10 +2,8 @@ import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
 import { RewardComponentsData } from "rewards/types"
 import ClaimTokenButton from "./ClaimTokenButton"
-import useTokenCardProps from "./hooks/useTokenCardProps"
 
 export default {
-  cardPropsHook: useTokenCardProps,
   cardButton: ClaimTokenButton,
   AddRewardPanel: dynamic(
     () =>

src/rewards/UniqueText/components.ts

@@ -2,10 +2,8 @@ import dynamic from "next/dynamic"
 import TextCardButton from "rewards/SecretText/TextCardButton"
 import { RewardComponentsData } from "rewards/types"
 import UniqueTextCardMenu from "./UniqueTextCardMenu"
-import useUniqueTextCardProps from "./useUniqueTextCardProps"
 
 export default {
-  cardPropsHook: useUniqueTextCardProps,
   cardButton: TextCardButton,
   cardMenuComponent: UniqueTextCardMenu,
   RoleCardComponent: dynamic(() => import("rewards/components/TextReward"), {

src/rewards/cardPropsHooks.ts

@@ -0,0 +1,30 @@
+import useContractCallCardProps from "./ContractCall/useContractCallCardProps"
+import useDiscordCardProps from "./Discord/useDiscordCardProps"
+import useFormCardProps from "./Forms/useFormCardProps"
+import useGatherCardProps from "./Gather/useGatherCardProps"
+import useGithubCardProps from "./Github/useGithubCardProps"
+import useGoogleCardProps from "./Google/useGoogleCardProps"
+import usePoapCardProps from "./Poap/usePoapCardProps"
+import usePointsCardProps from "./Points/usePointsCardProps"
+import usePolygonIDCardProps from "./PolygonID/usePolygonIDCardProps"
+import useSecretTextCardProps from "./SecretText/useSecretTextCardProps"
+import useTelegramCardProps from "./Telegram/useTelegramCardProps"
+import useTokenCardProps from "./Token/hooks/useTokenCardProps"
+import useUniqueTextCardProps from "./UniqueText/useUniqueTextCardProps"
+import { CardPropsHook, RewardComponentMap } from "./types"
+
+export const cardPropsHooks = {
+  GATHER_TOWN: useGatherCardProps,
+  POLYGON_ID: usePolygonIDCardProps,
+  TELEGRAM: useTelegramCardProps,
+  POAP: usePoapCardProps,
+  POINTS: usePointsCardProps,
+  TEXT: useSecretTextCardProps,
+  ERC20: useTokenCardProps,
+  GOOGLE: useGoogleCardProps,
+  DISCORD: useDiscordCardProps,
+  UNIQUE_TEXT: useUniqueTextCardProps,
+  CONTRACT_CALL: useContractCallCardProps,
+  FORM: useFormCardProps,
+  GITHUB: useGithubCardProps,
+} as const satisfies RewardComponentMap<CardPropsHook>

src/rewards/types.ts

@@ -48,7 +48,7 @@ export type RewardData = {
 }
 
 export type RewardComponentsData = {
-  cardPropsHook?: CardPropsHook
+  // cardPropsHook?: CardPropsHook
   cardSettingsComponent?: CardSettings
   cardMenuComponent?: (props: any) => JSX.Element
   cardWarningComponent?: (props: any) => JSX.Element