@turtleclub/opportunities 0.1.0-beta.20 → 0.1.0-beta.22

package/src/cover-offer/components/CoverRequestForm.tsx

@@ -1,267 +1,342 @@
-"use client";
-
-import { ChangeEvent, FormEvent, useMemo, useState } from "react";
-import { Button, Checkbox, Input } from "@turtleclub/ui";
-import { ShieldAlert, Send, ChevronDown, ChevronUp, type LucideProps, Shield } from "lucide-react";
-import type { ComponentType } from "react";
-import type { CoverRequestData, CoverRequestFormProps } from "../types";
-const ShieldAlertIcon = ShieldAlert as ComponentType<LucideProps>;
-const SendIcon = Send as ComponentType<LucideProps>;
-const ChevronUpIcon = ChevronUp as ComponentType<LucideProps>;
-const ChevronDownIcon = ChevronDown as ComponentType<LucideProps>;
-const ShieldIcon = Shield as ComponentType<LucideProps>;
-
-const PERIOD_OPTIONS = [
-  { label: "28d", days: 28 },
-  { label: "3m", days: 90 },
-  { label: "6m", days: 180 },
-  { label: "1y", days: 365 },
-] as const;
-
-export function CoverRequestForm({
-  protocolName,
-  depositedAmount,
-  baseApyLabel,
-  onSuccess,
-  onError,
-  startExpanded,
-}: CoverRequestFormProps) {
-  const [coverageAmount, setCoverageAmount] = useState("");
-  const [useDepositedAmount, setUseDepositedAmount] = useState(false);
-  const [desiredApySacrifice, setDesiredApySacrifice] = useState("");
-  const [selectedPeriodDays, setSelectedPeriodDays] = useState(90);
-  const [inputError, setInputError] = useState<string | null>(null);
-  const [isExpanded, setIsExpanded] = useState(startExpanded ?? false);
-
-  const parsedCoverageAmount = useMemo(() => {
-    const amountStr = useDepositedAmount ? (depositedAmount ?? "") : coverageAmount;
-    if (!amountStr.trim()) return null;
-    const value = Number(amountStr);
-    return Number.isFinite(value) && value > 0 ? value : null;
-  }, [coverageAmount, useDepositedAmount, depositedAmount]);
-
-  const parsedSacrifice = useMemo(() => {
-    if (!desiredApySacrifice.trim()) return null;
-    const value = Number(desiredApySacrifice);
-    return Number.isFinite(value) ? value : null;
-  }, [desiredApySacrifice]);
-
-  const parsedBaseApy = useMemo(() => {
-    if (!baseApyLabel) return null;
-    const value = Number(baseApyLabel.replace(/[^0-9.]/g, ""));
-    return Number.isFinite(value) ? value : null;
-  }, [baseApyLabel]);
-
-  const netApy = useMemo(() => {
-    if (parsedBaseApy === null || parsedSacrifice === null) return null;
-    return parsedBaseApy - parsedSacrifice;
-  }, [parsedBaseApy, parsedSacrifice]);
-
-  const estimatedPremium = useMemo(() => {
-    if (parsedCoverageAmount === null || parsedSacrifice === null) return null;
-    // Premium = Amount × (APY/100) × (Days/365)
-    return parsedCoverageAmount * (parsedSacrifice / 100) * (selectedPeriodDays / 365);
-  }, [parsedCoverageAmount, parsedSacrifice, selectedPeriodDays]);
-
-  const resetForm = () => {
-    setCoverageAmount("");
-    setUseDepositedAmount(false);
-    setDesiredApySacrifice("");
-    setSelectedPeriodDays(90);
-    setInputError(null);
-  };
-
-  const handleSubmit = (): CoverRequestData | undefined => {
-    if (parsedCoverageAmount === null) {
-      setInputError("Enter a valid coverage amount");
-      return;
-    }
-    if (parsedSacrifice === null) {
-      setInputError("Enter a valid APY sacrifice");
-      return;
-    }
-    if (parsedSacrifice < 0) {
-      setInputError("APY sacrifice cannot be negative");
-      return;
-    }
-    setInputError(null);
-
-    const requestData: CoverRequestData = {
-      protocolName,
-      coverageAmount: parsedCoverageAmount,
-      periodDays: selectedPeriodDays,
-      desiredApySacrifice: parsedSacrifice,
-      estimatedPremium: estimatedPremium ?? 0,
-    };
-
-    onSuccess?.("Cover request submitted");
-    console.info("Cover request submitted", requestData);
-
-    return requestData;
-  };
-
-  const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const requestData = handleSubmit();
-    if (requestData) {
-      console.log("Submitted data successfully", requestData);
-      resetForm();
-    }
-  };
-
-  return (
-    <div className="rounded-xl bg-gradient-to-br from-primary/5 to-card overflow-hidden border border-primary/20">
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        type="button"
-        className="w-full p-4 flex items-center justify-between hover:bg-primary/5 transition-colors"
-      >
-        <div className="flex items-center gap-3 text-left">
-          <div className="p-2 rounded-lg bg-primary/10 border border-primary/20">
-            <ShieldAlertIcon className="w-5 h-5 text-primary" />
-          </div>
-          <div className="space-y-1">
-            <p className="text-sm font-semibold text-foreground">
-              Request coverage for this opportunity
-            </p>
-            <p className="text-xs text-muted-foreground leading-relaxed">
-              We don&apos;t yet have Nexus Mutual cover available for{" "}
-              <span className="font-medium">{protocolName}</span>.
-            </p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          {isExpanded ? (
-            <ChevronUpIcon className="w-5 h-5 text-muted-foreground" />
-          ) : (
-            <ChevronDownIcon className="w-5 h-5 text-muted-foreground" />
-          )}
-        </div>
-      </button>
-
-      {isExpanded && (
-        <form onSubmit={handleFormSubmit} className="p-4 space-y-4">
-          <div className="flex items-center justify-between text-sm text-muted-foreground">
-            <span className="font-medium text-foreground">{protocolName}</span>
-            {baseApyLabel && <span>Current APR: {baseApyLabel}</span>}
-          </div>
-
-          {/* Coverage Amount */}
-          <div className="space-y-2">
-            <label className="text-xs text-foreground">Coverage Amount</label>
-            <Input
-              variant=""
-              value={useDepositedAmount ? (depositedAmount ?? "") : coverageAmount}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                const value = e.target.value;
-                if (value === "" || /^\d*\.?\d*$/.test(value)) {
-                  setCoverageAmount(value);
-                }
-              }}
-              placeholder="e.g. 1"
-              className="w-full bg-secondary border border-border rounded-sm px-4 py-3 pr-12 text-foreground placeholder-muted-foreground focus:outline-none focus:border-primary/50 transition-colors"
-              disabled={useDepositedAmount}
-            />
-            {depositedAmount && (
-              <label className="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer">
-                <Checkbox
-                  checked={useDepositedAmount}
-                  onCheckedChange={(checked) => setUseDepositedAmount(!useDepositedAmount)}
-                  className="rounded border-border"
-                />
-                Use my deposited amount ({depositedAmount})
-              </label>
-            )}
-          </div>
-
-          {/* Period Selector */}
-          <div className="space-y-3">
-            <label className="text-xs text-foreground text-center block">Coverage Period</label>
-            <div className="flex gap-2">
-              {PERIOD_OPTIONS.map((option) => (
-                <Button
-                  key={option.days}
-                  type="button"
-                  onClick={() => setSelectedPeriodDays(option.days)}
-                  variant="none"
-                  className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-colors ${
-                    selectedPeriodDays === option.days
-                      ? "bg-primary text-primary-foreground border-primary  hover:border-primary"
-                      : "bg-secondary text-foreground border-border hover:border-primary/50"
-                  }`}
-                >
-                  {option.label}
-                </Button>
-              ))}
-            </div>
-          </div>
-
-          {/* APY Sacrifice */}
-          <div className="space-y-2">
-            <label className="text-xs text-foreground">
-              APY you&apos;re willing to sacrifice for cover (%)
-            </label>
-            <Input
-              type="text"
-              variant="bordered"
-              value={desiredApySacrifice}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                const value = e.target.value;
-                if (value === "" || /^\d*\.?\d*$/.test(value)) {
-                  setDesiredApySacrifice(e.target.value);
-                }
-              }}
-              placeholder="e.g. 2.5"
-              className="w-full bg-secondary border border-border rounded-sm px-4 py-3 pr-12 text-foreground placeholder-muted-foreground focus:outline-none focus:border-primary/50 transition-colors"
-            />
-
-            <div className="flex items-center justify-between text-xs p-2 rounded-md bg-muted/50">
-              <span className="text-muted-foreground">
-                {parsedBaseApy ?? "—"}% − {parsedSacrifice ?? "—"}% =
-              </span>
-              <span
-                className={`font-medium ${netApy !== null && netApy >= 0 ? "text-green-500" : "text-muted-foreground"}`}
-              >
-                {netApy !== null ? `${netApy.toFixed(2)}% Net APY` : "— Net APY"}
-              </span>
-            </div>
-          </div>
-
-          {/* Estimated Premium */}
-          <div className="p-3 rounded-sm bg-primary/5 border border-primary/20 space-y-1">
-            <p className="text-xs text-muted-foreground">Estimated Premium</p>
-            <p className="text-lg font-semibold text-foreground">
-              {estimatedPremium !== null
-                ? estimatedPremium.toLocaleString(undefined, {
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 2,
-                  })
-                : "—"}
-            </p>
-            <p className="text-[10px] text-muted-foreground">
-              {parsedCoverageAmount?.toLocaleString() ?? "—"} × {parsedSacrifice ?? "—"}% ×{" "}
-              {selectedPeriodDays} days
-            </p>
-          </div>
-
-          {inputError && <p className="text-[11px] text-destructive">{inputError}</p>}
-
-          <p className="text-base text-muted-foreground">
-            We&apos;ll use this to gauge interest and bring cover to the protocols you care about.
-          </p>
-
-          <div className="flex justify-center gap-2 w-full  ">
-            <Button
-              className=" flex w-full text-lg font-semibold rounded-sm"
-              variant="green"
-              type="submit"
-            >
-              <ShieldIcon className="w-5 h-5 text-primary" />
-              Request Cover
-            </Button>
-          </div>
-        </form>
-      )}
-    </div>
-  );
-}
+"use client";
+
+import { useMemo, useState } from "react";
+import { useForm, useStore } from "@tanstack/react-form";
+import {
+  Button,
+  Input,
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  Label,
+  Badge,
+  cn,
+} from "@turtleclub/ui";
+import { ShieldAlert, ChevronDown, ChevronUp, type LucideProps, Shield } from "lucide-react";
+import type { ComponentType } from "react";
+import type { CoverRequestFormProps } from "../types";
+import { useSubmitCoverRequest } from "@turtleclub/hooks";
+
+const ShieldAlertIcon = ShieldAlert as ComponentType<LucideProps>;
+const ChevronUpIcon = ChevronUp as ComponentType<LucideProps>;
+const ChevronDownIcon = ChevronDown as ComponentType<LucideProps>;
+const ShieldIcon = Shield as ComponentType<LucideProps>;
+
+type PeriodDays = 28 | 90 | 180 | 365;
+
+const PERIOD_OPTIONS = [
+  { label: "28d", days: 28 },
+  { label: "3m", days: 90 },
+  { label: "6m", days: 180 },
+  { label: "1y", days: 365 },
+] as const;
+
+const NUMERIC_INPUT_REGEX = /^\d*\.?\d*$/;
+
+function parsePositiveNumber(value: string): number | null {
+  if (!value) return null;
+  const num = Number(value);
+  return Number.isFinite(num) && num > 0 ? num : null;
+}
+
+function handleNumericInputChange(
+  e: React.ChangeEvent<HTMLInputElement>,
+  onChange: (value: string) => void
+) {
+  const value = e.target.value;
+  if (value === "" || NUMERIC_INPUT_REGEX.test(value)) {
+    onChange(value);
+  }
+}
+
+const USDC_TOKEN = {
+  symbol: "USDC",
+  logoUrl: "https://storage.googleapis.com/turtle-assets/tokens/usdc.png",
+};
+
+export function CoverRequestForm({
+  protocolName,
+  baseApyLabel,
+  onSuccess,
+  onError,
+  startExpanded,
+}: CoverRequestFormProps) {
+  const [isExpanded, setIsExpanded] = useState(startExpanded ?? false);
+
+  const form = useForm({
+    defaultValues: {
+      coverageAmount: "",
+      periodDays: 90 as PeriodDays,
+      desiredApySacrifice: "",
+      tokenSymbol: "USDC",
+    },
+    onSubmit: async ({ value }) => {
+      const coverageAmount = Number(value.coverageAmount);
+      const desiredApySacrifice = Number(value.desiredApySacrifice);
+      const periodDays = value.periodDays;
+
+      const calculatedEstimatedPremium =
+        coverageAmount * (desiredApySacrifice / 100) * (periodDays / 365);
+
+      submitCoverRequest({
+        protocolName,
+        coverageAmount: String(coverageAmount),
+        periodDays,
+        desiredApySacrifice: String(desiredApySacrifice),
+        calculatedEstimatedPremium: String(calculatedEstimatedPremium),
+        tokenSymbol: value.tokenSymbol,
+      });
+    },
+  });
+
+  const { mutate: submitCoverRequest, isPending } = useSubmitCoverRequest({
+    onSuccess: (msg) => {
+      form.reset();
+      onSuccess?.(msg);
+      setIsExpanded(false);
+    },
+    onError,
+  });
+
+  const parsedBaseApy = useMemo(() => {
+    if (!baseApyLabel) return null;
+    const value = Number(baseApyLabel.replace(/[^0-9.]/g, ""));
+    return Number.isFinite(value) ? value : null;
+  }, [baseApyLabel]);
+
+  const coverageAmountValue = useStore(form.store, (state) => state.values.coverageAmount);
+  const sacrificeValue = useStore(form.store, (state) => state.values.desiredApySacrifice);
+  const periodDaysValue = useStore(form.store, (state) => state.values.periodDays);
+
+  const parsedCoverageAmount = useMemo(() => {
+    return parsePositiveNumber(coverageAmountValue);
+  }, [coverageAmountValue]);
+
+  const parsedSacrifice = useMemo(() => {
+    if (!sacrificeValue) return null;
+    const num = Number(sacrificeValue);
+    return Number.isFinite(num) ? num : null;
+  }, [sacrificeValue]);
+
+  const netApy = useMemo(() => {
+    if (parsedBaseApy === null || parsedSacrifice === null) return null;
+    return parsedBaseApy - parsedSacrifice;
+  }, [parsedBaseApy, parsedSacrifice]);
+
+  const calculatedEstimatedPremium = useMemo(() => {
+    if (parsedCoverageAmount === null || parsedSacrifice === null) return null;
+    return parsedCoverageAmount * (parsedSacrifice / 100) * (periodDaysValue / 365);
+  }, [parsedCoverageAmount, parsedSacrifice, periodDaysValue]);
+
+  return (
+    <Collapsible
+      open={isExpanded}
+      onOpenChange={setIsExpanded}
+      className="rounded-xl overflow-hidden border"
+    >
+      <CollapsibleTrigger className="w-full p-4 flex items-center cursor-pointer justify-between hover:bg-primary/5 transition-colors">
+        <div className="flex items-center gap-3 text-left">
+          <div className="p-2 rounded-lg bg-primary/10 border border-primary/20">
+            <ShieldAlertIcon className="w-5 h-5 text-primary" />
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-semibold text-foreground">
+              Request coverage for this opportunity
+            </p>
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              We don&apos;t yet have Nexus Mutual cover available for{" "}
+              <span className="font-medium">{protocolName}</span>.
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {isExpanded ? (
+            <ChevronUpIcon className="w-5 h-5 text-muted-foreground" />
+          ) : (
+            <ChevronDownIcon className="w-5 h-5 text-muted-foreground" />
+          )}
+        </div>
+      </CollapsibleTrigger>
+
+      <CollapsibleContent>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            form.handleSubmit();
+          }}
+          className="p-4 space-y-4"
+        >
+          <div className="flex items-center justify-between text-sm text-muted-foreground">
+            <span className="font-medium text-foreground">{protocolName}</span>
+            {baseApyLabel && <span>Current APR: {baseApyLabel}</span>}
+          </div>
+
+          {/* Coverage Amount */}
+          <form.Field
+            name="coverageAmount"
+            validators={{
+              onSubmit: ({ value }) => {
+                if (!parsePositiveNumber(value)) {
+                  return "Enter a valid coverage amount";
+                }
+                return undefined;
+              },
+            }}
+          >
+            {(field) => (
+              <div className="space-y-2">
+                <Label className="text-xs text-foreground">Coverage Amount</Label>
+                <div className="flex items-center gap-6">
+                  {/* Amount input */}
+                  <div className="flex-1">
+                    <Input
+                      value={field.state.value}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleNumericInputChange(e, field.handleChange)
+                      }
+                      onBlur={field.handleBlur}
+                      placeholder="e.g. 1000"
+                      className="w-full bg-secondary border border-border rounded-sm px-4 py-3 pr-24 text-foreground placeholder-muted-foreground focus:outline-none focus:border-primary/50 transition-colors"
+                    />
+                  </div>
+                  <Badge
+                    className={cn(
+                      "bg-muted hover:bg-muted/80 w-auto min-w-[80px] rounded-md font-medium",
+                      "focus:ring-primary/20 focus:ring-2 focus:outline-none",
+                      "min-w-[80px] gap-1.5"
+                    )}
+                  >
+                    <img
+                      src={USDC_TOKEN.logoUrl}
+                      alt={USDC_TOKEN.symbol}
+                      className="w-5 h-5 rounded-full"
+                    />
+                    <span className="text-sm font-medium text-foreground">{USDC_TOKEN.symbol}</span>
+                  </Badge>
+                </div>
+                {field.state.meta.errors.length > 0 && (
+                  <p className="text-[11px] text-destructive">{field.state.meta.errors[0]}</p>
+                )}
+              </div>
+            )}
+          </form.Field>
+
+          {/* Period Selector */}
+          <form.Field name="periodDays">
+            {(field) => (
+              <div className="space-y-3">
+                <Label className="text-sm text-foreground  block">Coverage Period</Label>
+                <div className="flex gap-2">
+                  {PERIOD_OPTIONS.map((option) => (
+                    <Button
+                      key={option.days}
+                      type="button"
+                      onClick={() => field.handleChange(option.days as PeriodDays)}
+                      variant="none"
+                      className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                        field.state.value === option.days
+                          ? "bg-primary text-primary-foreground border-primary hover:border-primary"
+                          : "bg-secondary text-foreground border-border hover:border-primary/50"
+                      }`}
+                    >
+                      {option.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </form.Field>
+
+          {/* APY Sacrifice */}
+          <form.Field
+            name="desiredApySacrifice"
+            validators={{
+              onSubmit: ({ value }) => {
+                const num = parsePositiveNumber(value);
+                if (num === null) {
+                  return "Enter a valid APY sacrifice percentage";
+                }
+                if (num > 100) {
+                  return "Sacrifice cannot exceed 100%";
+                }
+                return undefined;
+              },
+            }}
+          >
+            {(field) => (
+              <div className="space-y-2">
+                <Label className="text-sm text-foreground">
+                  APY you&apos;re willing to sacrifice for cover (%)
+                </Label>
+                <Input
+                  type="text"
+                  value={field.state.value}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleNumericInputChange(e, field.handleChange)
+                  }
+                  onBlur={field.handleBlur}
+                  placeholder="e.g. 2.5"
+                  className="w-full bg-secondary border border-border rounded-sm px-4 py-3 pr-12 text-foreground placeholder-muted-foreground focus:outline-none focus:border-primary/50 transition-colors"
+                />
+                {field.state.meta.errors.length > 0 && (
+                  <p className="text-[11px] text-destructive">{field.state.meta.errors[0]}</p>
+                )}
+
+                <div className="flex items-center justify-between text-xs p-2 rounded-md bg-muted/50">
+                  <span className="text-muted-foreground">
+                    {parsedBaseApy ?? "—"}% − {parsedSacrifice ?? "—"}% =
+                  </span>
+                  <span
+                    className={`font-medium ${
+                      netApy !== null
+                        ? netApy >= 0
+                          ? "text-green-500"
+                          : "text-destructive"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    {netApy !== null ? `${netApy.toFixed(2)}% Net APY` : "— Net APY"}
+                  </span>
+                </div>
+              </div>
+            )}
+          </form.Field>
+
+          {/* Estimated Premium */}
+          <div className="p-3 rounded-sm bg-primary/5 border border-primary/20 space-y-1">
+            <p className="text-sm text-muted-foreground">Estimated Premium</p>
+            <p className="text-lg font-semibold text-foreground">
+              {calculatedEstimatedPremium !== null
+                ? calculatedEstimatedPremium.toLocaleString(undefined, {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 6,
+                  })
+                : "—"}
+            </p>
+            <p className="text-[10px] text-muted-foreground">
+              {parsedCoverageAmount?.toLocaleString() ?? "—"} × {parsedSacrifice ?? "—"}% ×{" "}
+              {periodDaysValue} days
+            </p>
+          </div>
+
+          <p className="text-base text-muted-foreground">
+            We&apos;ll use this to gauge interest and bring cover to the protocols you care about.
+          </p>
+
+          <div className="flex justify-center gap-2 w-full">
+            <Button
+              className="flex w-full text-lg font-semibold rounded-sm"
+              variant="green"
+              type="submit"
+              disabled={isPending}
+            >
+              <ShieldIcon className="w-5 h-5 text-primary" />
+              {isPending ? "Submitting..." : "Request Cover"}
+            </Button>
+          </div>
+        </form>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}