chore: extract CardSettingsComponent

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

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

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

@@ -11,9 +11,9 @@ import useVisibilityModalProps from "components/[guild]/SetVisibility/hooks/useV
 import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"
 import rewards, { CAPACITY_TIME_PLATFORMS } from "rewards"
+import { cardSettings } from "rewards/CardSettings"
 import NftAvailabilityTags from "rewards/ContractCall/components/NftAvailabilityTags"
 import { cardPropsHooks } from "rewards/cardPropsHooks"
-import rewardComponents from "rewards/components"
 import {
   GuildPlatformWithOptionalId,
   PlatformName,
@@ -69,7 +69,7 @@ const ExistingRolePlatformCard = ({ rolePlatform }: Props) => {
     guildPlatform.platformGuildData.function ===
       ContractCallFunction.DEPRECATED_SIMPLE_CLAIM
 
-  const { cardSettingsComponent } = rewardComponents[type]
+  const cardSettingsComponent = cardSettings[type]
   const useCardProps = cardPropsHooks[type]
   const { isPlatform } = rewards[type]
 

src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/SelectExistingPlatform.tsx

@@ -6,8 +6,8 @@ import { DISPLAY_CARD_INTERACTIVITY_STYLES } from "components/common/DisplayCard
 import { useState } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import rewards, { PlatformAsRewardRestrictions } from "rewards"
+import { cardSettings } from "rewards/CardSettings"
 import { cardPropsHooks } from "rewards/cardPropsHooks"
-import rewardComponents from "rewards/components"
 import { PlatformType, Requirement, RoleFormType, RolePlatform } from "types"
 import EditRolePlatformModal from "../../EditRolePlatformModal"
 import PlatformCard from "../../PlatformCard"
@@ -68,9 +68,7 @@ const SelectExistingPlatform = ({ onClose, onSelect }: Props) => {
 
   const handleClick = (rolePlatformData?: Partial<RolePlatform>) => {
     const platformId = rolePlatformData?.guildPlatform?.platformId
-    const { cardSettingsComponent = null } = platformId
-      ? rewardComponents[PlatformType[platformId]]
-      : {}
+    const cardSettingsComponent = cardSettings[PlatformType[platformId]] ?? null
 
     if (cardSettingsComponent) {
       setSelectedRolePlatform(rolePlatformData)

src/components/[guild]/RolePlatforms/components/EditRolePlatformModal.tsx

@@ -11,7 +11,7 @@ import { Modal } from "components/common/Modal"
 import { createContext, useContext, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import rewards from "rewards"
-import rewardComponents from "rewards/components"
+import { cardSettings } from "rewards/CardSettings"
 import { PlatformType, RoleFormType, RolePlatform } from "types"
 import { RolePlatformProvider } from "./RolePlatformProvider"
 
@@ -43,8 +43,8 @@ const EditRolePlatformModal = ({
     rolePlatform.guildPlatform?.platformGuildName ??
     rewards[PlatformType[rolePlatform.guildPlatform.platformId]].name
 
-  const { cardSettingsComponent: SettingsComponent } =
-    rewardComponents[PlatformType[rolePlatform?.guildPlatform?.platformId]]
+  const SettingsComponent =
+    cardSettings[PlatformType[rolePlatform?.guildPlatform?.platformId]]
 
   return (
     <Modal

src/rewards/CardSettings.tsx

@@ -0,0 +1,14 @@
+import dynamic from "next/dynamic"
+import DiscordCardSettings from "./Discord/DiscordCardSettings/DiscordCardSettings"
+import GoogleCardSettings from "./Google/GoogleCardSettings"
+import { AddRewardPanelLoadingSpinner } from "./components/AddRewardPanelLoadingSpinner"
+import { CardSetting, RewardComponentMap } from "./types"
+
+export const cardSettings = {
+  GOOGLE: GoogleCardSettings,
+  POINTS: dynamic(() => import("rewards/Points/PointsCardSettings"), {
+    ssr: false,
+    loading: () => <AddRewardPanelLoadingSpinner height={20} />,
+  }) as CardSetting,
+  DISCORD: DiscordCardSettings,
+} as const satisfies RewardComponentMap<CardSetting>

src/rewards/Discord/components.ts

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

src/rewards/Google/components.ts

@@ -2,11 +2,9 @@ import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
 import { RewardComponentsData } from "rewards/types"
 import GoogleCardMenu from "./GoogleCardMenu"
-import GoogleCardSettings from "./GoogleCardSettings"
 import GoogleCardWarning from "./GoogleCardWarning"
 
 export default {
-  cardSettingsComponent: GoogleCardSettings,
   cardMenuComponent: GoogleCardMenu,
   cardWarningComponent: GoogleCardWarning,
   AddRewardPanel: dynamic(

src/rewards/Points/components.tsx

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

src/rewards/types.ts

@@ -49,7 +49,7 @@ export type RewardData = {
 
 export type RewardComponentsData = {
   // cardPropsHook?: CardPropsHook
-  cardSettingsComponent?: CardSettings
+  // cardSettingsComponent?: CardSettings
   cardMenuComponent?: (props: any) => JSX.Element
   cardWarningComponent?: (props: any) => JSX.Element
   cardButton?: (props: any) => JSX.Element
@@ -58,7 +58,7 @@ export type RewardComponentsData = {
   RoleCardComponent?: ComponentType<RewardProps>
 }
 
-export type CardSettings = () => JSX.Element
+export type CardSetting = () => JSX.Element
 export type RewardPreview = ComponentType<PropsWithChildren>
 export type AddRewardPanel = ComponentType<AddRewardPanelProps>
 export type RoleCard = ComponentType<RewardProps>