@turtleclub/covers 0.1.0-beta.1

package/src/nexus-mutual-cover/components/CoverRequestForm.tsx

@@ -0,0 +1,362 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useForm, useStore } from "@tanstack/react-form";
+import {
+  Button,
+  Input,
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  Label,
+  Badge,
+  Skeleton,
+  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, useCheckCoverRequest } from "@turtleclub/hooks";
+import { useQueryClient } from "@tanstack/react-query";
+import { ExistingCoverRequest } from "./ExistingCoverRequest";
+import { PERIOD_OPTIONS } from "../constants";
+
+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 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 queryClient = useQueryClient();
+
+  const { data: coverRequestCheck, isLoading: isCheckingRequest } = useCheckCoverRequest({
+    protocolName,
+  });
+
+  const canSubmit = coverRequestCheck?.canSubmit ?? true;
+  const existingRequest = coverRequestCheck?.existingRequest ?? null;
+
+  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();
+      queryClient.invalidateQueries({ queryKey: ["covers"] });
+      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>
+        {isCheckingRequest ? (
+          <div className="p-4 space-y-4">
+            <Skeleton className="h-4 w-48 bg-neutral-alpha-10" />
+            <Skeleton className="h-10 w-full bg-neutral-alpha-10" />
+            <Skeleton className="h-10 w-full bg-neutral-alpha-10" />
+            <Skeleton className="h-10 w-full bg-neutral-alpha-10" />
+          </div>
+        ) : !canSubmit && existingRequest ? (
+          <ExistingCoverRequest
+            protocolName={protocolName}
+            existingRequest={existingRequest}
+          />
+        ) : (
+          <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>
+  );
+}

package/src/nexus-mutual-cover/components/CoveredEventsInfo.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronUp, type LucideProps } from "lucide-react";
+import type { ComponentType } from "react";
+import { NEXUS_PROTOCOL_COVER_TERMS_URL } from "../constants";
+
+const ChevronDownIcon = ChevronDown as ComponentType<LucideProps>;
+const ChevronUpIcon = ChevronUp as ComponentType<LucideProps>;
+
+const COVERED_EVENTS = [
+  "Smart contract exploits/hacks",
+  "Oracle failure or manipulation",
+  "Liquidation failure",
+  "Governance takeovers",
+];
+
+const EXCLUSIONS = [
+  "Loss of value of any asset (i.e., depeg event)",
+  "Losses due to phishing, private key breaches, malware",
+  "Losses due to frontend attacks where the protocol is unaffected",
+];
+
+export function CoveredEventsInfo() {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className="p-3 rounded-lg bg-background/50 border border-border space-y-2">
+      {/* Summary - Always visible */}
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        <span className="text-primary font-medium">Single Protocol Cover</span> protects against
+        loss of funds on all EVM-compatible chains.
+      </p>
+
+      {/* Covered Events - Compact */}
+      <div className="flex flex-wrap gap-1.5">
+        {COVERED_EVENTS.map((event) => (
+          <span
+            key={event}
+            className="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20"
+          >
+            {event}
+          </span>
+        ))}
+      </div>
+
+      {/* Expand/Collapse Button */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+      >
+        {isExpanded ? (
+          <>
+            <ChevronUpIcon className="w-3 h-3" />
+            <span>Show less</span>
+          </>
+        ) : (
+          <>
+            <ChevronDownIcon className="w-3 h-3" />
+            <span>View exclusions & claim details</span>
+          </>
+        )}
+      </button>
+
+      {/* Expanded Details */}
+      {isExpanded && (
+        <div className="space-y-3 pt-2 border-t border-border">
+          {/* Exclusions */}
+          <div className="space-y-1.5">
+            <p className="text-xs uppercase tracking-wide text-muted-foreground font-medium">
+              Not Covered
+            </p>
+            <ul className="text-xs text-muted-foreground space-y-1">
+              {EXCLUSIONS.map((exclusion) => (
+                <li key={exclusion} className="flex items-start gap-1.5">
+                  <span className="text-destructive mt-0.5">✕</span>
+                  <span>{exclusion}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Deductible & Claims */}
+          <div className="space-y-1.5">
+            <p className="text-xs uppercase tracking-wide text-muted-foreground font-medium">
+              Claim Process
+            </p>
+            <ul className="text-xs text-muted-foreground space-y-1">
+              <li className="flex items-start gap-1.5">
+                <span className="text-primary mt-0.5">•</span>
+                <span>5% deductible of the Cover Amount</span>
+              </li>
+              <li className="flex items-start gap-1.5">
+                <span className="text-primary mt-0.5">•</span>
+                <span>14-day waiting period after loss event</span>
+              </li>
+              <li className="flex items-start gap-1.5">
+                <span className="text-primary mt-0.5">•</span>
+                <span>Claims accepted up to 35 days after cover ends</span>
+              </li>
+            </ul>
+          </div>
+
+          {/* Disclaimer */}
+          <p className="text-xs text-muted-foreground/70 leading-relaxed">
+            This is not a contract of insurance. Cover is provided on a discretionary basis.{" "}
+            <a
+              href={NEXUS_PROTOCOL_COVER_TERMS_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:text-primary/80 underline underline-offset-2"
+            >
+              Read complete terms
+            </a>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/nexus-mutual-cover/components/ExistingCoverInfo.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import type { ComponentType } from "react";
+import { CheckCircle, type LucideProps } from "lucide-react";
+
+import { parseCoverTiming } from "../utils";
+import { NEXUS_AVAILABLE_TOKENS, NEXUS_PROTOCOL_COVER_TERMS_URL } from "../constants";
+import type { CoverData } from "../hooks/useExistingCovers";
+import { CoverAsset } from "@nexusmutual/sdk";
+import { formatToken } from "@turtleclub/utils";
+import { formatUnits } from "viem";
+
+const CheckCircleIcon = CheckCircle as ComponentType<LucideProps>;
+
+export interface ExistingCoverInfoProps {
+  cover: CoverData;
+}
+
+export function ExistingCoverInfo({ cover }: ExistingCoverInfoProps) {
+  const asset = CoverAsset[cover.coverAsset];
+  const token = NEXUS_AVAILABLE_TOKENS.find((token) => token.symbol === asset);
+
+  return (
+    <>
+      <div className="p-3 rounded-lg bg-green-500/10 border border-green-500/20">
+        <div className="flex items-center gap-2 mb-2">
+          <CheckCircleIcon className="w-4 h-4 text-green-500" />
+          <span className="text-sm font-medium text-green-500">
+            You already have cover for this protocol
+          </span>
+        </div>
+        <p className="text-xs text-muted-foreground leading-relaxed">
+          Your deposit is protected against smart contract bugs, oracle failures, and governance
+          attacks on this protocol. See{" "}
+          <a
+            href={NEXUS_PROTOCOL_COVER_TERMS_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:text-primary/80 underline underline-offset-2"
+          >
+            terms
+          </a>{" "}
+          for details.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div className="p-3 rounded-lg bg-background border border-border text-center">
+          <p className="text-[10px] uppercase tracking-wide text-muted-foreground mb-1">
+            Cover Amount
+          </p>
+          {token?.decimals && (
+            <p className="text-lg font-bold text-foreground">
+              {Number(formatUnits(cover.amount, token?.decimals)).toLocaleString('en-US', { maximumFractionDigits: 6 })} {token?.symbol}
+            </p>
+          )}
+        </div>
+        <div className="p-3 rounded-lg bg-background border border-border text-center">
+          <p className="text-[10px] uppercase tracking-wide text-muted-foreground mb-1">Remaining</p>
+          <p className="text-lg font-bold text-foreground">
+            {parseCoverTiming(cover.start, cover.period, cover.gracePeriod).remainingDays} days
+          </p>
+        </div>
+      </div>
+
+      <div className="p-3 rounded-lg bg-background border border-border">
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground">Cover ID</span>
+          <span className="text-sm font-medium text-foreground">#{cover.coverId.toString()}</span>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/nexus-mutual-cover/components/ExistingCoverRequest.tsx

@@ -0,0 +1,65 @@
+import { ShieldCheck, type LucideProps } from "lucide-react";
+import type { ComponentType } from "react";
+import type { CoverRequestData } from "@turtleclub/hooks";
+import { PERIOD_OPTIONS } from "../constants";
+
+const ShieldCheckIcon = ShieldCheck as ComponentType<LucideProps>;
+
+function formatPeriodDays(days: number): string {
+  const option = PERIOD_OPTIONS.find((o) => o.days === days);
+  return option ? option.label : `${days}d`;
+}
+
+interface ExistingCoverRequestProps {
+  protocolName: string;
+  existingRequest: CoverRequestData;
+}
+
+export function ExistingCoverRequest({
+  protocolName,
+  existingRequest,
+}: ExistingCoverRequestProps) {
+  return (
+    <div className="p-4 space-y-4">
+      <div className="flex items-center gap-3">
+        <div className="p-2 rounded-lg bg-green-500/10 border border-green-500/20">
+          <ShieldCheckIcon className="w-5 h-5 text-green-500" />
+        </div>
+        <div className="space-y-1">
+          <p className="text-sm font-semibold text-foreground">
+            You&apos;ve already requested cover for {protocolName}
+          </p>
+          <p className="text-sm text-muted-foreground">
+            Your feedback has been shared with Nexus Mutual.
+          </p>
+        </div>
+      </div>
+
+      <div className="p-3 rounded-sm bg-muted/50 border border-border space-y-2">
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          Your Request
+        </p>
+        <div className="grid grid-cols-3 gap-2 text-sm">
+          <div>
+            <p className="text-muted-foreground text-xs">Coverage Amount</p>
+            <p className="font-medium text-foreground">
+              {Number(existingRequest.coverageAmount).toLocaleString()} {existingRequest.tokenSymbol}
+            </p>
+          </div>
+          <div>
+            <p className="text-muted-foreground text-xs">Period</p>
+            <p className="font-medium text-foreground">
+              {formatPeriodDays(existingRequest.periodDays)}
+            </p>
+          </div>
+          <div>
+            <p className="text-muted-foreground text-xs">APY Sacrifice</p>
+            <p className="font-medium text-foreground">
+              {existingRequest.desiredApySacrifice}%
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/nexus-mutual-cover/components/NexusCoverSection.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import type { NexusCoverSectionProps } from "../types";
+import { getOpportunityAPY, formatAPY } from "../utils";
+import { useNexusProduct } from "../hooks/useNexusProduct";
+import { CoverOfferCard } from "./CoverOfferCard";
+import { CoverRequestForm } from "./CoverRequestForm";
+import { TurtleHooksProvider } from "@turtleclub/hooks";
+
+export function NexusCoverSection({
+  opportunity,
+  buyerAddress,
+  onSuccess,
+  onError,
+  startExpanded = false,
+  className,
+}: NexusCoverSectionProps) {
+  const { isCoverable, productId, protocolName, coverProductName, coverAssets } =
+    useNexusProduct(opportunity);
+  const baseApy = getOpportunityAPY(opportunity);
+
+  if (protocolName === "Unknown" || !buyerAddress) return null;
+
+  return (
+    <div className={className}>
+      {isCoverable && productId !== null && coverAssets && coverAssets.length > 0 ? (
+        <CoverOfferCard
+          productId={productId}
+          opportunity={opportunity}
+          buyerAddress={buyerAddress}
+          protocolName={protocolName}
+          coverProductName={coverProductName ?? "Protocol Cover"}
+          onSuccess={onSuccess}
+          onError={onError}
+          startExpanded={startExpanded}
+          coverAvailableAssets={coverAssets || []}
+        />
+      ) : (
+        <CoverRequestForm
+          protocolName={protocolName}
+          baseApyLabel={formatAPY(baseApy)}
+          onSuccess={onSuccess}
+          onError={onError}
+          startExpanded={startExpanded}
+        />
+      )}
+    </div>
+  );
+}