feat(referrals): add create referral code dialog

apps/web/src/features/referrals/components/CreateReferralDialog.test.tsx

@@ -0,0 +1,71 @@
+import { describe, it, expect, afterEach, vi } from "vitest"
+import { cleanup, render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+vi.mock("@/lib/contracts", () => ({}))
+
+import { CreateReferralDialog } from "./CreateReferralDialog"
+
+const mockMutateAsync = vi.fn().mockResolvedValue("0x123")
+vi.mock("../hooks/useCreateReferralCodeMutation", () => ({
+  useCreateReferralCodeMutation: () => ({
+    mutateAsync: mockMutateAsync,
+    isPending: false,
+  }),
+}))
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+describe("CreateReferralDialog", () => {
+  it("renders correctly", () => {
+    render(<CreateReferralDialog isOpen={true} onOpenChange={() => {}} />)
+    expect(screen.getByRole("heading", { name: "Create Referral Code" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Create Code" })).toBeDisabled()
+  })
+
+  it("validates input formatting", async () => {
+    const user = userEvent.setup()
+    render(<CreateReferralDialog isOpen={true} onOpenChange={() => {}} />)
+
+    const input = screen.getByPlaceholderText("e.g. MY_CUSTOM_CODE")
+
+    // Too short
+    await user.type(input, "AB")
+    expect(screen.getByText("Minimum 3 characters")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Create Code" })).toBeDisabled()
+
+    await user.clear(input)
+
+    // Invalid chars
+    await user.type(input, "CODE-123")
+    expect(screen.getByText("Only letters, numbers, and underscores allowed")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Create Code" })).toBeDisabled()
+
+    await user.clear(input)
+
+    // Valid
+    await user.type(input, "VALID_CODE123")
+    expect(screen.queryByText("Minimum 3 characters")).not.toBeInTheDocument()
+    expect(screen.queryByText("Only letters, numbers, and underscores allowed")).not.toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Create Code" })).not.toBeDisabled()
+  })
+
+  it("submits the valid code and closes", async () => {
+    const user = userEvent.setup()
+    const onOpenChange = vi.fn()
+
+    render(<CreateReferralDialog isOpen={true} onOpenChange={onOpenChange} />)
+
+    const input = screen.getByPlaceholderText("e.g. MY_CUSTOM_CODE")
+    await user.type(input, "MY_CODE")
+
+    const submitBtn = screen.getByRole("button", { name: "Create Code" })
+    await user.click(submitBtn)
+
+    expect(mockMutateAsync).toHaveBeenCalledWith("MY_CODE")
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+})

apps/web/src/features/referrals/components/CreateReferralDialog.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@workspace/ui/components/dialog"
+import { Button } from "@workspace/ui/components/button"
+import { Input } from "@workspace/ui/components/input"
+import { validateReferralCode } from "../lib/referrals"
+import { useCreateReferralCodeMutation } from "../hooks/useCreateReferralCodeMutation"
+
+export type CreateReferralDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function CreateReferralDialog({
+  isOpen,
+  onOpenChange,
+}: CreateReferralDialogProps) {
+  const [code, setCode] = useState("")
+  const [error, setError] = useState<string | null>(null)
+  const mutation = useCreateReferralCodeMutation()
+
+  const handleCodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newCode = e.target.value
+    setCode(newCode)
+    if (newCode.length > 0) {
+      setError(validateReferralCode(newCode))
+    } else {
+      setError(null)
+    }
+  }
+
+  const handleSubmit = async () => {
+    const validationError = validateReferralCode(code)
+    if (validationError) {
+      setError(validationError)
+      return
+    }
+
+    try {
+      await mutation.mutateAsync(code)
+      onOpenChange(false)
+      setCode("")
+      setError(null)
+    } catch (err) {
+      // Error handled by submitTx
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create Referral Code</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 pt-2">
+          <div>
+            <label className="mb-2 block text-sm font-medium">Referral Code</label>
+            <Input
+              placeholder="e.g. MY_CUSTOM_CODE"
+              value={code}
+              onChange={handleCodeChange}
+              className={error ? "border-red-500" : ""}
+            />
+            {error && <p className="mt-1.5 text-xs text-red-500">{error}</p>}
+            {!error && (
+              <p className="mt-1.5 text-xs text-muted-foreground">
+                Minimum 3 characters. Only letters, numbers, and underscores allowed.
+              </p>
+            )}
+          </div>
+
+          <Button
+            className="w-full"
+            disabled={mutation.isPending || !!error || code.length === 0}
+            onClick={() => void handleSubmit()}
+          >
+            {mutation.isPending ? "Creating..." : "Create Code"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/web/src/features/referrals/hooks/useCreateReferralCodeMutation.ts

@@ -0,0 +1,14 @@
+import { useMutation } from "@tanstack/react-query"
+import { useWalletStore } from "@/features/wallet/store/wallet-store"
+import { createAffiliateCode } from "../lib/referrals"
+
+export function useCreateReferralCodeMutation() {
+  const { address } = useWalletStore()
+
+  return useMutation({
+    mutationFn: async (code: string) => {
+      if (!address) throw new Error("Wallet not connected")
+      return createAffiliateCode(address, code)
+    },
+  })
+}