@deframe-sdk/components 0.1.73 → 0.1.75

package/dist/index.js

@@ -6870,6 +6870,7 @@ var SwapQuoteDetailsView = ({
   gasCostFormatted,
   protocolFee,
   slippageFormatted,
+  minReceivedFormatted,
   etaFormatted,
   quoteId,
   hasQuoteError,
@@ -6881,6 +6882,8 @@ var SwapQuoteDetailsView = ({
     quoteHeaderLabel,
     /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
   ] }) : quoteHeaderLabel;
+  const slippageDetailLabel = minReceivedFormatted ? labels.minReceivedLabel : labels.slippageLabel;
+  const slippageDetailValue = minReceivedFormatted || slippageFormatted;
   const items = [
     {
       label: "",
@@ -6910,8 +6913,8 @@ var SwapQuoteDetailsView = ({
       valueClassName: "flex flex-col gap-sm w-full text-right"
     },
     {
-      label: labels.slippageLabel,
-      value: slippageFormatted
+      label: slippageDetailLabel,
+      value: slippageDetailValue
     },
     {
       label: labels.etaLabel,
@@ -8366,14 +8369,6 @@ function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
             ]
           }
         ),
-        transactionDetails.exchangeRateFormatted && /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            "data-test-id": "swap-form-simple-advanced-panel-subtitle",
-            className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] m-0 mb-[var(--deframe-widget-size-gap-sm)] leading-[1.4] font-[inherit]",
-            children: transactionDetails.exchangeRateFormatted
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -8382,9 +8377,15 @@ function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.exchangeRateLabel, value: transactionDetails.exchangeRateFormatted }),
-        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.blockchainCostsLabel, value: transactionDetails.totalCostFormatted }),
-        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.networkGasLabel, value: transactionDetails.gasCostFormatted }),
-        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.protocolFeeLabel, value: transactionDetails.protocolFee }),
+        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.blockchainCostsLabel, value: `- ${transactionDetails.totalCostFormatted}`, valueColor: "negative" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DetailRow,
+          {
+            label: transactionDetails.labels.priceImpactLabel,
+            value: transactionDetails.priceImpactFormatted,
+            valueColor: transactionDetails.priceImpactIsPositive ? "positive" : "negative"
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           SlippageDetailRow,
           {
@@ -8401,7 +8402,12 @@ function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
     }
   );
 }
-function DetailRow({ label, value }) {
+var valueColorClassNames = {
+  default: "text-[color:var(--deframe-widget-color-text-primary)]",
+  negative: "text-[color:var(--deframe-widget-color-state-error)]",
+  positive: "text-[color:var(--deframe-widget-color-state-success)]"
+};
+function DetailRow({ label, value, valueColor = "default" }) {
   if (!label && !value) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -8421,7 +8427,7 @@ function DetailRow({ label, value }) {
           "span",
           {
             "data-test-id": "swap-form-simple-detail-row-value",
-            className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-right font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]",
+            className: tailwindMerge.twMerge("text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-right font-[var(--deframe-widget-font-family)]", valueColorClassNames[valueColor]),
             children: value
           }
         )
@@ -8484,6 +8490,291 @@ function QuoteIdRow({ label, quoteId }) {
     }
   );
 }
+var detailValueColorClassNames = {
+  default: "text-[color:var(--deframe-widget-color-text-primary)]",
+  negative: "text-[color:var(--deframe-widget-color-state-error)]",
+  positive: "text-[color:var(--deframe-widget-color-state-success)]"
+};
+function getPriceImpactValueColor(isPositive) {
+  return isPositive ? "positive" : "negative";
+}
+function PodsDetailRow({ label, value, valueColor = "default" }) {
+  if (!label && !value) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-test-id": "pods-swap-detail-row",
+      className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-md)] py-[var(--deframe-widget-size-padding-y-xs)]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] shrink-0", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: tailwindMerge.twMerge(
+              "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)] text-right",
+              detailValueColorClassNames[valueColor]
+            ),
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+function PodsSwapQuoteDetails({ details, advancedSettings }) {
+  const [isOpen, setIsOpen] = React6__namespace.default.useState(details.isVisible);
+  const [isSlippageOpen, setIsSlippageOpen] = React6__namespace.default.useState(false);
+  React6__namespace.default.useEffect(() => {
+    if (details.isVisible) setIsOpen(true);
+  }, [details.isVisible]);
+  const hasErrors = details.hasQuoteError || details.hasBytecodeError;
+  const shouldRenderDetails = details.isVisible || hasErrors;
+  if (!shouldRenderDetails) {
+    return null;
+  }
+  const headerLabel = details.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    details.quoteHeaderLabel,
+    /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+  ] }) : details.quoteHeaderLabel;
+  const hasSlippageControls = advancedSettings.slippageOptions.length > 0;
+  const handleSlippageSelect = advancedSettings.onSlippageSelect;
+  const slippageDetailLabel = details.minReceivedFormatted ? details.labels.minReceivedLabel : details.labels.slippageLabel;
+  const slippageDetailValue = details.minReceivedFormatted || details.slippageFormatted;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "pods-swap-quote-details", "data-slot": "pods-swap-quote-details", className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[var(--deframe-widget-size-radius-sm)] border border-[color:var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsOpen((open) => !open),
+            className: "flex min-w-0 flex-1 cursor-pointer items-center gap-[var(--deframe-widget-size-gap-sm)] border-none bg-transparent p-0 text-left outline-none",
+            "aria-expanded": isOpen,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]", children: details.labels.headerLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.span,
+                {
+                  className: "inline-flex h-4 w-4 flex-shrink-0 items-center justify-center text-[color:var(--deframe-widget-color-text-tertiary)]",
+                  animate: { rotate: isOpen ? 180 : 0 },
+                  transition: { duration: 0.2, ease: "easeInOut" },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(md.MdKeyboardArrowDown, { className: "h-4 w-4", "aria-hidden": "true" })
+                }
+              )
+            ]
+          }
+        ),
+        hasSlippageControls && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsSlippageOpen((open) => !open),
+            "aria-label": advancedSettings.slippageLabel,
+            className: tailwindMerge.twMerge(
+              "inline-flex h-6 flex-shrink-0 cursor-pointer items-center gap-[5px] rounded-[var(--deframe-widget-size-radius-full)] border px-[8px]",
+              "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)] outline-none transition-all duration-150",
+              isSlippageOpen ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_40%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_10%,transparent)] text-[color:var(--deframe-widget-color-brand-primary)]" : "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)] hover:text-[color:var(--deframe-widget-color-text-primary)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(md.MdSettings, { className: "h-[11px] w-[11px]", "aria-hidden": "true" }),
+              advancedSettings.formatPercentage(advancedSettings.slippageBps)
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.div,
+        {
+          initial: { height: 0, opacity: 0 },
+          animate: { height: "auto", opacity: 1 },
+          exit: { height: 0, opacity: 0 },
+          transition: { duration: 0.2, ease: "easeInOut" },
+          style: { overflow: "hidden" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: isSlippageOpen && hasSlippageControls && /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.div,
+              {
+                initial: { height: 0, opacity: 0 },
+                animate: { height: "auto", opacity: 1 },
+                exit: { height: 0, opacity: 0 },
+                transition: { duration: 0.15, ease: "easeInOut" },
+                style: { overflow: "hidden" },
+                className: "border-t border-[color:var(--deframe-widget-color-border-secondary)]",
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  SlippageChip,
+                  {
+                    options: advancedSettings.slippageOptions,
+                    selected: advancedSettings.slippageBps,
+                    onSelect: handleSlippageSelect,
+                    formatLabel: advancedSettings.formatPercentage
+                  }
+                ) })
+              },
+              "pods-slippage-panel"
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-[color:var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)] pt-[var(--deframe-widget-size-padding-y-sm)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-snug text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]", children: headerLabel }),
+              details.timerElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-shrink-0 items-center gap-[var(--deframe-widget-size-gap-sm)]", children: details.timerElement })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col border-t border-[color:var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PodsDetailRow, { label: details.labels.exchangeRateLabel, value: details.exchangeRateFormatted }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-[var(--deframe-widget-size-padding-y-xs)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                SwapQuoteBlockchainCostsView,
+                {
+                  totalCostFormatted: details.totalCostFormatted,
+                  feePercentage: details.feePercentage,
+                  gasCostFormatted: details.gasCostFormatted,
+                  protocolFee: details.protocolFee,
+                  blockchainCostsLabel: details.labels.blockchainCostsLabel,
+                  networkGasLabel: details.labels.networkGasLabel,
+                  protocolFeeLabel: details.labels.protocolFeeLabel,
+                  collapseLabel: details.labels.costsCollapseLabel,
+                  expandLabel: details.labels.costsExpandLabel
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PodsDetailRow,
+                {
+                  label: details.labels.priceImpactLabel,
+                  value: details.priceImpactFormatted,
+                  valueColor: getPriceImpactValueColor(details.priceImpactIsPositive)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(PodsDetailRow, { label: slippageDetailLabel, value: slippageDetailValue }),
+              /* @__PURE__ */ jsxRuntime.jsx(PodsDetailRow, { label: details.labels.etaLabel, value: details.etaFormatted })
+            ] }),
+            details.quoteId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)] border-t border-[color:var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-xs)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-[color:var(--deframe-widget-color-text-tertiary)] opacity-60 font-[var(--deframe-widget-font-family)]", children: details.labels.quoteIdLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AddressDisplay,
+                {
+                  address: details.quoteId,
+                  className: "max-w-[150px] min-w-0 px-[8px] py-[3px]"
+                }
+              )
+            ] })
+          ]
+        },
+        "pods-quote-body"
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SwapQuoteErrorsView,
+      {
+        hasQuoteError: details.hasQuoteError,
+        hasBytecodeError: details.hasBytecodeError,
+        quoteErrorMessage: details.quoteErrorMessage,
+        bytecodeErrorMessage: details.bytecodeErrorMessage
+      }
+    )
+  ] });
+}
+var PodsSwapFormView = ({
+  onSubmit,
+  formRef,
+  labels,
+  onHistoryClick,
+  onSwitchTokens,
+  switchTokensAriaLabel,
+  showHistoryTooltip = false,
+  fromCard,
+  toCard,
+  advancedSettings,
+  transactionDetails,
+  priceImpactWarning,
+  confirmButton
+}) => {
+  const historyTooltipId = React6__namespace.default.useId();
+  const historyTooltipProps = showHistoryTooltip ? { "aria-describedby": historyTooltipId, title: labels.historyAriaLabel } : {};
+  const handlePercentageClick = advancedSettings.onPercentageClick;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": "pods-swap-form-view",
+        "data-slot": "pods-swap-form-view",
+        className: "flex-1 min-h-0 overflow-y-auto swap-flow-content px-[var(--deframe-widget-size-padding-x-sm)] pb-[var(--deframe-widget-size-padding-y-xs)]",
+        children: /* @__PURE__ */ jsxRuntime.jsx("form", { ref: formRef, onSubmit, "data-testid": "pods-swap-flow-form", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)] text-[color:var(--deframe-widget-color-text-secondary)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-md)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "pods-swap-flow-title", children: labels.title }) }),
+              labels.subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "!text-[14px]", children: labels.subtitle })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex group", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                __spreadProps(__spreadValues({
+                  "data-testid": "pods-swap-history-button",
+                  type: "button",
+                  onClick: onHistoryClick,
+                  className: "flex h-12 w-12 cursor-pointer items-center justify-center rounded-[var(--deframe-widget-size-radius-full)] text-[color:var(--deframe-widget-color-text-secondary)] transition-colors hover:text-[color:var(--deframe-widget-color-brand-primary)]",
+                  "aria-label": labels.historyAriaLabel
+                }, historyTooltipProps), {
+                  children: /* @__PURE__ */ jsxRuntime.jsx(md.MdHistory, { className: "h-6 w-6", "aria-hidden": "true" })
+                })
+              ),
+              showHistoryTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  id: historyTooltipId,
+                  role: "tooltip",
+                  className: "pointer-events-none absolute right-0 top-full z-10 mt-1 whitespace-nowrap rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)] px-2 py-1 text-xs text-[color:var(--deframe-widget-color-text-primary)] opacity-0 shadow-lg transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
+                  children: labels.historyAriaLabel
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-stretch gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SwapFromCardViewSimple,
+              __spreadProps(__spreadValues({}, fromCard), {
+                percentageOptions: advancedSettings.percentageOptions,
+                onPercentageClick: handlePercentageClick,
+                maxLabel: advancedSettings.maxLabel
+              })
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 -my-5 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                "data-testid": "pods-swap-switch-tokens-button",
+                type: "button",
+                onClick: onSwitchTokens,
+                className: "flex h-10 w-10 cursor-pointer items-center justify-center rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-brand-secondary)] text-[color:var(--deframe-widget-color-text-primary)] shadow-md transition-shadow hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[color:var(--deframe-widget-color-brand-secondary)]",
+                "aria-label": switchTokensAriaLabel,
+                children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSwapVert, { className: "h-5 w-5", "aria-hidden": "true" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SwapToCardViewSimple, __spreadValues({}, toCard))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-[var(--deframe-widget-size-padding-y-xl)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+            PodsSwapQuoteDetails,
+            {
+              details: transactionDetails,
+              advancedSettings
+            }
+          ) })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-testid": "pods-swap-flow-footer",
+        className: "w-full p-[var(--deframe-widget-size-padding-x-md)]",
+        children: [
+          priceImpactWarning && /* @__PURE__ */ jsxRuntime.jsx(
+            SwapPriceImpactWarning,
+            {
+              warning: priceImpactWarning,
+              className: "mb-[var(--deframe-widget-size-gap-sm)]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "pods-swap-confirm-button", children: /* @__PURE__ */ jsxRuntime.jsx(ConfirmSwapButtonViewSimple, __spreadValues({}, confirmButton)) })
+        ]
+      }
+    )
+  ] });
+};
 var ChooseANetworkView = ({
   labels,
   autoFocus = true,
@@ -9030,8 +9321,12 @@ function AssetSearchAndList({
   hasMore,
   onLoadMore,
   labels,
-  autoFocus
+  autoFocus,
+  categories,
+  selectedCategory,
+  onCategoryChange
 }) {
+  const hasCategories = categories && categories.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -9062,6 +9357,48 @@ function AssetSearchAndList({
             )
           }
         ),
+        hasCategories && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-test-id": "category-chips",
+            "data-slot": "category-chips",
+            className: "flex gap-[var(--deframe-widget-size-gap-sm)] overflow-x-auto px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)] flex-shrink-0 [scrollbar-width:none]",
+            children: categories.map((cat) => {
+              const isActive = cat.id === selectedCategory;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-test-id": "category-chip",
+                  "data-slot": "category-chip",
+                  onClick: () => onCategoryChange == null ? void 0 : onCategoryChange(cat.id),
+                  className: tailwindMerge.twMerge(
+                    "inline-flex items-center justify-center",
+                    "h-[28px] px-[10px]",
+                    "rounded-[var(--deframe-widget-size-radius-full)]",
+                    "cursor-pointer text-[12px] font-[var(--deframe-widget-font-family)]",
+                    "border outline-none transition-all duration-150 whitespace-nowrap flex-shrink-0",
+                    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)]"
+                    ].join(" ") : [
+                      "border-[color:var(--deframe-widget-color-border-secondary)]",
+                      "bg-transparent",
+                      "text-[color:var(--deframe-widget-color-text-secondary)]",
+                      "[font-weight:var(--deframe-widget-font-weight-regular)]",
+                      "hover:border-[color:var(--deframe-widget-color-border-primary)]",
+                      "hover:text-[color:var(--deframe-widget-color-text-primary)]"
+                    ].join(" ")
+                  ),
+                  children: cat.label
+                },
+                cat.id
+              );
+            })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -9163,7 +9500,10 @@ function ChooseNetworkAndAssetViewSimple({
   hasMore,
   onLoadMore,
   isFetching,
-  labels
+  labels,
+  categories,
+  selectedCategory,
+  onCategoryChange
 }) {
   var _a;
   const [query, setQuery] = React6__namespace.useState("");
@@ -9258,7 +9598,10 @@ function ChooseNetworkAndAssetViewSimple({
         hasMore,
         onLoadMore,
         labels,
-        autoFocus
+        autoFocus,
+        categories,
+        selectedCategory,
+        onCategoryChange
       }
     );
     if (isMobile) {
@@ -19901,6 +20244,7 @@ exports.OnrampPixcodeView = OnrampPixcodeView;
 exports.OnrampSuccessSimpleView = OnrampSuccessSimpleView;
 exports.OnrampSuccessView = OnrampSuccessView;
 exports.PercentageButton = PercentageButton;
+exports.PodsSwapFormView = PodsSwapFormView;
 exports.PrimaryButton = PrimaryButton;
 exports.ProcessingBadge = ProcessingBadge;
 exports.ProgressIndicator = ProgressIndicator;