@turtleclub/opportunities 0.1.0-beta.56 → 0.1.0-beta.58

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 };

package/src/deposit/components/token-selector-v3.tsx

@@ -0,0 +1,122 @@
+"use client";
+import * as React from "react";
+import { useState, useEffect, useMemo } from "react";
+import { ChevronDownIcon } from "lucide-react";
+import {
+  cn,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@turtleclub/ui";
+import type { TokenBalance } from "@turtleclub/hooks";
+import { BalancesDataTable } from "./balances-data-table";
+
+interface TokenSelectorV3Props {
+  balances: TokenBalance[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  size?: "xs" | "sm" | "default";
+}
+
+/**
+ * TokenSelectorV3 - Opens a dialog with BalancesDataTable for selection
+ */
+const TokenSelectorV3 = ({
+  balances,
+  value,
+  onValueChange,
+  placeholder = "Select token",
+  disabled,
+  className,
+  size = "default",
+}: TokenSelectorV3Props) => {
+  const [open, setOpen] = useState(false);
+
+  // Auto-select first token if no value is provided and balances exist
+  const effectiveValue =
+    value || (balances.length > 0 ? balances[0].token.address : undefined);
+
+  // Find the selected balance
+  const selectedBalance = useMemo(
+    () => balances.find((b) => b.token.address === effectiveValue),
+    [balances, effectiveValue]
+  );
+
+  // Auto-select first token on mount
+  useEffect(() => {
+    if (!value && balances.length > 0 && onValueChange) {
+      onValueChange(balances[0].token.address);
+    }
+  }, [value, balances, onValueChange]);
+
+  const handleSelect = (balance: TokenBalance) => {
+    onValueChange?.(balance.token.address);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => !disabled && setOpen(true)}
+        disabled={disabled}
+        className={cn(
+          "bg-muted hover:bg-muted/80 flex items-center gap-1.5 rounded-full px-3 py-2 font-medium transition-colors",
+          "focus:ring-primary/20 focus:ring-2 focus:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          size === "xs" && "px-2 py-1 text-xs",
+          size === "sm" && "px-2.5 py-1.5 text-sm",
+          size === "default" && "px-3 py-2 text-sm",
+          className
+        )}
+      >
+        {selectedBalance ? (
+          <>
+            {selectedBalance.token.logoUrl && (
+              <img
+                src={selectedBalance.token.logoUrl}
+                alt={selectedBalance.token.symbol}
+                className={cn(
+                  "rounded-full",
+                  size === "xs" && "size-3",
+                  size === "sm" && "size-4",
+                  size === "default" && "size-4"
+                )}
+              />
+            )}
+            <span>{selectedBalance.token.symbol}</span>
+          </>
+        ) : (
+          <span className="text-muted-foreground">{placeholder}</span>
+        )}
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </button>
+
+      {/* Token Selection Dialog */}
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-md p-0">
+          <DialogHeader className="px-4 pt-4">
+            <DialogTitle>Select Token</DialogTitle>
+          </DialogHeader>
+
+          {/* BalancesDataTable with native scroll */}
+          <div className="px-4 pb-4">
+            <BalancesDataTable
+              balances={balances}
+              onBalanceSelect={handleSelect}
+              emptyStateMessage="No tokens available"
+              size="450px"
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export { TokenSelectorV3 };

package/src/deposit/index.ts

@@ -1 +1,5 @@
 export * from "./components";
+export { NativeDepositSection } from "./NativeDepositSection";
+export type { NativeDepositSectionProps } from "./NativeDepositSection";
+export { TemporalWrapper } from "./TemporalWrapper";
+export type { TemporalWrapperProps, DepositMode } from "./TemporalWrapper";

package/src/index.ts

@@ -4,6 +4,12 @@ export * from "./components";
 // Deposit Components
 export * from "./deposit";
 
+// Withdraw Components
+export * from "./withdraw";
+
+// Opportunity Actions
+export * from "./opportunity-actions";
+
 // Transaction Status
 export * from "./transaction-status";
 

package/src/opportunity-actions/OpportunityActions.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { SegmentControl, TurtleTooltip } from "@turtleclub/ui";
+import {
+  useGetOnChainBalance,
+  useBalance,
+  filterExcludedTokens,
+  type Opportunity,
+  type TokenBalance,
+  type TransactionRequest,
+} from "@turtleclub/hooks";
+import { NativeDepositSection } from "../deposit/NativeDepositSection";
+import { NativeWithdrawSection } from "../withdraw/NativeWithdrawSection";
+
+export interface OpportunityActionsProps {
+  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>;
+}
+
+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;
+  });
+}
+
+export function OpportunityActions({
+  opportunity,
+  address,
+  distributorId,
+  executeTransaction,
+  onDepositSuccess,
+  chainId,
+  switchChain,
+}: OpportunityActionsProps) {
+  const [actionMode, setActionMode] = useState<"deposit" | "withdraw">("deposit");
+  const [depositMode, setDepositMode] = useState<"native" | "route">("native");
+
+  const opportunityChainId = Number(opportunity.receiptToken.chain.chainId)
+
+  // Use on-chain balances when: direct deposit OR withdraw
+  const useOnChainBalances = depositMode === "native" || actionMode === "withdraw";
+
+  // Always fetch both balance sources to avoid loading states when switching modes
+  const {
+    balances: depositTokenBalances,
+    isLoading: isDepositBalancesLoading,
+    refetch: refetchDepositBalances,
+  } = useGetOnChainBalance({
+    tokens: opportunity.depositTokens,
+    chainId: opportunityChainId,
+    address,
+    enabled: !!address,
+  });
+
+  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
+    if (!useOnChainBalances && opportunityChainId) {
+      filtered = filtered.filter((b) => {
+        const tokenChainId = Number(b.token.chain?.chainId);
+        return tokenChainId === opportunityChainId;
+      });
+    }
+
+    // Filter zero balances (only for all-chain mode)
+    if (!useOnChainBalances) {
+      filtered = filtered.filter((b) => BigInt(b.amount) > 0n);
+    }
+
+    // Filter excluded tokens
+    filtered = filterExcludedTokens(filtered);
+
+    return sortByBalance(filtered);
+  }, [rawBalances, useOnChainBalances, opportunityChainId]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <SegmentControl
+        value={actionMode}
+        onChange={(value) => setActionMode(value as "deposit" | "withdraw")}
+        items={[
+          {
+            value: "deposit",
+            label: opportunity.depositDisabled ? (
+              <TurtleTooltip
+                trigger={<span>Deposit</span>}
+                content={<span className="block p-2">Deposits are disabled for this opportunity</span>}
+              />
+            ) : (
+              "Deposit"
+            ),
+            disabled: opportunity.depositDisabled,
+          },
+          {
+            value: "withdraw",
+            label: opportunity.withdrawalDisabled ? (
+              <TurtleTooltip
+                trigger={<span>Withdraw</span>}
+                content={<span className="block p-2">Withdrawals are disabled for this opportunity</span>}
+              />
+            ) : (
+              "Withdraw"
+            ),
+            disabled: opportunity.withdrawalDisabled,
+          },
+        ]}
+        variant="segment"
+
+      />
+
+      {actionMode === "deposit" ? (
+        <NativeDepositSection
+          opportunity={opportunity}
+          address={address}
+          distributorId={distributorId}
+          balances={balances}
+          isBalancesLoading={isBalancesLoading}
+          refetchBalances={refetchBalances}
+          executeTransaction={executeTransaction}
+          onDepositSuccess={onDepositSuccess}
+          depositMode={depositMode}
+          onDepositModeChange={opportunity.earnEnabled ? setDepositMode : undefined}
+          chainId={chainId}
+          switchChain={switchChain}
+        />
+      ) : (
+        <NativeWithdrawSection
+          opportunity={opportunity}
+          address={address}
+          balances={balances}
+          isBalancesLoading={isBalancesLoading}
+        />
+      )}
+    </div>
+  );
+}

package/src/opportunity-actions/index.ts

@@ -0,0 +1 @@
+export { OpportunityActions, type OpportunityActionsProps } from "./OpportunityActions";

package/src/opportunity-table/components/opportunities-table.tsx

@@ -1,6 +1,6 @@
 import type { Opportunity, TokenBalance } from "@turtleclub/hooks";
 import { APIStatus, DataTable } from "@turtleclub/ui";
-import type { ColumnDef } from "@tanstack/react-table";
+import type { ColumnDef, Row } from "@tanstack/react-table";
 import { formatCurrency } from "@turtleclub/utils";
 import { getTotalYield } from "../hooks/useTotalYield";
 import { calculateNetAPR } from "../utils/calculateNetAPR";
@@ -145,7 +145,7 @@ export function OpportunitiesTable({
     },
     {
       id: "yourTvl",
-      accessorKey: "yourTvl",
+      accessorFn: (row) => userTvlByOpportunity[row.id || ""] || 0,
       header: () => <div className="flex w-full justify-end">Your TVL</div>,
       cell: ({ row }) => {
         const yourTvl = userTvlByOpportunity[row.original.id || ""] || 0;
@@ -156,7 +156,7 @@ export function OpportunitiesTable({
         );
       },
       enableSorting: true,
-      sortingFn: (rowA, rowB) => {
+      sortingFn: (rowA: Row<Opportunity>, rowB: Row<Opportunity>) => {
         const a = userTvlByOpportunity[rowA.original.id || ""] || 0;
         const b = userTvlByOpportunity[rowB.original.id || ""] || 0;
         return a - b;
@@ -180,7 +180,8 @@ export function OpportunitiesTable({
       enableSorting: true,
     },
     {
-      accessorKey: "totalYield",
+      id: "totalYield",
+      accessorFn: (row) => calculateNetAPR(row.incentives, row.vaultConfig ?? undefined),
       header: () => <div className="flex w-full justify-end">Est. APR</div>,
       cell: ({ row }) => (
         <div className="flex flex-row-reverse">
@@ -192,7 +193,7 @@ export function OpportunitiesTable({
         </div>
       ),
       enableSorting: true,
-      sortingFn: (rowA, rowB) => {
+      sortingFn: (rowA: Row<Opportunity>, rowB: Row<Opportunity>) => {
         const a = calculateNetAPR(rowA.original.incentives, rowA.original.vaultConfig ?? undefined);
         const b = calculateNetAPR(rowB.original.incentives, rowB.original.vaultConfig ?? undefined);
         return a - b;

package/src/route-details/index.ts

@@ -1,2 +1,8 @@
+// V1 - Legacy (uses TokenStep from hooks)
 export { RouteDetails } from "./route-details";
 export type { TokenStep } from "./route-details";
+
+// V2 - New API structure (uses RouteMetadata)
+export { RouteDetailsV2 } from "./route-details-v2";
+export type { RouteDetailsV2Props } from "./route-details-v2";
+export type { RouteMetadata, RouteStep, RouteToken } from "./types";