@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

package/dist/components/Buttons/toggleButton.js

@@ -4,6 +4,6 @@ import { classNames } from '../utils/classNames';
 export class ToggleButtonProps {
 }
 const ToggleButton = ({ onChange, value, disabled = false }) => {
-    return (_jsxs(Switch, { checked: value, onChange: onChange, disabled: disabled, className: classNames(value ? 'bg-primary' : 'bg-secondary-500', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none'), children: [_jsx("span", { className: "sr-only", children: "Use setting" }), _jsxs("span", { className: classNames(value ? 'translate-x-5 bg-primary-text' : 'bg-secondary-200 translate-x-0', 'pointer-events-none relative inline-block h-5 w-5 rounded-full shadow transform ring-0 transition ease-in-out duration-200'), children: [_jsx("span", { className: classNames(value ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity'), "aria-hidden": "true", children: _jsx("svg", { className: "h-3 w-3 text-primary-text", fill: "none", viewBox: "0 0 12 12", children: _jsx("path", { d: "M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("span", { className: classNames(value ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity'), "aria-hidden": "true", children: _jsx("svg", { className: "h-3 w-3 text-primary-800", fill: "currentColor", viewBox: "0 0 12 12", children: _jsx("path", { d: "M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" }) }) })] })] }));
+    return (_jsxs(Switch, { checked: value, onChange: onChange, disabled: disabled, className: classNames(value ? 'bg-primary-500' : 'bg-secondary-800', 'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-hidden'), children: [_jsx("span", { className: "sr-only", children: "Use setting" }), _jsxs("span", { className: classNames(value ? 'translate-x-5 bg-primary-text' : 'bg-secondary-400 translate-x-0', 'pointer-events-none relative inline-block h-5 w-5 rounded-full shadow-sm transform ring-0 transition ease-in-out duration-200'), children: [_jsx("span", { className: classNames(value ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity'), "aria-hidden": "true", children: _jsx("svg", { className: "h-2 w-2 text-primary-text-tertiary", viewBox: "0 0 8 8", fill: "none", children: _jsx("path", { fill: "currentColor", strokeLinejoin: "round", d: "M1.51601 0.459928C1.44892 0.391517 1.36852 0.337587 1.27977 0.301468C1.19102 0.265349 1.0958 0.247807 1.00001 0.249928C0.799761 0.248203 0.606481 0.323367 0.46001 0.459928C0.32345 0.606399 0.248285 0.799679 0.25001 0.999928C0.25001 1.20293 0.32001 1.37493 0.46001 1.51593L2.94601 3.99993L0.46201 6.48393C0.393238 6.55085 0.338937 6.63117 0.30247 6.71993C0.266004 6.80869 0.248149 6.90399 0.25001 6.99993C0.25001 7.20293 0.32001 7.38293 0.46001 7.53993C0.61701 7.67993 0.79701 7.74993 1.00001 7.74993C1.20301 7.74993 1.37501 7.67993 1.51601 7.53993L4.00001 5.05393L6.48401 7.53793C6.62501 7.67793 6.79701 7.74893 7.00001 7.74893C7.20301 7.74893 7.38301 7.67893 7.54001 7.53893C7.67657 7.39246 7.75173 7.19918 7.75001 6.99893C7.75213 6.90313 7.73459 6.80792 7.69847 6.71917C7.66235 6.63042 7.60842 6.55002 7.54001 6.48293L5.05401 3.99993L7.53801 1.51593C7.67801 1.37493 7.74901 1.20293 7.74901 0.999928C7.75073 0.799679 7.67557 0.606399 7.53901 0.459928C7.39254 0.323367 7.19926 0.248203 6.99901 0.249928C6.90321 0.247807 6.808 0.265349 6.71925 0.301468C6.6305 0.337587 6.5501 0.391517 6.48301 0.459928L4.00001 2.94593L1.51601 0.460928V0.459928Z" }) }) }), _jsx("span", { className: classNames(value ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity'), "aria-hidden": "true", children: _jsx("svg", { className: "h-3 w-3 text-primary-800", fill: "currentColor", viewBox: "0 0 12 12", children: _jsx("path", { d: "M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" }) }) })] })] }));
 };
 export default ToggleButton;

package/dist/components/ColorSchema.js

@@ -6,6 +6,25 @@ const BORDER_RADIUS_VALUES = {
     large: 12,
     extraLarge: 16
 };
+const mergeWithFallback = (themeData, fallbackTheme) => {
+    if (!themeData)
+        return fallbackTheme;
+    const deepMerge = (target, source) => {
+        if (source === null || source === undefined)
+            return target;
+        if (target === null || target === undefined)
+            return source;
+        if (typeof source === 'object' && typeof target === 'object') {
+            const result = { ...target };
+            for (const key in source) {
+                result[key] = source[key] !== undefined ? deepMerge(target[key], source[key]) : target[key];
+            }
+            return result;
+        }
+        return source !== undefined ? source : target;
+    };
+    return deepMerge(fallbackTheme, themeData);
+};
 const adjustBorderRadius = (key, borderRadiusType) => {
     if (borderRadiusType === 'none')
         return '0';
@@ -23,64 +42,59 @@ const adjustBorderRadius = (key, borderRadiusType) => {
 };
 const ColorSchema = ({ themeData }) => {
     const fallbackTheme = THEME_COLORS.default;
-    const backdrop = themeData?.backdrop || fallbackTheme.backdrop;
-    const logo = themeData?.logo || fallbackTheme.logo;
-    const actionButtonText = themeData?.actionButtonText || fallbackTheme.actionButtonText;
-    const buttonTextColor = themeData?.buttonTextColor || fallbackTheme.buttonTextColor;
-    const placeholderText = themeData?.placeholderText || fallbackTheme.placeholderText;
-    const headerLogo = themeData?.headerLogo || fallbackTheme.headerLogo;
-    const borderRadius = themeData?.borderRadius || fallbackTheme.borderRadius;
-    const primary = themeData?.primary || fallbackTheme.primary;
-    const secondary = themeData?.secondary || fallbackTheme.secondary;
+    const mergedTheme = mergeWithFallback(themeData, fallbackTheme);
     return (_jsx(_Fragment, { children: _jsx("style", { children: `
                 :root {
                     --ls-border-radius-none: 0px;
-                    --ls-border-radius-sm: ${adjustBorderRadius('small', borderRadius)};
-                    --ls-border-radius-md: ${adjustBorderRadius('medium', borderRadius)};
-                    --ls-border-radius-lg: ${adjustBorderRadius('large', borderRadius)};
-                    --ls-border-radius-xl: ${adjustBorderRadius('extraLarge', borderRadius)};
+                    --ls-border-radius-sm: ${adjustBorderRadius('small', mergedTheme.borderRadius)};
+                    --ls-border-radius-md: ${adjustBorderRadius('medium', mergedTheme.borderRadius)};
+                    --ls-border-radius-lg: ${adjustBorderRadius('large', mergedTheme.borderRadius)};
+                    --ls-border-radius-xl: ${adjustBorderRadius('extraLarge', mergedTheme.borderRadius)};
                     --ls-border-radius-full: 9999px;
-                    --ls-border-radius-default: ${adjustBorderRadius('small', borderRadius)};
+                    --ls-border-radius-default: ${adjustBorderRadius('small', mergedTheme.borderRadius)};
 
-                    --ls-colors-backdrop: ${backdrop};
-                    --ls-colors-logo: ${logo};
-                    
-                    --ls-colors-primary: ${primary?.DEFAULT};
-                    --ls-colors-primary-50: ${primary?.[50]};
-                    --ls-colors-primary-100: ${primary?.[100]};
-                    --ls-colors-primary-200: ${primary?.[200]};
-                    --ls-colors-primary-300: ${primary?.[300]};
-                    --ls-colors-primary-400: ${primary?.[400]};
-                    --ls-colors-primary-500: ${primary?.[500]};
-                    --ls-colors-primary-600: ${primary?.[600]};
-                    --ls-colors-primary-700: ${primary?.[700]};
-                    --ls-colors-primary-800: ${primary?.[800]};
-                    --ls-colors-primary-900: ${primary?.[900]};
+                    --ls-colors-backdrop: ${mergedTheme.backdrop};
+                    --ls-colors-logo: ${mergedTheme.logo};
+                    --ls-colors-primary: ${mergedTheme.primary.DEFAULT};
+                    --ls-colors-primary-100: ${mergedTheme.primary[100]};
+                    --ls-colors-primary-200: ${mergedTheme.primary[200]};
+                    --ls-colors-primary-300: ${mergedTheme.primary[300]};
+                    --ls-colors-primary-400: ${mergedTheme.primary[400]};
+                    --ls-colors-primary-500: ${mergedTheme.primary[500]};
+                    --ls-colors-primary-600: ${mergedTheme.primary[600]};
+                    --ls-colors-primary-700: ${mergedTheme.primary[700]};
+                    --ls-colors-primary-800: ${mergedTheme.primary[800]};
+                    --ls-colors-primary-900: ${mergedTheme.primary[900]};
 
-                    --ls-colors-actionButtonText: ${actionButtonText};
-                    --ls-colors-buttonTextColor: ${buttonTextColor};
-                    --ls-colors-text-placeholder: ${placeholderText};
-                    --ls-colors-primary-text: ${primary?.text};
-                    --ls-colors-primary-text-muted: ${primary?.textMuted};
-                    --ls-colors-primary-logoColor: ${logo};
+                    --ls-colors-buttonTextColor: ${mergedTheme.buttonTextColor};
+                    --ls-colors-text-tertiary: ${mergedTheme.tertiary};
+                    --ls-colors-primary-text: ${mergedTheme.primary.text};
 
-                    --ls-colors-secondary: ${secondary?.DEFAULT};
-                    --ls-colors-secondary-50: ${secondary?.[50]};
-                    --ls-colors-secondary-100: ${secondary?.[100]};
-                    --ls-colors-secondary-200: ${secondary?.[200]};
-                    --ls-colors-secondary-300: ${secondary?.[300]};
-                    --ls-colors-secondary-400: ${secondary?.[400]};
-                    --ls-colors-secondary-500: ${secondary?.[500]};
-                    --ls-colors-secondary-600: ${secondary?.[600]};
-                    --ls-colors-secondary-700: ${secondary?.[700]};
-                    --ls-colors-secondary-800: ${secondary?.[800]};
-                    --ls-colors-secondary-900: ${secondary?.[900]};
-                    --ls-colors-secondary-950: ${secondary?.[950]};
-                    --ls-colors-secondary-text: ${secondary?.text};
-                }
+                    --ls-colors-secondary: ${mergedTheme.secondary?.DEFAULT};
+                    --ls-colors-secondary-100: ${mergedTheme.secondary?.[100]};
+                    --ls-colors-secondary-200: ${mergedTheme.secondary?.[200]};
+                    --ls-colors-secondary-300: ${mergedTheme.secondary?.[300]};
+                    --ls-colors-secondary-400: ${mergedTheme.secondary?.[400]};
+                    --ls-colors-secondary-500: ${mergedTheme.secondary?.[500]};
+                    --ls-colors-secondary-600: ${mergedTheme.secondary?.[600]};
+                    --ls-colors-secondary-700: ${mergedTheme.secondary?.[700]};
+                    --ls-colors-secondary-800: ${mergedTheme.secondary?.[800]};
+                    --ls-colors-secondary-900: ${mergedTheme.secondary?.[900]};
+                    --ls-colors-secondary-text: ${mergedTheme.secondary?.text};
 
+                    --ls-color-warning-foreground: ${mergedTheme.warning?.Foreground}
+                    --ls-colors-warning-background: ${mergedTheme.warning?.Background}
+                    --ls-color-error-foreground: ${mergedTheme.error?.Foreground}
+                    --ls-colors-error-background: ${mergedTheme.error?.Background}
+                    --ls-color-success-foreground: ${mergedTheme.success?.Foreground}
+                    --ls-colors-success-background: ${mergedTheme.success?.Background}
+                }
                 .headerLogo {
-                    display: ${headerLogo};
+                    display: ${mergedTheme.headerLogo};
+                }
+                .footerLogo {
+                    display: ${mergedTheme.footerLogo};
+                    height: ${mergedTheme.footerLogoHeight};
                 }
             ` }) }));
 };

package/dist/components/Common/AddressIcon/index.d.ts

@@ -3,6 +3,7 @@ type Props = {
     address: string;
     size: number;
     className?: string;
+    rounded?: string;
 };
 declare const AddressIcon: FC<Props>;
 export default AddressIcon;

package/dist/components/Common/AddressIcon/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Jazzicon from "./jazzicon";
 import { useEffect, useRef } from "react";
-const AddressIcon = ({ address, size, className }) => {
+const AddressIcon = ({ address, size, className, rounded }) => {
     const ref = useRef(null);
     useEffect(() => {
         if (address && ref.current) {
@@ -12,6 +12,7 @@ const AddressIcon = ({ address, size, className }) => {
                 iconElement.style.display = 'block';
                 iconElement.style.width = "100%";
                 iconElement.style.height = "100%";
+                iconElement.style.borderRadius = rounded || "3px";
                 ref.current.appendChild(iconElement);
             }
         }

package/dist/components/Common/AnimatedValue.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type AnimatedValueProps = {
+    value: string | number | null | undefined;
+    className?: string;
+};
+export declare const AnimatedValue: FC<AnimatedValueProps>;
+export {};

package/dist/components/Common/AnimatedValue.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnimatedNumber } from '../../lib/AnimatedNumber';
+import { useMemo } from 'react';
+const isNumeric = (val) => typeof val === 'number' || (!!val && !isNaN(Number(val)));
+export const AnimatedValue = ({ value, className }) => {
+    const display = useMemo(() => {
+        if (value === null || value === undefined)
+            return 0;
+        return value;
+    }, [value]);
+    const numericOnly = isNumeric(display);
+    return (_jsx("span", { className: `relative inline-block min-w-[5ch] ${className}`, children: numericOnly ? (_jsx(AnimatedNumber, { value: Number(display) })) : (_jsx("span", { children: display })) }));
+};

package/dist/components/Common/AverageCompletionTime.d.ts

@@ -1,6 +1,7 @@
 import { FC } from "react";
 type AverageCompletionTimeProps = {
     avgCompletionTime: string | undefined;
+    className?: string;
 };
 declare const AverageCompletionTime: FC<AverageCompletionTimeProps>;
 export default AverageCompletionTime;

package/dist/components/Common/AverageCompletionTime.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AverageCompletionTime = ({ avgCompletionTime }) => {
+const AverageCompletionTime = ({ avgCompletionTime, className }) => {
     if (!avgCompletionTime)
-        return null;
+        return;
     const time = avgCompletionTime?.split(':');
     const hours = Number(time[0]);
     const minutes = Number(time[1]);
     const seconds = Number(time[2]);
-    return _jsxs("p", { children: [_jsx("span", { children: hours > 0 ? `${hours.toFixed()} ${(hours > 1 ? 'hours' : 'hour')}` : '' }), " ", _jsx("span", { children: minutes > 0 ? `${minutes.toFixed()} ${(minutes > 1 ? 'minutes' : 'minute')}` : '' }), " ", _jsx("span", { children: (seconds > 0 && minutes == 0 && hours == 0) ? `${seconds.toFixed()} seconds` : '' })] });
+    return _jsxs("p", { className: className, children: [_jsx("span", { children: hours > 0 ? `${hours.toFixed()} ${(hours > 1 ? 'hours' : 'hour')}` : '' }), " ", _jsx("span", { children: minutes > 0 ? `${minutes.toFixed()} ${(minutes > 1 ? 'minutes' : 'minute')}` : '' }), " ", _jsx("span", { children: (seconds > 0 && minutes == 0 && hours == 0) ? `${seconds.toFixed()} secs` : '' })] });
 };
 export default AverageCompletionTime;

package/dist/components/Common/ConnectWalletButton.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { Wallet, WalletProvider } from "../../Models/WalletProvider";
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    provider?: WalletProvider;
+    onConnect?: (wallet: Wallet) => void;
+    descriptionText?: string;
+}
+declare const ConnectWalletButton: FC<Props>;
+export default ConnectWalletButton;

package/dist/components/Common/ConnectWalletButton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { RefreshCw } from "lucide-react";
+import { ResolveConnectorIcon } from "../Icons/ConnectorIcons";
+import { useState } from "react";
+import { useConnectModal } from "../Wallet/WalletModal";
+import { classNames } from "../../components/utils/classNames";
+const ConnectWalletButton = ({ provider, onConnect, descriptionText, ...rest }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const { connect } = useConnectModal();
+    const handleConnect = async () => {
+        setIsLoading(true);
+        const result = await connect(provider);
+        if (onConnect && result)
+            onConnect(result);
+        setIsLoading(false);
+    };
+    return _jsx("button", { ...rest, type: "button", onClick: handleConnect, className: classNames(`py-5 px-6 bg-secondary-500 hover:bg-secondary-400 transition-colors duration-200 rounded-xl ${isLoading && 'cursor-progress opacity-80'}`, rest.className), children: _jsxs("div", { className: "flex flex-row justify-between gap-9 items-stretch", children: [_jsx(ResolveConnectorIcon, { connector: provider?.name, iconClassName: "w-10 h-10 p-0.5 rounded-lg bg-secondary-800 border border-secondary-400", className: "grid grid-cols-2 gap-1 min-w-fit" }), _jsxs("div", { className: "h-full space-y-2", children: [_jsx("p", { className: "text-sm font-medium text-secondary-text text-start", children: descriptionText ?? 'Connect your wallet to browse and select from your addresses' }), _jsx("div", { className: "bg-primary-700/30 border-none text-primary! py-2 rounded-lg text-base font-semibold", children: isLoading ?
+                                _jsxs("div", { className: "flex items-center gap-1 justify-center", children: [_jsx(RefreshCw, { className: "h-3 w-auto animate-spin" }), _jsx("span", { className: "ml-1", children: "Connecting..." })] })
+                                :
+                                    _jsx(_Fragment, { children: "Connect Now" }) })] })] }) });
+};
+export default ConnectWalletButton;

package/dist/components/Common/CountDownTimer.d.ts

@@ -1,7 +1,8 @@
 import { FC } from "react";
-import { SwapItem } from "../../lib/layerSwapApiClient";
+import { SwapDetails } from "../../lib/apiClients/layerSwapApiClient";
 declare const CountdownTimer: FC<{
     initialTime: string;
-    swap: SwapItem;
+    swapDetails: SwapDetails;
+    onThresholdChange?: (threshold: boolean) => void;
 }>;
 export default CountdownTimer;

package/dist/components/Common/CountDownTimer.js

@@ -1,37 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { SwapStatus } from "../../Models/SwapStatus";
-import { useIntercom } from "react-use-intercom";
-import { useAuthState } from "../../context/authContext";
-import { TransactionType } from "../../lib/layerSwapApiClient";
-// import { datadogRum } from "@datadog/browser-rum";
-const CountdownTimer = ({ initialTime, swap }) => {
-    const { email, userId } = useAuthState();
-    const { boot, show, update } = useIntercom();
-    const [countdown, setCountdown] = useState();
+import { TransactionType } from "../../lib/apiClients/layerSwapApiClient";
+import posthog from "posthog-js";
+const CountdownTimer = ({ initialTime, swapDetails, onThresholdChange }) => {
+    const [elapsedTimer, setElapsedTimer] = useState(0);
     const [thresholdElapsed, setThresholdElapsed] = useState(false);
-    const swapInputTransaction = swap?.transactions?.find(t => t.type === TransactionType.Input);
+    const swapInputTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Input);
     useEffect(() => {
+        // Start timer immediately when component renders
+        const startTime = swapInputTransaction?.timestamp ? new Date(swapInputTransaction.timestamp).getTime() : Date.now();
         const timer = setInterval(() => {
             const currentTime = new Date();
-            const elapsedTime = currentTime.getTime() - new Date(swapInputTransaction?.timestamp).getTime();
-            const remainingTime = Math.max(timeStringToMilliseconds(initialTime) - Math.abs(elapsedTime), 0);
-            setCountdown(remainingTime);
-            if (elapsedTime > 2 * timeStringToMilliseconds(initialTime)) {
-                setThresholdElapsed(true);
-            }
-            else {
-                setThresholdElapsed(false);
+            const elapsedTime = currentTime.getTime() - startTime;
+            setElapsedTimer(Math.max(elapsedTime, 0));
+            const newThreshold = elapsedTime > 3 * timeStringToMilliseconds(initialTime);
+            if (newThreshold !== thresholdElapsed) {
+                setThresholdElapsed(newThreshold);
+                onThresholdChange?.(newThreshold);
             }
         }, 1000);
         return () => clearInterval(timer);
-    }, [initialTime, swap.status, swapInputTransaction, thresholdElapsed]);
-    const updateWithProps = () => update({ userId, customAttributes: { email: email, swapId: swap.id } });
-    const startIntercom = useCallback(() => {
-        boot();
-        show();
-        updateWithProps();
-    }, [boot, show, updateWithProps]);
+    }, [initialTime, swapDetails.status, swapInputTransaction, thresholdElapsed]);
     const formatTime = (milliseconds) => {
         const totalSeconds = Math.floor(milliseconds / 1000);
         const hours = Math.floor(totalSeconds / 3600);
@@ -42,14 +32,21 @@ const CountdownTimer = ({ initialTime, swap }) => {
         const formattedSeconds = String(seconds).padStart(2, '0');
         return `${formattedHours}${formattedMinutes}:${formattedSeconds}`;
     };
-    const formatted = countdown && formatTime(countdown);
-    if (thresholdElapsed && swap.status !== SwapStatus.Completed) {
+    const formatted = formatTime(elapsedTimer);
+    if (thresholdElapsed && swapDetails.status !== SwapStatus.Completed) {
         const renderingError = new Error("Transaction is taking longer than expected");
         renderingError.name = `LongTransactionError`;
         renderingError.cause = renderingError;
-        // datadogRum.addError(renderingError);
+        posthog.capture('$exception', {
+            name: renderingError.name,
+            message: renderingError.message,
+            stack: renderingError.stack,
+            cause: renderingError.cause,
+            where: 'longTransactionError',
+            severity: 'error',
+        });
     }
-    return (_jsx("div", { className: 'flex items-center space-x-1', children: thresholdElapsed && swap.status !== SwapStatus.UserTransferPending ? (_jsxs("div", { children: [_jsx("span", { children: "Transaction is taking longer than expected " }), _jsx("a", { className: 'underline hover:cursor-pointer', onClick: () => startIntercom(), children: "please contact our support." })] })) : countdown === 0 && swap.status !== SwapStatus.Completed ? (_jsx("div", { children: _jsx("span", { children: "Taking a bit longer than expected" }) })) : swap.status === SwapStatus.Completed && (!countdown || countdown === 0) ? ("") : (_jsxs("div", { className: 'text-secondary-text flex items-center', children: [_jsx("span", { children: "Estimated time:" }), _jsx("span", { className: 'text-primary-text ml-0.5', children: countdown ? formatted : _jsx("div", { className: "h-[10px] mt-1 w-16 ml-1 animate-pulse rounded bg-gray-500" }) })] })) }));
+    return (_jsx("div", { className: 'flex items-center justify-center space-x-1', children: thresholdElapsed && swapDetails.status !== SwapStatus.UserTransferPending ? (_jsx("div", { children: _jsx("span", { children: "Transaction is taking longer than expected" }) })) : swapDetails.status === SwapStatus.Completed ? ("") : (_jsxs("div", { className: 'text-secondary-text flex items-center', children: [_jsx("span", { children: "Elapsed time:" }), _jsx("span", { className: 'text-primary-text ml-0.5', children: formatted })] })) }));
 };
 export default CountdownTimer;
 function timeStringToMilliseconds(timeString) {

package/dist/components/Common/FormattedAverageCompletionTime.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormattedAverageCompletionTime = ({ avgCompletionTime }) => {
     if (!avgCompletionTime)
-        return null;
+        return;
     const parts = avgCompletionTime.split('.');
     const time = parts[0];
     const [hours, minutes, seconds] = time.split(':').map(parseFloat);

package/dist/components/Common/ImageWithFallback.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ImageWithFallback: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;

package/dist/components/Common/ImageWithFallback.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+const fallbackImage = '/images/logo_placeholder.png';
+export const ImageWithFallback = forwardRef(({ src, ...props }, ref) => {
+    const [imgSrc, setImgSrc] = useState(src);
+    useEffect(() => {
+        setImgSrc(src);
+    }, [src]);
+    const handleError = () => {
+        setImgSrc(fallbackImage);
+    };
+    return _jsx("img", { ...props, alt: props.alt || 'ImageWithFallback', ref: ref, src: imgSrc, onError: handleError });
+});

package/dist/components/Common/LinkWithIcon.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface LinkWithIconProps {
+    name: string;
+    url: string;
+}
+declare const LinkWithIcon: FC<LinkWithIconProps>;
+export default LinkWithIcon;

package/dist/components/Common/LinkWithIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink } from 'lucide-react';
+const LinkWithIcon = ({ name, url }) => {
+    return (_jsxs("div", { className: 'underline hover:no-underline flex items-center space-x-1', children: [_jsx("a", { target: "_blank", href: url, rel: "noopener noreferrer", children: name }), _jsx(ExternalLink, { className: 'h-4' })] }));
+};
+export default LinkWithIcon;

package/dist/components/Common/LinkWrapper.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+interface LinkWrapperProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    href: string | {
+        pathname?: string;
+        query?: Record<string, any>;
+    };
+    children?: React.ReactNode;
+}
+declare const LinkWrapper: FC<LinkWrapperProps>;
+export default LinkWrapper;

package/dist/components/Common/LinkWrapper.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const LinkWrapper = (props) => {
+    const { children, href, ...anchorProps } = props;
+    const pathname = typeof href === 'object' ? href.pathname : href;
+    return (_jsx("a", { ...anchorProps, href: pathname, children: children }));
+};
+export default LinkWrapper;

package/dist/components/Common/LogoWithDetails.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface Props {
+    className?: string;
+}
+declare const LogoWithDetails: FC<Props>;
+export default LogoWithDetails;

package/dist/components/Common/LogoWithDetails.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CopyButton from "../Buttons/copyButton";
+import LayerSwapLogo from "../Icons/layerSwapLogo";
+import { Paperclip } from 'lucide-react';
+import { renderToString } from 'react-dom/server';
+import LayerSwapLogoSmall from "../Icons/layerSwapLogoSmall";
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import clsx from "clsx";
+const LogoWithDetails = (({ className }) => {
+    return (_jsxs(ContextMenuPrimitive.Root, { children: [_jsx(ContextMenuPrimitive.Trigger, { asChild: true, children: _jsx(LayerSwapLogo, { className: clsx("h-8 w-auto text-logo fill-primary-text", className) }) }), _jsxs(ContextMenuPrimitive.Content, { className: "dialog-overlay absolute z-40 border h-fit text-secondary-text border-secondary-100 mt-2 w-fit rounded-md shadow-lg bg-secondary-700 ring-1 ring-black/5 focus:outline-hidden", children: [_jsx(ContextMenuPrimitive.ContextMenuItem, { className: "dialog-content px-4 py-2 text-sm text-left w-full rounded-t hover:bg-secondary-400 whitespace-nowrap", children: _jsx(CopyButton, { toCopy: renderToString(_jsx(LayerSwapLogo, {})), children: "Copy logo as SVG" }) }), _jsx(ContextMenuPrimitive.ContextMenuItem, { className: "dialog-content px-4 py-2 text-sm text-left w-full hover:bg-secondary-400 whitespace-nowrap", children: _jsx(CopyButton, { toCopy: renderToString(_jsx(LayerSwapLogoSmall, {})), children: "Copy symbol as SVG" }) }), _jsx("hr", { className: "horizontal-gradient" }), _jsx(ContextMenuPrimitive.ContextMenuItem, { className: "dialog-content", children: _jsxs("a", { href: "https://layerswap.notion.site/layerswap/Layerswap-brand-guide-0822bc4f1a2d4af7bc2f1acbb05119e2", target: '_blank', className: 'flex space-x-1 items-center px-4 py-2 rounded-b text-sm text-left w-full hover:bg-secondary-400 whitespace-nowrap', children: [_jsx(Paperclip, { width: 16 }), _jsx("p", { children: "Brand Guidelines" })] }) })] })] }));
+});
+export default LogoWithDetails;

package/dist/components/Common/MessageComponent.d.ts

@@ -2,15 +2,16 @@ type iconStyle = 'red' | 'green' | 'yellow' | 'gray';
 declare class MessageComponentProps {
     children: JSX.Element | JSX.Element[];
     center?: boolean;
-    icon: iconStyle;
+    icon?: iconStyle;
 }
 declare const MessageComponent: {
     ({ children }: {
         children: any;
     }): import("react/jsx-runtime").JSX.Element;
     Content: ({ children, icon, center }: MessageComponentProps) => import("react/jsx-runtime").JSX.Element;
-    Header: ({ children }: {
-        children: any;
+    Header: ({ children, className }: {
+        children: React.ReactNode;
+        className?: string;
     }) => import("react/jsx-runtime").JSX.Element;
     Description: ({ children }: {
         children: any;

package/dist/components/Common/MessageComponent.js

@@ -28,12 +28,16 @@ const MessageComponent = ({ children }) => {
 };
 const Content = ({ children, icon, center }) => {
     return (center ?
-        _jsx("div", { className: 'flex flex-col self-center grow w-full', children: _jsx("div", { className: 'flex self-center grow w-full', children: _jsxs("div", { className: 'flex flex-col space-y-8 self-center w-full', children: [_jsx("div", { className: 'flex place-content-center', children: constructIcons(icon) }), children] }) }) })
+        _jsx("div", { className: 'flex flex-col self-center grow w-full', children: _jsx("div", { className: 'flex self-center grow w-full', children: _jsxs("div", { className: 'flex flex-col space-y-8 self-center w-full', children: [icon ?
+                            _jsx("div", { className: 'flex place-content-center', children: constructIcons(icon) })
+                            : null, children] }) }) })
         :
-            _jsxs("div", { className: 'space-y-3', children: [_jsx("div", { className: 'flex place-content-center', children: constructIcons(icon) }), children] }));
+            _jsxs("div", { className: 'space-y-3', children: [icon ?
+                        _jsx("div", { className: 'flex place-content-center', children: constructIcons(icon) })
+                        : null, children] }));
 };
-const Header = ({ children }) => {
-    return _jsx("div", { className: 'md:text-3xl text-lg font-bold text-primary-text leading-6 text-center', children: children });
+const Header = ({ children, className }) => {
+    return _jsx("div", { className: `md:text-3xl text-lg font-bold text-primary-text leading-6 text-center ${className}`, children: children });
 };
 const Description = ({ children }) => {
     return _jsx("div", { className: "text-base font-medium space-y-6 text-secondary-text text-center mb-6", children: children });

package/dist/components/Common/QRCodeWallet.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+type QRCodeModalProps = {
+    qrUrl: string;
+    className?: string;
+    iconSize?: number;
+    iconClassName?: string;
+};
+declare const QRCodeModal: FC<QRCodeModalProps>;
+export default QRCodeModal;

package/dist/components/Common/QRCodeWallet.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { QRCodeSVG } from "qrcode.react";
+import { classNames } from "../utils/classNames";
+import { QrCode } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "../shadcn/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../shadcn/tooltip";
+import { motion } from "framer-motion";
+const QRCodeModal = ({ qrUrl, className, iconSize, iconClassName }) => {
+    const qrCode = _jsx(QRCodeSVG, { className: "rounded-lg", value: qrUrl, includeMargin: true, size: 160, level: "H" });
+    return (_jsx(_Fragment, { children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: classNames(className), children: _jsx("div", { className: "flex items-center gap-1 cursor-pointer", children: _jsx(QrCode, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }) }) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "Show QR code" }) })] }) }), _jsx(PopoverContent, { className: "w-full p-4", side: "left", children: _jsx(motion.div, { whileHover: {
+                            scale: 1.2,
+                            transition: { duration: 0.5 },
+                        }, children: qrCode }) })] }) }));
+};
+export default QRCodeModal;

package/dist/components/Common/ReactPortal.d.ts

@@ -1,2 +1,7 @@
-declare const ReactPortal: any;
+import { FC } from 'react';
+type Props = {
+    wrapperId: string;
+    children?: React.ReactNode;
+};
+declare const ReactPortal: FC<Props>;
 export default ReactPortal;

package/dist/components/Common/ReactPortal.js

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-// const ReactPortal: FC<Props> = ({ children, wrapperId = "react-portal-wrapper" }) => {
 const ReactPortal = ({ children, wrapperId = "react-portal-wrapper" }) => {
     const ref = useRef(null);
     const [mounted, setMounted] = useState(false);