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

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