@turtleclub/opportunities 0.1.0-beta.20 → 0.1.0-beta.22

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

@@ -1,87 +1,49 @@
 "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>;
+import { TurtleHooksProvider } from "@turtleclub/hooks";
 
 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 { isCoverable, productId, protocolName, coverProductName, coverAssets } =
+    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 (protocolName === "Unknown" || !buyerAddress) 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}>
+  return (
+    <div className={className}>
+      {isCoverable && productId !== null && coverAssets && coverAssets.length > 0 ? (
         <CoverOfferCard
           productId={productId}
           opportunity={opportunity}
-          amountToCover={amountToCover}
           buyerAddress={buyerAddress}
           protocolName={protocolName}
           coverProductName={coverProductName ?? "Protocol Cover"}
           onSuccess={onSuccess}
           onError={onError}
           startExpanded={startExpanded}
+          coverAvailableAssets={coverAssets || []}
         />
-      </div>
-    );
-  }
-
-  return (
-    <div className={className}>
-      <CoverRequestForm
-        protocolName={protocolName}
-        baseApyLabel={formatAPY(baseApy)}
-        depositedAmount={amountToCover}
-        onSuccess={onSuccess}
-        onError={onError}
-        startExpanded={startExpanded}
-      />
+      ) : (
+        <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}</>;
+}

package/src/cover-offer/constants.ts

@@ -4,5 +4,29 @@ 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";
+export const NEXUS_COVER_ROUTER = "0xcafeac0fF5dA0A2777d915531bfA6B29d282Ee62";
 
+// These are the tokens that Nexus Mutual supports.
+export const NEXUS_AVAILABLE_TOKENS = [
+   {
+      symbol: "ETH",
+      name: "Ethereum",
+      address: "0x0000000000000000000000000000000000000000",
+      logoUrl: "https://storage.googleapis.com/turtle-assets/tokens/eth.png",
+      decimals: 18,
+   },
+   {
+      symbol: "USDC",
+      name: "USD Coin",
+      address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
+      logoUrl: "https://storage.googleapis.com/turtle-assets/tokens/usdc.png",
+      decimals: 6,
+   },
+   {
+      symbol: "cbBTC",
+      name: "Coinbase Wrapped BTC",
+      address: "0xcbb7c0000ab88b473b1f5afd9ef808440eed33bf",
+      logoUrl: "https://storage.googleapis.com/turtle-assets/tokens/cbbtc.png",
+      decimals: 8,
+   },
+] as const;

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

@@ -1,54 +1,32 @@
-import { useState, useEffect } from 'react';
-import { createPublicClient, http, getAddress } from 'viem';
-import { mainnet } from 'viem/chains';
+import { getAddress } from "viem";
+import type { Abi } from "viem";
+import { useReadContract } from "wagmi";
 import nexusSdk from "@nexusmutual/sdk";
 
-const publicClient = createPublicClient({
-   chain: mainnet,
-   transport: http(),
-});
+export function useCheckNexusMembership(
+   userAddress: string | undefined,
+   chainId: string | number | undefined
+) {
+   const masterAddress = nexusSdk.addresses?.NXMaster;
+   const masterAbi = nexusSdk.abis?.NXMaster;
+   const numericChainId = typeof chainId === "string" ? parseInt(chainId, 10) : chainId;
+   const isOnEthereum = numericChainId === 1;
 
-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]);
+   const {
+      data: isMember = false,
+      isLoading,
+      error,
+   } = useReadContract({
+      address: masterAddress ? getAddress(masterAddress) : undefined,
+      abi: masterAbi as Abi,
+      functionName: "isMember",
+      chainId: 1,
+      args: userAddress ? [getAddress(userAddress)] : undefined,
+      query: {
+         enabled: isOnEthereum && !!userAddress && !!masterAddress && !!masterAbi,
+         select: (data) => data as boolean,
+      },
+   });
 
    return { isMember, isLoading, error };
 }