@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

package/dist/components/Pages/{SwapPages → Swap}/Withdraw/index.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { Widget } from "../../../Widget/Index";
@@ -7,18 +6,17 @@ import NotFound from "./NotFound";
 import SwapDetails from "./SwapDetails";
 import { LayerswapProvider } from "../../../../context/LayerswapProvider";
 import { TimerProvider } from "../../../../context/timerContext";
-import { DepositMethodProvider } from "../../../../context/depositMethodContext";
 const Comp = () => {
-    const { swapResponse: swap, swapApiError } = useSwapDataState();
+    const { swapBasicData, swapApiError, swapId } = useSwapDataState();
     const { mutateSwap } = useSwapDataUpdate();
     useEffect(() => {
         mutateSwap();
     }, []);
-    if (!swap)
-        return _jsx(Widget, { children: _jsx("div", { className: `pb-6 rounded-lg w-full overflow-hidden relative h-[548px]`, children: swapApiError &&
-                    _jsx(NotFound, {}) }) });
+    if (!swapBasicData)
+        return _jsx(Widget, { children: _jsx("div", { className: `rounded-lg w-full overflow-hidden relative h-[548px]`, children: swapApiError &&
+                    _jsx(NotFound, { swapId: swapId }) }) });
     return (_jsx(SwapDetails, { type: "widget" }));
 };
 export const SwapWithdrawal = (props) => {
-    return (_jsx(LayerswapProvider, { ...props, children: _jsx(SwapDataProvider, { children: _jsx(TimerProvider, { children: _jsx(DepositMethodProvider, { children: _jsx(Comp, {}) }) }) }) }));
+    return (_jsx(LayerswapProvider, { ...props, children: _jsx(SwapDataProvider, { children: _jsx(TimerProvider, { children: _jsx(Comp, {}) }) }) }));
 };

package/dist/components/Pages/Swap/Withdraw/messages/Message.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import FailIcon from "../../../../Icons/FailIcon";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../../../components/shadcn/accordion";
+const WalletMessage = ({ header, details, status, showInModal }) => {
+    return _jsxs("div", { className: "flex text-center space-x-2", children: [_jsx("div", { className: 'relative -mt-0.5', children: status === "error" ?
+                    _jsx(FailIcon, { className: "relative top-0 left-0 w-6 h-6 md:w-7 md:h-7" })
+                    :
+                        _jsxs(_Fragment, { children: [_jsx("div", { className: 'absolute top-1 left-1 w-4 h-4 md:w-5 md:h-5 opacity-40 bg bg-primary rounded-full animate-ping' }), _jsx("div", { className: 'absolute top-2 left-2 w-2 h-2 md:w-3 md:h-3 opacity-40 bg bg-primary rounded-full animate-ping' }), _jsx("div", { className: 'relative top-0 left-0 w-6 h-6 md:w-7 md:h-7 scale-50 bg bg-primary rounded-full ' })] }) }), showInModal ? (_jsx("div", { className: "text-left space-y-1 w-full max-w-2xl", children: _jsx(Accordion, { type: "single", collapsible: true, children: _jsxs(AccordionItem, { value: "wallet-message", children: [_jsxs(AccordionTrigger, { className: "flex justify-between w-full items-center", children: [_jsx("p", { className: "text-md font-semibold self-center text-primary-text", children: header }), _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-primary-text transition-transform duration-200 data-[state=open]:rotate-180" })] }), _jsx(AccordionContent, { children: _jsx("div", { className: "text-left space-y-1", children: _jsx("p", { className: "text-sm text-secondary-text wrap-anywhere whitespace-pre-wrap", children: details }) }) })] }) }) })) : (_jsxs("div", { className: "text-left space-y-1", children: [_jsx("p", { className: "text-md font-semibold self-center text-primary-text", children: header }), _jsx("p", { className: `text-sm text-secondary-text ${details.length > 200 ? "break-words" : ""}`, children: details })] }))] });
+};
+export default WalletMessage;

package/dist/components/Pages/SwapHistory/Header.d.ts

@@ -1,2 +1,4 @@
-declare const Header: () => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ onBackClick }: {
+    onBackClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/components/Pages/SwapHistory/Header.js

@@ -1,17 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import HeaderWithMenu from "../../HeaderWithMenu";
+import { useEffect, useRef, useState } from "react";
+import HeaderWithMenu from "../../../components/HeaderWithMenu";
 import { motion } from "framer-motion";
-const Header = () => {
-    // const router = useAppRouter();
-    const goBack = useCallback(() => {
-        // window?.['navigation']?.['canGoBack'] ?
-        //     router.back()
-        //     : router.push({
-        //         pathname: "/",
-        //         query: resolvePersistantQueryParams(router.query)
-        //     })
-    }, []);
+const Header = ({ onBackClick }) => {
     const [height, setHeight] = useState(0);
     const ref = useRef(null);
     useEffect(() => {
@@ -29,9 +20,9 @@ const Header = () => {
         max-sm:inset-x-0
         max-sm:top-0 
         max-sm:z-30
-        max-sm:bg-secondary-900 
+        max-sm:bg-secondary-700 
         max-sm:shadow-widget-footer 
-        max-sm:w-full`, children: _jsx(HeaderWithMenu, { goBack: goBack }) }), _jsx("div", { style: { height: `${height}px` }, className: `text-primary-text text-base        
+        max-sm:w-full`, children: _jsx(HeaderWithMenu, { goBack: onBackClick }) }), _jsx("div", { style: { height: `${height}px` }, className: `text-primary-text text-base        
           max-sm:inset-x-0
           max-sm:bottom-0 
           max-sm:p-4 max-sm:w-full invisible sm:hidden` })] });

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

@@ -1,136 +1,96 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import LayerSwapApiClient from "../../../lib/layerSwapApiClient";
-import { EmptyApiResponse } from "../../../Models/ApiResponse";
-import { ChevronDown, Plus, RefreshCw } from 'lucide-react';
-import { useCallback, useMemo, useState } from "react";
+import { ChevronUp, Plus, RefreshCw } from 'lucide-react';
+import { useMemo, useState } from "react";
 import HistorySummary from "./HistorySummary";
-import useSWRInfinite from 'swr/infinite';
 import useWallet from "../../../hooks/useWallet";
 import Snippet, { HistoryItemSceleton } from "./Snippet";
-import { groupBy } from "../../utils/groupBy";
-import { useAuthState, UserType } from "../../../context/authContext";
-import { FormWizardProvider } from "../../../context/formWizardProvider";
-import { TimerProvider } from "../../../context/timerContext";
-import GuestCard from "./Guest";
-import { AuthStep } from "../../../Models/Wizard";
+import { groupBy } from "../../../components/utils/groupBy";
+import ConnectButton from "../../../components/Buttons/connectButton";
 import React from "react";
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtualizer } from '../../../lib/virtual';
 import SwapDetails from "./SwapDetailsComponent";
 import { addressFormat } from "../../../lib/address/formatter";
 import { useSettingsState } from "../../../context/settings";
-import VaulDrawer from "../../Modal/vaulModal";
-const PAGE_SIZE = 20;
-const getSwapsKey = () => (index, statuses, addresses) => {
-    const addressesParams = addresses?.map(a => `&addresses=${a}`).join('') || '';
-    const statusesParams = statuses.map(s => `&statuses=${s}`).join('') || '';
-    return `/internal/swaps?page=${index + 1}${statusesParams}${addressesParams}`;
-};
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../components/shadcn/accordion";
+import { useSwapHistoryData } from "../../../hooks/useSwapHistoryData";
 const HistoryList = ({ onNewTransferClick }) => {
     const { networks } = useSettingsState();
-    const [openSwapDetailsModal, setOpenSwapDetailsModal] = useState(false);
     const [showAll, setShowAll] = useState(false);
     const { wallets } = useWallet();
-    const { userId } = useAuthState();
-    const [selectedSwap, setSelectedSwap] = useState(null);
-    const addresses = wallets.map(w => {
+    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);
-    });
-    const handleopenSwapDetails = (swap) => {
-        setSelectedSwap(swap);
-        setOpenSwapDetailsModal(true);
-    };
-    const getKey = useMemo(() => getSwapsKey(), []);
-    const apiClient = new LayerSwapApiClient();
-    const { data: pendingSwapPages, size: pendingSwapsSize, setSize: setPendingSwapsSize, isLoading: pendingSwapsLoading, isValidating: pendingSwapsValidating, mutate: mutatePendingSwaps } = useSWRInfinite((index) => getKey(index, ["PendingDeposit"], addresses), apiClient.fetcher, { revalidateAll: false });
-    const getCompletedSSwapsKey = useCallback((index) => getKey(index, ["Completed", "PendingWithdrawal"], addresses), [addresses]);
-    const { data: userSwapPages, size, setSize, isLoading: userSwapsLoading, isValidating, mutate } = useSWRInfinite(getCompletedSSwapsKey, apiClient.fetcher, { revalidateAll: false, revalidateFirstPage: false, dedupingInterval: 3000 });
-    const handleSWapDetailsShow = (show) => {
-        setOpenSwapDetailsModal(show);
-    };
-    const userSwaps = (!(userSwapPages?.[0] instanceof EmptyApiResponse) && userSwapPages?.map(p => {
-        p.data?.forEach(s => {
-            s.type = 'user';
-        });
-        return p?.data;
-    }).flat(1)) || [];
-    const userSwapsisEmpty = !userSwapsLoading && userSwaps.length === 0;
-    const isReachingEnd = userSwapsisEmpty || (userSwapPages && Number(userSwapPages[userSwapPages.length - 1]?.data?.length) < PAGE_SIZE);
+    }), [wallets, networks]);
+    const { pendingDeposit, completed, isLoadingAny, isValidatingAny } = useSwapHistoryData(addresses);
     const handleLoadMore = async () => {
-        await setSize(size + 1);
+        if (completed.hasMore)
+            await completed.loadMore();
     };
     const handleLoadMorePendingSwaps = async () => {
-        await setPendingSwapsSize(pendingSwapsSize + 1);
+        await pendingDeposit.loadMore();
     };
     const parentRef = React.useRef(null);
-    const grouppedSwaps = Object
-        .entries(groupBy(userSwaps, ({ swap }) => new Date(swap.created_date).toLocaleDateString()))
-        .map(([key, values]) => ({ key, values }));
-    const pendingSwaps = pendingSwapPages?.map(p => p?.data).flat(1) || [];
-    const pendingSwapsisEmpty = !pendingSwapsLoading && pendingSwaps.length === 0;
-    const pendingHaveMorepages = (pendingSwapPages && Number(pendingSwapPages[pendingSwapPages.length - 1]?.data?.length) == PAGE_SIZE);
-    const flattenedSwaps = grouppedSwaps?.flatMap(g => {
+    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];
-    });
-    const list = [...(showAll ? pendingSwaps : (pendingSwaps.slice(0, 1))), ...flattenedSwaps];
+    }), [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 ((userSwapsLoading && !(Number(userSwaps?.length) > 0)))
+    if ((isLoadingAny && !(Number(completed.swaps?.length) > 0)))
         return _jsx(Snippet, {});
-    if (!wallets.length && !userId)
-        return _jsx(ConnectOrSignIn, { onLogin: () => { mutate(); mutatePendingSwaps(); } });
+    if (!wallets.length)
+        return _jsx(ConnectWalletCard, {});
     if (!list.length)
-        return _jsx(BlankHistory, { onNewTransferClick: onNewTransferClick, onLogin: () => { mutate(); mutatePendingSwaps(); } });
-    return (_jsxs("div", { className: "relative", children: [_jsx("div", { ref: parentRef, children: _jsx("div", { style: {
-                        height: rowVirtualizer.getTotalSize(),
+        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%',
-                        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: items.map((virtualRow) => {
+                        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, children: _jsx("div", { className: "w-full pb-1", children: data !== 'Pending' &&
-                                            _jsx("p", { className: "text-sm text-secondary-text font-normal pl-2", children: resolveDate(data) }) }) }, virtualRow.key));
+                                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 collapsablePendingSwap = pendingSwaps.length > 1 && virtualRow.index === 0;
-                            const collapsedPendingSwap = !showAll && collapsablePendingSwap;
-                            return (_jsxs("div", { "data-index": virtualRow.index, ref: rowVirtualizer.measureElement, children: [collapsablePendingSwap &&
-                                        _jsx("div", { className: "w-full flex justify-end pb-2", children: _jsxs("button", { type: "button", onClick: () => setShowAll(!showAll), className: 'flex items-center gap-1 text-xs font-normal text-secondary-text hover:text-primary-text pr-2 ', children: [_jsx("p", { className: "select-none", children: "See all incomplete swaps" }), _jsx(ChevronDown, { className: `${showAll && 'rotate-180'} transition-transform duation-200 w-4 h-4` })] }) }), _jsx("div", { onClick: () => handleopenSwapDetails(swap), children: _jsxs("div", { className: "pb-3", children: [_jsx(HistorySummary, { swapResponse: swap, wallets: wallets }), collapsedPendingSwap &&
-                                                    _jsx("div", { className: "z-0 h-6 -top-4 opacity-65 shadow-lg relative bg-secondary-700 p-3 w-[95%] mx-auto font-normal space-y-3 hover:bg-secondary-600 rounded-xl overflow-hidden cursor-pointer" })] }) }), pendingHaveMorepages && virtualRow.index === pendingSwaps.length - 1 &&
-                                        _jsxs("button", { disabled: pendingSwapsLoading || pendingSwapsValidating, 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 ${(pendingSwapsLoading || pendingSwapsValidating) && 'animate-spin'}` }), _jsx("span", { children: "Load more pending swaps" })] }), virtualRow.index === list.length - 1 && !isReachingEnd &&
-                                        _jsxs("button", { disabled: isReachingEnd || userSwapsLoading || isValidating, type: "button", onClick: handleLoadMore, 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 ${(userSwapsLoading || isValidating) && 'animate-spin'}` }), _jsx("span", { children: "Load more" })] })] }, virtualRow.key));
-                        }) }) }) }), _jsx(VaulDrawer, { show: openSwapDetailsModal, setShow: handleSWapDetailsShow, header: 'Swap details', modalId: "swapDetails", children: selectedSwap &&
-                    _jsx(SwapDetails, { swapResponse: selectedSwap }) })] }));
-};
-const BlankHistory = ({ onNewTransferClick, onLogin }) => {
-    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-muted text-base font-normal mx-auto", children: "Transfers you make with this wallet/account will appear here after excution." })] }), _jsxs("a", { onClick: onNewTransferClick, href: "/", className: "mt-10 flex items-center gap-2 text-base text-secondary-text font-normal bg-secondary-500 hover:bg-secondary-600 py-2 px-3 rounded-lg", children: [_jsx(Plus, { className: "w-4 h-4" }), _jsx("p", { children: "New Transfer" })] })] }), _jsx("div", { className: "w-full", children: _jsx(SignIn, { onLogin: onLogin }) })] });
+                            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", children: [_jsx(RefreshCw, { className: `w-4 h-4 ${(isLoadingAny || isValidatingAny) && 'animate-spin'}` }), _jsx("span", { children: "Load more" })] })] }, virtualRow.key));
+                        }) }) }) }) }) }));
 };
-const ConnectOrSignIn = ({ onLogin }) => {
-    return _jsx("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: "No transactions" }), _jsx("p", { className: "max-w-xs text-center text-primary-text-muted text-base font-normal mx-auto", children: "You do not have any transactions." })] })] }) });
+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 SignIn = ({ onLogin }) => {
-    const { userType } = useAuthState();
-    const [showGuestCard, setShowGuestCard] = useState(false);
-    if (!(userType && userType != UserType.AuthenticatedUser))
-        return null;
-    return _jsx(FormWizardProvider, { initialStep: AuthStep.Email, initialLoading: false, hideMenu: true, noToolBar: true, children: _jsx(TimerProvider, { children: showGuestCard ?
-                _jsx("div", { className: "animate-fade-in", children: _jsx(GuestCard, { onLogin: onLogin }) })
-                :
-                    _jsx("button", { type: "button", onClick: () => setShowGuestCard(true), className: "text-secondary-text w-fit mx-auto flex justify-center mt-2 underline hover:no-underline", children: _jsx("span", { children: "Sign in with your email" }) }) }) });
+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 resolveDate(dateInput) {
+function DaysAgo({ dateInput }) {
     // Get the current date
     const today = new Date();
     // Calculate the difference in time between the input date and today

package/dist/components/Pages/SwapHistory/HistorySummary.d.ts

@@ -1,4 +1,4 @@
-import { SwapResponse } from "../../../lib/layerSwapApiClient";
+import { SwapResponse } from "../../../lib/apiClients/layerSwapApiClient";
 import { FC } from "react";
 import { Wallet } from "../../../Models/WalletProvider";
 type SwapInfoProps = {

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

@@ -1,17 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import useSWR from "swr";
-import LayerSwapApiClient, { TransactionType } from "../../../lib/layerSwapApiClient";
-import { useQueryState } from "../../../context/query";
-import { addressEnding, shortenEmail } from "../../utils/ShortenAddress";
+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 { findIndexOfFirstNonZeroAfterComma, truncateDecimalsToFloor } from "../../utils/RoundDecimals";
-import AddressIcon from "../../Common/AddressIcon";
-import { addressFormat } from "../../../lib/address/formatter";
 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 } = useQueryState();
+    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;
@@ -34,41 +33,7 @@ const HistorySummary = ({ swapResponse, wallets, className }) => {
         sourceAccountAddress = shortenEmail(exchange_account_name, 10);
     }
     const destAddress = (hideAddress && hideTo && account) ? account : destination_address;
-    const source_wallet = sourceAddressFromInput ? wallets.find(w => (addressFormat(w.address, source_network) === addressFormat(sourceAddressFromInput, source_network))) : null;
-    const destination_wallet = wallets.find(w => addressFormat(w.address, destination_network) === addressFormat(destAddress, destination_network));
-    return (source_token && _jsx(_Fragment, { children: _jsxs("div", { className: `${className || ''} bg-secondary-700 z-10 p-3 w-full relative font-normal space-y-3 hover:bg-secondary-600 rounded-xl overflow-hidden cursor-pointer`, children: [_jsxs("div", { className: "grid grid-cols-6 sm:grid-cols-8 gap-3 w-full items-center", children: [source?.display_name !== destination?.display_name ?
-                            _jsxs("div", { className: "col-span-1 h-11 w-11 relative min-w-11", children: [source &&
-                                        _jsx("img", { src: source.logo, alt: source.display_name, width: 28, height: 28, className: "rounded" }), destination &&
-                                        _jsx("img", { src: destination.logo, alt: destination.display_name, width: 28, height: 28, className: "rounded absolute left-4 top-4" })] })
-                            :
-                                _jsx("div", { className: "w-11 h-11 col-span-1", children: source &&
-                                        _jsx("img", { src: source.logo, alt: source.display_name, width: 44, height: 44, className: "rounded-md" }) }), _jsxs("div", { className: "col-span-5 sm:col-span-7 flex flex-col gap-0.5 w-full", children: [_jsxs("div", { className: "flex items-baseline justify-between w-full overflow-hidden", children: [_jsx("p", { className: "text-secondary-text text-sm sm:text-base truncate max-w-[55%]", children: source?.display_name === destination?.display_name ?
-                                                _jsxs(_Fragment, { children: [_jsx("span", { children: "Swap in" }), " ", _jsx("span", { children: source?.display_name })] })
-                                                :
-                                                    _jsxs(_Fragment, { children: [_jsxs("span", { children: [source?.display_name, " "] }), " ", _jsx("span", { children: "to" }), " ", _jsx("span", { children: destination?.display_name })] }) }), _jsxs("p", { className: "font-light text-secondary-text text-xs sm:text-sm ", children: [smartDecimalTruncate(sourceTransaction?.amount || swap.requested_amount, source_token?.price_in_usd), " ", source_token.symbol] })] }), _jsxs("div", { className: "flex w-full justify-between items-start text-end", children: [_jsxs("div", { className: "flex items-center gap-0.5", children: [sourceAccountAddress &&
-                                                    _jsxs("div", { className: "inline-flex items-center gap-0.5 px-1 py-0.5 bg-secondary-950 rounded-md", children: [source_wallet?.icon ?
-                                                                _jsx(source_wallet.icon, { className: "h-3.5 w-3.5" })
-                                                                :
-                                                                    (sourceAddressFromInput && !source_exchange ?
-                                                                        _jsx("div", { className: 'flex bg-secondary-400 text-primary-text  items-center justify-center rounded h-3.5 overflow-hidden w-3.5', children: _jsx(AddressIcon, { className: "scale-150 h-3.5 w-3.5", address: sourceAddressFromInput, size: 14 }) })
-                                                                        :
-                                                                            null), _jsx("p", { className: "text-secondary-text text-xs", children: sourceAccountAddress })] }), addressFormat(destAddress, destination_network) !== (sourceAddressFromInput ? addressFormat(sourceAddressFromInput, source_network) : null) &&
-                                                    _jsxs(_Fragment, { children: [_jsx(ChevronRightIcon, { className: "h-3 w-3" }), _jsxs("div", { className: "inline-flex items-center gap-0.5 px-1 py-0.5 bg-secondary-950 rounded-md", children: [destination_wallet?.icon ?
-                                                                        _jsx(destination_wallet.icon, { className: "h-3.5 w-3.5" })
-                                                                        :
-                                                                            !destination_exchange &&
-                                                                                _jsx("div", { className: 'flex bg-secondary-400 text-primary-text  items-center justify-center rounded h-3.5 overflow-hidden w-3.5', children: _jsx(AddressIcon, { className: "scale-150 h-3.5 w-3.5", address: destAddress, size: 14 }) }), _jsx("p", { className: "text-secondary-text text-xs", children: destination_exchange ? 'Exchange' : addressEnding(destAddress) })] })] })] }), _jsxs("p", { className: "font-medium text-primary-text text-sm sm:text-lg leading-5 sm:leading-5", children: [smartDecimalTruncate(calculatedReceiveAmount, destination_token?.price_in_usd), " ", destination_token.symbol] })] })] })] }), swap.status !== SwapStatus.Completed &&
-                    _jsx(StatusIcon, { swap: swap, withBg: true })] }) }));
-};
-const smartDecimalTruncate = (value, price_in_usd) => {
-    let decimals = findIndexOfFirstNonZeroAfterComma((0.01 / Number(price_in_usd.toFixed()))) || 0;
-    let truncatedAmount = truncateDecimalsToFloor(value, decimals);
-    if (truncatedAmount === 0) {
-        while (truncatedAmount === 0) {
-            decimals += 1;
-            truncatedAmount = truncateDecimalsToFloor(value, decimals);
-        }
-    }
-    return truncateDecimalsToFloor(value, decimals);
+    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 }) }), _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 }) }), _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/components/Pages/SwapHistory/Snippet.js

@@ -1,8 +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-none 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-900 pt-[90%] sm:pt-[30%] lg:pt-[80%]" }) })] });
+    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" }), _jsx("p", { className: "w-28 sm:w-32 h-3 border border-secondary-400 bg-secondary-500 rounded" })] })] }), _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" }), _jsx("p", { className: "w-20 sm:w-28 h-3 border border-secondary-400 bg-secondary-500 rounded" })] })] }) }) }) });
+    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/components/Pages/SwapHistory/StatusIcons.d.ts

@@ -1,4 +1,4 @@
-import { SwapItem } from "../../../lib/layerSwapApiClient";
+import { SwapItem } from "../../../lib/apiClients/layerSwapApiClient";
 export default function StatusIcon({ swap, withBg, short }: {
     swap: SwapItem;
     withBg?: boolean;

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { SwapStatus } from "../../../Models/SwapStatus";
-import { TransactionType } from "../../../lib/layerSwapApiClient";
+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) {
@@ -27,28 +28,32 @@ export default function StatusIcon({ swap, withBg, short }) {
             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-2 font-bold ${classNames} ${withBg ? 'py-1 w-full justify-center rounded-lg' : '!bg-transparent'}`, children: children }));
+    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-[#54b487]", 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: "#54b487" }) }), !short && _jsx("p", { children: text })] }));
+    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/30 text-primary-500", 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 })] }));
+    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-muted bg-secondary-900", 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-muted", children: _jsx("circle", { cx: "30", cy: "30", r: "30", fill: "currentColor" }) })
+    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-yellow-950/40 text-yellow-600", 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", { children: text })] }));
+    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", 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 })] }));
+    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/components/Pages/SwapHistory/SwapDetailsComponent.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { SwapResponse } from '../../../lib/layerSwapApiClient';
+import { SwapResponse } from '../../../lib/apiClients/layerSwapApiClient';
 type Props = {
     swapResponse: SwapResponse;
 };