Merge remote-tracking branch 'origin' into v2-header

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": "./tsconfig.json"
   },

src/components/[guild]/AddRewardButton/hooks/useCreateRequirements.ts

@@ -25,9 +25,10 @@ const useCreateRequirements = () => {
     roleIds: number[]
   ) => {
     const requirementIdMap: RequirementIdMap = {}
+    const requirementsToCreate = requirements.filter((req) => req.type !== "FREE")
 
     const promises = roleIds.flatMap((roleId) =>
-      requirements.map((req) =>
+      requirementsToCreate.map((req) =>
         fetcherWithSign([
           `/v2/guilds/${guildId}/roles/${roleId}/requirements`,
           {

src/rewards/components/SelectRoleOrSetRequirements.tsx

@@ -7,8 +7,9 @@ import RoleSelector from "components/[guild]/RoleSelector"
 import useGuild from "components/[guild]/hooks/useGuild"
 import useRoleGroup from "components/[guild]/hooks/useRoleGroup"
 import SetRequirements from "components/create-guild/Requirements"
-import rewards, { PlatformAsRewardRestrictions } from "rewards"
+import { useEffect } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
+import rewards, { PlatformAsRewardRestrictions } from "rewards"
 import { PlatformName } from "types"
 import getRandomInt from "utils/getRandomInt"
 
@@ -55,17 +56,17 @@ const SelectRoleOrSetRequirements = ({ isRoleSelectorDisabled }: Props) => {
   const { unregister, setValue } = useFormContext()
   const { selection, activeTab, setActiveTab } = useAddRewardContext()
 
-  const handleChange = (value: RoleTypeToAddTo) => {
-    if (value === RoleTypeToAddTo.NEW_ROLE) {
-      unregister("roleIds")
-      setValue("name", data?.roleName || `New ${rewards[selection].name} role`)
-      setValue("imageUrl", data?.imageUrl || `/guildLogos/${getRandomInt(286)}.svg`)
-      setValue("roleVisibility", "PUBLIC")
-    }
-
-    setActiveTab(value)
+  const initNewRole = () => {
+    unregister("roleIds")
+    setValue("name", data?.roleName || `New ${rewards[selection].name} role`)
+    setValue("imageUrl", data?.imageUrl || `/guildLogos/${getRandomInt(286)}.svg`)
+    setValue("roleVisibility", "PUBLIC")
   }
 
+  useEffect(() => {
+    if (activeTab === RoleTypeToAddTo.NEW_ROLE) initNewRole()
+  }, [activeTab])
+
   const { asRewardRestriction } = rewards[selection]
 
   return (
@@ -76,7 +77,7 @@ const SelectRoleOrSetRequirements = ({ isRoleSelectorDisabled }: Props) => {
       variant="solid"
       colorScheme="indigo"
       index={isRoleSelectorDisabled ? RoleTypeToAddTo.NEW_ROLE : activeTab}
-      onChange={handleChange}
+      onChange={setActiveTab}
     >
       <TabList mt="6" mb="7">
         <Tab