@turtleclub/opportunities 0.1.0-beta.2 → 0.1.0-beta.21

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

@@ -0,0 +1,267 @@
+"use client";
+
+import { ChangeEvent, FormEvent, useMemo, useState } from "react";
+import { Button, Checkbox, Input } from "@turtleclub/ui";
+import { ShieldAlert, Send, ChevronDown, ChevronUp, type LucideProps, Shield } from "lucide-react";
+import type { ComponentType } from "react";
+import type { CoverRequestData, CoverRequestFormProps } from "../types";
+const ShieldAlertIcon = ShieldAlert as ComponentType<LucideProps>;
+const SendIcon = Send as ComponentType<LucideProps>;
+const ChevronUpIcon = ChevronUp as ComponentType<LucideProps>;
+const ChevronDownIcon = ChevronDown as ComponentType<LucideProps>;
+const ShieldIcon = Shield as ComponentType<LucideProps>;
+
+const PERIOD_OPTIONS = [
+  { label: "28d", days: 28 },
+  { label: "3m", days: 90 },
+  { label: "6m", days: 180 },
+  { label: "1y", days: 365 },
+] as const;
+
+export function CoverRequestForm({
+  protocolName,
+  depositedAmount,
+  baseApyLabel,
+  onSuccess,
+  onError,
+  startExpanded,
+}: CoverRequestFormProps) {
+  const [coverageAmount, setCoverageAmount] = useState("");
+  const [useDepositedAmount, setUseDepositedAmount] = useState(false);
+  const [desiredApySacrifice, setDesiredApySacrifice] = useState("");
+  const [selectedPeriodDays, setSelectedPeriodDays] = useState(90);
+  const [inputError, setInputError] = useState<string | null>(null);
+  const [isExpanded, setIsExpanded] = useState(startExpanded ?? false);
+
+  const parsedCoverageAmount = useMemo(() => {
+    const amountStr = useDepositedAmount ? (depositedAmount ?? "") : coverageAmount;
+    if (!amountStr.trim()) return null;
+    const value = Number(amountStr);
+    return Number.isFinite(value) && value > 0 ? value : null;
+  }, [coverageAmount, useDepositedAmount, depositedAmount]);
+
+  const parsedSacrifice = useMemo(() => {
+    if (!desiredApySacrifice.trim()) return null;
+    const value = Number(desiredApySacrifice);
+    return Number.isFinite(value) ? value : null;
+  }, [desiredApySacrifice]);
+
+  const parsedBaseApy = useMemo(() => {
+    if (!baseApyLabel) return null;
+    const value = Number(baseApyLabel.replace(/[^0-9.]/g, ""));
+    return Number.isFinite(value) ? value : null;
+  }, [baseApyLabel]);
+
+  const netApy = useMemo(() => {
+    if (parsedBaseApy === null || parsedSacrifice === null) return null;
+    return parsedBaseApy - parsedSacrifice;
+  }, [parsedBaseApy, parsedSacrifice]);
+
+  const estimatedPremium = useMemo(() => {
+    if (parsedCoverageAmount === null || parsedSacrifice === null) return null;
+    // Premium = Amount × (APY/100) × (Days/365)
+    return parsedCoverageAmount * (parsedSacrifice / 100) * (selectedPeriodDays / 365);
+  }, [parsedCoverageAmount, parsedSacrifice, selectedPeriodDays]);
+
+  const resetForm = () => {
+    setCoverageAmount("");
+    setUseDepositedAmount(false);
+    setDesiredApySacrifice("");
+    setSelectedPeriodDays(90);
+    setInputError(null);
+  };
+
+  const handleSubmit = (): CoverRequestData | undefined => {
+    if (parsedCoverageAmount === null) {
+      setInputError("Enter a valid coverage amount");
+      return;
+    }
+    if (parsedSacrifice === null) {
+      setInputError("Enter a valid APY sacrifice");
+      return;
+    }
+    if (parsedSacrifice < 0) {
+      setInputError("APY sacrifice cannot be negative");
+      return;
+    }
+    setInputError(null);
+
+    const requestData: CoverRequestData = {
+      protocolName,
+      coverageAmount: parsedCoverageAmount,
+      periodDays: selectedPeriodDays,
+      desiredApySacrifice: parsedSacrifice,
+      estimatedPremium: estimatedPremium ?? 0,
+    };
+
+    onSuccess?.("Cover request submitted");
+    console.info("Cover request submitted", requestData);
+
+    return requestData;
+  };
+
+  const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const requestData = handleSubmit();
+    if (requestData) {
+      console.log("Submitted data successfully", requestData);
+      resetForm();
+    }
+  };
+
+  return (
+    <div className="rounded-xl bg-gradient-to-br from-primary/5 to-card overflow-hidden border border-primary/20">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        type="button"
+        className="w-full p-4 flex items-center justify-between hover:bg-primary/5 transition-colors"
+      >
+        <div className="flex items-center gap-3 text-left">
+          <div className="p-2 rounded-lg bg-primary/10 border border-primary/20">
+            <ShieldAlertIcon className="w-5 h-5 text-primary" />
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-semibold text-foreground">
+              Request coverage for this opportunity
+            </p>
+            <p className="text-xs text-muted-foreground leading-relaxed">
+              We don&apos;t yet have Nexus Mutual cover available for{" "}
+              <span className="font-medium">{protocolName}</span>.
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {isExpanded ? (
+            <ChevronUpIcon className="w-5 h-5 text-muted-foreground" />
+          ) : (
+            <ChevronDownIcon className="w-5 h-5 text-muted-foreground" />
+          )}
+        </div>
+      </button>
+
+      {isExpanded && (
+        <form onSubmit={handleFormSubmit} className="p-4 space-y-4">
+          <div className="flex items-center justify-between text-sm text-muted-foreground">
+            <span className="font-medium text-foreground">{protocolName}</span>
+            {baseApyLabel && <span>Current APR: {baseApyLabel}</span>}
+          </div>
+
+          {/* Coverage Amount */}
+          <div className="space-y-2">
+            <label className="text-xs text-foreground">Coverage Amount</label>
+            <Input
+              variant=""
+              value={useDepositedAmount ? (depositedAmount ?? "") : coverageAmount}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                const value = e.target.value;
+                if (value === "" || /^\d*\.?\d*$/.test(value)) {
+                  setCoverageAmount(value);
+                }
+              }}
+              placeholder="e.g. 1"
+              className="w-full bg-secondary border border-border rounded-sm px-4 py-3 pr-12 text-foreground placeholder-muted-foreground focus:outline-none focus:border-primary/50 transition-colors"
+              disabled={useDepositedAmount}
+            />
+            {depositedAmount && (
+              <label className="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer">
+                <Checkbox
+                  checked={useDepositedAmount}
+                  onCheckedChange={(checked) => setUseDepositedAmount(!useDepositedAmount)}
+                  className="rounded border-border"
+                />
+                Use my deposited amount ({depositedAmount})
+              </label>
+            )}
+          </div>
+
+          {/* Period Selector */}
+          <div className="space-y-3">
+            <label className="text-xs text-foreground text-center block">Coverage Period</label>
+            <div className="flex gap-2">
+              {PERIOD_OPTIONS.map((option) => (
+                <Button
+                  key={option.days}
+                  type="button"
+                  onClick={() => setSelectedPeriodDays(option.days)}
+                  variant="none"
+                  className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                    selectedPeriodDays === option.days
+                      ? "bg-primary text-primary-foreground border-primary  hover:border-primary"
+                      : "bg-secondary text-foreground border-border hover:border-primary/50"
+                  }`}
+                >
+                  {option.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          {/* APY Sacrifice */}
+          <div className="space-y-2">
+            <label className="text-xs text-foreground">
+              APY you&apos;re willing to sacrifice for cover (%)
+            </label>
+            <Input
+              type="text"
+              variant="bordered"
+              value={desiredApySacrifice}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                const value = e.target.value;
+                if (value === "" || /^\d*\.?\d*$/.test(value)) {
+                  setDesiredApySacrifice(e.target.value);
+                }
+              }}
+              placeholder="e.g. 2.5"
+              className="w-full bg-secondary border border-border rounded-sm px-4 py-3 pr-12 text-foreground placeholder-muted-foreground focus:outline-none focus:border-primary/50 transition-colors"
+            />
+
+            <div className="flex items-center justify-between text-xs p-2 rounded-md bg-muted/50">
+              <span className="text-muted-foreground">
+                {parsedBaseApy ?? "—"}% − {parsedSacrifice ?? "—"}% =
+              </span>
+              <span
+                className={`font-medium ${netApy !== null && netApy >= 0 ? "text-green-500" : "text-muted-foreground"}`}
+              >
+                {netApy !== null ? `${netApy.toFixed(2)}% Net APY` : "— Net APY"}
+              </span>
+            </div>
+          </div>
+
+          {/* Estimated Premium */}
+          <div className="p-3 rounded-sm bg-primary/5 border border-primary/20 space-y-1">
+            <p className="text-xs text-muted-foreground">Estimated Premium</p>
+            <p className="text-lg font-semibold text-foreground">
+              {estimatedPremium !== null
+                ? estimatedPremium.toLocaleString(undefined, {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                  })
+                : "—"}
+            </p>
+            <p className="text-[10px] text-muted-foreground">
+              {parsedCoverageAmount?.toLocaleString() ?? "—"} × {parsedSacrifice ?? "—"}% ×{" "}
+              {selectedPeriodDays} days
+            </p>
+          </div>
+
+          {inputError && <p className="text-[11px] text-destructive">{inputError}</p>}
+
+          <p className="text-base text-muted-foreground">
+            We&apos;ll use this to gauge interest and bring cover to the protocols you care about.
+          </p>
+
+          <div className="flex justify-center gap-2 w-full  ">
+            <Button
+              className=" flex w-full text-lg font-semibold rounded-sm"
+              variant="green"
+              type="submit"
+            >
+              <ShieldIcon className="w-5 h-5 text-primary" />
+              Request Cover
+            </Button>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,77 @@
+"use client";
+
+import type { ComponentType } from "react";
+import { Button } from "@turtleclub/ui";
+
+interface MembershipRequestCardProps {
+  isExpanded: boolean;
+  onToggle: () => void;
+  membershipUrl: string;
+  ShieldIcon: ComponentType<any>;
+  ExternalLinkIcon: ComponentType<any>;
+  ChevronUpIcon: ComponentType<any>;
+  ChevronDownIcon: ComponentType<any>;
+}
+
+export function MembershipRequestCard({
+  isExpanded,
+  onToggle,
+  membershipUrl,
+  ShieldIcon,
+  ExternalLinkIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+}: MembershipRequestCardProps) {
+  return (
+    <div className="rounded-xl bg-gradient-to-br from-primary/10 to-card border border-primary/20 overflow-hidden">
+      <button
+        onClick={onToggle}
+        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>
+        {isExpanded ? (
+          <ChevronUpIcon className="w-5 h-5 text-muted-foreground" />
+        ) : (
+          <ChevronDownIcon className="w-5 h-5 text-muted-foreground" />
+        )}
+      </button>
+
+      {isExpanded && (
+        <div className="px-4 pb-4 space-y-4">
+          <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="default">
+            <a
+              href={membershipUrl}
+              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>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState } from "react";
+import { Shield, ExternalLink, ChevronDown, ChevronUp, type LucideProps } from "lucide-react";
+import type { ComponentType } from "react";
+import { Button } from "@turtleclub/ui";
+import type { NexusCoverSectionProps } from "../types";
+import { getOpportunityAPY, formatAPY } from "../utils";
+import { useNexusProduct } from "../hooks/useNexusProduct";
+import { useCheckNexusMembership } from "../hooks/useCheckNexusMembership";
+import { CoverOfferCard } from "./CoverOfferCard";
+import { CoverRequestForm } from "./CoverRequestForm";
+import { NEXUS_MEMBERSHIP_URL } from "../constants";
+import { MembershipRequestCard } from "./MembershipRequestCard";
+
+const ShieldIcon = Shield as ComponentType<LucideProps>;
+const ExternalLinkIcon = ExternalLink as ComponentType<LucideProps>;
+const ChevronDownIcon = ChevronDown as ComponentType<LucideProps>;
+const ChevronUpIcon = ChevronUp as ComponentType<LucideProps>;
+
+export function NexusCoverSection({
+  opportunity,
+  amountToCover,
+  buyerAddress,
+  onSuccess,
+  onError,
+  startExpanded = false,
+  className,
+}: NexusCoverSectionProps) {
+  const [isExpanded, setIsExpanded] = useState(startExpanded);
+  const { isCoverable, productId, protocolName, coverProductName } = useNexusProduct(opportunity);
+  const baseApy = getOpportunityAPY(opportunity);
+  const { isMember, isLoading: isMembershipLoading } = useCheckNexusMembership(buyerAddress);
+
+  if (isCoverable && isMembershipLoading) {
+    return null;
+  }
+
+  //If the user is not  a member but the opportunity is coverable, show the membership url.
+  // if the user is not a member and the opportunity is not coverable, show nothing
+  if (protocolName === "Unknown" || !buyerAddress || (!isCoverable && !isMember)) return null;
+
+  if (isCoverable && !isMember) {
+    return (
+      <MembershipRequestCard
+        isExpanded={isExpanded}
+        onToggle={() => setIsExpanded(!isExpanded)}
+        membershipUrl={NEXUS_MEMBERSHIP_URL}
+        ShieldIcon={ShieldIcon}
+        ExternalLinkIcon={ExternalLinkIcon}
+        ChevronUpIcon={ChevronUpIcon}
+        ChevronDownIcon={ChevronDownIcon}
+      />
+    );
+  }
+
+  if (isCoverable && productId !== null && isMember) {
+    return (
+      <div className={className}>
+        <CoverOfferCard
+          productId={productId}
+          opportunity={opportunity}
+          amountToCover={amountToCover}
+          buyerAddress={buyerAddress}
+          protocolName={protocolName}
+          coverProductName={coverProductName ?? "Protocol Cover"}
+          onSuccess={onSuccess}
+          onError={onError}
+          startExpanded={startExpanded}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      <CoverRequestForm
+        protocolName={protocolName}
+        baseApyLabel={formatAPY(baseApy)}
+        depositedAmount={amountToCover}
+        onSuccess={onSuccess}
+        onError={onError}
+        startExpanded={startExpanded}
+      />
+    </div>
+  );
+}

package/src/cover-offer/constants.ts

@@ -0,0 +1,8 @@
+export const NEXUS_PROTOCOL_COVER_TERMS_URL =
+   "https://api.nexusmutual.io/ipfs/QmQz38DSo6DyrHkRj8uvtGFyx842izVvnx8a3qqF99dctG";
+export const NEXUS_KYC_REQUIREMENTS_URL =
+   "https://docs.nexusmutual.io/overview/membership/#kyc-requirements";
+export const NEXUS_MEMBERSHIP_URL = "https://app.nexusmutual.io/become-member";
+export const NEXUS_COVER_NFT_ADDRESS = "0xcafeaca76be547f14d0220482667b42d8e7bc3eb";
+export const USER_NFTS_API_URL = "https://lumon.turtle.xyz/query/token/erc721_portfolio";
+

package/src/cover-offer/hooks/useCheckNexusMembership.ts

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+import { createPublicClient, http, getAddress } from 'viem';
+import { mainnet } from 'viem/chains';
+import nexusSdk from "@nexusmutual/sdk";
+
+const publicClient = createPublicClient({
+   chain: mainnet,
+   transport: http(),
+});
+
+export function useCheckNexusMembership(userAddress: string | undefined) {
+   const [isMember, setIsMember] = useState<boolean>(false);
+   const [isLoading, setIsLoading] = useState<boolean>(true);
+   const [error, setError] = useState<Error | null>(null);
+
+   useEffect(() => {
+      if (!userAddress) {
+         setIsMember(false);
+         setIsLoading(false);
+         return;
+      }
+
+      const checkMembership = async () => {
+         setIsLoading(true);
+         setError(null);
+         try {
+            const masterAddress = nexusSdk.addresses?.NXMaster;
+            const masterAbi = nexusSdk.abis?.NXMaster;
+
+            if (!masterAddress || !masterAbi) {
+               throw new Error('Nexus SDK not configured correctly for NXMaster.');
+            }
+            const checksummedAddress = getAddress(userAddress);
+            const result = await publicClient.readContract({
+               address: getAddress(masterAddress),
+               abi: masterAbi,
+               functionName: 'isMember',
+               args: [checksummedAddress],
+            });
+            setIsMember(result as boolean);
+         } catch (err: any) {
+            console.error("Error checking membership:", err.message);
+            setError(err);
+            setIsMember(false);
+         } finally {
+            setIsLoading(false);
+         }
+      };
+
+      checkMembership();
+   }, [userAddress]);
+
+   return { isMember, isLoading, error };
+}

package/src/cover-offer/hooks/useCoverQuote.ts

@@ -0,0 +1,122 @@
+import { useState, useEffect, useCallback } from "react";
+import { parseEther, formatEther } from "viem";
+import type { NexusQuoteResult, CoverQuoteState } from "../types";
+import { CoverAsset, NexusSDK } from "@nexusmutual/sdk";
+
+interface UseCoverQuoteOptions {
+   productId: number;
+   buyerAddress: string;
+   amountToCover: string;
+   /** Debounce delay in ms */
+   debounceMs?: number;
+}
+
+interface UseCoverQuoteReturn extends CoverQuoteState {
+   setCoverPeriod: (period: number) => void;
+   refetch: () => void;
+}
+
+let nexusSdkInstance: import("@nexusmutual/sdk").NexusSDK | null = null;
+let coverAssetEnum: typeof import("@nexusmutual/sdk").CoverAsset | null = null;
+
+const TERMS_IPFS_CID = "QmXUzXDMbeKSCewUie34vPD7mCAGnshi4ULRy4h7DLmoRS";
+
+async function getNexusSdk() {
+   if (!nexusSdkInstance || !coverAssetEnum) {
+      const { NexusSDK, CoverAsset } = await import("@nexusmutual/sdk");
+      nexusSdkInstance = new NexusSDK();
+      coverAssetEnum = CoverAsset;
+   }
+
+   return { nexusSdk: nexusSdkInstance, CoverAsset: coverAssetEnum };
+}
+
+
+async function fetchNexusQuote(
+   productId: number,
+   buyerAddress: string,
+   amount: string,
+   period: number
+): Promise<NexusQuoteResult> {
+
+   const { nexusSdk } = await getNexusSdk();
+   const amountWei = parseEther(amount).toString();
+
+   const { result, error } = await nexusSdk.quote.getQuoteAndBuyCoverInputs({
+      productId,
+      amount: amountWei,
+      period,
+      coverAsset: CoverAsset.ETH,
+      paymentAsset: CoverAsset.ETH,
+      buyerAddress,
+      ipfsCidOrContent: TERMS_IPFS_CID,
+   });
+
+   if (error) {
+      throw new Error(error.message || "Failed to fetch Nexus quote");
+   }
+
+   return result as NexusQuoteResult;
+}
+
+export function useCoverQuote({
+   productId,
+   buyerAddress,
+   amountToCover,
+   debounceMs = 500,
+}: UseCoverQuoteOptions): UseCoverQuoteReturn {
+   const [coverPeriod, setCoverPeriod] = useState(30);
+   const [isLoading, setIsLoading] = useState(false);
+   const [error, setError] = useState<string | null>(null);
+   const [quoteResult, setQuoteResult] = useState<NexusQuoteResult | null>(null);
+   const [premiumEth, setPremiumEth] = useState<string | null>(null);
+   const [yearlyCostPerc, setYearlyCostPerc] = useState<number | null>(null);
+
+   const fetchQuote = useCallback(async () => {
+      if (!productId || !buyerAddress || !amountToCover || parseFloat(amountToCover) <= 0) {
+         console.error("Validation failed", productId, buyerAddress, amountToCover, coverPeriod);
+         return;
+      }
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+         const result = await fetchNexusQuote(productId, buyerAddress, amountToCover, coverPeriod);
+
+         setQuoteResult(result);
+         setPremiumEth(formatEther(BigInt(result.displayInfo.premiumInAsset)));
+         setYearlyCostPerc(result.displayInfo.yearlyCostPerc);
+      } catch (err: unknown) {
+         const errorMessage = err instanceof Error ? err.message : "Failed to fetch quote";
+         console.error("Cover quote error:", err);
+         setError(errorMessage);
+         setQuoteResult(null);
+         setPremiumEth(null);
+         setYearlyCostPerc(null);
+      } finally {
+         setIsLoading(false);
+      }
+   }, [productId, buyerAddress, amountToCover, coverPeriod]);
+
+   // Debounced fetch on input changes
+   useEffect(() => {
+      const timeoutId = setTimeout(() => {
+         fetchQuote();
+      }, debounceMs);
+
+      return () => clearTimeout(timeoutId);
+   }, [fetchQuote, debounceMs]);
+
+   return {
+      coverPeriod,
+      setCoverPeriod,
+      isLoading,
+      error,
+      quoteResult,
+      premiumEth,
+      yearlyCostPerc,
+      refetch: fetchQuote,
+   };
+}
+