fix(type): address type errors around rewards

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

@@ -8,7 +8,6 @@ import useShowErrorToast from "hooks/useShowErrorToast"
 import { atom, useAtomValue } from "jotai"
 import { FormProvider, useForm, useWatch } from "react-hook-form"
 import rewards, { modalSizeForPlatform } from "rewards"
-import { RewardData } from "rewards/types"
 import { RoleFormType } from "types"
 import { AddRewardProvider, useAddRewardContext } from "../AddRewardContext"
 import { ClientStateRequirementHandlerProvider } from "../RequirementHandlerContext"
@@ -66,9 +65,7 @@ const AddRewardButton = () => {
   const { isStuck } = useIsTabsStuck()
   const { textColor, buttonColorScheme } = useThemeContext()
 
-  // TODO: once we separate rewards from platforms, we should be able to use this without ??, and it should properly infer types too.
-  const rewardConfig = rewards[selection] ?? {}
-  const AddRewardPanel = rewardConfig.AddRewardPanel as RewardData["AddRewardPanel"]
+  const { AddRewardPanel } = rewards[selection]
   const showErrorToast = useShowErrorToast()
 
   const isRewardSetupStep = selection && step !== "HOME" && step !== "SELECT_ROLE"
@@ -115,8 +112,8 @@ const AddRewardButton = () => {
             step === "SELECT_ROLE"
               ? "2xl"
               : isRewardSetupStep
-              ? modalSizeForPlatform(selection)
-              : "4xl"
+                ? modalSizeForPlatform(selection)
+                : "4xl"
           }
           scrollBehavior="inside"
           colorScheme="dark"

src/rewards/Discord/useDiscordCardProps.tsx

@@ -1,9 +1,12 @@
 import { useRolePlatform } from "components/[guild]/RolePlatforms/components/RolePlatformProvider"
 import useGuild from "components/[guild]/hooks/useGuild"
 import { useMemo } from "react"
+import { CardPropsHook } from "rewards/types"
 import { GuildPlatformWithOptionalId, PlatformName } from "types"
 
-const useDiscordCardProps = (guildPlatform: GuildPlatformWithOptionalId) => {
+const useDiscordCardProps: CardPropsHook = (
+  guildPlatform: GuildPlatformWithOptionalId
+) => {
   const { name: guildName, imageUrl } = useGuild()
   const rolePlatform = useRolePlatform()
   // const { data } = useServerData(guildPlatform.platformGuildId, {
@@ -22,17 +25,18 @@ const useDiscordCardProps = (guildPlatform: GuildPlatformWithOptionalId) => {
     // if (!discordRole) return "Deleted role"
     // return `${discordRole.name} role`
   }, [rolePlatform /* , data */])
-
+  const name =
+    guildPlatform.platformGuildName ||
+    guildPlatform.platformGuildData?.name ||
+    guildName
+  if (!name) return
   return {
     type: "DISCORD" as PlatformName,
     // image: data?.serverIcon || "/default_discord_icon.png",
     // name: data?.serverName || "",
     image: imageUrl,
-    name:
-      guildPlatform.platformGuildName ||
-      guildPlatform.platformGuildData?.name ||
-      guildName,
-    info: roleName,
+    name,
+    info: roleName ?? undefined,
   }
 }
 

src/rewards/Forms/useFormCardProps.tsx

@@ -7,29 +7,34 @@ import {
 } from "@chakra-ui/react"
 import { useGuildForm } from "components/[guild]/hooks/useGuildForms"
 import useGuildPermission from "components/[guild]/hooks/useGuildPermission"
-import rewards from "rewards"
+import rewards, { CardPropsHook } from "rewards"
 import { GuildPlatformWithOptionalId, PlatformName } from "types"
 import pluralize from "utils/pluralize"
 import { useUserFormSubmission } from "./hooks/useFormSubmissions"
 
-const useFormCardProps = (guildPlatform: GuildPlatformWithOptionalId) => {
+const useFormCardProps: CardPropsHook = (
+  guildPlatform: GuildPlatformWithOptionalId
+) => {
   const { isAdmin } = useGuildPermission()
   const circleBgColor = useColorModeValue("gray.700", "blackAlpha.300")
 
-  const { form, isSigned } = useGuildForm(guildPlatform.platformGuildData.formId)
-  const { userSubmission } = useUserFormSubmission(form)
+  const { form, isSigned } = useGuildForm(guildPlatform?.platformGuildData?.formId)
+  const { userSubmission } = useUserFormSubmission(form ?? null)
+  const name = form?.name ?? rewards.FORM?.name
 
+  if (!name) return
   return {
     type: "FORM" as PlatformName,
     image: (
       <Circle size={10} bgColor={circleBgColor}>
-        <Icon as={rewards.FORM.icon} color="white" />
+        <Icon as={rewards.FORM?.icon} color="white" />
       </Circle>
     ),
-    name: form?.name ?? rewards.FORM.name,
-    info: isSigned && isAdmin && (
-      <SubmissionCount submissionCount={form?.submissionCount ?? 0} />
-    ),
+    name,
+    info:
+      isSigned && isAdmin ? (
+        <SubmissionCount submissionCount={form?.submissionCount ?? 0} />
+      ) : undefined,
     shouldHide: !isAdmin && !!userSubmission,
   }
 }

src/rewards/Gather/index.ts

@@ -14,7 +14,7 @@ export default {
   colorScheme: "GATHER_TOWN",
   gatedEntity: "space",
   asRewardRestriction: PlatformAsRewardRestrictions.MULTIPLE_ROLES,
-  cardPropsHook: useGatherCardProps,
+  cardPropsHook: undefined, // useGatherCardProps,
   cardButton: GatherCardButton,
   cardMenuComponent: GatherCardMenu,
   RoleCardComponent: dynamic(() => import("rewards/components/GatherReward"), {

src/rewards/Gather/useGatherCardProps.tsx

@@ -10,18 +10,24 @@ const useGatherCardProps = (guildPlatform: GuildPlatform) => {
   const { roles } = useGuild()
 
   const rolePlatform = roles
-    .flatMap((role) => role.rolePlatforms)
+    ?.flatMap((role) => role.rolePlatforms)
     .find((rp) => rp.guildPlatformId === guildPlatform.id)
 
+  if (!guildPlatform.platformGuildData?.name) {
+    return
+  }
+
   return {
-    name: guildPlatform.platformGuildData?.name,
+    name: guildPlatform.platformGuildData.name,
     type: "GATHER_TOWN" as PlatformName,
     image: (
       <Circle size={10} bgColor={bgColor} overflow="hidden">
         <Img src={rewards.GATHER_TOWN.imageUrl} boxSize={10} color="white" />
       </Circle>
     ),
-    info: rolePlatform && <AvailabilityTags rolePlatform={rolePlatform} mt={1} />,
+    info: rolePlatform ? (
+      <AvailabilityTags rolePlatform={rolePlatform} mt={1} />
+    ) : undefined,
   }
 }
 

src/rewards/Google/useGoogleCardProps.tsx

@@ -1,5 +1,6 @@
 import { Circle, Img, useColorModeValue } from "@chakra-ui/react"
 import { useRolePlatform } from "components/[guild]/RolePlatforms/components/RolePlatformProvider"
+import { CardPropsHook } from "rewards/types"
 import { GuildPlatformWithOptionalId, PlatformName } from "types"
 
 const fileTypeNames = {
@@ -30,30 +31,40 @@ const getFileTypeName = (fileType: string) => {
   return staticFileType
 }
 
-const useGoogleCardProps = (guildPlatform: GuildPlatformWithOptionalId) => {
+const useGoogleCardProps: CardPropsHook = (
+  guildPlatform: GuildPlatformWithOptionalId
+) => {
   const rolePlatform = useRolePlatform()
   const imageBgColor = useColorModeValue("gray.100", "gray.800")
 
   const accessInfo = rolePlatform
     ? `, ${rolePlatform.platformRoleId || "reader"} access`
     : ""
 
+  if (!guildPlatform.platformGuildName) return
   return {
     type: "GOOGLE" as PlatformName,
     image: guildPlatform.platformGuildData?.iconLink ? (
       <Circle size={10} bgColor={imageBgColor}>
         <Img
           src={guildPlatform.platformGuildData?.iconLink}
-          alt={fileTypeNames[guildPlatform.platformGuildData?.mimeType]}
+          alt={
+            guildPlatform.platformGuildData?.mimeType &&
+            fileTypeNames[
+              guildPlatform.platformGuildData.mimeType as keyof typeof fileTypeNames
+            ]
+          }
         />
       </Circle>
     ) : (
       "/platforms/google.png"
     ),
     name: guildPlatform.platformGuildName,
-    info: `${getFileTypeName(
+    info: `${
       guildPlatform.platformGuildData?.mimeType
-    )}${accessInfo}`,
+        ? getFileTypeName(guildPlatform.platformGuildData.mimeType)
+        : ""
+    }${accessInfo}`,
   }
 }
 

src/rewards/Poap/index.ts

@@ -6,7 +6,6 @@ import dynamic from "next/dynamic"
 import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 
 export default {
-  icon: null,
   imageUrl: "/platforms/poap.png",
   name: "POAP",
   colorScheme: "purple",

src/rewards/PolygonID/usePolygonIDCardProps.tsx

@@ -15,7 +15,7 @@ const usePolygonIDCardProps = () => {
         <Img src={rewards.POLYGON_ID.imageUrl} boxSize={10} color="white" />
       </Circle>
     ),
-    info: !rolePlatform && "Onchain & zero-knowledge",
+    info: !rolePlatform ? "Onchain & zero-knowledge" : undefined,
   }
 }
 

src/rewards/components/PoapPreview.tsx

@@ -1,8 +1,9 @@
 import rewards from "rewards"
 import { useWatch } from "react-hook-form"
 import RewardPreview from "./RewardPreview"
+import { PropsWithChildren } from "react"
 
-const PoapPreview = ({ children }): JSX.Element => {
+const PoapPreview = ({ children }: PropsWithChildren): JSX.Element => {
   const name = useWatch({
     name: "rolePlatforms.0.guildPlatform.platformGuildData.name",
   })

src/rewards/components/SecretTextPreview.tsx

@@ -2,8 +2,9 @@ import { Circle, Icon, useColorModeValue } from "@chakra-ui/react"
 import rewards from "rewards"
 import { useWatch } from "react-hook-form"
 import RewardPreview from "./RewardPreview"
+import { PropsWithChildren } from "react"
 
-const SecretTextPreview = ({ children }): JSX.Element => {
+const SecretTextPreview = ({ children }: PropsWithChildren): JSX.Element => {
   const platformGuildData = useWatch({
     name: "rolePlatforms.0.guildPlatform.platformGuildData",
   })

src/rewards/components/TokenPreview.tsx

@@ -5,8 +5,9 @@ import {
 import { useWatch } from "react-hook-form"
 import { GuildPlatform } from "types"
 import RewardPreview from "./RewardPreview"
+import { PropsWithChildren } from "react"
 
-const TokenPreview = ({ children }): JSX.Element => {
+const TokenPreview = ({ children }: PropsWithChildren): JSX.Element => {
   const { token, imageUrl } = useTokenRewardContext()
 
   return (
@@ -16,7 +17,7 @@ const TokenPreview = ({ children }): JSX.Element => {
   )
 }
 
-const TokenPreviewWrapper = ({ children }): JSX.Element => {
+const TokenPreviewWrapper = ({ children }: PropsWithChildren): JSX.Element => {
   const guildPlatform: GuildPlatform = useWatch({
     name: "rolePlatforms.0.guildPlatform",
   })

src/rewards/components/UniqueTextPreview.tsx

@@ -2,8 +2,9 @@ import { Circle, Icon, useColorModeValue } from "@chakra-ui/react"
 import rewards from "rewards"
 import { useWatch } from "react-hook-form"
 import RewardPreview from "./RewardPreview"
+import { PropsWithChildren } from "react"
 
-const UniqueTextPreview = ({ children }): JSX.Element => {
+const UniqueTextPreview = ({ children }: PropsWithChildren): JSX.Element => {
   const platformGuildData = useWatch({
     name: "rolePlatforms.0.guildPlatform.platformGuildData",
   })

src/rewards/index.ts

@@ -16,7 +16,7 @@ import twitterRewardV1, { twitterReward } from "rewards/Twitter"
 import uniqueTextReward from "rewards/UniqueText"
 import { Rewards } from "./types"
 
-export default {
+const rewards: Rewards = {
   TWITTER_V1: twitterRewardV1,
   TWITTER: twitterReward,
   EMAIL: emailReward,
@@ -34,7 +34,9 @@ export default {
   GITHUB: githubReward,
   POAP: poapReward,
   FARCASTER: farcasterReward,
-} as const satisfies Partial<Rewards>
+} as const
+
+export default rewards
 
 export * from "./types"
 export * from "./constants"

src/rewards/types.ts

@@ -35,7 +35,7 @@ export enum PlatformAsRewardRestrictions {
 }
 
 export type RewardData = {
-  icon: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>
+  icon?: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>
   imageUrl?: string
   name: string
   colorScheme: ThemingProps["colorScheme"]
@@ -47,11 +47,11 @@ export type RewardData = {
    */
   autoRewardSetup?: boolean
   cardSettingsComponent?: CardSettingsComponent
-  cardMenuComponent?: (props) => JSX.Element
-  cardWarningComponent?: (props) => JSX.Element
-  cardButton?: (props) => JSX.Element
+  cardMenuComponent?: (props: any) => JSX.Element
+  cardWarningComponent?: (props: any) => JSX.Element
+  cardButton?: (props: any) => JSX.Element
   AddRewardPanel?: ComponentType<AddRewardPanelProps>
-  RewardPreview?: ComponentType<PropsWithChildren<unknown>>
+  RewardPreview?: ComponentType<PropsWithChildren>
   RoleCardComponent?: ComponentType<RewardProps>
   isPlatform?: boolean
   asRewardRestriction: PlatformAsRewardRestrictions
@@ -70,11 +70,13 @@ export type AddRewardPanelProps = {
   skipSettings?: boolean
 }
 
-export type CardPropsHook = (guildPlatform: GuildPlatformWithOptionalId) => {
-  type: PlatformName
-  name: string
-  image?: string | JSX.Element
-  info?: string | JSX.Element
-  link?: string
-  shouldHide?: boolean
-}
+export type CardPropsHook = (guildPlatform: GuildPlatformWithOptionalId) =>
+  | {
+      type: PlatformName
+      name: string
+      image?: string | JSX.Element
+      info?: string | JSX.Element
+      link?: string
+      shouldHide?: boolean
+    }
+  | undefined