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

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 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.58](https://github.com/turtle-dao/turtle-tools/compare/@turtleclub/opportunities@0.1.0-beta.57...@turtleclub/opportunities@0.1.0-beta.58) (2026-01-23)
+
+### Features
+
+- native deposit section ([#231](https://github.com/turtle-dao/turtle-tools/issues/231)) ([b05278e](https://github.com/turtle-dao/turtle-tools/commit/b05278ee2eb7b77429e50140e08ca00eb6d2745d))
+
+# [0.1.0-beta.57](https://github.com/turtle-dao/turtle-tools/compare/@turtleclub/opportunities@0.1.0-beta.56...@turtleclub/opportunities@0.1.0-beta.57) (2026-01-21)
+
+**Note:** Version bump only for package @turtleclub/opportunities
+
 # [0.1.0-beta.56](https://github.com/turtle-dao/turtle-tools/compare/@turtleclub/opportunities@0.1.0-beta.55...@turtleclub/opportunities@0.1.0-beta.56) (2026-01-20)
 
 **Note:** Version bump only for package @turtleclub/opportunities

package/README.md

@@ -0,0 +1,179 @@
+# @turtleclub/opportunities
+
+React components for interacting with Turtle Club opportunities, including deposits, withdrawals, and transaction status tracking.
+
+## Installation
+
+```bash
+pnpm add @turtleclub/opportunities
+```
+
+## Components
+
+### NativeDepositSection
+
+A complete deposit interface component for opportunities that handles token selection, balance fetching, and deposit execution.
+
+#### Props
+
+```typescript
+interface NativeDepositSectionProps {
+  // Required
+  opportunity: Opportunity;              // The opportunity to deposit into
+  address: string | undefined;           // User's wallet address
+  distributorId: string;                 // Distributor ID for attribution
+  executeTransaction: (tx: TransactionRequest) => Promise<string | undefined>;
+
+  // Optional
+  onDepositSuccess?: () => void;         // Callback after successful deposit
+  tokenDisplayMode?: 'deposit-tokens' | 'all-chain-tokens';  // Default: 'deposit-tokens'
+  showZeroBalances?: boolean;            // Show tokens with 0 balance. Default: false
+  showExcludedTokens?: boolean;          // Show excluded/blacklisted tokens. Default: false
+  renderAssetSelector?: (props: AssetSelectorProps) => ReactNode;  // Custom token selector
+}
+```
+
+#### Token Display Modes
+
+- **`deposit-tokens`** (default): Only shows tokens from `opportunity.depositTokens`
+- **`all-chain-tokens`**: Shows all tokens on the chain that the user has balance for
+
+#### Basic Usage
+
+```tsx
+import { NativeDepositSection } from '@turtleclub/opportunities';
+import { useMultichainSendTransaction } from '@turtleclub/multichain';
+
+function DepositPage({ opportunity, address }) {
+  const { sendTransaction, waitForReceipt } = useMultichainSendTransaction();
+
+  const executeTransaction = async (tx) => {
+    const hash = await sendTransaction({
+      to: tx.to,
+      data: tx.data,
+      value: tx.value ? BigInt(tx.value) : undefined,
+    });
+    if (hash) await waitForReceipt(hash);
+    return hash;
+  };
+
+  return (
+    <NativeDepositSection
+      opportunity={opportunity}
+      address={address}
+      distributorId="your-distributor-id"
+      executeTransaction={executeTransaction}
+      onDepositSuccess={() => console.log('Deposit completed!')}
+    />
+  );
+}
+```
+
+#### With Custom Asset Selector
+
+```tsx
+import { NativeDepositSection, type AssetSelectorProps } from '@turtleclub/opportunities';
+
+function CustomAssetSelector({ tokens, selectedToken, onTokenChange, isLoading }: AssetSelectorProps) {
+  return (
+    <div className="custom-selector">
+      {tokens.map((token) => (
+        <button
+          key={token.address}
+          onClick={() => onTokenChange(token.address)}
+          className={selectedToken === token.address ? 'selected' : ''}
+        >
+          {token.symbol} - {token.balance}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function DepositPage({ opportunity, address }) {
+  return (
+    <NativeDepositSection
+      opportunity={opportunity}
+      address={address}
+      distributorId="your-distributor-id"
+      executeTransaction={executeTransaction}
+      renderAssetSelector={(props) => <CustomAssetSelector {...props} />}
+    />
+  );
+}
+```
+
+#### Show All Chain Tokens
+
+```tsx
+<NativeDepositSection
+  opportunity={opportunity}
+  address={address}
+  distributorId="your-distributor-id"
+  executeTransaction={executeTransaction}
+  tokenDisplayMode="all-chain-tokens"
+  showZeroBalances={true}
+/>
+```
+
+### Features
+
+- **Auto-selection**: Automatically selects the token with the highest balance
+- **Native token support**: Handles both ERC20 and native tokens (ETH, MATIC, etc.)
+- **USD value display**: Shows real-time USD equivalent of the amount
+- **Insufficient balance detection**: Validates balance before allowing deposit
+- **Max button**: Quick-fill maximum available balance
+- **Geo-blocking**: Integrates with GeoCheckBlocker for geographic restrictions
+- **Loading states**: Shows loading indicators while fetching balances
+
+### Dependencies
+
+This component uses the following hooks from `@turtleclub/hooks`:
+
+- `useGetOnChainBalance` - Fetches on-chain token balances
+- `useBalance` - Fetches consolidated balances from multiple sources
+- `useTokenBalance` - Calculates USD value and validates amounts
+- `useEarnDeposit` - Handles the deposit transaction flow
+
+## Other Components
+
+### GeoCheckBlocker
+
+Wraps content that should be blocked in certain geographic regions.
+
+### ConfirmButton
+
+Button component with confirmation state for critical actions.
+
+## Types
+
+```typescript
+// Re-exported from @turtleclub/hooks
+export type { Opportunity, TransactionRequest } from '@turtleclub/hooks';
+
+// Component-specific types
+export interface AssetSelectorProps {
+  tokens: SwapInputToken[];
+  selectedToken: string | undefined;
+  onTokenChange: (address: string) => void;
+  isLoading: boolean;
+}
+```
+
+## Testing
+
+The showcase app includes a testing page at `/actions` where you can:
+
+1. Connect a wallet (EVM, Solana, or TON)
+2. Test NativeDepositSection with different configurations
+3. Toggle between token display modes
+4. Test with zero balance visibility
+
+Run the showcase:
+
+```bash
+cd apps/showcase
+pnpm dev
+```
+
+Navigate to `http://localhost:3000/actions` to test the component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turtleclub/opportunities",
-  "version": "0.1.0-beta.56",
+  "version": "0.1.0-beta.58",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -12,9 +12,10 @@
     "@nexusmutual/sdk": "^1.26.0",
     "@tanstack/react-form": "^1.27.6",
     "@tanstack/react-query": "^5.62.3",
-    "@turtleclub/hooks": "0.5.0-beta.40",
+    "@tanstack/react-table": "^8.21.3",
+    "@turtleclub/hooks": "0.5.0-beta.42",
     "@turtleclub/multichain": "0.5.0-beta.0",
-    "@turtleclub/ui": "0.7.0-beta.20",
+    "@turtleclub/ui": "0.7.0-beta.22",
     "@turtleclub/utils": "0.4.0-beta.0",
     "jotai": "^2.10.3",
     "lucide-react": "^0.542.0",
@@ -30,5 +31,5 @@
     "@types/react-dom": "^18.3.5",
     "typescript": "^5.7.2"
   },
-  "gitHead": "58571ee2225de983a6d3932ae5fa95895ec2d570"
+  "gitHead": "dfb8123923c249371734e5168b024e81615ea12c"
 }

package/src/components/index.ts

@@ -1 +1 @@
-export * from "./balances-data-table";
+// No exports - BalancesDataTable is now exported from ./deposit/components

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