@0xsquid/ui 3.3.3-beta-ssr.0 → 3.4.0-beta.0

package/dist/cjs/index.js

@@ -5192,7 +5192,7 @@ function useConstant(init) {
 
 const isBrowser$1 = typeof window !== "undefined";
 
-const useIsomorphicLayoutEffect$2 = isBrowser$1 ? require$$0.useLayoutEffect : require$$0.useEffect;
+const useIsomorphicLayoutEffect$1 = isBrowser$1 ? require$$0.useLayoutEffect : require$$0.useEffect;
 
 /**
  * @public
@@ -5497,7 +5497,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
      */
     const [diffedChildren, setDiffedChildren] = require$$0.useState(presentChildren);
     const [renderedChildren, setRenderedChildren] = require$$0.useState(presentChildren);
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$1(() => {
         isInitialRender.current = false;
         pendingPresentChildren.current = presentChildren;
         /**
@@ -5596,7 +5596,7 @@ const DeprecatedLayoutGroupContext = require$$0.createContext(null);
 
 function useIsMounted() {
     const isMounted = require$$0.useRef(false);
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$1(() => {
         isMounted.current = true;
         return () => {
             isMounted.current = false;
@@ -6241,7 +6241,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
     const wantsHandoff = require$$0.useRef(Boolean(optimisedAppearId) &&
         !window.MotionHandoffIsComplete?.(optimisedAppearId) &&
         window.MotionHasOptimisedAnimation?.(optimisedAppearId));
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$1(() => {
         if (!visualElement)
             return;
         isMounted.current = true;
@@ -39395,11 +39395,10 @@ const Card = ({ variant = "transparent", className, children, }) => {
     return (jsxRuntime.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" ? require$$0.useLayoutEffect : require$$0.useEffect;
 function useOnResize(ref, callback) {
     const callbackRef = require$$0.useRef(callback);
     callbackRef.current = callback;
-    useIsomorphicLayoutEffect$1(() => {
+    require$$0.useLayoutEffect(() => {
         if (!ref.current)
             return;
         const observer = new ResizeObserver(([entry]) => {
@@ -39412,13 +39411,8 @@ 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] = require$$0.useState(EMPTY_RECT);
+    const [rect, setRect] = require$$0.useState(() => new DOMRectReadOnly());
     useOnResize(ref, setRect);
     return rect;
 }
@@ -40113,7 +40107,7 @@ const useIsomorphicLayoutEffect = IS_SERVER ? require$$0.useEffect : require$$0.
  * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
  * ```
  */
-function useMediaQuery(query, { defaultValue = false, initializeWithValue = false, } = {}) {
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
     const getMatches = (query) => {
         if (IS_SERVER) {
             return defaultValue;
@@ -40201,8 +40195,6 @@ function useUserTheme() {
     const [themePreference, setThemePreference] = require$$0.useState(getInitialTheme);
     const [themeType, setThemeType] = require$$0.useState(getEffectiveTheme(themePreference));
     require$$0.useEffect(() => {
-        if (typeof window === "undefined")
-            return;
         const handleThemeChange = (e) => {
             setThemePreference(e.detail);
         };
@@ -40212,8 +40204,6 @@ function useUserTheme() {
         };
     }, []);
     require$$0.useEffect(() => {
-        if (typeof window === "undefined")
-            return;
         const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
         const handleChange = () => {
             if (themePreference === exports.ThemePreference.SYSTEM) {
@@ -40231,8 +40221,6 @@ 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 }));
     };
@@ -40254,8 +40242,6 @@ function getInitialTheme() {
 function getEffectiveTheme(themeType) {
     if (themeType !== exports.ThemePreference.SYSTEM)
         return themeType;
-    if (typeof window === "undefined")
-        return "dark";
     return window.matchMedia(THEME_MEDIA_QUERY).matches ? "light" : "dark";
 }
 
@@ -41475,7 +41461,7 @@ function FilterSection({ title, children, collapsed = false, handleCollapse, han
             maxHeight: 0,
         },
         expanded: {
-            maxHeight: Math.min(height, (typeof window !== "undefined" ? window.innerHeight : height) - 40) + "px",
+            maxHeight: Math.min(height, window.innerHeight - 40) + "px",
         },
     }), [height]);
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-min-h-10 tw-flex-col", children: [jsxRuntime.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: () => {
@@ -83730,6 +83716,11 @@ function LinkButton({ href, label }) {
     return (jsxRuntime.jsxs("a", { href: href, target: "_blank", className: "tw-flex tw-items-center tw-gap-0.5", rel: "noreferrer", children: [label, jsxRuntime.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: jsxRuntime.jsx(SquareArrowTopRightIcon, {}) })] }));
 }
 
+const RefundedProperty = ({ token, amount, link, showGradientBg, }) => {
+    const detail = (jsxRuntime.jsx(IconLabel, { src: token.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: amount }) }));
+    return (jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: showGradientBg, label: `Refunded ${token.symbol}`, icon: jsxRuntime.jsx(SwapIcon, {}), detail: link ? jsxRuntime.jsx(LinkButton, { href: link, label: detail }) : detail }));
+};
+
 const TokenLink = ({ logoURI, amount, }) => {
     return (jsxRuntime.jsx(IconLabel, { src: logoURI, rounded: "full", children: amount ? (jsxRuntime.jsx(BodyText, { size: "small", children: amount })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }));
 };
@@ -83737,16 +83728,16 @@ const TokenProperty = ({ icon, label, token, link, amount, showGradientBg, }) =>
     return (jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: icon, label: label, showGradientBg: showGradientBg, detail: token ? (link ? (jsxRuntime.jsx(LinkButton, { href: link, label: jsxRuntime.jsx(TokenLink, { logoURI: token.logoURI, amount: amount }) })) : (jsxRuntime.jsx(TokenLink, { logoURI: token.logoURI, amount: amount }))) : (jsxRuntime.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, }) {
+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, }) {
     if (isLoading)
         return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
-    return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsxRuntime.jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: fromChain ? (jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: fromAddress, label: jsxRuntime.jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: toAddress, label: jsxRuntime.jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsxRuntime.jsx(Transfer, { from: fromToken ? (jsxRuntime.jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toToken && exchangeRate ? (jsxRuntime.jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
+    return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, link: fromLink, amount: fromAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Swap ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsxRuntime.jsx(TokenProperty, { token: toToken, link: toLink, amount: toAmount, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: fromChain ? (jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toChain ? (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: fromAddress, label: jsxRuntime.jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: toAddress, label: jsxRuntime.jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsxRuntime.jsx(Transfer, { from: fromToken ? (jsxRuntime.jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })), to: toToken && exchangeRate ? (jsxRuntime.jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] })) : (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-700 tw-text-transparent" })) }) }), refundHash && status === "refunded" ? (jsxRuntime.jsx(RefundedProperty, { token: fromToken, amount: fromAmount, link: refundLink })) : (jsxRuntime.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, }) {
+function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, refundHash, refundLink, }) {
     if (isLoading)
         return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
-    return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$2, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), toChain ? (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsxRuntime.jsx(Image$2, { src: toChain.logoURI, size: "medium" }) })) : (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-w-squid-m tw-overflow-hidden tw-rounded-md", children: jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-600 tw-text-transparent" }) }))] }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, amount: fromAmount, link: fromLink, icon: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsxRuntime.jsx(TokenProperty, { token: toToken, amount: toAmount, link: toLink, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: toChain ? (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, {})) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: fromAddress, label: jsxRuntime.jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: toAddress, label: jsxRuntime.jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete })] }), actions: actions, fees: fees }));
+    return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$2, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), toChain ? (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsxRuntime.jsx(Image$2, { src: toChain.logoURI, size: "medium" }) })) : (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-w-squid-m tw-overflow-hidden tw-rounded-md", children: jsxRuntime.jsx(LoadingSkeleton, { className: "tw-bg-grey-600 tw-text-transparent" }) }))] }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(TokenProperty, { token: fromToken, amount: fromAmount, link: fromLink, icon: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol] }), showGradientBg: false }), jsxRuntime.jsx(TokenProperty, { token: toToken, amount: toAmount, link: toLink, icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken === null || toToken === void 0 ? void 0 : toToken.symbol] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: toChain ? (jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) })) : (jsxRuntime.jsx(LoadingSkeleton, {})) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: fromAddress, label: jsxRuntime.jsx(HashLink, { hash: fromAddress, formattedHash: formatHash(fromAddress) }) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(CopyButton, { copyText: toAddress, label: jsxRuntime.jsx(HashLink, { hash: toAddress, formattedHash: formatHash(toAddress) }) }) }) }) }), refundHash && status === "refunded" ? (jsxRuntime.jsx(RefundedProperty, { token: fromToken, amount: fromAmount, link: refundLink })) : (jsxRuntime.jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete }))] }), actions: actions, fees: fees }));
 }
 
 function TransactionView({ type, isLoading, data, }) {

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

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

package/dist/cjs/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, }: 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, refundHash, refundLink, }: BridgeTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/views/TransactionView/Properties/RefundedProperty.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    token: {
+        logoURI: string;
+        symbol: string;
+    };
+    amount: string;
+    link?: string;
+    showGradientBg?: boolean;
+}
+export declare const RefundedProperty: ({ token, amount, link, showGradientBg, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/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, }: 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, refundHash, refundLink, }: SwapTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-interface UseMediaQueryOptions {
+type UseMediaQueryOptions = {
     /**
      * The default value to return if the hook is being run on the server.
      * @default false
@@ -9,7 +9,7 @@ interface 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/cjs/types/stories/views/TransactionView.stories.d.ts

@@ -956,3 +956,55 @@ 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;
+                }[];
+            };
+        };
+    };
+};

package/dist/esm/index.js

@@ -5172,7 +5172,7 @@ function useConstant(init) {
 
 const isBrowser$1 = typeof window !== "undefined";
 
-const useIsomorphicLayoutEffect$2 = isBrowser$1 ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$1 = 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$2(() => {
+    useIsomorphicLayoutEffect$1(() => {
         isInitialRender.current = false;
         pendingPresentChildren.current = presentChildren;
         /**
@@ -5576,7 +5576,7 @@ const DeprecatedLayoutGroupContext = createContext(null);
 
 function useIsMounted() {
     const isMounted = useRef(false);
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$1(() => {
         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$2(() => {
+    useIsomorphicLayoutEffect$1(() => {
         if (!visualElement)
             return;
         isMounted.current = true;
@@ -39375,11 +39375,10 @@ 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;
-    useIsomorphicLayoutEffect$1(() => {
+    useLayoutEffect(() => {
         if (!ref.current)
             return;
         const observer = new ResizeObserver(([entry]) => {
@@ -39392,13 +39391,8 @@ 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(EMPTY_RECT);
+    const [rect, setRect] = useState(() => new DOMRectReadOnly());
     useOnResize(ref, setRect);
     return rect;
 }
@@ -40093,7 +40087,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 = false, } = {}) {
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
     const getMatches = (query) => {
         if (IS_SERVER) {
             return defaultValue;
@@ -40181,8 +40175,6 @@ 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);
         };
@@ -40192,8 +40184,6 @@ function useUserTheme() {
         };
     }, []);
     useEffect(() => {
-        if (typeof window === "undefined")
-            return;
         const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
         const handleChange = () => {
             if (themePreference === ThemePreference.SYSTEM) {
@@ -40211,8 +40201,6 @@ 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 }));
     };
@@ -40234,8 +40222,6 @@ 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";
 }
 
@@ -41455,7 +41441,7 @@ function FilterSection({ title, children, collapsed = false, handleCollapse, han
             maxHeight: 0,
         },
         expanded: {
-            maxHeight: Math.min(height, (typeof window !== "undefined" ? window.innerHeight : height) - 40) + "px",
+            maxHeight: Math.min(height, window.innerHeight - 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: () => {
@@ -83710,6 +83696,11 @@ 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" })) }));
 };
@@ -83717,16 +83708,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, }) {
+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, }) {
     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" })) }) }), 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" })) }) }), refundHash && status === "refunded" ? (jsx(RefundedProperty, { token: fromToken, amount: fromAmount, link: refundLink })) : (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, }) {
+function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, refundHash, refundLink, }) {
     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) }) }) }) }) }), 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) }) }) }) }) }), refundHash && status === "refunded" ? (jsx(RefundedProperty, { token: fromToken, amount: fromAmount, link: refundLink })) : (jsx(TimeToCompleteProperty, { timeToComplete: timeToComplete }))] }), actions: actions, fees: fees }));
 }
 
 function TransactionView({ type, isLoading, data, }) {

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

@@ -29,4 +29,6 @@ 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, }: 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, refundHash, refundLink, }: BridgeTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/views/TransactionView/Properties/RefundedProperty.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    token: {
+        logoURI: string;
+        symbol: string;
+    };
+    amount: string;
+    link?: string;
+    showGradientBg?: boolean;
+}
+export declare const RefundedProperty: ({ token, amount, link, showGradientBg, }: Props) => 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, }: 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, refundHash, refundLink, }: SwapTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-interface UseMediaQueryOptions {
+type UseMediaQueryOptions = {
     /**
      * The default value to return if the hook is being run on the server.
      * @default false
@@ -9,7 +9,7 @@ interface 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/stories/views/TransactionView.stories.d.ts

@@ -956,3 +956,55 @@ 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;
+                }[];
+            };
+        };
+    };
+};

package/dist/index.d.ts

@@ -2296,6 +2296,8 @@ interface BaseTransactionViewProps {
     fees: FeesActionProps;
     timeToComplete: string;
     timestamp: number;
+    refundHash?: string;
+    refundLink?: string;
 }
 
 interface BaseBuyNFTTransactionViewProps extends BaseTransactionViewProps {
@@ -2379,7 +2381,7 @@ type SwapTransactionViewProps = (BaseSwapTransactionViewProps & {
 }) | (Partial<Omit<BaseSwapTransactionViewProps, keyof BaseTransactionViewProps>> & BaseTransactionViewProps & {
     isLoading: true;
 });
-declare function SwapTransactionView({ title, hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, timeToComplete, timestamp, actions, fees, isLoading, }: SwapTransactionViewProps): react_jsx_runtime.JSX.Element;
+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): react_jsx_runtime.JSX.Element;
 
 interface BaseBridgeTransactionViewProps extends BaseTransactionViewProps {
     fromToken: {
@@ -2416,7 +2418,7 @@ type BridgeTransactionViewProps = (BaseBridgeTransactionViewProps & {
 }) | (Partial<Omit<BaseBridgeTransactionViewProps, keyof BaseTransactionViewProps>> & BaseTransactionViewProps & {
     isLoading: true;
 });
-declare function BridgeTransactionView({ title, hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, fromAddress, toAddress, actions, fees, timeToComplete, timestamp, isLoading, }: BridgeTransactionViewProps): react_jsx_runtime.JSX.Element;
+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): react_jsx_runtime.JSX.Element;
 
 declare const componentMap: {
     readonly swap: typeof SwapTransactionView;
@@ -2482,7 +2484,7 @@ declare function useDropdownMenu(props?: UseDropdownMenuParams): {
     menuRef: react__default.RefObject<HTMLDivElement>;
 };
 
-interface UseMediaQueryOptions {
+type UseMediaQueryOptions = {
     /**
      * The default value to return if the hook is being run on the server.
      * @default false
@@ -2493,7 +2495,7 @@ interface 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/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "3.3.3-beta-ssr.0",
+  "version": "3.4.0-beta.0",
   "author": "",
   "license": "MIT",
   "resolutions": {