feat: World ID identity & requirement (#1468)

* feat: new `black` color scheme

* feat: add `WORLD_ID` platform support

* chore: upgrade the `@guildxyz/types` package

* chore: upgrade the `@guildxyz/types` package

* feat: `WORLD_ID_VERIFICATION` requirement

* fix(Select): fine-tune styles

* fix(useConnectPlatform): open World ID auth in the same window

* cleanup: remove unnecessary `@ts-ignore` comments & revert type changes

* chore: upgrade the `@guildxyz/types` package

* fix: `next-env.d.ts` change

* feat: add World Chain support

* Revert "feat: add World Chain support"

This reverts commit 2386f39.

* fix: exclude `WORLD_ID` from `HandlerTypeAndParam`

src/app/globals.css

@@ -117,13 +117,15 @@
     --google: 217 91% 60%;
     --google-hover: 221 83% 53%;
     --google-active: 224 76% 48%;
-    /* TODO: proper hover/active colors for Twitter */
-    --twitter: 0 0% 0%;
-    --twitter-hover: 0 0% 0%;
-    --twitter-active: 0 0% 0%;
-    --github: 0 0% 20%;
-    --github-hover: 0 0% 18%;
-    --github-active: 0 0% 15%;
+    --twitter: 240 4% 14%;
+    --twitter-hover: 240 4% 10%;
+    --twitter-active: 240 4% 6%;
+    --github: 240 4% 14%;
+    --github-hover: 240 4% 10%;
+    --github-active: 240 4% 6%;
+    --worldid: 240 4% 14%;
+    --worldid-hover: 240 4% 10%;
+    --worldid-active: 240 4% 6%;
 
     --farcaster: 261 55% 61%;
     --farcaster-hover: 261 55% 49%;
@@ -248,8 +250,6 @@
     --email-active: 212 96% 78%;
     --google-hover: 213 94% 68%;
     --google-active: 212 96% 78%;
-    --github-hover: 0 0% 44%;
-    --github-active: 0 0% 68%;
 
     --farcaster-hover: 261 54% 69%;
     --farcaster-active: 262 54% 77%;

src/components/[guild]/JoinModal/hooks/useConnectPlatform.ts

@@ -206,7 +206,7 @@ const useConnectPlatform = (
      * popup. We can only guarantee a redirect to happen, if we refresh the current
      * window
      */
-    if (platformName === "TELEGRAM") {
+    if (platformName === "TELEGRAM" || platformName === "WORLD_ID") {
       window.location.href = url
     } else {
       onOpen(url)

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

@@ -18,6 +18,7 @@ import { useRequirementContext } from "./RequirementContext"
 function requirementTypeToPlatformName(type: RequirementType): PlatformName {
   if (type === "ALLOWLIST_EMAIL") return "EMAIL"
   if (REQUIREMENTS[type].types[0].startsWith("TWITTER")) return "TWITTER_V1"
+  if (REQUIREMENTS[type].types[0].startsWith("WORLD_ID")) return "WORLD_ID"
   return REQUIREMENTS[type].types[0].split("_")[0] as PlatformName
 }
 

src/components/create-guild/Requirements/hooks/useHandleRequirementState.ts

@@ -27,10 +27,7 @@ const useHandleRequirementState = (methods) => {
   }
 
   const append = (
-    req: Exclude<
-      Schemas["RequirementCreationPayload"],
-      { type: "WORLD_ID_VERIFICATION" }
-    >
+    req: Schemas["RequirementCreationPayload"]
   ): ClientStateRequirementCreateResponse => {
     const reqToAdd: ClientStateRequirementCreateResponse = { id: uuidv7(), ...req }
     if (freeEntry) {

src/requirements/WorldID/WorldIDForm.tsx

@@ -0,0 +1,59 @@
+import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/Form"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/Select"
+import { useFormContext } from "react-hook-form"
+import { RequirementFormProps } from "requirements/types"
+
+const VERIFICATION_LEVEL_OPTIONS = [
+  {
+    label: "Device",
+    value: "device",
+  },
+  {
+    label: "Orb",
+    value: "orb",
+  },
+] as const
+
+const WorldIDForm = ({ baseFieldPath }: RequirementFormProps) => {
+  const { control } = useFormContext()
+
+  return (
+    <div className="flex flex-col items-start gap-4">
+      <FormField
+        control={control}
+        name={`${baseFieldPath}.data.verificationLevel`}
+        render={({ field }) => (
+          <FormItem className="w-full">
+            <FormLabel>Verification level</FormLabel>
+            <Select
+              onValueChange={field.onChange}
+              defaultValue={field.value}
+              value={field.value}
+            >
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select one..." />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                {VERIFICATION_LEVEL_OPTIONS.map(({ value, label }) => (
+                  <SelectItem key={value} value={value}>
+                    {label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </FormItem>
+        )}
+      />
+    </div>
+  )
+}
+
+export default WorldIDForm

src/requirements/WorldID/WorldIDRequirement.tsx

@@ -0,0 +1,23 @@
+import ConnectRequirementPlatformButton from "components/[guild]/Requirements/components/ConnectRequirementPlatformButton"
+import {
+  Requirement,
+  RequirementProps,
+} from "components/[guild]/Requirements/components/Requirement"
+import { useRequirementContext } from "components/[guild]/Requirements/components/RequirementContext"
+import REQUIREMENTS from "requirements"
+
+const WorldIDRequirement = (props: RequirementProps) => {
+  const { data } = useRequirementContext<"WORLD_ID_VERIFICATION">()
+
+  return (
+    <Requirement
+      image={REQUIREMENTS.WORLD_ID_VERIFICATION.icon as string}
+      footer={<ConnectRequirementPlatformButton />}
+      {...props}
+    >
+      {`Have a World ID account connected with ${data.verificationLevel === "orb" ? "Orb" : "Device"} verification level`}
+    </Requirement>
+  )
+}
+
+export default WorldIDRequirement

src/requirements/requirementDisplayComponents.ts

@@ -126,6 +126,9 @@ export const REQUIREMENT_DISPLAY_COMPONENTS = {
   FORM_APPROVAL: dynamic<RequirementProps>(
     () => import("requirements/Form/FormRequirement")
   ),
+  WORLD_ID_VERIFICATION: dynamic<RequirementProps>(
+    () => import("requirements/WorldID/WorldIDRequirement")
+  ),
   TWITTER_ACCOUNT_AGE: dynamic<RequirementProps>(
     () => import("requirements/Twitter/TwitterRequirement")
   ),

src/requirements/requirementFormComponents.ts

@@ -116,6 +116,9 @@ export const REQUIREMENT_FORM_COMPONENTS = {
   FORM_APPROVAL: dynamic<RequirementFormProps>(
     () => import("requirements/Form/FormForm")
   ),
+  WORLD_ID_VERIFICATION: dynamic<RequirementFormProps>(
+    () => import("requirements/WorldID/WorldIDForm")
+  ),
   TWITTER_ACCOUNT_AGE: dynamic<RequirementFormProps>(
     () => import("requirements/Twitter/TwitterForm")
   ),

src/requirements/requirements.ts

@@ -119,6 +119,12 @@ export const REQUIREMENTS_DATA = [
     types: ["FORM_SUBMISSION"],
     isNegatable: true,
   },
+  {
+    icon: "/requirementLogos/worldid.svg",
+    name: "World ID",
+    types: ["WORLD_ID_VERIFICATION"],
+    isNegatable: true,
+  },
   {
     icon: "/requirementLogos/x.svg",
     name: "X",

src/requirements/types.ts

@@ -3,10 +3,7 @@ import { Icon } from "@phosphor-icons/react"
 import { UseControllerProps } from "react-hook-form"
 import { Requirement } from "types"
 
-export type RequirementType = Exclude<
-  Schemas["Requirement"]["type"],
-  "WORLD_ID_VERIFICATION"
->
+export type RequirementType = Schemas["Requirement"]["type"]
 
 export type RequirementFormProps = {
   baseFieldPath: string

src/rewards/Github/data.ts

@@ -5,7 +5,7 @@ export const githubData = {
   icon: GithubLogo,
   imageUrl: "/platforms/github.png",
   name: "GitHub",
-  colorScheme: "GITHUB",
+  colorScheme: "black",
   gatedEntity: "repo",
   autoRewardSetup: false,
   isPlatform: true,

src/rewards/Twitter/data.ts

@@ -4,7 +4,7 @@ import XLogo from "static/icons/x.svg"
 export const twitterV1Data = {
   icon: XLogo,
   name: "X",
-  colorScheme: "TWITTER",
+  colorScheme: "black",
   gatedEntity: "account",
   autoRewardSetup: false,
   isPlatform: true,
@@ -15,7 +15,7 @@ export const twitterData = {
   icon: XLogo,
   imageUrl: "/platforms/x.svg",
   name: "X",
-  colorScheme: "TWITTER",
+  colorScheme: "black",
   gatedEntity: "account",
   autoRewardSetup: false,
   isPlatform: false,

src/rewards/WorldID/data.ts

@@ -0,0 +1,13 @@
+import { PlatformAsRewardRestrictions, RewardData } from "rewards/types"
+import WorldIDIcon from "static/icons/world-id.svg"
+
+export const worldIDData = {
+  icon: WorldIDIcon,
+  imageUrl: "",
+  name: "World ID",
+  colorScheme: "black",
+  gatedEntity: "",
+  autoRewardSetup: false,
+  isPlatform: true,
+  asRewardRestriction: PlatformAsRewardRestrictions.NOT_APPLICABLE,
+} satisfies RewardData

src/rewards/index.ts

@@ -13,6 +13,7 @@ import { telegramData } from "rewards/Telegram/data"
 import { tokenData } from "rewards/Token/data"
 import { twitterData, twitterV1Data } from "rewards/Twitter/data"
 import { uniqueTextData } from "rewards/UniqueText/data"
+import { worldIDData } from "rewards/WorldID/data"
 import { Rewards } from "./types"
 
 const rewards: Rewards = {
@@ -32,6 +33,7 @@ const rewards: Rewards = {
   GITHUB: githubData,
   POAP: poapData,
   FARCASTER: farcasterData,
+  WORLD_ID: worldIDData,
 } as const
 
 export default rewards

src/theme/colors.ts

@@ -16,6 +16,18 @@ const gray = {
 const colors = {
   gray,
   primary: gray,
+  black: {
+    50: "#000000",
+    100: "#000000",
+    200: "#050505",
+    300: "#0f0f10",
+    400: "#18181b",
+    500: "#222225",
+    600: "#18181b",
+    700: "#0f0f10",
+    800: "#050505",
+    900: "#000000",
+  },
   red: {
     50: "#fef2f2",
     100: "#fee2e2",
@@ -148,30 +160,6 @@ const colors = {
     800: "#075985",
     900: "#0C4A6E",
   },
-  TWITTER: {
-    50: "#000000",
-    100: "#000000",
-    200: "#000000",
-    300: "#000000",
-    400: "#000000",
-    500: "#000000",
-    600: "#000000",
-    700: "#000000",
-    800: "#000000",
-    900: "#000000",
-  },
-  GITHUB: {
-    50: "#f5f5f5",
-    100: "#ebebeb",
-    200: "#cccccc",
-    300: "#adadad",
-    400: "#707070",
-    500: "#333333",
-    600: "#2e2e2e",
-    700: "#262626",
-    800: "#1f1f1f",
-    900: "#191919",
-  },
   POAP: {
     50: "#FDEDEF",
     100: "#FCDADE",

src/types.ts

@@ -79,6 +79,7 @@ type PlatformName =
   | "GATHER_TOWN"
   | "ERC20"
   | "FARCASTER"
+  | "WORLD_ID"
 
 type PlatformUserData = {
   acessToken?: string
@@ -462,17 +463,14 @@ type Trait = {
   }
 }
 
-type Requirement = Exclude<
-  z.output<typeof schemas.RequirementSchema>,
-  { type: "WORLD_ID_VERIFICATION" }
->
-type RequirementCreateResponseOutput = Exclude<
-  z.output<typeof schemas.RequirementCreateResponseSchema>,
-  { type: "WORLD_ID_VERIFICATION" }
+type Requirement = z.output<typeof schemas.RequirementSchema>
+
+type RequirementCreateResponseOutput = z.output<
+  typeof schemas.RequirementCreateResponseSchema
 >
 
 type ClientStateRequirementCreateResponse = Omit<
-  Exclude<Schemas["RequirementCreateResponse"], { type: "WORLD_ID_VERIFICATION" }>,
+  Schemas["RequirementCreateResponse"],
   /**
    * These props won't be included in the response when we only store the requirement
    * object on client side, so we omit them from the type & add them back as optional
@@ -642,6 +640,7 @@ export enum PlatformType {
   FORM = 15,
   GATHER_TOWN = 16,
   ERC20 = 17,
+  WORLD_ID = 18,
 }
 
 enum ValidationMethod {

src/v2/components/Account/components/AccountModal/components/SocialAccount.tsx

@@ -118,6 +118,7 @@ const PLATFORM_COLORS = {
   GITHUB: "bg-github hover:bg-github-hover active:bg-github-active text-white",
   FARCASTER:
     "bg-farcaster hover:bg-farcaster-hover active:bg-farcaster-active text-white",
+  WORLD_ID: "bg-worldid hover:bg-worldid-hover active:bg-worldid-active text-white",
 } satisfies Partial<Record<PlatformName, string>>
 
 const ConnectPlatformButton = ({

src/v2/components/ui/Input.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils"
 import { VariantProps, cva } from "class-variance-authority"
 import { InputHTMLAttributes, forwardRef } from "react"
 
-const inputVariants = cva(
+export const inputVariants = cva(
   "flex w-full border border-input-border bg-input-background px-4 py-2 transition-[border-color,_box-shadow] file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground hover:border-input-border-accent focus:border-input-border-accent focus:ring-input-border-accent focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-input-border-invalid aria-[invalid=true]:ring-1 aria-[invalid=true]:ring-input-border-invalid aria-[invalid=true]:focus:border-input-border-accent aria-[invalid=true]:focus:ring-input-border-accent",
   {
     variants: {