@deframe-sdk/components 0.1.58 → 0.1.60

package/dist/index.d.mts

@@ -2193,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

@@ -2193,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

@@ -5269,7 +5269,7 @@ var SwapSignatureWarningViewSimple = ({
   React6.useEffect(() => {
     const timer = setTimeout(() => {
       onCancel == null ? void 0 : onCancel();
-    }, 3e3);
+    }, 2e3);
     return () => clearTimeout(timer);
   }, [onCancel]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5461,7 +5461,12 @@ function SuccessIcon() {
     }
   );
 }
-var SwapSuccessViewSimple = ({ labels }) => {
+var SwapSuccessViewSimple = ({ labels, onClose }) => {
+  React6__namespace.default.useEffect(() => {
+    if (!onClose) return;
+    const timer = setTimeout(onClose, 2e3);
+    return () => clearTimeout(timer);
+  }, [onClose]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -5663,8 +5668,14 @@ function ErrorIcon() {
 }
 var SwapTransactionFailedViewSimple = ({
   errorTitle,
-  errorDescription
+  errorDescription,
+  onBack
 }) => {
+  React6__namespace.default.useEffect(() => {
+    if (!onBack) return;
+    const timer = setTimeout(onBack, 2e3);
+    return () => clearTimeout(timer);
+  }, [onBack]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -10532,7 +10543,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)",
@@ -10544,6 +10555,7 @@ var EarnHubStrategyCard = ({
   network,
   investedFormatted,
   earningsFormatted,
+  profitFormatted,
   isLoading,
   onInvestClick,
   onWithdrawClick,
@@ -10594,6 +10606,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 }),
@@ -10797,7 +10810,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)"
@@ -10894,6 +10907,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) : () => {
@@ -11044,13 +11058,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
               },
@@ -13419,7 +13433,7 @@ var EarnDepositSuccessSimpleView = ({
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onClose) return;
-    const timer = setTimeout(onClose, 5e3);
+    const timer = setTimeout(onClose, 2e3);
     return () => clearTimeout(timer);
   }, [onClose]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -13509,7 +13523,7 @@ var EarnDepositWarningSimpleView = ({
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onBack) return;
-    const timer = setTimeout(onBack, 5e3);
+    const timer = setTimeout(onBack, 2e3);
     return () => clearTimeout(timer);
   }, [onBack]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-warning-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -13601,7 +13615,7 @@ var EarnDepositFailedSimpleView = ({
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onBack) return;
-    const timer = setTimeout(onBack, 5e3);
+    const timer = setTimeout(onBack, 2e3);
     return () => clearTimeout(timer);
   }, [onBack]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-failed-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -13787,7 +13801,7 @@ var EarnWithdrawSuccessSimpleView = ({
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onClose) return;
-    const timer = setTimeout(onClose, 5e3);
+    const timer = setTimeout(onClose, 2e3);
     return () => clearTimeout(timer);
   }, [onClose]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -13877,7 +13891,7 @@ var EarnWithdrawWarningSimpleView = ({
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onBack) return;
-    const timer = setTimeout(onBack, 5e3);
+    const timer = setTimeout(onBack, 2e3);
     return () => clearTimeout(timer);
   }, [onBack]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-warning-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -13969,7 +13983,7 @@ var EarnWithdrawFailedSimpleView = ({
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onBack) return;
-    const timer = setTimeout(onBack, 5e3);
+    const timer = setTimeout(onBack, 2e3);
     return () => clearTimeout(timer);
   }, [onBack]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-failed-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -14690,7 +14704,7 @@ var OnchainDepositSuccessSimpleView = ({
 }) => {
   React6__namespace.useEffect(() => {
     if (!onClose) return;
-    const timer = setTimeout(onClose, 5e3);
+    const timer = setTimeout(onClose, 2e3);
     return () => clearTimeout(timer);
   }, [onClose]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onchain-deposit-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -15603,7 +15617,7 @@ var OnchainWithdrawSuccessSimpleView = ({
 }) => {
   React6__namespace.useEffect(() => {
     if (!onClose) return;
-    const timer = setTimeout(onClose, 5e3);
+    const timer = setTimeout(onClose, 2e3);
     return () => clearTimeout(timer);
   }, [onClose]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onchain-withdraw-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -16083,7 +16097,7 @@ var OnchainWithdrawSignatureWarningSimpleView = ({
 }) => {
   React6__namespace.useEffect(() => {
     if (!onCancel) return;
-    const timer = setTimeout(onCancel, 5e3);
+    const timer = setTimeout(onCancel, 2e3);
     return () => clearTimeout(timer);
   }, [onCancel]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onchain-withdraw-signature-warning-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -16390,6 +16404,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]",
@@ -16436,6 +16451,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",
     {
@@ -16772,41 +16842,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
           }
         )
       ]
@@ -17012,7 +17048,7 @@ var OnrampSuccessSimpleView = ({
 }) => {
   React6__namespace.useEffect(() => {
     if (!onGoToDashboard) return;
-    const timer = setTimeout(onGoToDashboard, 5e3);
+    const timer = setTimeout(onGoToDashboard, 2e3);
     return () => clearTimeout(timer);
   }, [onGoToDashboard]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onramp-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -18010,7 +18046,7 @@ var OfframpSuccessSimpleView = ({
 }) => {
   React6__namespace.useEffect(() => {
     if (!onClose) return;
-    const timer = setTimeout(onClose, 5e3);
+    const timer = setTimeout(onClose, 2e3);
     return () => clearTimeout(timer);
   }, [onClose]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "offramp-success-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(