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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turtleclub/opportunities",
-  "version": "0.1.0-beta.61",
+  "version": "0.1.0-beta.62",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -15,7 +15,7 @@
     "@tanstack/react-table": "^8.21.3",
     "@turtleclub/hooks": "0.5.0-beta.44",
     "@turtleclub/multichain": "0.5.0-beta.1",
-    "@turtleclub/ui": "0.7.0-beta.23",
+    "@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": "4a93ec9e58cff4424e003cabe74da0892dadcc95"
+  "gitHead": "b4cd0702ae6d9df357b930c8c86a371be7cec516"
 }

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-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>
       ),