@0xsquid/ui 3.4.0-beta.0 → 3.4.1-beta-interactive-to-amount.0

package/dist/esm/index.js

@@ -5172,7 +5172,7 @@ function useConstant(init) {
 
 const isBrowser$1 = typeof window !== "undefined";
 
-const useIsomorphicLayoutEffect$1 = isBrowser$1 ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$2 = isBrowser$1 ? useLayoutEffect : useEffect;
 
 /**
  * @public
@@ -5477,7 +5477,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
      */
     const [diffedChildren, setDiffedChildren] = useState(presentChildren);
     const [renderedChildren, setRenderedChildren] = useState(presentChildren);
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect$2(() => {
         isInitialRender.current = false;
         pendingPresentChildren.current = presentChildren;
         /**
@@ -5576,7 +5576,7 @@ const DeprecatedLayoutGroupContext = createContext(null);
 
 function useIsMounted() {
     const isMounted = useRef(false);
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect$2(() => {
         isMounted.current = true;
         return () => {
             isMounted.current = false;
@@ -6221,7 +6221,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
     const wantsHandoff = useRef(Boolean(optimisedAppearId) &&
         !window.MotionHandoffIsComplete?.(optimisedAppearId) &&
         window.MotionHasOptimisedAnimation?.(optimisedAppearId));
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect$2(() => {
         if (!visualElement)
             return;
         isMounted.current = true;
@@ -19600,7 +19600,7 @@ var UserInputType;
     UserInputType[UserInputType["TOKEN"] = 0] = "TOKEN";
     UserInputType[UserInputType["USD"] = 1] = "USD";
 })(UserInputType || (UserInputType = {}));
-function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, direction, initialInputMode = UserInputType.TOKEN, }) {
+function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, initialInputMode = UserInputType.TOKEN, }) {
     const [inputValue, setInputValue] = useState("");
     const [userInputType, setUserInputType] = useState(initialInputMode);
     useEffect(() => {
@@ -19698,16 +19698,8 @@ function useNumericInput({ onAmountChange, token, balance, debounceInput, forced
         if (isNaN(Number(inputValue)) || inputValue === "")
             return "0";
         if (userInputType === UserInputType.TOKEN) {
-            if (direction === "from") {
-                return formatUsdAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals), {
-                    includeSign: false,
-                });
-            }
-            else {
-                return formatUsdAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0", {
-                    includeSign: false,
-                });
-            }
+            const usdAmount = (_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals);
+            return formatUsdAmount(usdAmount, { includeSign: false });
         }
         else {
             return formatTokenAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
@@ -19715,7 +19707,6 @@ function useNumericInput({ onAmountChange, token, balance, debounceInput, forced
     }, [
         inputValue,
         userInputType,
-        direction,
         token.price,
         maxUsdDecimals,
         inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd,
@@ -39375,10 +39366,11 @@ const Card = ({ variant = "transparent", className, children, }) => {
     return (jsx("div", { className: cn("tw-rounded-squid-l tw-border tw-border-material-dark-average tw-bg-material-dark-average tw-backdrop-blur/10", className), children: children }));
 };
 
+const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useOnResize(ref, callback) {
     const callbackRef = useRef(callback);
     callbackRef.current = callback;
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect$1(() => {
         if (!ref.current)
             return;
         const observer = new ResizeObserver(([entry]) => {
@@ -39391,8 +39383,13 @@ function useOnResize(ref, callback) {
         return () => observer.disconnect();
     }, [ref.current]);
 }
+const EMPTY_RECT = {
+    x: 0, y: 0, width: 0, height: 0,
+    top: 0, left: 0, right: 0, bottom: 0,
+    toJSON: () => ({}),
+};
 function useRect(ref) {
-    const [rect, setRect] = useState(() => new DOMRectReadOnly());
+    const [rect, setRect] = useState(EMPTY_RECT);
     useOnResize(ref, setRect);
     return rect;
 }
@@ -39904,10 +39901,6 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
     });
     // Save previous amount between renders for transition animation.
     useEffect(() => {
-        if (direction === "from") {
-            setForcedAmount(amount);
-            return;
-        }
         const { amount: prevAmount, chain: prevChain, token: prevToken, } = prevRef.current;
         const currentChain = JSON.stringify(chain);
         const currentToken = JSON.stringify(token);
@@ -39930,7 +39923,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
                 }, balance: balance, criticalPriceImpactPercentage: criticalPriceImpactPercentage, error: error, formatIfVerySmall: {
                     token: "0.001",
                     usd: "0.01",
-                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: showNumericInputDetails, direction: direction, forcedAmount: forcedAmount, inputModeButton: inputModeButton, balanceButton: balanceButton, isInteractive: isInputInteractive && !isLoading, debounceInput: debounceInput })] }));
+                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: showNumericInputDetails, forcedAmount: forcedAmount, inputModeButton: inputModeButton, balanceButton: balanceButton, isInteractive: isInputInteractive && !isLoading, debounceInput: debounceInput })] }));
 }
 
 function AccountListItem({ isConnected, imageUrls = [], imageUrl, badgeUrl, actions, subtitle, title, }) {
@@ -40087,7 +40080,7 @@ const useIsomorphicLayoutEffect = IS_SERVER ? useEffect : useLayoutEffect;
  * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
  * ```
  */
-function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = false, } = {}) {
     const getMatches = (query) => {
         if (IS_SERVER) {
             return defaultValue;
@@ -40175,6 +40168,8 @@ function useUserTheme() {
     const [themePreference, setThemePreference] = useState(getInitialTheme);
     const [themeType, setThemeType] = useState(getEffectiveTheme(themePreference));
     useEffect(() => {
+        if (typeof window === "undefined")
+            return;
         const handleThemeChange = (e) => {
             setThemePreference(e.detail);
         };
@@ -40184,6 +40179,8 @@ function useUserTheme() {
         };
     }, []);
     useEffect(() => {
+        if (typeof window === "undefined")
+            return;
         const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
         const handleChange = () => {
             if (themePreference === ThemePreference.SYSTEM) {
@@ -40201,6 +40198,8 @@ function useUserTheme() {
     }, [themePreference]);
     const setThemeManually = (theme) => {
         setThemePreference(theme);
+        if (typeof window === "undefined")
+            return;
         localStorage.setItem(THEME_STORAGE_KEY, theme);
         window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail: theme }));
     };
@@ -40222,6 +40221,8 @@ function getInitialTheme() {
 function getEffectiveTheme(themeType) {
     if (themeType !== ThemePreference.SYSTEM)
         return themeType;
+    if (typeof window === "undefined")
+        return "dark";
     return window.matchMedia(THEME_MEDIA_QUERY).matches ? "light" : "dark";
 }
 
@@ -41441,7 +41442,7 @@ function FilterSection({ title, children, collapsed = false, handleCollapse, han
             maxHeight: 0,
         },
         expanded: {
-            maxHeight: Math.min(height, window.innerHeight - 40) + "px",
+            maxHeight: Math.min(height, (typeof window !== "undefined" ? window.innerHeight : height) - 40) + "px",
         },
     }), [height]);
     return (jsxs("div", { className: "tw-flex tw-min-h-10 tw-flex-col", children: [jsxs("div", { className: "tw-flex tw-min-h-squid-xl tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-between tw-px-squid-m tw-text-grey-300", onClick: () => {
@@ -41549,7 +41550,7 @@ function NumericInput(_a) {
     var { priceImpactPercentage, balance = "0", error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 2, formatIfVerySmall = {
         token: "0.001",
         usd: "0.01",
-    }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton, debounceInput = true, initialInputMode = UserInputType.TOKEN, customSymbol, hideControls = false, hideBalance = false, containerClassName, inputClassName } = _a, props = __rest(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton", "debounceInput", "initialInputMode", "customSymbol", "hideControls", "hideBalance", "containerClassName", "inputClassName"]);
+    }, showDetails = true, isLoading = false, inputModeButton, isInteractive = false, balanceButton, debounceInput = true, initialInputMode = UserInputType.TOKEN, customSymbol, hideControls = false, hideBalance = false, containerClassName, inputClassName } = _a, props = __rest(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "inputModeButton", "isInteractive", "balanceButton", "debounceInput", "initialInputMode", "customSymbol", "hideControls", "hideBalance", "containerClassName", "inputClassName"]);
     const { userInputType, inputValue, handleInputChange, handleSwitchInputMode, isTokenAmountVerySmall, isUsdAmountVerySmall, amountFormatted, onBalanceButtonClick, balanceFormatted, } = useNumericInput({
         onAmountChange,
         token,
@@ -41559,7 +41560,6 @@ function NumericInput(_a) {
         formatIfVerySmall,
         inputModeButton,
         maxUsdDecimals,
-        direction,
         initialInputMode,
     });
     const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
@@ -41587,7 +41587,7 @@ function NumericInput(_a) {
         const totalPadding = Math.ceil(symbolWidth) + basePadding;
         return `${totalPadding}px`;
     };
-    return (jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-col", children: [isLoading && (jsx("div", { className: "tw-pointer-events-none tw-absolute tw-inset-0 tw-top-squid-xxs tw-z-10 tw-overflow-hidden", children: jsx("div", { className: "tw-h-full tw-w-[78.75rem] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), isInteractive && !isLoading ? (jsx("form", { className: cn(containerClassname, containerClassName), onSubmit: (e) => {
+    return (jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-col", children: [isLoading && (jsx("div", { className: "tw-pointer-events-none tw-absolute tw-inset-0 tw-top-squid-xxs tw-z-10 tw-overflow-hidden", children: jsx("div", { className: "tw-h-full tw-w-[78.75rem] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx("form", { className: cn(containerClassname, containerClassName), onSubmit: (e) => {
                     e.preventDefault();
                 }, children: jsxs("span", { className: "tw-relative tw-w-full", children: [displaySymbol && (jsx("span", { ref: symbolRef, style: {
                                 transform: "translateY(-50%)",
@@ -41595,25 +41595,23 @@ function NumericInput(_a) {
                                 ? {
                                     paddingLeft: getInputPadding(),
                                 }
-                                : undefined, className: cn("tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-500 focus:tw-outline-none", displaySymbol ? "tw-pr-squid-xs" : "tw-px-squid-xs", inputClassName) }, props))] }) })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName, containerClassName), children: jsx("div", { className: "tw-font-regular tw-flex tw-h-[55px] tw-w-full tw-cursor-default tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-text-grey-300", children: jsx(AnimateNumber, { isLoading: isLoading, number: inputValue || "0", showMask: true }) }) })), !showDetails || hideControls ? null : (jsxs("footer", { className: cn("tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m", isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
-                        ? undefined
-                        : userInputType === UserInputType.TOKEN
-                            ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
-                            : inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(AmountChip, { onClick: isInteractive
-                                ? () => {
-                                    var _a;
-                                    handleSwitchInputMode();
-                                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                }
-                                : undefined, className: cn(buttonClassName, isInteractive
-                                ? interactiveChipClassName
-                                : notInteractiveChipClassName), children: [jsx(SwapInputsIcon, {}), userInputType === UserInputType.TOKEN ? (jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? "<" : "", "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
-                                                ? formatIfVerySmall.token
-                                                : amountFormatted })] })) : (jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? "<" : "", jsx(CaptionText, { children: isTokenAmountVerySmall
-                                                ? formatIfVerySmall.token
-                                                : amountFormatted }), " ", jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === "to" ? (jsxs("span", { className: cn("tw-flex tw-items-center", priceImpactClass), children: [jsx(ArrowTriangle, { className: Number(priceImpactPercentage) === 0
-                                                ? "tw-opacity-0"
-                                                : "" }), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat("%") })] })) : null] }) }))), !hideBalance && (jsx(Tooltip, Object.assign({}, (isLoading ? undefined : balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.tooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(BalanceChipTag, { disabled: !balanceChipClickable, onClick: balanceChipClickable ? onBalanceButtonClick : undefined, className: cn(buttonClassName, balanceChipClickable
+                                : undefined, className: cn("tw-peer tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-py-squid-s tw-text-transparent placeholder:tw-text-grey-600 placeholder:tw-opacity-0 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-500 focus:tw-outline-none focus:placeholder:tw-opacity-100", displaySymbol ? "tw-pr-squid-xs" : "tw-px-squid-xs", inputClassName) }, props)), jsx("div", { className: cn("tw-pointer-events-none tw-absolute tw-inset-0 tw-flex tw-items-center tw-rounded-squid-s tw-text-heading-small tw-text-grey-300 peer-focus:tw-opacity-0", displaySymbol ? "tw-pr-squid-xs" : "tw-px-squid-xs", (isLoading || Number(inputValue || 0) === 0) && loadingClassName), style: displaySymbol ? { paddingLeft: getInputPadding() } : undefined, children: jsx(AnimateNumber, { isLoading: isLoading, number: inputValue || "0", showMask: true }) })] }) }), !showDetails || hideControls ? null : (jsxs("footer", { className: cn("tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m", isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5", children: [jsx(Tooltip, Object.assign({}, (isLoading
+                                ? undefined
+                                : userInputType === UserInputType.TOKEN
+                                    ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
+                                    : inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(AmountChip, { onClick: isInteractive
+                                        ? () => {
+                                            var _a;
+                                            handleSwitchInputMode();
+                                            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                        }
+                                        : undefined, className: cn(buttonClassName, isInteractive
+                                        ? interactiveChipClassName
+                                        : notInteractiveChipClassName), children: [jsx(SwapInputsIcon, {}), userInputType === UserInputType.TOKEN ? (jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? "<" : "", "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
+                                                        ? formatIfVerySmall.token
+                                                        : amountFormatted })] })) : (jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? "<" : "", jsx(CaptionText, { children: isTokenAmountVerySmall
+                                                        ? formatIfVerySmall.token
+                                                        : amountFormatted }), " ", jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] }))] }) })), priceImpactPercentage ? (jsxs("span", { className: cn("tw-flex tw-items-center", priceImpactClass), children: [Number(priceImpactPercentage) !== 0 && jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat("%") })] })) : null] })), !hideBalance && (jsx(Tooltip, Object.assign({}, (isLoading ? undefined : balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.tooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(BalanceChipTag, { disabled: !balanceChipClickable, onClick: balanceChipClickable ? onBalanceButtonClick : undefined, className: cn(buttonClassName, balanceChipClickable
                                 ? interactiveChipClassName
                                 : notInteractiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxs("div", { children: [userInputType === UserInputType.USD && (jsx(CaptionText, { className: "tw-opacity-66", children: "$" })), jsx(CaptionText, { children: balanceFormatted })] }), !(balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.hideMaxChip) && jsx(Chip, { label: "Max" })] }) })))] }))] }));
 }
@@ -83696,11 +83694,6 @@ function LinkButton({ href, label }) {
     return (jsxs("a", { href: href, target: "_blank", className: "tw-flex tw-items-center tw-gap-0.5", rel: "noreferrer", children: [label, jsx("div", { className: "tw-ml-0.5 tw-rounded-squid-xs tw-p-0.5 tw-text-royal-500 hover:tw-bg-material-light-thin", children: jsx(SquareArrowTopRightIcon, {}) })] }));
 }
 
-const RefundedProperty = ({ token, amount, link, showGradientBg, }) => {
-    const detail = (jsx(IconLabel, { src: token.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: amount }) }));
-    return (jsx(PropertyListItem, { variant: "large", showGradientBg: showGradientBg, label: `Refunded ${token.symbol}`, icon: jsx(SwapIcon, {}), detail: link ? jsx(LinkButton, { href: link, label: detail }) : detail }));
-};
-
 const TokenLink = ({ logoURI, amount, }) => {
     return (jsx(IconLabel, { src: logoURI, rounded: "full", children: amount ? (jsx(BodyText, { size: "small", children: amount })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }));
 };
@@ -83708,16 +83701,16 @@ const TokenProperty = ({ icon, label, token, link, amount, showGradientBg, }) =>
     return (jsx(PropertyListItem, { variant: "large", icon: icon, label: label, showGradientBg: showGradientBg, detail: token ? (link ? (jsx(LinkButton, { href: link, label: jsx(TokenLink, { logoURI: token.logoURI, amount: amount }) })) : (jsx(TokenLink, { logoURI: token.logoURI, amount: amount }))) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }));
 };
 
-function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, refundHash, refundLink, }) {
+function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, }) {
     if (isLoading)
         return jsx(TransactionViewLayout, { isLoading: isLoading });
-    return (jsx(TransactionViewLayout, { header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: fromChain ? (jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: fromAddress, label: jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: toAddress, label: jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsx(Transfer, { from: fromToken ? (jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toToken && exchangeRate ? (jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), refundHash && status === "refunded" ? (jsx(RefundedProperty, { token: fromToken, amount: fromAmount, link: refundLink })) : (jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete }))] }), actions: actions, fees: fees }));
+    return (jsx(TransactionViewLayout, { header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: fromChain ? (jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: fromAddress, label: jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: toAddress, label: jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsx(Transfer, { from: fromToken ? (jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toToken && exchangeRate ? (jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] })) : (jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
 }
 
-function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, refundHash, refundLink, }) {
+function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }) {
     if (isLoading)
         return jsx(TransactionViewLayout, { isLoading: isLoading });
-    return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxs("div", { className: "tw-relative", children: [jsx(Image$2, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), toChain ? (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsx(Image$2, { src: toChain.logoURI, size: "medium" }) })) : (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-w-squid-m tw-overflow-hidden tw-rounded-md", children: jsx(LoadingSkeleton, { className: "tw-bg-grey-600 tw-text-transparent" }) }))] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, amount: fromAmount, link: fromLink, icon: jsx(ArrowRightUpCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, amount: toAmount, link: toLink, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, {})) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: fromAddress, label: jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: toAddress, label: jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), refundHash && status === "refunded" ? (jsx(RefundedProperty, { token: fromToken, amount: fromAmount, link: refundLink })) : (jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete }))] }), actions: actions, fees: fees }));
+    return (jsx(TransactionViewLayout, { isLoading: isLoading, header: jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxs("div", { className: "tw-relative", children: [jsx(Image$2, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), toChain ? (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsx(Image$2, { src: toChain.logoURI, size: "medium" }) })) : (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-w-squid-m tw-overflow-hidden tw-rounded-md", children: jsx(LoadingSkeleton, { className: "tw-bg-grey-600 tw-text-transparent" }) }))] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxs(PropertiesLayout, { children: [jsx(TokenProperty, { token: fromToken, amount: fromAmount, link: fromLink, icon: jsx(ArrowRightUpCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsx(TokenProperty, { token: toToken, amount: toAmount, link: toLink, icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: toChain ? (jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsx(LoadingSkeleton, {})) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: fromAddress, label: jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsx(BodyText, { size: "small", children: jsx(CopyButton, { copyText: toAddress, label: jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
 }
 
 function TransactionView({ type, isLoading, data, }) {

package/dist/esm/types/components/controls/NumericInput.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { UserInputType } from "../../hooks/useNumericInput";
-import { type SwapDirection } from "../../types/components";
 import { type TooltipProps } from "./Tooltip";
 export interface Token {
     price: number;
@@ -35,7 +34,6 @@ export interface NumericInputProps {
     inputClassName?: string;
 }
 export interface Props extends NumericInputProps, React.InputHTMLAttributes<HTMLInputElement> {
-    direction?: SwapDirection;
     showDetails?: boolean;
     isLoading?: boolean;
     isInteractive?: boolean;
@@ -45,4 +43,4 @@ export interface Props extends NumericInputProps, React.InputHTMLAttributes<HTML
         message: string;
     };
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, debounceInput, initialInputMode, customSymbol, hideControls, hideBalance, containerClassName, inputClassName, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, inputModeButton, isInteractive, balanceButton, debounceInput, initialInputMode, customSymbol, hideControls, hideBalance, containerClassName, inputClassName, ...props }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/views/TransactionView/BaseTransactionViewProps.d.ts

@@ -29,6 +29,4 @@ export interface BaseTransactionViewProps {
     fees: FeesActionProps;
     timeToComplete: string;
     timestamp: number;
-    refundHash?: string;
-    refundLink?: string;
 }

package/dist/esm/types/components/views/TransactionView/BridgeTransactionView.d.ts

@@ -34,5 +34,5 @@ type BridgeTransactionViewProps = (BaseBridgeTransactionViewProps & {
 }) | (Partial<Omit<BaseBridgeTransactionViewProps, keyof BaseTransactionViewProps>> & BaseTransactionViewProps & {
     isLoading: true;
 });
-export declare function BridgeTransactionView({ title, hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, refundHash, refundLink, }: BridgeTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function BridgeTransactionView({ title, hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }: BridgeTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/views/TransactionView/SwapTransactionView.d.ts

@@ -32,5 +32,5 @@ type SwapTransactionViewProps = (BaseSwapTransactionViewProps & {
 }) | (Partial<Omit<BaseSwapTransactionViewProps, keyof BaseTransactionViewProps>> & BaseTransactionViewProps & {
     isLoading: true;
 });
-export declare function SwapTransactionView({ title, hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, refundHash, refundLink, }: SwapTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapTransactionView({ title, hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, }: SwapTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/hooks/useMediaQuery.d.ts

@@ -1,4 +1,4 @@
-type UseMediaQueryOptions = {
+interface UseMediaQueryOptions {
     /**
      * The default value to return if the hook is being run on the server.
      * @default false
@@ -9,7 +9,7 @@ type UseMediaQueryOptions = {
      * @default true
      */
     initializeWithValue?: boolean;
-};
+}
 /**
  * Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
  * @param {string} query - The media query to track.

package/dist/esm/types/hooks/useNumericInput.d.ts

@@ -18,10 +18,9 @@ interface UseNumericInputOptions {
     };
     maxUsdDecimals?: number;
     debounceInput?: boolean;
-    direction?: "from" | "to";
     initialInputMode?: UserInputType;
 }
-export declare function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, direction, initialInputMode, }: UseNumericInputOptions): {
+export declare function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, initialInputMode, }: UseNumericInputOptions): {
     userInputType: UserInputType;
     inputValue: string;
     handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;

package/dist/esm/types/stories/views/TransactionView.stories.d.ts

@@ -956,55 +956,3 @@ export declare const BridgeMissingToToken: {
         };
     };
 };
-export declare const BridgeRefunded: {
-    args: {
-        type: string;
-        data: {
-            title: string;
-            hash: string;
-            url: string;
-            status: string;
-            fromAmount: string;
-            toAmount: string;
-            fromToken: {
-                logoURI: string;
-                bgColor: string;
-                symbol: string;
-            };
-            toToken: {
-                logoURI: string;
-                bgColor: string;
-                symbol: string;
-            };
-            fromChain: {
-                logoURI: string;
-                name: string;
-                bgColor: string;
-            };
-            toChain: {
-                logoURI: string;
-                name: string;
-                bgColor: string;
-            };
-            fromAddress: string;
-            toAddress: string;
-            fromLink: string;
-            timeToComplete: string;
-            refundHash: string;
-            refundLink: string;
-            fees: {
-                status: string;
-                total: {
-                    label: string;
-                    usd: number;
-                };
-                lines: {
-                    label: string;
-                    usd: number;
-                    amount: string;
-                    symbol: string;
-                }[];
-            };
-        };
-    };
-};