@deframe-sdk/components 0.1.69 → 0.1.71

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiOutlineClock, HiA
 import * as React6 from 'react';
 import React6__default, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdOutlineArrowBack, MdOutlineArrowDropDown, MdOutlineClose, MdContentCopy, MdOutlineExpandMore, MdQrCodeScanner, MdOutlineArrowUpward, MdOutlineArrowDownward, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
+import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdOutlineArrowBack, MdOutlineArrowDropDown, MdOutlineClose, MdContentCopy, MdOutlineExpandMore, MdQrCodeScanner, MdOutlineArrowUpward, MdOutlineArrowDownward, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdAccessTime, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
 import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
 import { PiClockCountdownBold } from 'react-icons/pi';
 import QRCode from 'react-qr-code';
@@ -4822,6 +4822,28 @@ function SkeletonCard({ testId, symbol, network, amount, usd, balance }) {
     }
   );
 }
+function useBackgroundConfirmationTransition({
+  enabled,
+  started,
+  slowAfterMs = 5e3,
+  dismissAfterSlowMs = 3e3,
+  onDismiss
+}) {
+  const [phase, setPhase] = useState("initial");
+  useEffect(() => {
+    if (!enabled || !started) return;
+    if (phase !== "initial") return;
+    const id = window.setTimeout(() => setPhase("background-confirmation"), slowAfterMs);
+    return () => window.clearTimeout(id);
+  }, [enabled, started, phase, slowAfterMs]);
+  useEffect(() => {
+    if (phase !== "background-confirmation") return;
+    if (!onDismiss) return;
+    const id = window.setTimeout(() => onDismiss(), dismissAfterSlowMs);
+    return () => window.clearTimeout(id);
+  }, [phase, dismissAfterSlowMs, onDismiss]);
+  return { phase };
+}
 function LoadingIcon() {
   const green = "var(--deframe-widget-color-brand-primary)";
   const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
@@ -4882,10 +4904,42 @@ function LoadingIcon() {
     }
   );
 }
+function SlowIcon() {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      "data-test-id": "swap-processing-simple-background-confirmation-icon",
+      initial: { scale: 0.7, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      transition: { type: "spring", stiffness: 280, damping: 22 },
+      className: "flex items-center justify-center shrink-0 w-[56px] h-[56px]",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        MdAccessTime,
+        {
+          size: 56,
+          color: "var(--deframe-widget-color-brand-primary)"
+        }
+      )
+    }
+  );
+}
 var SwapProcessingViewSimple = ({
   titleText,
-  descriptionPrefix
+  descriptionPrefix,
+  allowBackgroundConfirmation = false,
+  backgroundConfirmationStarted = false,
+  backgroundConfirmationLabels,
+  onBackgroundConfirmationDismiss
 }) => {
+  const { phase } = useBackgroundConfirmationTransition({
+    enabled: allowBackgroundConfirmation,
+    started: backgroundConfirmationStarted,
+    onDismiss: onBackgroundConfirmationDismiss
+  });
+  const isBackgroundConfirmation = phase === "background-confirmation" && backgroundConfirmationLabels !== void 0;
+  const renderedTitle = isBackgroundConfirmation ? backgroundConfirmationLabels.title : titleText;
+  const renderedSubtitle = isBackgroundConfirmation ? backgroundConfirmationLabels.subtitle : descriptionPrefix;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -4915,7 +4969,7 @@ var SwapProcessingViewSimple = ({
               "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
             ),
             children: [
-              /* @__PURE__ */ jsx(LoadingIcon, {}),
+              isBackgroundConfirmation ? /* @__PURE__ */ jsx(SlowIcon, {}) : /* @__PURE__ */ jsx(LoadingIcon, {}),
               /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -4925,20 +4979,20 @@ var SwapProcessingViewSimple = ({
                     /* @__PURE__ */ jsx(
                       "span",
                       {
-                        "data-test-id": "swap-processing-simple-title",
+                        "data-test-id": isBackgroundConfirmation ? "swap-processing-simple-background-confirmation-title" : "swap-processing-simple-title",
                         className: twMerge(
                           "[font-size:12px] [line-height:1.25] [letter-spacing:0.10em] uppercase",
                           "[font-weight:var(--deframe-widget-font-weight-semibold)]",
                           "font-[var(--deframe-widget-font-family)]",
                           "text-[color:var(--deframe-widget-color-brand-primary)]"
                         ),
-                        children: titleText
+                        children: renderedTitle
                       }
                     ),
                     /* @__PURE__ */ jsx(
                       "span",
                       {
-                        "data-test-id": "swap-processing-simple-subtitle",
+                        "data-test-id": isBackgroundConfirmation ? "swap-processing-simple-background-confirmation-subtitle" : "swap-processing-simple-subtitle",
                         className: twMerge(
                           "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
                           "[font-weight:var(--deframe-widget-font-weight-regular)]",
@@ -4946,7 +5000,7 @@ var SwapProcessingViewSimple = ({
                           "text-[color:var(--deframe-widget-color-text-secondary)]",
                           "max-w-[260px]"
                         ),
-                        children: descriptionPrefix
+                        children: renderedSubtitle
                       }
                     )
                   ]
@@ -5062,12 +5116,20 @@ var SwapCrossChainProcessingView = ({
 };
 var SwapCrossChainProcessingViewSimple = ({
   title,
-  description
+  description,
+  allowBackgroundConfirmation,
+  backgroundConfirmationStarted,
+  backgroundConfirmationLabels,
+  onBackgroundConfirmationDismiss
 }) => /* @__PURE__ */ jsx(
   SwapProcessingViewSimple,
   {
     titleText: title,
-    descriptionPrefix: description
+    descriptionPrefix: description,
+    allowBackgroundConfirmation,
+    backgroundConfirmationStarted,
+    backgroundConfirmationLabels,
+    onBackgroundConfirmationDismiss
   }
 );
 var InvestmentCrossChainProcessingView = ({
@@ -5260,9 +5322,14 @@ function EarnFeedbackOverlaySimpleView({
   variant,
   title,
   subtitle,
-  formData
+  formData,
+  phase = "initial",
+  backgroundConfirmationLabels
 }) {
-  const isLoading = variant === "loading";
+  const isBackgroundConfirmation = phase === "background-confirmation" && variant === "loading" && backgroundConfirmationLabels !== void 0;
+  const renderedTitle = isBackgroundConfirmation ? backgroundConfirmationLabels.title : title;
+  const renderedSubtitle = isBackgroundConfirmation ? backgroundConfirmationLabels.subtitle : subtitle;
+  const isLoading = variant === "loading" && !isBackgroundConfirmation;
   const wrapperClasses = twMerge(
     "relative flex flex-col overflow-hidden w-[420px]",
     "rounded-[var(--deframe-widget-size-radius-md)]",
@@ -5283,7 +5350,7 @@ function EarnFeedbackOverlaySimpleView({
     "gap-[var(--deframe-widget-size-gap-sm)] text-center"
   );
   const titleClasses2 = twMerge(
-    isLoading ? "[font-size:12px] [line-height:1.25] [letter-spacing:0.10em] uppercase [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[22px] font-bold text-[color:var(--deframe-widget-color-text-primary)] leading-[1.25]"
+    isLoading || isBackgroundConfirmation ? "[font-size:12px] [line-height:1.25] [letter-spacing:0.10em] uppercase [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[22px] font-bold text-[color:var(--deframe-widget-color-text-primary)] leading-[1.25]"
   );
   const subtitleClasses = twMerge(
     "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
@@ -5311,6 +5378,7 @@ function EarnFeedbackOverlaySimpleView({
             transition: { duration: 0.2 },
             className: overlayClasses,
             children: [
+              isBackgroundConfirmation && /* @__PURE__ */ jsx(SlowIcon2, {}),
               isLoading && /* @__PURE__ */ jsx(LoadingIcon2, {}),
               variant === "success" && /* @__PURE__ */ jsx(SuccessIcon, {}),
               variant === "warning" && /* @__PURE__ */ jsx(WarningIcon, {}),
@@ -5325,19 +5393,19 @@ function EarnFeedbackOverlaySimpleView({
                     /* @__PURE__ */ jsx(
                       "span",
                       {
-                        "data-test-id": "earn-feedback-title",
+                        "data-test-id": isBackgroundConfirmation ? "earn-feedback-background-confirmation-title" : "earn-feedback-title",
                         "data-slot": "earn-feedback-title",
                         className: titleClasses2,
-                        children: title
+                        children: renderedTitle
                       }
                     ),
-                    subtitle && /* @__PURE__ */ jsx(
+                    renderedSubtitle && /* @__PURE__ */ jsx(
                       "span",
                       {
-                        "data-test-id": "earn-feedback-subtitle",
+                        "data-test-id": isBackgroundConfirmation ? "earn-feedback-background-confirmation-subtitle" : "earn-feedback-subtitle",
                         "data-slot": "earn-feedback-subtitle",
                         className: subtitleClasses,
-                        children: subtitle
+                        children: renderedSubtitle
                       }
                     )
                   ]
@@ -5351,6 +5419,27 @@ function EarnFeedbackOverlaySimpleView({
     }
   );
 }
+function SlowIcon2() {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      "data-test-id": "earn-feedback-background-confirmation-icon",
+      "data-slot": "earn-feedback-background-confirmation-icon",
+      initial: { scale: 0.7, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      transition: { type: "spring", stiffness: 280, damping: 22 },
+      className: "flex items-center justify-center shrink-0 w-[56px] h-[56px]",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        MdAccessTime,
+        {
+          size: 56,
+          color: "var(--deframe-widget-color-brand-primary)"
+        }
+      )
+    }
+  );
+}
 function LoadingIcon2() {
   const green = "var(--deframe-widget-color-brand-primary)";
   const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
@@ -5589,14 +5678,25 @@ var InvestmentCrossChainProcessingSimpleView = ({
   strategyName,
   strategyIcon,
   amountToken,
-  amountUSD
+  amountUSD,
+  allowBackgroundConfirmation = false,
+  backgroundConfirmationStarted = false,
+  backgroundConfirmationLabels,
+  onBackgroundConfirmationDismiss
 }) => {
+  const { phase } = useBackgroundConfirmationTransition({
+    enabled: allowBackgroundConfirmation,
+    started: backgroundConfirmationStarted,
+    onDismiss: onBackgroundConfirmationDismiss
+  });
   return /* @__PURE__ */ jsx("div", { "data-test-id": "investment-crosschain-processing-simple-view", children: /* @__PURE__ */ jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
       title,
       subtitle: description,
+      phase,
+      backgroundConfirmationLabels,
       formData: {
         headerTitle: title,
         tokenSymbol: strategyName,
@@ -13600,14 +13700,25 @@ var EarnDepositProcessingSimpleView = ({
   amountToken,
   amountUSD,
   iconSrc,
-  strategyName
+  strategyName,
+  allowBackgroundConfirmation = false,
+  backgroundConfirmationStarted = false,
+  backgroundConfirmationLabels,
+  onBackgroundConfirmationDismiss
 }) => {
+  const { phase } = useBackgroundConfirmationTransition({
+    enabled: allowBackgroundConfirmation,
+    started: backgroundConfirmationStarted,
+    onDismiss: onBackgroundConfirmationDismiss
+  });
   return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-deposit-processing-simple-view", children: /* @__PURE__ */ jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
       title,
       subtitle: descriptionPrefix,
+      phase,
+      backgroundConfirmationLabels,
       formData: {
         headerTitle: title,
         tokenSymbol: strategyName,
@@ -13975,14 +14086,25 @@ var EarnWithdrawProcessingSimpleView = ({
   amountToken,
   amountUSD,
   iconSrc,
-  strategyName
+  strategyName,
+  allowBackgroundConfirmation = false,
+  backgroundConfirmationStarted = false,
+  backgroundConfirmationLabels,
+  onBackgroundConfirmationDismiss
 }) => {
+  const { phase } = useBackgroundConfirmationTransition({
+    enabled: allowBackgroundConfirmation,
+    started: backgroundConfirmationStarted,
+    onDismiss: onBackgroundConfirmationDismiss
+  });
   return /* @__PURE__ */ jsx("div", { "data-test-id": "earn-withdraw-processing-simple-view", children: /* @__PURE__ */ jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
       title,
       subtitle: descriptionPrefix,
+      phase,
+      backgroundConfirmationLabels,
       formData: {
         headerTitle: title,
         tokenSymbol: strategyName,
@@ -16059,14 +16181,25 @@ var OnchainWithdrawFailedSimpleView = ({
 ) });
 var OnchainWithdrawProcessingSimpleView = ({
   onClose: _onClose,
-  formData
+  formData,
+  allowBackgroundConfirmation = false,
+  backgroundConfirmationStarted = false,
+  backgroundConfirmationLabels,
+  onBackgroundConfirmationDismiss
 }) => {
+  const { phase } = useBackgroundConfirmationTransition({
+    enabled: allowBackgroundConfirmation,
+    started: backgroundConfirmationStarted,
+    onDismiss: onBackgroundConfirmationDismiss
+  });
   return /* @__PURE__ */ jsx("div", { "data-test-id": "onchain-withdraw-processing-simple-view", children: /* @__PURE__ */ jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
       title: "PROCESSANDO SAQUE...",
       subtitle: "Aguarde enquanto sua transa\xE7\xE3o \xE9 confirmada.",
+      phase,
+      backgroundConfirmationLabels,
       formData
     }
   ) });
@@ -18150,13 +18283,25 @@ function OfframpProcessingView({
     }
   );
 }
-var OfframpProcessingSimpleView = () => {
+var OfframpProcessingSimpleView = ({
+  allowBackgroundConfirmation = false,
+  backgroundConfirmationStarted = false,
+  backgroundConfirmationLabels,
+  onBackgroundConfirmationDismiss
+}) => {
+  const { phase } = useBackgroundConfirmationTransition({
+    enabled: allowBackgroundConfirmation,
+    started: backgroundConfirmationStarted,
+    onDismiss: onBackgroundConfirmationDismiss
+  });
   return /* @__PURE__ */ jsx("div", { "data-test-id": "offramp-processing-simple-view", children: /* @__PURE__ */ jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
       title: "PROCESSANDO SAQUE...",
-      subtitle: "Seu PIX est\xE1 sendo enviado. Aguarde alguns instantes."
+      subtitle: "Seu PIX est\xE1 sendo enviado. Aguarde alguns instantes.",
+      phase,
+      backgroundConfirmationLabels
     }
   ) });
 };