feat: jumper requirements

biome.json

@@ -59,7 +59,7 @@
         "noArguments": "error",
         "noVar": "error",
         "useConst": "error",
-        "noDefaultExport": "info"
+        "noDefaultExport": "off"
       },
       "suspicious": {
         "noExplicitAny": "info",

package.json

@@ -101,7 +101,7 @@
     "next-themes": "^0.3.0",
     "nextjs-toploader": "^1.6.12",
     "papaparse": "^5.4.1",
-    "posthog-js": "^1.139.3",
+    "posthog-js": "1.205.0",
     "qrcode.react": "^3.1.0",
     "randombytes": "^2.1.0",
     "react": "^18.2.0",

src/requirements/Jumper/JumperForm.tsx

@@ -0,0 +1,96 @@
+import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/Form"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/Select"
+import { Separator } from "@/components/ui/Separator"
+import { ComponentType } from "react"
+import { useFormContext, useWatch } from "react-hook-form"
+import { RequirementFormProps } from "requirements/types"
+import { JumperLevelForm } from "./components/JumperLevelForm"
+import { JumperTraitForm } from "./components/JumperTraitForm"
+import { JumperTypeForm } from "./components/JumperTypeForm"
+import { JumperRequirementType } from "./types"
+
+const jumperRequirementTypes = [
+  {
+    label: "Have at least level x",
+    value: "JUMPER_LEVEL",
+    JumperRequirement: JumperLevelForm,
+  },
+  {
+    label: "Have an achievement of a certain type",
+    value: "JUMPER_TYPE",
+    JumperRequirement: JumperTypeForm,
+  },
+  {
+    label: "Have a trait",
+    value: "JUMPER_TRAITS",
+    JumperRequirement: JumperTraitForm,
+  },
+] satisfies {
+  label: string
+  value: JumperRequirementType
+  JumperRequirement: ComponentType<RequirementFormProps>
+}[]
+
+const JumperForm = ({ baseFieldPath, field }: RequirementFormProps) => {
+  const { control, resetField } = useFormContext()
+
+  const type = useWatch({ name: `${baseFieldPath}.type` })
+  const selected = jumperRequirementTypes.find((reqType) => reqType.value === type)
+
+  const resetForm = () => {
+    resetField(`${baseFieldPath}.data.minAmount`, { defaultValue: undefined })
+    resetField(`${baseFieldPath}.data.rewardType`, { defaultValue: "" })
+    resetField(`${baseFieldPath}.data.category`, { defaultValue: "" })
+    resetField(`${baseFieldPath}.data.name`, { defaultValue: "" })
+  }
+
+  return (
+    <div className="flex flex-col items-start gap-4">
+      <FormField
+        control={control}
+        name={`${baseFieldPath}.type`}
+        render={({ field }) => (
+          <FormItem className="w-full">
+            <FormLabel>Type</FormLabel>
+            <Select
+              onValueChange={(e) => {
+                resetForm()
+                field.onChange(e)
+              }}
+              defaultValue={field.value}
+              value={field.value}
+            >
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select one..." />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                {jumperRequirementTypes.map(({ value, label }) => (
+                  <SelectItem key={value} value={value}>
+                    {label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </FormItem>
+        )}
+      />
+
+      {selected?.JumperRequirement && (
+        <>
+          <Separator />
+          <selected.JumperRequirement baseFieldPath={baseFieldPath} field={field} />
+        </>
+      )}
+    </div>
+  )
+}
+
+export default JumperForm

src/requirements/Jumper/JumperRequirement.tsx

@@ -0,0 +1,50 @@
+import {
+  Requirement,
+  RequirementProps,
+} from "components/[guild]/Requirements/components/Requirement"
+import { useRequirementContext } from "components/[guild]/Requirements/components/RequirementContext"
+import { ComponentType } from "react"
+import REQUIREMENTS from "requirements"
+import { JumperRequirementType } from "./types"
+
+const JumperLevelDisplay = () => {
+  const { data } = useRequirementContext<"JUMPER_LEVEL">()
+
+  return `Wallet level ${data.minAmount} or above`
+}
+
+const JumperTypeDisplay = () => {
+  const { data } = useRequirementContext<"JUMPER_TYPE">()
+
+  return `Get an achievement with type ${data.rewardType}`
+}
+
+const JumperTraitsDisplay = () => {
+  const { data } = useRequirementContext<"JUMPER_TRAITS">()
+
+  if ("category" in data && "name" in data)
+    return `Get a trait in the ${data.category} category with title ${data.name}`
+
+  if ("category" in data) return `Get a trait in the ${data.category} category`
+
+  return `Get a trait with title ${data.name}`
+}
+
+const DisplayComponents = {
+  JUMPER_LEVEL: JumperLevelDisplay,
+  JUMPER_TYPE: JumperTypeDisplay,
+  JUMPER_TRAITS: JumperTraitsDisplay,
+} satisfies Record<JumperRequirementType, ComponentType>
+
+const JumperRequirement = (props: RequirementProps) => {
+  const { type } = useRequirementContext<JumperRequirementType>()
+  const DisplayComponent = DisplayComponents[type]
+
+  return (
+    <Requirement image={REQUIREMENTS.JUMPER_LEVEL.icon as string}>
+      <DisplayComponent />
+    </Requirement>
+  )
+}
+
+export default JumperRequirement

src/requirements/Jumper/components/JumperLevelForm.tsx

@@ -0,0 +1,48 @@
+import {
+  FormErrorMessage,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/Form"
+import { Input } from "@/components/ui/Input"
+import { useFormContext } from "react-hook-form"
+import { RequirementFormProps } from "requirements/types"
+
+export const JumperLevelForm = ({ baseFieldPath }: RequirementFormProps) => {
+  const { control } = useFormContext()
+
+  return (
+    <FormField
+      control={control}
+      name={`${baseFieldPath}.data.minAmount`}
+      rules={{
+        required: true,
+        min: 1,
+      }}
+      render={({ field }) => (
+        <FormItem className="w-full">
+          <FormLabel>Level</FormLabel>
+          <Input
+            type="number"
+            {...field}
+            onChange={(e) => {
+              const newValue = e.target.value
+
+              // We need this to allow typing in a decimal point
+              if (/^[0-9]*\.[0-9]*0*$/i.test(newValue)) {
+                field.onChange?.(newValue, Number(newValue))
+                return field.onChange(newValue)
+              }
+
+              const parsedValue = parseInt(newValue)
+              const returnedValue = isNaN(parsedValue) ? "" : parsedValue
+
+              return field.onChange(returnedValue)
+            }}
+          />
+          <FormErrorMessage />
+        </FormItem>
+      )}
+    />
+  )
+}

src/requirements/Jumper/components/JumperTraitForm.tsx

@@ -0,0 +1,40 @@
+import {
+  FormErrorMessage,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/Form"
+import { Input } from "@/components/ui/Input"
+import { useFormContext } from "react-hook-form"
+import { RequirementFormProps } from "requirements/types"
+
+export const JumperTraitForm = ({ baseFieldPath }: RequirementFormProps) => {
+  const { control } = useFormContext()
+
+  return (
+    <>
+      <FormField
+        control={control}
+        name={`${baseFieldPath}.data.category`}
+        render={({ field }) => (
+          <FormItem className="w-full">
+            <FormLabel>Category</FormLabel>
+            <Input {...field} />
+            <FormErrorMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={control}
+        name={`${baseFieldPath}.data.name`}
+        render={({ field }) => (
+          <FormItem className="w-full">
+            <FormLabel>Name</FormLabel>
+            <Input {...field} />
+            <FormErrorMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  )
+}

src/requirements/Jumper/components/JumperTypeForm.tsx

@@ -0,0 +1,31 @@
+import {
+  FormErrorMessage,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/Form"
+import { Input } from "@/components/ui/Input"
+import { useFormContext } from "react-hook-form"
+import { RequirementFormProps } from "requirements/types"
+
+export const JumperTypeForm = ({ baseFieldPath }: RequirementFormProps) => {
+  const { control } = useFormContext()
+
+  return (
+    <FormField
+      control={control}
+      name={`${baseFieldPath}.data.rewardType`}
+      rules={{
+        required: true,
+        minLength: 1,
+      }}
+      render={({ field }) => (
+        <FormItem className="w-full">
+          <FormLabel>Achievement type</FormLabel>
+          <Input {...field} />
+          <FormErrorMessage />
+        </FormItem>
+      )}
+    />
+  )
+}

src/requirements/Jumper/types.ts

@@ -0,0 +1,3 @@
+import { RequirementType } from "requirements/types"
+
+export type JumperRequirementType = Extract<RequirementType, `JUMPER_${string}`>

src/requirements/requirementDisplayComponents.ts

@@ -337,4 +337,13 @@ export const REQUIREMENT_DISPLAY_COMPONENTS = {
   LINEA_POH: dynamic<RequirementProps>(
     () => import("requirements/LineaPOH/LineaPOHRequirement")
   ),
+  JUMPER_LEVEL: dynamic<RequirementProps>(
+    () => import("requirements/Jumper/JumperRequirement")
+  ),
+  JUMPER_TYPE: dynamic<RequirementProps>(
+    () => import("requirements/Jumper/JumperRequirement")
+  ),
+  JUMPER_TRAITS: dynamic<RequirementProps>(
+    () => import("requirements/Jumper/JumperRequirement")
+  ),
 } as const satisfies Record<RequirementType, ComponentType<RequirementProps>>

src/requirements/requirementFormComponents.ts

@@ -327,6 +327,15 @@ export const REQUIREMENT_FORM_COMPONENTS = {
   LINEA_POH: dynamic<RequirementFormProps>(
     () => import("requirements/LineaPOH/LineaPOHForm")
   ),
+  JUMPER_LEVEL: dynamic<RequirementFormProps>(
+    () => import("requirements/Jumper/JumperForm")
+  ),
+  JUMPER_TYPE: dynamic<RequirementFormProps>(
+    () => import("requirements/Jumper/JumperForm")
+  ),
+  JUMPER_TRAITS: dynamic<RequirementFormProps>(
+    () => import("requirements/Jumper/JumperForm")
+  ),
 } as const satisfies Record<
   RequirementType,
   ReturnType<typeof dynamic<RequirementFormProps>> | null

src/requirements/requirements.ts

@@ -243,6 +243,12 @@ export const REQUIREMENTS_DATA = [
     types: ["LINEA_POH"],
     isNegatable: true,
   },
+  {
+    icon: "/requirementLogos/jumper.svg",
+    name: "Jumper",
+    types: ["JUMPER_LEVEL", "JUMPER_TYPE", "JUMPER_TRAITS"],
+    isNegatable: true,
+  },
   {
     icon: "/requirementLogos/web3inbox.png",
     name: "Web3Inbox",

src/requirements/types.ts

@@ -5,9 +5,6 @@ import { Requirement } from "types"
 
 export type RequirementType = Exclude<
   Schemas["Requirement"]["type"],
-  | "JUMPER_LEVEL"
-  | "JUMPER_TYPE"
-  | "JUMPER_TRAITS"
   | "COVALENT_TX_VALUE"
   | "COVALENT_TX_VALUE_RELATIVE"
   | "FORM_APPROVAL"