@deframe-sdk/components 0.1.69 → 0.1.71

package/dist/index.d.mts

@@ -1327,6 +1327,13 @@ interface SwapProcessingViewProps {
     descriptionPrefix: string;
     activityHistoryText: string;
     processingDetailsLabels: TransactionProcessingDetailsLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare const SwapProcessingView: React__default.FC<SwapProcessingViewProps>;
 
@@ -1355,6 +1362,13 @@ interface SwapCrossChainProcessingViewProps {
     onGoToHistory: () => void;
     viewHistoryText: string;
     processingDetailsLabels: TransactionProcessingDetailsLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare const SwapCrossChainProcessingView: React__default.FC<SwapCrossChainProcessingViewProps>;
 
@@ -1374,6 +1388,13 @@ interface InvestmentCrossChainProcessingViewProps {
     onClose: () => void;
     transactionSteps: TransactionStep[];
     processingDetailsLabels: TransactionProcessingDetailsLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare const InvestmentCrossChainProcessingView: React__default.FC<InvestmentCrossChainProcessingViewProps>;
 
@@ -2703,6 +2724,13 @@ interface EarnDepositProcessingViewProps {
     amountToken: string;
     transactionSteps: TransactionStep[];
     processingDetailsLabels: TransactionProcessingDetailsLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare const EarnDepositProcessingView: React__default.FC<EarnDepositProcessingViewProps>;
 
@@ -2798,6 +2826,13 @@ interface EarnWithdrawProcessingViewProps {
     amountToken: string;
     transactionSteps: TransactionStep[];
     processingDetailsLabels: TransactionProcessingDetailsLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare const EarnWithdrawProcessingView: React__default.FC<EarnWithdrawProcessingViewProps>;
 
@@ -3141,6 +3176,13 @@ interface EarnFormSkeletonProps {
 
 interface OnchainWithdrawProcessingViewProps {
     onClose?: () => void;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 interface OnchainWithdrawProcessingSimpleViewProps extends OnchainWithdrawProcessingViewProps {
     formData?: EarnFormSkeletonProps;
@@ -3395,6 +3437,13 @@ interface OfframpProcessingViewProps {
     tokenIconUrl?: string;
     className?: string;
     labels: OfframpProcessingLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare function OfframpProcessingView({ step, amount, summaryTitle, summaryItems, transferTxHash, onClose, closeIcon, tokenIconUrl, className, labels, }: OfframpProcessingViewProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -1327,6 +1327,13 @@ interface SwapProcessingViewProps {
     descriptionPrefix: string;
     activityHistoryText: string;
     processingDetailsLabels: TransactionProcessingDetailsLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare const SwapProcessingView: React__default.FC<SwapProcessingViewProps>;
 
@@ -1355,6 +1362,13 @@ interface SwapCrossChainProcessingViewProps {
     onGoToHistory: () => void;
     viewHistoryText: string;
     processingDetailsLabels: TransactionProcessingDetailsLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare const SwapCrossChainProcessingView: React__default.FC<SwapCrossChainProcessingViewProps>;
 
@@ -1374,6 +1388,13 @@ interface InvestmentCrossChainProcessingViewProps {
     onClose: () => void;
     transactionSteps: TransactionStep[];
     processingDetailsLabels: TransactionProcessingDetailsLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare const InvestmentCrossChainProcessingView: React__default.FC<InvestmentCrossChainProcessingViewProps>;
 
@@ -2703,6 +2724,13 @@ interface EarnDepositProcessingViewProps {
     amountToken: string;
     transactionSteps: TransactionStep[];
     processingDetailsLabels: TransactionProcessingDetailsLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare const EarnDepositProcessingView: React__default.FC<EarnDepositProcessingViewProps>;
 
@@ -2798,6 +2826,13 @@ interface EarnWithdrawProcessingViewProps {
     amountToken: string;
     transactionSteps: TransactionStep[];
     processingDetailsLabels: TransactionProcessingDetailsLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare const EarnWithdrawProcessingView: React__default.FC<EarnWithdrawProcessingViewProps>;
 
@@ -3141,6 +3176,13 @@ interface EarnFormSkeletonProps {
 
 interface OnchainWithdrawProcessingViewProps {
     onClose?: () => void;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 interface OnchainWithdrawProcessingSimpleViewProps extends OnchainWithdrawProcessingViewProps {
     formData?: EarnFormSkeletonProps;
@@ -3395,6 +3437,13 @@ interface OfframpProcessingViewProps {
     tokenIconUrl?: string;
     className?: string;
     labels: OfframpProcessingLabels;
+    allowBackgroundConfirmation?: boolean;
+    backgroundConfirmationStarted?: boolean;
+    backgroundConfirmationLabels?: {
+        title: string;
+        subtitle: string;
+    };
+    onBackgroundConfirmationDismiss?: () => void;
 }
 declare function OfframpProcessingView({ step, amount, summaryTitle, summaryItems, transferTxHash, onClose, closeIcon, tokenIconUrl, className, labels, }: OfframpProcessingViewProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -4846,6 +4846,28 @@ function SkeletonCard({ testId, symbol, network, amount, usd, balance }) {
     }
   );
 }
+function useBackgroundConfirmationTransition({
+  enabled,
+  started,
+  slowAfterMs = 5e3,
+  dismissAfterSlowMs = 3e3,
+  onDismiss
+}) {
+  const [phase, setPhase] = React6.useState("initial");
+  React6.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]);
+  React6.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)";
@@ -4906,10 +4928,42 @@ function LoadingIcon() {
     }
   );
 }
+function SlowIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.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__ */ jsxRuntime.jsx(
+        md.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__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -4939,7 +4993,7 @@ var SwapProcessingViewSimple = ({
               "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(LoadingIcon, {}),
+              isBackgroundConfirmation ? /* @__PURE__ */ jsxRuntime.jsx(SlowIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(LoadingIcon, {}),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
@@ -4949,20 +5003,20 @@ var SwapProcessingViewSimple = ({
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
-                        "data-test-id": "swap-processing-simple-title",
+                        "data-test-id": isBackgroundConfirmation ? "swap-processing-simple-background-confirmation-title" : "swap-processing-simple-title",
                         className: tailwindMerge.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__ */ jsxRuntime.jsx(
                       "span",
                       {
-                        "data-test-id": "swap-processing-simple-subtitle",
+                        "data-test-id": isBackgroundConfirmation ? "swap-processing-simple-background-confirmation-subtitle" : "swap-processing-simple-subtitle",
                         className: tailwindMerge.twMerge(
                           "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
                           "[font-weight:var(--deframe-widget-font-weight-regular)]",
@@ -4970,7 +5024,7 @@ var SwapProcessingViewSimple = ({
                           "text-[color:var(--deframe-widget-color-text-secondary)]",
                           "max-w-[260px]"
                         ),
-                        children: descriptionPrefix
+                        children: renderedSubtitle
                       }
                     )
                   ]
@@ -5086,12 +5140,20 @@ var SwapCrossChainProcessingView = ({
 };
 var SwapCrossChainProcessingViewSimple = ({
   title,
-  description
+  description,
+  allowBackgroundConfirmation,
+  backgroundConfirmationStarted,
+  backgroundConfirmationLabels,
+  onBackgroundConfirmationDismiss
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   SwapProcessingViewSimple,
   {
     titleText: title,
-    descriptionPrefix: description
+    descriptionPrefix: description,
+    allowBackgroundConfirmation,
+    backgroundConfirmationStarted,
+    backgroundConfirmationLabels,
+    onBackgroundConfirmationDismiss
   }
 );
 var InvestmentCrossChainProcessingView = ({
@@ -5284,9 +5346,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 = tailwindMerge.twMerge(
     "relative flex flex-col overflow-hidden w-[420px]",
     "rounded-[var(--deframe-widget-size-radius-md)]",
@@ -5307,7 +5374,7 @@ function EarnFeedbackOverlaySimpleView({
     "gap-[var(--deframe-widget-size-gap-sm)] text-center"
   );
   const titleClasses2 = tailwindMerge.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 = tailwindMerge.twMerge(
     "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
@@ -5335,6 +5402,7 @@ function EarnFeedbackOverlaySimpleView({
             transition: { duration: 0.2 },
             className: overlayClasses,
             children: [
+              isBackgroundConfirmation && /* @__PURE__ */ jsxRuntime.jsx(SlowIcon2, {}),
               isLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIcon2, {}),
               variant === "success" && /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon, {}),
               variant === "warning" && /* @__PURE__ */ jsxRuntime.jsx(WarningIcon, {}),
@@ -5349,19 +5417,19 @@ function EarnFeedbackOverlaySimpleView({
                     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    renderedSubtitle && /* @__PURE__ */ jsxRuntime.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
                       }
                     )
                   ]
@@ -5375,6 +5443,27 @@ function EarnFeedbackOverlaySimpleView({
     }
   );
 }
+function SlowIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.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__ */ jsxRuntime.jsx(
+        md.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)";
@@ -5613,14 +5702,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__ */ jsxRuntime.jsx("div", { "data-test-id": "investment-crosschain-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
       title,
       subtitle: description,
+      phase,
+      backgroundConfirmationLabels,
       formData: {
         headerTitle: title,
         tokenSymbol: strategyName,
@@ -13624,14 +13724,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__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
       title,
       subtitle: descriptionPrefix,
+      phase,
+      backgroundConfirmationLabels,
       formData: {
         headerTitle: title,
         tokenSymbol: strategyName,
@@ -13999,14 +14110,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__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
       title,
       subtitle: descriptionPrefix,
+      phase,
+      backgroundConfirmationLabels,
       formData: {
         headerTitle: title,
         tokenSymbol: strategyName,
@@ -16083,14 +16205,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__ */ jsxRuntime.jsx("div", { "data-test-id": "onchain-withdraw-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
       title: "PROCESSANDO SAQUE...",
       subtitle: "Aguarde enquanto sua transa\xE7\xE3o \xE9 confirmada.",
+      phase,
+      backgroundConfirmationLabels,
       formData
     }
   ) });
@@ -18174,13 +18307,25 @@ function OfframpProcessingView({
     }
   );
 }
-var OfframpProcessingSimpleView = () => {
+var OfframpProcessingSimpleView = ({
+  allowBackgroundConfirmation = false,
+  backgroundConfirmationStarted = false,
+  backgroundConfirmationLabels,
+  onBackgroundConfirmationDismiss
+}) => {
+  const { phase } = useBackgroundConfirmationTransition({
+    enabled: allowBackgroundConfirmation,
+    started: backgroundConfirmationStarted,
+    onDismiss: onBackgroundConfirmationDismiss
+  });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "offramp-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.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
     }
   ) });
 };