Merge branch 'main' of github.com:guildxyz/guild.xyz into dx-improvement

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

@@ -17,12 +17,14 @@ import DiscardAlert from "components/common/DiscardAlert"
 import Section from "components/common/Section"
 import Description from "components/create-guild/Description"
 import DynamicDevTool from "components/create-guild/DynamicDevTool"
+import useJsConfetti from "components/create-guild/hooks/useJsConfetti"
 import IconSelector from "components/create-guild/IconSelector"
 import Name from "components/create-guild/Name"
 import SetRequirements from "components/create-guild/Requirements"
 import useCreateRRR from "hooks/useCreateRRR"
 import usePinata from "hooks/usePinata"
 import useSubmitWithUpload from "hooks/useSubmitWithUpload"
+import useToast from "hooks/useToast"
 import useWarnIfUnsavedChanges from "hooks/useWarnIfUnsavedChanges"
 import { useRef } from "react"
 import { FormProvider } from "react-hook-form"
@@ -59,9 +61,16 @@ const AddRoleDrawer = ({ isOpen, onClose, finalFocusRef }): JSX.Element => {
   })
 
   const drawerBodyRef = useRef<HTMLDivElement>()
+  const toast = useToast()
+  const triggerConfetti = useJsConfetti()
 
   const { onSubmit, isLoading, loadingText } = useCreateRRR({
     onSuccess: () => {
+      triggerConfetti()
+      toast({
+        title: "Role successfully created!",
+        status: "success",
+      })
       methods.reset(methods.defaultValues)
       onClose()
     },

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

@@ -15,7 +15,9 @@ import { Visibility } from "@guildxyz/types"
 import { ArrowLeft, Info } from "@phosphor-icons/react"
 import { usePostHogContext } from "components/_app/PostHogProvider"
 import Button from "components/common/Button"
+import useJsConfetti from "components/create-guild/hooks/useJsConfetti"
 import useCreateRRR, { SubmitData } from "hooks/useCreateRRR"
+import useToast from "hooks/useToast"
 import { useState } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import rewards, { CAPACITY_TIME_PLATFORMS } from "rewards"
@@ -51,9 +53,16 @@ const SelectRolePanel = ({
     requirements: requirements,
     roleIds: roleIds,
   }
+  const toast = useToast()
+  const triggerConfetti = useJsConfetti()
 
   const { onSubmit, isLoading } = useCreateRRR({
     onSuccess: (res) => {
+      triggerConfetti()
+      toast({
+        title: "Reward successfully created!",
+        status: "success",
+      })
       captureEvent("reward created (AddRewardButton)", postHogOptions)
       onSuccess?.(res)
     },

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

@@ -22,8 +22,9 @@ import useShowErrorToast from "hooks/useShowErrorToast"
 import dynamic from "next/dynamic"
 import { ComponentType, useRef } from "react"
 import { FormProvider, useForm } from "react-hook-form"
+import { RequirementType } from "requirements/types"
 import rewards from "rewards"
-import { PlatformName, RequirementType } from "types"
+import { PlatformName } from "types"
 import ConnectPlatform from "./components/ConnectPlatform"
 import ShareSocialsCheckbox from "./components/ShareSocialsCheckbox"
 import WalletAuthButton from "./components/WalletAuthButton"

src/components/[guild]/Requirements/RequirementErrorConfigContext.tsx

@@ -1,5 +1,5 @@
-import { PropsWithChildren, createContext, useContext } from "react"
-import { RequirementType } from "requirements"
+import { createContext, PropsWithChildren, useContext } from "react"
+import { RequirementType } from "requirements/types"
 
 type RequirementErrorConfig = Partial<Record<RequirementType, string>>
 

src/components/[guild]/Requirements/components/ConnectRequirementPlatformButton.tsx

@@ -7,15 +7,16 @@ import { ConnectEmailButton } from "components/common/Layout/components/Account/
 import { ConnectFarcasterButton } from "components/common/Layout/components/Account/components/AccountModal/components/SocialAccount/FarcasterProfile"
 import { useRoleMembership } from "components/explorer/hooks/useMembership"
 import useToast from "hooks/useToast"
-import REQUIREMENTS, { RequirementType } from "requirements"
+import REQUIREMENTS from "requirements"
+import { RequirementType } from "requirements/types"
 import rewards from "rewards"
 import { PlatformName } from "types"
 import { useRequirementContext } from "./RequirementContext"
 
 function requirementTypeToPlatformName(type: RequirementType): PlatformName {
   if (type === "ALLOWLIST_EMAIL") return "EMAIL"
-  if (REQUIREMENTS[type].types[0] === "TWITTER") return "TWITTER_V1"
-  return REQUIREMENTS[type].types[0] as PlatformName
+  if (REQUIREMENTS[type].types[0].startsWith("TWITTER")) return "TWITTER_V1"
+  return REQUIREMENTS[type].types[0].split("_")[0] as PlatformName
 }
 
 const RequirementConnectButton = (props: ButtonProps) => {
@@ -80,10 +81,7 @@ const ConnectRequirementPlatformButton = ({
 }: ButtonProps & { onSuccess: () => void; isReconnection?: boolean }) => {
   const { type } = useRequirementContext()
 
-  const platform =
-    REQUIREMENTS[type].types[0] === "TWITTER"
-      ? "TWITTER_V1"
-      : (REQUIREMENTS[type].types[0] as PlatformName)
+  const platform = requirementTypeToPlatformName(type)
 
   const { onConnect, isLoading, loadingText } = useConnectPlatform(
     platform,

src/components/[guild]/Requirements/components/DataProviderRequirement.tsx

@@ -1,6 +1,6 @@
 import { Box, Circle, Flex, HStack, Icon, SimpleGrid, Text } from "@chakra-ui/react"
 import { Lightning } from "@phosphor-icons/react"
-import { REQUIREMENT_PROVIDED_VALUES } from "requirements/requirements"
+import { REQUIREMENT_PROVIDED_VALUES } from "requirements/requirementProvidedValues"
 import { RequirementProps } from "./Requirement"
 import { useRequirementContext } from "./RequirementContext"
 import { RequirementImage, RequirementImageCircle } from "./RequirementImage"

src/components/[guild]/Requirements/components/RequirementDisplayComponent.tsx

@@ -4,7 +4,7 @@ import { usePostHogContext } from "components/_app/PostHogProvider"
 import DataBlock from "components/common/DataBlock"
 import { PropsWithChildren } from "react"
 import { ErrorBoundary } from "react-error-boundary"
-import REQUIREMENTS from "requirements"
+import { REQUIREMENT_DISPLAY_COMPONENTS } from "requirements/requirementDisplayComponents"
 import { Requirement as RequirementType, Rest } from "types"
 import { CHAIN_CONFIG } from "wagmiConfig/chains"
 import HiddenRequirementAccessIndicator from "./HiddenRequirementAccessIndicator"
@@ -34,7 +34,7 @@ const RequirementDisplayComponent = ({
       </Requirement>
     )
 
-  const RequirementComponent = REQUIREMENTS[requirement.type]?.displayComponent
+  const RequirementComponent = REQUIREMENT_DISPLAY_COMPONENTS[requirement.type]
 
   if (!!requirement.chain && !CHAIN_CONFIG[requirement.chain])
     return (

src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/DynamicSetup/BaseValueModal.tsx

@@ -15,7 +15,7 @@ import RequirementDisplayComponent from "components/[guild]/Requirements/compone
 import DisplayCard from "components/common/DisplayCard"
 import { Modal } from "components/common/Modal"
 import AddRequirement from "components/create-guild/Requirements/components/AddRequirement"
-import { REQUIREMENT_PROVIDED_VALUES } from "requirements/requirements"
+import { REQUIREMENT_PROVIDED_VALUES } from "requirements/requirementProvidedValues"
 
 type Props = {
   isOpen: boolean

src/components/[guild]/crm/FilterByRoles/components/SetHiddenRoleRequirements.tsx

@@ -6,7 +6,7 @@ import LogicFormControl from "components/create-guild/Requirements/components/Lo
 import RequirementEditableCard from "components/create-guild/Requirements/components/RequirementEditableCard"
 import { AnimatePresence } from "framer-motion"
 import { useFieldArray, useFormContext, useWatch } from "react-hook-form"
-import { RequirementType } from "requirements"
+import { RequirementType } from "requirements/types"
 import { Requirement } from "types"
 
 const SetHiddenRoleRequirements = (): JSX.Element => {

src/components/create-guild/Requirements/SetRequirements.tsx

@@ -6,8 +6,8 @@ import { SectionTitle } from "components/common/Section"
 import { AnimatePresence } from "framer-motion"
 import useToast from "hooks/useToast"
 import { useFormContext, useWatch } from "react-hook-form"
-import { RequirementType } from "requirements"
 import FreeRequirement from "requirements/Free/FreeRequirement"
+import { RequirementType } from "requirements/types"
 import { Requirement, RolePlatform } from "types"
 import AddRequirement from "./components/AddRequirement"
 import BalancyCounterWithPopover from "./components/BalancyCounter"

src/components/create-guild/Requirements/components/AddRequirement.tsx

@@ -40,11 +40,13 @@ import {
   useState,
 } from "react"
 import { FormProvider, useForm, useWatch } from "react-hook-form"
-import REQUIREMENTS, { REQUIREMENTS_DATA, RequirementType } from "requirements"
+import REQUIREMENTS, { REQUIREMENTS_DATA } from "requirements"
+import { REQUIREMENT_FORM_COMPONENTS } from "requirements/requirementFormComponents"
 import {
   PROVIDER_TYPES,
   REQUIREMENT_PROVIDED_VALUES,
-} from "requirements/requirements"
+} from "requirements/requirementProvidedValues"
+import { RequirementType } from "requirements/types"
 import { Requirement } from "types"
 import useCreateRequirement from "../hooks/useCreateRequirement"
 import BalancyFooter from "./BalancyFooter"
@@ -56,7 +58,9 @@ const general = REQUIREMENTS_DATA.slice(1, GENERAL_REQUIREMENTS_COUNT + 1)
 const integrations = REQUIREMENTS_DATA.slice(GENERAL_REQUIREMENTS_COUNT + 1)
 
 // call undocumented preload() from next/dynamic, so the components are already loaded when they mount, which is needed for the height animation
-Object.values(REQUIREMENTS).forEach((a: any) => a.formComponent?.render?.preload?.())
+Object.values(REQUIREMENT_FORM_COMPONENTS).forEach((requirementFormComponent) =>
+  requirementFormComponent?.render?.preload?.()
+)
 
 const TRANSITION_DURATION_MS = 200
 const HOME_MAX_HEIGHT = "550px"
@@ -203,7 +207,7 @@ const AddRequirementForm = forwardRef(
     }: AddRequirementFormProps,
     ref: LegacyRef<HTMLDivElement>
   ) => {
-    const FormComponent = REQUIREMENTS[selectedType].formComponent
+    const FormComponent = REQUIREMENT_FORM_COMPONENTS[selectedType]
 
     const methods = useForm<Schemas["RequirementCreationPayload"]>({ mode: "all" })
 

src/components/create-guild/Requirements/components/ExistingRequirementEditableCard.tsx

@@ -10,7 +10,8 @@ import SetVisibility from "components/[guild]/SetVisibility"
 import useVisibilityModalProps from "components/[guild]/SetVisibility/hooks/useVisibilityModalProps"
 import { ComponentProps, PropsWithChildren, useRef } from "react"
 import { FormProvider, useForm } from "react-hook-form"
-import REQUIREMENTS from "requirements"
+import { REQUIREMENT_DISPLAY_COMPONENTS } from "requirements/requirementDisplayComponents"
+import { REQUIREMENT_FORM_COMPONENTS } from "requirements/requirementFormComponents"
 import { Requirement, Requirement as RequirementType } from "types"
 import mapRequirement from "utils/mapRequirement"
 import useEditRequirement from "../hooks/useEditRequirement"
@@ -43,8 +44,8 @@ const ExistingRequirementEditableCard = ({
     onClose: onDeleteClose,
   } = useDisclosure()
 
-  const RequirementComponent = REQUIREMENTS[requirement.type]?.displayComponent
-  const FormComponent = REQUIREMENTS[requirement.type].formComponent
+  const RequirementComponent = REQUIREMENT_DISPLAY_COMPONENTS[requirement.type]
+  const FormComponent = REQUIREMENT_FORM_COMPONENTS[requirement.type]
 
   const editButtonRef = useRef()
   const removeButtonRef = useRef()

src/components/create-guild/Requirements/components/ProvidedValueDisplay.tsx

@@ -14,7 +14,7 @@ import {
 } from "@chakra-ui/react"
 import { Info, Lightning, Question } from "@phosphor-icons/react"
 import Card from "components/common/Card"
-import { REQUIREMENT_PROVIDED_VALUES } from "requirements/requirements"
+import { REQUIREMENT_PROVIDED_VALUES } from "requirements/requirementProvidedValues"
 import { Requirement } from "types"
 
 const ProvidedValueDisplay = ({

src/components/create-guild/Requirements/components/RequirementEditModal.tsx

@@ -13,6 +13,7 @@ import { Modal } from "components/common/Modal"
 import { ReactNode } from "react"
 import { useFormContext } from "react-hook-form"
 import REQUIREMENTS from "requirements"
+import { REQUIREMENT_FORM_COMPONENTS } from "requirements/requirementFormComponents"
 import { Requirement } from "types"
 import IsNegatedPicker from "./IsNegatedPicker"
 
@@ -45,7 +46,7 @@ const RequirementEditModal = ({
     onClose()
   }
 
-  const FormComponent = REQUIREMENTS[requirementField.type].formComponent
+  const FormComponent = REQUIREMENT_FORM_COMPONENTS[requirementField.type]
 
   return (
     <>

src/components/create-guild/Requirements/components/RequirementEditableCard.tsx

@@ -8,7 +8,9 @@ import useVisibilityModalProps from "components/[guild]/SetVisibility/hooks/useV
 import dynamic from "next/dynamic"
 import { PropsWithChildren, memo, useRef } from "react"
 import { FormProvider, useForm, useFormContext } from "react-hook-form"
-import REQUIREMENTS, { RequirementType } from "requirements"
+import { REQUIREMENT_DISPLAY_COMPONENTS } from "requirements/requirementDisplayComponents"
+import { REQUIREMENT_FORM_COMPONENTS } from "requirements/requirementFormComponents"
+import { RequirementType } from "requirements/types"
 import { Requirement, RoleFormType } from "types"
 import BalancyFooter from "./BalancyFooter"
 import RemoveRequirementButton from "./RemoveRequirementButton"
@@ -35,8 +37,8 @@ const RequirementEditableCard = ({
   isEditDisabled = false,
 }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
-  const RequirementComponent = REQUIREMENTS[type]?.displayComponent
-  const FormComponent = REQUIREMENTS[type].formComponent
+  const RequirementComponent = REQUIREMENT_DISPLAY_COMPONENTS[type]
+  const FormComponent = REQUIREMENT_FORM_COMPONENTS[type]
 
   const editButtonRef = useRef()
 

src/components/create-guild/hooks/useCreateRole.tsx

@@ -2,7 +2,6 @@ import processConnectorError from "components/[guild]/JoinModal/utils/processCon
 import useGuild from "components/[guild]/hooks/useGuild"
 import useRoleGroup from "components/[guild]/hooks/useRoleGroup"
 import { usePostHogContext } from "components/_app/PostHogProvider"
-import useJsConfetti from "components/create-guild/hooks/useJsConfetti"
 import { useYourGuilds } from "components/explorer/YourGuilds"
 import useCustomPosthogEvents from "hooks/useCustomPosthogEvents"
 import useMatchMutate from "hooks/useMatchMutate"
@@ -50,7 +49,6 @@ const useCreateRole = ({
   const { rewardCreated } = useCustomPosthogEvents()
 
   const showErrorToast = useShowErrorToast()
-  const triggerConfetti = useJsConfetti()
 
   const { captureEvent } = usePostHogContext()
   const postHogOptions = {
@@ -72,8 +70,6 @@ const useCreateRole = ({
       onError?.(error_)
     },
     onSuccess: async (response_) => {
-      triggerConfetti()
-
       if (response_?.createdGuildPlatforms?.length > 0) {
         response_.createdGuildPlatforms.forEach((guildPlatform) => {
           rewardCreated(guildPlatform.platformId)

src/hooks/useCreateRRR.tsx

@@ -8,7 +8,6 @@ import useCreateRole, {
 } from "components/create-guild/hooks/useCreateRole"
 import useShowErrorToast from "hooks/useShowErrorToast"
 import useSubmit from "hooks/useSubmit"
-import useToast from "hooks/useToast"
 import {
   Requirement,
   RequirementCreationPayloadWithTempID,
@@ -71,8 +70,7 @@ export type RequirementIdMap = {
   }
 }
 
-const useCreateRRR = ({ onSuccess }: { onSuccess: (res) => void }) => {
-  const toast = useToast()
+const useCreateRRR = ({ onSuccess }: { onSuccess?: (res) => void }) => {
   const showErrorToast = useShowErrorToast()
   const { captureEvent } = usePostHogContext()
   const postHogOptions = {
@@ -140,11 +138,6 @@ const useCreateRRR = ({ onSuccess }: { onSuccess: (res) => void }) => {
     onSuccess: (res) => {
       const { roleIds, createdRole, createdRequirements, createdRolePlatforms } = res
 
-      toast({
-        title: "Role successfully created",
-        status: "success",
-      })
-
       if (!!createdRole)
         mutateCreatedRole(createdRole, createdRequirements, createdRolePlatforms)
       if (!createdRole)

src/pages/api/fetchPrice.ts

@@ -1,7 +1,7 @@
 import { kv } from "@vercel/kv"
 import { env } from "env"
 import { NextApiHandler, NextApiRequest, NextApiResponse } from "next"
-import { RequirementType } from "requirements"
+import { RequirementType } from "requirements/types"
 import { OneOf } from "types"
 import {
   ADDRESS_REGEX,

src/requirements/Airdrop/providedValue/AirdropProvidedValue.tsx

@@ -2,7 +2,7 @@ import { HStack, Text, useDisclosure } from "@chakra-ui/react"
 import { ArrowSquareIn } from "@phosphor-icons/react"
 import SnapshotModal from "components/[guild]/leaderboard/Snapshots/SnapshotModal"
 import Button from "components/common/Button"
-import { ProvidedValueDisplayProps } from "requirements"
+import type { ProvidedValueDisplayProps } from "requirements/requirementProvidedValues"
 
 const AirdropProvidedValue = ({ requirement }: ProvidedValueDisplayProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure()

src/requirements/Allowlist/AllowlistForm.tsx

@@ -3,7 +3,7 @@ import ControlledSelect from "components/common/ControlledSelect"
 import FormErrorMessage from "components/common/FormErrorMessage"
 import { StyledSelectProps } from "components/common/StyledSelect/StyledSelect"
 import { useFormContext } from "react-hook-form"
-import { RequirementFormProps } from "requirements"
+import { RequirementFormProps } from "requirements/types"
 import parseFromObject from "utils/parseFromObject"
 import AllowlistFormInputs from "./components/AllowlistFormInputs"
 

src/requirements/Captcha/CaptchaForm.tsx

@@ -2,7 +2,7 @@ import { FormControl, FormLabel } from "@chakra-ui/react"
 import FormErrorMessage from "components/common/FormErrorMessage"
 import { ControlledRelativeTimeInput } from "components/common/RelativeTimeInput"
 import { useFormState } from "react-hook-form"
-import { RequirementFormProps } from "requirements"
+import { RequirementFormProps } from "requirements/types"
 import parseFromObject from "utils/parseFromObject"
 
 const CaptchaForm = ({ baseFieldPath }: RequirementFormProps): JSX.Element => {

src/requirements/CoinbaseEAS/CoinbaseEASForm.tsx

@@ -9,7 +9,7 @@ import {
 import ControlledSelect from "components/common/ControlledSelect"
 import FormErrorMessage from "components/common/FormErrorMessage"
 import { useController, useFormContext, useWatch } from "react-hook-form"
-import { RequirementFormProps } from "requirements"
+import { RequirementFormProps } from "requirements/types"
 import { SelectOption } from "types"
 import parseFromObject from "utils/parseFromObject"
 import { countryCodes } from "./countryCodes"

src/requirements/ContractState/ContractStateForm.tsx

@@ -30,7 +30,7 @@ import DataBlockWithCopy from "components/common/DataBlockWithCopy"
 import FormErrorMessage from "components/common/FormErrorMessage"
 import { useMemo } from "react"
 import { Controller, useFieldArray, useFormContext, useWatch } from "react-hook-form"
-import { RequirementFormProps } from "requirements"
+import { RequirementFormProps } from "requirements/types"
 import parseFromObject from "utils/parseFromObject"
 import ChainPicker from "../common/ChainPicker"
 import useAbi from "./hooks/useAbi"

src/requirements/Disco/DiscoForm.tsx

@@ -2,7 +2,7 @@ import { Box, FormControl, FormLabel, Input, Stack } from "@chakra-ui/react"
 import ControlledSelect from "components/common/ControlledSelect"
 import FormErrorMessage from "components/common/FormErrorMessage"
 import { Controller, useFormContext, useWatch } from "react-hook-form"
-import { RequirementFormProps } from "requirements"
+import { RequirementFormProps } from "requirements/types"
 import parseFromObject from "utils/parseFromObject"
 
 const options = [

src/requirements/Discord/DiscordForm.tsx

@@ -7,7 +7,7 @@ import {
 } from "@chakra-ui/react"
 import ControlledSelect from "components/common/ControlledSelect"
 import { useFormContext, useFormState, useWatch } from "react-hook-form"
-import { RequirementFormProps } from "requirements"
+import { RequirementFormProps } from "requirements/types"
 import parseFromObject from "utils/parseFromObject"
 import DiscordJoin from "./components/DiscordJoin"
 import DiscordJoinFromNow from "./components/DiscordJoinFromNow"