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

package/src/cover-offer/types/index.ts

@@ -0,0 +1,41 @@
+import { CoverAsset } from "@nexusmutual/sdk";
+import type { Opportunity } from "@turtleclub/hooks";
+import type { Asset } from "@turtleclub/ui";
+
+// The Nexus SDK doesn't export the NexusProduct type, so we need to define it ourselves.
+// The product has more attributes than just id, name, and coverAssets, but this are the only ones we need for now.
+export type NexusProduct = {
+   id: number;
+   name: string;
+   coverAssets: string[];
+};
+
+export interface CoverOfferCardProps {
+   productId: number;
+   opportunity: Opportunity;
+   buyerAddress: string;
+   protocolName: string;
+   coverProductName: string;
+   coverAvailableAssets: string[];
+   onSuccess?: (message: string) => void;
+   onError?: (message: string) => void;
+   startExpanded?: boolean;
+}
+
+export interface NexusCoverSectionProps {
+   opportunity: Opportunity;
+   buyerAddress: string;
+   onSuccess?: (message: string) => void;
+   onError?: (message: string) => void;
+   className?: string;
+   startExpanded?: boolean;
+}
+
+export interface CoverRequestFormProps {
+   protocolName: string;
+   baseApyLabel?: string;
+   onDismiss?: () => void;
+   onSuccess?: (message: string) => void;
+   onError?: (message: string) => void;
+   startExpanded?: boolean;
+}

package/src/cover-offer/utils/index.ts

@@ -0,0 +1,90 @@
+import { CoverAsset } from "@nexusmutual/sdk";
+import type { Opportunity } from "@turtleclub/hooks";
+import { BaseError, UserRejectedRequestError } from "viem";
+
+export function getOpportunityAPY(opportunity: Opportunity): number {
+   if (!opportunity.incentives || opportunity.incentives.length === 0) {
+      return 0;
+   }
+
+   return opportunity.incentives.reduce((total, incentive) => {
+      return total + (incentive.yield ?? 0);
+   }, 0);
+}
+
+/**
+ * Calculate the adjusted APY after subtracting the cover cost
+ * @param opportunityAPY - The original APY as a percentage (e.g., 5 for 5%)
+ * @param yearlyCostPerc - The yearly cost as a decimal (e.g., 0.025 for 2.5%)
+ * @returns The adjusted APY as a percentage
+ */
+export function calculateAdjustedAPY(
+   opportunityAPY: number,
+   yearlyCostPerc: number
+): number {
+   const coverCostPercentage = yearlyCostPerc * 100;
+   return Math.max(0, opportunityAPY - coverCostPercentage);
+}
+
+
+export function formatAPY(apy: number): string {
+   return `${apy.toFixed(2)}%`;
+}
+
+export function formatEthAmount(amount: string, decimals: number = 6): string {
+   const num = parseFloat(amount);
+   if (isNaN(num)) return "0";
+   return num.toFixed(decimals);
+}
+
+
+export const formatPurchaseError = (err: unknown): string => {
+   console.error("Purchase error:", err, typeof err);
+   if (err instanceof UserRejectedRequestError) {
+      return "Transaction cancelled";
+   }
+
+   if (err instanceof BaseError) {
+      const userRejected =
+         typeof err.walk === "function"
+            ? err.walk((error) => error instanceof UserRejectedRequestError)
+            : false;
+      if (userRejected) {
+         return "Transaction cancelled";
+      }
+
+      return err.shortMessage || err.message;
+   }
+
+   if (err instanceof Error) {
+      return err.message;
+   }
+
+   return "Failed to purchase cover";
+};
+
+
+
+const SECS_IN_DAY = 24 * 60 * 60;
+
+export function parseCoverTiming(startSec: number, periodSec: number, gracePeriodSec: number = 0) {
+   const expiresSec = startSec + periodSec;
+   const graceEndsSec = expiresSec + gracePeriodSec;
+
+   return {
+      startDate: new Date(startSec * 1000),
+      expiresDate: new Date(expiresSec * 1000),
+      graceEndsDate: new Date(graceEndsSec * 1000),
+      periodDays: periodSec / SECS_IN_DAY,
+      graceDays: gracePeriodSec / SECS_IN_DAY,
+      expiresSec,
+      graceEndsSec,
+   };
+}
+
+export const TOKEN_SYMBOL_TO_COVER_ASSET: Record<string, CoverAsset> = {
+   ETH: CoverAsset.ETH,
+   DAI: CoverAsset.DAI,
+   USDC: CoverAsset.USDC,
+   cbBTC: CoverAsset.cbBTC,
+};

package/src/deposit/NativeDepositSection.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useState } from "react";
+import { Button, cn, SegmentControl, SlippageSelector, TurtleTooltip } from "@turtleclub/ui";
+import { InfoIcon } from "lucide-react";
+import {
+  useDepositFlow,
+  type Opportunity,
+  type TokenBalance,
+  type TransactionRequest,
+} from "@turtleclub/hooks";
+import { GeoCheckBlocker, SwapInputV3 } from "./components";
+import { RouteDetailsV2 } from "../route-details/route-details-v2";
+
+const DEFAULT_SLIPPAGE = 0.005; // 0.5%
+const SECONDS_IN_DAY = 86400;
+
+export interface NativeDepositSectionProps {
+  opportunity: Opportunity;
+  address: string | undefined;
+  distributorId: string;
+  balances: TokenBalance[];
+  isBalancesLoading?: boolean;
+  refetchBalances?: () => void;
+  executeTransaction: (tx: TransactionRequest) => Promise<string | undefined>;
+  onDepositSuccess?: () => void;
+  depositMode?: "native" | "route";
+  onDepositModeChange?: (mode: "native" | "route") => void;
+  /** Current wallet chain ID */
+  chainId?: number;
+  /** Function to switch chain */
+  switchChain?: (chainId: number) => Promise<void>;
+}
+
+export function NativeDepositSection({
+  opportunity,
+  address,
+  distributorId,
+  balances,
+  isBalancesLoading = false,
+  refetchBalances,
+  executeTransaction,
+  onDepositSuccess,
+  depositMode = "native",
+  onDepositModeChange,
+  chainId,
+  switchChain,
+}: NativeDepositSectionProps) {
+  const [slippage, setSlippage] = useState(DEFAULT_SLIPPAGE);
+
+  // Convert slippage percentage to basis points (0.005 -> 50 bps)
+  const slippageBps = Math.round(slippage * 10000);
+
+  const { selection, validation, deposit } = useDepositFlow({
+    opportunity,
+    userAddress: address,
+    distributorId,
+    balances,
+    executeTransaction,
+    onDepositSuccess,
+    refetchBalances,
+    slippageBps: depositMode === "route" ? slippageBps : undefined,
+    walletChainId: chainId,
+  });
+
+  const handleButtonClick = async () => {
+    if (validation.isWrongChain && validation.requiredChainId && switchChain) {
+      await switchChain(validation.requiredChainId);
+      return;
+    }
+    await deposit.execute();
+  };
+
+  // Only show loading state if we don't have balances yet (initial load)
+  // This prevents disabling the input during background refetches
+  const isInitialBalancesLoading = isBalancesLoading && balances.length === 0;
+
+  return (
+    <div className="space-y-3">
+      {onDepositModeChange ? (
+        <SegmentControl
+          value={depositMode === "native" ? "native" : "route"}
+          onChange={(value) => onDepositModeChange(value as "native" | "route")}
+          items={[
+            {
+              value: "native",
+              label: (
+                <span className="flex items-center gap-1.5">
+                  Direct Deposit
+                  <TurtleTooltip
+                    trigger={<InfoIcon className="size-3 opacity-60" />}
+                    content={
+                      <span className="p-2 block">
+                        Deposit directly using the vault's accepted tokens. Lower fees, faster
+                        execution.
+                      </span>
+                    }
+                  />
+                </span>
+              ),
+            },
+            {
+              value: "route",
+              label: (
+                <span className="flex items-center gap-1.5">
+                  Swap
+                  <TurtleTooltip
+                    trigger={<InfoIcon className="size-3 opacity-60" />}
+                    content={
+                      <span className="p-2 block">
+                        Deposit any token from the chain. Automatically swaps to the vault's deposit
+                        token.
+                      </span>
+                    }
+                  />
+                </span>
+              ),
+            },
+          ]}
+          variant="pill"
+          size="sm"
+          className="w-fit mt-4"
+        />
+      ) : (
+        <span className="flex items-center gap-1.5 text-sm">
+          Direct Deposit
+          <TurtleTooltip
+            trigger={<InfoIcon className="size-3 opacity-60" />}
+            content={
+              <span className="p-2 block">
+                Deposit directly using the vault's accepted tokens. Lower fees, faster execution.
+              </span>
+            }
+          />
+        </span>
+      )}
+
+      <SwapInputV3
+        value={selection.amount ?? ""}
+        balances={balances}
+        selectedTokenAddress={selection.selectedTokenAddress}
+        disabled={isInitialBalancesLoading}
+        isWalletConnected={!!address}
+        onChange={selection.setAmount}
+        onMaxClick={selection.handleMaxClick}
+        onTokenChange={selection.setSelectedTokenAddress}
+        showBalance={true}
+        className={cn(
+          "border border-border p-5",
+          validation.hasInsufficientBalance && "border-destructive/50",
+        )}
+      />
+
+      {depositMode === "route" && (
+        <SlippageSelector value={slippage} onChange={setSlippage} className="px-2" />
+      )}
+
+      {deposit.metadata && (
+        <RouteDetailsV2
+          metadata={deposit.metadata}
+          showApprove={deposit.hasApprove}
+          approveAmount={selection.amount}
+        />
+      )}
+
+      {deposit.error && <p className="text-destructive text-sm">{deposit.error.message}</p>}
+
+      <GeoCheckBlocker>
+        <Button
+          onClick={handleButtonClick}
+          disabled={!validation.canDeposit && !validation.isWrongChain}
+          className="w-full"
+        >
+          {validation.buttonText}
+        </Button>
+      </GeoCheckBlocker>
+
+      {validation.validationMessage && validation.hasInsufficientBalance && (
+        <p className="text-destructive text-xs">{validation.validationMessage}</p>
+      )}
+
+      {/* {(validation.depositFee !== null ||
+        validation.performanceFee !== null ||
+        validation.withdrawalCooldownSecs !== null) && (
+        <div className="text-muted-foreground text-xs space-y-1">
+          {validation.depositFee !== null && validation.depositFee > 0 && (
+            <p>Deposit fee: {validation.depositFee}%</p>
+          )}
+          {validation.performanceFee !== null && validation.performanceFee > 0 && (
+            <p>Performance fee: {validation.performanceFee}%</p>
+          )}
+          {validation.withdrawalCooldownSecs !== null && validation.withdrawalCooldownSecs > 0 && (
+            <p>Withdrawal cooldown: {Math.floor(validation.withdrawalCooldownSecs / SECONDS_IN_DAY)} days</p>
+          )}
+        </div>
+      )} */}
+    </div>
+  );
+}

package/src/deposit/TemporalWrapper.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import {
+  useGetOnChainBalance,
+  useBalance,
+  filterExcludedTokens,
+  type Opportunity,
+  type TokenBalance,
+  type TransactionRequest,
+} from "@turtleclub/hooks";
+import { NativeDepositSection } from "./NativeDepositSection";
+
+export type DepositMode = "native" | "route";
+
+export interface TemporalWrapperProps {
+  opportunity: Opportunity;
+  address: string | undefined;
+  distributorId: string;
+  executeTransaction: (tx: TransactionRequest) => Promise<string | undefined>;
+  onDepositSuccess?: () => void;
+  /** Current wallet chain ID */
+  chainId?: number;
+  /** Function to switch chain */
+  switchChain?: (chainId: number) => Promise<void>;
+  /** Initial deposit mode */
+  initialDepositMode?: DepositMode;
+  /** Whether to show the deposit mode selector (native/swap) */
+  showDepositModeSelector?: boolean;
+}
+
+function sortByBalance(balances: TokenBalance[]): TokenBalance[] {
+  return [...balances].sort((a, b) => {
+    const aValue = BigInt(a.amount);
+    const bValue = BigInt(b.amount);
+    if (bValue > aValue) return 1;
+    if (bValue < aValue) return -1;
+    return 0;
+  });
+}
+
+/**
+ * TemporalWrapper - A standalone wrapper for NativeDepositSection
+ *
+ * Includes all balance fetching logic and deposit mode management.
+ * Use this when you only need deposit functionality without withdraw.
+ */
+export function TemporalWrapper({
+  opportunity,
+  address,
+  distributorId,
+  executeTransaction,
+  onDepositSuccess,
+  chainId,
+  switchChain,
+  initialDepositMode = "native",
+  showDepositModeSelector = true,
+}: TemporalWrapperProps) {
+  const [depositMode, setDepositMode] = useState<DepositMode>(initialDepositMode);
+
+  const opportunityChainId = Number(opportunity.receiptToken.chain.chainId);
+
+  // Use on-chain balances for native mode, portfolio for route mode
+  const useOnChainBalances = depositMode === "native";
+
+  // Fetch deposit token balances (on-chain)
+  const {
+    balances: depositTokenBalances,
+    isLoading: isDepositBalancesLoading,
+    refetch: refetchDepositBalances,
+  } = useGetOnChainBalance({
+    tokens: opportunity.depositTokens,
+    chainId: opportunityChainId,
+    address,
+    enabled: !!address,
+  });
+
+  // Fetch all balances for route/swap mode
+  const {
+    balances: allChainBalances,
+    isLoading: isAllChainBalancesLoading,
+    refetchAll: refetchAllBalances,
+  } = useBalance({
+    address,
+    chainIds: [opportunityChainId],
+    depositOpportunity: opportunity,
+  });
+
+  const rawBalances = useMemo(() => {
+    if (useOnChainBalances) {
+      if (depositTokenBalances.length > 0) {
+        return depositTokenBalances;
+      }
+      // Fallback: create TokenBalance entries from deposit tokens with 0 balance
+      return opportunity.depositTokens.map((token) => ({
+        token,
+        amount: "0",
+        source: "onchain" as const,
+      }));
+    }
+    return allChainBalances;
+  }, [useOnChainBalances, depositTokenBalances, allChainBalances, opportunity.depositTokens]);
+
+  const isBalancesLoading = useOnChainBalances
+    ? isDepositBalancesLoading
+    : isAllChainBalancesLoading;
+
+  const refetchBalances = useOnChainBalances
+    ? refetchDepositBalances
+    : refetchAllBalances;
+
+  const balances = useMemo(() => {
+    let filtered = rawBalances;
+
+    // Filter by opportunity chain (only for route mode)
+    if (!useOnChainBalances && opportunityChainId) {
+      filtered = filtered.filter((b) => {
+        const tokenChainId = Number(b.token.chain?.chainId);
+        return tokenChainId === opportunityChainId;
+      });
+    }
+
+    // Filter zero balances (only for route mode)
+    if (!useOnChainBalances) {
+      filtered = filtered.filter((b) => BigInt(b.amount) > 0n);
+    }
+
+    // Filter excluded tokens
+    filtered = filterExcludedTokens(filtered);
+
+    return sortByBalance(filtered);
+  }, [rawBalances, useOnChainBalances, opportunityChainId]);
+
+  // Determine if we should show the mode selector
+  const onDepositModeChange = showDepositModeSelector && opportunity.earnEnabled
+    ? setDepositMode
+    : undefined;
+
+  return (
+    <NativeDepositSection
+      opportunity={opportunity}
+      address={address}
+      distributorId={distributorId}
+      balances={balances}
+      isBalancesLoading={isBalancesLoading}
+      refetchBalances={refetchBalances}
+      executeTransaction={executeTransaction}
+      onDepositSuccess={onDepositSuccess}
+      depositMode={depositMode}
+      onDepositModeChange={onDepositModeChange}
+      chainId={chainId}
+      switchChain={switchChain}
+    />
+  );
+}

package/src/{components → deposit/components}/balances-data-table.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo } from "react";
 import type { ColumnDef } from "@tanstack/react-table";
 import { DataTable } from "@turtleclub/ui";
@@ -9,6 +11,8 @@ export interface BalancesDataTableProps {
   isLoading?: boolean;
   onBalanceSelect?: (balance: TokenBalance) => void;
   emptyStateMessage?: string;
+  /** ScrollArea height - passed to DataTable size prop */
+  size?: string;
 }
 
 export function BalancesDataTable({
@@ -16,6 +20,7 @@ export function BalancesDataTable({
   isLoading = false,
   onBalanceSelect,
   emptyStateMessage = "No balances found",
+  size,
 }: BalancesDataTableProps) {
   const columns = useMemo<ColumnDef<TokenBalance>[]>(
     () => [
@@ -80,6 +85,7 @@ export function BalancesDataTable({
       onRowClick={onBalanceSelect}
       emptyState={emptyState}
       className="w-full"
+      size={size}
     />
   );
 }

package/src/deposit/components/index.ts

@@ -1,2 +1,5 @@
+export { BalancesDataTable, type BalancesDataTableProps } from "./balances-data-table";
 export { ConfirmButton } from "./confirm-button";
 export { GeoCheckBlocker } from "./geo-check-blocker";
+export { SwapInputV3, type SwapInputV3Props } from "./swap-input-v3";
+export { TokenSelectorV3 } from "./token-selector-v3";