@deframe-sdk/components 0.1.20 → 0.1.22

package/dist/index.mjs

@@ -3809,11 +3809,14 @@ function WarningIcon() {
 var SwapSignatureWarningViewSimple = ({
   errorTitle,
   errorDescription,
-  onCancel,
-  onTryAgain,
-  cancelButtonText,
-  retryButtonText
+  onCancel
 }) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onCancel == null ? void 0 : onCancel();
+    }, 3e3);
+    return () => clearTimeout(timer);
+  }, [onCancel]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3879,35 +3882,6 @@ var SwapSignatureWarningViewSimple = ({
                     )
                   ]
                 }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "data-test-id": "swap-signature-warning-simple-actions",
-                  className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full max-w-[320px]",
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      SecondaryButton,
-                      {
-                        "data-test-id": "swap-signature-warning-simple-cancel",
-                        "aria-label": cancelButtonText != null ? cancelButtonText : "Cancel",
-                        className: "flex-1",
-                        onClick: onCancel,
-                        children: cancelButtonText
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      PrimaryButton,
-                      {
-                        "data-test-id": "swap-signature-warning-simple-retry",
-                        "aria-label": retryButtonText != null ? retryButtonText : "Retry",
-                        className: "flex-1",
-                        onClick: onTryAgain,
-                        children: retryButtonText
-                      }
-                    )
-                  ]
-                }
               )
             ]
           }
@@ -5195,7 +5169,7 @@ function TokenSelectorArea({
       "aria-label": selectedToken ? `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}` : selectTokenLabel,
       className: twMerge(
         "inline-flex items-center gap-[10px]",
-        "py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
+        "h-[54px] px-[10px]",
         "rounded-[var(--deframe-widget-size-radius-sm)]",
         "bg-[var(--deframe-widget-color-bg-tertiary)]",
         "border-none outline-none",
@@ -5243,22 +5217,15 @@ function TokenSelectorArea({
         ),
         /* @__PURE__ */ jsx(ChevronDown, {})
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "swap-from-card-simple-token-placeholder-icon",
-            className: "w-[38px] h-[38px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex-shrink-0"
-          }
-        ),
         /* @__PURE__ */ jsx(
           "span",
           {
             "data-test-id": "swap-from-card-simple-token-placeholder-label",
             className: twMerge(
-              "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
+              "text-[11px] [font-weight:var(--deframe-widget-font-weight-regular)]",
               "font-[var(--deframe-widget-font-family)]",
               "text-[color:var(--deframe-widget-color-text-secondary)]",
-              "whitespace-nowrap"
+              "whitespace-nowrap uppercase"
             ),
             children: selectTokenLabel
           }
@@ -5555,7 +5522,7 @@ var SwapToCardViewSimple = ({
   );
   const selectorBaseClasses = twMerge(
     "inline-flex items-center gap-[10px]",
-    "py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
+    "h-[54px] px-[10px]",
     "rounded-[var(--deframe-widget-size-radius-sm)]",
     "bg-[var(--deframe-widget-color-bg-tertiary)]",
     "border-none",
@@ -5650,19 +5617,11 @@ var SwapToCardViewSimple = ({
               "aria-label": labels.selectTokenLabel,
               className: selectorBaseClasses,
               children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "data-test-id": "swap-to-simple-placeholder-circle",
-                    className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 bg-[var(--deframe-widget-color-bg-tertiary)]",
-                    style: { width: 38, height: 38 }
-                  }
-                ),
                 /* @__PURE__ */ jsx(
                   "span",
                   {
                     "data-test-id": "swap-to-simple-placeholder-label",
-                    className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)] whitespace-nowrap",
+                    className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-regular)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)] whitespace-nowrap uppercase",
                     children: labels.selectTokenLabel
                   }
                 ),
@@ -5699,7 +5658,7 @@ var SwapToCardViewSimple = ({
               "data-test-id": "swap-to-simple-output-wrapper",
               className: "flex flex-col items-end flex-1 min-w-0",
               children: [
-                isOutputLoading ? /* @__PURE__ */ jsxs(
+                isOutputLoading ? /* @__PURE__ */ jsx(
                   "span",
                   {
                     "data-test-id": "swap-to-simple-output-loading",
@@ -5710,10 +5669,7 @@ var SwapToCardViewSimple = ({
                       "text-right",
                       "flex items-center"
                     ),
-                    children: [
-                      labels.searchingQuoteLabel,
-                      /* @__PURE__ */ jsx(LoadingDots, {})
-                    ]
+                    children: /* @__PURE__ */ jsx(LoadingDots, {})
                   }
                 ) : /* @__PURE__ */ jsx(
                   "span",
@@ -7472,7 +7428,7 @@ var variantStyles = {
 var Label = ({ children, variant = "primary", className }) => {
   return /* @__PURE__ */ jsx("div", { className: twMerge(variantStyles[variant], className), children });
 };
-var HistoryItemSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "w-full bg-bg-subtle dark:bg-bg-subtle-dark rounded-xs min-h-[72px] flex items-center justify-between px-md py-sm", children: [
+var HistoryItemSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "w-full bg-[var(--deframe-widget-color-bg-subtle)] rounded-xs min-h-[72px] flex items-center justify-between px-md py-sm", children: [
   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-sm flex-1 min-w-0", children: [
     /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-bg-muted dark:bg-bg-muted-dark animate-pulse flex-shrink-0" }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [
@@ -7527,8 +7483,7 @@ var StrategyGridCard = ({
     "data-test-id": "strategy-grid-card",
     className: twMerge(
       "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-md)] rounded-[var(--deframe-widget-size-radius-sm)] h-[136px] min-h-[136px] flex-shrink-0",
-      "bg-[var(--deframe-widget-color-bg-primary)]",
-      "hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
+      "bg-[var(--deframe-widget-color-bg-raised)]",
       "transition-colors cursor-pointer text-left w-full",
       className
     ),
@@ -7598,7 +7553,7 @@ var EarnInvestmentSummaryView = ({
   processingBadgeTitle,
   className
 }) => {
-  return /* @__PURE__ */ jsxs("section", { className: twMerge("flex flex-col gap-md p-lg bg-bg-subtle dark:bg-bg-subtle-dark rounded", className), children: [
+  return /* @__PURE__ */ jsxs("section", { className: twMerge("flex flex-col gap-md p-lg bg-[var(--deframe-widget-color-bg-subtle)] rounded", className), children: [
     /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "text-text-secondary dark:text-text-secondary-dark", children: overviewDescription }),
     /* @__PURE__ */ jsx(
       WalletBalances,
@@ -7637,7 +7592,7 @@ var EarnInvestedSectionView = ({
     {
       className: twMerge(
         "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
-        "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+        "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
         className
       ),
       children: [
@@ -7650,8 +7605,7 @@ var EarnInvestedSectionView = ({
               type: "button",
               onClick: () => onItemClick == null ? void 0 : onItemClick(item.strategyId),
               className: twMerge(
-                "flex items-center gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-primary)] rounded-[var(--deframe-widget-size-radius-sm)]",
-                "hover:bg-[var(--deframe-widget-color-bg-tertiary)]",
+                "flex items-center gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-md)] bg-[var(--deframe-widget-color-bg-raised)] rounded-[var(--deframe-widget-size-radius-sm)]",
                 "transition-colors cursor-pointer text-left w-full",
                 !isLast && "border-b border-[var(--deframe-widget-color-border-secondary)]"
               ),
@@ -7703,7 +7657,7 @@ var EarnExploreGridView = ({
       {
         className: twMerge(
           "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
-          "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+          "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
           className
         ),
         children: [
@@ -7722,7 +7676,7 @@ var EarnExploreGridView = ({
       {
         className: twMerge(
           "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
-          "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+          "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
           className
         ),
         children: [
@@ -7737,7 +7691,7 @@ var EarnExploreGridView = ({
     {
       className: twMerge(
         "flex flex-col gap-[var(--deframe-widget-size-gap-md)] p-[var(--deframe-widget-size-padding-x-lg)]",
-        "bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-sm)]",
+        "bg-[var(--deframe-widget-color-bg-subtle)] rounded-[var(--deframe-widget-size-radius-sm)]",
         className
       ),
       children: [
@@ -7786,7 +7740,7 @@ var EarnRecentTransactionsView = ({
     {
       className: twMerge(
         "flex flex-col gap-md p-lg",
-        "bg-bg-subtle dark:bg-bg-subtle-dark rounded",
+        "bg-[var(--deframe-widget-color-bg-subtle)] rounded",
         className
       ),
       children: [