resolve circular deps (#1357)

* fix(Token): resolve circular deps

* fix(Reward): resolve circular deps

src/components/[guild]/Requirements/components/GuildCheckout/components/GuildPinReward.tsx

@@ -1,8 +1,8 @@
 import { env } from "env"
 import { Img, Text } from "@chakra-ui/react"
 import useGuild from "components/[guild]/hooks/useGuild"
-import { RewardDisplay } from "components/[guild]/RoleCard/components/Reward"
 import { GuildAction, useMintGuildPinContext } from "../MintGuildPinContext"
+import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
 
 const GuildPinReward = (): JSX.Element => {
   const { pinType, pinImage } = useMintGuildPinContext()

src/components/[guild]/RoleCard/components/HiddenRewards.tsx

@@ -1,6 +1,6 @@
 import { Center, useColorModeValue } from "@chakra-ui/react"
 import { Question } from "@phosphor-icons/react"
-import { RewardDisplay } from "./Reward"
+import { RewardDisplay } from "./RewardDisplay"
 
 const HiddenRewards = () => {
   const rewardImageBgColor = useColorModeValue("blackAlpha.100", "blackAlpha.300")

src/components/[guild]/RoleCard/components/Reward.tsx

@@ -1,14 +1,10 @@
 import {
-  ChakraProps,
   Circle,
-  HStack,
   Icon,
   Img,
   Spinner,
-  Stack,
   Text,
   Tooltip,
-  Wrap,
   useColorModeValue,
 } from "@chakra-ui/react"
 import { ArrowSquareOut, LockSimple } from "@phosphor-icons/react"
@@ -21,21 +17,15 @@ import Button from "components/common/Button"
 import useMembership, {
   useRoleMembership,
 } from "components/explorer/hooks/useMembership"
-import { Transition, motion } from "framer-motion"
-import { PropsWithChildren, ReactNode, useMemo, useState } from "react"
+import { motion } from "framer-motion"
+import { useMemo, useState } from "react"
 import rewards from "rewards"
 import rewardComponents from "rewards/components"
 import GoogleCardWarning from "rewards/Google/GoogleCardWarning"
-import { GuildPlatform, PlatformType, Role, RolePlatform } from "types"
+import { PlatformType, RolePlatform } from "types"
 import capitalize from "utils/capitalize"
-
-export type RewardProps = {
-  role: Role // should change to just roleId when we won't need memberCount anymore
-  platform: RolePlatform
-  withLink?: boolean
-  withMotionImg?: boolean
-  isLinkColorful?: boolean
-}
+import { RewardDisplay } from "./RewardDisplay"
+import { RewardIconProps, RewardProps } from "./types"
 
 const getRewardLabel = (platform: RolePlatform) => {
   switch (platform.guildPlatform.platformId) {
@@ -158,40 +148,6 @@ const Reward = ({
   )
 }
 
-const RewardDisplay = ({
-  icon,
-  label,
-  rightElement,
-  children,
-  ...chakraProps
-}: PropsWithChildren<
-  {
-    icon?: ReactNode
-    label: ReactNode
-    rightElement?: ReactNode
-  } & ChakraProps
->) => (
-  <HStack pt="3" spacing={2} alignItems={"flex-start"} {...chakraProps}>
-    {icon}
-
-    <Stack w="full" spacing={0.5}>
-      <Wrap spacingY={0.5}>
-        <Text maxW="calc(100% - var(--chakra-sizes-12))">{label}</Text>
-        {rightElement}
-      </Wrap>
-
-      {children}
-    </Stack>
-  </HStack>
-)
-
-export type RewardIconProps = {
-  rolePlatformId: number
-  guildPlatform: GuildPlatform
-  withMotionImg?: boolean
-  transition?: Transition
-}
-
 const MotionImg = motion(Img)
 const MotionCircle = motion(Circle)
 
@@ -281,5 +237,5 @@ const RewardWrapper = ({ platform, ...props }: RewardProps) => {
   )
 }
 
-export { Reward, RewardDisplay, RewardIcon, getRewardLabel }
+export { Reward, RewardIcon, getRewardLabel }
 export default RewardWrapper

src/components/[guild]/RoleCard/components/RewardDisplay.tsx

@@ -0,0 +1,29 @@
+import { ChakraProps, HStack, Stack, Wrap, Text } from "@chakra-ui/react"
+import { PropsWithChildren, ReactNode } from "react"
+
+export const RewardDisplay = ({
+  icon,
+  label,
+  rightElement,
+  children,
+  ...chakraProps
+}: PropsWithChildren<
+  {
+    icon?: ReactNode
+    label: ReactNode
+    rightElement?: ReactNode
+  } & ChakraProps
+>) => (
+  <HStack pt="3" spacing={2} alignItems={"flex-start"} {...chakraProps}>
+    {icon}
+
+    <Stack w="full" spacing={0.5}>
+      <Wrap spacingY={0.5}>
+        <Text maxW="calc(100% - var(--chakra-sizes-12))">{label}</Text>
+        {rightElement}
+      </Wrap>
+
+      {children}
+    </Stack>
+  </HStack>
+)

src/components/[guild]/RoleCard/components/types.ts

@@ -0,0 +1,17 @@
+import { Transition } from "framer-motion"
+import { GuildPlatform, Role, RolePlatform } from "types"
+
+export type RewardProps = {
+  role: Role // should change to just roleId when we won't need memberCount anymore
+  platform: RolePlatform
+  withLink?: boolean
+  withMotionImg?: boolean
+  isLinkColorful?: boolean
+}
+
+export type RewardIconProps = {
+  rolePlatformId: number
+  guildPlatform: GuildPlatform
+  withMotionImg?: boolean
+  transition?: Transition
+}

src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddTokenPanel/components/DynamicAmount.tsx

@@ -9,11 +9,6 @@ import DynamicTypeForm from "rewards/Token/DynamicTypeForm"
 import Token from "static/icons/token.svg"
 import ConversionInput from "./ConversionInput"
 
-export enum SnapshotOption {
-  GUILD_POINTS = "GUILD_POINTS",
-  CUSTOM = "CUSTOM",
-}
-
 const DynamicAmount = () => {
   const pointsPlatformId = useWatch({ name: "data.guildPlatformId" })
   const chain = useWatch({ name: `chain` })

src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddTokenPanel/components/types.ts

@@ -0,0 +1,4 @@
+export enum SnapshotOption {
+  GUILD_POINTS = "GUILD_POINTS",
+  CUSTOM = "CUSTOM",
+}

src/components/[guild]/collect/components/CollectNftContext.tsx

@@ -5,17 +5,15 @@ import {
 } from "components/[guild]/Requirements/components/GuildCheckout/components/TransactionStatusContext"
 import TransactionStatusModal from "components/[guild]/Requirements/components/GuildCheckout/components/TransactionStatusModal"
 import OpenseaLink from "components/[guild]/Requirements/components/GuildCheckout/components/TransactionStatusModal/components/OpenseaLink"
-import {
-  RewardDisplay,
-  RewardIcon,
-} from "components/[guild]/RoleCard/components/Reward"
+import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
 import { ContractCallFunction } from "components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddContractCallPanel/components/CreateNftForm/hooks/useCreateNft"
 import { PropsWithChildren, createContext, useContext, useEffect } from "react"
 import { FormProvider, useForm, useWatch } from "react-hook-form"
 import { GuildPlatform } from "types"
 import { Chain, Chains } from "wagmiConfig/chains"
 import useGuildRewardNftBalanceByUserId from "../hooks/useGuildRewardNftBalanceByUserId"
 import useNftDetails from "../hooks/useNftDetails"
+import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
 
 type Props = {
   roleId: number

src/rewards/ContractCall/ContractCallReward.tsx

@@ -5,15 +5,14 @@ import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"
 import { motion } from "framer-motion"
 import {
-  RewardDisplay,
   RewardIconProps,
   RewardProps,
-} from "../../components/[guild]/RoleCard/components/Reward"
-
+} from "../../components/[guild]/RoleCard/components/types"
 import { usePostHogContext } from "components/_app/PostHogProvider"
 import Link from "next/link"
 import { forwardRef } from "react"
 import NftAvailabilityTags from "./components/NftAvailabilityTags"
+import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
 
 const ContractCallReward = ({
   platform,

src/rewards/Token/DynamicTypeForm.tsx

@@ -1,8 +1,8 @@
 import { Circle, FormControl, Icon, useColorModeValue } from "@chakra-ui/react"
 import { ListNumbers } from "@phosphor-icons/react"
 import CustomSnapshotForm from "components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddTokenPanel/components/CustomSnapshotForm"
-import { SnapshotOption } from "components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddTokenPanel/components/DynamicAmount"
 import GuildPointsSnapshotForm from "components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddTokenPanel/components/GuildPointsSnapshotForm"
+import { SnapshotOption } from "components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddTokenPanel/components/types"
 import RadioSelect from "components/common/RadioSelect"
 import { Option } from "components/common/RadioSelect/RadioSelect"
 import { useController, useFormContext } from "react-hook-form"

src/rewards/components/FormReward.tsx

@@ -1,10 +1,8 @@
 import { Skeleton, Tooltip } from "@chakra-ui/react"
 import { ArrowRight } from "@phosphor-icons/react"
-import {
-  RewardDisplay,
-  RewardIcon,
-  RewardProps,
-} from "components/[guild]/RoleCard/components/Reward"
+import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
+import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardProps } from "components/[guild]/RoleCard/components/types"
 import useGuild from "components/[guild]/hooks/useGuild"
 import { useGuildForm } from "components/[guild]/hooks/useGuildForms"
 import Button from "components/common/Button"

src/rewards/components/GatherReward.tsx

@@ -1,11 +1,9 @@
 import { Icon, Spinner, Text, Tooltip } from "@chakra-ui/react"
 import { ArrowSquareOut, LockSimple } from "@phosphor-icons/react"
 import { useOpenJoinModal } from "components/[guild]/JoinModal/JoinModalProvider"
-import {
-  RewardDisplay,
-  RewardIcon,
-  RewardProps,
-} from "components/[guild]/RoleCard/components/Reward"
+import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
+import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardProps } from "components/[guild]/RoleCard/components/types"
 import AvailabilityTags from "components/[guild]/RolePlatforms/components/PlatformCard/components/AvailabilityTags"
 import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"

src/rewards/components/PoapReward.tsx

@@ -1,10 +1,8 @@
 import { Tooltip } from "@chakra-ui/react"
 import { ArrowRight } from "@phosphor-icons/react"
-import {
-  RewardDisplay,
-  RewardIcon,
-  RewardProps,
-} from "components/[guild]/RoleCard/components/Reward"
+import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
+import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardProps } from "components/[guild]/RoleCard/components/types"
 import AvailabilityTags from "components/[guild]/RolePlatforms/components/PlatformCard/components/AvailabilityTags"
 import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"

src/rewards/components/PointsReward.tsx

@@ -2,11 +2,9 @@ import { Link } from "@chakra-ui/next-js"
 import { Icon, Tooltip, useColorModeValue } from "@chakra-ui/react"
 import { ArrowRight, Check } from "@phosphor-icons/react"
 import DynamicTag from "components/[guild]/RoleCard/components/DynamicReward/DynamicTag"
-import {
-  RewardDisplay,
-  RewardIcon,
-  RewardProps,
-} from "components/[guild]/RoleCard/components/Reward"
+import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
+import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardProps } from "components/[guild]/RoleCard/components/types"
 import useGuild from "components/[guild]/hooks/useGuild"
 import { useRoleMembership } from "components/explorer/hooks/useMembership"
 import useDynamicRewardUserAmount from "rewards/Token/hooks/useDynamicRewardUserAmount"

src/rewards/components/PolygonIDReward.tsx

@@ -1,11 +1,9 @@
 import { Icon, Spinner, Tooltip } from "@chakra-ui/react"
 import { ArrowSquareIn, LockSimple } from "@phosphor-icons/react"
 import { useOpenJoinModal } from "components/[guild]/JoinModal/JoinModalProvider"
-import {
-  RewardDisplay,
-  RewardIcon,
-  RewardProps,
-} from "components/[guild]/RoleCard/components/Reward"
+import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
+import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
+import { RewardProps } from "components/[guild]/RoleCard/components/types"
 import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"
 import useMembership, {

src/rewards/components/TextReward.tsx

@@ -1,11 +1,7 @@
 import { Icon, Spinner, Text, Tooltip } from "@chakra-ui/react"
 import { ArrowSquareIn, LockSimple } from "@phosphor-icons/react"
 import { useOpenJoinModal } from "components/[guild]/JoinModal/JoinModalProvider"
-import {
-  RewardDisplay,
-  RewardIcon,
-  RewardProps,
-} from "components/[guild]/RoleCard/components/Reward"
+import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
 import AvailabilityTags from "components/[guild]/RolePlatforms/components/PlatformCard/components/AvailabilityTags"
 import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"
@@ -22,6 +18,8 @@ import {
   getRolePlatformTimeframeInfo,
 } from "utils/rolePlatformHelpers"
 import { useClaimedReward } from "../../hooks/useClaimedReward"
+import { RewardProps } from "components/[guild]/RoleCard/components/types"
+import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
 
 const SecretTextReward = ({ platform, withMotionImg }: RewardProps) => {
   const { platformId, platformGuildData } = platform.guildPlatform

src/rewards/components/TokenReward.tsx

@@ -2,11 +2,7 @@ import { Icon, Spinner, Tooltip } from "@chakra-ui/react"
 import { ArrowSquareIn, LockSimple } from "@phosphor-icons/react"
 import { useOpenJoinModal } from "components/[guild]/JoinModal/JoinModalProvider"
 import DynamicTag from "components/[guild]/RoleCard/components/DynamicReward/DynamicTag"
-import {
-  RewardDisplay,
-  RewardIcon,
-  RewardProps,
-} from "components/[guild]/RoleCard/components/Reward"
+import { RewardIcon } from "components/[guild]/RoleCard/components/Reward"
 import AvailabilityTags from "components/[guild]/RolePlatforms/components/PlatformCard/components/AvailabilityTags"
 import useGuildPermission from "components/[guild]/hooks/useGuildPermission"
 import Button from "components/common/Button"
@@ -28,6 +24,8 @@ import {
   getRolePlatformStatus,
   getRolePlatformTimeframeInfo,
 } from "utils/rolePlatformHelpers"
+import { RewardProps } from "components/[guild]/RoleCard/components/types"
+import { RewardDisplay } from "components/[guild]/RoleCard/components/RewardDisplay"
 
 const TokenReward = ({ rolePlatform }: { rolePlatform: RolePlatform }) => {
   const { token } = useTokenRewardContext()

src/rewards/types.ts

@@ -1,6 +1,6 @@
 import type { ThemingProps } from "@chakra-ui/react"
 import type { IconProps } from "@phosphor-icons/react"
-import type { RewardProps } from "components/[guild]/RoleCard/components/Reward"
+import type { RewardProps } from "components/[guild]/RoleCard/components/types"
 import type {
   ComponentType,
   ForwardRefExoticComponent,