@kodiak-finance/orderly-markets 2.8.20 → 2.8.21-beta.3

package/dist/index.js

@@ -4366,7 +4366,7 @@ var init_dataItem_ui = __esm({
           {
             open: hint ? void 0 : false,
             content: hint,
-            className: "oui-max-w-[330px] oui-bg-base-6 ",
+            className: "oui-max-w-[420px] oui-bg-base-6 ",
             arrow: { className: "oui-fill-base-6" },
             delayDuration: 300,
             children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5663,11 +5663,11 @@ var SymbolInfoBar = (props) => {
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gapX: 3, className: "oui-flex-1 oui-overflow-hidden oui-h-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gapX: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gapX: 2, itemAlign: "center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.TokenIcon, { symbol, size: "xs" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { direction: "column", itemAlign: "start", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gapX: 2, itemAlign: "center", children: [
               symbolView,
-              /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, itemAlign: "center", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Badge, { size: "xs", color: "primary", children: [
                   leverage,
                   "x"
@@ -5750,23 +5750,40 @@ var FundingRateHint = (props) => {
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 54, children: annualizedValue ? `${label}/ ${t("trading.fundingRate.annualized")}` : label }),
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", intensity: 54, className: "oui-whitespace-nowrap", children: annualizedValue ? `${label}/ ${t("trading.fundingRate.annualized")}` : label }),
       /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { itemAlign: "end", gap: 1, className: "oui-text-base-contrast-80", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 80, children: value }),
+        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", intensity: 80, className: "oui-font-semibold", children: value }),
         annualizedValue && " / ",
-        annualizedValue && annualizedValue
+        annualizedValue && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", intensity: 80, className: "oui-font-semibold", children: annualizedValue })
       ] })
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { width: "100%", itemAlign: "center", direction: "column", gap: 1, children: [
-    renderRow(
-      t("trading.fundingRate.predFundingRate.interval"),
-      fundingPeriod
-    ),
-    renderRow(
-      t("trading.fundingRate.predFundingRate.cap") + " / " + t("trading.fundingRate.predFundingRate.floor"),
-      capFunding + " / " + floorFunding
-    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", intensity: 54, className: "oui-flex-shrink-0", children: t("trading.fundingRate.predFundingRate.interval") }),
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", intensity: 80, className: "oui-flex-shrink-0", children: fundingPeriod })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Text, { size: "xs", intensity: 54, className: "oui-flex-shrink-0", children: [
+        t("trading.fundingRate.predFundingRate.cap"),
+        " /",
+        " ",
+        t("trading.fundingRate.predFundingRate.floor")
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        orderlyUi.Text,
+        {
+          size: "xs",
+          intensity: 80,
+          className: "oui-flex-shrink-0 oui-font-semibold oui-whitespace-nowrap",
+          children: [
+            capFunding,
+            " / ",
+            floorFunding
+          ]
+        }
+      )
+    ] }),
     renderRow(
       t("trading.fundingRate.lastFundingRate"),
       lastFundingRate,
@@ -5778,8 +5795,8 @@ var FundingRateHint = (props) => {
       estFundingRateAnnualized
     ),
     renderRow(t("trading.fundingRate.estimatedFundingFee"), estFundingFee),
-    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Divider, { className: "oui-w-full", intensity: 8 }),
-    t("markets.symbolInfoBar.predFundingRate.tooltip")
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Divider, { my: 4, className: "oui-w-full", intensity: 8 }),
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 54, children: t("markets.symbolInfoBar.predFundingRate.tooltip") })
   ] });
 };
 var useFundingRateHintScript = (symbol) => {