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

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,9 +4,18 @@ 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";
 
+// Cover Offer
+export * from "./cover-offer";
+
 // Opportunity Table
 export * from "./opportunity-table/components";
 

package/src/opportunity-actions/OpportunityActions.tsx

@@ -0,0 +1,191 @@
+"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;
+  /**
+   * 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>;
+}
+
+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,
+  executeTransactionAndWait,
+  onDepositSuccess,
+  chainId,
+  switchChain,
+}: OpportunityActionsProps) {
+  const [actionMode, setActionMode] = useState<"deposit" | "withdraw">("deposit");
+  const [depositMode, setDepositMode] = useState<"native" | "route">("native");
+
+  const isSecondaryOnly = opportunity.vaultConfig?.secondaryOnly === true;
+
+  // For secondary market, always use swap mode
+  const effectiveDepositMode = isSecondaryOnly ? "route" : depositMode;
+  const opportunityChainId = Number(opportunity.receiptToken.chain.chainId)
+
+  // Use on-chain balances when: direct deposit OR withdraw
+  const useOnChainBalances = effectiveDepositMode === "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>{isSecondaryOnly ? "Buy" : "Deposit"}</span>}
+                content={<span className="block p-2">{isSecondaryOnly ? "Purchases are" : "Deposits are"} disabled for this opportunity</span>}
+              />
+            ) : (
+              isSecondaryOnly ? "Buy" : "Deposit"
+            ),
+            disabled: opportunity.depositDisabled,
+          },
+          {
+            value: "withdraw",
+            label: opportunity.withdrawalDisabled ? (
+              <TurtleTooltip
+                trigger={<span>{isSecondaryOnly ? "Sell" : "Withdraw"}</span>}
+                content={<span className="block p-2">{isSecondaryOnly ? "Sales are" : "Withdrawals are"} disabled for this opportunity</span>}
+              />
+            ) : (
+              isSecondaryOnly ? "Sell" : "Withdraw"
+            ),
+            disabled: opportunity.withdrawalDisabled,
+          },
+        ]}
+        variant="segment"
+
+      />
+
+      {actionMode === "deposit" ? (
+        <NativeDepositSection
+          opportunity={opportunity}
+          address={address}
+          distributorId={distributorId}
+          balances={balances}
+          isBalancesLoading={isBalancesLoading}
+          refetchBalances={refetchBalances}
+          executeTransactionAndWait={executeTransactionAndWait}
+          onDepositSuccess={onDepositSuccess}
+          depositMode={effectiveDepositMode}
+          onDepositModeChange={opportunity.earnEnabled && !isSecondaryOnly ? 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";

package/src/route-details/route-details-v2.tsx

@@ -0,0 +1,137 @@
+import { Card, CardContent } from "@turtleclub/ui";
+import { formatBalance } from "@turtleclub/utils";
+import { formatUnits } from "viem";
+import { ArrowRight } from "lucide-react";
+import type { RouteMetadata, RouteStep } from "./types";
+
+export interface RouteDetailsV2Props {
+  metadata: RouteMetadata;
+  showApprove?: boolean;
+  approveAmount?: string;
+  className?: string;
+}
+
+const MIN_FORMAT_THRESHOLD = 0.0001;
+const SMALL_NUMBER_DECIMALS = 4;
+
+function formatSmallNumber(val: string | number): string {
+  const num = typeof val === "string" ? parseFloat(val) : val;
+  if (isNaN(num) || num === 0) return "0";
+  if (num < MIN_FORMAT_THRESHOLD) return `<${MIN_FORMAT_THRESHOLD}`;
+  return formatBalance(num, SMALL_NUMBER_DECIMALS);
+}
+
+function TokenIcon({ token }: { token: RouteStep["from"] }) {
+  if (token.logoUrl) {
+    return (
+      <div className="flex h-7 w-7 max-h-7 max-w-7 shrink-0 items-center justify-center overflow-hidden rounded-full">
+        <img
+          src={token.logoUrl}
+          alt={token.symbol}
+          className="h-5 w-5 max-h-5 max-w-5 rounded-full object-cover"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-7 w-7 max-h-7 max-w-7 shrink-0 items-center justify-center rounded-full">
+      <div className="bg-neutral-alpha-10 flex h-5 w-5 items-center justify-center rounded-full">
+        <span className="text-muted-foreground text-[10px] font-medium">
+          {token.symbol?.charAt(0).toUpperCase() || "?"}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function StepCard({
+  label,
+  fromToken,
+  toToken,
+  amount,
+}: {
+  label: string;
+  fromToken: RouteStep["from"];
+  toToken?: RouteStep["to"];
+  amount?: string;
+}) {
+  return (
+    <Card variant="border" className="h-[72px] min-w-[120px] flex-1">
+      <CardContent className="flex h-full flex-col justify-between px-5 py-2.5">
+        <span className="text-muted-foreground text-xs">{label}</span>
+        <div className="flex items-center gap-1.5">
+          <TokenIcon token={fromToken} />
+          <span className="text-sm font-medium">
+            {amount ? `${formatSmallNumber(amount)} ${fromToken.symbol}` : fromToken.symbol || "?"}
+          </span>
+          {toToken && (
+            <>
+              <ArrowRight className="text-muted-foreground size-3 shrink-0" />
+              <TokenIcon token={toToken} />
+              <span className="text-sm font-medium">{toToken.symbol || "?"}</span>
+            </>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/** Displays route details for routed deposits with provider info and step cards */
+export function RouteDetailsV2({ metadata, showApprove, approveAmount, className }: RouteDetailsV2Props) {
+  const { provider, providerImg, route, amountOut } = metadata;
+
+  if (!route || route.length === 0) {
+    return null;
+  }
+
+  const approveToken = route[0]?.from;
+  const outputToken = route[route.length - 1]?.to;
+
+  // Format amountOut using the output token's decimals
+  const formattedAmountOut =
+    amountOut && outputToken
+      ? formatSmallNumber(formatUnits(BigInt(amountOut), outputToken.decimals))
+      : null;
+
+  return (
+    <div className={className}>
+      <div className="mb-3 space-y-3 px-2 text-xs">
+        {formattedAmountOut && outputToken && (
+          <div className="flex items-center gap-1.5">
+            <span className="text-muted-foreground">You receive</span>
+            <span className="text-sm font-medium">
+              {formattedAmountOut} {outputToken.symbol}
+            </span>
+          </div>
+        )}
+        <div className="flex items-center ">
+          <span className="text-muted-foreground">Route powered by</span>
+          {providerImg ? (
+            <img src={providerImg} alt={provider} className="h-2 px-2" />
+          ) : (
+            <span className="text-sm font-medium capitalize">{provider}</span>
+          )}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2 sm:flex-row sm:overflow-x-auto">
+        {showApprove && approveToken && (
+          <StepCard label="Approve" fromToken={approveToken} amount={approveAmount} />
+        )}
+        {route.map((step, index) => {
+          const label = step.action.charAt(0).toUpperCase() + step.action.slice(1);
+          return (
+            <StepCard
+              key={`${step.action}-${step.from.address}-${index}`}
+              label={label}
+              fromToken={step.from}
+              toToken={step.to}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/route-details/route-details.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { Card, CardContent, LabelWithIcon, ScrollArea } from "@turtleclub/ui";
 import { ChevronsRight } from "lucide-react";
-import ensoLogo from "../images/enso.png";
 import { useMemo } from "react";
+
+const ENSO_LOGO_URL = "https://storage.googleapis.com/turtle-assets/partners/enso/enso.png";
 import type { TokenStep } from "@turtleclub/hooks";
 
 export type { TokenStep } from "@turtleclub/hooks";
@@ -38,7 +39,7 @@ export const RouteDetails = ({ value, className }: RouteDetailsProps) => {
       <div className="text-sm font-medium">Swap Route</div>
       <div className="mb-1 flex items-center gap-1 text-[10px]">
         <span className="text-sm opacity-50">Powered by</span>
-        <img src={ensoLogo} className="w-10" alt="Enso" />
+        <img src={ENSO_LOGO_URL} className="w-10" alt="Enso" />
       </div>
       {/* Route visualization */}
       <ScrollArea className="mt-2 rounded-md whitespace-nowrap">
@@ -69,7 +70,7 @@ export const RouteDetails = ({ value, className }: RouteDetailsProps) => {
                       )}
                     </LabelWithIcon>
 
-                    {step.type !== "approve" && (
+                    {step.type !== "approve" && step.out && (
                       <>
                         {/* Arrow between tokens */}
                         <ChevronsRight className="text-primary size-4 shrink-0" />
@@ -82,7 +83,7 @@ export const RouteDetails = ({ value, className }: RouteDetailsProps) => {
                         >
                           {!isLongRoute && (
                             <span className="hidden gap-2 sm:block">
-                              {step.in.symbol}
+                              {step.out.symbol}
                             </span>
                           )}
                         </LabelWithIcon>

package/src/route-details/types.ts

@@ -0,0 +1,7 @@
+// Re-export types from hooks package (source of truth from Zod schemas)
+// Using earn-actions types for route metadata display
+export type {
+  ActionRouteToken as RouteToken,
+  ActionRouteStep as RouteStep,
+  RouteMetadata,
+} from "@turtleclub/hooks";

package/src/transaction-status/hooks/useTransactionQueue.ts

@@ -32,7 +32,7 @@ interface UseTransactionQueueProps {
   earnRoute: EarnRouteResponse | null;
   userAddress?: string;
   chainId?: number;
-  sendTransaction: (transaction: StepTx) => Promise<`0x${string}` | undefined>;
+  sendTransaction: (transaction: StepTx & { chainId?: number }) => Promise<`0x${string}` | undefined>;
   onError?: (error: Error) => void;
   onSuccess?: () => void;
 }

package/src/withdraw/NativeWithdrawSection.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@turtleclub/ui";
+import type { Opportunity, TokenBalance } from "@turtleclub/hooks";
+import { GeoCheckBlocker, SwapInputV3 } from "../deposit/components";
+
+export interface NativeWithdrawSectionProps {
+  opportunity: Opportunity;
+  address: string | undefined;
+  balances: TokenBalance[];
+  isBalancesLoading?: boolean;
+}
+
+export function NativeWithdrawSection({
+  opportunity,
+  address,
+  balances,
+  isBalancesLoading = false,
+}: NativeWithdrawSectionProps) {
+  const [amount, setAmount] = useState<string | undefined>();
+  const [selectedTokenAddress, setSelectedTokenAddress] = useState<string | undefined>();
+
+  return (
+    <div className="flex flex-col gap-3">
+      <SwapInputV3
+        value={amount ?? ""}
+        balances={balances}
+        selectedTokenAddress={selectedTokenAddress}
+        disabled={isBalancesLoading}
+        isWalletConnected={!!address}
+        onChange={setAmount}
+        onTokenChange={setSelectedTokenAddress}
+        showBalance={true}
+        className="border-border border p-5"
+      />
+
+      <GeoCheckBlocker>
+        <Button disabled className="w-full">
+          Withdraw (Coming Soon)
+        </Button>
+      </GeoCheckBlocker>
+    </div>
+  );
+}

package/src/withdraw/index.ts

@@ -0,0 +1 @@
+export { NativeWithdrawSection, type NativeWithdrawSectionProps } from "./NativeWithdrawSection";