@orderly.network/vaults 2.8.2 → 2.8.3-alpha.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import React, { useState, useMemo, useEffect, useRef } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { useCollateral, useMaxWithdrawal, useTokenInfo, useAccount, useGetEnv, useTrack, useMutation, useConfig, usePrivateQuery } from '@orderly.network/hooks';
 import { create } from 'zustand';
 import { useTranslation } from '@orderly.network/i18n';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { uniqBy } from 'ramda';
-import { registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, Box, Text, Button, useScreen, cn, modal, useModal, SimpleDialog, SimpleSheet, toast, ArrowRightUpSquareFillIcon, ChevronUpIcon, ChevronDownIcon, Divider, TokenIcon } from '@orderly.network/ui';
+import { registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, Box, Text, Button, useScreen, cn, modal, useModal, SimpleDialog, SimpleSheet, toast, ArrowRightUpSquareFillIcon, Tooltip, InfoCircleIcon, Divider, TokenIcon } from '@orderly.network/ui';
 import { TrackerEventName, EMPTY_LIST } from '@orderly.network/types';
 import { Decimal } from '@orderly.network/utils';
 import { BrokerWallet, QuantityInput, AvailableQuantity } from '@orderly.network/ui-transfer';
@@ -2081,22 +2081,37 @@ var init_vaultCard_ui = __esm({
         isButtonsDisabled
       } = props;
       const { t } = useTranslation();
-      const isPreLaunch = vaultInfo.status === "pre_launch";
       const { isMobile } = useScreen();
-      const [isExpanded, setIsExpanded] = useState(false);
-      const [showExpandButton, setShowExpandButton] = useState(false);
-      const descriptionRef = useRef(null);
-      useEffect(() => {
-        if (descriptionRef.current) {
-          const lineHeight = 18;
-          const maxHeight = lineHeight * 3;
-          const actualHeight = descriptionRef.current.scrollHeight;
-          setShowExpandButton(actualHeight > maxHeight);
+      const getStatusTag = () => {
+        const { status } = vaultInfo;
+        if (status === "live") {
+          return {
+            text: t("vaults.card.status.active"),
+            color: "#00C076",
+            bgColor: "rgba(0, 192, 118, 0.15)"
+          };
+        } else if (status === "pre_launch") {
+          return {
+            text: t("vaults.card.launchingSoon"),
+            color: "#E88800",
+            bgColor: "rgba(232, 136, 0, 0.15)"
+          };
+        } else if (status === "closing") {
+          return {
+            text: t("vaults.card.status.closing"),
+            color: "#FF6B6B",
+            bgColor: "rgba(255, 107, 107, 0.15)"
+          };
+        } else if (status === "closed") {
+          return {
+            text: t("vaults.card.status.closed"),
+            color: "#999999",
+            bgColor: "rgba(153, 153, 153, 0.15)"
+          };
         }
-      }, [description]);
-      const handleToggleExpand = () => {
-        setIsExpanded(!isExpanded);
+        return null;
       };
+      const statusTag = getStatusTag();
       useMemo(() => {
         const chains = Array.isArray(vaultInfo?.supported_chains) ? vaultInfo.supported_chains : [];
         return /* @__PURE__ */ jsx("div", { className: "oui-flex oui-items-center", children: chains.map((chain, index) => /* @__PURE__ */ jsx(
@@ -2116,134 +2131,58 @@ var init_vaultCard_ui = __esm({
           chain.chain_id
         )) });
       }, [vaultInfo.supported_chains, isMobile]);
-      return /* @__PURE__ */ jsxs("div", { className: "oui-relative oui-h-[388px] oui-overflow-hidden oui-rounded-2xl oui-border oui-border-solid oui-border-white/[0.12] oui-bg-base-9", children: [
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: "/vaults/vaults-card-bg.png",
-            alt: "",
-            style: {
-              position: "absolute",
-              top: 0,
-              right: 0,
-              width: "100%",
-              height: "180px",
-              objectFit: "cover",
-              objectPosition: "top",
-              zIndex: 0
-            },
-            onError: (e) => {
-              e.currentTarget.style.display = "none";
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "oui-absolute oui-left-0 oui-top-0 oui-z-20 oui-size-full oui-p-6",
-              isExpanded && "oui-overflow-y-auto"
-            ),
-            children: /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: icon,
-                    alt: vaultInfo.broker_id,
-                    className: "oui-size-8",
-                    onError: (e) => {
-                      e.currentTarget.style.display = "none";
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "oui-text-[18px] oui-font-semibold oui-text-white", children: title }),
-                isPreLaunch && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "oui-flex oui-items-center oui-gap-[10px] oui-px-2 oui-text-[#E88800]",
-                    style: {
-                      height: "18px",
-                      borderRadius: "4px",
-                      background: "rgba(232, 136, 0, 0.15)",
-                      fontSize: "12px",
-                      fontWeight: 600,
-                      lineHeight: "18px",
-                      letterSpacing: "0.36px"
-                    },
-                    children: t("vaults.card.launchingSoon")
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "oui-z-50 oui-ml-auto oui-cursor-pointer",
-                    onClick: openVaultWebsite,
-                    children: /* @__PURE__ */ jsx(
-                      ArrowRightUpSquareFillIcon,
-                      {
-                        color: "white",
-                        width: 18,
-                        height: 18,
-                        viewBox: "0 0 18 18"
-                      }
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsx("div", { className: "oui-relative oui-h-[435px] oui-overflow-hidden oui-rounded-2xl oui-bg-base-9", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "oui-absolute oui-left-0 oui-top-0 oui-z-20 oui-size-full oui-p-6",
+            "oui-overflow-y-auto oui-custom-scrollbar"
+          ),
+          children: /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "oui-text-[18px] oui-font-semibold oui-text-white oui-break-words", children: title }),
+              statusTag && /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn(
-                    "-oui-mb-1 oui-flex oui-flex-col",
-                    !isExpanded && "oui-h-[72px]"
-                  ),
+                  className: "oui-flex oui-w-fit oui-items-center oui-gap-[10px] oui-px-2",
+                  style: {
+                    height: "18px",
+                    borderRadius: "4px",
+                    background: statusTag.bgColor,
+                    color: statusTag.color,
+                    fontSize: "12px",
+                    fontWeight: 600,
+                    lineHeight: "18px",
+                    letterSpacing: "0.36px"
+                  },
+                  children: statusTag.text
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "oui-h-[54px]", children: /* @__PURE__ */ jsx("div", { className: "oui-text-2xs oui-font-normal oui-leading-[18px] oui-text-base-contrast-54 oui-line-clamp-3", children: parseMarkdownLinks(description) }) }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: openVaultWebsite,
+                  className: "oui-flex oui-w-fit oui-items-center oui-gap-1 oui-text-xs oui-font-medium",
+                  style: { color: "#608CFF" },
                   children: [
+                    /* @__PURE__ */ jsx("span", { children: t("vaults.card.viewMore") }),
                     /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        ref: descriptionRef,
-                        className: cn(
-                          "oui-text-2xs oui-font-normal oui-leading-[18px] oui-text-base-contrast-54",
-                          !isExpanded && showExpandButton && "oui-line-clamp-3"
-                        ),
-                        children: parseMarkdownLinks(description)
-                      }
-                    ),
-                    showExpandButton && /* @__PURE__ */ jsx(
-                      "button",
+                      ArrowRightUpSquareFillIcon,
                       {
-                        onClick: handleToggleExpand,
-                        className: "oui-self-end oui-inline-flex oui-shrink-0 oui-cursor-pointer oui-items-center oui-gap-0.5 oui-text-[12px] oui-font-medium",
                         style: { color: "#608CFF" },
-                        children: isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx("span", { children: t("vaults.card.less") }),
-                          /* @__PURE__ */ jsx(
-                            ChevronUpIcon,
-                            {
-                              size: 12,
-                              opacity: 1,
-                              color: "inherit",
-                              className: "oui-translate-y-[0.5px]"
-                            }
-                          )
-                        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx("span", { children: t("vaults.card.more") }),
-                          /* @__PURE__ */ jsx(
-                            ChevronDownIcon,
-                            {
-                              size: 12,
-                              opacity: 1,
-                              color: "inherit",
-                              className: "oui-translate-y-[0.5px]"
-                            }
-                          )
-                        ] })
+                        width: 16,
+                        height: 16,
+                        viewBox: "0 0 18 18"
                       }
                     )
                   ]
                 }
-              ),
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-6", children: [
               /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-gap-2", children: [
                 /* @__PURE__ */ jsx(
                   VaultInfoItem,
@@ -2261,15 +2200,17 @@ var init_vaultCard_ui = __esm({
                   VaultInfoItem,
                   {
                     label: t("vaults.card.apy"),
-                    value: vaultInfo["30d_apy"] > 100 ? ">10000%" : (vaultInfo["30d_apy"] * 100).toFixed(2) + "%",
+                    value: vaultInfo.status === "pre_launch" || vaultInfo.vault_age !== null && vaultInfo.vault_age < 30 ? "--" : vaultInfo["30d_apy"] > 100 ? ">10000%" : (vaultInfo["30d_apy"] * 100).toFixed(2) + "%",
                     textProps: {
                       color: "brand",
                       type: "gradient"
-                    }
+                    },
+                    showTooltip: vaultInfo.status === "pre_launch" || vaultInfo.vault_age !== null && vaultInfo.vault_age < 30,
+                    tooltipContent: "APY is not calculated for vaults that are less than 30 days old."
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "oui-mt-3 oui-flex oui-flex-col oui-items-center oui-gap-2 oui-rounded-lg oui-bg-white/[0.06] oui-p-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-items-center oui-gap-2 oui-rounded-lg oui-bg-white/[0.06] oui-p-3", children: [
                 /* @__PURE__ */ jsx(
                   LpInfoItem,
                   {
@@ -2284,7 +2225,9 @@ var init_vaultCard_ui = __esm({
                     value: lpInfo.earnings
                   }
                 )
-              ] }),
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-4 oui-mt-2", children: [
               /* @__PURE__ */ jsx(
                 LpInfoItem,
                 {
@@ -2302,12 +2245,12 @@ var init_vaultCard_ui = __esm({
                 }
               )
             ] })
-          }
-        )
-      ] });
+          ] })
+        }
+      ) });
     };
     VaultInfoItem = (props) => {
-      const { label, value, textProps } = props;
+      const { label, value, textProps, showTooltip, tooltipContent } = props;
       return /* @__PURE__ */ jsxs(
         "div",
         {
@@ -2316,7 +2259,17 @@ var init_vaultCard_ui = __esm({
             "oui-rounded-lg oui-border oui-border-solid oui-border-white/[0.12]"
           ),
           children: [
-            /* @__PURE__ */ jsx("div", { className: "oui-text-2xs oui-font-normal oui-leading-[18px] oui-text-base-contrast-54", children: label }),
+            /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-gap-1 oui-text-2xs oui-font-normal oui-leading-[18px] oui-text-base-contrast-54", children: [
+              label,
+              showTooltip && tooltipContent && /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, delayDuration: 100, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                InfoCircleIcon,
+                {
+                  size: 12,
+                  opacity: 0.54,
+                  className: "oui-text-base-contrast"
+                }
+              ) }) })
+            ] }),
             textProps.type === "gradient" ? /* @__PURE__ */ jsx(
               Text.gradient,
               {
@@ -2416,6 +2369,11 @@ var init_vaults_list = __esm({
       const { t } = useTranslation();
       const [sortField, setSortField] = useState("apy");
       const [sortDirection, setSortDirection] = useState("desc");
+      const shouldShowApyTooltip = useMemo(() => {
+        return vaults.some(
+          (vault) => vault.status === "pre_launch" || vault.vault_age !== null && vault.vault_age < 30
+        );
+      }, [vaults]);
       const handleSort = (field) => {
         if (sortField === field) {
           setSortDirection(sortDirection === "asc" ? "desc" : "asc");
@@ -2492,17 +2450,34 @@ var init_vaults_list = __esm({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => handleSort("apy"),
-              className: "oui-flex oui-items-center oui-text-2xs oui-font-normal oui-text-base-contrast-54 hover:oui-text-base-contrast",
-              children: [
-                t("vaults.card.apy"),
-                /* @__PURE__ */ jsx(SortIcon, { field: "apy" })
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-gap-1", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleSort("apy"),
+                className: "oui-flex oui-items-center oui-text-2xs oui-font-normal oui-text-base-contrast-54 hover:oui-text-base-contrast",
+                children: [
+                  t("vaults.card.apy"),
+                  /* @__PURE__ */ jsx(SortIcon, { field: "apy" })
+                ]
+              }
+            ),
+            shouldShowApyTooltip && /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: "APY is not calculated for vaults that are less than 30 days old.",
+                delayDuration: 100,
+                children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  InfoCircleIcon,
+                  {
+                    size: 12,
+                    opacity: 0.54,
+                    className: "oui-text-base-contrast"
+                  }
+                ) })
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxs(
             "button",
             {
@@ -2546,9 +2521,39 @@ var init_vaults_list = __esm({
         icon,
         isButtonsDisabled
       } = script;
-      const isPreLaunch = vaultInfo.status === "pre_launch";
+      vaultInfo.status === "pre_launch";
       const { isMobile } = useScreen();
-      const supportVaultsList = useMemo(() => {
+      const getStatusTag = () => {
+        const { status } = vaultInfo;
+        if (status === "live") {
+          return {
+            text: t("vaults.card.status.active"),
+            color: "#00C076",
+            bgColor: "rgba(0, 192, 118, 0.15)"
+          };
+        } else if (status === "pre_launch") {
+          return {
+            text: t("vaults.card.launchingSoon"),
+            color: "#E88800",
+            bgColor: "rgba(232, 136, 0, 0.15)"
+          };
+        } else if (status === "closing") {
+          return {
+            text: t("vaults.card.status.closing"),
+            color: "#FF6B6B",
+            bgColor: "rgba(255, 107, 107, 0.15)"
+          };
+        } else if (status === "closed") {
+          return {
+            text: t("vaults.card.status.closed"),
+            color: "#999999",
+            bgColor: "rgba(153, 153, 153, 0.15)"
+          };
+        }
+        return null;
+      };
+      const statusTag = getStatusTag();
+      useMemo(() => {
         const chains = Array.isArray(vaultInfo?.supported_chains) ? vaultInfo.supported_chains : [];
         const ICON_SIZE = isMobile ? 18 : 20;
         return /* @__PURE__ */ jsx("div", { className: "oui-flex oui-items-center", children: chains.map((chain, index) => /* @__PURE__ */ jsx(
@@ -2570,80 +2575,49 @@ var init_vaults_list = __esm({
           chain.chain_id
         )) });
       }, [vaultInfo.supported_chains, isMobile]);
-      return /* @__PURE__ */ jsxs("div", { className: "oui-relative oui-grid oui-grid-cols-[2fr_1fr_1fr_1fr_1fr_1fr_1.5fr] oui-gap-4 oui-rounded-lg oui-border oui-border-solid oui-border-white/[0.12] oui-bg-base-9 oui-px-4 oui-py-4 oui-items-center oui-overflow-hidden", children: [
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: "/vaults/vaults-list-bg.png",
-            alt: "",
-            style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "40%",
-              height: "100%",
-              objectFit: "cover",
-              objectPosition: "left",
-              zIndex: 0
-            },
-            onError: (e) => {
-              e.currentTarget.style.display = "none";
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "oui-relative oui-z-10 oui-flex oui-items-center oui-gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: icon,
-              alt: vaultInfo.broker_id,
-              className: "oui-size-10 oui-rounded-full",
-              onError: (e) => {
-                e.currentTarget.style.display = "none";
+      return /* @__PURE__ */ jsxs("div", { className: "oui-relative oui-grid oui-grid-cols-[2fr_1fr_1fr_1fr_1fr_1fr_1.5fr] oui-gap-4 oui-rounded-2xl oui-bg-base-9 oui-px-4 oui-py-4 oui-items-center oui-overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "oui-relative oui-z-10 oui-flex oui-items-center oui-gap-2", children: /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "oui-text-sm oui-font-semibold oui-text-base-contrast", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-wrap oui-items-center oui-gap-2", children: [
+            statusTag && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "oui-flex oui-items-center oui-gap-[10px] oui-px-2 oui-whitespace-nowrap oui-flex-shrink-0",
+                style: {
+                  height: "18px",
+                  borderRadius: "4px",
+                  background: statusTag.bgColor,
+                  color: statusTag.color,
+                  fontSize: "12px",
+                  fontWeight: 600,
+                  lineHeight: "18px",
+                  letterSpacing: "0.36px"
+                },
+                children: statusTag.text
               }
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "oui-text-sm oui-font-semibold oui-text-base-contrast", children: title }),
-            /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-wrap oui-items-center oui-gap-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "oui-flex oui-items-center oui-gap-2 oui-flex-shrink-0", children: supportVaultsList }),
-              /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-gap-2 oui-flex-shrink-0", children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: openVaultWebsite,
-                    className: "oui-flex oui-items-center oui-justify-center oui-flex-shrink-0",
-                    children: /* @__PURE__ */ jsx(
-                      ArrowRightUpSquareFillIcon,
-                      {
-                        className: "oui-text-base-contrast-54",
-                        width: 14,
-                        height: 14,
-                        viewBox: "0 0 18 18"
-                      }
-                    )
-                  }
-                ),
-                isPreLaunch && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "oui-flex oui-items-center oui-gap-[10px] oui-px-2 oui-text-[#E88800] oui-whitespace-nowrap oui-flex-shrink-0",
-                    style: {
-                      height: "18px",
-                      borderRadius: "4px",
-                      background: "rgba(232, 136, 0, 0.15)",
-                      fontSize: "12px",
-                      fontWeight: 600,
-                      lineHeight: "18px",
-                      letterSpacing: "0.36px"
-                    },
-                    children: t("vaults.card.launchingSoon")
-                  }
-                )
-              ] })
-            ] })
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: openVaultWebsite,
+                className: "oui-flex oui-items-center oui-gap-1 oui-text-xs oui-font-medium",
+                style: { color: "#608CFF" },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: t("vaults.card.viewMore") }),
+                  /* @__PURE__ */ jsx(
+                    ArrowRightUpSquareFillIcon,
+                    {
+                      style: { color: "#608CFF" },
+                      width: 16,
+                      height: 16,
+                      viewBox: "0 0 18 18"
+                    }
+                  )
+                ]
+              }
+            )
           ] })
-        ] }),
+        ] }) }),
         /* @__PURE__ */ jsx("div", { className: "oui-relative oui-z-10", children: /* @__PURE__ */ jsx(
           Text.numeral,
           {
@@ -2653,7 +2627,7 @@ var init_vaults_list = __esm({
             children: vaultInfo.tvl
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "oui-relative oui-z-10", children: /* @__PURE__ */ jsx(Text.gradient, { className: "oui-text-sm oui-font-semibold", color: "brand", children: vaultInfo["30d_apy"] > 100 ? ">10000%" : `${(vaultInfo["30d_apy"] * 100).toFixed(2)}%` }) }),
+        /* @__PURE__ */ jsx("div", { className: "oui-relative oui-z-10", children: /* @__PURE__ */ jsx(Text.gradient, { className: "oui-text-sm oui-font-semibold", color: "brand", children: vaultInfo.status === "pre_launch" || vaultInfo.vault_age !== null && vaultInfo.vault_age < 30 ? "--" : vaultInfo["30d_apy"] > 100 ? ">10000%" : `${(vaultInfo["30d_apy"] * 100).toFixed(2)}%` }) }),
         /* @__PURE__ */ jsx("div", { className: "oui-relative oui-z-10", children: /* @__PURE__ */ jsx(
           Text.numeral,
           {