@deframe-sdk/components 0.1.9 → 0.1.10

package/dist/index.js

@@ -2806,7 +2806,7 @@ var SwapSlippageToleranceButtonsView = ({
     const activeClasses = "border-brand-primary text-brand-primary bg-brand-tint dark:bg-brand-tint-dark";
     const inactiveClasses = "border-border-subtle dark:border-border-subtle-dark text-text-secondary dark:text-text-secondary-dark bg-bg-default dark:bg-bg-default-dark";
     const buttonBase = "px-sm py-xs rounded border text-text-sm cursor-pointer";
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         "data-test-id": `slippage-option-${option}`,
@@ -2815,10 +2815,7 @@ var SwapSlippageToleranceButtonsView = ({
         className: tailwindMerge.twMerge(buttonBase, isActive ? activeClasses : inactiveClasses),
         "aria-label": `${formatPercentage(option)}% slippage`,
         "aria-pressed": isActive,
-        children: [
-          formatPercentage(option),
-          "%"
-        ]
+        children: formatPercentage(option)
       },
       option
     );
@@ -3807,6 +3804,385 @@ var ChooseAnAssetSwapView = ({
     }
   ) });
 };
+var SwapFormView = ({
+  labels,
+  onHistoryClick,
+  fromCard,
+  switchButton,
+  toCard,
+  advancedSettings,
+  transactionDetails,
+  confirmButton
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": "swap-form-view",
+        className: "flex-1 min-h-0 overflow-y-auto swap-flow-content pr-sm",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-md text-text-secondary dark:text-text-secondary-dark", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-md", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "swap-flow-title", children: labels.title }) }),
+              labels.subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "!text-[14px]", children: labels.subtitle })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                "data-testid": "swap-history-button",
+                type: "button",
+                onClick: onHistoryClick,
+                className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary",
+                "aria-label": labels.historyAriaLabel,
+                children: /* @__PURE__ */ jsxRuntime.jsx(md.MdHistory, { className: "w-6 h-6" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-stretch gap-sm", children: [
+            fromCard,
+            switchButton,
+            toCard
+          ] }),
+          advancedSettings,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-xl", children: transactionDetails })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": "swap-flow-footer",
+        className: "border-t p-md border-border-default dark:border-border-default-dark bg-bg-primary dark:bg-bg-primary-dark",
+        children: confirmButton
+      }
+    )
+  ] });
+};
+var SwapFromCardView = ({
+  labels,
+  selectedToken,
+  onTokenClick,
+  balanceFormatted,
+  balanceUsdFormatted,
+  onBalanceClick,
+  chainLabel,
+  chainImage,
+  onNetworkClick,
+  amountValue,
+  amountHasError,
+  onAmountChange,
+  maxFractionDigits,
+  amountUsdFormatted,
+  isAmountUsdLoading,
+  amountSlot
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "flex flex-col gap-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-md items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SwapTokenSelectorView,
+        {
+          token: selectedToken,
+          onClick: onTokenClick,
+          testId: "swap-from-token-selector",
+          selectTokenLabel: labels.selectTokenLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TextBody,
+        {
+          variant: "text-small",
+          className: "text-text-tertiary dark:text-text-tertiary-dark",
+          children: onBalanceClick ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onBalanceClick,
+              className: "cursor-pointer hover:text-text-secondary dark:hover:text-text-secondary-dark transition-colors",
+              "data-testid": "swap-from-balance",
+              children: [
+                labels.balanceLabel,
+                ": ",
+                balanceFormatted,
+                " (",
+                balanceUsdFormatted,
+                ")"
+              ]
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "swap-from-balance", children: [
+            labels.balanceLabel,
+            ": ",
+            balanceFormatted,
+            " (",
+            balanceUsdFormatted,
+            ")"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SwapNetworkSelectorView,
+        {
+          chainLabel,
+          chainImage,
+          onClick: onNetworkClick,
+          directionLabel: labels.directionLabel,
+          testId: "swap-from-network-selector"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col flex-1 items-end justify-center gap-xs", children: amountSlot != null ? amountSlot : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SwapAmountInputView,
+        {
+          value: amountValue,
+          hasError: amountHasError,
+          onChange: onAmountChange,
+          maxFractionDigits,
+          ariaLabel: labels.amountPlaceholder
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TextBody,
+        {
+          as: "span",
+          variant: "text-small",
+          className: amountHasError ? "text-state-error dark:text-state-error" : "text-text-tertiary dark:text-text-tertiary-dark",
+          children: isAmountUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : amountUsdFormatted
+        }
+      )
+    ] }) })
+  ] }) });
+};
+var SwapToCardView = ({
+  labels,
+  selectedToken,
+  onTokenClick,
+  balanceFormatted,
+  balanceUsdFormatted,
+  chainLabel,
+  chainImage,
+  onNetworkClick,
+  outputAmount,
+  isOutputLoading,
+  outputUsdFormatted,
+  isOutputUsdLoading
+}) => {
+  const loadingElement = labels.searchingQuoteLabel ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    labels.searchingQuoteLabel,
+    /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+  ] }) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "flex flex-col gap-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-md items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-sm flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SwapTokenSelectorView,
+        {
+          token: selectedToken,
+          onClick: onTokenClick,
+          testId: "swap-to-token-selector",
+          selectTokenLabel: labels.selectTokenLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TextBody,
+        {
+          variant: "text-small",
+          className: "text-text-tertiary dark:text-text-tertiary-dark",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "swap-to-balance", children: [
+            labels.balanceLabel,
+            ": ",
+            balanceFormatted,
+            " (",
+            balanceUsdFormatted,
+            ")"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SwapNetworkSelectorView,
+        {
+          chainLabel,
+          chainImage,
+          onClick: onNetworkClick,
+          directionLabel: labels.directionLabel,
+          testId: "swap-to-network-selector"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 items-end justify-center gap-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SwapOutputAmountView,
+        {
+          displayOutput: outputAmount,
+          isLoading: isOutputLoading,
+          loadingElement,
+          searchingQuoteLabel: labels.searchingQuoteLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TextBody,
+        {
+          as: "span",
+          variant: "text-small",
+          className: "text-text-tertiary dark:text-text-tertiary-dark",
+          children: isOutputUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {}) : outputUsdFormatted
+        }
+      )
+    ] })
+  ] }) });
+};
+var SwapQuoteDetailsView = ({
+  labels,
+  isVisible,
+  isLoading,
+  quoteHeaderLabel,
+  timerElement,
+  exchangeRateFormatted,
+  totalCostFormatted,
+  feePercentage,
+  gasCostFormatted,
+  protocolFee,
+  slippageFormatted,
+  etaFormatted,
+  quoteId,
+  hasQuoteError,
+  hasBytecodeError,
+  quoteErrorMessage,
+  bytecodeErrorMessage
+}) => {
+  const headerLabel = isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    quoteHeaderLabel,
+    /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+  ] }) : quoteHeaderLabel;
+  const items = [
+    {
+      label: "",
+      value: /* @__PURE__ */ jsxRuntime.jsx(SwapQuoteHeaderView, { label: headerLabel, timerElement }),
+      valueClassName: "w-full"
+    },
+    {
+      label: labels.exchangeRateLabel,
+      value: exchangeRateFormatted
+    },
+    {
+      label: "",
+      value: /* @__PURE__ */ jsxRuntime.jsx(
+        SwapQuoteBlockchainCostsView,
+        {
+          totalCostFormatted,
+          feePercentage,
+          gasCostFormatted,
+          protocolFee,
+          blockchainCostsLabel: labels.blockchainCostsLabel,
+          networkGasLabel: labels.networkGasLabel,
+          protocolFeeLabel: labels.protocolFeeLabel,
+          collapseLabel: labels.costsCollapseLabel,
+          expandLabel: labels.costsExpandLabel
+        }
+      ),
+      valueClassName: "flex flex-col gap-sm w-full text-right"
+    },
+    {
+      label: labels.slippageLabel,
+      value: slippageFormatted
+    },
+    {
+      label: labels.etaLabel,
+      value: etaFormatted
+    }
+  ];
+  if (quoteId) {
+    items.push({ label: labels.quoteIdLabel, value: quoteId });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SummaryDetails,
+      {
+        title: labels.headerLabel,
+        items,
+        defaultOpen: isVisible,
+        className: "bg-bg-subtle dark:bg-bg-subtle-dark rounded shadow-sm p-md flex flex-col lg:!bg-bg-raised"
+      },
+      `details-${isVisible}`
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SwapQuoteErrorsView,
+      {
+        hasQuoteError,
+        hasBytecodeError,
+        quoteErrorMessage,
+        bytecodeErrorMessage
+      }
+    )
+  ] });
+};
+var SwapAdvancedSettingsView = ({
+  title,
+  isOpen,
+  onOpenChange,
+  slippageBps,
+  onSlippageSelect,
+  formatPercentage,
+  percentageOptions,
+  onPercentageClick,
+  slippageFormatted,
+  collapseText,
+  expandText,
+  maxLabel
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-2 mt-md", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    CollapsibleSection,
+    {
+      title,
+      subtitle: slippageFormatted,
+      open: isOpen,
+      onOpenChange,
+      collapseText,
+      expandText,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SwapSlippageToleranceButtonsView,
+          {
+            slippageBps,
+            onSelect: onSlippageSelect,
+            formatPercentage,
+            className: "mt-md"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full mt-md", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            PercentageButton,
+            {
+              type: "button",
+              onClick: () => onPercentageClick(pct),
+              children: label
+            },
+            pct
+          );
+        }) }) })
+      ]
+    }
+  ) }) });
+};
+var ConfirmSwapButtonView = ({
+  buttonLabel,
+  disabled,
+  isLoading,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "swap-confirm-button-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    PrimaryButton,
+    {
+      onClick,
+      className: "w-full",
+      disabled,
+      children: [
+        buttonLabel,
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+      ]
+    }
+  ) });
+};
 
 exports.ActionButton = ActionButton;
 exports.ActionSheet = ActionSheet;
@@ -3818,6 +4194,7 @@ exports.ChooseAnAssetSwapView = ChooseAnAssetSwapView;
 exports.CloseButton = CloseButton;
 exports.CollapsibleInfoRow = CollapsibleInfoRow;
 exports.CollapsibleSection = CollapsibleSection;
+exports.ConfirmSwapButtonView = ConfirmSwapButtonView;
 exports.ConnectWalletList = ConnectWalletList;
 exports.Currency = Currency;
 exports.DeframeComponentsProvider = DeframeComponentsProvider;
@@ -3863,17 +4240,22 @@ exports.StepStatusText = StepStatusText;
 exports.StrategyDetailsView = StrategyDetailsView;
 exports.SummaryDetails = SummaryDetails;
 exports.SummaryDetailsCryptoControlV2 = SummaryDetailsCryptoControlV2;
+exports.SwapAdvancedSettingsView = SwapAdvancedSettingsView;
 exports.SwapAmountInputView = SwapAmountInputView;
 exports.SwapCrossChainProcessingView = SwapCrossChainProcessingView;
+exports.SwapFormView = SwapFormView;
+exports.SwapFromCardView = SwapFromCardView;
 exports.SwapNetworkSelectorView = SwapNetworkSelectorView;
 exports.SwapOutputAmountView = SwapOutputAmountView;
 exports.SwapProcessingView = SwapProcessingView;
 exports.SwapQuoteBlockchainCostsView = SwapQuoteBlockchainCostsView;
+exports.SwapQuoteDetailsView = SwapQuoteDetailsView;
 exports.SwapQuoteErrorsView = SwapQuoteErrorsView;
 exports.SwapQuoteHeaderView = SwapQuoteHeaderView;
 exports.SwapSignatureWarningView = SwapSignatureWarningView;
 exports.SwapSlippageToleranceButtonsView = SwapSlippageToleranceButtonsView;
 exports.SwapSuccessView = SwapSuccessView;
+exports.SwapToCardView = SwapToCardView;
 exports.SwapTokenSelectorView = SwapTokenSelectorView;
 exports.SwapTransactionFailedView = SwapTransactionFailedView;
 exports.Tabs = Tabs;