@deframe-sdk/components 0.1.70 → 0.1.72

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,
@@ -9692,6 +9792,32 @@ function StatusBadge2({ status, labels, className }) {
     }
   );
 }
+var explorerLinkClass = "text-[color:var(--deframe-widget-color-brand-primary)] underline text-[12px] leading-none [font-weight:var(--deframe-widget-font-weight-semibold)]";
+function renderExplorerLink(tx) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "data-test-id": "history-list-item-simple-explorer",
+      href: tx.explorerUrl,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: explorerLinkClass,
+      children: tx.label
+    }
+  );
+}
+function renderExplorerLinks(transactions) {
+  if (!(transactions == null ? void 0 : transactions.length)) return null;
+  if (transactions.length === 1) return renderExplorerLink(transactions[0]);
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)] flex-wrap", children: transactions.map((tx, i) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+    i > 0 && /* @__PURE__ */ jsx("span", { className: "text-[color:var(--deframe-widget-color-text-tertiary)] text-[12px]", children: "\u2192" }),
+    tx.prefix && /* @__PURE__ */ jsxs("span", { className: "text-[color:var(--deframe-widget-color-text-secondary)] text-[12px]", children: [
+      tx.prefix,
+      ":"
+    ] }),
+    renderExplorerLink(tx)
+  ] }, tx.explorerUrl)) });
+}
 var HistoryListItemSimple = ({ item, labels, locale }) => {
   const label = historyResolveLabel(item, labels);
   const { primary, secondary } = historyResolveAmounts(item);
@@ -9754,7 +9880,8 @@ var HistoryListItemSimple = ({ item, labels, locale }) => {
               }
             )
           ] })
-        ] })
+        ] }),
+        renderExplorerLinks(item.transactions)
       ]
     }
   );
@@ -11250,7 +11377,12 @@ function formatEarnPositions(positions, { currency, locale, formatCurrency }) {
       const principalUSD = p.spotPosition.underlyingBalanceUSD - p.spotPosition.profitInUSD;
       const investedFormatted = isBrlPegged && p.spotPosition.principal ? formatHistoryAssetAmount({ amountHumanized: p.spotPosition.principal.humanized, symbol, currency, locale, formatCurrency }) : formatCurrency(principalUSD);
       const totalBrla = isBrlPegged && principalHumanized > 0 && principalUSD > 0 ? p.spotPosition.underlyingBalanceUSD * principalHumanized / principalUSD : null;
-      const totalValueFormatted = totalBrla !== null ? formatHistoryAssetAmount({ amountHumanized: String(totalBrla), symbol, currency, locale, formatCurrency }) : formatCurrency(p.spotPosition.underlyingBalanceUSD);
+      const totalValueFormatted = (() => {
+        if (totalBrla !== null) {
+          return totalBrla < 0.01 ? investedFormatted : formatHistoryAssetAmount({ amountHumanized: String(totalBrla), symbol, currency, locale, formatCurrency });
+        }
+        return p.spotPosition.underlyingBalanceUSD < 0.01 ? investedFormatted : formatCurrency(p.spotPosition.underlyingBalanceUSD);
+      })();
       return __spreadProps(__spreadValues({}, p), { spotPosition: __spreadProps(__spreadValues({}, p.spotPosition), { investedFormatted, totalValueFormatted }) });
     })
   });
@@ -13600,14 +13732,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 +14118,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 +16213,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 +18315,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
     }
   ) });
 };