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

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

@@ -0,0 +1,445 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Shield, ChevronDown, ChevronUp, Info, type LucideProps } from "lucide-react";
+import type { ComponentType } from "react";
+import {
+  Button,
+  Slider,
+  Skeleton,
+  Checkbox,
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  SwapInput,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  cn,
+} from "@turtleclub/ui";
+import { useSwitchChain } from "wagmi";
+import { useCoverQuote } from "../hooks/useCoverQuote";
+import { useNexusPurchase } from "../hooks/useNexusPurchase";
+import { useExistingCovers } from "../hooks/useExistingCovers";
+import { useCheckNexusMembership } from "../hooks/useCheckNexusMembership";
+import { formatAPY } from "../utils";
+import { useDebouncedValue } from "../hooks/useDebouncedValue";
+import {
+  NEXUS_KYC_REQUIREMENTS_URL,
+  NEXUS_PROTOCOL_COVER_TERMS_URL,
+  NEXUS_COVER_ROUTER,
+} from "../constants";
+import type { CoverOfferCardProps } from "../types";
+import { PurchaseButtonSection } from "./PurchaseButtonSection";
+import { ExistingCoverInfo } from "./ExistingCoverInfo";
+import { CoveredEventsInfo } from "./CoveredEventsInfo";
+
+import { useMultichainAccount } from "@turtleclub/multichain";
+import { formatToken } from "@turtleclub/utils";
+import { useTokenApproval } from "../hooks/useTokenApproval";
+import { useCoverTokenSelection } from "../hooks/useCoverTokenSelection";
+
+const ShieldIcon = Shield as ComponentType<LucideProps>;
+const ChevronDownIcon = ChevronDown as ComponentType<LucideProps>;
+const ChevronUpIcon = ChevronUp as ComponentType<LucideProps>;
+const InfoIcon = Info as ComponentType<LucideProps>;
+
+const DEBOUNCE_MS = 500;
+
+export function CoverOfferCard({
+  productId,
+  opportunity,
+  buyerAddress,
+  protocolName,
+  coverProductName,
+  onSuccess,
+  onError,
+  startExpanded,
+  coverAvailableAssets,
+}: CoverOfferCardProps) {
+  const [isExpanded, setIsExpanded] = useState(startExpanded ?? false);
+  const [hasAgreedToTerms, setHasAgreedToTerms] = useState(false);
+  const [coverPeriod, setCoverPeriod] = useState(30);
+  const [amountToCover, setAmountToCover] = useState("");
+
+  const {
+    filteredTokens,
+    selectedTokenAddress,
+    setSelectedTokenAddress,
+    selectedTokenSymbol,
+    selectedTokenDecimals,
+    selectedTokenBalance,
+    handleMaxClick,
+  } = useCoverTokenSelection({
+    buyerAddress,
+    coverAvailableAssets,
+    amount: amountToCover,
+    setAmount: setAmountToCover,
+  });
+
+  const debouncedAmount = useDebouncedValue(amountToCover, DEBOUNCE_MS);
+  const debouncedPeriod = useDebouncedValue(coverPeriod, DEBOUNCE_MS);
+
+  const { isLoading, error, quoteResult, premium, originalAPY, adjustedAPY, coverCostPerc } =
+    useCoverQuote({
+      productId,
+      buyerAddress,
+      amountToCover: debouncedAmount,
+      coverPeriod: debouncedPeriod,
+      tokenSymbol: selectedTokenSymbol,
+      decimals: selectedTokenDecimals,
+      opportunity,
+    });
+
+  // Check if user has insufficient balance for the premium (not the cover amount)
+  const hasInsufficientBalance = useMemo(() => {
+    if (!quoteResult?.displayInfo?.premiumInAsset || !selectedTokenBalance?.amount) {
+      return false;
+    }
+    const premiumInAsset = BigInt(quoteResult.displayInfo.premiumInAsset);
+    const userBalance = BigInt(selectedTokenBalance.amount);
+    return userBalance < premiumInAsset;
+  }, [quoteResult?.displayInfo?.premiumInAsset, selectedTokenBalance?.amount]);
+
+  const { chainId } = useMultichainAccount();
+  const { switchChainAsync } = useSwitchChain();
+  const { isMember, isLoading: isMembershipLoading } = useCheckNexusMembership(
+    buyerAddress,
+    chainId
+  );
+  const { purchase, isPurchasing } = useNexusPurchase({
+    onSuccess,
+    onError,
+  });
+  const { hasCoverForProduct, isLoading: isCoversLoading } = useExistingCovers(buyerAddress);
+
+  const approvalAmount = quoteResult
+    ? BigInt(quoteResult.buyCoverInput.buyCoverParams.maxPremiumInAsset)
+    : null;
+
+  const { needsApproval, isCheckingApproval, approve, isApproving, refetchApprovalStatus } =
+    useTokenApproval({
+      userAddress: buyerAddress as `0x${string}`,
+      tokenAddress: selectedTokenAddress as `0x${string}`,
+      spenderAddress: NEXUS_COVER_ROUTER,
+      chainId: 1,
+      amount: approvalAmount,
+    });
+
+  const existingCover = hasCoverForProduct(productId);
+  const hasExistingCover = !!existingCover;
+  const isWrongNetwork = chainId !== 1;
+
+  const handleApprove = async () => {
+    try {
+      await approve();
+      await refetchApprovalStatus();
+    } catch (error) {
+      onError?.("Error approving spending allowance for Nexus cover");
+    }
+  };
+
+  const handlePurchase = async () => {
+    if (isPurchasing || !quoteResult) return;
+    await purchase(quoteResult);
+  };
+
+  const disabledReason = useMemo(() => {
+    if (!hasAgreedToTerms) return "Checkbox not marked";
+    if (!quoteResult) return "Quote not ready yet";
+    if (isLoading) return "Fetching quote...";
+    if (error) return error;
+    if (hasInsufficientBalance) return "Insufficient balance for premium";
+    if (isPurchasing) return "Purchasing cover...";
+    return null;
+  }, [hasAgreedToTerms, quoteResult, isLoading, error, hasInsufficientBalance, isPurchasing]);
+
+  const isPurchaseDisabled = useMemo(
+    () =>
+      !quoteResult ||
+      isLoading ||
+      !!error ||
+      !hasAgreedToTerms ||
+      isPurchasing ||
+      hasInsufficientBalance,
+    [quoteResult, isLoading, error, hasAgreedToTerms, isPurchasing, hasInsufficientBalance]
+  );
+
+  const purchaseButton = (
+    <Button
+      onClick={handlePurchase}
+      disabled={isPurchaseDisabled}
+      className="w-full"
+      variant="green"
+    >
+      {isLoading ? "Getting Quote..." : isPurchasing ? "Purchasing Cover..." : "Purchase Cover"}
+    </Button>
+  );
+
+  return (
+    <Collapsible
+      open={isExpanded}
+      onOpenChange={setIsExpanded}
+      className="rounded-xl border overflow-hidden turtle-widget-root"
+    >
+      <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">
+          <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-xs 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>
+      </CollapsibleTrigger>
+
+      <CollapsibleContent 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-sm 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 && <ExistingCoverInfo cover={existingCover} />}
+
+        {/* Purchase Form - only show if no existing cover */}
+        {!hasExistingCover && !isCoversLoading && (
+          <>
+            <CoveredEventsInfo />
+
+            {/* Coverage Amount Input */}
+            <div className="space-y-2 ">
+              <span className="text-xs text-muted-foreground">Coverage Amount</span>
+              <SwapInput
+                value={amountToCover}
+                onChange={setAmountToCover}
+                tokens={filteredTokens}
+                placeholder="Enter amount to cover"
+                selectedToken={selectedTokenAddress}
+                onTokenChange={setSelectedTokenAddress}
+                onMaxClick={handleMaxClick}
+                className={cn(
+                  "p-5",
+                  hasInsufficientBalance ? "border-destructive/50 border" : "border-border border"
+                )}
+                showTokenSelectorBalance={false}
+                showInputBalance={false}
+              />
+            </div>
+
+            {/* APY Comparison */}
+            <div className="grid grid-cols-3 gap-3">
+              <div className="p-3 rounded-lg bg-background border border-border text-center">
+                <div className="flex items-center justify-center gap-1 mb-1">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Base APR</p>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <InfoIcon className="w-3 h-3 text-muted-foreground cursor-help" />
+                    </TooltipTrigger>
+                    <TooltipContent side="top" className="max-w-[200px]">
+                      <p className="text-xs">
+                        The current yield offered by this opportunity before any cover costs.
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                <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-xs 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-xs 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">
+                <div className="flex items-center justify-center gap-1 mb-1">
+                  <p className="text-xs uppercase tracking-wide text-primary/70">Net APY</p>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <InfoIcon className="w-3 h-3 text-primary/70 cursor-help" />
+                    </TooltipTrigger>
+                    <TooltipContent side="top" className="max-w-[200px]">
+                      <p className="text-xs">
+                        Your effective yield after subtracting the annualized cover cost from the
+                        Base APR.
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                {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-xs 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>
+                </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-xs text-muted-foreground">
+                <span>28 days</span>
+                <span>365 days</span>
+              </div>
+            </div>
+
+            {/* Premium Details */}
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">Your Balance</span>
+                <span className="text-xs text-muted-foreground text-primary">
+                  {selectedTokenBalance
+                    ? formatToken(
+                        selectedTokenBalance.amount,
+                        selectedTokenBalance.token,
+                        true,
+                        false,
+                        5
+                      )
+                    : "0"}{" "}
+                  {selectedTokenBalance?.token.symbol}
+                </span>
+              </div>
+              <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 Cost</span>
+                </div>
+                {isLoading ? (
+                  <Skeleton className="h-5 w-20 bg-neutral-alpha-10" />
+                ) : premium ? (
+                  <span
+                    className={cn(
+                      "text-sm font-semibold",
+                      hasInsufficientBalance ? "text-destructive" : "text-foreground"
+                    )}
+                  >
+                    {premium} {selectedTokenSymbol}
+                  </span>
+                ) : error ? (
+                  <span className="text-sm text-destructive">No cover available</span>
+                ) : (
+                  <span className="text-sm text-muted-foreground">—</span>
+                )}
+              </div>
+            </div>
+
+            {/* Terms Agreement */}
+            <div className="space-y-3 p-3 rounded-lg bg-muted/20 border border-border ">
+              <p className="text-xs 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 group">
+                <div className="relative flex-shrink-0 mt-0.5 cursor-pointer">
+                  <Checkbox
+                    checked={hasAgreedToTerms}
+                    onCheckedChange={(hasAgreedToTerms) =>
+                      setHasAgreedToTerms(hasAgreedToTerms === true)
+                    }
+                    className="size-4  cursor-pointer"
+                  />
+                </div>
+                <span className="text-xs 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 agree to the terms and conditions above.
+                </span>
+              </label>
+            </div>
+
+            {/* Purchase Button Section */}
+            <PurchaseButtonSection
+              isWrongNetwork={isWrongNetwork}
+              isMembershipLoading={isMembershipLoading}
+              isMember={isMember}
+              disabledReason={disabledReason}
+              purchaseButton={purchaseButton}
+              onSwitchNetwork={() => switchChainAsync({ chainId: 1 })}
+              needsApproval={needsApproval}
+              isCheckingApproval={isCheckingApproval}
+              onApprove={handleApprove}
+              isApproving={isApproving}
+              tokenSymbol={selectedTokenSymbol}
+            />
+          </>
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}