@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

package/dist/esm/components/Pages/SwapHistory/History.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronUp, Plus, RefreshCw } from 'lucide-react';
+import { useMemo, useState } from "react";
+import HistorySummary from "./HistorySummary";
+import useWallet from "../../../hooks/useWallet";
+import Snippet, { HistoryItemSceleton } from "./Snippet";
+import { groupBy } from "../../../components/utils/groupBy";
+import ConnectButton from "../../../components/Buttons/connectButton";
+import React from "react";
+import { useVirtualizer } from '../../../lib/virtual';
+import SwapDetails from "./SwapDetailsComponent";
+import { addressFormat } from "../../../lib/address/formatter";
+import { useSettingsState } from "../../../context/settings";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../components/shadcn/accordion";
+import { useSwapHistoryData } from "../../../hooks/useSwapHistoryData";
+const HistoryList = ({ onNewTransferClick }) => {
+    const { networks } = useSettingsState();
+    const [showAll, setShowAll] = useState(false);
+    const { wallets } = useWallet();
+    const [expanded, setExpanded] = useState(undefined);
+    const addresses = useMemo(() => wallets.map(w => {
+        const network = networks.find(n => n.chain_id == w.chainId);
+        return addressFormat(w.address, network || null);
+    }), [wallets, networks]);
+    const { pendingDeposit, completed, isLoadingAny, isValidatingAny } = useSwapHistoryData(addresses);
+    const handleLoadMore = async () => {
+        if (completed.hasMore)
+            await completed.loadMore();
+    };
+    const handleLoadMorePendingSwaps = async () => {
+        await pendingDeposit.loadMore();
+    };
+    const parentRef = React.useRef(null);
+    const grouppedSwaps = useMemo(() => Object
+        .entries(groupBy(completed.swaps, ({ swap }) => new Date(swap.created_date).toLocaleDateString()))
+        .map(([key, values]) => ({ key, values })), [completed]);
+    const pendingSwaps = useMemo(() => pendingDeposit.swaps || [], [pendingDeposit.swaps]);
+    const pendingHaveMorepages = pendingDeposit.hasMore;
+    const hiddenPendingCount = useMemo(() => Math.max(0, pendingSwaps.length - 1), [pendingSwaps]);
+    const flattenedSwaps = useMemo(() => grouppedSwaps?.flatMap(g => {
+        return [g.key, ...g.values];
+    }), [grouppedSwaps]);
+    const list = useMemo(() => [
+        ...(showAll ? pendingSwaps : (pendingSwaps.slice(0, 1))),
+        ...flattenedSwaps
+    ], [showAll, pendingSwaps, flattenedSwaps]);
+    const rowVirtualizer = useVirtualizer({
+        count: (list?.length || 0),
+        getScrollElement: () => window.document.getElementById('virtualListContainer'),
+        estimateSize: () => 35,
+    });
+    const items = rowVirtualizer.getVirtualItems();
+    if ((isLoadingAny && !(Number(completed.swaps?.length) > 0)))
+        return _jsx(Snippet, {});
+    if (!wallets.length)
+        return _jsx(ConnectWalletCard, {});
+    if (!list.length)
+        return _jsx(BlankHistory, { onNewTransferClick: onNewTransferClick });
+    return (_jsx("div", { className: "relative", children: _jsx("div", { ref: parentRef, children: _jsx("div", { style: {
+                    height: rowVirtualizer.getTotalSize(),
+                    width: '100%',
+                    position: 'relative',
+                }, children: _jsx("div", { style: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        transform: `translateY(${items[0]?.start ? (items[0]?.start - 0) : 0}px)`,
+                    }, children: _jsx(Accordion, { type: "single", collapsible: true, value: expanded, onValueChange: (v) => setExpanded(v), className: "w-full", children: items.map((virtualRow) => {
+                            const data = list?.[virtualRow.index];
+                            if (typeof data === 'string') {
+                                return (_jsx("div", { "data-index": virtualRow.index, ref: rowVirtualizer.measureElement, className: "", children: _jsx("div", { className: "w-full pb-3 mt-6 last:mb-0", children: data !== 'Pending' &&
+                                            _jsx("p", { className: "text-sm text-secondary-text font-normal pl-2", children: _jsx(DaysAgo, { dateInput: data }) }) }) }, virtualRow.key));
+                            }
+                            const swap = data;
+                            if (!swap)
+                                return _jsx(_Fragment, {});
+                            const swapId = String(swap?.swap?.id ?? `${swap?.swap?.created_date}-${virtualRow.index}`);
+                            const pendingSwapsLength = showAll ? pendingSwaps.length : Math.min(1, pendingSwaps.length);
+                            const endOfPendingSwaps = virtualRow.index === (pendingSwapsLength - 1);
+                            const shouldShowToggleButton = hiddenPendingCount > 0 && endOfPendingSwaps;
+                            return (_jsxs("div", { "data-index": virtualRow.index, ref: rowVirtualizer.measureElement, className: "mb-3 last:mb-0", children: [_jsxs(AccordionItem, { value: swapId, className: "border-none bg-secondary-900 rounded-3xl", children: [_jsx(AccordionTrigger, { className: "relative z-10 mb-3 last:mb-0", children: _jsx("div", { className: "cursor-pointer", children: _jsx(HistorySummary, { swapResponse: swap, wallets: wallets }) }) }), _jsxs(AccordionContent, { className: "-mt-3", children: [_jsxs("div", { className: "flex items-center justify-between px-4 pt-5", children: [_jsx("span", { className: "text-secondary-text text-sm", children: "Transaction Details" }), _jsx("button", { type: "button", "aria-label": "Close details", onClick: () => setExpanded(undefined), className: "inline-flex items-center p-1.5 gap-1 text-secondary-text hover:text-primary-text transition-colors bg-secondary-400 rounded-md", children: _jsx(ChevronUp, { className: "w-3 h-3" }) })] }), _jsx("div", { className: "px-4 py-2", children: _jsx(SwapDetails, { swapResponse: swap }) })] })] }), shouldShowToggleButton && (_jsx("div", { className: "w-full flex justify-center my-4", children: _jsx("button", { type: "button", onClick: () => setShowAll(!showAll), className: "flex items-center gap-1 text-sm font-normal text-secondary-text hover:text-primary-text px-3 py-1 rounded-lg bg-secondary-400", children: showAll ? (_jsx(_Fragment, { children: _jsx(ChevronUp, { className: "transition-transform duration-200 w-6 h-6" }) })) : (_jsx(_Fragment, { children: _jsxs("span", { className: "select-none", children: ["+", hiddenPendingCount, " more"] }) })) }) })), pendingHaveMorepages && virtualRow.index === pendingSwaps.length - 1 &&
+                                        _jsxs("button", { disabled: pendingDeposit.isLoading || pendingDeposit.isValidating, type: "button", onClick: handleLoadMorePendingSwaps, className: "text-primary inline-flex gap-1 items-center justify-center disabled:opacity-80 m-auto w-full", children: [_jsx(RefreshCw, { className: `w-4 h-4 ${(pendingDeposit.isLoading || pendingDeposit.isValidating) && 'animate-spin'}` }), _jsx("span", { children: "Load more pending swaps" })] }), virtualRow.index === list.length - 1 && completed.hasMore &&
+                                        _jsxs("button", { disabled: isLoadingAny || isValidatingAny, type: "button", onClick: handleLoadMore, className: "text-primary inline-flex gap-1 items-center justify-center disabled:opacity-80 m-auto w-full py-4", children: [_jsx(RefreshCw, { className: `w-4 h-4 ${(isLoadingAny || isValidatingAny) && 'animate-spin'}` }), _jsx("span", { children: "Load more" })] })] }, virtualRow.key));
+                        }) }) }) }) }) }));
+};
+const BlankHistory = ({ onNewTransferClick }) => {
+    return _jsxs("div", { className: "w-full h-full min-h-[inherit] flex flex-col justify-between items-center space-y-10", children: [_jsx("div", {}), _jsxs("div", { className: "w-full h-full flex flex-col justify-center items-center ", children: [_jsx(HistoryItemSceleton, { className: "scale-[.63] w-full shadow-lg mr-7" }), _jsx(HistoryItemSceleton, { className: "scale-[.63] -mt-12 shadow-card ml-7 w-full" }), _jsxs("div", { className: "mt-2 text-center space-y-2", children: [_jsx("h1", { className: "text-secondary-text text-[28px] font-bold tracking-wide", children: "No Transfer History" }), _jsx("p", { className: "max-w-xs text-center text-primary-text-tertiary text-base font-normal mx-auto", children: "Transfers you make with this wallet/account will appear here after excution." })] }), _jsxs("button", { type: 'button', onClick: onNewTransferClick, className: "mt-10 flex items-center gap-2 text-base text-secondary-text font-normal bg-secondary-500 hover:bg-secondary-400 py-2 px-3 rounded-lg", children: [_jsx(Plus, { className: "w-4 h-4" }), _jsx("p", { children: "New Transfer" })] })] })] });
+};
+const ConnectWalletCard = () => {
+    return _jsxs("div", { className: "w-full h-full flex flex-col justify-between items-center space-y-10", children: [_jsxs("div", { className: "flex flex-col items-center justify-center text-center w-full h-full", children: [_jsx(HistoryItemSceleton, { className: "scale-[.63] w-full shadow-lg mr-7" }), _jsx(HistoryItemSceleton, { className: "scale-[.63] -mt-12 shadow-card ml-7 w-full" }), _jsxs("div", { className: "mt-4 text-center space-y-3", children: [_jsx("h1", { className: "text-secondary-text text-[28px] font-bold tracking-wide", children: "Connect wallet" }), _jsx("p", { className: "max-w-xs text-center text-primary-text-tertiary text-base font-normal mx-auto", children: "In order to see your transfer history you need to connect your wallet." })] })] }), _jsx("div", { className: "flex flex-col items-center w-full space-y-3", children: _jsx(ConnectButton, { className: "w-full", children: _jsx("div", { className: "w-full py-2.5 px-3 text-xl font-semibold bg-primary-text-tertiary hover:opacity-90 duration-200 active:opacity-80 transition-opacity rounded-lg text-secondary-900", children: _jsx("div", { className: "text-center text-xl font-semibold", children: "Connect Wallet" }) }) }) })] });
+};
+function DaysAgo({ dateInput }) {
+    // Get the current date
+    const today = new Date();
+    // Calculate the difference in time between the input date and today
+    const inputDate = new Date(dateInput);
+    const timeDiff = today.getTime() - inputDate.getTime();
+    // Convert the time difference from milliseconds to days
+    const dayDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
+    // Resolve the output based on the difference in days
+    switch (dayDiff) {
+        case 0:
+            return "Today";
+        case 1:
+            return "Yesterday";
+        case 2:
+            return "2 days ago";
+        case 3:
+            return "3 days ago";
+        case 4:
+            return "4 days ago";
+        case 5:
+            return "5 days ago";
+        case 6:
+            return "6 days ago";
+        default:
+            // If the date is more than 6 days ago, return it in DD/MM/YYYY format
+            return dateInput;
+    }
+}
+export default HistoryList;

package/dist/esm/components/Pages/SwapHistory/HistorySummary.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import useSWR from "swr";
+import LayerSwapApiClient, { TransactionType } from "../../../lib/apiClients/layerSwapApiClient";
+import { useInitialSettings } from "../../../context/settings";
+import { addressEnding, shortenEmail } from "../../../components/utils/ShortenAddress";
+import KnownInternalNames from "../../../lib/knownIds";
+import { ChevronRightIcon } from 'lucide-react';
+import StatusIcon from "./StatusIcons";
+import { SwapStatus } from "../../../Models/SwapStatus";
+import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
+const HistorySummary = ({ swapResponse, wallets, className }) => {
+    const { hideFrom, hideTo, account, appName, hideAddress } = useInitialSettings();
+    const layerswapApiClient = new LayerSwapApiClient();
+    const { data: partnerData } = useSWR(appName && `/internal/apps?name=${appName}`, layerswapApiClient.fetcher);
+    const partner = partnerData?.data;
+    const { swap, quote } = swapResponse;
+    const { source_network, destination_network, source_token, destination_token, source_exchange, destination_exchange, destination_address, exchange_account_connected, exchange_account_name, requested_amount } = swap || {};
+    const source = hideFrom ? partner : (source_exchange || source_network);
+    const destination = hideTo ? partner : (destination_exchange || destination_network);
+    const sourceTransaction = swap.transactions?.find(t => t.type === TransactionType.Input);
+    const destinationTransaction = swap.transactions?.find(t => t.type === TransactionType.Output);
+    const sourceAddressFromInput = sourceTransaction?.from;
+    const calculatedReceiveAmount = destinationTransaction?.amount ?? quote?.receive_amount;
+    let sourceAccountAddress = undefined;
+    if (source_exchange) {
+        sourceAccountAddress = "Exchange";
+    }
+    else if (sourceAddressFromInput) {
+        sourceAccountAddress = addressEnding(sourceAddressFromInput);
+    }
+    else if (source_network?.name === KnownInternalNames.Exchanges.Coinbase && exchange_account_connected) {
+        sourceAccountAddress = shortenEmail(exchange_account_name, 10);
+    }
+    const destAddress = (hideAddress && hideTo && account) ? account : destination_address;
+    return (source_token && _jsxs(_Fragment, { children: [_jsx("div", { className: `${className || ""} bg-secondary-500 relative z-10 w-full rounded-xl overflow-hidden hover:bg-secondary-400`, children: _jsxs("div", { className: "grid grid-cols-12 items-center gap-2 relative z-50", children: [_jsxs("div", { className: "col-span-6 flex items-center gap-2 p-3", children: [_jsxs("div", { className: "w-8 h-8 relative", children: [_jsx(ImageWithFallback, { src: source_token.logo, alt: `${source_token.symbol} logo`, width: 30, height: 30, className: "rounded-full" }), source?.logo && (_jsx(ImageWithFallback, { src: source.logo, alt: `${source.display_name} badge`, width: 18, height: 18, className: "absolute -bottom-1 -right-1 h-[18px] w-[18px] rounded-md" }))] }), _jsxs("div", { className: "flex min-w-0 flex-col items-start space-y-0.5", children: [_jsxs("span", { className: "text-white text-lg leading-5 flex min-w-0", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "truncate overflow-hidden whitespace-nowrap max-w-[100px]", children: requested_amount.toLocaleString('en-US', { maximumFractionDigits: 20 }) }) }), _jsx(TooltipContent, { children: requested_amount })] }), "\u00A0", source_token.symbol] }), _jsx("span", { className: "text-secondary-text text-sm leading-[14px]", children: source?.display_name || "" })] })] }), _jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none -z-10", children: _jsx("div", { className: "h-7 w-6 rounded-md bg-secondary-400 flex items-center justify-center", children: _jsx(ChevronRightIcon, { className: "h-5 w-5 text-white" }) }) }), _jsxs("div", { className: "col-span-6 flex items-center justify-end gap-2 bg-secondary-400 p-3 rounded-xl", children: [_jsxs("div", { className: "flex min-w-0 flex-col items-end space-y-0.5", children: [_jsxs("span", { className: "text-white text-lg leading-5 flex min-w-0", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "truncate overflow-hidden whitespace-nowrap max-w-[100px]", children: calculatedReceiveAmount.toLocaleString('en-US', { maximumFractionDigits: 20 }) }) }), _jsx(TooltipContent, { children: calculatedReceiveAmount })] }), "\u00A0", destination_token.symbol] }), _jsx("span", { className: "text-secondary-text text-sm leading-[14px]", children: destination?.display_name || "" })] }), _jsxs("div", { className: "relative w-8 h-8", children: [_jsx(ImageWithFallback, { src: destination_token.logo, alt: `${destination_token.symbol} logo`, width: 30, height: 30, className: "rounded-full" }), destination?.logo && (_jsx(ImageWithFallback, { src: destination.logo, alt: `${destination.display_name} badge`, width: 18, height: 18, className: "absolute -bottom-1 -right-1 h-[18px] w-[18px] rounded-md" }))] })] })] }) }), swap.status !== SwapStatus.Completed &&
+                _jsx("div", { className: "-mt-2 z-0 relative", children: _jsx(StatusIcon, { swap: swap, withBg: true }) })] }));
+};
+export default HistorySummary;

package/dist/esm/components/Pages/SwapHistory/Snippet.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Snippet = () => {
+    return _jsxs("div", { className: "text-sm py-3 space-y-4 font-medium focus:outline-hidden overflow-hidden", children: [[...Array(5)]?.map((item, index) => (_jsx(HistoryItemSceleton, { className: "animate-pulse" }, index))), _jsx("div", { className: "relative", "aria-hidden": "true", children: _jsx("div", { className: "absolute -inset-x-20 bottom-0 bg-gradient-to-t from-10% from-secondary-700 pt-[90%] sm:pt-[30%] lg:pt-[80%]" }) })] });
+};
+export const HistoryItemSceleton = (props) => {
+    return _jsx("div", { ...props, className: `w-full rounded-xl bg-secondary-700 ${props.className}`, children: _jsx("div", { className: "rounded-lg px-3 py-4 w-full relative z-10 space-y-4", children: _jsx("div", { className: "font-normal flex flex-col w-full relative z-10 space-y-4", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "flex col-span-5 items-center gap-3 grow ", children: [_jsx("div", { className: "w-11 h-11 rounded-md border border-secondary-400 bg-secondary-500" }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx("p", { className: "w-32 sm:w-40 h-3 border border-secondary-400 bg-secondary-500 rounded-sm" }), _jsx("p", { className: "w-28 sm:w-32 h-3 border border-secondary-400 bg-secondary-500 rounded-sm" })] })] }), _jsxs("div", { className: "flex flex-col items-end gap-2", children: [_jsx("p", { className: "w-14 h-3 border border-secondary-400 bg-secondary-500 rounded-sm" }), _jsx("p", { className: "w-20 sm:w-28 h-3 border border-secondary-400 bg-secondary-500 rounded-sm" })] })] }) }) }) });
+};
+export default Snippet;

package/dist/esm/components/Pages/SwapHistory/StatusIcons.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SwapStatus } from "../../../Models/SwapStatus";
+import { TransactionType } from "../../../lib/apiClients/layerSwapApiClient";
+import CheckIcon from "../../../components/Icons/CheckIcon";
+export default function StatusIcon({ swap, withBg, short }) {
+    const status = swap.status;
+    switch (status) {
+        case SwapStatus.Failed:
+            return _jsx(RedComponenet, { text: "Failed", withBg: withBg, short: short });
+        case SwapStatus.Completed:
+            return _jsx(GreenComponent, { text: "Completed", withBg: withBg, short: short });
+        case SwapStatus.Cancelled:
+            return _jsx(SecondaryComponent, { text: "Cancelled", withBg: withBg, short: short });
+        case SwapStatus.Expired:
+            return _jsx(SecondaryComponent, { text: "Expired", withBg: withBg, short: short });
+        case SwapStatus.UserTransferPending:
+            const data = JSON.parse(localStorage.getItem('swapTransactions') || "{}");
+            const txForSwap = data?.state?.swapTransactions?.[swap.id];
+            if (txForSwap || swap.transactions.find(t => t.type === TransactionType.Input)) {
+                return _jsx(PrimaryComponent, { text: "In Progress", withBg: withBg, short: short });
+            }
+            else {
+                return _jsx(YellowComponent, { text: "Incomplete", withBg: withBg, short: short });
+            }
+        case SwapStatus.LsTransferPending:
+            return _jsx(PrimaryComponent, { text: "In Progress", withBg: withBg, short: short });
+        case SwapStatus.UserTransferDelayed:
+            return _jsx(YellowComponent, { text: "Delayed", withBg: withBg, short: short });
+        case SwapStatus.Created:
+            return _jsx(YellowComponent, { text: "Incomplete", withBg: withBg, short: short });
+        case SwapStatus.PendingRefund:
+            return _jsx(YellowComponent, { text: "Refund Pending", withBg: withBg, short: short });
+        case SwapStatus.Refunded:
+            return _jsx(GreenComponent, { text: "Refund Completed", withBg: withBg, short: short });
+        default:
+            return _jsx(_Fragment, {});
+    }
+}
+const IconComponentWrapper = ({ children, withBg, classNames }) => {
+    return (_jsx("div", { className: `inline-flex items-center gap-1 font-bold ${classNames} ${withBg ? 'pt-3.5 py-1.5 w-full justify-center rounded-b-2xl' : 'bg-transparent!'}`, children: children }));
+};
+const GreenComponent = ({ text, withBg, short }) => {
+    return (_jsxs(IconComponentWrapper, { withBg: withBg, classNames: "bg-[#54b487]/20 text-[#569735] text-sm", children: [_jsx(CheckIcon, {}), !short && _jsx("p", { children: text })] }));
+};
+const PrimaryComponent = ({ text, withBg, short }) => {
+    return (_jsxs(IconComponentWrapper, { withBg: withBg, classNames: "bg-primary-900 text-primary-500 text-sm", children: [_jsxs("div", { className: 'relative', children: [_jsx("div", { className: 'absolute top-0.5 left-0.5 w-3 h-3 opacity-40 bg bg-primary rounded-full animate-ping' }), _jsx("div", { className: 'relative top-0 left-0 w-4 h-4 scale-75 bg bg-primary rounded-full' })] }), !short && _jsx("p", { children: text })] }));
+};
+const SecondaryComponent = ({ text, withBg, short }) => {
+    return (_jsx(IconComponentWrapper, { withBg: withBg, classNames: "text-primary-text-tertiary bg-secondary-700 text-sm", children: short ?
+            _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 60 60", fill: "currentColor", className: "text-primary-text-tertiary", children: _jsx("circle", { cx: "30", cy: "30", r: "30", fill: "currentColor" }) })
+            :
+                _jsx("p", { children: text }) }));
+};
+const YellowComponent = ({ text, withBg, short }) => {
+    return (_jsxs(IconComponentWrapper, { withBg: withBg, classNames: "bg-[#614713] text-[#D69A22] text-sm", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 60 60", fill: "none", children: _jsx("circle", { cx: "30", cy: "30", r: "30", fill: "#DF8B16" }) }), !short && _jsx("p", { className: "text-sm font-bold", children: text })] }));
+};
+const RedComponenet = ({ text, withBg, short }) => {
+    return (_jsxs(IconComponentWrapper, { withBg: withBg, classNames: "bg-red-950/40 text-red-600 text-sm", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 60 60", fill: "none", children: _jsx("circle", { cx: "30", cy: "30", r: "30", fill: "#E43636" }) }), !short && _jsx("p", { children: text })] }));
+};

package/dist/esm/components/Pages/SwapHistory/SwapDetailsComponent.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { TransactionType } from '../../../lib/apiClients/layerSwapApiClient';
+import shortenAddress, { shortenEmail } from '../../../components/utils/ShortenAddress';
+import CopyButton from '../../../components/Buttons/copyButton';
+import StatusIcon from './StatusIcons';
+import { ExternalLink } from 'lucide-react';
+import isGuid from '../../../components/utils/isGuid';
+import KnownInternalNames from '../../../lib/knownIds';
+import { useInitialSettings } from '../../../context/settings';
+import { SwapStatus } from '../../../Models/SwapStatus';
+import { getDateDifferenceString } from '../../../components/utils/dateDifference';
+import { useSwapDataUpdate } from '../../../context/swap';
+import { useSettingsState } from '../../../context/settings';
+import { generateSwapInitialValuesFromSwap } from '../../../lib/generateSwapInitialValues';
+import SubmitButton from '../../../components/Buttons/submitButton';
+import SecondaryButton from '../../../components/Buttons/secondaryButton';
+const SwapDetails = ({ swapResponse }) => {
+    const { swap } = swapResponse;
+    const { source_network, destination_network, source_exchange } = swap;
+    const initialSettings = useInitialSettings();
+    const { hideFrom, account, } = initialSettings;
+    const { setSubmitedFormValues, setSwapModalOpen, setSwapId, createSwap } = useSwapDataUpdate();
+    const settings = useSettingsState();
+    const [isRepeatLoading, setIsRepeatLoading] = useState(false);
+    const handleRepeatSwap = async () => {
+        if (isRepeatLoading)
+            return;
+        setIsRepeatLoading(true);
+        try {
+            // Create a new swap based on the current swap data
+            // Determine if this is a cross-chain or exchange swap
+            const swapType = (swap.source_exchange || swap.destination_exchange) ? 'exchange' : 'cross-chain';
+            const newSwapData = generateSwapInitialValuesFromSwap(swap, false, settings, swapType);
+            setSubmitedFormValues(newSwapData);
+            // For wallet deposits, follow the same flow as FormWrapper's handleCreateSwap
+            if (newSwapData.depositMethod === 'wallet') {
+                setSwapId(undefined);
+                setSwapModalOpen(true);
+            }
+            else {
+                // For deposit address method, create the swap first then open modal
+                setSwapId(undefined);
+                const swapResponse = await createSwap(newSwapData, initialSettings, undefined);
+                setSwapId(swapResponse.swap.id);
+                setSwapModalOpen(true);
+            }
+        }
+        catch (error) {
+            // Handle error appropriately
+            console.log('Failed to create swap:', error);
+        }
+        finally {
+            setIsRepeatLoading(false);
+        }
+    };
+    const handleViewCompleteSwap = () => {
+        setSwapId(swap.id);
+        setSwapModalOpen(true);
+    };
+    const input_tx_explorer_template = source_network?.transaction_explorer_template;
+    const output_tx_explorer_template = destination_network?.transaction_explorer_template;
+    const swapInputTransaction = swap?.transactions?.find(t => t.type === TransactionType.Input);
+    const swapOutputTransaction = swap?.transactions?.find(t => t.type === TransactionType.Output);
+    const refundTransaction = swap?.transactions?.find(t => t.type === TransactionType.Refund);
+    let sourceAccountAddress = undefined;
+    if (hideFrom && account) {
+        sourceAccountAddress = account;
+    }
+    else if (swapInputTransaction?.from) {
+        sourceAccountAddress = swapInputTransaction?.from;
+    }
+    else if (source_network?.name === KnownInternalNames.Exchanges.Coinbase && swap?.exchange_account_connected) {
+        sourceAccountAddress = shortenEmail(swap?.exchange_account_name, 10);
+    }
+    else if (source_exchange) {
+        sourceAccountAddress = "Exchange";
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("section", { className: 'pb-3 space-y-3', children: _jsx("div", { className: 'p-3 bg-secondary-500 rounded-xl', children: _jsxs("div", { className: 'text-sm flex flex-col gap-3', children: [_jsxs("div", { className: "flex justify-between items-center text-sm text-primary-text", children: [_jsx("p", { className: "text-left text-secondary-text", children: "Transaction ID" }), _jsx(CopyButton, { toCopy: swap?.id, iconClassName: 'order-2 ml-1 text-primary-text', children: shortenAddress(swap?.id) })] }), _jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Date & Time" }), _jsxs("span", { className: 'text-primary-text', children: [(new Date(swap.created_date)).toLocaleString(), " ", _jsx("span", { className: 'text-primary-text-tertiary', children: getDateDifferenceString(new Date(swap.created_date)) })] })] }), _jsxs("div", { className: "flex justify-between p items-baseline", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Status " }), _jsx("span", { className: "text-primary-text", children: _jsx(StatusIcon, { swap: swap }) })] })] }) }) }), _jsx("section", { className: 'pb-2', children: _jsxs("div", { className: 'flex flex-col justify-between w-full h-full gap-3', children: [_jsx("div", { className: 'space-y-3', children: _jsx("div", { className: 'p-3 bg-secondary-500 rounded-xl text-primary-text', children: _jsxs("div", { className: 'text-sm flex flex-col gap-3', children: [_jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("p", { className: "text-left text-secondary-text", children: "Source transaction" }), swapInputTransaction?.transaction_hash ?
+                                                    _jsxs("a", { target: "_blank", href: input_tx_explorer_template?.replace("{0}", swapInputTransaction.transaction_hash), className: 'flex items-center space-x-1', rel: "noopener noreferrer", children: [_jsx("span", { children: shortenAddress(swapInputTransaction.transaction_hash) }), _jsx(ExternalLink, { className: 'h-4' })] })
+                                                    :
+                                                        _jsx("span", { children: "-" })] }), _jsx("div", { className: "flex justify-between items-baseline", children: swap.status == SwapStatus.Refunded ?
+                                                _jsxs(_Fragment, { children: [_jsx("p", { className: "text-left text-secondary-text", children: "Refund transaction" }), refundTransaction?.transaction_hash ?
+                                                            ((refundTransaction?.transaction_hash && swap?.destination_exchange?.name === KnownInternalNames.Exchanges.Coinbase && (isGuid(refundTransaction?.transaction_hash))) ?
+                                                                _jsx("span", { children: _jsx(CopyButton, { toCopy: refundTransaction.transaction_hash, iconClassName: "text-primary-text order-2", children: shortenAddress(refundTransaction.transaction_hash) }) })
+                                                                :
+                                                                    _jsxs("a", { target: "_blank", href: output_tx_explorer_template?.replace("{0}", refundTransaction.transaction_hash), className: 'flex items-center space-x-1', rel: "noopener noreferrer", children: [_jsx("span", { children: shortenAddress(refundTransaction.transaction_hash) }), _jsx(ExternalLink, { className: 'h-4' })] }))
+                                                            :
+                                                                _jsx("span", { children: "-" })] })
+                                                :
+                                                    _jsxs(_Fragment, { children: [_jsx("p", { className: "text-left text-secondary-text", children: "Destination transaction" }), swapOutputTransaction?.transaction_hash ?
+                                                                ((swapOutputTransaction?.transaction_hash && swap?.destination_exchange?.name === KnownInternalNames.Exchanges.Coinbase && (isGuid(swapOutputTransaction?.transaction_hash))) ?
+                                                                    _jsx("span", { children: _jsx(CopyButton, { toCopy: swapOutputTransaction.transaction_hash, iconClassName: "text-primary-text order-2", children: shortenAddress(swapOutputTransaction.transaction_hash) }) })
+                                                                    :
+                                                                        _jsxs("a", { target: "_blank", href: output_tx_explorer_template?.replace("{0}", swapOutputTransaction.transaction_hash), className: 'flex items-center space-x-1', rel: "noopener noreferrer", children: [_jsx("span", { children: shortenAddress(swapOutputTransaction.transaction_hash) }), _jsx(ExternalLink, { className: 'h-4' })] }))
+                                                                :
+                                                                    _jsx("span", { children: "-" })] }) })] }) }) }), swap.status === SwapStatus.Completed &&
+                            _jsx(SecondaryButton, { type: 'button', size: 'xl', onClick: handleRepeatSwap, isLoading: isRepeatLoading, children: _jsx("p", { children: isRepeatLoading ? 'Creating Swap...' : 'Repeat Swap' }) }), (swap.status !== SwapStatus.Completed && swap.status !== SwapStatus.Expired && swap.status !== SwapStatus.Failed) &&
+                            _jsx(SubmitButton, { type: 'button', onClick: handleViewCompleteSwap, children: _jsx("p", { children: swap.status == SwapStatus.LsTransferPending ? "View Swap" : "Complete Swap" }) })] }) })] }));
+};
+export default SwapDetails;

package/dist/esm/components/Pages/SwapHistory/index.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Content from "./History";
+import Header from "./Header";
+import { LayerswapProvider } from "../../../context/LayerswapProvider";
+import { SwapDataProvider } from "../../../context/swap";
+import { useBackClickCallback } from "../../../context/callbackProvider";
+export const TransactionsHistory = ({ settings, themeData, apiKey }) => {
+    const triggerOnBackClickCallback = useBackClickCallback();
+    return (_jsx(LayerswapProvider, { apiKey: apiKey, integrator: "experimental", settings: settings, themeData: themeData, children: _jsx(SwapDataProvider, { children: _jsxs("div", { id: "widget", className: 'bg-secondary-900 sm:shadow-card sm:relative rounded-lg w-full text-primary-text overflow-y-auto sm:overflow-hidden max-h-screen h-full sm:h-[650px]', children: [_jsxs("div", { className: "overflow-y-auto flex flex-col h-full z-40 pb-4", children: [_jsx(Header, { onBackClick: triggerOnBackClickCallback }), _jsx("div", { className: "px-6 h-full overflow-y-auto styled-scroll max-h-[80vh]", id: 'virtualListContainer', children: _jsx(Content, {}) })] }), _jsx("div", { id: "widget_root" })] }) }) }));
+};

package/dist/esm/components/Select/Command/CommandSelectWrapper.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import CommandSelect from './commandSelect';
+import { ImageWithFallback } from '../../../components/Common/ImageWithFallback';
+export default function CommandSelectWrapper({ setValue, value, disabled, placeholder, searchHint, values, valueGrouper, isLoading, modalHeight, modalContent, valueDetails, }) {
+    const [showModal, setShowModal] = useState(false);
+    function openModal() {
+        setShowModal(true);
+    }
+    const handleSelect = useCallback((item) => {
+        setValue(item);
+        setShowModal(false);
+    }, [setValue]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center relative", children: _jsxs("button", { type: "button", onClick: openModal, disabled: disabled, className: "rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-hidden disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-secondary-600 font-semibold", children: [_jsxs("span", { className: 'flex grow text-left items-center text-xs md:text-base', children: [value?.imgSrc && _jsx("div", { className: "flex items-center", children: _jsx("div", { className: "shrink-0 h-6 w-6 relative", children: _jsx(ImageWithFallback, { src: value.imgSrc, alt: "Project Logo", height: "40", width: "40", loading: "eager", fetchPriority: 'high', className: "rounded-md object-contain" }) }) }), value ?
+                                    _jsx("span", { className: "ml-3 flex font-medium flex-auto space-x-1 text-primary-buttonTextColor items-center", children: valueDetails || value.name })
+                                    :
+                                        _jsx("span", { className: "block font-medium text-primary-text-tertiary flex-auto items-center", children: placeholder })] }), _jsx("span", { className: "ml-3 right-0 flex items-center pr-2 pointer-events-none  text-primary-text", children: !disabled && _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }) }), _jsx(CommandSelect, { setShow: setShowModal, setValue: handleSelect, show: showModal, value: value, searchHint: searchHint, valueGrouper: valueGrouper, values: values, isLoading: isLoading, modalHeight: modalHeight, modalContent: modalContent })] }));
+}

package/dist/esm/components/Select/Command/commandSelect.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandWrapper } from '../../shadcn/command';
+import React from "react";
+import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import SelectItem from '../Shared/SelectItem';
+import SpinIcon from '../../Icons/spinIcon';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../shadcn/accordion';
+import VaulDrawer from '../../Modal/vaulModal';
+import { Search } from 'lucide-react';
+export class SelectMenuItemGroup {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+export default function CommandSelect({ values, setValue, show, setShow, searchHint, valueGrouper, isLoading, modalHeight = 'full', modalContent, header }) {
+    const { isDesktop, isMobile, windowSize } = useWindowDimensions();
+    let groups = valueGrouper(values);
+    const inputRef = React.useRef(null);
+    return (_jsx(VaulDrawer, { header: header, show: show, setShow: setShow, modalId: 'comandSelect', onAnimationEnd: () => { isDesktop && show && inputRef.current?.focus(); }, children: _jsx(VaulDrawer.Snap, { id: 'item-1', style: { height: isMobile && windowSize.height ? `${(windowSize.height * 0.8).toFixed()}px` : '' }, openFullHeight: isDesktop || (isMobile && !windowSize.height), children: _jsxs(CommandWrapper, { children: [searchHint &&
+                        _jsx(CommandInput, { autoFocus: isDesktop, placeholder: "Search", children: _jsx("div", { className: "pl-2", children: _jsx(Search, { className: "w-6 h-6 text-secondary-text" }) }) }), modalContent, !isLoading ?
+                        _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), groups.filter(g => g.items?.length > 0).map((group) => {
+                                    return (_jsx(Group, { group: group }, group.name));
+                                })] })
+                        :
+                            _jsx("div", { className: 'flex justify-center h-full items-center', children: _jsx(SpinIcon, { className: "animate-spin h-5 w-5" }) })] }) }) }));
+}
+const Group = ({ group }) => {
+    const [openValues, setOpenValues] = React.useState([]);
+    const toggleAccordionItem = (value) => {
+        setOpenValues((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
+    };
+    return _jsx(CommandGroup, { heading: _jsx("span", { className: 'text-secondary-text pl-2', children: group.name.toUpperCase() }), children: _jsx(Accordion, { type: "multiple", value: openValues, children: group.items.map((item, index) => {
+                return (_jsx(GroupItem, { item: item, underline: index + 1 < group.items.length, onTriggerSelect: toggleAccordionItem }, item.id));
+            }) }) });
+};
+const GroupItem = ({ item, underline, onTriggerSelect }) => {
+    return (_jsxs(AccordionItem, { value: item.name, children: [_jsx(CommandItem, { value: `${item.name} ${item.subItems?.map(si => si.name).join(" ")}`, onSelect: () => {
+                    onTriggerSelect(item.name);
+                }, children: _jsx(AccordionTrigger, { children: _jsx(SelectItem, { item: item, underline: underline }) }) }, item.id), _jsx(AccordionContent, { className: "rounded-md", children: _jsx("div", { className: 'ml-8 border-l border-secondary-500 my-2', children: item.subItems?.map((subItem, index) => _jsx(CommandItem, { value: `${item.name} ${subItem.name}`, onSelect: () => { }, children: _jsx(SelectItem, { item: subItem }, index) }, subItem.id)) }) })] }));
+};

package/dist/esm/components/Select/Selector/Index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal, ModalContent, ModalTrigger, useModalState } from "../../../components/Modal/modalWithoutAnimation";
+export const Selector = ({ children }) => {
+    return (_jsx(Modal, { children: children }));
+};
+export const useSelectorState = () => {
+    return useModalState();
+};
+export const SelectorContent = (props) => {
+    const { children, header } = props;
+    return (_jsx(ModalContent, { header: header, children: children }));
+};
+export const SelectorTrigger = (props) => {
+    return _jsx(ModalTrigger, { ...props });
+};

package/dist/esm/components/Select/Selector/SelectItem.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageWithFallback } from '../../../components/Common/ImageWithFallback';
+import clsx from 'clsx';
+const SelectItem = ({ children, className }) => {
+    return _jsx("div", { className: clsx("flex items-center justify-between pl-2 pr-3 overflow-hidden cursor-pointer relative gap-2 py-1.5", className), children: children });
+};
+const Logo = ({ imgSrc, altText, className = 'rounded-md' }) => {
+    return _jsx("div", { className: "shrink-0 relative h-9 w-9", children: imgSrc ? _jsx("div", { className: 'inline-flex relative', children: _jsx(ImageWithFallback, { src: imgSrc, alt: altText, height: "36", width: "36", loading: "eager", className: `${className} object-contain` }) })
+            :
+                _jsx("div", { className: `${className} object-contain bg-gray-200 h-9 w-9 rounded-full` }) });
+};
+const Title = ({ children, className }) => {
+    return _jsx("div", { className: `flex justify-between w-full text-base items-center pb-0.5 ${className}`, children: children });
+};
+const DetailedTitle = ({ children, className, title, secondary, secondaryImageAlt, secondaryLogoSrc, logoClassName }) => {
+    return _jsxs(Title, { className: clsx("w-full grid grid-cols-9", className), children: [_jsxs("div", { className: "col-span-5 sm:col-span-7 truncate flex flex-col gap-1 leading-5 align-middle font-medium", children: [_jsx("span", { className: "align-middle leading-5 text-base", children: title }), _jsxs("div", { className: "flex items-center space-x-1 align-middle", children: [secondaryLogoSrc && _jsx(ImageWithFallback, { src: secondaryLogoSrc, alt: secondaryImageAlt, height: "16", width: "16", loading: "eager", className: clsx("h-4 w-4 object-contain rounded", logoClassName) }), _jsx("span", { className: "text-secondary-text text-xs whitespace-nowrap", children: secondary })] })] }), _jsx("div", { className: 'col-span-4 sm:col-span-2 place-self-end self-center', children: children })] });
+};
+SelectItem.Logo = Logo;
+SelectItem.Title = Title;
+SelectItem.DetailedTitle = DetailedTitle;
+export { SelectItem };

package/dist/esm/components/Select/Shared/SelectItem.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
+export default function SelectItem({ item, underline }) {
+    return (_jsx("div", { className: `flex items-center justify-between gap-3 w-full overflow-hidden`, children: _jsxs("div", { className: `gap-4 relative flex items-center w-full`, children: [_jsx("div", { className: "shrink-0", children: _jsx("div", { children: item.leftIcon }) }), _jsx("div", { className: `h-8 w-8 shrink-0 relative`, children: item.imgSrc && (_jsx(ImageWithFallback, { src: item.imgSrc, alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" })) }), _jsxs("div", { className: `flex justify-between w-full items-center py-3 ${underline ? 'border-b border-secondary-700' : ''}`, children: [_jsx("span", { className: "flex items-center pb-0.5 text-base", children: item.displayName || item.name }), item.badge && _jsx("span", { className: "ml-2", children: item.badge }), _jsx("span", { className: "ml-auto pl-2", children: item.details })] })] }) }));
+}

package/dist/esm/components/Wallet/WalletComponents/ConnectedWallets.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import WalletIcon from "../../Icons/WalletIcon";
+import shortenAddress from "../../utils/ShortenAddress";
+import useWallet from "../../../hooks/useWallet";
+import ConnectButton from "../../Buttons/connectButton";
+import { useState } from "react";
+import WalletsList from "./WalletsList";
+import VaulDrawer from "../../Modal/vaulModal";
+export const WalletsHeader = () => {
+    const { wallets } = useWallet();
+    if (wallets.length > 0) {
+        return (_jsx(WalletsHeaderWalletsList, { wallets: wallets }));
+    }
+    return (_jsx(ConnectButton, { children: _jsx("div", { className: "p-1.5 max-sm:p-2 active:animate-press-down justify-self-start text-secondary-text hover:bg-secondary-500 max-sm:bg-secondary-500 hover:text-primary-text focus:outline-hidden inline-flex rounded-lg items-center", children: _jsx(WalletIcon, { className: "h-6 w-6 mx-0.5", strokeWidth: "2" }) }) }));
+};
+const WalletsHeaderWalletsList = ({ wallets }) => {
+    const [openModal, setOpenModal] = useState(false);
+    return _jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setOpenModal(true), className: "p-1.5 max-sm:p-2 justify-self-start text-secondary-text hover:bg-secondary-500 max-sm:bg-secondary-500 hover:text-primary-text focus:outline-hidden inline-flex rounded-lg items-center active:animate-press-down", children: _jsx(WalletsIcons, { wallets: wallets }) }), _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: `Connected wallets`, modalId: "connectedWallets", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(WalletsList, { wallets: wallets }) }) })] });
+};
+export const WalletsIcons = ({ wallets }) => {
+    const uniqueWallets = wallets.filter((wallet, index, self) => index === self.findIndex((t) => t.id === wallet.id));
+    const firstWallet = uniqueWallets[0];
+    const secondWallet = uniqueWallets[1];
+    return (_jsxs("div", { className: "-space-x-2 flex", children: [firstWallet?.displayName &&
+                _jsx(firstWallet.icon, { className: "rounded-full border-2 border-secondary-600 bg-secondary-700 shrink-0 h-6 w-6" }), secondWallet?.displayName &&
+                _jsx(secondWallet.icon, { className: "rounded-full border-2 border-secondary-600 bg-secondary-700 shrink-0 h-6 w-6" }), uniqueWallets.length > 2 &&
+                _jsx("div", { className: "h-6 w-6 shrink-0 rounded-full justify-center p-1 bg-secondary-600 text-primary-text overlfow-hidden text-xs", children: _jsxs("span", { children: [_jsx("span", { children: "+" }), uniqueWallets.length - 2] }) })] }));
+};
+export const WalletsMenu = () => {
+    const { wallets } = useWallet();
+    if (wallets.length > 0) {
+        return (_jsx(WalletsMenuWalletsList, { wallets: wallets }));
+    }
+    return (_jsx(ConnectButton, { children: _jsxs("div", { className: "active:animate-press-down border border-primary disabled:border-primary-900 items-center space-x-1 disabled:text-primary/40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-xl transform hover:brightness-125 transition duration-200 ease-in-out py-3 md:px-3 bg-primary/20 border-none text-primary! px-4!", children: [_jsx("span", { className: "order-first absolute left-0 inset-y-0 flex items-center pl-3", children: _jsx(WalletIcon, { className: "h-6 w-6", strokeWidth: "2" }) }), _jsx("span", { className: "grow text-center", children: "Connect a wallet" })] }) }));
+};
+const WalletsMenuWalletsList = ({ wallets }) => {
+    const wallet = wallets[0];
+    const [openModal, setOpenModal] = useState(false);
+    return _jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setOpenModal(true), type: "button", className: "py-3 px-4 bg-secondary-500 flex items-center w-full rounded-xl space-x-1 disabled:text-secondary-text/40 disabled:bg-primary-900 disabled:cursor-not-allowed relative font-semibold transform border border-secondary-500 hover:bg-secondary-400 transition duration-200 ease-in-out outline-hidden", children: wallets.length === 1 ?
+                    _jsxs("div", { className: "flex gap-4 items-start text-primary-text", children: [_jsx(wallet.icon, { className: 'h-5 w-5' }), !wallet.isLoading && wallet.address && _jsx("p", { children: shortenAddress(wallet.address) })] })
+                    :
+                        _jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center w-full", children: "Connected wallets" }), _jsx("div", { className: "place-items-end absolute left-2.5", children: _jsx(WalletsIcons, { wallets: wallets }) })] }) }), _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: `Connected wallets`, modalId: "connectedWallets", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(WalletsList, { wallets: wallets }) }) })] });
+};