@0xsquid/ui 3.3.2 → 3.4.0-beta.0

package/dist/cjs/index.js

@@ -83716,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" })) }));
 };
@@ -83723,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/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

@@ -83696,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" })) }));
 };
@@ -83703,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/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;

package/package.json

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