@turtleclub/opportunities 0.1.0-beta.6 → 0.1.0-beta.61

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

@@ -0,0 +1,342 @@
+"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>
+  );
+}

package/src/cover-offer/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/cover-offer/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">Period</p>
+          <p className="text-lg font-bold text-foreground">
+            {parseCoverTiming(cover.start, cover.period, cover.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">#{cover.coverId.toString()}</span>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/cover-offer/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>
+  );
+}

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

@@ -0,0 +1,106 @@
+"use client";
+
+import type { ComponentType } from "react";
+import { ExternalLink, type LucideProps } from "lucide-react";
+import { Button, Skeleton, Tooltip, TooltipTrigger, TooltipContent, Card } from "@turtleclub/ui";
+import { NEXUS_MEMBERSHIP_URL } from "../constants";
+
+const ExternalLinkIcon = ExternalLink as ComponentType<LucideProps>;
+
+export interface PurchaseButtonSectionProps {
+  isWrongNetwork: boolean;
+  isMembershipLoading: boolean;
+  isMember: boolean;
+  disabledReason: string | null;
+  purchaseButton: React.ReactNode;
+  onSwitchNetwork: () => void;
+  needsApproval?: boolean;
+  isCheckingApproval?: boolean;
+  onApprove?: () => Promise<void>;
+  isApproving?: boolean;
+  tokenSymbol?: string;
+}
+
+export function PurchaseButtonSection({
+  isWrongNetwork,
+  isMembershipLoading,
+  isMember,
+  disabledReason,
+  purchaseButton,
+  onSwitchNetwork,
+  needsApproval = false,
+  isCheckingApproval = false,
+  onApprove,
+  isApproving = false,
+  tokenSymbol,
+}: PurchaseButtonSectionProps) {
+  if (isWrongNetwork) {
+    return (
+      <Card variant="border" className="h-fit">
+        <Button
+          onClick={onSwitchNetwork}
+          className="text-primary hover:text-primary/80 w-full cursor-pointer font-medium underline transition-colors"
+        >
+          Switch to Ethereum network to Buy Cover
+        </Button>
+      </Card>
+    );
+  }
+
+  if (isMembershipLoading) {
+    return <Skeleton className="h-10 w-full bg-neutral-alpha-10" />;
+  }
+
+  if (!isMember) {
+    return (
+      <div className="space-y-3">
+        <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">Membership required.</span> Join Nexus Mutual
+            to protect your deposit against smart contract exploits, oracle failures, and
+            protocol-specific risks.
+          </p>
+        </div>
+        <Button asChild className="w-full" variant="green">
+          <a
+            href={NEXUS_MEMBERSHIP_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-center gap-2"
+          >
+            Become a Member
+            <ExternalLinkIcon className="w-4 h-4" />
+          </a>
+        </Button>
+      </div>
+    );
+  }
+
+  if (needsApproval && tokenSymbol && onApprove) {
+    return (
+      <div className="space-y-3">
+        <Button
+          onClick={onApprove}
+          disabled={isApproving || isCheckingApproval}
+          className="w-full"
+          variant="green"
+        >
+          {isApproving || isCheckingApproval ? "Approving..." : `Approve ${tokenSymbol} spending`}
+        </Button>
+      </div>
+    );
+  }
+
+  if (disabledReason) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div>{purchaseButton}</div>
+        </TooltipTrigger>
+        <TooltipContent side="top">{disabledReason}</TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return <>{purchaseButton}</>;
+}