refactor: extract RewardPreview

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/rewards/CardSettings.ts

@@ -0,0 +1 @@
+export const cardSettings = {}

src/rewards/ContractCall/components.ts

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

src/rewards/Forms/components.ts

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

src/rewards/Gather/components.ts

@@ -1,6 +1,5 @@
 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"
@@ -13,10 +12,6 @@ export default {
   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,6 +1,5 @@
 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"
@@ -18,8 +17,4 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/GitHubPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
 } satisfies RewardComponentsData

src/rewards/Google/components.ts

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

src/rewards/Poap/components.ts

@@ -1,5 +1,4 @@
 import dynamic from "next/dynamic"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 import { RewardComponentsData } from "rewards/types"
 import PoapCardButton from "./PoapCardButton"
 import PoapCardMenu from "./PoapCardMenu"
@@ -18,10 +17,6 @@ export default {
       ssr: false,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/PoapPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
   RoleCardComponent: dynamic(() => import("rewards/components/PoapReward"), {
     ssr: false,
   }),

src/rewards/Points/components.tsx

@@ -1,19 +1,14 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
-import { CardSettingsComponent, RewardComponentsData } from "rewards/types"
+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} />,
-  }) as CardSettingsComponent,
-  RewardPreview: dynamic(() => import("rewards/components/PointsPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
+  }) as CardSettings,
   AddRewardPanel: dynamic(
     () =>
       import(

src/rewards/PolygonID/components.ts

@@ -1,6 +1,5 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 import { RewardComponentsData } from "rewards/types"
 import PolygonIDCardButton from "./PolygonIDCardButton"
 import PolygonIDCardMenu from "./PolygonIDCardMenu"
@@ -20,10 +19,6 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/PolygonIDPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
   RoleCardComponent: dynamic(() => import("rewards/components/PolygonIDReward"), {
     ssr: false,
   }),

src/rewards/RewardPreviews.ts

@@ -0,0 +1,58 @@
+import dynamic from "next/dynamic"
+import LoadingRewardPreview from "./components/LoadingRewardPreview"
+import { RewardComponentMap, RewardPreview } from "./types"
+
+export const RewardPreviews = {
+  GATHER_TOWN: dynamic(() => import("rewards/components/GatherPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  GITHUB: dynamic(() => import("rewards/components/GitHubPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  GOOGLE: dynamic(() => import("rewards/components/GooglePreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  ERC20: dynamic(() => import("rewards/components/TokenPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  UNIQUE_TEXT: dynamic(() => import("rewards/components/UniqueTextPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  POLYGON_ID: dynamic(() => import("rewards/components/PolygonIDPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  CONTRACT_CALL: dynamic(() => import("rewards/components/ContractCallPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  FORM: dynamic(() => import("rewards/components/FormPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  TELEGRAM: dynamic(() => import("rewards/components/TelegramPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  DISCORD: dynamic(() => import("rewards/components/DiscordPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  POAP: dynamic(() => import("rewards/components/PoapPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  TEXT: dynamic(() => import("rewards/components/SecretTextPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+  POINTS: dynamic(() => import("rewards/components/PointsPreview"), {
+    ssr: false,
+    loading: LoadingRewardPreview,
+  }),
+} as const satisfies RewardComponentMap<RewardPreview>

src/rewards/SecretText/components.ts

@@ -1,6 +1,5 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 import { RewardComponentsData } from "rewards/types"
 import SecretTextCardMenu from "./SecretTextCardMenu"
 import TextCardButton from "./TextCardButton"
@@ -20,10 +19,6 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/SecretTextPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
   RoleCardComponent: dynamic(() => import("rewards/components/TextReward"), {
     ssr: false,
   }),

src/rewards/Telegram/components.ts

@@ -1,6 +1,5 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 import { RewardComponentsData } from "rewards/types"
 import TelegramCardMenu from "./TelegramCardMenu"
 import useTelegramCardProps from "./useTelegramCardProps"
@@ -18,8 +17,4 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/TelegramPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
 } satisfies RewardComponentsData

src/rewards/Token/components.ts

@@ -1,6 +1,5 @@
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 import { RewardComponentsData } from "rewards/types"
 import ClaimTokenButton from "./ClaimTokenButton"
 import useTokenCardProps from "./hooks/useTokenCardProps"
@@ -18,10 +17,6 @@ export default {
       loading: AddRewardPanelLoadingSpinner,
     }
   ),
-  RewardPreview: dynamic(() => import("rewards/components/TokenPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
   RoleCardComponent: dynamic(() => import("rewards/components/TokenReward"), {
     ssr: false,
   }),

src/rewards/UniqueText/components.ts

@@ -1,6 +1,5 @@
 import dynamic from "next/dynamic"
 import TextCardButton from "rewards/SecretText/TextCardButton"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 import { RewardComponentsData } from "rewards/types"
 import UniqueTextCardMenu from "./UniqueTextCardMenu"
 import useUniqueTextCardProps from "./useUniqueTextCardProps"
@@ -9,10 +8,6 @@ export default {
   cardPropsHook: useUniqueTextCardProps,
   cardButton: TextCardButton,
   cardMenuComponent: UniqueTextCardMenu,
-  RewardPreview: dynamic(() => import("rewards/components/UniqueTextPreview"), {
-    ssr: false,
-    loading: LoadingRewardPreview,
-  }),
   RoleCardComponent: dynamic(() => import("rewards/components/TextReward"), {
     ssr: false,
   }),