@turtleclub/ui 0.7.0-beta.32 → 0.7.0-beta.34

package/src/components/molecules/opportunity/opportunity-apr.tsx

@@ -1,129 +0,0 @@
-import React from "react";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "../../ui/hover-card";
-import { InfoIcon } from "lucide-react";
-import { LabelWithIcon, Separator } from "../../ui";
-import NumberFlow, { type Value } from "@number-flow/react";
-
-// TODO: Extract aprBreakdown to a type
-interface OpportunityAprProps {
-  apr: Value;
-  aprBreakdown: {
-    iconUrl: string;
-    name: string;
-    description: string;
-    apr: string;
-    boost: boolean;
-  }[];
-  showBoostedRewardsDescription?: boolean;
-  showBoostedRewards?: boolean;
-}
-
-const OpportunityApr = ({
-  apr,
-  aprBreakdown,
-  showBoostedRewards = false,
-  showBoostedRewardsDescription = false,
-}: OpportunityAprProps) => {
-  const boostedRewards = aprBreakdown.filter((item) => item.boost);
-  return (
-    <HoverCard>
-      <HoverCardTrigger asChild>
-        <span className="text-accent inline-flex items-center gap-1 text-2xl font-semibold">
-          <NumberFlow
-            value={apr}
-            format={{
-              style: "percent",
-              minimumFractionDigits: 2,
-              maximumFractionDigits: 2,
-            }}
-          />
-          <InfoIcon
-            size={16}
-            className="text-muted-foreground cursor-pointer font-bold"
-          />
-        </span>
-      </HoverCardTrigger>
-      <HoverCardContent>
-        <h3 className="text-accent text-sm">Rewards</h3>
-        <div className="flex flex-col gap-2">
-          {aprBreakdown
-            .filter((item) => !item.boost)
-            .map((item) => (
-              <div key={item.name} className="flex justify-between">
-                <LabelWithIcon
-                  textSize="xs"
-                  icon={item.iconUrl}
-                  iconSize="sm"
-                  className="text-muted-foreground"
-                >
-                  {item.name}
-                </LabelWithIcon>
-                <span className="text-accent text-sm font-semibold">
-                  <NumberFlow
-                    value={parseFloat(item.apr) / 100}
-                    format={{
-                      style: "percent",
-                      minimumFractionDigits: 2,
-                      maximumFractionDigits: 3,
-                    }}
-                  />
-                </span>
-              </div>
-            ))}
-          <Separator />
-          <div className="flex justify-between">
-            <span className="text-accent text-sm">Net Reward Rate</span>
-            <span className="text-accent text-sm font-semibold">
-              <NumberFlow
-                value={apr}
-                format={{
-                  style: "percent",
-                  minimumFractionDigits: 3,
-                  maximumFractionDigits: 3,
-                }}
-              />
-            </span>
-          </div>
-          {showBoostedRewards && boostedRewards.length > 0 && (
-            <>
-              <Separator />
-              <h3 className="text-accent text-sm">Boosted Rewards</h3>
-              <div className="flex justify-between">
-                <span className="text-accent text-sm font-semibold">
-                  {boostedRewards.map((item) => (
-                    <div key={item.name} className="flex flex-col gap-2">
-                      <LabelWithIcon
-                        textSize="xs"
-                        icon={item.iconUrl}
-                        iconSize="sm"
-                        className="text-muted-foreground"
-                      >
-                        {item.description}
-                      </LabelWithIcon>
-                      {showBoostedRewardsDescription && item.description && (
-                        <span className="text-muted-foreground text-xs">
-                          {item.description}
-                        </span>
-                      )}
-                    </div>
-                  ))}
-                </span>
-              </div>
-            </>
-          )}
-          {/* <p className="text-sm text-muted-foreground text-center">
-            All reward amounts displayed in this app are the amounts after fees, please note that
-            the reward rate is not guaranteed and may change over time. The APR is the annualized
-            return on investment for the opportunity.
-          </p> */}
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  );
-};
-
-export { OpportunityApr };

package/src/components/molecules/opportunity/opportunity-disclaimer.tsx

@@ -1,46 +0,0 @@
-import {
-  BanknoteIcon,
-  GiftIcon,
-  MessageSquareTextIcon,
-  SproutIcon,
-} from "lucide-react";
-import React from "react";
-
-const OpportunityDisclaimer = () => {
-  const diclaimers = [
-    {
-      icon: <MessageSquareTextIcon size={16} />,
-      description:
-        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro expedita amet hic beatae similique vero recusandae necessitatibus",
-    },
-    {
-      icon: <SproutIcon size={16} />,
-      description: "Lend your USDT with Morpho and earn USDT rewards",
-    },
-    {
-      icon: <GiftIcon size={16} />,
-      description:
-        "Rewards are automatically distributed every block and accrue to your position",
-    },
-    // {
-    //   icon: <BanknoteIcon size={16} />,
-    //   description: "Request withdraw at anytime and get USDT immediately",
-    // },
-  ];
-  return (
-    <div className="flex w-full flex-col gap-3">
-      {diclaimers.map((disclaimer) => (
-        <div key={disclaimer.description} className="flex gap-3">
-          <div className="text-muted-foreground flex h-4 w-4 flex-shrink-0 items-center justify-center">
-            {disclaimer.icon}
-          </div>
-          <p className="text-muted-foreground flex-1 text-xs">
-            {disclaimer.description}
-          </p>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export { OpportunityDisclaimer };

package/src/components/molecules/opportunity/opportunity-rate-estimator.tsx

@@ -1,62 +0,0 @@
-import { useMemo } from "react";
-
-export interface OpportunityRateEstimatorProps {
-  value: {
-    symbol: string;
-    price: number;
-    depositedAmountUsd: number;
-    apr: number;
-  };
-}
-
-const OpportunityRateEstimator = ({ value }: OpportunityRateEstimatorProps) => {
-  const { depositedAmountUsd, apr, symbol, price } = value;
-
-  const result = useMemo(() => {
-    // Validar que tengamos todos los valores necesarios
-    if (!depositedAmountUsd || !apr || !price) {
-      return {
-        monthlyReward: "0.0000",
-        monthlyRewardUsd: "0.00",
-        yearlyReward: "0.0000",
-        yearlyRewardUsd: "0.00",
-      };
-    }
-
-    // Calcular rewards anuales en USD
-    const yearlyRewardsUsd = depositedAmountUsd * (apr / 100);
-
-    // Convertir rewards USD a cantidad de reward token
-    const yearlyRewardsToken = yearlyRewardsUsd / price;
-
-    // Calcular rewards mensuales
-    const monthlyRewardsUsd = yearlyRewardsUsd / 12;
-    const monthlyRewardsToken = yearlyRewardsToken / 12;
-
-    return {
-      monthlyReward: monthlyRewardsToken.toFixed(4),
-      monthlyRewardUsd: monthlyRewardsUsd.toFixed(2),
-      yearlyReward: yearlyRewardsToken.toFixed(4),
-      yearlyRewardUsd: yearlyRewardsUsd.toFixed(2),
-    };
-  }, [depositedAmountUsd, apr, price]);
-
-  return (
-    <div className="mx-4 mb-4 space-y-1">
-      <div className="flex justify-between">
-        <span className="text-muted-foreground text-sm">Monthly</span>
-        <span className="text-muted-foreground text-sm">
-          {result.monthlyReward || 0} {symbol} (${result.monthlyRewardUsd || 0})
-        </span>
-      </div>
-      <div className="flex justify-between">
-        <span className="text-muted-foreground text-sm">Yearly</span>
-        <span className="text-muted-foreground text-sm">
-          {result.yearlyReward || 0} {symbol} (${result.yearlyRewardUsd || 0})
-        </span>
-      </div>
-    </div>
-  );
-};
-
-export { OpportunityRateEstimator };

package/src/components/molecules/opportunity/opportunity-section.tsx

@@ -1,113 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import { Card } from "@/components/ui/card";
-import { OpportunityApr } from "./opportunity-apr";
-import {
-  OpportunityRateEstimator,
-  OpportunityRateEstimatorProps,
-} from "./opportunity-rate-estimator";
-import { OpportunityType } from "./opportunity-type";
-import { Separator } from "@/components/ui";
-import { OpportunityDisclaimer } from "./opportunity-disclaimer";
-import { OpportunitySelector } from "./opportunity-selector";
-import { Wallet } from "lucide-react";
-import { BaseSelector, iconUrlToImg } from "../widget";
-
-interface OpportunitySectionProps extends React.HTMLAttributes<HTMLDivElement> {
-  value: {
-    name: string;
-    icon: string;
-    vaultSymbol: string;
-    totalApr: string;
-    aprBreakdown: {
-      iconUrl: string;
-      name: string;
-      description: string;
-      boost: boolean;
-      apr: string;
-    }[];
-    tvlUsd: string;
-    depositDetails: OpportunityRateEstimatorProps["value"];
-    type: "Boosted Deal" | "Turtle Campaign";
-  };
-  opportunitySelector: "old" | "new";
-  hideDisclaimer?: boolean;
-  onOpportunityClick?: () => void;
-}
-
-const OpportunitySection = React.forwardRef<
-  HTMLDivElement,
-  OpportunitySectionProps
->(
-  (
-    {
-      className,
-      value,
-      onOpportunityClick,
-      hideDisclaimer,
-      opportunitySelector,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div className="text-foreground space-y-2">
-        <Card
-          variant="shadow"
-          gradient="white"
-          ref={ref}
-          className={cn("space-y-3", className)}
-          {...props}
-        >
-          <div className="flex justify-between p-4">
-            <OpportunityApr
-              apr={parseFloat(value.totalApr) / 100}
-              aprBreakdown={value.aprBreakdown}
-              showBoostedRewardsDescription={false}
-              showBoostedRewards={true}
-            />
-            {opportunitySelector === "new" && (
-              <OpportunitySelector
-                iconUrl={value.icon}
-                name={value.name}
-                onClick={onOpportunityClick}
-              />
-            )}
-            {opportunitySelector === "old" && (
-              <BaseSelector
-                icon={iconUrlToImg(value.icon, value.vaultSymbol)}
-                text={value.name}
-                onClick={onOpportunityClick}
-                size="sm"
-              />
-            )}
-          </div>
-          {/* <OpportunityRateEstimator value={value.depositDetails} /> */}
-        </Card>
-        {/* Disclaimer */}
-        {!hideDisclaimer && (
-          <Card
-            ref={ref}
-            variant="border"
-            gradient="white"
-            className={cn("space-y-3", className)}
-            {...props}
-          >
-            <div className="flex flex-col items-center justify-between gap-3">
-              <div className="flex w-full justify-between p-1">
-                <OpportunityType type={value.type} />
-                <span className="text-foreground text-sm font-semibold">
-                  TVL: {value.tvlUsd}
-                </span>
-              </div>
-              <Separator />
-              <OpportunityDisclaimer />
-            </div>
-          </Card>
-        )}
-      </div>
-    );
-  },
-);
-
-export { OpportunitySection };

package/src/components/molecules/opportunity/opportunity-selector.tsx

@@ -1,30 +0,0 @@
-import { Card, LabelWithIcon } from "@/components/ui";
-import { ChevronDownIcon } from "lucide-react";
-import React from "react";
-
-interface OpportunitySelectorProps {
-  iconUrl: string;
-  name: string;
-  onClick: () => void;
-}
-const OpportunitySelector = ({
-  iconUrl,
-  name,
-  onClick,
-}: OpportunitySelectorProps) => {
-  return (
-    <Card
-      variant="border"
-      rounded="full"
-      onClick={onClick}
-      className="flex cursor-pointer items-center justify-between gap-3"
-    >
-      <LabelWithIcon icon={iconUrl} textSize="sm" iconSize="base">
-        {name}
-      </LabelWithIcon>
-      <ChevronDownIcon className="text-muted-foreground h-4 w-4" />
-    </Card>
-  );
-};
-
-export { OpportunitySelector };

package/src/components/molecules/opportunity/opportunity-type.tsx

@@ -1,16 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { HandCoinsIcon } from "lucide-react";
-import React from "react";
-
-interface OpportunityTypeProps {
-  type: "Boosted Deal" | "Turtle Campaign";
-}
-const OpportunityType = ({ type }: OpportunityTypeProps) => {
-  return (
-    <Badge variant="muted" className="gap-2">
-      <HandCoinsIcon size={16} /> {type}
-    </Badge>
-  );
-};
-
-export { OpportunityType };

package/src/components/molecules/route-details.tsx

@@ -1,112 +0,0 @@
-import * as React from "react";
-import { Card, CardContent } from "../ui/card";
-import { LabelWithIcon } from "../ui/label-with-icon";
-import { ScrollArea } from "../ui/scroll-area";
-import { ChevronsRight } from "lucide-react";
-import ensoLogo from "../../images/enso.png";
-import { useMemo } from "react";
-
-// Local type definitions (no dependency on @turtleclub/hooks)
-export interface SimpleToken {
-  icon?: React.ReactNode | string;
-  symbol: string;
-}
-
-export interface TokenStep {
-  in: SimpleToken;
-  out: SimpleToken | null;
-  type: "approve" | "swap" | "deposit";
-  amount?: string;
-}
-
-interface RouteDetailsProps {
-  value: {
-    steps: TokenStep[];
-  };
-  className?: string;
-}
-
-export const RouteDetails = ({ value, className }: RouteDetailsProps) => {
-  const { steps } = value;
-
-  const isLongRoute = useMemo(() => {
-    return steps.length > 2;
-  }, [steps]);
-
-  const defaultIcon = (symbol: string) => (
-    <div className="bg-primary/20 flex size-3 items-center justify-center rounded-full">
-      <span className="text-primary text-xs font-bold">{symbol.charAt(0)}</span>
-    </div>
-  );
-
-  const capitalize = (str: string) => {
-    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-  };
-
-  if (steps.length === 0) return null;
-
-  return (
-    <div className="text-foreground px-3 pb-3">
-      <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" />
-      </div>
-      {/* Route visualization */}
-      <ScrollArea className="mt-2 rounded-md whitespace-nowrap">
-        <div className="grid w-full auto-cols-fr grid-flow-col items-center gap-2 py-2">
-          {steps.map((step, index) => (
-            <React.Fragment key={`${step.in.symbol}-${step.type}-${index}`}>
-              <Card variant="border" className="border-muted-foreground/60">
-                <CardContent className="space-y-2 pt-4">
-                  {/* Type */}
-                  <div className="text-secondary-foreground text-sm">
-                    {capitalize(step.type)}
-                  </div>
-
-                  <div className="flex flex-row items-center gap-2">
-                    {/* Token in */}
-                    <LabelWithIcon
-                      icon={step.in.icon || defaultIcon(step.in.symbol)}
-                      textSize="xs"
-                      iconSize="xs"
-                    >
-                      {!isLongRoute && (
-                        <span className="hidden gap-2 sm:block">
-                          {step.in.symbol}
-                        </span>
-                      )}
-                      {step.type === "approve" && (
-                        <span className="gap-2"> {step.amount}</span>
-                      )}
-                    </LabelWithIcon>
-
-                    {step.type !== "approve" && (
-                      <>
-                        {/* Arrow between tokens */}
-                        <ChevronsRight className="text-primary size-4 shrink-0" />
-
-                        {/* Token out */}
-                        <LabelWithIcon
-                          icon={step.out.icon || defaultIcon(step.out.symbol)}
-                          textSize="xs"
-                          iconSize="xs"
-                        >
-                          {!isLongRoute && (
-                            <span className="hidden gap-2 sm:block">
-                              {step.in.symbol}
-                            </span>
-                          )}
-                        </LabelWithIcon>
-                      </>
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
-            </React.Fragment>
-          ))}
-        </div>
-      </ScrollArea>
-    </div>
-  );
-};