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

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,220 @@
+"use client";
+
+import { useState, useEffect } 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;
+
+/** Returns true if error is expected user behavior (not a real error to show) */
+function isUserRejectedError(error: Error | null): boolean {
+  if (!error) return false;
+  const message = error.message.toLowerCase();
+  return (
+    message.includes("user rejected") ||
+    message.includes("user denied") ||
+    message.includes("rejected the request") ||
+    message.includes("user cancelled") ||
+    message.includes("user canceled")
+  );
+}
+
+export interface NativeDepositSectionProps {
+  opportunity: Opportunity;
+  address: string | undefined;
+  distributorId: string;
+  balances: TokenBalance[];
+  isBalancesLoading?: boolean;
+  refetchBalances?: () => void;
+  /**
+   * Execute a transaction and wait for receipt confirmation.
+   * IMPORTANT: This function MUST wait for the transaction receipt before returning.
+   * The returned hash should only be provided after the transaction is confirmed on-chain.
+   */
+  executeTransactionAndWait: (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,
+  executeTransactionAndWait,
+  onDepositSuccess,
+  depositMode = "native",
+  onDepositModeChange,
+  chainId,
+  switchChain,
+}: NativeDepositSectionProps) {
+  const [slippage, setSlippage] = useState(DEFAULT_SLIPPAGE);
+
+  // Secondary market always uses swap mode and hides the mode selector
+  const isSecondaryOnly = opportunity.vaultConfig?.secondaryOnly === true;
+  const effectiveDepositMode = isSecondaryOnly ? "route" : depositMode;
+  const effectiveOnDepositModeChange = isSecondaryOnly ? undefined : onDepositModeChange;
+
+  // 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,
+    executeTransactionAndWait,
+    onDepositSuccess,
+    refetchBalances,
+    slippageBps: effectiveDepositMode === "route" ? slippageBps : undefined,
+    walletChainId: chainId,
+  });
+
+  // Log deposit errors (moved from render to avoid side-effects)
+  useEffect(() => {
+    if (deposit.error && !isUserRejectedError(deposit.error)) {
+      console.error("[NativeDepositSection] Deposit error:", deposit.error);
+    }
+  }, [deposit.error]);
+
+  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">
+      {/* Mode selector: only show when mode can be changed */}
+      {effectiveOnDepositModeChange && (
+        <SegmentControl
+          value={effectiveDepositMode === "native" ? "native" : "route"}
+          onChange={(value) => effectiveOnDepositModeChange(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"
+        />
+      )}
+
+      <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"
+        )}
+      />
+
+      {effectiveDepositMode === "route" && (
+        <SlippageSelector value={slippage} onChange={setSlippage} className="px-2" />
+      )}
+
+      {deposit.metadata && (
+        <RouteDetailsV2
+          metadata={deposit.metadata}
+          showApprove={deposit.hasApprove}
+          approveAmount={selection.amount}
+        />
+      )}
+      {/* Error messages */}
+      {deposit.error && !isUserRejectedError(deposit.error) && (
+        <p className="text-destructive text-sm">Something went wrong. Please try again.</p>
+      )}
+
+      {validation.validationMessage && validation.hasInsufficientBalance && (
+        <p className="text-destructive text-xs">{validation.validationMessage}</p>
+      )}
+
+      <GeoCheckBlocker>
+        <Button
+          onClick={handleButtonClick}
+          disabled={!validation.canDeposit && !validation.isWrongChain}
+          className="w-full"
+        >
+          {validation.buttonText}
+        </Button>
+      </GeoCheckBlocker>
+
+      {/* {(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,82 @@
+"use client";
+
+import { useState } from "react";
+import {
+  useActionsDefaultParams,
+  type Opportunity,
+  type TransactionRequest,
+} from "@turtleclub/hooks";
+import { NativeDepositSection } from "./NativeDepositSection";
+
+export type DepositMode = "native" | "route";
+
+export interface TemporalWrapperProps {
+  opportunity: Opportunity;
+  address: string | undefined;
+  distributorId: string;
+  /**
+   * Execute a transaction and wait for receipt confirmation.
+   * IMPORTANT: This function MUST wait for the transaction receipt before returning.
+   * The returned hash should only be provided after the transaction is confirmed on-chain.
+   */
+  executeTransactionAndWait: (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;
+}
+
+/**
+ * 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,
+  executeTransactionAndWait,
+  onDepositSuccess,
+  chainId,
+  switchChain,
+  initialDepositMode = "native",
+  showDepositModeSelector = true,
+}: TemporalWrapperProps) {
+  const [depositMode, setDepositMode] = useState<DepositMode>(initialDepositMode);
+
+  // Hook handles isSecondaryOnly internally for balance fetching
+  const { balances, isBalancesLoading, refetchBalances } = useActionsDefaultParams({
+    opportunity,
+    address,
+    depositMode,
+  });
+
+  // Determine if we should show the mode selector
+  // NativeDepositSection handles isSecondaryOnly internally for UI
+  const onDepositModeChange = showDepositModeSelector && opportunity.earnEnabled
+    ? setDepositMode
+    : undefined;
+
+  return (
+    <NativeDepositSection
+      opportunity={opportunity}
+      address={address}
+      distributorId={distributorId}
+      balances={balances}
+      isBalancesLoading={isBalancesLoading}
+      refetchBalances={refetchBalances}
+      executeTransactionAndWait={executeTransactionAndWait}
+      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";

package/src/deposit/components/swap-input-v3.tsx

@@ -0,0 +1,194 @@
+"use client";
+import * as React from "react";
+import { useMemo } from "react";
+import { formatUnits } from "viem";
+import { cn, Card, Input, Chip } from "@turtleclub/ui";
+import type { TokenBalance } from "@turtleclub/hooks";
+import { TokenSelectorV3 } from "./token-selector-v3";
+
+const MIN_DISPLAY_AMOUNT = 0.0001;
+const MIN_USD_DISPLAY_AMOUNT = 0.01;
+interface SwapInputV3Props extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Current input value */
+  value?: string;
+  /** Token balances to display in selector */
+  balances: TokenBalance[];
+  /** Currently selected token address */
+  selectedTokenAddress?: string;
+  /** Placeholder text for input */
+  placeholder?: string;
+  /** Disable input and selector */
+  disabled?: boolean;
+  /** Whether wallet is connected */
+  isWalletConnected?: boolean;
+  /** Called when input value changes */
+  onChange?: (value: string) => void;
+  /** Called when MAX button is clicked */
+  onMaxClick?: () => void;
+  /** Called when token selection changes */
+  onTokenChange?: (tokenAddress: string) => void;
+  /** Show balance info below input */
+  showBalance?: boolean;
+}
+
+/**
+ * SwapInputV3 - Uses TokenSelectorV3 with BalancesDataTable
+ */
+const SwapInputV3 = React.forwardRef<HTMLDivElement, SwapInputV3Props>(
+  (
+    {
+      className,
+      value = "",
+      balances,
+      selectedTokenAddress,
+      placeholder = "0",
+      disabled = false,
+      isWalletConnected = true,
+      onChange,
+      onMaxClick,
+      onTokenChange,
+      showBalance = true,
+      ...props
+    },
+    ref,
+  ) => {
+    // Find the selected balance
+    const selectedBalance = useMemo(
+      () => balances.find((b) => b.token.address === selectedTokenAddress) ?? null,
+      [balances, selectedTokenAddress]
+    );
+
+    // Format balance for display
+    const formattedBalance = useMemo(() => {
+      if (!selectedBalance) return undefined;
+      const formatted = formatUnits(BigInt(selectedBalance.amount), selectedBalance.token.decimals);
+      const num = parseFloat(formatted);
+      if (num === 0) return "0";
+      if (num < MIN_DISPLAY_AMOUNT) return `<${MIN_DISPLAY_AMOUNT}`;
+      if (num < 1) return num.toFixed(4);
+      if (num < 1000) return num.toFixed(2);
+      return num.toLocaleString(undefined, { maximumFractionDigits: 2 });
+    }, [selectedBalance]);
+
+    // Calculate USD value of input amount
+    const usdValue = useMemo(() => {
+      if (!value || !selectedBalance?.token.priceUsd) return undefined;
+      const amount = parseFloat(value);
+      if (isNaN(amount) || amount === 0) return undefined;
+      const usd = amount * selectedBalance.token.priceUsd;
+      if (usd < MIN_USD_DISPLAY_AMOUNT) return `<$${MIN_USD_DISPLAY_AMOUNT}`;
+      return `$${usd.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+    }, [value, selectedBalance]);
+
+    // Check if input amount exceeds balance
+    const hasInsufficientBalance = useMemo(() => {
+      if (!value || !selectedBalance) return false;
+      try {
+        const inputAmount = parseFloat(value);
+        const balance = parseFloat(formatUnits(BigInt(selectedBalance.amount), selectedBalance.token.decimals));
+        return inputAmount > balance;
+      } catch {
+        return false;
+      }
+    }, [value, selectedBalance]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      // Allow only numbers and decimal point
+      if (/^\d*\.?\d*$/.test(newValue)) {
+        onChange?.(newValue);
+      }
+    };
+
+    // If wallet is not connected, show connection message
+    if (!isWalletConnected) {
+      return (
+        <Card
+          ref={ref}
+          className={cn("flex items-center justify-center py-8", className)}
+          {...props}
+        >
+          <div className="text-center">
+            <p className="text-muted-foreground text-sm">
+              Connect your wallet to continue
+            </p>
+          </div>
+        </Card>
+      );
+    }
+
+    return (
+      <Card
+        variant="shadow"
+        ref={ref}
+        className={cn("space-y-3", disabled && "opacity-50", className)}
+        {...props}
+      >
+        {/* Main input row */}
+        <div className="flex items-center gap-6">
+          {/* Amount input */}
+          <div className="flex-1">
+            <Input
+              variant="nofocus"
+              value={value}
+              onChange={handleInputChange}
+              placeholder={placeholder}
+              disabled={disabled}
+              className="text-foreground/90 h-auto border-none bg-transparent p-0 text-3xl font-[400] shadow-none focus:ring-0"
+            />
+          </div>
+
+          {/* Token selector */}
+          <TokenSelectorV3
+            balances={balances}
+            value={selectedTokenAddress}
+            onValueChange={onTokenChange}
+            disabled={disabled}
+            placeholder="Select token"
+            size="sm"
+          />
+        </div>
+
+        {/* Bottom row: USD value and balance with MAX */}
+        {showBalance && (
+          <div className="text-muted-foreground flex items-center justify-between text-sm">
+            <div>
+              {usdValue ? (
+                <span>≈ {usdValue}</span>
+              ) : value && hasInsufficientBalance ? (
+                <span className="text-destructive/50">
+                  Insufficient balance
+                </span>
+              ) : null}
+            </div>
+            <div className="flex items-center gap-2">
+              {formattedBalance !== undefined && (
+                <span className="text-sm">
+                  Balance: {formattedBalance} {selectedBalance?.token.symbol || ""}
+                </span>
+              )}
+              {onMaxClick && (
+                <Chip
+                  variant="default"
+                  size="xs"
+                  onClick={onMaxClick}
+                  className={cn(
+                    "hover:bg-primary hover:text-primary-foreground h-5 cursor-pointer px-2 py-0.5 text-xs transition-colors",
+                    disabled && "cursor-not-allowed opacity-50",
+                  )}
+                >
+                  MAX
+                </Chip>
+              )}
+            </div>
+          </div>
+        )}
+      </Card>
+    );
+  },
+);
+
+SwapInputV3.displayName = "SwapInputV3";
+
+export { SwapInputV3 };
+export type { SwapInputV3Props };