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

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0-beta.62](https://github.com/turtle-dao/turtle-tools/compare/@turtleclub/opportunities@0.1.0-beta.61...@turtleclub/opportunities@0.1.0-beta.62) (2026-01-28)
+
+### Features
+
+- implement turtle-basic UI scaffold with platform adapters ([#235](https://github.com/turtle-dao/turtle-tools/issues/235)) ([89dea4b](https://github.com/turtle-dao/turtle-tools/commit/89dea4b944a4e1dda8ae11ae17b6848ef1c81fa6))
+
+# [0.1.0-beta.61](https://github.com/turtle-dao/turtle-tools/compare/@turtleclub/opportunities@0.1.0-beta.60...@turtleclub/opportunities@0.1.0-beta.61) (2026-01-28)
+
+### Features
+
+- deposit improvements ([#234](https://github.com/turtle-dao/turtle-tools/issues/234)) ([aef8505](https://github.com/turtle-dao/turtle-tools/commit/aef8505b0768f9aeea65b7499dcb090553dd69df))
+
 # [0.1.0-beta.60](https://github.com/turtle-dao/turtle-tools/compare/@turtleclub/opportunities@0.1.0-beta.59...@turtleclub/opportunities@0.1.0-beta.60) (2026-01-27)
 
 **Note:** Version bump only for package @turtleclub/opportunities

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turtleclub/opportunities",
-  "version": "0.1.0-beta.60",
+  "version": "0.1.0-beta.62",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -13,9 +13,9 @@
     "@tanstack/react-form": "^1.27.6",
     "@tanstack/react-query": "^5.62.3",
     "@tanstack/react-table": "^8.21.3",
-    "@turtleclub/hooks": "0.5.0-beta.43",
-    "@turtleclub/multichain": "0.5.0-beta.0",
-    "@turtleclub/ui": "0.7.0-beta.23",
+    "@turtleclub/hooks": "0.5.0-beta.44",
+    "@turtleclub/multichain": "0.5.0-beta.1",
+    "@turtleclub/ui": "0.7.0-beta.24",
     "@turtleclub/utils": "0.4.0-beta.0",
     "jotai": "^2.10.3",
     "lucide-react": "^0.542.0",
@@ -31,5 +31,5 @@
     "@types/react-dom": "^18.3.5",
     "typescript": "^5.7.2"
   },
-  "gitHead": "ae345f4c4390594e945a1d39c719324620f981bc"
+  "gitHead": "b4cd0702ae6d9df357b930c8c86a371be7cec516"
 }

package/src/deposit/NativeDepositSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Button, cn, SegmentControl, SlippageSelector, TurtleTooltip } from "@turtleclub/ui";
 import { InfoIcon } from "lucide-react";
 import {
@@ -15,6 +15,19 @@ 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;
@@ -22,7 +35,12 @@ export interface NativeDepositSectionProps {
   balances: TokenBalance[];
   isBalancesLoading?: boolean;
   refetchBalances?: () => void;
-  executeTransaction: (tx: TransactionRequest) => Promise<string | undefined>;
+  /**
+   * 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;
@@ -39,7 +57,7 @@ export function NativeDepositSection({
   balances,
   isBalancesLoading = false,
   refetchBalances,
-  executeTransaction,
+  executeTransactionAndWait,
   onDepositSuccess,
   depositMode = "native",
   onDepositModeChange,
@@ -48,6 +66,11 @@ export function NativeDepositSection({
 }: 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);
 
@@ -56,13 +79,20 @@ export function NativeDepositSection({
     userAddress: address,
     distributorId,
     balances,
-    executeTransaction,
+    executeTransactionAndWait,
     onDepositSuccess,
     refetchBalances,
-    slippageBps: depositMode === "route" ? slippageBps : undefined,
+    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);
@@ -77,10 +107,11 @@ export function NativeDepositSection({
 
   return (
     <div className="space-y-3">
-      {onDepositModeChange ? (
+      {/* Mode selector: only show when mode can be changed */}
+      {effectiveOnDepositModeChange && (
         <SegmentControl
-          value={depositMode === "native" ? "native" : "route"}
-          onChange={(value) => onDepositModeChange(value as "native" | "route")}
+          value={effectiveDepositMode === "native" ? "native" : "route"}
+          onChange={(value) => effectiveOnDepositModeChange(value as "native" | "route")}
           items={[
             {
               value: "native",
@@ -121,18 +152,6 @@ export function NativeDepositSection({
           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
@@ -147,11 +166,11 @@ export function NativeDepositSection({
         showBalance={true}
         className={cn(
           "border border-border p-5",
-          validation.hasInsufficientBalance && "border-destructive/50",
+          validation.hasInsufficientBalance && "border-destructive/50"
         )}
       />
 
-      {depositMode === "route" && (
+      {effectiveDepositMode === "route" && (
         <SlippageSelector value={slippage} onChange={setSlippage} className="px-2" />
       )}
 
@@ -162,8 +181,14 @@ export function NativeDepositSection({
           approveAmount={selection.amount}
         />
       )}
+      {/* Error messages */}
+      {deposit.error && !isUserRejectedError(deposit.error) && (
+        <p className="text-destructive text-sm">Something went wrong. Please try again.</p>
+      )}
 
-      {deposit.error && <p className="text-destructive text-sm">{deposit.error.message}</p>}
+      {validation.validationMessage && validation.hasInsufficientBalance && (
+        <p className="text-destructive text-xs">{validation.validationMessage}</p>
+      )}
 
       <GeoCheckBlocker>
         <Button
@@ -175,10 +200,6 @@ export function NativeDepositSection({
         </Button>
       </GeoCheckBlocker>
 
-      {validation.validationMessage && validation.hasInsufficientBalance && (
-        <p className="text-destructive text-xs">{validation.validationMessage}</p>
-      )}
-
       {/* {(validation.depositFee !== null ||
         validation.performanceFee !== null ||
         validation.withdrawalCooldownSecs !== null) && (

package/src/deposit/TemporalWrapper.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState } from "react";
 import {
-  useGetOnChainBalance,
-  useBalance,
-  filterExcludedTokens,
+  useActionsDefaultParams,
   type Opportunity,
-  type TokenBalance,
   type TransactionRequest,
 } from "@turtleclub/hooks";
 import { NativeDepositSection } from "./NativeDepositSection";
@@ -17,7 +14,12 @@ export interface TemporalWrapperProps {
   opportunity: Opportunity;
   address: string | undefined;
   distributorId: string;
-  executeTransaction: (tx: TransactionRequest) => Promise<string | undefined>;
+  /**
+   * 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;
@@ -29,16 +31,6 @@ export interface TemporalWrapperProps {
   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
  *
@@ -49,7 +41,7 @@ export function TemporalWrapper({
   opportunity,
   address,
   distributorId,
-  executeTransaction,
+  executeTransactionAndWait,
   onDepositSuccess,
   chainId,
   switchChain,
@@ -58,80 +50,15 @@ export function TemporalWrapper({
 }: 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({
+  // Hook handles isSecondaryOnly internally for balance fetching
+  const { balances, isBalancesLoading, refetchBalances } = useActionsDefaultParams({
+    opportunity,
     address,
-    chainIds: [opportunityChainId],
-    depositOpportunity: opportunity,
+    depositMode,
   });
 
-  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
+  // NativeDepositSection handles isSecondaryOnly internally for UI
   const onDepositModeChange = showDepositModeSelector && opportunity.earnEnabled
     ? setDepositMode
     : undefined;
@@ -144,7 +71,7 @@ export function TemporalWrapper({
       balances={balances}
       isBalancesLoading={isBalancesLoading}
       refetchBalances={refetchBalances}
-      executeTransaction={executeTransaction}
+      executeTransactionAndWait={executeTransactionAndWait}
       onDepositSuccess={onDepositSuccess}
       depositMode={depositMode}
       onDepositModeChange={onDepositModeChange}

package/src/index.ts

@@ -24,3 +24,9 @@ export * from "./route-details";
 
 // Constants
 export * from "./constants";
+
+// Hooks
+export * from "./opportunity-table/hooks";
+
+// Utils
+export * from "./opportunity-table/utils";

package/src/opportunity-actions/OpportunityActions.tsx

@@ -17,7 +17,12 @@ export interface OpportunityActionsProps {
   opportunity: Opportunity;
   address: string | undefined;
   distributorId: string;
-  executeTransaction: (tx: TransactionRequest) => Promise<string | undefined>;
+  /**
+   * 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;
@@ -39,7 +44,7 @@ export function OpportunityActions({
   opportunity,
   address,
   distributorId,
-  executeTransaction,
+  executeTransactionAndWait,
   onDepositSuccess,
   chainId,
   switchChain,
@@ -47,10 +52,14 @@ export function OpportunityActions({
   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 = depositMode === "native" || actionMode === "withdraw";
+  const useOnChainBalances = effectiveDepositMode === "native" || actionMode === "withdraw";
 
   // Always fetch both balance sources to avoid loading states when switching modes
   const {
@@ -129,11 +138,11 @@ export function OpportunityActions({
             value: "deposit",
             label: opportunity.depositDisabled ? (
               <TurtleTooltip
-                trigger={<span>Deposit</span>}
-                content={<span className="block p-2">Deposits are disabled for this opportunity</span>}
+                trigger={<span>{isSecondaryOnly ? "Buy" : "Deposit"}</span>}
+                content={<span className="block p-2">{isSecondaryOnly ? "Purchases are" : "Deposits are"} disabled for this opportunity</span>}
               />
             ) : (
-              "Deposit"
+              isSecondaryOnly ? "Buy" : "Deposit"
             ),
             disabled: opportunity.depositDisabled,
           },
@@ -141,11 +150,11 @@ export function OpportunityActions({
             value: "withdraw",
             label: opportunity.withdrawalDisabled ? (
               <TurtleTooltip
-                trigger={<span>Withdraw</span>}
-                content={<span className="block p-2">Withdrawals are disabled for this opportunity</span>}
+                trigger={<span>{isSecondaryOnly ? "Sell" : "Withdraw"}</span>}
+                content={<span className="block p-2">{isSecondaryOnly ? "Sales are" : "Withdrawals are"} disabled for this opportunity</span>}
               />
             ) : (
-              "Withdraw"
+              isSecondaryOnly ? "Sell" : "Withdraw"
             ),
             disabled: opportunity.withdrawalDisabled,
           },
@@ -162,10 +171,10 @@ export function OpportunityActions({
           balances={balances}
           isBalancesLoading={isBalancesLoading}
           refetchBalances={refetchBalances}
-          executeTransaction={executeTransaction}
+          executeTransactionAndWait={executeTransactionAndWait}
           onDepositSuccess={onDepositSuccess}
-          depositMode={depositMode}
-          onDepositModeChange={opportunity.earnEnabled ? setDepositMode : undefined}
+          depositMode={effectiveDepositMode}
+          onDepositModeChange={opportunity.earnEnabled && !isSecondaryOnly ? setDepositMode : undefined}
           chainId={chainId}
           switchChain={switchChain}
         />

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

@@ -1,5 +1,5 @@
 import type { Opportunity, TokenBalance } from "@turtleclub/hooks";
-import { APIStatus, DataTable } from "@turtleclub/ui";
+import { APIStatus, DataTable, cn } from "@turtleclub/ui";
 import type { ColumnDef, Row } from "@tanstack/react-table";
 import { formatCurrency } from "@turtleclub/utils";
 import { getTotalYield } from "../hooks/useTotalYield";
@@ -17,6 +17,7 @@ interface OpportunitiesTableProps {
   userTvlByOpportunity?: Record<string, number>;
   turtleTvl?: Record<string, number>;
   isWidget?: boolean;
+  compact?: boolean;
 }
 
 export function OpportunitiesTable({
@@ -29,6 +30,7 @@ export function OpportunitiesTable({
   userTvlByOpportunity = {},
   turtleTvl = {},
   isWidget = false,
+  compact = false,
 }: OpportunitiesTableProps) {
   const handleSelectOpportunity = (opportunity: Opportunity) => {
     onSelectOpportunity(opportunity);
@@ -41,16 +43,21 @@ export function OpportunitiesTable({
     onClose?.();
   };
 
+  const iconSize = compact ? "size-5" : "size-6";
+  const nameTextSize = compact ? "text-sm" : "";
+  const tvlTextSize = compact ? "text-xs" : "";
+  const aprTextSize = compact ? "text-sm" : "";
+
   const columns: ColumnDef<Opportunity>[] = [
     {
       accessorKey: "name",
       header: () => <div>Opportunity</div>,
       cell: ({ row }) => (
-        <div className="flex items-center gap-2">
+        <div className={cn("flex items-center gap-2", nameTextSize)}>
           <div className="relative shrink-0">
             <img
               src={row.original.receiptToken.logoUrl}
-              className="size-6 rounded-full"
+              className={cn("rounded-full", iconSize)}
               loading="lazy"
               alt={row.original.receiptToken.name}
             />
@@ -89,7 +96,7 @@ export function OpportunitiesTable({
           <div className="flex h-[30px] items-center gap-2">
             <img
               src={row.original.products[0].organization.iconUrl || ""}
-              className="size-6 rounded-full"
+              className={cn("rounded-full", iconSize)}
               loading="lazy"
             />
             {row.original.products[0].organization.name}
@@ -109,7 +116,7 @@ export function OpportunitiesTable({
             {row.original.vaultConfig.curator.iconUrl && (
               <img
                 src={row.original.vaultConfig.curator.iconUrl}
-                className="size-6 rounded-full"
+                className={cn("rounded-full", iconSize)}
                 loading="lazy"
                 alt={row.original.vaultConfig.curator.name}
               />
@@ -131,7 +138,7 @@ export function OpportunitiesTable({
             {row.original.vaultConfig.infraProvider.iconUrl && (
               <img
                 src={row.original.vaultConfig.infraProvider.iconUrl}
-                className="size-6 rounded-full"
+                className={cn("rounded-full", iconSize)}
                 loading="lazy"
                 alt={row.original.vaultConfig.infraProvider.name}
               />
@@ -175,7 +182,9 @@ export function OpportunitiesTable({
       accessorKey: "tvl",
       header: () => <div className="flex w-full justify-end">Total TVL</div>,
       cell: ({ row }) => (
-        <div className="text-end">{formatCurrency(row.original.tvl, 0, true)}</div>
+        <div className={compact ? cn("flex h-[30px] w-full justify-end items-center gap-2", tvlTextSize) : "text-end"}>
+          {formatCurrency(row.original.tvl, 0, true)}
+        </div>
       ),
       enableSorting: true,
     },
@@ -184,11 +193,12 @@ export function OpportunitiesTable({
       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">
+        <div className={cn("flex flex-row-reverse", aprTextSize)}>
           <APRBreakdownTooltip
             incentives={row.original.incentives}
             vaultConfig={row.original.vaultConfig ?? undefined}
-            isWidget={isWidget}
+            isWidget={compact || isWidget}
+            isPill={compact}
           />
         </div>
       ),