@turtleclub/opportunities 0.1.0-beta.0

package/src/opportunity-table/components/incentives-breakdown.tsx

@@ -0,0 +1,263 @@
+import { Separator, TurtleTooltip, cn } from "@turtleclub/ui";
+import { useMemo } from "react";
+import { InfoIcon } from "lucide-react";
+import type { Incentive, VaultConfig } from "@turtleclub/hooks";
+import { formatNumber } from "@turtleclub/utils";
+import { useNetAPR } from "../hooks/useNetAPR";
+
+interface IncentivesBreakdownProps {
+  incentives: Incentive[];
+  vaultConfig?: VaultConfig;
+  showIcons?: boolean;
+  showNestedTooltips?: boolean;
+  showDescriptions?: boolean;
+  size?: "xs" | "sm";
+}
+
+export function IncentivesBreakdown({
+  incentives,
+  vaultConfig,
+  showIcons = true,
+  showNestedTooltips = true,
+  showDescriptions = false,
+  size = "xs",
+}: IncentivesBreakdownProps) {
+  const sortedIncentives = useMemo(() => {
+    return incentives
+      .filter(
+        (incentive) => incentive.rewardType === "points" || (incentive.yield !== null && incentive.yield !== undefined),
+      )
+      .sort((a, b) => {
+        // Points always go to the end
+        if (a.rewardType === "points" && b.rewardType !== "points") return 1;
+        if (a.rewardType !== "points" && b.rewardType === "points") return -1;
+        // Sort by yield for non-points
+        return (b.yield ?? 0) - (a.yield ?? 0);
+      });
+  }, [incentives]);
+
+  // Calculate fee amounts for display
+  const { performanceFeeAmount, managementFeeAmount } = useMemo(() => {
+    const native = sortedIncentives.filter((incentive) => incentive.name === "Native Yield");
+    const nativeYieldValue = native.reduce((sum, i) => sum + (i.yield ?? 0), 0);
+    const perfFee = vaultConfig?.performanceFee ?? 0;
+    const mgmtFee = vaultConfig?.managementFee ?? 0;
+    const perfFeeAmount = nativeYieldValue === 0 ? 0 : (nativeYieldValue * perfFee) / 100;
+
+    return {
+      performanceFeeAmount: perfFeeAmount,
+      managementFeeAmount: mgmtFee,
+    };
+  }, [sortedIncentives, vaultConfig]);
+
+  // Use shared hook for net APR calculation
+  const netAPR = useNetAPR(incentives, vaultConfig);
+
+  const hasFeeConfig = vaultConfig !== undefined;
+  const performanceFee = vaultConfig?.performanceFee ?? 0;
+  const depositFee = vaultConfig?.depositFee ?? 0;
+  const withdrawalFee = vaultConfig?.withdrawalFee ?? 0;
+  const textSize = size === "sm" ? "text-sm" : "text-xs";
+  const headerTextSize = size === "sm" ? "text-xs" : "text-xs";
+  const descriptionTextSize = size === "sm" ? "text-xs" : "text-[10px]";
+
+  return (
+    <div className="space-y-3">
+      <div
+        className={cn(
+          "text-muted-foreground grid gap-4",
+          headerTextSize,
+          showDescriptions ? "grid-cols-2 md:grid-cols-3" : "grid-cols-2"
+        )}
+      >
+        <span>Source</span>
+        {showDescriptions && <span className="hidden md:block">Description</span>}
+        <span className="text-right">Est. APR</span>
+      </div>
+
+      {sortedIncentives.map((incentive) => (
+        <div
+          key={incentive.id}
+          className={cn(
+            "grid items-center gap-4",
+            textSize,
+            showDescriptions ? "grid-cols-2 md:grid-cols-3" : "grid-cols-2"
+          )}
+        >
+          <div className="flex items-center gap-2">
+            {showIcons && (
+              <div className="ring-border rounded-full ring">
+                <img src={incentive.iconUrl} alt={incentive.name} className="size-4 rounded-full" loading="lazy" />
+              </div>
+            )}
+            <span className="text-secondary-foreground/80 truncate">{incentive.name}</span>
+          </div>
+
+          {showDescriptions && (
+            <div className={cn("text-secondary-foreground/80 wrap-break-word hidden md:block", descriptionTextSize)}>
+              <span className="block">{incentive.description || "—"}</span>
+            </div>
+          )}
+
+          <div
+            className={
+              incentive.rewardType === "points" ? "text-muted-foreground text-right" : "text-success text-right"
+            }
+          >
+            {incentive.rewardType === "points" ? "-" : `+${formatNumber(incentive.yield ?? 0, 2, false, true)}%`}
+          </div>
+        </div>
+      ))}
+
+      {hasFeeConfig && (
+        <>
+          <Separator />
+          <div
+            className={cn(
+              "grid items-center gap-4",
+              textSize,
+              showDescriptions ? "grid-cols-2 md:grid-cols-3" : "grid-cols-2"
+            )}
+          >
+            <div className="flex items-center gap-2">
+              <span className="text-secondary-foreground/80">
+                Performance Fee
+                {!showNestedTooltips && performanceFee > 0 && (
+                  <span className="text-muted-foreground ml-1 text-[10px]">
+                    ({formatNumber(performanceFee, 2, false, true)}% on native yield)
+                  </span>
+                )}
+              </span>
+              {showNestedTooltips && performanceFee > 0 && (
+                <TurtleTooltip
+                  trigger={<InfoIcon className="size-3 shrink-0" />}
+                  content={
+                    <div className="text-xs">
+                      {formatNumber(performanceFee, 0, false, true)}% performance fee on native yield.
+                    </div>
+                  }
+                />
+              )}
+            </div>
+            {showDescriptions && <div className="hidden md:block" />}
+            <div
+              className={performanceFeeAmount > 0 ? "text-destructive text-right" : "text-muted-foreground text-right"}
+            >
+              {performanceFeeAmount > 0 ? "-" : ""}
+              {formatNumber(performanceFeeAmount, 2, false, true)}%
+            </div>
+          </div>
+          <div
+            className={cn(
+              "grid items-center gap-4",
+              textSize,
+              showDescriptions ? "grid-cols-2 md:grid-cols-3" : "grid-cols-2"
+            )}
+          >
+            <div className="flex items-center gap-2">
+              <span className="text-secondary-foreground/80">
+                Management Fee
+                {!showNestedTooltips && managementFeeAmount > 0 && (
+                  <span className="text-muted-foreground ml-1 text-[10px]">
+                    ({formatNumber(managementFeeAmount, 2, false, true)}% annual fee)
+                  </span>
+                )}
+              </span>
+              {showNestedTooltips && managementFeeAmount > 0 && (
+                <TurtleTooltip
+                  trigger={<InfoIcon className="size-3 shrink-0" />}
+                  content={
+                    <div className="text-xs">
+                      {formatNumber(managementFeeAmount, 0, false, true)}% annual management fee on vault TVL.
+                    </div>
+                  }
+                />
+              )}
+            </div>
+            {showDescriptions && <div className="hidden md:block" />}
+            <div
+              className={managementFeeAmount > 0 ? "text-destructive text-right" : "text-muted-foreground text-right"}
+            >
+              {managementFeeAmount > 0 ? "-" : ""}
+              {formatNumber(managementFeeAmount, 2, false, true)}%
+            </div>
+          </div>
+          <div
+            className={cn(
+              "grid items-center gap-4",
+              textSize,
+              showDescriptions ? "grid-cols-2 md:grid-cols-3" : "grid-cols-2"
+            )}
+          >
+            <div className="flex items-center gap-2">
+              <span className="text-secondary-foreground/80">Deposit Fee</span>
+              {!showNestedTooltips && depositFee > 0 && (
+                <span className="text-muted-foreground ml-1 text-[10px]">
+                  {formatNumber(depositFee, 2, false, true)}% on deposit)
+                </span>
+              )}
+              {showNestedTooltips && depositFee > 0 && (
+                <TurtleTooltip
+                  trigger={<InfoIcon className="size-3 shrink-0" />}
+                  content={
+                    <div className="text-xs">
+                      {formatNumber(depositFee, 2, false, true)}% fee on every deposit into the vault.
+                    </div>
+                  }
+                />
+              )}
+            </div>
+            {showDescriptions && <div className="hidden md:block" />}
+            <div className={depositFee > 0 ? "text-destructive text-right" : "text-muted-foreground text-right"}>
+              {formatNumber(depositFee, 2, false, true)}%
+            </div>
+          </div>
+          <div
+            className={cn(
+              "grid items-center gap-4",
+              textSize,
+              showDescriptions ? "grid-cols-2 md:grid-cols-3" : "grid-cols-2"
+            )}
+          >
+            <div className="flex items-center gap-2">
+              <span className="text-secondary-foreground/80">Withdrawal Fee</span>
+              {!showNestedTooltips && withdrawalFee > 0 && (
+                <TurtleTooltip
+                  trigger={<InfoIcon className="size-3 shrink-0" />}
+                  content={<div className="text-xs">{formatNumber(withdrawalFee, 2, false, true)}% on withdrawal</div>}
+                />
+              )}
+              {showNestedTooltips && withdrawalFee > 0 && (
+                <TurtleTooltip
+                  trigger={<InfoIcon className="size-3 shrink-0" />}
+                  content={
+                    <div className="text-xs">
+                      {formatNumber(withdrawalFee, 2, false, true)}% fee on every withdrawal from the vault.
+                    </div>
+                  }
+                />
+              )}
+            </div>
+            {showDescriptions && <div className="hidden md:block" />}
+            <div className={withdrawalFee > 0 ? "text-destructive text-right" : "text-muted-foreground text-right"}>
+              {withdrawalFee > 0 ? "-" : ""}
+              {formatNumber(withdrawalFee, 2, false, true)}%
+            </div>
+          </div>
+          <Separator />
+          <div
+            className={cn(
+              "grid items-center gap-4 font-semibold",
+              textSize,
+              showDescriptions ? "grid-cols-2 md:grid-cols-3" : "grid-cols-2"
+            )}
+          >
+            <span>Est. Net APR</span>
+            {showDescriptions && <div className="hidden md:block" />}
+            <div className="text-primary text-right">{formatNumber(netAPR, 2, false, true)}%</div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/opportunity-table/components/index.ts

@@ -0,0 +1,4 @@
+export { APRBreakdownTooltip } from "./apr-breakdown-tooltip";
+export { ChainBadge } from "./chain-list";
+export { OpportunitiesTable } from "./opportunities-table";
+export { IncentivesBreakdown } from "./incentives-breakdown";

package/src/opportunity-table/components/opportunities-table.tsx

@@ -0,0 +1,218 @@
+import type { Opportunity, TokenBalance } from "@turtleclub/hooks";
+import { APIStatus, DataTable } from "@turtleclub/ui";
+import type { ColumnDef } from "@tanstack/react-table";
+import { formatCurrency } from "@turtleclub/utils";
+import { getTotalYield } from "../hooks/useTotalYield";
+import { calculateNetAPR } from "../utils/calculateNetAPR";
+import { APRBreakdownTooltip } from "./apr-breakdown-tooltip";
+import { ChainBadge } from "./chain-list";
+
+interface OpportunitiesTableProps {
+  opportunities: Opportunity[];
+  currentNetwork?: number;
+  onSelectOpportunity: (opportunity: Opportunity) => void;
+  onChangeNetwork?: (chainId: number) => void;
+  onResetToken?: () => void;
+  onClose?: () => void;
+  userTvlByOpportunity?: Record<string, number>;
+  turtleTvl?: Record<string, number>;
+  isWidget?: boolean;
+}
+
+export function OpportunitiesTable({
+  opportunities,
+  currentNetwork,
+  onSelectOpportunity,
+  onChangeNetwork,
+  onResetToken,
+  onClose,
+  userTvlByOpportunity = {},
+  turtleTvl = {},
+  isWidget = false,
+}: OpportunitiesTableProps) {
+  const handleSelectOpportunity = (opportunity: Opportunity) => {
+    onSelectOpportunity(opportunity);
+    const opportunityChainId = Number(opportunity.receiptToken.chain.chainId);
+    if (currentNetwork && opportunityChainId !== currentNetwork && onChangeNetwork) {
+      onChangeNetwork(opportunityChainId);
+      // Reset token to trigger auto-selection of first token in new chain
+      onResetToken?.();
+    }
+    onClose?.();
+  };
+
+  const columns: ColumnDef<Opportunity>[] = [
+    {
+      accessorKey: "name",
+      header: () => <div>Opportunity</div>,
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2">
+          <div className="relative shrink-0">
+            <img
+              src={row.original.receiptToken.logoUrl}
+              className="size-6 rounded-full"
+              loading="lazy"
+              alt={row.original.receiptToken.name}
+            />
+            {row.original.receiptToken.chain.logoUrl && (
+              <img
+                src={row.original.receiptToken.chain.logoUrl}
+                alt={row.original.receiptToken.chain.name}
+                className="absolute right-[-5px] top-0 size-3 rounded-full"
+                loading="lazy"
+              />
+            )}
+          </div>
+          {row.original.name || row.original.receiptToken.name}
+        </div>
+      ),
+      enableSorting: true,
+    },
+    {
+      id: "type",
+      accessorFn: (row) => row.type ?? "-",
+      header: () => <div>Type</div>,
+      cell: ({ row }) =>
+        row.original.type ? (
+          <div className="text-sm capitalize">{row.original.type.toLowerCase()}</div>
+        ) : (
+          "-"
+        ),
+      enableSorting: true,
+    },
+    {
+      id: "organization",
+      accessorFn: (row) => (row.products.length ? row.products[0].organization.name : "-"),
+      header: () => <div>Partner</div>,
+      cell: ({ row }) =>
+        row.original.products.length ? (
+          <div className="flex h-[30px] items-center gap-2">
+            <img
+              src={row.original.products[0].organization.iconUrl || ""}
+              className="size-6 rounded-full"
+              loading="lazy"
+            />
+            {row.original.products[0].organization.name}
+          </div>
+        ) : (
+          "-"
+        ),
+      enableSorting: true,
+    },
+    {
+      id: "curator",
+      accessorFn: (row) => row.vaultConfig?.curator?.name ?? "-",
+      header: () => <div>Curator</div>,
+      cell: ({ row }) =>
+        row.original.vaultConfig?.curator ? (
+          <div className="flex h-[30px] items-center gap-2">
+            {row.original.vaultConfig.curator.iconUrl && (
+              <img
+                src={row.original.vaultConfig.curator.iconUrl}
+                className="size-6 rounded-full"
+                loading="lazy"
+                alt={row.original.vaultConfig.curator.name}
+              />
+            )}
+            {row.original.vaultConfig.curator.name}
+          </div>
+        ) : (
+          "-"
+        ),
+      enableSorting: true,
+    },
+    {
+      id: "provider",
+      accessorFn: (row) => row.vaultConfig?.infraProvider?.name ?? "-",
+      header: () => <div>Provider</div>,
+      cell: ({ row }) =>
+        row.original.vaultConfig?.infraProvider ? (
+          <div className="flex h-[30px] items-center gap-2">
+            {row.original.vaultConfig.infraProvider.iconUrl && (
+              <img
+                src={row.original.vaultConfig.infraProvider.iconUrl}
+                className="size-6 rounded-full"
+                loading="lazy"
+                alt={row.original.vaultConfig.infraProvider.name}
+              />
+            )}
+            {row.original.vaultConfig.infraProvider.name}
+          </div>
+        ) : (
+          "-"
+        ),
+      enableSorting: true,
+    },
+    {
+      id: "yourTvl",
+      accessorKey: "yourTvl",
+      header: () => <div className="flex w-full justify-end">Your TVL</div>,
+      cell: ({ row }) => {
+        const yourTvl = userTvlByOpportunity[row.original.id || ""] || 0;
+        return (
+          <div className="flex h-[30px] items-center justify-end text-end">
+            {formatCurrency(yourTvl, 0, true)}
+          </div>
+        );
+      },
+      enableSorting: true,
+      sortingFn: (rowA, rowB) => {
+        const a = userTvlByOpportunity[rowA.original.id || ""] || 0;
+        const b = userTvlByOpportunity[rowB.original.id || ""] || 0;
+        return a - b;
+      },
+    },
+    {
+      accessorKey: "turtleTvl",
+      header: () => <div className="flex w-full justify-end">Turtle TVL</div>,
+      cell: ({ row }) => {
+        const turtle = turtleTvl[row.original.id || ""] || 0;
+        return <div className="text-end">{formatCurrency(turtle, 0, true)}</div>;
+      },
+      enableSorting: true,
+    },
+    {
+      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>
+      ),
+      enableSorting: true,
+    },
+    {
+      accessorKey: "totalYield",
+      header: () => <div className="flex w-full justify-end">Est. APR</div>,
+      cell: ({ row }) => (
+        <div className="flex flex-row-reverse">
+          <APRBreakdownTooltip
+            incentives={row.original.incentives}
+            vaultConfig={row.original.vaultConfig ?? undefined}
+            isWidget={isWidget}
+          />
+        </div>
+      ),
+      enableSorting: true,
+      sortingFn: (rowA, rowB) => {
+        const a = calculateNetAPR(rowA.original.incentives, rowA.original.vaultConfig ?? undefined);
+        const b = calculateNetAPR(rowB.original.incentives, rowB.original.vaultConfig ?? undefined);
+        return a - b;
+      },
+    },
+  ];
+
+  return (
+    <DataTable
+      columns={columns}
+      onRowClick={handleSelectOpportunity}
+      data={opportunities}
+      enableSearch
+      grid={{
+        displayAsGrid: true,
+        headerSlot: "name",
+        rightSlot: "totalYield",
+        excludeColumns: ["turtleTvl", "type", "yourTvl"],
+        className: "grid-cols-1 gap-2.5",
+      }}
+    />
+  );
+}

package/src/opportunity-table/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useNetAPR } from "./useNetAPR";
+export { useTotalYield } from "./useTotalYield";

package/src/opportunity-table/hooks/useNetAPR.ts

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import type { Incentive, VaultConfig } from "@turtleclub/hooks";
+import { calculateNetAPR } from "../utils/calculateNetAPR";
+
+/**
+ * React hook that calculates the net APR after fees for an opportunity
+ * @param incentives - Array of incentive objects
+ * @param vaultConfig - Optional vault configuration with fee information
+ * @returns Memoized net APR after performance and management fees
+ */
+export function useNetAPR(incentives: Incentive[], vaultConfig?: VaultConfig) {
+  return useMemo(() => {
+    return calculateNetAPR(incentives, vaultConfig);
+  }, [incentives, vaultConfig]);
+}

package/src/opportunity-table/hooks/useTotalYield.ts

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+import type { Incentive } from "@turtleclub/hooks";
+
+export const getTotalYield = (incentives: Incentive[]) =>
+  incentives
+    .filter((i) => i.rewardType !== "points")
+    .reduce((acc, incentive) => acc + (incentive.yield ?? 0), 0);
+
+export const useTotalYield = (incentives: Incentive[]) => {
+  const totalYield = useMemo(() => getTotalYield(incentives), [incentives]);
+  return { totalYield };
+};

package/src/opportunity-table/utils/calculateNetAPR.ts

@@ -0,0 +1,37 @@
+import type { Incentive, VaultConfig } from "@turtleclub/hooks";
+
+/**
+ * Calculates the net APR after fees for an opportunity
+ * @param incentives - Array of incentive objects
+ * @param vaultConfig - Optional vault configuration with fee information
+ * @returns Net APR after performance and management fees
+ */
+export function calculateNetAPR(incentives: Incentive[], vaultConfig?: VaultConfig): number {
+  // Calculate total yield from all non-points incentives
+  const totalYield = incentives
+    .filter(
+      (incentive) => incentive.rewardType !== "points" && incentive.yield !== null && incentive.yield !== undefined,
+    )
+    .reduce((sum, incentive) => sum + (incentive.yield ?? 0), 0);
+
+  // If no vault config, return total yield
+  if (!vaultConfig) {
+    return totalYield;
+  }
+
+  // Identify native vault yield (base yield from the vault strategy itself)
+  const nativeYield = incentives
+    .filter(
+      (incentive) => incentive.name === "Native Yield" && incentive.yield !== null && incentive.yield !== undefined,
+    )
+    .reduce((sum, incentive) => sum + (incentive.yield ?? 0), 0);
+
+  const performanceFee = vaultConfig.performanceFee ?? 0;
+  const managementFee = vaultConfig.managementFee ?? 0;
+
+  // Performance fee applies only to native vault yield
+  const performanceFeeAmount = nativeYield === 0 ? 0 : (nativeYield * performanceFee) / 100;
+
+  // Net APR = total yield - performance fee on native - management fee on total
+  return totalYield - performanceFeeAmount - managementFee;
+}

package/src/opportunity-table/utils/index.ts

@@ -0,0 +1 @@
+export { calculateNetAPR } from "./calculateNetAPR";

package/src/route-details/index.ts

@@ -0,0 +1,2 @@
+export { RouteDetails } from "./route-details";
+export type { TokenStep } from "./route-details";

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

@@ -0,0 +1,100 @@
+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";
+import type { TokenStep } from "@turtleclub/hooks";
+
+export type { TokenStep } from "@turtleclub/hooks";
+
+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>
+  );
+};