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

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

@@ -1,31 +1,44 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import { Button } from "@turtleclub/ui";
-import { ShieldAlert, Send, ChevronDown, ChevronUp, type LucideProps } from "lucide-react";
+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>;
 
-export interface CoverRequestFormProps {
-  protocolName: string;
-  baseApyLabel?: string;
-  onDismiss?: () => void;
-  onSubmit?: (desiredApySacrifice: number | null) => void;
-}
+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,
-  onDismiss,
-  onSubmit,
+  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(true);
+  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;
@@ -33,32 +46,74 @@ export function CoverRequestForm({
     return Number.isFinite(value) ? value : null;
   }, [desiredApySacrifice]);
 
-  const handleSubmit = () => {
-    if (desiredApySacrifice.trim() && parsedSacrifice === null) {
-      setInputError("Enter a valid non-negative number");
+  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 !== null && parsedSacrifice < 0) {
+    if (parsedSacrifice < 0) {
       setInputError("APY sacrifice cannot be negative");
       return;
     }
     setInputError(null);
 
-    onSubmit?.(parsedSacrifice);
+    const requestData: CoverRequestData = {
+      protocolName,
+      coverageAmount: parsedCoverageAmount,
+      periodDays: selectedPeriodDays,
+      desiredApySacrifice: parsedSacrifice,
+      estimatedPremium: estimatedPremium ?? 0,
+    };
 
-    if (!onSubmit) {
-      // Basic placeholder to surface the interaction during integration.
-      console.info("Cover request submitted", {
-        desiredApySacrifice: parsedSacrifice,
-        protocolName,
-      });
+    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 border border-primary/20">
+    <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">
@@ -76,26 +131,6 @@ export function CoverRequestForm({
           </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" />
           ) : (
@@ -105,47 +140,127 @@ export function CoverRequestForm({
       </button>
 
       {isExpanded && (
-        <div className="p-4 space-y-4">
+        <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">
-            <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>}
+            <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>
-            <label className="text-xs text-muted-foreground">
-              APY you&apos;re willing to sacrifice for cover (percentage points)
+          </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
+            <Input
               type="text"
+              variant="bordered"
               value={desiredApySacrifice}
-              onChange={(e) => {
-                const sanitized = e.target.value.replace(/[^0-9.]/g, "");
-                setDesiredApySacrifice(sanitized);
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                const value = e.target.value;
+                if (value === "" || /^\d*\.?\d*$/.test(value)) {
+                  setDesiredApySacrifice(e.target.value);
+                }
               }}
-              placeholder="e.g. 1.5"
-              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+              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"
             />
-            {inputError && <p className="text-[11px] text-destructive">{inputError}</p>}
-            <p className="text-[11px] text-muted-foreground">
-              We&apos;ll use this to gauge interest and bring cover to the protocols you care about.
+
+            <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>
 
-          <div className="flex justify-end gap-2">
-            {onDismiss && (
-              <Button
-                variant="ghost"
-                onClick={onDismiss}
-                className="text-muted-foreground hover:text-foreground"
-              >
-                Dismiss
-              </Button>
-            )}
-            <Button onClick={handleSubmit} className="flex items-center gap-2" variant="green">
-              <SendIcon className="w-4 h-4" />
+          {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>
-        </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

@@ -1,65 +1,87 @@
-"use client";
-
-import type { NexusCoverSectionProps, NexusQuoteResult } from "../types";
-import { getOpportunityAPY, formatAPY } from "../utils";
-import { useNexusProduct } from "../hooks/useNexusProduct";
-import { useNexusPurchase } from "../hooks/useNexusPurchase";
-import { CoverOfferCard } from "./CoverOfferCard";
-import { CoverRequestForm } from "./CoverRequestForm";
-
-export function NexusCoverSection({
-  opportunity,
-  amountToCover,
-  buyerAddress,
-  onSuccess,
-  onError,
-  onDismiss,
-  className,
-}: NexusCoverSectionProps) {
-  const { isCoverable, productId, protocolName } = useNexusProduct(opportunity);
-  const baseApy = getOpportunityAPY(opportunity);
-
-  const {
-    purchase,
-    isPurchasing,
-    error: purchaseError,
-  } = useNexusPurchase({
-    buyerAddress,
-    productId: productId ?? 0,
-    amountToCover,
-    onSuccess: onSuccess,
-    onError: onError,
-  });
-
-  const handlePurchase = (quoteResult: NexusQuoteResult, coverPeriod: number) => {
-    return purchase(quoteResult, coverPeriod);
-  };
-
-  if (isCoverable && productId !== null) {
-    return (
-      <div className={className}>
-        <CoverOfferCard
-          productId={productId}
-          opportunity={opportunity}
-          amountToCover={amountToCover}
-          buyerAddress={buyerAddress}
-          onPurchase={handlePurchase}
-          isPurchasing={isPurchasing}
-          purchaseError={purchaseError}
-          onDismiss={onDismiss}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className={className}>
-      <CoverRequestForm
-        protocolName={protocolName}
-        baseApyLabel={formatAPY(baseApy)}
-        onDismiss={onDismiss}
-        onSubmit={() => {}}
-      />
-    </div>
-  );
-}
+"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

@@ -1,6 +1,8 @@
-export const NEXUS_PROTOCOL_COVER_TERMS_URL =
-   "https://nexusmutual.io/pages/ProtocolCoverv1.0.pdf";
-
-export const NEXUS_KYC_REQUIREMENTS_URL =
-   "https://docs.nexusmutual.io/overview/membership/#kyc-requirements";
-
+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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-import * as ethers from "ethers";
+import { parseEther, formatEther } from "viem";
 import type { NexusQuoteResult, CoverQuoteState } from "../types";
 import { CoverAsset, NexusSDK } from "@nexusmutual/sdk";
 
@@ -39,9 +39,8 @@ async function fetchNexusQuote(
    period: number
 ): Promise<NexusQuoteResult> {
 
-   //const { nexusSdk, CoverAsset } = await getNexusSdk();
-   const nexusSdk = new NexusSDK();
-   const amountWei = ethers.parseEther(amount).toString();
+   const { nexusSdk } = await getNexusSdk();
+   const amountWei = parseEther(amount).toString();
 
    const { result, error } = await nexusSdk.quote.getQuoteAndBuyCoverInputs({
       productId,
@@ -74,7 +73,6 @@ export function useCoverQuote({
    const [yearlyCostPerc, setYearlyCostPerc] = useState<number | null>(null);
 
    const fetchQuote = useCallback(async () => {
-      console.log("fetchQuote", productId, buyerAddress, amountToCover, coverPeriod);
       if (!productId || !buyerAddress || !amountToCover || parseFloat(amountToCover) <= 0) {
          console.error("Validation failed", productId, buyerAddress, amountToCover, coverPeriod);
          return;
@@ -87,7 +85,7 @@ export function useCoverQuote({
          const result = await fetchNexusQuote(productId, buyerAddress, amountToCover, coverPeriod);
 
          setQuoteResult(result);
-         setPremiumEth(ethers.formatEther(result.displayInfo.premiumInAsset));
+         setPremiumEth(formatEther(BigInt(result.displayInfo.premiumInAsset)));
          setYearlyCostPerc(result.displayInfo.yearlyCostPerc);
       } catch (err: unknown) {
          const errorMessage = err instanceof Error ? err.message : "Failed to fetch quote";