@turtleclub/opportunities 0.1.0-beta.14 → 0.1.0-beta.15

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

@@ -1,291 +1,419 @@
-"use client";
-
-import { useState } from "react";
-import { Shield, ChevronDown, ChevronUp, type LucideProps } from "lucide-react";
-import type { ComponentType } from "react";
-import {
-  Button,
-  Slider,
-  Skeleton,
-  Checkbox,
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-} from "@turtleclub/ui";
-import { useCoverQuote } from "../hooks/useCoverQuote";
-import { getOpportunityAPY, calculateAdjustedAPY, formatAPY, formatEthAmount } from "../utils";
-import { NEXUS_KYC_REQUIREMENTS_URL, NEXUS_PROTOCOL_COVER_TERMS_URL } from "../constants";
-import type { CoverOfferCardProps } from "../types";
-const ShieldIcon = Shield as ComponentType<LucideProps>;
-const ChevronDownIcon = ChevronDown as ComponentType<LucideProps>;
-const ChevronUpIcon = ChevronUp as ComponentType<LucideProps>;
-
-export function CoverOfferCard({
-  productId,
-  opportunity,
-  amountToCover,
-  buyerAddress,
-  onPurchase,
-  onDismiss,
-  isPurchasing = false,
-  purchaseError,
-}: CoverOfferCardProps) {
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [hasAgreedToTerms, setHasAgreedToTerms] = useState(false);
-
-  const { coverPeriod, setCoverPeriod, isLoading, error, quoteResult, premiumEth, yearlyCostPerc } =
-    useCoverQuote({
-      productId,
-      buyerAddress,
-      amountToCover,
-    });
-
-  const originalAPY = getOpportunityAPY(opportunity);
-  const adjustedAPY =
-    yearlyCostPerc !== null ? calculateAdjustedAPY(originalAPY, yearlyCostPerc) : null;
-  const coverCostPerc = yearlyCostPerc !== null ? yearlyCostPerc * 100 : null;
-
-  const handlePurchase = () => {
-    if (isPurchasing) return;
-    if (quoteResult) {
-      onPurchase(quoteResult, coverPeriod);
-    }
-  };
-
-  const disabledReason = (() => {
-    if (!hasAgreedToTerms) return "Checkbox not marked";
-    if (!quoteResult) return "Quote not ready yet";
-    if (isLoading) return "Fetching quote...";
-    if (error) return error;
-    if (isPurchasing) return "Purchasing cover...";
-    return null;
-  })();
-  const isPurchaseDisabled =
-    !quoteResult || isLoading || !!error || !hasAgreedToTerms || isPurchasing;
-
-  const purchaseButton = (
-    <Button
-      onClick={handlePurchase}
-      disabled={isPurchaseDisabled}
-      className="w-full"
-      variant="green"
-    >
-      {isLoading ? "Getting Quote..." : isPurchasing ? "Purchasing Cover..." : "Purchase Cover"}
-    </Button>
-  );
-
-  return (
-    <div className="rounded-xl  bg-gradient-to-br from-primary/10 to-card border border-primary/20 overflow-hidden">
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full p-4 flex items-center justify-between hover:bg-primary/5 transition-colors"
-      >
-        <div className="flex items-center gap-3">
-          <div className="p-2 rounded-lg bg-primary/10 border border-primary/20">
-            <ShieldIcon className="w-5 h-5 text-primary" />
-          </div>
-          <div className="text-left">
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-semibold text-foreground">Protect Your Deposit</span>
-              <span className="px-2 py-0.5 text-[10px] font-medium text-primary bg-primary/10 rounded-full border border-primary/20">
-                NEW
-              </span>
-            </div>
-            <p className="text-xs text-muted-foreground">Nexus Mutual Single Protocol Cover</p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          {onDismiss && (
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={(e) => {
-                e.stopPropagation();
-                onDismiss();
-              }}
-              className="h-6 w-6 text-muted-foreground hover:text-foreground"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </Button>
-          )}
-          {isExpanded ? (
-            <ChevronUpIcon className="w-5 h-5 text-muted-foreground" />
-          ) : (
-            <ChevronDownIcon className="w-5 h-5 text-muted-foreground" />
-          )}
-        </div>
-      </button>
-
-      {/* Expandable Content */}
-      {isExpanded && (
-        <div className="px-4 pb-4 space-y-4">
-          {/* Value Proposition */}
-          <div className="p-3 rounded-lg bg-background/50 border border-border">
-            <p className="text-xs text-muted-foreground leading-relaxed">
-              <span className="text-primary font-medium">Safeguard your yield</span> against smart
-              contract exploits, oracle failures, and protocol-specific risks. Deposit with
-              confidence.
-            </p>
-          </div>
-
-          {/* APY Comparison */}
-          <div className="grid grid-cols-3 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">
-                Base APR
-              </p>
-              <p className="text-lg font-bold text-foreground">{formatAPY(originalAPY)}</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">
-                Cover Cost
-              </p>
-              {isLoading ? (
-                <Skeleton className="h-7 w-12 mx-auto" />
-              ) : coverCostPerc !== null ? (
-                <>
-                  <p className="text-lg font-bold text-orange-400">-{coverCostPerc.toFixed(2)}%</p>
-                  <p className="text-[10px] text-muted-foreground">per year</p>
-                </>
-              ) : (
-                <p className="text-lg font-bold text-muted-foreground">—</p>
-              )}
-            </div>
-            <div className="p-3 rounded-lg bg-primary/5 border border-primary/20 text-center">
-              <p className="text-[10px] uppercase tracking-wide text-primary/70 mb-1">Net APY</p>
-              {isLoading ? (
-                <Skeleton className="h-7 w-12 mx-auto" />
-              ) : adjustedAPY !== null ? (
-                <>
-                  <p className="text-lg font-bold text-primary">{formatAPY(adjustedAPY)}</p>
-                  <p className="text-[10px] text-primary/60">protected</p>
-                </>
-              ) : (
-                <p className="text-lg font-bold text-muted-foreground">—</p>
-              )}
-            </div>
-          </div>
-
-          {/* Coverage Period Slider */}
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <span className="text-xs text-muted-foreground">Coverage Period</span>
-              <span className="text-sm font-medium text-foreground">
-                {coverPeriod} days
-                {premiumEth && (
-                  <span className="text-muted-foreground ml-1">
-                    ({formatEthAmount(premiumEth)} ETH)
-                  </span>
-                )}
-              </span>
-            </div>
-            <Slider
-              value={[coverPeriod]}
-              onValueChange={(value) => setCoverPeriod(value[0])}
-              min={28}
-              max={365}
-              step={1}
-              className="w-full"
-            />
-            <div className="flex justify-between text-[10px] text-muted-foreground">
-              <span>28 days</span>
-              <span>365 days</span>
-            </div>
-          </div>
-
-          {/* Premium Details */}
-          <div className="flex items-center justify-between p-3 rounded-lg bg-background border border-border">
-            <div className="flex items-center gap-2">
-              <ShieldIcon className="w-4 h-4 text-primary" />
-              <span className="text-sm text-foreground">Premium</span>
-            </div>
-            {isLoading ? (
-              <Skeleton className="h-5 w-20" />
-            ) : premiumEth ? (
-              <span className="text-sm font-semibold text-foreground">
-                {formatEthAmount(premiumEth)} ETH
-              </span>
-            ) : error ? (
-              <span className="text-sm text-destructive">No cover available</span>
-            ) : (
-              <span className="text-sm text-muted-foreground">—</span>
-            )}
-          </div>
-
-          {/* Terms Agreement */}
-          <div className="space-y-3 p-3 rounded-lg bg-muted/20 border border-border ">
-            <p className="text-[10px] text-muted-foreground leading-relaxed">
-              By buying Nexus Mutual Bundled Protocol Cover, you agree to the{" "}
-              <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>{" "}
-              and{" "}
-              <a
-                href={NEXUS_PROTOCOL_COVER_TERMS_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:text-primary/80 underline underline-offset-2"
-              >
-                conditions
-              </a>
-            </p>
-
-            <label className="flex items-start gap-2 cursor-pointer group">
-              <div className="relative flex-shrink-0 mt-0.5">
-                <Checkbox
-                  checked={hasAgreedToTerms}
-                  onCheckedChange={(hasAgreedToTerms) =>
-                    setHasAgreedToTerms(hasAgreedToTerms === true)
-                  }
-                />
-              </div>
-              <span className="text-[10px] text-muted-foreground leading-relaxed group-hover:text-foreground/70 transition-colors">
-                I confirm that I do not reside in the{" "}
-                <a
-                  href={NEXUS_KYC_REQUIREMENTS_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-primary hover:text-primary/80 underline underline-offset-2"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  countries listed here
-                </a>
-                , and acknowledge that in the event of a loss, I will be required to join as a
-                member of Nexus Mutual to file my claim.
-              </span>
-            </label>
-          </div>
-
-          {/* Purchase Button */}
-          {disabledReason ? (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{purchaseButton}</div>
-              </TooltipTrigger>
-              <TooltipContent side="top">{disabledReason}</TooltipContent>
-            </Tooltip>
-          ) : (
-            purchaseButton
-          )}
-          {Boolean(purchaseError) && (
-            <p className="text-[10px] text-destructive mt-1">
-              Failed to purchase cover. Please try again.
-            </p>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import { Shield, ChevronDown, ChevronUp, CheckCircle, type LucideProps } from "lucide-react";
+import type { ComponentType } from "react";
+import {
+  Button,
+  Slider,
+  Skeleton,
+  Checkbox,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@turtleclub/ui";
+import { formatEther, parseEther } from "viem";
+import { useBalance } from "wagmi";
+import { useCoverQuote } from "../hooks/useCoverQuote";
+import { useNexusPurchase } from "../hooks/useNexusPurchase";
+import { useExistingCovers } from "../hooks/useExistingCovers";
+import {
+  getOpportunityAPY,
+  calculateAdjustedAPY,
+  formatAPY,
+  formatEthAmount,
+  parseCoverTiming,
+} from "../utils";
+import { NEXUS_KYC_REQUIREMENTS_URL, NEXUS_PROTOCOL_COVER_TERMS_URL } from "../constants";
+import type { CoverOfferCardProps } from "../types";
+
+const ShieldIcon = Shield as ComponentType<LucideProps>;
+const ChevronDownIcon = ChevronDown as ComponentType<LucideProps>;
+const ChevronUpIcon = ChevronUp as ComponentType<LucideProps>;
+const CheckCircleIcon = CheckCircle as ComponentType<LucideProps>;
+
+export function CoverOfferCard({
+  productId,
+  opportunity,
+  amountToCover,
+  buyerAddress,
+  protocolName,
+  coverProductName,
+  onSuccess,
+  onError,
+  startExpanded,
+}: CoverOfferCardProps) {
+  const [isExpanded, setIsExpanded] = useState(startExpanded ?? false);
+  const [hasAgreedToTerms, setHasAgreedToTerms] = useState(false);
+
+  const { coverPeriod, setCoverPeriod, isLoading, error, quoteResult, premiumEth, yearlyCostPerc } =
+    useCoverQuote({
+      productId,
+      buyerAddress,
+      amountToCover,
+    });
+
+  const { purchase, isPurchasing } = useNexusPurchase({
+    onSuccess,
+    onError,
+  });
+  const { hasCoverForProduct, isLoading: isCoversLoading } = useExistingCovers(buyerAddress);
+  const { data: balanceData, isLoading: isBalanceLoading } = useBalance({
+    address: buyerAddress as `0x${string}` | undefined,
+    query: { enabled: !!buyerAddress },
+  });
+  const userBalanceEth = balanceData?.value;
+  const premiumWei = premiumEth ? parseEther(premiumEth) : 0n;
+  const insufficientBalance =
+    isBalanceLoading ||
+    (userBalanceEth !== undefined && premiumWei > 0n && userBalanceEth < premiumWei);
+
+  const existingCover = hasCoverForProduct(productId);
+  const hasExistingCover = !!existingCover;
+
+  const originalAPY = getOpportunityAPY(opportunity);
+  const adjustedAPY =
+    yearlyCostPerc !== null ? calculateAdjustedAPY(originalAPY, yearlyCostPerc) : null;
+  const coverCostPerc = yearlyCostPerc !== null ? yearlyCostPerc * 100 : null;
+
+  const handlePurchase = async () => {
+    if (isPurchasing || !quoteResult) return;
+    await purchase(quoteResult);
+  };
+
+  const disabledReason = (() => {
+    if (!hasAgreedToTerms) return "Checkbox not marked";
+    if (!quoteResult) return "Quote not ready yet";
+    if (isLoading) return "Fetching quote...";
+    if (error) return error;
+    if (insufficientBalance) return "Insufficient balance for premium";
+    if (isPurchasing) return "Purchasing cover...";
+    return null;
+  })();
+  const isPurchaseDisabled =
+    !quoteResult ||
+    isLoading ||
+    !!error ||
+    !hasAgreedToTerms ||
+    isPurchasing ||
+    insufficientBalance;
+
+  const purchaseButton = (
+    <Button
+      onClick={handlePurchase}
+      disabled={isPurchaseDisabled}
+      className="w-full"
+      variant="green"
+    >
+      {isLoading ? "Getting Quote..." : isPurchasing ? "Purchasing Cover..." : "Purchase Cover"}
+    </Button>
+  );
+
+  return (
+    <div className="rounded-xl  bg-gradient-to-br from-primary/10 to-card border border-primary/20 overflow-hidden">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full p-4 flex items-center justify-between hover:bg-primary/5 transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded-lg bg-primary/10 border border-primary/20">
+            <ShieldIcon className="w-5 h-5 text-primary" />
+          </div>
+          <div className="text-left">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold text-foreground">Protect Your Deposit</span>
+              <span className="px-2 py-0.5 text-[10px] font-medium text-primary bg-primary/10 rounded-full border border-primary/20">
+                NEW
+              </span>
+            </div>
+            <p className="text-xs text-muted-foreground">Nexus Mutual Single Protocol Cover</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>
+
+      {/* Expandable Content */}
+      {isExpanded && (
+        <div className="px-4 pb-4 space-y-4">
+          {/* Protocol & Cover Info */}
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">
+              Protocol: <span className="font-medium text-foreground">{protocolName}</span>
+            </span>
+            <span className="text-[10px] text-muted-foreground px-2 py-1 rounded bg-muted/50 border border-border">
+              {coverProductName}
+            </span>
+          </div>
+
+          {/* Loading state for existing covers */}
+          {isCoversLoading && (
+            <div className="p-3 rounded-lg bg-background/50 border border-border">
+              <Skeleton className="h-4 w-48 mx-auto bg-neutral-alpha-10" />
+            </div>
+          )}
+
+          {/* Existing Cover Info */}
+          {hasExistingCover && existingCover && (
+            <>
+              <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>
+                  <p className="text-lg font-bold text-foreground">
+                    {formatEthAmount(formatEther(existingCover.amount))} ETH
+                  </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">
+                    Period
+                  </p>
+                  <p className="text-lg font-bold text-foreground">
+                    {
+                      parseCoverTiming(
+                        existingCover.start,
+                        existingCover.period,
+                        existingCover.gracePeriod
+                      ).periodDays
+                    }{" "}
+                    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">
+                    #{existingCover.coverId.toString()}
+                  </span>
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* Purchase Form - only show if no existing cover */}
+          {!hasExistingCover && !isCoversLoading && (
+            <>
+              {/* Value Proposition */}
+              <div className="p-3 rounded-lg bg-background/50 border border-border space-y-3">
+                <p className="text-xs text-muted-foreground leading-relaxed">
+                  <span className="text-primary font-medium">Safeguard your yield</span> against
+                  protocol-specific risks. Deposit with confidence.
+                </p>
+
+                {/* Covered Events */}
+                <div className="space-y-2">
+                  <p className="text-[10px] uppercase tracking-wide text-muted-foreground font-medium">
+                    Covered Events
+                  </p>
+                  <ul className="text-[11px] text-muted-foreground space-y-1.5">
+                    <li className="flex items-start gap-2">
+                      <span className="text-primary mt-0.5">•</span>
+                      <span>Smart contract bugs or exploits in the protocol</span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                      <span className="text-primary mt-0.5">•</span>
+                      <span>Oracle manipulation or failure affecting the protocol</span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                      <span className="text-primary mt-0.5">•</span>
+                      <span>Governance attacks on the protocol</span>
+                    </li>
+                  </ul>
+                  <p className="text-[10px] text-muted-foreground/70 leading-relaxed">
+                    Cover applies only to events directly related to this protocol. See full{" "}
+                    <a
+                      href={NEXUS_PROTOCOL_COVER_TERMS_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:text-primary/80 underline underline-offset-2"
+                    >
+                      terms and conditions
+                    </a>{" "}
+                    for exclusions.
+                  </p>
+                </div>
+              </div>
+
+              {/* APY Comparison */}
+              <div className="grid grid-cols-3 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">
+                    Base APR
+                  </p>
+                  <p className="text-lg font-bold text-foreground">{formatAPY(originalAPY)}</p>
+                </div>
+                <div className="p-3 rounded-lg bg-background/80 border border-border text-center">
+                  <p className="text-[10px] uppercase tracking-wide text-muted-foreground mb-1"></p>
+                  {isLoading ? (
+                    <>
+                      <Skeleton className="h-6 w-16 mx-auto bg-neutral-alpha-10" />
+                      <Skeleton className="h-4 w-12 mx-auto mt-1 bg-neutral-alpha-10" />
+                    </>
+                  ) : coverCostPerc !== null ? (
+                    <>
+                      <p className="text-lg font-bold text-orange-400">
+                        -{coverCostPerc.toFixed(2)}%
+                      </p>
+                      <p className="text-[10px] text-muted-foreground">per year</p>
+                    </>
+                  ) : (
+                    <p className="text-lg font-bold text-muted-foreground">—</p>
+                  )}
+                </div>
+                <div className="p-3 rounded-lg bg-primary/5 border border-primary/20 text-center">
+                  <p className="text-[10px] uppercase tracking-wide text-primary/70 mb-1">
+                    Net APY
+                  </p>
+                  {isLoading ? (
+                    <>
+                      <Skeleton className="h-6 w-14 mx-auto bg-neutral-alpha-10 " />
+                      <Skeleton className="h-3 w-14 mx-auto mt-1 bg-neutral-alpha-10" />
+                    </>
+                  ) : adjustedAPY !== null ? (
+                    <>
+                      <p className="text-lg font-bold text-primary">{formatAPY(adjustedAPY)}</p>
+                      <p className="text-[10px] text-primary/60">protected</p>
+                    </>
+                  ) : (
+                    <p className="text-lg font-bold text-muted-foreground">—</p>
+                  )}
+                </div>
+              </div>
+
+              {/* Coverage Period Slider */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-muted-foreground">Coverage Period</span>
+                  <div className="flex items-center gap-1">
+                    <span className="text-sm font-medium text-foreground">{coverPeriod} days</span>
+                    {isLoading ? (
+                      <Skeleton className="h-4 w-20 bg-neutral-alpha-10" />
+                    ) : premiumEth ? (
+                      <span className="text-sm text-muted-foreground">
+                        ({formatEthAmount(premiumEth)} ETH)
+                      </span>
+                    ) : null}
+                  </div>
+                </div>
+                <div className="w-full">
+                  <Slider
+                    value={[coverPeriod]}
+                    onValueChange={(value) => setCoverPeriod(value[0])}
+                    min={28}
+                    max={365}
+                    step={1}
+                  />
+                </div>
+                <div className="flex justify-between text-[10px] text-muted-foreground">
+                  <span>28 days</span>
+                  <span>365 days</span>
+                </div>
+              </div>
+
+              {/* Premium Details */}
+              <div className="flex items-center justify-between p-3 rounded-lg bg-background border border-border">
+                <div className="flex items-center gap-2">
+                  <ShieldIcon className="w-4 h-4 text-primary" />
+                  <span className="text-sm text-foreground">Premium</span>
+                </div>
+                {isLoading ? (
+                  <Skeleton className="h-5 w-20 bg-neutral-alpha-10" />
+                ) : premiumEth ? (
+                  <span className="text-sm font-semibold text-foreground">
+                    {formatEthAmount(premiumEth)} ETH
+                  </span>
+                ) : error ? (
+                  <span className="text-sm text-destructive">No cover available</span>
+                ) : (
+                  <span className="text-sm text-muted-foreground">—</span>
+                )}
+              </div>
+
+              {/* Terms Agreement */}
+              <div className="space-y-3 p-3 rounded-lg bg-muted/20 border border-border ">
+                <p className="text-[10px] text-muted-foreground leading-relaxed">
+                  By buying Nexus Mutual Bundled Protocol Cover, you agree to the{" "}
+                  <a
+                    href={NEXUS_PROTOCOL_COVER_TERMS_URL}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:text-primary/80 underline underline-offset-2"
+                  >
+                    terms and conditions
+                  </a>
+                </p>
+
+                <label className="flex items-start gap-2 cursor-pointer group">
+                  <div className="relative flex-shrink-0 mt-0.5">
+                    <Checkbox
+                      checked={hasAgreedToTerms}
+                      onCheckedChange={(hasAgreedToTerms) =>
+                        setHasAgreedToTerms(hasAgreedToTerms === true)
+                      }
+                    />
+                  </div>
+                  <span className="text-[10px] text-muted-foreground leading-relaxed group-hover:text-foreground/70 transition-colors">
+                    I confirm that I do not reside in the{" "}
+                    <a
+                      href={NEXUS_KYC_REQUIREMENTS_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:text-primary/80 underline underline-offset-2"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      countries listed here
+                    </a>
+                    , and acknowledge that in the event of a loss, I will be required to join as a
+                    member of Nexus Mutual to file my claim.
+                  </span>
+                </label>
+              </div>
+
+              {/* Purchase Button */}
+              {disabledReason ? (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div>{purchaseButton}</div>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">{disabledReason}</TooltipContent>
+                </Tooltip>
+              ) : (
+                purchaseButton
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}