@deframe-sdk/components 0.1.52 → 0.1.53

package/dist/index.mjs

@@ -1691,7 +1691,7 @@ var BannerNotification = (_a) => {
     error: "text-[var(--deframe-widget-color-state-error)]",
     success: "text-[var(--deframe-widget-color-state-success)]"
   };
-  const variantIcons = {
+  const variantIcons2 = {
     info: MdInfoOutline,
     warning: MdWarningAmber,
     error: MdErrorOutline,
@@ -1763,7 +1763,7 @@ var BannerNotification = (_a) => {
     isExiting && "opacity-0 -translate-y-2",
     className
   );
-  const IconComponent = variantIcons[v];
+  const IconComponent = variantIcons2[v];
   const resolvedIcon = icon != null ? icon : /* @__PURE__ */ jsx(IconComponent, {});
   return /* @__PURE__ */ jsxs(
     "div",
@@ -6037,41 +6037,10 @@ var SwapToCardView = ({
     ] })
   ] }) });
 };
-var SLIPPAGE_OPTIONS = [10, 50, 100];
-var SwapSlippageToleranceButtonsView = ({
-  slippageBps,
-  onSelect,
-  formatPercentage,
-  className
-}) => {
-  const baseClasses = "flex gap-[var(--deframe-widget-size-gap-xs)]";
-  return /* @__PURE__ */ jsx("div", { "data-test-id": "swap-slippage-tolerance-buttons", className: twMerge(baseClasses, className), children: SLIPPAGE_OPTIONS.map((option) => {
-    const isActive = slippageBps === option;
-    const activeClasses = "border-[color:var(--deframe-widget-color-brand-primary)] text-[color:var(--deframe-widget-color-brand-primary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_18%,transparent)]";
-    const inactiveClasses = "border-[color:var(--deframe-widget-color-border-tertiary)] text-[color:var(--deframe-widget-color-text-secondary)] bg-[var(--deframe-widget-color-bg-primary)]";
-    const buttonBase = "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] rounded-[var(--deframe-widget-size-radius-xs)] border [font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] cursor-pointer";
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        "data-test-id": `slippage-option-${option}`,
-        type: "button",
-        onClick: () => onSelect(option),
-        className: twMerge(buttonBase, isActive ? activeClasses : inactiveClasses),
-        "aria-label": `${formatPercentage(option)}% slippage`,
-        "aria-pressed": isActive,
-        children: formatPercentage(option)
-      },
-      option
-    );
-  }) });
-};
 var SwapAdvancedSettingsView = ({
   title,
   isOpen,
   onOpenChange,
-  slippageBps,
-  onSlippageSelect,
-  formatPercentage,
   percentageOptions,
   onPercentageClick,
   slippageFormatted,
@@ -6079,7 +6048,7 @@ var SwapAdvancedSettingsView = ({
   expandText,
   maxLabel
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: "pb-2 mt-md", children: /* @__PURE__ */ jsx(SectionCard, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "pb-2 mt-md", children: /* @__PURE__ */ jsx(SectionCard, { children: /* @__PURE__ */ jsx(
     CollapsibleSection,
     {
       title,
@@ -6088,30 +6057,19 @@ var SwapAdvancedSettingsView = ({
       onOpenChange,
       collapseText,
       expandText,
-      children: [
-        /* @__PURE__ */ jsx(
-          SwapSlippageToleranceButtonsView,
+      children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "flex w-full gap-sm", children: percentageOptions.map((pct, index) => {
+        const isMax = index === percentageOptions.length - 1;
+        const label = isMax ? maxLabel : `${pct / 100}%`;
+        return /* @__PURE__ */ jsx(
+          PercentageButton,
           {
-            slippageBps,
-            onSelect: onSlippageSelect,
-            formatPercentage,
-            className: "mt-md"
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "w-full mt-md", children: /* @__PURE__ */ jsx("div", { className: "flex w-full gap-sm", children: percentageOptions.map((pct, index) => {
-          const isMax = index === percentageOptions.length - 1;
-          const label = isMax ? maxLabel : `${pct / 100}%`;
-          return /* @__PURE__ */ jsx(
-            PercentageButton,
-            {
-              type: "button",
-              onClick: () => onPercentageClick(pct),
-              children: label
-            },
-            pct
-          );
-        }) }) })
-      ]
+            type: "button",
+            onClick: () => onPercentageClick(pct),
+            children: label
+          },
+          pct
+        );
+      }) }) })
     }
   ) }) });
 };
@@ -6287,6 +6245,39 @@ var ConfirmSwapButtonView = ({
     }
   ) });
 };
+var variantClasses2 = {
+  error: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_42%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)] text-[color:var(--deframe-widget-color-state-error)]",
+  warning: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_42%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_16%,transparent)] text-[color:var(--deframe-widget-color-state-warning)]"
+};
+var variantIcons = {
+  error: MdErrorOutline,
+  warning: MdWarningAmber
+};
+function SwapPriceImpactWarning({ warning, className }) {
+  const Icon = variantIcons[warning.variant];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-test-id": "swap-price-impact-warning",
+      role: "alert",
+      className: twMerge(
+        "flex items-start gap-[var(--deframe-widget-size-gap-sm)]",
+        "rounded-[var(--deframe-widget-size-radius-sm)] border",
+        "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
+        "font-[var(--deframe-widget-font-family)]",
+        variantClasses2[warning.variant],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "mt-[2px] h-5 w-5 flex-shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[2px]", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.35] text-[color:var(--deframe-widget-color-text-primary)]", children: warning.title }),
+          /* @__PURE__ */ jsx("span", { className: "text-[12px] leading-[1.45] text-[color:var(--deframe-widget-color-text-secondary)]", children: warning.message })
+        ] })
+      ]
+    }
+  );
+}
 var SwapFormView = ({
   onSubmit,
   formRef,
@@ -6298,6 +6289,7 @@ var SwapFormView = ({
   toCard,
   advancedSettings,
   transactionDetails,
+  priceImpactWarning,
   confirmButton
 }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6344,12 +6336,15 @@ var SwapFormView = ({
         ] }) })
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "div",
       {
         "data-testid": "swap-flow-footer",
         className: "border-t p-md border-[color:var(--deframe-widget-color-border-secondary)] dark:border-[color:var(--deframe-widget-color-border-secondary-dark)] bg-[var(--deframe-widget-color-bg-primary)] dark:bg-[var(--deframe-widget-color-bg-primary-dark)]",
-        children: /* @__PURE__ */ jsx(ConfirmSwapButtonView, __spreadValues({}, confirmButton))
+        children: [
+          priceImpactWarning && /* @__PURE__ */ jsx(SwapPriceImpactWarning, { warning: priceImpactWarning, className: "mb-sm" }),
+          /* @__PURE__ */ jsx(ConfirmSwapButtonView, __spreadValues({}, confirmButton))
+        ]
       }
     )
   ] });
@@ -7250,6 +7245,7 @@ var SwapFormViewSimple = ({
   toCard,
   advancedSettings,
   transactionDetails,
+  priceImpactWarning,
   confirmButton
 }) => {
   const containerRef = useRef(null);
@@ -7359,7 +7355,16 @@ var SwapFormViewSimple = ({
             )
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-          /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(ConfirmSwapButtonViewSimple, __spreadValues({}, confirmButton)) })
+          /* @__PURE__ */ jsxs("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: [
+            priceImpactWarning && /* @__PURE__ */ jsx(
+              SwapPriceImpactWarning,
+              {
+                warning: priceImpactWarning,
+                className: "mb-[var(--deframe-widget-size-gap-sm)]"
+              }
+            ),
+            /* @__PURE__ */ jsx(ConfirmSwapButtonViewSimple, __spreadValues({}, confirmButton))
+          ] })
         ] }),
         showPanel && panelPos && /* @__PURE__ */ jsx(
           "div",
@@ -7608,55 +7613,7 @@ function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
         /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.protocolFeeLabel, value: transactionDetails.protocolFee }),
         /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.slippageLabel, value: transactionDetails.slippageFormatted }),
         /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.etaLabel, value: transactionDetails.etaFormatted }),
-        transactionDetails.quoteId && /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.quoteIdLabel, value: transactionDetails.quoteId }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-test-id": "swap-form-simple-advanced-panel-divider-2",
-            className: "h-px bg-[var(--deframe-widget-color-border-secondary)] my-[var(--deframe-widget-size-gap-sm)]"
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { "data-test-id": "swap-form-simple-advanced-panel-slippage", children: [
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              "data-test-id": "swap-form-simple-advanced-panel-slippage-label",
-              className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
-              children: [
-                "Slippage: ",
-                advancedSettings.slippageFormatted
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-test-id": "swap-form-simple-advanced-panel-slippage-buttons",
-              className: "flex gap-[6px] mt-[var(--deframe-widget-size-gap-sm)]",
-              children: [10, 50, 100].map((bps) => {
-                const isActive = advancedSettings.slippageBps === bps;
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    "data-test-id": "swap-form-simple-slippage-btn",
-                    type: "button",
-                    onClick: () => advancedSettings.onSlippageSelect(bps),
-                    className: twMerge(
-                      "py-[3px] px-[10px]",
-                      "rounded-[var(--deframe-widget-size-radius-full)]",
-                      "text-[12px] font-[var(--deframe-widget-font-family)]",
-                      "border cursor-pointer outline-none",
-                      "transition-all duration-150",
-                      isActive ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] text-[color:var(--deframe-widget-color-brand-primary)] [font-weight:var(--deframe-widget-font-weight-semibold)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-transparent text-[color:var(--deframe-widget-color-text-secondary)] hover:border-[color:var(--deframe-widget-color-border-primary)]"
-                    ),
-                    children: advancedSettings.formatPercentage(bps)
-                  },
-                  bps
-                );
-              })
-            }
-          )
-        ] })
+        transactionDetails.quoteId && /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.quoteIdLabel, value: transactionDetails.quoteId })
       ]
     }
   );