@deframe-sdk/components 0.1.57 → 0.1.59

package/dist/index.d.mts

@@ -1594,10 +1594,11 @@ interface SwapAdvancedSettingsViewProps {
     title: string;
     isOpen: boolean;
     onOpenChange: (open: boolean) => void;
-    slippageBps: number;
-    onSlippageSelect: (bps: number) => void;
-    formatPercentage: (bps: number) => string;
-    slippageOptions: number[];
+    slippageBps: number | undefined;
+    onSlippageSelect: (bps: number | undefined) => void;
+    formatPercentage: (bps: number | undefined) => string;
+    slippageOptions: (number | undefined)[];
+    slippageLabel: string;
     percentageOptions: number[];
     onPercentageClick: (pct: number) => void;
     slippageFormatted: string;
@@ -2192,6 +2193,8 @@ interface EarnDesktopLabels {
     historyAriaLabel?: string;
     columnStrategy?: string;
     columnYield?: string;
+    columnApy?: string;
+    columnProfit?: string;
     columnInvested?: string;
     totalInvestedLabel?: string;
     totalInvestedDescription?: string;

package/dist/index.d.ts

@@ -1594,10 +1594,11 @@ interface SwapAdvancedSettingsViewProps {
     title: string;
     isOpen: boolean;
     onOpenChange: (open: boolean) => void;
-    slippageBps: number;
-    onSlippageSelect: (bps: number) => void;
-    formatPercentage: (bps: number) => string;
-    slippageOptions: number[];
+    slippageBps: number | undefined;
+    onSlippageSelect: (bps: number | undefined) => void;
+    formatPercentage: (bps: number | undefined) => string;
+    slippageOptions: (number | undefined)[];
+    slippageLabel: string;
     percentageOptions: number[];
     onPercentageClick: (pct: number) => void;
     slippageFormatted: string;
@@ -2192,6 +2193,8 @@ interface EarnDesktopLabels {
     historyAriaLabel?: string;
     columnStrategy?: string;
     columnYield?: string;
+    columnApy?: string;
+    columnProfit?: string;
     columnInvested?: string;
     totalInvestedLabel?: string;
     totalInvestedDescription?: string;

package/dist/index.js

@@ -6072,7 +6072,7 @@ var SwapToCardView = ({
   ] }) });
 };
 var baseClasses = [
-  "inline-flex items-center justify-center",
+  "flex-1 inline-flex items-center justify-center",
   "py-[3px] px-[10px]",
   "rounded-[var(--deframe-widget-size-radius-full)]",
   "cursor-pointer text-[12px] transition-all duration-150 outline-none",
@@ -6097,7 +6097,7 @@ var stateClasses = {
 };
 function SlippageChip({
   options = [],
-  selected = null,
+  selected = void 0,
   onSelect,
   formatLabel,
   className
@@ -6107,7 +6107,7 @@ function SlippageChip({
     {
       "data-test-id": "slippage-chips",
       "data-slot": "slippage-chips",
-      className: tailwindMerge.twMerge("flex gap-[6px] items-center", className),
+      className: tailwindMerge.twMerge("flex w-full gap-sm", className),
       children: options.map((bps) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -6118,7 +6118,7 @@ function SlippageChip({
           className: tailwindMerge.twMerge(baseClasses, stateClasses[bps === selected ? "active" : "default"]),
           children: formatLabel(bps)
         },
-        bps
+        String(bps)
       ))
     }
   );
@@ -6131,6 +6131,7 @@ var SwapAdvancedSettingsView = ({
   onSlippageSelect,
   formatPercentage,
   slippageOptions,
+  slippageLabel,
   percentageOptions,
   onPercentageClick,
   slippageFormatted,
@@ -6148,15 +6149,6 @@ var SwapAdvancedSettingsView = ({
       collapseText,
       expandText,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SlippageChip,
-          {
-            options: slippageOptions,
-            selected: slippageBps,
-            onSelect: onSlippageSelect,
-            formatLabel: formatPercentage
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full gap-sm", children: percentageOptions.map((pct, index) => {
           const isMax = index === percentageOptions.length - 1;
           const label = isMax ? maxLabel : `${pct / 100}%`;
@@ -6169,7 +6161,19 @@ var SwapAdvancedSettingsView = ({
             },
             pct
           );
-        }) })
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)]", children: slippageLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SlippageChip,
+            {
+              options: slippageOptions,
+              selected: slippageBps,
+              onSelect: onSlippageSelect,
+              formatLabel: formatPercentage
+            }
+          )
+        ] })
       ] })
     }
   ) }) });
@@ -7772,13 +7776,13 @@ function SlippageDetailRow({ label, options, selected, onSelect: handleSelect, f
     "div",
     {
       "data-test-id": "swap-form-simple-slippage-row",
-      className: "flex justify-between items-center py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
+      className: "flex flex-col py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             "data-test-id": "swap-form-simple-detail-row-label",
-            className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] flex-shrink-0",
+            className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
             children: label
           }
         ),
@@ -7789,7 +7793,7 @@ function SlippageDetailRow({ label, options, selected, onSelect: handleSelect, f
             selected,
             onSelect: handleSelect,
             formatLabel,
-            className: "gap-[4px] [&_button]:py-[2px] [&_button]:px-[7px] [&_button]:text-[11px]"
+            className: "w-full gap-[4px] [&_button]:py-[2px] [&_button]:px-[7px] [&_button]:text-[11px]"
           }
         )
       ]
@@ -10528,7 +10532,7 @@ var ImageBannerCard = ({
     }
   );
 };
-var GRID_COLS = "grid grid-cols-[1fr_100px_130px] gap-x-[var(--deframe-widget-size-gap-md)]";
+var GRID_COLS = "grid grid-cols-[1fr_100px_100px_100px] gap-x-[var(--deframe-widget-size-gap-md)]";
 var HISTORY_COLORS = {
   deposit: "var(--deframe-widget-color-state-info)",
   withdraw: "var(--deframe-widget-color-text-secondary)",
@@ -10540,6 +10544,7 @@ var EarnHubStrategyCard = ({
   network,
   investedFormatted,
   earningsFormatted,
+  profitFormatted,
   isLoading,
   onInvestClick,
   onWithdrawClick,
@@ -10590,6 +10595,7 @@ var EarnHubStrategyCard = ({
                   children: earningsFormatted
                 }
               ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 50, height: 16 }) : profitFormatted ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)] leading-none", children: profitFormatted }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "\u2014" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-[var(--deframe-widget-size-gap-xs)]", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-end", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 60, height: 16 }) : investedFormatted ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)]", children: investedFormatted }),
@@ -10793,7 +10799,7 @@ var columnHeaderClasses = [
   "text-[color:var(--deframe-widget-color-text-tertiary)]",
   "leading-[var(--deframe-widget-font-leading-xs)]"
 ].join(" ");
-var GRID_COLS2 = "grid grid-cols-[1fr_100px_130px] gap-x-[var(--deframe-widget-size-gap-md)]";
+var GRID_COLS2 = "grid grid-cols-[1fr_100px_100px_100px] gap-x-[var(--deframe-widget-size-gap-md)]";
 var BANNER_COLORS = [
   "var(--deframe-widget-color-brand-primary)",
   "var(--deframe-widget-color-brand-secondary)"
@@ -10890,6 +10896,7 @@ var EarnDesktopViewSimple = ({
         network: p.strategy.network,
         investedFormatted: formatCurrency(p.spotPosition.underlyingBalanceUSD),
         earningsFormatted: `${(p.spotPosition.apy * 100).toFixed(2)}%`,
+        profitFormatted: formatCurrency(p.spotPosition.profitInUSD),
         isLoading: false,
         history: (_a = historyByAsset.get(p.strategy.assetName.toUpperCase())) != null ? _a : [],
         onInvestClick: onDeposit ? () => onDeposit(p.strategy.id) : () => {
@@ -11040,13 +11047,13 @@ var EarnDesktopViewSimple = ({
               "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
               "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
             ),
-            children: [labels == null ? void 0 : labels.columnStrategy, labels == null ? void 0 : labels.columnYield, labels == null ? void 0 : labels.columnInvested].map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            children: [labels == null ? void 0 : labels.columnStrategy, labels == null ? void 0 : labels.columnApy, labels == null ? void 0 : labels.columnProfit, labels == null ? void 0 : labels.columnInvested].map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 className: tailwindMerge.twMerge(
                   columnHeaderClasses,
-                  i === 1 && "text-center",
-                  i === 2 && "text-right"
+                  (i === 1 || i === 2) && "text-center",
+                  i === 3 && "text-right"
                 ),
                 children: label
               },
@@ -16386,6 +16393,7 @@ var OnrampFormSimpleView = ({
   error
 }) => {
   const hasPixCode = !!pixCode;
+  const isWaitingForPixPayment = hasPixCode && !isExpired;
   const isSubmitDisabled = !amount || amount === "0" || amount === "" || isBelowMinAmount || hasNoAmount || isProcessing;
   const panelBaseClasses = [
     "relative flex flex-col overflow-hidden w-[420px]",
@@ -16432,6 +16440,61 @@ var OnrampFormSimpleView = ({
     "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
     "hover:text-[color:var(--deframe-widget-color-text-primary)]"
   ].join(" ");
+  let footerContent;
+  if (!hasPixCode) {
+    footerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SecondaryButton,
+        {
+          type: "button",
+          className: secondaryButtonClasses,
+          onClick: onBack,
+          "aria-label": "Cancelar dep\xF3sito",
+          "data-test-id": "onramp-form-simple-view-cancel",
+          children: "Cancelar"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PrimaryButton,
+        {
+          type: "button",
+          className: "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)] text-[15px]",
+          onClick: onSubmit,
+          disabled: isSubmitDisabled,
+          "aria-label": submitLabel,
+          "data-test-id": "onramp-form-simple-view-submit",
+          children: isProcessing ? "Processando..." : submitLabel
+        }
+      )
+    ] });
+  } else if (isWaitingForPixPayment) {
+    footerContent = /* @__PURE__ */ jsxRuntime.jsxs(
+      PrimaryButton,
+      {
+        type: "button",
+        className: "w-full h-12 rounded-[var(--deframe-widget-size-radius-sm)] text-[15px]",
+        disabled: true,
+        "aria-label": "Aguardando pagamento PIX",
+        "data-test-id": "onramp-form-simple-view-waiting-payment",
+        children: [
+          "Aguardando pagamento ",
+          /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+        ]
+      }
+    );
+  } else {
+    footerContent = /* @__PURE__ */ jsxRuntime.jsx(
+      SecondaryButton,
+      {
+        type: "button",
+        className: tailwindMerge.twMerge(secondaryButtonClasses, "w-full"),
+        onClick: onBack,
+        "aria-label": "Cancelar",
+        "data-test-id": "onramp-form-simple-view-cancel",
+        children: "Cancelar"
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -16768,41 +16831,7 @@ var OnrampFormSimpleView = ({
             "data-slot": "onramp-form-simple-footer",
             "data-test-id": "onramp-form-simple-view-footer",
             className: footerBaseClasses,
-            children: !hasPixCode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SecondaryButton,
-                {
-                  type: "button",
-                  className: secondaryButtonClasses,
-                  onClick: onBack,
-                  "aria-label": "Cancelar dep\xF3sito",
-                  "data-test-id": "onramp-form-simple-view-cancel",
-                  children: "Cancelar"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                PrimaryButton,
-                {
-                  type: "button",
-                  className: "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)] text-[15px]",
-                  onClick: onSubmit,
-                  disabled: isSubmitDisabled,
-                  "aria-label": submitLabel,
-                  "data-test-id": "onramp-form-simple-view-submit",
-                  children: isProcessing ? "Processando..." : submitLabel
-                }
-              )
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-              SecondaryButton,
-              {
-                type: "button",
-                className: tailwindMerge.twMerge(secondaryButtonClasses, "w-full"),
-                onClick: onBack,
-                "aria-label": "Cancelar",
-                "data-test-id": "onramp-form-simple-view-cancel",
-                children: "Cancelar"
-              }
-            )
+            children: footerContent
           }
         )
       ]