@turtleclub/opportunities 0.1.0-beta.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+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.0 (2025-11-25)
+
+### Features
+
+- balances ([#183](https://github.com/turtle-dao/turtle-tools/issues/183)) ([139df7d](https://github.com/turtle-dao/turtle-tools/commit/139df7d27af9cb6f5d06c12650ef756b55b3d58a))

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@turtleclub/opportunities",
+  "version": "0.1.0-beta.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@turtleclub/hooks": "0.5.0-beta.0",
+    "@turtleclub/ui": "0.7.0-beta.1",
+    "@turtleclub/utils": "0.4.0-beta.0",
+    "jotai": "^2.10.3",
+    "viem": "^2.21.54"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "typescript": "^5.7.2"
+  },
+  "gitHead": "d896f0404e2bcb958a52def686e57893b4c68f6b"
+}

package/src/components/balances-data-table.tsx

@@ -0,0 +1,85 @@
+import { useMemo } from "react";
+import type { ColumnDef } from "@tanstack/react-table";
+import { DataTable } from "@turtleclub/ui";
+import { type TokenBalance } from "@turtleclub/hooks";
+import { formatToken } from "@turtleclub/utils";
+
+export interface BalancesDataTableProps {
+  balances: TokenBalance[];
+  isLoading?: boolean;
+  onBalanceSelect?: (balance: TokenBalance) => void;
+  emptyStateMessage?: string;
+}
+
+export function BalancesDataTable({
+  balances,
+  isLoading = false,
+  onBalanceSelect,
+  emptyStateMessage = "No balances found",
+}: BalancesDataTableProps) {
+  const columns = useMemo<ColumnDef<TokenBalance>[]>(
+    () => [
+      {
+        accessorKey: "token.symbol",
+        header: "Token",
+        cell: ({ row }) => {
+          const token = row.original.token;
+          const logo = token.logoUrl;
+          return (
+            <div className="flex items-center gap-2">
+              {logo ? (
+                <img src={logo} alt={token.symbol} className="size-8 rounded-full" />
+              ) : (
+                <div className="bg-muted flex size-8 items-center justify-center rounded-full text-xs">
+                  {token.symbol?.charAt(0) || "?"}
+                </div>
+              )}
+              <div>
+                <div>{token.symbol}</div>
+                <div className="text-muted-foreground text-xs">{token.name}</div>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: "amount",
+        header: () => <div className="text-right pr-4">Balance</div>,
+        cell: ({ row }) => {
+          const { token, amount } = row.original;
+          const balance = Number(amount) / 10 ** token.decimals;
+          const value = token.priceUsd ? balance * token.priceUsd : null;
+
+          return (
+            <div className="pr-4 text-right">
+              <div>{formatToken(amount, token, true, false, 5)}</div>
+              {value !== null && (
+                <div className="text-muted-foreground text-xs">${value.toFixed(2)}</div>
+              )}
+            </div>
+          );
+        },
+      },
+    ],
+    []
+  );
+
+  const emptyState = (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <p className="text-muted-foreground">{emptyStateMessage}</p>
+    </div>
+  );
+
+  return (
+    <DataTable
+      columns={columns}
+      data={balances}
+      isLoading={isLoading}
+      enableSearch
+      enableSorting
+      onRowClick={onBalanceSelect}
+      emptyState={emptyState}
+      className="w-full"
+    />
+  );
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from "./balances-data-table";

package/src/constants.ts

@@ -0,0 +1 @@
+export const SLIPPAGE_DEFAULT = 0.001; // Represents 0.1%

package/src/deposit/components/confirm-button.tsx

@@ -0,0 +1,137 @@
+import { Button } from "@turtleclub/ui";
+import { useCallback, useMemo } from "react";
+import type { EarnRouteResponse } from "@turtleclub/hooks";
+import { GeoCheckBlocker } from "./geo-check-blocker";
+
+interface ConfirmButtonProps {
+  fetchedRoute: EarnRouteResponse | null;
+  routeError: Error | null;
+  isLoadingRoute: boolean;
+  canExecute: boolean;
+  isExecuting: boolean;
+  hasError: boolean;
+  cancelled: boolean;
+  executeCurrentTransaction: () => Promise<void>;
+  totalSteps: number;
+  completedSteps: number;
+  showingTransactionStatus: boolean;
+  hasInsufficientBalance: boolean;
+}
+
+interface ButtonState {
+  text: string;
+  disabled: boolean;
+  onClick?: () => Promise<void>;
+  className?: string;
+}
+
+// Simple Confirm Button - Only handles button logic, no TxStatus
+export function ConfirmButton({
+  fetchedRoute,
+  routeError,
+  isLoadingRoute,
+  canExecute,
+  isExecuting,
+  hasError,
+  cancelled,
+  executeCurrentTransaction,
+  totalSteps,
+  completedSteps,
+  showingTransactionStatus,
+  hasInsufficientBalance,
+}: ConfirmButtonProps) {
+  const handleConfirm = useCallback(async (): Promise<void> => {
+    if (!canExecute) return;
+    await executeCurrentTransaction();
+  }, [canExecute, executeCurrentTransaction]);
+
+  // Calculate button state based on all conditions
+  const buttonState = useMemo<ButtonState | null>(() => {
+    // Don't render button if showing transaction status
+    if (showingTransactionStatus) {
+      return null;
+    }
+
+    // Loading state
+    if (isLoadingRoute) {
+      return { text: "Loading route...", disabled: true, className: "cursor-not-allowed" };
+    }
+
+    // Error state
+    if (routeError) {
+      return { text: "Route Error", disabled: true, className: "cursor-not-allowed" };
+    }
+
+    // No route available
+    if (!fetchedRoute || !fetchedRoute.steps || fetchedRoute.steps.length === 0) {
+      return { text: "Enter amount to continue", disabled: true, className: "cursor-not-allowed" };
+    }
+
+    // Insufficient balance
+    if (hasInsufficientBalance) {
+      return { text: "Insufficient Balance", disabled: true, className: "cursor-not-allowed" };
+    }
+
+    // Execution states
+    if (isExecuting) {
+      return { text: "Executing...", disabled: true, className: "cursor-not-allowed" };
+    }
+
+    if (hasError) {
+      return {
+        text: "Retry Transaction",
+        disabled: !canExecute,
+        onClick: handleConfirm,
+        className: "cursor-pointer",
+      };
+    }
+
+    if (cancelled) {
+      return {
+        text: "Try Again",
+        disabled: !canExecute,
+        onClick: handleConfirm,
+        className: "cursor-pointer",
+      };
+    }
+
+    // Default confirm state
+    const text =
+      totalSteps > 1 && completedSteps !== totalSteps
+        ? `Confirm Transaction (${completedSteps}/${totalSteps})`
+        : "Confirm Transaction";
+
+    return { text, disabled: false, onClick: handleConfirm, className: "cursor-pointer" };
+  }, [
+    showingTransactionStatus,
+    isLoadingRoute,
+    routeError,
+    fetchedRoute,
+    hasInsufficientBalance,
+    isExecuting,
+    hasError,
+    cancelled,
+    canExecute,
+    totalSteps,
+    completedSteps,
+    handleConfirm,
+  ]);
+
+  // Don't render if buttonState is null
+  if (!buttonState) {
+    return null;
+  }
+
+  return (
+    <GeoCheckBlocker>
+      <Button
+        border="plain"
+        onClick={() => buttonState.onClick?.()}
+        disabled={buttonState.disabled}
+        className={buttonState.className + " w-full"}
+      >
+        {buttonState.text}
+      </Button>
+    </GeoCheckBlocker>
+  );
+}

package/src/deposit/components/geo-check-blocker.tsx

@@ -0,0 +1,40 @@
+import { useGeocheck } from "@turtleclub/hooks";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@turtleclub/ui";
+import type { ReactNode } from "react";
+
+interface GeoCheckButtonProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function GeoCheckBlocker({ children, className }: GeoCheckButtonProps) {
+  const { data: geoCheckData, isLoading: geoCheckLoading } = useGeocheck();
+
+  // Geo restriction check - loading state
+  if (geoCheckLoading) {
+    return (
+      <Button disabled className={className} size="lg" fullWidth>
+        Checking availability...
+      </Button>
+    );
+  }
+
+  // Geo restriction check - blocked state
+  if (geoCheckData && !geoCheckData.canInteract) {
+    return (
+      <Tooltip>
+        <TooltipTrigger className="w-full cursor-default space-y-2">
+          <Button disabled variant="default" className={className} size="lg" fullWidth>
+            Geo Restricted
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top" sideOffset={6} className="text-xs">
+          Due to geographical restrictions you can't use this vault.
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  // Geo check passed - render children
+  return <>{children}</>;
+}

package/src/deposit/components/index.ts

@@ -0,0 +1,2 @@
+export { ConfirmButton } from "./confirm-button";
+export { GeoCheckBlocker } from "./geo-check-blocker";

package/src/deposit/index.ts

@@ -0,0 +1 @@
+export * from "./components";

package/src/index.ts

@@ -0,0 +1,17 @@
+// Balances
+export * from "./components";
+
+// Deposit Components
+export * from "./deposit";
+
+// Transaction Status
+export * from "./transaction-status";
+
+// Opportunity Table
+export * from "./opportunity-table/components";
+
+// Route Details
+export * from "./route-details";
+
+// Constants
+export * from "./constants";

package/src/opportunity-table/components/apr-breakdown-tooltip.tsx

@@ -0,0 +1,103 @@
+import { TurtleTooltip, cn } from "@turtleclub/ui";
+import { InfoIcon } from "lucide-react";
+import { useMemo } from "react";
+import type { Incentive, VaultConfig } from "@turtleclub/hooks";
+import { formatNumber } from "@turtleclub/utils";
+import { useTotalYield } from "../hooks/useTotalYield";
+import { IncentivesBreakdown } from "./incentives-breakdown";
+
+export function APRBreakdownTooltip({
+  incentives,
+  vaultConfig,
+  isPill,
+  isWidget,
+  className,
+}: {
+  incentives: Incentive[];
+  vaultConfig?: VaultConfig;
+  isPill?: boolean;
+  isWidget?: boolean;
+  className?: string;
+}) {
+  const { totalYield } = useTotalYield(incentives);
+
+  // Widget version: Simple list of incentives without fees
+  const sortedIncentives = useMemo(() => {
+    return incentives
+      .filter((incentive) => {
+        const hasValidYield =
+          incentive.yield !== null && incentive.yield !== undefined && incentive.yield > 0;
+        return hasValidYield || (incentive.rewardType === "points" && incentive.yield !== null);
+      })
+      .sort((a, b) => {
+        if (a.rewardType === "points" && b.rewardType !== "points") return 1;
+        if (a.rewardType !== "points" && b.rewardType === "points") return -1;
+        return (b.yield ?? 0) - (a.yield ?? 0);
+      });
+  }, [incentives]);
+
+  const widgetContent = (
+    <div>
+      <div className="text-sm">APR Breakdown</div>
+      <div>
+        {sortedIncentives.map((incentive) => (
+          <div key={incentive.id} className="my-1 flex justify-between gap-2 text-xs">
+            <div className="flex items-center gap-1">
+              {incentive.iconUrl && (
+                <img
+                  src={incentive.iconUrl}
+                  alt={incentive.name || incentive.id}
+                  className="size-4 rounded-full"
+                  loading="lazy"
+                />
+              )}
+              <div>{incentive.name}</div>
+            </div>
+            <div>
+              {incentive.rewardType === "points"
+                ? "-"
+                : `+${formatNumber(incentive.yield ?? 0, 2, false, true)}%`}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="text-primary flex justify-between gap-2 text-sm mt-2">
+        <span>Total</span>
+        <span>{formatNumber(totalYield, 2, false, true)}%</span>
+      </div>
+    </div>
+  );
+
+  const fullContent = (
+    <div className="max-w-[300px] p-3">
+      <div className="mb-3 text-sm font-medium">Est. APR Breakdown</div>
+      <IncentivesBreakdown
+        incentives={incentives}
+        vaultConfig={vaultConfig}
+        showIcons
+        showNestedTooltips={false}
+      />
+    </div>
+  );
+
+  return (
+    <TurtleTooltip
+      trigger={
+        <div
+          className={cn(
+            "group flex items-center gap-1",
+            className,
+            isPill &&
+              "hover:bg-neutral-alpha-5 border-border bg-neutral-alpha-2 hover:border-gradient-white rounded-full border px-3 py-1.5 text-xs"
+          )}
+        >
+          {formatNumber(totalYield, 1, false, false)}%{" "}
+          <InfoIcon size={12} className="text-primary/70 group-hover:text-primary" />
+        </div>
+      }
+      content={isWidget ? widgetContent : fullContent}
+      side="bottom"
+      contentClassName={cn("backdrop-blur-xl", isWidget ? "p-5" : "")}
+    />
+  );
+}

package/src/opportunity-table/components/chain-list.tsx

@@ -0,0 +1,28 @@
+import type { Chain } from "@turtleclub/hooks";
+import { cn } from "@turtleclub/ui";
+import { getNetworkBackgroundColor, getNetworkById } from "@turtleclub/utils";
+
+interface ChainBadgeProps {
+  chain: Chain;
+  className?: string;
+  triggerClassName?: string;
+}
+
+export function ChainBadge({ chain, triggerClassName }: ChainBadgeProps) {
+  return (
+    <div className="flex justify-end">
+      <div
+        className={cn(
+          "flex size-6 items-center justify-center overflow-hidden rounded-full",
+          triggerClassName
+        )}
+      >
+        <img
+          src={chain.logoUrl}
+          className="size-6 rounded-full object-cover"
+          alt={chain.name}
+        />
+      </div>
+    </div>
+  );
+}