@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

package/dist/esm/components/Common/AddressIcon/jazzicon.mjs

@@ -0,0 +1,62 @@
+import MersenneTwister from './mersenne-twister.mjs';
+import paperGen from './paper.mjs';
+import Color from 'color';
+import colors from './colors.mjs';
+var shapeCount = 4;
+var svgns = 'http://www.w3.org/2000/svg';
+var generator;
+function generateIdenticon(diameter, seed) {
+    generator = new MersenneTwister(seed);
+    var remainingColors = hueShift(colors.slice(), generator);
+    var elements = paperGen(diameter, genColor(remainingColors));
+    var container = elements.container;
+    var svg = document.createElementNS(svgns, 'svg');
+    svg.setAttributeNS(null, 'x', '0');
+    svg.setAttributeNS(null, 'y', '0');
+    svg.setAttributeNS(null, 'width', diameter);
+    svg.setAttributeNS(null, 'height', diameter);
+    container.appendChild(svg);
+    for (var i = 0; i < shapeCount - 1; i++) {
+        genShape(remainingColors, diameter, i, shapeCount - 1, svg);
+    }
+    return container;
+}
+function genShape(remainingColors, diameter, i, total, svg) {
+    var center = diameter / 2;
+    var shape = document.createElementNS(svgns, 'rect');
+    shape.setAttributeNS(null, 'x', '0');
+    shape.setAttributeNS(null, 'y', '0');
+    shape.setAttributeNS(null, 'width', diameter);
+    shape.setAttributeNS(null, 'height', diameter);
+    var firstRot = generator.random();
+    var angle = Math.PI * 2 * firstRot;
+    var velocity = diameter / total * generator.random() + (i * diameter / total);
+    var tx = (Math.cos(angle) * velocity);
+    var ty = (Math.sin(angle) * velocity);
+    var translate = 'translate(' + tx + ' ' + ty + ')';
+    // Third random is a shape rotation on top of all of that.
+    var secondRot = generator.random();
+    var rot = (firstRot * 360) + secondRot * 180;
+    var rotate = 'rotate(' + rot.toFixed(1) + ' ' + center + ' ' + center + ')';
+    var transform = translate + ' ' + rotate;
+    shape.setAttributeNS(null, 'transform', transform);
+    var fill = genColor(remainingColors);
+    shape.setAttributeNS(null, 'fill', fill);
+    svg.appendChild(shape);
+}
+function genColor(colors) {
+    var rand = generator.random();
+    var idx = Math.floor(colors.length * generator.random());
+    var color = colors.splice(idx, 1)[0];
+    return color;
+}
+var wobble = 30;
+function hueShift(colors, generator) {
+    var amount = (generator.random() * 30) - (wobble / 2);
+    return colors.map(function (hex) {
+        var color = Color(hex);
+        color.rotate(amount);
+        return color.hex();
+    });
+}
+export default generateIdenticon;

package/dist/esm/components/Common/AddressIcon/mersenne-twister.mjs

@@ -0,0 +1,157 @@
+/*
+  https://github.com/banksean wrapped Makoto Matsumoto and Takuji Nishimura's code in a namespace
+  so it's better encapsulated. Now you can have multiple random number generators
+  and they won't stomp all over eachother's state.
+
+  If you want to use this as a substitute for Math.random(), use the random()
+  method like so:
+
+  var m = new MersenneTwister();
+  var randomNumber = m.random();
+
+  You can also call the other genrand_{foo}() methods on the instance.
+
+  If you want to use a specific seed in order to get a repeatable random
+  sequence, pass an integer into the constructor:
+
+  var m = new MersenneTwister(123);
+
+  and that will always produce the same random sequence.
+
+  Sean McCullough (banksean@gmail.com)
+*/
+/**
+ * @constructor
+ * @param {number|Array<number>} [seed] - Optional seed for the random number generator
+ */
+function MersenneTwister(seed) {
+    if (seed == undefined) {
+        seed = new Date().getTime();
+    }
+    /* Period parameters */
+    this.N = 624;
+    this.M = 397;
+    this.MATRIX_A = 0x9908b0df; /* constant vector a */
+    this.UPPER_MASK = 0x80000000; /* most significant w-r bits */
+    this.LOWER_MASK = 0x7fffffff; /* least significant r bits */
+    this.mt = new Array(this.N); /* the array for the state vector */
+    this.mti = this.N + 1; /* mti==N+1 means mt[N] is not initialized */
+    if (seed.constructor == Array) {
+        this.init_by_array(seed, seed.length);
+    }
+    else {
+        this.init_seed(seed);
+    }
+}
+/* initializes mt[N] with a seed */
+/* origin name init_genrand */
+MersenneTwister.prototype.init_seed = function (s) {
+    this.mt[0] = s >>> 0;
+    for (this.mti = 1; this.mti < this.N; this.mti++) {
+        var s = this.mt[this.mti - 1] ^ (this.mt[this.mti - 1] >>> 30);
+        this.mt[this.mti] = (((((s & 0xffff0000) >>> 16) * 1812433253) << 16) + (s & 0x0000ffff) * 1812433253)
+            + this.mti;
+        /* See Knuth TAOCP Vol2. 3rd Ed. P.106 for multiplier. */
+        /* In the previous versions, MSBs of the seed affect   */
+        /* only MSBs of the array mt[].                        */
+        /* 2002/01/09 modified by Makoto Matsumoto             */
+        this.mt[this.mti] >>>= 0;
+        /* for >32 bit machines */
+    }
+};
+/* initialize by an array with array-length */
+/* init_key is the array for initializing keys */
+/* key_length is its length */
+/* slight change for C++, 2004/2/26 */
+MersenneTwister.prototype.init_by_array = function (init_key, key_length) {
+    var i, j, k;
+    this.init_seed(19650218);
+    i = 1;
+    j = 0;
+    k = (this.N > key_length ? this.N : key_length);
+    for (; k; k--) {
+        var s = this.mt[i - 1] ^ (this.mt[i - 1] >>> 30);
+        this.mt[i] = (this.mt[i] ^ (((((s & 0xffff0000) >>> 16) * 1664525) << 16) + ((s & 0x0000ffff) * 1664525)))
+            + init_key[j] + j; /* non linear */
+        this.mt[i] >>>= 0; /* for WORDSIZE > 32 machines */
+        i++;
+        j++;
+        if (i >= this.N) {
+            this.mt[0] = this.mt[this.N - 1];
+            i = 1;
+        }
+        if (j >= key_length)
+            j = 0;
+    }
+    for (k = this.N - 1; k; k--) {
+        var s = this.mt[i - 1] ^ (this.mt[i - 1] >>> 30);
+        this.mt[i] = (this.mt[i] ^ (((((s & 0xffff0000) >>> 16) * 1566083941) << 16) + (s & 0x0000ffff) * 1566083941))
+            - i; /* non linear */
+        this.mt[i] >>>= 0; /* for WORDSIZE > 32 machines */
+        i++;
+        if (i >= this.N) {
+            this.mt[0] = this.mt[this.N - 1];
+            i = 1;
+        }
+    }
+    this.mt[0] = 0x80000000; /* MSB is 1; assuring non-zero initial array */
+};
+/* generates a random number on [0,0xffffffff]-interval */
+/* origin name genrand_int32 */
+MersenneTwister.prototype.random_int = function () {
+    var y;
+    var mag01 = new Array(0x0, this.MATRIX_A);
+    /* mag01[x] = x * MATRIX_A  for x=0,1 */
+    if (this.mti >= this.N) { /* generate N words at one time */
+        var kk;
+        if (this.mti == this.N + 1) /* if init_seed() has not been called, */
+            this.init_seed(5489); /* a default initial seed is used */
+        for (kk = 0; kk < this.N - this.M; kk++) {
+            y = (this.mt[kk] & this.UPPER_MASK) | (this.mt[kk + 1] & this.LOWER_MASK);
+            this.mt[kk] = this.mt[kk + this.M] ^ (y >>> 1) ^ mag01[y & 0x1];
+        }
+        for (; kk < this.N - 1; kk++) {
+            y = (this.mt[kk] & this.UPPER_MASK) | (this.mt[kk + 1] & this.LOWER_MASK);
+            this.mt[kk] = this.mt[kk + (this.M - this.N)] ^ (y >>> 1) ^ mag01[y & 0x1];
+        }
+        y = (this.mt[this.N - 1] & this.UPPER_MASK) | (this.mt[0] & this.LOWER_MASK);
+        this.mt[this.N - 1] = this.mt[this.M - 1] ^ (y >>> 1) ^ mag01[y & 0x1];
+        this.mti = 0;
+    }
+    y = this.mt[this.mti++];
+    /* Tempering */
+    y ^= (y >>> 11);
+    y ^= (y << 7) & 0x9d2c5680;
+    y ^= (y << 15) & 0xefc60000;
+    y ^= (y >>> 18);
+    return y >>> 0;
+};
+/* generates a random number on [0,0x7fffffff]-interval */
+/* origin name genrand_int31 */
+MersenneTwister.prototype.random_int31 = function () {
+    return (this.random_int() >>> 1);
+};
+/* generates a random number on [0,1]-real-interval */
+/* origin name genrand_real1 */
+MersenneTwister.prototype.random_incl = function () {
+    return this.random_int() * (1.0 / 4294967295.0);
+    /* divided by 2^32-1 */
+};
+/* generates a random number on [0,1)-real-interval */
+MersenneTwister.prototype.random = function () {
+    return this.random_int() * (1.0 / 4294967296.0);
+    /* divided by 2^32 */
+};
+/* generates a random number on (0,1)-real-interval */
+/* origin name genrand_real3 */
+MersenneTwister.prototype.random_excl = function () {
+    return (this.random_int() + 0.5) * (1.0 / 4294967296.0);
+    /* divided by 2^32 */
+};
+/* generates a random number on [0,1) with 53-bit resolution*/
+/* origin name genrand_res53 */
+MersenneTwister.prototype.random_long = function () {
+    var a = this.random_int() >>> 5, b = this.random_int() >>> 6;
+    return (a * 67108864.0 + b) * (1.0 / 9007199254740992.0);
+};
+export default MersenneTwister;

package/dist/esm/components/Common/AddressIcon/paper.mjs

@@ -0,0 +1,15 @@
+function newPaper(diameter, color) {
+    var container = document.createElement('div');
+    container.style.borderRadius = '50px';
+    container.style.overflow = 'hidden';
+    container.style.padding = '0px';
+    container.style.margin = '0px';
+    container.style.width = '' + diameter + 'px';
+    container.style.height = '' + diameter + 'px';
+    container.style.display = 'inline-block';
+    container.style.background = color;
+    return {
+        container: container,
+    };
+}
+export default newPaper;

package/dist/esm/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/esm/components/Common/AverageCompletionTime.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AverageCompletionTime = ({ avgCompletionTime, className }) => {
+    if (!avgCompletionTime)
+        return;
+    const time = avgCompletionTime?.split(':');
+    const hours = Number(time[0]);
+    const minutes = Number(time[1]);
+    const seconds = Number(time[2]);
+    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/esm/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/esm/components/Common/CountDownTimer.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { SwapStatus } from "../../Models/SwapStatus";
+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 = 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() - startTime;
+            setElapsedTimer(Math.max(elapsedTime, 0));
+            const newThreshold = elapsedTime > 3 * timeStringToMilliseconds(initialTime);
+            if (newThreshold !== thresholdElapsed) {
+                setThresholdElapsed(newThreshold);
+                onThresholdChange?.(newThreshold);
+            }
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [initialTime, swapDetails.status]);
+    const formatTime = (milliseconds) => {
+        const totalSeconds = Math.floor(milliseconds / 1000);
+        const hours = Math.floor(totalSeconds / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = totalSeconds % 60;
+        const formattedHours = hours > 0 ? String(hours).padStart(2, '0') + ":" : '';
+        const formattedMinutes = String(minutes).padStart(2, '0');
+        const formattedSeconds = String(seconds).padStart(2, '0');
+        return `${formattedHours}${formattedMinutes}:${formattedSeconds}`;
+    };
+    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;
+        posthog.capture('$exception', {
+            name: renderingError.name,
+            message: renderingError.message,
+            $layerswap_exception_type: "Long Transaction Error",
+            stack: renderingError.stack,
+            cause: renderingError.cause,
+            where: 'longTransactionError',
+            severity: 'error',
+        });
+    }
+    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) {
+    const parts = timeString.split('.');
+    const time = parts[0];
+    const [hours, minutes, seconds] = time.split(':').map(parseFloat);
+    const milliseconds = ((hours * 3600) + (minutes * 60) + seconds) * 1000;
+    return milliseconds;
+}

package/dist/esm/components/Common/FormattedAverageCompletionTime.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormattedAverageCompletionTime = ({ avgCompletionTime }) => {
+    if (!avgCompletionTime)
+        return;
+    const parts = avgCompletionTime.split('.');
+    const time = parts[0];
+    const [hours, minutes, seconds] = time.split(':').map(parseFloat);
+    const formattedHours = hours > 0 ? String(hours).padStart(2, '0') + ":" : '';
+    const formattedMinutes = String(minutes).padStart(2, '0');
+    const formattedSeconds = String(seconds).padStart(2, '0');
+    const fullFormatted = `${formattedHours}${formattedMinutes}:${formattedSeconds}`;
+    return _jsx("span", { children: fullFormatted });
+};
+export default FormattedAverageCompletionTime;

package/dist/esm/components/Common/ImageWithFallback.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+const fallbackImage = 'https://layerswap.io/app/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/esm/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/esm/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/esm/components/Common/LogoWithDetails.js

@@ -0,0 +1,13 @@
+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";
+import LayerswapMobileLogo from "../Icons/layerSwapMobileLogo";
+const LogoWithDetails = (({ className }) => {
+    return (_jsxs(ContextMenuPrimitive.Root, { children: [_jsx(ContextMenuPrimitive.Trigger, { asChild: true, children: _jsxs("div", { children: [_jsx(LayerswapMobileLogo, { className: clsx("block md:hidden h-4 w-auto text-logo fill-primary-text", className) }), _jsx(LayerSwapLogo, { className: clsx("hidden md:block 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/esm/components/Common/MessageComponent.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CancelIcon from "../Icons/CancelIcon";
+import DelayIcon from "../Icons/DelayIcon";
+import FailIcon from "../Icons/FailIcon";
+import SuccessIcon from "../Icons/SuccessIcon";
+class MessageComponentProps {
+}
+function constructIcons(icon) {
+    let iconStyle;
+    switch (icon) {
+        case 'red':
+            iconStyle = _jsx(FailIcon, {});
+            break;
+        case 'green':
+            iconStyle = _jsx(SuccessIcon, {});
+            break;
+        case 'yellow':
+            iconStyle = _jsx(DelayIcon, {});
+            break;
+        case 'gray':
+            iconStyle = CancelIcon;
+            break;
+    }
+    return iconStyle;
+}
+const MessageComponent = ({ children }) => {
+    return _jsx("div", { className: "w-full flex flex-col h-full justify-between pt-6 min-h-full", children: 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: [icon ?
+                            _jsx("div", { className: 'flex place-content-center', children: constructIcons(icon) })
+                            : null, children] }) }) })
+        :
+            _jsxs("div", { className: 'space-y-3', children: [icon ?
+                        _jsx("div", { className: 'flex place-content-center', children: constructIcons(icon) })
+                        : null, 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 });
+};
+const Buttons = ({ children }) => {
+    return _jsx("div", { className: "space-y-3", children: children });
+};
+MessageComponent.Content = Content;
+MessageComponent.Header = Header;
+MessageComponent.Description = Description;
+MessageComponent.Buttons = Buttons;
+export default MessageComponent;

package/dist/esm/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/esm/components/Common/ReactPortal.js

@@ -0,0 +1,18 @@
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+const ReactPortal = ({ children, wrapperId = "react-portal-wrapper" }) => {
+    const ref = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        let element = document.getElementById(wrapperId);
+        if (!element) {
+            element = document.createElement('div');
+            element.setAttribute("id", wrapperId);
+            document.body.appendChild(element);
+        }
+        ref.current = element;
+        setMounted(true);
+    }, [wrapperId]);
+    return ref.current && mounted ? createPortal(children, ref.current) : null;
+};
+export default ReactPortal;

package/dist/esm/components/Common/Sceletons.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronRight, Clock } from "lucide-react";
+import BackgroundField from "./backgroundField";
+import { classNames } from "../utils/classNames";
+export const SwapHistoryComponentSceleton = () => {
+    return _jsx("div", { className: "animate-pulse", children: _jsx("div", { className: " mb-10 ", children: _jsx("div", { className: "-mx-4 mt-10 sm:-mx-6 md:mx-0 md:rounded-lg ", children: _jsxs("table", { className: "min-w-full divide-y divide-secondary-500", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-500 sm:pl-6", children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx("div", { className: "hidden lg:block", children: _jsx("div", { className: "h-2 w-8 bg-slate-700 rounded-sm col-span-1" }) }) }) }), _jsx("th", { scope: "col", className: "hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-500 lg:table-cell", children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx("div", { className: "h-2 w-8 bg-slate-700 rounded-sm col-span-1" }) }) }), _jsx("th", { scope: "col", className: "px-3 py-3.5 text-left text-sm font-semibold text-gray-500 ", children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx("div", { className: "h-2 w-8 bg-slate-700 rounded-sm col-span-1" }) }) }), _jsx("th", { scope: "col", className: "hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-500 lg:table-cell", children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx("div", { className: "h-2 w-16 bg-slate-700 rounded-sm col-span-1" }) }) }), _jsx("th", { scope: "col", className: "hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-500 lg:table-cell", children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx("div", { className: "h-2 w-16 bg-slate-700 rounded-sm col-span-1" }) }) }), _jsx("th", { scope: "col", className: "hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-500 lg:table-cell", children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx("div", { className: "h-2 w-8 bg-slate-700 rounded-sm col-span-1" }) }) }), _jsx("th", { scope: "col", className: "relative py-3.5 pl-3 pr-4 sm:pr-6", children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx("div", { className: "h-2 w-8 bg-slate-700 rounded-sm col-span-1" }) }) }), _jsx("th", { scope: "col", className: "relative py-3.5 pl-3 pr-4 sm:pr-6" })] }) }), _jsx("tbody", { children: [...Array(5)]?.map((item, index) => (_jsxs("tr", { children: [_jsxs("td", { className: classNames(index === 0 ? '' : 'border-t border-secondary-500', 'relative py-4 pl-4 sm:pl-6 pr-3 text-sm'), children: [_jsx("div", { className: "text-primary-text hidden lg:block", children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx("div", { className: "h-2 w-16 bg-slate-700 rounded-sm col-span-1" }) }) }), index !== 0 ? _jsx("div", { className: "absolute right-0 left-6 -top-px h-px bg-secondary-500" }) : null] }), _jsx("td", { className: classNames(index === 0 ? '' : 'border-t border-secondary-500', 'hidden px-3 py-3.5 text-sm text-primary-text lg:table-cell'), children: _jsxs("div", { className: "flex space-x-2", children: [_jsx("div", { className: "rounded-full bg-slate-700 h-4 w-4" }), _jsx("div", { className: "grid grid-cols-4 items-center", children: _jsx("div", { className: "h-2 w-16 bg-slate-700 rounded-sm col-span-3" }) })] }) }), _jsx("td", { className: classNames(index === 0 ? '' : 'border-t border-secondary-500', 'px-3 py-3.5 text-sm text-primary-text table-cell'), children: _jsxs("div", { className: "flex space-x-2", children: [_jsx("div", { className: "rounded-full bg-slate-700 h-4 w-4" }), _jsx("div", { className: "grid grid-cols-4 items-center", children: _jsx("div", { className: "h-2 w-16 bg-slate-700 rounded-sm col-span-3" }) })] }) }), _jsx("td", { className: classNames(index === 0 ? '' : 'border-t border-secondary-500', 'hidden px-3 py-3.5 text-sm text-primary-text lg:table-cell'), children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx("div", { className: "h-2 w-16 bg-slate-700 rounded-sm col-span-1" }) }) }), _jsx("td", { className: classNames(index === 0 ? '' : 'border-t border-secondary-500', 'relative px-3 py-3.5 text-sm text-primary-text'), children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx("div", { className: "h-2 w-16 bg-slate-700 rounded-sm col-span-1" }) }) }), _jsx("td", { className: classNames(index === 0 ? '' : 'border-t border-secondary-500', 'px-3 py-3.5 text-sm text-primary-text  hidden lg:table-cell'), children: _jsxs("div", { className: "flex space-x-2", children: [_jsx("div", { className: "rounded-sm bg-slate-700 h-2 w-2" }), _jsx("div", { className: "grid grid-cols-1 items-center", children: _jsx("div", { className: "h-2 w-16 bg-slate-700 rounded-sm col-span-1" }) })] }) }), _jsx("td", { className: classNames(index === 0 ? '' : 'border-t border-secondary-500', 'px-3 py-3.5 text-sm text-primary-text  hidden lg:table-cell'), children: _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx("div", { className: "h-2 w-12 bg-slate-700 rounded-sm col-span-1" }), _jsx("div", { className: "h-2 w-8 bg-slate-700 rounded-sm col-span-1" })] }) }), _jsx("td", { className: classNames(index === 0 ? '' : 'border-t border-secondary-500', 'px-3 py-3.5 text-sm text-primary-text  hidden lg:table-cell'), children: _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsx(ChevronRight, { className: "h-5 w-5 text-slate-700" }) }) })] }, index))) })] }) }) }) });
+};
+export const SwapDetailsComponentSceleton = () => {
+    return _jsx("div", { className: "animate-pulse", children: _jsx("div", { className: "w-full grid grid-flow-row", children: _jsx("div", { className: "rounded-md bg-secondary-700 w-full grid grid-flow-row", children: _jsxs("div", { className: "items-center block text-base font-lighter leading-6 text-secondary-text", children: [_jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("div", { className: "h-2 m-2 w-1/4 bg-slate-400 rounded-sm col-span-1" }), _jsx("div", { className: "h-2 m-2 w-1/4 bg-slate-700 rounded-sm col-span-1" })] }), [...Array(8)]?.map((item, index) => (_jsxs("div", { children: [_jsx("hr", { className: 'horizontal-gradient my-1' }), _jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("div", { className: "h-2.5 m-2 w-1/4 bg-slate-700 rounded-full col-span-1" }), _jsx("div", { className: "h-2 m-2 w-1/4 bg-slate-700 rounded-sm col-span-1" })] })] }, index)))] }) }) }) });
+};
+export const DocInFrameSceleton = () => {
+    return _jsx("div", { className: "shadow-sm rounded-md w-full mx-auto px-2 md:px-4", children: _jsx("div", { className: "animate-pulse flex space-x-4", children: _jsxs("div", { className: "flex-1 items-center space-y-6 py-1 content-start", children: [_jsx("div", { className: "h-4 mx-auto w-1/2 place-self-center justify-self-center self-center bg-slate-700 rounded-sm mb-4" }), _jsx("div", { className: "space-y-6", children: [...Array(8)]?.map((item, index) => _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsx("div", { className: "h-2 bg-slate-700 rounded-sm col-span-2" }), _jsx("div", { className: "h-2 bg-slate-700 rounded-sm col-span-1" })] }), _jsx("div", { className: "h-2 bg-slate-700 rounded-sm" })] }, index)) })] }) }) });
+};
+export const ExchangesComponentSceleton = () => {
+    return _jsx(_Fragment, { children: [...Array(12)]?.map((item, index) => _jsx("div", { className: "animate-pulse bg-secondary-700 select-none rounded-lg py-5 px-3", children: _jsxs("div", { className: "flex justify-between space-x-4 md:space-x-16 px-3", children: [_jsxs("div", { className: "flex space-x-2", children: [_jsx("div", { className: "rounded-md bg-slate-700 h-8 w-8" }), _jsx("div", { className: "grid grid-cols-5", children: _jsx("div", { className: "h-2 w-20 bg-slate-700 rounded-sm col-span-3" }) })] }), _jsx("div", { className: "rounded-sm bg-slate-700 h-8 w-20 place-self-end py-3 px-4" })] }) }, index)) });
+};
+export const RewardsComponentSceleton = () => {
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "rounded-md w-48 bg-gray-500 h-[28px] animate-pulse" }) }), _jsxs("div", { className: " bg-secondary-700 divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200", children: [_jsx(BackgroundField, { header: _jsxs("span", { className: "flex justify-between", children: [_jsx("span", { children: "Pending Earnings" }), _jsx("span", { children: "Next Airdrop" })] }), withoutBorder: true, children: _jsxs("div", { className: "flex justify-between w-full text-2xl", children: [_jsx("div", { className: "flex items-center space-x-1", children: _jsx("div", { className: "w-32 h-6 rounded-md animate-pulse bg-gray-500" }) }), _jsxs("div", { className: "flex items-center space-x-1", children: [_jsx(Clock, { className: "h-5" }), _jsx("div", { className: "w-14 h-6 rounded-md animate-pulse bg-gray-500" })] })] }) }), _jsx(BackgroundField, { header: _jsxs("span", { className: "flex justify-between", children: [_jsx("span", { children: "Total Earnings" }), _jsx("span", { children: "Current Value" })] }), withoutBorder: true, children: _jsxs("div", { className: "flex justify-between w-full text-slate-300 text-2xl", children: [_jsx("div", { className: "flex items-center space-x-1", children: _jsx("div", { className: "w-40 h-6 rounded-md animate-pulse bg-gray-500" }) }), _jsx("div", { className: "w-20 h-6 rounded-md animate-pulse bg-gray-500" })] }) })] }), _jsx("div", { className: "bg-secondary-700 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200", children: _jsx(BackgroundField, { header: 'Daily Reward Claimed', withoutBorder: true, children: _jsxs("div", { className: "flex flex-col w-full gap-2", children: [_jsx("div", { className: "rounded-full h-4 bg-gray-500 w-full animate-pulse" }), _jsxs("div", { className: "flex justify-between w-full font-semibold text-sm ", children: [_jsx("div", { className: "rounded-md w-20 h-5 animate-pulse bg-gray-500" }), _jsx("div", { className: "rounded-md w-32 h-5 animate-pulse bg-gray-500" })] })] }) }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "rounded-md w-48 bg-gray-500 h-5 animate-pulse" }) }), _jsx("div", { className: " bg-secondary-700 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200", children: _jsx("div", { className: "p-3", children: _jsx("div", { className: "space-y-6", children: [...Array(4)]?.map((user, index) => (_jsx("div", { className: "items-center flex justify-between", children: _jsx("div", { className: "w-full h-4 rounded-md bg-gray-500 animate-pulse" }) }, index))) }) }) })] })] }));
+};
+export const RewardsComponentLeaderboardSceleton = () => {
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "rounded-md w-48 bg-gray-500 h-5 animate-pulse" }) }), _jsx("div", { className: "bg-secondary-700 border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg", children: _jsx("div", { className: "p-3", children: _jsx("div", { className: "space-y-6", children: [...Array(4)]?.map((user, index) => (_jsx("div", { className: "items-center flex justify-between", children: _jsx("div", { className: "w-full h-4 rounded-md bg-gray-500 animate-pulse" }) }, index))) }) }) })] }));
+};

package/dist/esm/components/Common/WarningMessage.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertOctagon, Scroll } from "lucide-react";
+function constructIcons(messageType) {
+    let iconStyle;
+    switch (messageType) {
+        case 'warning':
+            iconStyle = _jsx(AlertOctagon, { className: "sm:h-5 h-4 text-primary-text inline sm:block" });
+            break;
+        case 'informing':
+            iconStyle = _jsx(Scroll, { className: "sm:h-5 h-4 text-primary-text inline sm:block" });
+            break;
+    }
+    return iconStyle;
+}
+const WarningMessage = (({ children, className, messageType = 'warning' }) => {
+    return (_jsx("div", { className: `flex-col w-full rounded-xl bg-secondary-500 shadow-lg px-3.5 py-3 ${className}`, children: _jsxs("div", { className: 'flex items-center', children: [_jsx("div", { className: `mr-2 hidden sm:inline p-2 rounded-lg bg-secondary-300 text-primary-text`, children: constructIcons(messageType) }), _jsxs("div", { className: `text-xs sm:text-sm leading-5 ${messageType == 'warning' ? 'font-semibold' : " text-primary-text font-normal"}`, children: [_jsx("span", { className: `sm:hidden mr-1 pb-1.5 pt-1 px-1 rounded-md bg-secondary-400 text-primary-text"}`, children: constructIcons(messageType) }), _jsx("span", { children: children })] })] }) }));
+});
+export default WarningMessage;

package/dist/esm/components/Common/backgroundField.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CopyButton from "../../components/Buttons/copyButton";
+import QRCodeModal from "./QRCodeWallet";
+import useWindowDimensions from "../../hooks/useWindowDimensions";
+import ExploreButton from "../../components/Buttons/exploreButton";
+const BackgroundField = (({ Copiable, toCopy, header, children, QRable, highlited, withoutBorder, Explorable, toExplore }) => {
+    const { isMobile } = useWindowDimensions();
+    return (_jsxs("div", { className: "relative w-full", children: [highlited &&
+                _jsx("div", { className: "absolute -inset-2", children: _jsx("div", { className: "animate-pulse w-full h-full mx-auto rotate-180 opacity-30 blur-lg filter", style: { background: 'linear-gradient(90deg, #E42575 -0.55%, #A6335E 22.86%, #E42575 48.36%, #ED6EA3 73.33%, #E42575 99.34%)' } }) }), _jsxs("div", { className: `w-full relative px-3 py-3 shadow-xs ${withoutBorder ? 'border-secondary-700' : 'border-secondary-500 rounded-md border bg-secondary-700'}`, children: [header && _jsx("p", { className: "block font-semibold text-sm text-secondary-text", children: header }), _jsxs("div", { className: "flex items-center justify-between w-full mt-1 space-x-2", children: [children, _jsxs("div", { className: "space-x-2 flex self-start", children: [QRable && toCopy &&
+                                        _jsx(QRCodeModal, { qrUrl: toCopy?.toLocaleString(), iconSize: isMobile ? 20 : 16, className: ' text-secondary-text bg-secondary-text/10 p-1.5 hover:text-primary-text rounded-sm' }), Copiable && toCopy &&
+                                        _jsx(CopyButton, { iconSize: isMobile ? 20 : 16, toCopy: toCopy, className: ' text-secondary-text bg-secondary-text/10 p-1.5 hover:text-primary-text rounded-sm' }), Explorable && toExplore &&
+                                        _jsx(ExploreButton, { href: toExplore, target: "_blank", iconSize: isMobile ? 20 : 16, className: ' text-secondary-text bg-secondary-text/10 p-1.5 hover:text-primary-text rounded-sm' })] })] })] })] }));
+});
+export default BackgroundField;

package/dist/esm/components/Common/docInIframe.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ExternalLink } from "lucide-react";
+import { DocInFrameSceleton } from "./Sceletons";
+export function DocIframe({ URl, onConfirm, className }) {
+    const [loading, setLoading] = useState(true);
+    const handleLoad = () => {
+        setLoading(false);
+    };
+    return (_jsxs("div", { className: "flex flex-col justify-between space-y-4 h-full", children: [loading && _jsx(DocInFrameSceleton, {}), _jsx("div", { className: 'h-full', children: _jsx("iframe", { onLoad: handleLoad, height: "100%", allow: "clipboard-write", src: URl, className: `${loading ? 'invisible h-0 w-0' : `visible animate-fade-in-down ${className}`} h-full md:min-h-full border-0 self-center w-full sm:rounded-md` }) }), !loading &&
+                _jsxs("a", { target: "_blank", href: URl, onClick: onConfirm, className: "shadowed-button flex justify-center items-center mt-3 group disabled:white disabled:bg-primary-600 disabled:cursor-not-allowed text-primary relative w-full font-semibold focus:outline-hidden", children: [_jsx("span", { children: "View in new tab" }), _jsx(ExternalLink, { className: 'ml-2 h-5 w-5' })] })] }));
+}

package/dist/esm/components/ErrorFallback.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import { useIntercom } from "react-use-intercom";
+import { Home, RotateCcw } from "lucide-react";
+import posthog from "posthog-js";
+import MessageComponent from "./Common/MessageComponent";
+import NotFoundIcon from "./Icons/NotFoundIcon";
+import SubmitButton from "./Buttons/submitButton";
+export default function ErrorFallback({ error, resetErrorBoundary }) {
+    const { boot, show } = useIntercom();
+    useEffect(() => {
+        posthog.capture('$exception', {
+            name: error?.name,
+            $layerswap_exception_type: "Error Fallback",
+            message: error?.message,
+            where: 'ErrorFallback',
+            severity: 'error',
+        });
+    }, []);
+    const startIntercom = useCallback(() => {
+        boot();
+        show();
+    }, [boot, show]);
+    return (_jsx("div", { className: "styled-scroll", children: _jsx("main", { className: "styled-scroll", children: _jsxs("div", { className: "min-h-screen overflow-hidden relative font-robo", children: [_jsx("div", { className: "mx-auto max-w-lg bg-secondary-700 shadow-card rounded-lg w-full overflow-hidden relative px-6 pt-6 pb-2 h-[500px] min-h-[550px]", children: _jsxs(MessageComponent, { children: [_jsxs(MessageComponent.Content, { center: true, children: [_jsxs(MessageComponent.Header, { className: "mb-3", children: [_jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600/20", children: _jsx(NotFoundIcon, {}) }), _jsx("h1", { className: "text-center text-2xl font-semibold text-white", children: "Unable to complete the request" })] }), _jsx(MessageComponent.Description, { children: _jsxs("p", { className: "mx-auto text-center text-base font-normal leading-5 text-secondary-text px-9", children: [_jsx("span", { children: "Our team is informed and are now investigating the issue. Please try again, if the issue persists you can" }), _jsx("button", { type: "button", onClick: startIntercom, className: "mx-1 underline decoration-gray-400 underline-offset-2 hover:decoration-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#0f1420] focus:ring-gray-400 rounded", children: _jsx("span", { children: "contact our support." }) })] }) })] }), _jsx(MessageComponent.Buttons, { children: _jsxs("div", { className: "flex flex-col w-full text-primary-text text-base space-y-2", children: [_jsx(SubmitButton, { style: { display: 'ruby' }, className: "py-3 text-center ", button_align: "right", text_align: "left", isDisabled: false, isSubmitting: false, onClick: () => resetErrorBoundary(), icon: _jsx(RotateCcw, { className: "h-5 w-5", "aria-hidden": "true" }), children: _jsx("span", { children: "Try Again" }) }), _jsxs("button", { onClick: resetErrorBoundary, type: "button", className: "w-full inline-flex items-center justify-center gap-2 rounded-xl bg-secondary-300 px-5 py-3 text-base font-semibold leading-6 hover:bg-secondary-400 focus:outline-none transition", children: [_jsx(Home, { className: "h-5 w-5", "aria-hidden": "true" }), _jsx("span", { children: "Back to app" })] })] }) })] }) }), _jsx("div", { id: "widget_root" })] }) }) }));
+}