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

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

@@ -1,102 +1,169 @@
 "use client";
 
-import { useState } from "react";
-import { Shield, ChevronDown, ChevronUp, CheckCircle, type LucideProps } from "lucide-react";
+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 { formatEther, parseEther } from "viem";
-import { useBalance } from "wagmi";
+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 {
-  getOpportunityAPY,
-  calculateAdjustedAPY,
-  formatAPY,
-  formatEthAmount,
-  parseCoverTiming,
-} from "../utils";
-import { NEXUS_KYC_REQUIREMENTS_URL, NEXUS_PROTOCOL_COVER_TERMS_URL } from "../constants";
+  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 CheckCircleIcon = CheckCircle as ComponentType<LucideProps>;
+const InfoIcon = Info as ComponentType<LucideProps>;
+
+const DEBOUNCE_MS = 500;
 
 export function CoverOfferCard({
   productId,
   opportunity,
-  amountToCover,
   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 { coverPeriod, setCoverPeriod, isLoading, error, quoteResult, premiumEth, yearlyCostPerc } =
+  const { isLoading, error, quoteResult, premium, originalAPY, adjustedAPY, coverCostPerc } =
     useCoverQuote({
       productId,
       buyerAddress,
-      amountToCover,
+      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 { data: balanceData, isLoading: isBalanceLoading } = useBalance({
-    address: buyerAddress as `0x${string}` | undefined,
-    query: { enabled: !!buyerAddress },
-  });
-  const userBalanceEth = balanceData?.value;
-  const premiumWei = premiumEth ? parseEther(premiumEth) : 0n;
-  const insufficientBalance =
-    isBalanceLoading ||
-    (userBalanceEth !== undefined && premiumWei > 0n && userBalanceEth < premiumWei);
+
+  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 originalAPY = getOpportunityAPY(opportunity);
-  const adjustedAPY =
-    yearlyCostPerc !== null ? calculateAdjustedAPY(originalAPY, yearlyCostPerc) : null;
-  const coverCostPerc = yearlyCostPerc !== null ? yearlyCostPerc * 100 : null;
+  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 = (() => {
+  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 (insufficientBalance) return "Insufficient balance for premium";
+    if (hasInsufficientBalance) return "Insufficient balance for premium";
     if (isPurchasing) return "Purchasing cover...";
     return null;
-  })();
-  const isPurchaseDisabled =
-    !quoteResult ||
-    isLoading ||
-    !!error ||
-    !hasAgreedToTerms ||
-    isPurchasing ||
-    insufficientBalance;
+  }, [hasAgreedToTerms, quoteResult, isLoading, error, hasInsufficientBalance, isPurchasing]);
+
+  const isPurchaseDisabled = useMemo(
+    () =>
+      !quoteResult ||
+      isLoading ||
+      !!error ||
+      !hasAgreedToTerms ||
+      isPurchasing ||
+      hasInsufficientBalance,
+    [quoteResult, isLoading, error, hasAgreedToTerms, isPurchasing, hasInsufficientBalance]
+  );
 
   const purchaseButton = (
     <Button
@@ -110,11 +177,12 @@ export function CoverOfferCard({
   );
 
   return (
-    <div className="rounded-xl  bg-gradient-to-br from-primary/10 to-card border border-primary/20 overflow-hidden">
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full p-4 flex items-center justify-between hover:bg-primary/5 transition-colors"
-      >
+    <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" />
@@ -122,7 +190,7 @@ export function CoverOfferCard({
           <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">
+              <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>
@@ -136,221 +204,176 @@ export function CoverOfferCard({
             <ChevronDownIcon className="w-5 h-5 text-muted-foreground" />
           )}
         </div>
-      </button>
+      </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>
 
-      {/* Expandable Content */}
-      {isExpanded && (
-        <div 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-[10px] text-muted-foreground px-2 py-1 rounded bg-muted/50 border border-border">
-              {coverProductName}
-            </span>
+        {/* 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>
+        )}
 
-          {/* 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} />}
 
-          {/* Existing Cover Info */}
-          {hasExistingCover && existingCover && (
-            <>
-              <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>
+        {/* Purchase Form - only show if no existing cover */}
+        {!hasExistingCover && !isCoversLoading && (
+          <>
+            <CoveredEventsInfo />
 
-              <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>
-                  <p className="text-lg font-bold text-foreground">
-                    {formatEthAmount(formatEther(existingCover.amount))} ETH
-                  </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(
-                        existingCover.start,
-                        existingCover.period,
-                        existingCover.gracePeriod
-                      ).periodDays
-                    }{" "}
-                    days
-                  </p>
-                </div>
-              </div>
+            {/* 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>
 
-              <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">
-                    #{existingCover.coverId.toString()}
-                  </span>
+            {/* 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>
-            </>
-          )}
-
-          {/* Purchase Form - only show if no existing cover */}
-          {!hasExistingCover && !isCoversLoading && (
-            <>
-              {/* Value Proposition */}
-              <div className="p-3 rounded-lg bg-background/50 border border-border space-y-3">
-                <p className="text-xs text-muted-foreground leading-relaxed">
-                  <span className="text-primary font-medium">Safeguard your yield</span> against
-                  protocol-specific risks. Deposit with confidence.
-                </p>
-
-                {/* Covered Events */}
-                <div className="space-y-2">
-                  <p className="text-[10px] uppercase tracking-wide text-muted-foreground font-medium">
-                    Covered Events
-                  </p>
-                  <ul className="text-[11px] text-muted-foreground space-y-1.5">
-                    <li className="flex items-start gap-2">
-                      <span className="text-primary mt-0.5">•</span>
-                      <span>Smart contract bugs or exploits in the protocol</span>
-                    </li>
-                    <li className="flex items-start gap-2">
-                      <span className="text-primary mt-0.5">•</span>
-                      <span>Oracle manipulation or failure affecting the protocol</span>
-                    </li>
-                    <li className="flex items-start gap-2">
-                      <span className="text-primary mt-0.5">•</span>
-                      <span>Governance attacks on the protocol</span>
-                    </li>
-                  </ul>
-                  <p className="text-[10px] text-muted-foreground/70 leading-relaxed">
-                    Cover applies only to events directly related to this protocol. See full{" "}
-                    <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>{" "}
-                    for exclusions.
-                  </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>
-
-              {/* APY Comparison */}
-              <div className="grid grid-cols-3 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">
-                    Base APR
-                  </p>
-                  <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-[10px] 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)}%
+              <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>
-                      <p className="text-[10px] 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">
-                  <p className="text-[10px] uppercase tracking-wide text-primary/70 mb-1">
-                    Net APY
-                  </p>
-                  {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-[10px] text-primary/60">protected</p>
-                    </>
-                  ) : (
-                    <p className="text-lg font-bold text-muted-foreground">—</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>
-                    {isLoading ? (
-                      <Skeleton className="h-4 w-20 bg-neutral-alpha-10" />
-                    ) : premiumEth ? (
-                      <span className="text-sm text-muted-foreground">
-                        ({formatEthAmount(premiumEth)} ETH)
-                      </span>
-                    ) : null}
-                  </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-[10px] text-muted-foreground">
-                  <span>28 days</span>
-                  <span>365 days</span>
+            {/* 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 */}
+            {/* 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</span>
+                  <span className="text-sm text-foreground">Premium Cost</span>
                 </div>
                 {isLoading ? (
                   <Skeleton className="h-5 w-20 bg-neutral-alpha-10" />
-                ) : premiumEth ? (
-                  <span className="text-sm font-semibold text-foreground">
-                    {formatEthAmount(premiumEth)} ETH
+                ) : 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>
@@ -358,62 +381,65 @@ export function CoverOfferCard({
                   <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>
 
-              {/* Terms Agreement */}
-              <div className="space-y-3 p-3 rounded-lg bg-muted/20 border border-border ">
-                <p className="text-[10px] text-muted-foreground leading-relaxed">
-                  By buying Nexus Mutual Bundled Protocol Cover, you agree to the{" "}
+              <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_PROTOCOL_COVER_TERMS_URL}
+                    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()}
                   >
-                    terms and conditions
+                    countries listed here
                   </a>
-                </p>
-
-                <label className="flex items-start gap-2 cursor-pointer group">
-                  <div className="relative flex-shrink-0 mt-0.5">
-                    <Checkbox
-                      checked={hasAgreedToTerms}
-                      onCheckedChange={(hasAgreedToTerms) =>
-                        setHasAgreedToTerms(hasAgreedToTerms === true)
-                      }
-                    />
-                  </div>
-                  <span className="text-[10px] 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 acknowledge that in the event of a loss, I will be required to join as a
-                    member of Nexus Mutual to file my claim.
-                  </span>
-                </label>
-              </div>
+                  , and agree to the terms and conditions above.
+                </span>
+              </label>
+            </div>
 
-              {/* Purchase Button */}
-              {disabledReason ? (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div>{purchaseButton}</div>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">{disabledReason}</TooltipContent>
-                </Tooltip>
-              ) : (
-                purchaseButton
-              )}
-            </>
-          )}
-        </div>
-      )}
-    </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>
   );
 }