@deframe-sdk/components 0.1.9 → 0.1.10

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React6 from 'react';
 import React6__default, { useState, useEffect, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline } from 'react-icons/md';
+import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline } from 'react-icons/md';
 import { HiChevronUp, HiChevronDown, HiChevronLeft, HiXMark, HiArrowRight } from 'react-icons/hi2';
 import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
 
@@ -2785,7 +2785,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__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "button",
       {
         "data-test-id": `slippage-option-${option}`,
@@ -2794,10 +2794,7 @@ var SwapSlippageToleranceButtonsView = ({
         className: twMerge(buttonBase, isActive ? activeClasses : inactiveClasses),
         "aria-label": `${formatPercentage(option)}% slippage`,
         "aria-pressed": isActive,
-        children: [
-          formatPercentage(option),
-          "%"
-        ]
+        children: formatPercentage(option)
       },
       option
     );
@@ -3786,7 +3783,386 @@ var ChooseAnAssetSwapView = ({
     }
   ) });
 };
+var SwapFormView = ({
+  labels,
+  onHistoryClick,
+  fromCard,
+  switchButton,
+  toCard,
+  advancedSettings,
+  transactionDetails,
+  confirmButton
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "swap-form-view",
+        className: "flex-1 min-h-0 overflow-y-auto swap-flow-content pr-sm",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-md text-text-secondary dark:text-text-secondary-dark", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-md", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-sm", children: [
+              /* @__PURE__ */ jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsx("span", { "data-testid": "swap-flow-title", children: labels.title }) }),
+              labels.subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "!text-[14px]", children: labels.subtitle })
+            ] }),
+            /* @__PURE__ */ 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__ */ jsx(MdHistory, { className: "w-6 h-6" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-stretch gap-sm", children: [
+            fromCard,
+            switchButton,
+            toCard
+          ] }),
+          advancedSettings,
+          /* @__PURE__ */ jsx("div", { className: "pb-xl", children: transactionDetails })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx(SectionCard, { className: "flex flex-col gap-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-md items-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-sm flex-1", children: [
+      /* @__PURE__ */ jsx(
+        SwapTokenSelectorView,
+        {
+          token: selectedToken,
+          onClick: onTokenClick,
+          testId: "swap-from-token-selector",
+          selectTokenLabel: labels.selectTokenLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextBody,
+        {
+          variant: "text-small",
+          className: "text-text-tertiary dark:text-text-tertiary-dark",
+          children: onBalanceClick ? /* @__PURE__ */ 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__ */ jsxs("span", { "data-testid": "swap-from-balance", children: [
+            labels.balanceLabel,
+            ": ",
+            balanceFormatted,
+            " (",
+            balanceUsdFormatted,
+            ")"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SwapNetworkSelectorView,
+        {
+          chainLabel,
+          chainImage,
+          onClick: onNetworkClick,
+          directionLabel: labels.directionLabel,
+          testId: "swap-from-network-selector"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 items-end justify-center gap-xs", children: amountSlot != null ? amountSlot : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SwapAmountInputView,
+        {
+          value: amountValue,
+          hasError: amountHasError,
+          onChange: onAmountChange,
+          maxFractionDigits,
+          ariaLabel: labels.amountPlaceholder
+        }
+      ),
+      /* @__PURE__ */ 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__ */ jsx(LoadingDots, {}) : amountUsdFormatted
+        }
+      )
+    ] }) })
+  ] }) });
+};
+var SwapToCardView = ({
+  labels,
+  selectedToken,
+  onTokenClick,
+  balanceFormatted,
+  balanceUsdFormatted,
+  chainLabel,
+  chainImage,
+  onNetworkClick,
+  outputAmount,
+  isOutputLoading,
+  outputUsdFormatted,
+  isOutputUsdLoading
+}) => {
+  const loadingElement = labels.searchingQuoteLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    labels.searchingQuoteLabel,
+    /* @__PURE__ */ jsx(LoadingDots, {})
+  ] }) : void 0;
+  return /* @__PURE__ */ jsx(SectionCard, { className: "flex flex-col gap-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-md items-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-sm flex-1", children: [
+      /* @__PURE__ */ jsx(
+        SwapTokenSelectorView,
+        {
+          token: selectedToken,
+          onClick: onTokenClick,
+          testId: "swap-to-token-selector",
+          selectTokenLabel: labels.selectTokenLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextBody,
+        {
+          variant: "text-small",
+          className: "text-text-tertiary dark:text-text-tertiary-dark",
+          children: /* @__PURE__ */ jsxs("span", { "data-testid": "swap-to-balance", children: [
+            labels.balanceLabel,
+            ": ",
+            balanceFormatted,
+            " (",
+            balanceUsdFormatted,
+            ")"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SwapNetworkSelectorView,
+        {
+          chainLabel,
+          chainImage,
+          onClick: onNetworkClick,
+          directionLabel: labels.directionLabel,
+          testId: "swap-to-network-selector"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 items-end justify-center gap-xs", children: [
+      /* @__PURE__ */ jsx(
+        SwapOutputAmountView,
+        {
+          displayOutput: outputAmount,
+          isLoading: isOutputLoading,
+          loadingElement,
+          searchingQuoteLabel: labels.searchingQuoteLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextBody,
+        {
+          as: "span",
+          variant: "text-small",
+          className: "text-text-tertiary dark:text-text-tertiary-dark",
+          children: isOutputUsdLoading ? /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+    quoteHeaderLabel,
+    /* @__PURE__ */ jsx(LoadingDots, {})
+  ] }) : quoteHeaderLabel;
+  const items = [
+    {
+      label: "",
+      value: /* @__PURE__ */ jsx(SwapQuoteHeaderView, { label: headerLabel, timerElement }),
+      valueClassName: "w-full"
+    },
+    {
+      label: labels.exchangeRateLabel,
+      value: exchangeRateFormatted
+    },
+    {
+      label: "",
+      value: /* @__PURE__ */ 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__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ 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__ */ jsx(
+      SwapQuoteErrorsView,
+      {
+        hasQuoteError,
+        hasBytecodeError,
+        quoteErrorMessage,
+        bytecodeErrorMessage
+      }
+    )
+  ] });
+};
+var SwapAdvancedSettingsView = ({
+  title,
+  isOpen,
+  onOpenChange,
+  slippageBps,
+  onSlippageSelect,
+  formatPercentage,
+  percentageOptions,
+  onPercentageClick,
+  slippageFormatted,
+  collapseText,
+  expandText,
+  maxLabel
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "pb-2 mt-md", children: /* @__PURE__ */ jsx(SectionCard, { children: /* @__PURE__ */ jsxs(
+    CollapsibleSection,
+    {
+      title,
+      subtitle: slippageFormatted,
+      open: isOpen,
+      onOpenChange,
+      collapseText,
+      expandText,
+      children: [
+        /* @__PURE__ */ jsx(
+          SwapSlippageToleranceButtonsView,
+          {
+            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
+          );
+        }) }) })
+      ]
+    }
+  ) }) });
+};
+var ConfirmSwapButtonView = ({
+  buttonLabel,
+  disabled,
+  isLoading,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "swap-confirm-button-wrapper", children: /* @__PURE__ */ jsxs(
+    PrimaryButton,
+    {
+      onClick,
+      className: "w-full",
+      disabled,
+      children: [
+        buttonLabel,
+        isLoading && /* @__PURE__ */ jsx(LoadingDots, {})
+      ]
+    }
+  ) });
+};
 
-export { ActionButton, ActionSheet, AddressDisplay, BackgroundContainer, BannerNotification, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, CloseButton, CollapsibleInfoRow, CollapsibleSection, ConnectWalletList, Currency, DeframeComponentsProvider, DetailsHeader, Currency as Fiat, FlexCol, FlexRow, HighRiskBadge, HistoryDepositDetailsView, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAmountInputView, SwapCrossChainProcessingView, SwapNetworkSelectorView, SwapOutputAmountView, SwapProcessingView, SwapQuoteBlockchainCostsView, SwapQuoteErrorsView, SwapQuoteHeaderView, SwapSignatureWarningView, SwapSlippageToleranceButtonsView, SwapSuccessView, SwapTokenSelectorView, SwapTransactionFailedView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletItem, ConnectWalletList as WalletList, WalletListContainer, cryptocontrolThemeColors, darkThemeColors, defaultThemeColors, themeToCSS };
+export { ActionButton, ActionSheet, AddressDisplay, BackgroundContainer, BannerNotification, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConnectWalletList, Currency, DeframeComponentsProvider, DetailsHeader, Currency as Fiat, FlexCol, FlexRow, HighRiskBadge, HistoryDepositDetailsView, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFromCardView, SwapNetworkSelectorView, SwapOutputAmountView, SwapProcessingView, SwapQuoteBlockchainCostsView, SwapQuoteDetailsView, SwapQuoteErrorsView, SwapQuoteHeaderView, SwapSignatureWarningView, SwapSlippageToleranceButtonsView, SwapSuccessView, SwapToCardView, SwapTokenSelectorView, SwapTransactionFailedView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletItem, ConnectWalletList as WalletList, WalletListContainer, cryptocontrolThemeColors, darkThemeColors, defaultThemeColors, themeToCSS };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map