Resolve circular imports by reorganizing /src/rewards (#1418)

* refactor: extract RewardPreview

* refactor: extract cardPropsHook

* chore: replace missing cardPropsHook

* chore: extract CardSettingsComponent

* chore: remove unused types and empty files

* chore: clean up comments

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

@@ -11,8 +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 rewardComponents from "rewards/components"
+import { cardPropsHooks } from "rewards/cardPropsHooks"
 import {
   GuildPlatformWithOptionalId,
   PlatformName,
@@ -58,8 +59,8 @@ const NewRolePlatformCard = ({ rolePlatform, remove }: Props) => {
     guildPlatform.platformGuildData.function ===
       ContractCallFunction.DEPRECATED_SIMPLE_CLAIM
 
-  const { cardPropsHook: useCardProps, cardSettingsComponent } =
-    rewardComponents[type]
+  const cardSettingsComponent = cardSettings[type]
+  const useCardProps = cardPropsHooks[type]
 
   return (
     <RolePlatformProvider

src/components/[guild]/AddRewardButton/SelectRolePanel.tsx

@@ -21,7 +21,7 @@ import useToast from "hooks/useToast"
 import { useState } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import rewards, { CAPACITY_TIME_PLATFORMS } from "rewards"
-import rewardComponents from "rewards/components"
+import { RewardPreviews } from "rewards/RewardPreviews"
 import SelectRoleOrSetRequirements from "rewards/components/SelectRoleOrSetRequirements"
 import { RoleTypeToAddTo, useAddRewardContext } from "../AddRewardContext"
 import useGuild from "../hooks/useGuild"
@@ -73,7 +73,9 @@ const SelectRolePanel = ({
   const isAddRewardButtonDisabled =
     activeTab === RoleTypeToAddTo.NEW_ROLE ? !requirements?.length : !roleIds?.length
 
-  const { RewardPreview } = rewardComponents[selection] ?? {}
+  const RewardPreview = RewardPreviews.hasOwnProperty(selection)
+    ? RewardPreviews[selection as keyof typeof RewardPreviews]
+    : null
 
   const goBack = () => {
     if (!rewards[selection].autoRewardSetup)
@@ -100,31 +102,33 @@ const SelectRolePanel = ({
             <Text>{`Add ${rewards[selection]?.name} reward`}</Text>
           </HStack>
 
-          <RewardPreview>
-            {CAPACITY_TIME_PLATFORMS.includes(selection) && (
-              <AvailabilitySetup
-                platformType={rolePlatform?.guildPlatform?.platformName}
-                rolePlatform={rolePlatform}
-                defaultValues={{
-                  /**
-                   * If the user doesn't upload mint links for a POAP, we should
-                   * fallback to undefined, since 0 is not a valid value here
-                   */
-                  capacity:
-                    rolePlatform?.guildPlatform?.platformGuildData?.texts?.length ||
-                    undefined,
-                  /** POAPs have default startTime and endTime */
-                  startTime: rolePlatform?.startTime,
-                  endTime: rolePlatform?.endTime,
-                }}
-                onDone={({ capacity, startTime, endTime }) => {
-                  methods.setValue(`rolePlatforms.0.capacity`, capacity)
-                  methods.setValue(`rolePlatforms.0.startTime`, startTime)
-                  methods.setValue(`rolePlatforms.0.endTime`, endTime)
-                }}
-              />
-            )}
-          </RewardPreview>
+          {RewardPreview && (
+            <RewardPreview>
+              {CAPACITY_TIME_PLATFORMS.includes(selection) && (
+                <AvailabilitySetup
+                  platformType={rolePlatform?.guildPlatform?.platformName}
+                  rolePlatform={rolePlatform}
+                  defaultValues={{
+                    /**
+                     * If the user doesn't upload mint links for a POAP, we should
+                     * fallback to undefined, since 0 is not a valid value here
+                     */
+                    capacity:
+                      rolePlatform?.guildPlatform?.platformGuildData?.texts
+                        ?.length || undefined,
+                    /** POAPs have default startTime and endTime */
+                    startTime: rolePlatform?.startTime,
+                    endTime: rolePlatform?.endTime,
+                  }}
+                  onDone={({ capacity, startTime, endTime }) => {
+                    methods.setValue(`rolePlatforms.0.capacity`, capacity)
+                    methods.setValue(`rolePlatforms.0.startTime`, startTime)
+                    methods.setValue(`rolePlatforms.0.endTime`, endTime)
+                  }}
+                />
+              )}
+            </RewardPreview>
+          )}
         </Stack>
       </ModalHeader>
 

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

@@ -11,8 +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 rewardComponents from "rewards/components"
+import { cardPropsHooks } from "rewards/cardPropsHooks"
 import {
   GuildPlatformWithOptionalId,
   PlatformName,
@@ -68,8 +69,8 @@ const ExistingRolePlatformCard = ({ rolePlatform }: Props) => {
     guildPlatform.platformGuildData.function ===
       ContractCallFunction.DEPRECATED_SIMPLE_CLAIM
 
-  const { cardPropsHook: useCardProps, cardSettingsComponent } =
-    rewardComponents[type]
+  const cardSettingsComponent = cardSettings[type]
+  const useCardProps = cardPropsHooks[type]
   const { isPlatform } = rewards[type]
 
   return (

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

@@ -6,7 +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 rewardComponents from "rewards/components"
+import { cardSettings } from "rewards/CardSettings"
+import { cardPropsHooks } from "rewards/cardPropsHooks"
 import { PlatformType, Requirement, RoleFormType, RolePlatform } from "types"
 import EditRolePlatformModal from "../../EditRolePlatformModal"
 import PlatformCard from "../../PlatformCard"
@@ -67,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)
@@ -90,11 +89,8 @@ const SelectExistingPlatform = ({ onClose, onSelect }: Props) => {
 
       <SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} gap={4}>
         {filteredPlatforms?.map((platform) => {
-          const platformComponents =
-            rewardComponents[PlatformType[platform.platformId]]
-          if (!platformComponents) return null
-
-          const { cardPropsHook } = platformComponents
+          const cardPropsHook = cardPropsHooks[PlatformType[platform.platformId]]
+          if (!cardPropsHook) return null
 
           const isGoogleReward = platform.platformId === PlatformType.GOOGLE
           const isForm =

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/ContractCall/components.ts

@@ -1,13 +1,10 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 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(
@@ -20,10 +17,6 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/ContractCallPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
   RoleCardComponent: dynamic(
     () => import("rewards/ContractCall/ContractCallReward"),
     {

src/rewards/Discord/components.ts

@@ -1,14 +1,9 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 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(
     () =>
@@ -20,8 +15,4 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/DiscordPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
 } satisfies RewardComponentsData

src/rewards/Forms/components.ts

@@ -1,13 +1,10 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 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"), {
@@ -23,8 +20,4 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/FormPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
 } satisfies RewardComponentsData

src/rewards/Gather/components.ts

@@ -1,22 +1,15 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 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"), {
     ssr: false,
   }),
-  RewardPreview: dynamic(() => import("rewards/components/GatherPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
   AddRewardPanel: dynamic(
     () =>
       import(

src/rewards/Github/components.ts

@@ -1,12 +1,9 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 import { RewardComponentsData } from "rewards/types"
 import GithubCardMenu from "./GithubCardMenu"
-import useGithubCardProps from "./useGithubCardProps"
 
 export default {
-  cardPropsHook: useGithubCardProps,
   cardMenuComponent: GithubCardMenu,
   AddRewardPanel: dynamic(
     () =>
@@ -18,8 +15,4 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/GitHubPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
 } satisfies RewardComponentsData

src/rewards/Google/components.ts

@@ -1,15 +1,10 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 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,
   AddRewardPanel: dynamic(
@@ -22,8 +17,4 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/GooglePreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
 } satisfies RewardComponentsData

src/rewards/Poap/components.ts

@@ -1,12 +1,9 @@
 import dynamic from "next/dynamic"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 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(
@@ -18,10 +15,6 @@ export default {
       ssr: false,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/PoapPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
   RoleCardComponent: dynamic(() => import("rewards/components/PoapReward"), {
     ssr: false,
   }),