@layerswap/widget 1.2.1 → 1.2.2

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

@@ -2,13 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { SwapStatus } from "../../Models/SwapStatus";
 import { TransactionType } from "../../lib/apiClients/layerSwapApiClient";
+import { useSwapTransactionStore } from "../../stores/swapTransactionStore";
 const CountdownTimer = ({ initialTime, swapDetails, onThresholdChange }) => {
+    const { swapTransactions } = useSwapTransactionStore();
     const [elapsedTimer, setElapsedTimer] = useState(0);
     const [thresholdElapsed, setThresholdElapsed] = useState(false);
     const swapInputTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Input);
+    const storedWalletTransaction = swapTransactions?.[swapDetails?.id];
     useEffect(() => {
         // Start timer immediately when component renders
-        const startTime = swapInputTransaction?.timestamp ? new Date(swapInputTransaction.timestamp).getTime() : Date.now();
+        const startTime = swapInputTransaction?.timestamp ? new Date(swapInputTransaction.timestamp).getTime() : storedWalletTransaction?.timestamp ? new Date(storedWalletTransaction.timestamp).getTime() : Date.now();
         const timer = setInterval(() => {
             const currentTime = new Date();
             const elapsedTime = currentTime.getTime() - startTime;

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useCallback, useEffect, useState } from "react";
 import LogoPlaceholder from "../Icons/LogoPlaceholder";
 export const ImageWithFallback = forwardRef(({ src, ...props }, ref) => {
     const [imgSrc, setImgSrc] = useState(src);
@@ -9,9 +9,9 @@ export const ImageWithFallback = forwardRef(({ src, ...props }, ref) => {
         setImgSrc(src);
         setHasError(false);
     }, [src]);
-    const handleError = () => {
+    const handleError = useCallback(() => {
         setHasError(true);
-    };
+    }, [setHasError]);
     if (hasError) {
         return _jsx(LogoPlaceholder, { ...props });
     }

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

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

package/dist/esm/components/Input/Amount/MinMax.js

@@ -21,15 +21,18 @@ const MinMax = (props) => {
     const gasAmount = gasData?.gas || 0;
     const native_currency = gasData?.token || from?.token;
     const shouldPayGasWithTheToken = (native_currency?.symbol === fromCurrency?.symbol) || !native_currency;
+    const fallbackAmount = useMemo(() => {
+        return fromCurrency.price_in_usd > 0 ? 0.01 / fromCurrency.price_in_usd : 0.01;
+    }, [fromCurrency.price_in_usd]);
     let maxAllowedAmount = useMemo(() => {
-        return resolveMaxAllowedAmount({ fromCurrency, limitsMaxAmount, walletBalance, gasAmount, native_currency, depositMethod }) || 0;
-    }, [fromCurrency, limitsMinAmount, limitsMaxAmount, walletBalance, gasAmount, native_currency, depositMethod]);
+        return resolveMaxAllowedAmount({ fromCurrency, limitsMaxAmount, walletBalance, gasAmount, native_currency, depositMethod, fallbackAmount }) || 0;
+    }, [fromCurrency, limitsMinAmount, limitsMaxAmount, walletBalance, gasAmount, native_currency, depositMethod, fallbackAmount]);
     const minAmount = useMemo(() => {
         if (walletBalance && walletBalance.amount !== undefined && limitsMinAmount !== undefined) {
             return Number(walletBalance.amount) < limitsMinAmount ? Number(walletBalance.amount) : limitsMinAmount;
         }
-        return limitsMinAmount || (fromCurrency.price_in_usd > 0 ? 0.01 / fromCurrency.price_in_usd : 0.01);
-    }, [walletBalance, limitsMinAmount, fromCurrency.price_in_usd]);
+        return limitsMinAmount || fallbackAmount;
+    }, [walletBalance, limitsMinAmount, fallbackAmount]);
     const halfOfBalance = (walletBalance?.amount || maxAllowedAmount) ? (walletBalance?.amount || maxAllowedAmount) / 2 : 0;
     const handleSetValue = (value) => {
         mutateBalances();

package/dist/esm/components/Input/Amount/ReceiveAmount.js

@@ -2,13 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import NumberFlow from "@number-flow/react";
 import clsx from "clsx";
 import { PriceImpact } from "./PriceImpact";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
 export const ReceiveAmount = ({ destination_token, fee, isFeeLoading }) => {
     const receive_amount = fee?.quote.receive_amount;
     const receiveAmountInUsd = receive_amount && destination_token && fee.quote?.destination_token?.price_in_usd ? (receive_amount * fee.quote.destination_token.price_in_usd).toFixed(2) : undefined;
     const quote = fee?.quote;
-    const fullAmountText = receive_amount && destination_token
-        ? `${receive_amount} ${destination_token.symbol}`
-        : undefined;
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex-col w-full flex min-w-0 font-normal border-0 text-[28px] leading-7 text-primary-text relative truncate", children: [_jsx("div", { className: "w-full flex items-center justify-start relative", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: clsx("w-full flex items-center py-[3px]", { "animate-pulse-stronger": isFeeLoading }, { "text-secondary-text": !receive_amount }), children: _jsx(NumberFlow, { value: receive_amount || 0, trend: 0, format: { maximumFractionDigits: fee?.quote.destination_token?.decimals || 2 } }) }) }), fullAmountText && (_jsx(TooltipContent, { className: "bg-secondary-300! border-secondary-300! text-primary-text!", children: _jsx("p", { children: fullAmountText }) }))] }) }), _jsxs("div", { className: "flex items-baseline space-x-2 h-5", children: [_jsx("span", { className: "text-base leading-5 font-medium text-secondary-text h-5", children: _jsx(NumberFlow, { className: "p-0", value: Number(receiveAmountInUsd || 0), prefix: "$", format: { maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }), _jsx(PriceImpact, { className: "h-5 text-base leading-5", quote: quote, refuel: fee?.refuel })] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex-col w-full flex min-w-0 font-normal border-0 text-[28px] leading-7 text-primary-text relative truncate", children: [_jsx("div", { className: "w-full flex items-center justify-start relative", children: _jsx("div", { className: clsx("w-full flex items-center py-[3px] pr-3", { "animate-pulse-stronger": isFeeLoading }, { "text-secondary-text": !receive_amount }), children: _jsx(NumberFlow, { value: receive_amount || 0, trend: 0, format: { maximumFractionDigits: fee?.quote.destination_token?.decimals || 2 } }) }) }), _jsxs("div", { className: "flex items-baseline space-x-2 h-5", children: [_jsx("span", { className: "text-base leading-5 font-medium text-secondary-text h-5", children: _jsx(NumberFlow, { className: "p-0", value: Number(receiveAmountInUsd || 0), prefix: "$", format: { maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }), _jsx(PriceImpact, { className: "h-5 text-base leading-5", quote: quote, refuel: fee?.refuel })] })] }) }));
 };

package/dist/esm/components/Input/Amount/helpers.js

@@ -1,10 +1,11 @@
 export const resolveMaxAllowedAmount = (props) => {
-    const { limitsMaxAmount, walletBalance, gasAmount, fromCurrency, native_currency, depositMethod } = props;
+    const { limitsMaxAmount, walletBalance, gasAmount, fromCurrency, native_currency, depositMethod, fallbackAmount } = props;
     if (!walletBalance || isNaN(Number(walletBalance.amount)) || depositMethod !== 'wallet')
         return limitsMaxAmount;
     const shouldPayGasWithTheToken = Number(walletBalance.amount) > 0 && (native_currency?.symbol === fromCurrency?.symbol) || !native_currency;
     const payableAmount = Number(walletBalance.amount) - gasAmount;
     if (!shouldPayGasWithTheToken)
         return isNaN(Number(walletBalance.amount)) ? 0 : Number(walletBalance.amount);
-    return Number(Number(payableAmount).toFixed(fromCurrency?.decimals));
+    const res = Number(Number(payableAmount).toFixed(fromCurrency?.decimals));
+    return res <= 0 ? fallbackAmount : res;
 };

package/dist/esm/components/Input/Amount/index.js

@@ -38,7 +38,7 @@ const AmountField = forwardRef(function AmountField({ usdPosition = "bottom", ac
     const disabled = Boolean(fromExchange && !toCurrency);
     return (_jsx(_Fragment, { children: _jsxs("div", { className: clsx("flex flex-col bg-secondary-500 space-y-0.5 relative w-full group", className, {
                 'focus-within:[&_.usd-suffix]:invisible': usdPosition === "right"
-            }), children: [_jsx(NumericInput, { disabled: disabled, placeholder: placeholder, step: isNaN(step) ? 0.01 : step, name: name, ref: amountRef, precision: fromCurrency?.precision, tempValue: actionValue, tokenSymbol: fromCurrency?.symbol, className: "w-full text-[28px] leading-[34px] rounded-xl text-primary-text focus:outline-none focus:border-none focus:ring-0 duration-300 ease-in-out bg-secondary-500! font-normal! group-[.exchange-amount-field]:text-xl group-[.exchange-amount-field]:px-2.5 group-[.exchange-amount-field]:pb-2 group-[.exchange-amount-field]:pr-2 group-[.exchange-amount-field]:bg-secondary-300! px-0 truncate", onChange: e => {
+            }), children: [_jsx(NumericInput, { disabled: disabled, placeholder: placeholder, step: isNaN(step) ? 0.01 : step, name: name, ref: amountRef, precision: fromCurrency?.precision, tempValue: actionValue, className: "w-full text-[28px] leading-[34px] rounded-xl text-primary-text focus:outline-none focus:border-none focus:ring-0 duration-300 ease-in-out bg-secondary-500! font-normal! group-[.exchange-amount-field]:text-xl group-[.exchange-amount-field]:px-2.5 group-[.exchange-amount-field]:pb-2 group-[.exchange-amount-field]:pr-2 group-[.exchange-amount-field]:bg-secondary-300! px-0 truncate", onChange: e => {
                         /^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && handleChange(e);
                     } }), _jsx("div", { className: clsx("usd-suffix text-base group-[.exchange-amount-field]:text-sm leading-5 font-medium text-secondary-text pointer-events-none", {
                         "absolute bottom-[11px]": usdPosition === "right",

package/dist/esm/components/Input/NumericInput.js

@@ -3,9 +3,8 @@ import { useField, useFormikContext } from "formik";
 import { forwardRef } from "react";
 import { classNames } from '../utils/classNames';
 import { isScientific } from "../utils/RoundDecimals";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/shadcn/tooltip";
 // Use with Formik
-const NumericInput = forwardRef(function NumericInput({ label, disabled, tempValue, placeholder, minLength, maxLength, precision, step, name, className, children, onChange, onFocus, onBlur, tokenSymbol }, ref) {
+const NumericInput = forwardRef(function NumericInput({ label, disabled, tempValue, placeholder, minLength, maxLength, precision, step, name, className, children, onChange, onFocus, onBlur }, ref) {
     const { handleChange } = useFormikContext();
     const [field] = useField(name);
     const formattedTempValue = Number(tempValue) >= 0 ? isScientific(tempValue)
@@ -14,16 +13,12 @@ const NumericInput = forwardRef(function NumericInput({ label, disabled, tempVal
             : '')
         : tempValue?.toString()
         : '';
-    const displayValue = !isNaN(Number(tempValue)) ? formattedTempValue : field.value;
-    const fullTooltipText = displayValue && Number(displayValue) > 0
-        ? `${displayValue}${tokenSymbol ? ` ${tokenSymbol}` : ''}`
-        : undefined;
     return _jsxs("div", { children: [label &&
-                _jsx("label", { htmlFor: name, className: "block font-semibold text-secondary-text text-sm mb-1.5 w-full", children: label }), _jsxs(Tooltip, { disableHoverableContent: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex relative w-full", children: [!isNaN(Number(tempValue)) &&
-                                    _jsx("span", { className: classNames('py-2 flex text-secondary-text/45 items-center h-12 leading-4 bg-secondary-700 min-w-0 rounded-lg font-semibold border-0 ', className), ref: ref, children: _jsx("span", { children: formattedTempValue }) }), isNaN(Number(tempValue)) &&
-                                    _jsx("input", { ...field, inputMode: "decimal", autoComplete: "off", disabled: disabled, placeholder: placeholder, autoCorrect: "off", minLength: minLength, maxLength: maxLength, onInput: (event) => { replaceComma(event); limitDecimalPlaces(event, precision); }, onFocus: onFocus, onBlur: onBlur, type: "text", step: step, name: name, id: name, ref: ref, className: classNames('disabled:cursor-not-allowed h-12 leading-4 border-secondary-500 placeholder:text-secondary-text bg-secondary-700 focus:ring-primary focus:border-primary block min-w-0 rounded-lg font-semibold border-0', className), onChange: onChange ? onChange : e => {
-                                            /^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && handleChange(e);
-                                        } }), _jsx(_Fragment, { children: children })] }) }), _jsx(TooltipContent, { className: "bg-secondary-300! border-secondary-300! text-primary-text!", children: _jsx("p", { children: fullTooltipText }) })] })] });
+                _jsx("label", { htmlFor: name, className: "block font-semibold text-secondary-text text-sm mb-1.5 w-full", children: label }), _jsxs("div", { className: "flex relative w-full", children: [!isNaN(Number(tempValue)) &&
+                        _jsx("span", { className: classNames('py-2 flex text-secondary-text/45 items-center h-12 leading-4 bg-secondary-700 min-w-0 rounded-lg font-semibold border-0 ', className), ref: ref, children: _jsx("span", { children: formattedTempValue }) }), isNaN(Number(tempValue)) &&
+                        _jsx("input", { ...field, inputMode: "decimal", autoComplete: "off", disabled: disabled, placeholder: placeholder, autoCorrect: "off", minLength: minLength, maxLength: maxLength, onInput: (event) => { replaceComma(event); limitDecimalPlaces(event, precision); }, onFocus: onFocus, onBlur: onBlur, type: "text", step: step, name: name, id: name, ref: ref, className: classNames('disabled:cursor-not-allowed h-12 leading-4 border-secondary-500 placeholder:text-secondary-text bg-secondary-700 focus:ring-primary focus:border-primary block min-w-0 rounded-lg font-semibold border-0', className), onChange: onChange ? onChange : e => {
+                                /^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && handleChange(e);
+                            } }), _jsx(_Fragment, { children: children })] })] });
 });
 function limitDecimalPlaces(e, count) {
     if (e.target.value.indexOf('.') == -1) {

package/dist/esm/components/Menu/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MenuIcon, ChevronLeft } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import IconButton from "../Buttons/iconButton";
 import { FormWizardProvider, useFormWizardaUpdate, useFormWizardState } from "../../context/formWizardProvider";
 import { MenuStep } from "../../Models/Wizard";
@@ -35,8 +35,14 @@ const Comp = () => {
             onMenuNavigationChange(path);
         }
     };
+    useEffect(() => {
+        if (isOpen) {
+            goToStep(MenuStep.Menu);
+            onMenuNavigationChange("/");
+        }
+    }, [isOpen, onMenuNavigationChange]);
     return _jsx(_Fragment, { children: _jsxs("div", { className: "text-secondary-text cursor-pointer relative", children: [_jsx("div", { className: "sm:-mr-2 mr-0", children: _jsx(IconButton, { className: "inline-flex active:animate-press-down", onClick: () => setIsOpen(true), icon: _jsx(MenuIcon, { strokeWidth: "2" }) }) }), _jsx(Modal, { isOpen: isOpen, setIsOpen: handleModalOpenStateChange, children: _jsx(ModalContent, { className: "pb-4", header: _jsxs("div", { className: "inline-flex items-center w-full", children: [goBack &&
-                                    _jsx("div", { className: "-ml-2", children: _jsx(IconButton, { className: "inline-flex", onClick: goBack, icon: _jsx(ChevronLeft, { strokeWidth: "2" }) }) }), _jsx("h2", { className: "flex-1", children: currentStepName })] }), children: ({ closeModal }) => (_jsx("div", { className: "openpicker h-full", id: "virtualListContainer", children: _jsxs(Wizard, { wizardId: 'menuWizard', children: [_jsx(WizardItem, { StepName: MenuStep.Menu, inModal: true, children: _jsx(MenuList, { goToStep: handleGoToStep }) }), _jsx(WizardItem, { StepName: MenuStep.Transactions, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(HistoryList, { onNewTransferClick: closeModal }) }), _jsx(WizardItem, { StepName: MenuStep.Campaigns, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(CampaignsComponent, { onCampaignSelect: (campaign) => { handleGoToStep(MenuStep.CampaignDetails); setSelectedCampaign(campaign.name); } }) }), _jsx(WizardItem, { StepName: MenuStep.CampaignDetails, GoBack: () => { goToStep(MenuStep.Campaigns, "back"); onMenuNavigationChange("/campaigns"); }, className: "h-full", inModal: true, children: _jsx(CampaignDetailsComponent, { campaignName: selectedCampaign }) })] }) })) }) })] }) });
+                                    _jsx("div", { className: "-ml-2", children: _jsx(IconButton, { className: "inline-flex", onClick: goBack, icon: _jsx(ChevronLeft, { strokeWidth: "2" }) }) }), _jsx("h2", { className: "flex-1", children: currentStepName })] }), children: ({ closeModal }) => (_jsx("div", { className: "openpicker h-full", id: "virtualListContainer", children: _jsxs(Wizard, { wizardId: 'menuWizard', children: [_jsx(WizardItem, { StepName: MenuStep.Menu, inModal: true, children: _jsx(MenuList, { goToStep: handleGoToStep }) }), _jsx(WizardItem, { StepName: MenuStep.Transactions, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(HistoryList, { onNewTransferClick: () => { closeModal(); onMenuNavigationChange("/"); } }) }), _jsx(WizardItem, { StepName: MenuStep.Campaigns, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(CampaignsComponent, { onCampaignSelect: (campaign) => { handleGoToStep(MenuStep.CampaignDetails); setSelectedCampaign(campaign.name); } }) }), _jsx(WizardItem, { StepName: MenuStep.CampaignDetails, GoBack: () => { goToStep(MenuStep.Campaigns, "back"); onMenuNavigationChange("/campaigns"); }, className: "h-full", inModal: true, children: _jsx(CampaignDetailsComponent, { campaignName: selectedCampaign }) })] }) })) }) })] }) });
 };
 const LayerswapMenu = () => {
     return (_jsx(FormWizardProvider, { noToolBar: true, hideMenu: true, initialStep: MenuStep.Menu, children: _jsx(Comp, {}) }));

package/dist/esm/components/Pages/Swap/Withdraw/index.js

@@ -18,6 +18,6 @@ const Comp = () => {
                     _jsx(NotFound, { swapId: swapId }) }) });
     return (_jsx(SwapDetails, { type: "widget" }));
 };
-export const SwapWithdrawal = () => {
-    return (_jsx(SwapDataProvider, { children: _jsx(Comp, {}) }));
+export const SwapWithdrawal = ({ initialSwapData }) => {
+    return (_jsx(SwapDataProvider, { initialSwapData: initialSwapData, children: _jsx(Comp, {}) }));
 };

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

@@ -1,7 +1,7 @@
 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 shortenAddress from '../../../components/utils/ShortenAddress';
 import CopyButton from '../../../components/Buttons/copyButton';
 import StatusIcon from './StatusIcons';
 import { ExternalLink } from 'lucide-react';
@@ -19,7 +19,6 @@ 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);
@@ -66,19 +65,6 @@ const SwapDetails = ({ swapResponse }) => {
     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' })] })
                                                     :
@@ -99,6 +85,6 @@ const SwapDetails = ({ swapResponse }) => {
                                                                 :
                                                                     _jsx("span", { children: "-" })] }) })] }) }) }), swap.status === SwapStatus.Completed &&
                             _jsx(SecondaryButton, { type: 'button', size: 'xl', onClick: handleRepeatSwap, isLoading: isRepeatLoading, children: _jsx("p", { className: 'text-primary-text', 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" }) })] }) })] }));
+                            _jsx(SubmitButton, { type: 'button', onClick: handleViewCompleteSwap, children: _jsx("p", { children: swap.status == SwapStatus.LsTransferPending || swapInputTransaction ? "View Swap" : "Complete Swap" }) })] }) })] }));
 };
 export default SwapDetails;

package/dist/esm/components/Widget/Index.js

@@ -12,7 +12,7 @@ const Widget = ({ children, hideMenu, goBack, contextualMenu }) => {
     const { isEmbedded } = useSettingsState();
     return _jsxs("div", { className: "relative p-px h-full", children: [AppSettings.ThemeData?.enableWideVersion && !isEmbedded &&
                 _jsx("div", { className: "invisible sm:visible absolute inset-0 rounded-[25px] bg-linear-to-t from-secondary-800 to-secondary-300 pointer-events-none" }), _jsxs("div", { id: "widget", style: AppSettings.ThemeData?.cardBackgroundStyle, className: clsx("sm:pb-4 rounded-3xl w-full overflow-hidden relative bg-secondary-700 h-full flex flex-col has-expandContainerHeight:min-h-[650px]", {
-                    "max-sm:has-openpicker:min-h-svh max-sm:min-h-[99.8svh] sm:has-openpicker:min-h-[79svh]": AppSettings.ThemeData?.enableWideVersion,
+                    "max-sm:has-openpicker:min-h-svh max-sm:min-h-[99.8svh] sm:has-openpicker:min-h-[79svh]!": AppSettings.ThemeData?.enableWideVersion,
                     "max-sm:min-h-[99svh]!": isEmbedded,
                     "has-openpicker:min-h-[675px]": !AppSettings.ThemeData?.enableWideVersion
                 }), children: [AppSettings.ApiVersion === 'testnet' &&

package/dist/esm/context/swap.js

@@ -30,7 +30,7 @@ export const SwapDataStateContext = createContext({
     setSwapError: (value) => { }
 });
 export const SwapDataUpdateContext = createContext(null);
-export function SwapDataProvider({ children }) {
+export function SwapDataProvider({ children, initialSwapData }) {
     const { sourceRoutes, destinationRoutes } = useSettingsState();
     const initialSettings = useInitialSettings();
     const { onSwapCreate } = useCallbacks();
@@ -67,7 +67,7 @@ export function SwapDataProvider({ children }) {
     const layerswapApiClient = new LayerSwapApiClient();
     const swap_details_endpoint = `/swaps/${swapId}?exclude_deposit_actions=true`;
     const [interval, setInterval] = useState(0);
-    const { data, mutate, error } = useSWR(swapId ? swap_details_endpoint : null, layerswapApiClient.fetcher, { refreshInterval: interval, dedupingInterval: interval || 1000 });
+    const { data, mutate, error } = useSWR(swapId ? swap_details_endpoint : null, layerswapApiClient.fetcher, { refreshInterval: interval, dedupingInterval: interval || 1000, fallbackData: initialSwapData ? { data: initialSwapData } : undefined });
     const swapBasicData = useMemo(() => {
         if (swapId && data?.data) {
             return data?.data?.swap ? {

package/dist/esm/hooks/useConnectors.js

@@ -10,7 +10,7 @@ export function useConnectors({ featuredProviders, filteredProviders, searchValu
         .filter(g => g.availableHiddenWalletsForConnect && g.availableHiddenWalletsForConnect?.length > 0)
         .map((provider) => provider.availableHiddenWalletsForConnect
         ?.filter(v => (searchValue ? v.name.toLowerCase().includes(searchValue.toLowerCase()) : true) &&
-        !featuredWalletsIds.includes(v.id.toLowerCase()))
+        !featuredConnectors.some(c => c.id.toLowerCase() === v.id.toLowerCase()))
         .map((connector) => ({ ...connector, providerName: provider.name, isHidden: true })))
         .flat(), [featuredProviders, searchValue]);
     const initialConnectors = useMemo(() => {
@@ -25,13 +25,6 @@ export function useConnectors({ featuredProviders, filteredProviders, searchValu
         filteredProviders,
     };
 }
-const featuredWalletsIds = [
-    'metamask',
-    'argent',
-    'rainbow',
-    'bitkeep',
-    'okx-wallet',
-];
 function removeDuplicatesWithKey(arr, key) {
     const countMap = {};
     const providerMap = {};

package/dist/esm/hooks/useSwapHistoryData.js

@@ -1,8 +1,14 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useSwrSwaps } from './useSwrSwaps';
+import LayerSwapApiClient from '../lib/apiClients/layerSwapApiClient';
 import { SwapStatus } from '../Models/SwapStatus';
+import { useSwapTransactionStore } from '../stores/swapTransactionStore';
 export function useSwapHistoryData(addresses) {
     const [revalidateAll, setRevalidateAll] = useState(false);
+    const [localStorageSwaps, setLocalStorageSwaps] = useState([]);
+    const [isLoadingLocalSwaps, setIsLoadingLocalSwaps] = useState(false);
+    const { swapTransactions } = useSwapTransactionStore();
+    const fetchedIdsRef = useRef(new Set());
     const pendingDeposit = useSwrSwaps({
         statuses: ['PendingDeposit'],
         addresses,
@@ -28,10 +34,97 @@ export function useSwapHistoryData(addresses) {
         revalidateAll,
         revalidateFirstPage: true,
     });
+    // Stable key for swapTransactions (only include non-completed swaps from the last 30 minutes)
+    const storeSwapIds = useMemo(() => {
+        const thirtyMinutesAgo = Date.now() - 30 * 60 * 1000;
+        return Object.entries(swapTransactions || {})
+            .filter(([, tx]) => tx.timestamp >= thirtyMinutesAgo)
+            .map(([id]) => id)
+            .sort()
+            .join(',');
+    }, [swapTransactions]);
+    // Fetch swaps from store that are not in the backend results
+    useEffect(() => {
+        const fetchLocalStorageSwaps = async () => {
+            try {
+                const localSwapIds = storeSwapIds ? storeSwapIds.split(',').filter(Boolean) : [];
+                if (localSwapIds.length === 0) {
+                    // Clear fetched IDs when local storage is empty
+                    fetchedIdsRef.current.clear();
+                    setLocalStorageSwaps([]);
+                    return;
+                }
+                // Get all swap IDs from backend results
+                const backendSwapIds = new Set([
+                    ...pendingDeposit.swaps.map(s => s.swap.id),
+                    ...completed.swaps.map(s => s.swap.id)
+                ]);
+                // Clean up fetchedIdsRef - remove IDs that are no longer in local storage
+                const localSwapIdSet = new Set(localSwapIds);
+                for (const id of Array.from(fetchedIdsRef.current)) {
+                    if (!localSwapIdSet.has(id)) {
+                        fetchedIdsRef.current.delete(id);
+                    }
+                }
+                // Find swap IDs that exist in store but not in backend results and not already fetched
+                const missingSwapIds = localSwapIds.filter(id => !backendSwapIds.has(id) && !fetchedIdsRef.current.has(id));
+                if (missingSwapIds.length === 0) {
+                    return;
+                }
+                setIsLoadingLocalSwaps(true);
+                const apiClient = new LayerSwapApiClient();
+                // Mark as fetched to prevent re-fetching
+                missingSwapIds.forEach(id => fetchedIdsRef.current.add(id));
+                // Fetch missing swaps from backend
+                const fetchedSwaps = await Promise.all(missingSwapIds.map(async (swapId) => {
+                    try {
+                        const response = await apiClient.GetSwapAsync(swapId);
+                        return response?.data || null;
+                    }
+                    catch {
+                        return null;
+                    }
+                }));
+                setLocalStorageSwaps(prev => {
+                    const existingIds = new Set(prev.map(s => s.swap.id));
+                    const newSwaps = fetchedSwaps.filter((s) => s !== null && !existingIds.has(s.swap.id));
+                    return [...prev, ...newSwaps];
+                });
+            }
+            catch (error) {
+                console.error('Error fetching localStorage swaps:', error);
+            }
+            finally {
+                setIsLoadingLocalSwaps(false);
+            }
+        };
+        // Only fetch once backend data is loaded
+        if (!pendingDeposit.isLoading && !completed.isLoading) {
+            fetchLocalStorageSwaps();
+        }
+    }, [storeSwapIds, pendingDeposit.isLoading, completed.isLoading, pendingDeposit.swaps, completed.swaps]);
+    // Merge localStorage swaps with completed swaps
+    const mergedCompleted = useMemo(() => {
+        const allCompletedSwaps = [...completed.swaps];
+        // Add localStorage swaps that aren't already in the list
+        const completedIds = new Set(allCompletedSwaps.map(s => s.swap.id));
+        const pendingIds = new Set(pendingDeposit.swaps.map(s => s.swap.id));
+        for (const swap of localStorageSwaps) {
+            if (!completedIds.has(swap.swap.id) && !pendingIds.has(swap.swap.id)) {
+                allCompletedSwaps.push(swap);
+            }
+        }
+        // Sort by created_date descending
+        allCompletedSwaps.sort((a, b) => new Date(b.swap.created_date).getTime() - new Date(a.swap.created_date).getTime());
+        return {
+            ...completed,
+            swaps: allCompletedSwaps,
+        };
+    }, [completed, localStorageSwaps, pendingDeposit.swaps]);
     return {
         pendingDeposit,
-        completed,
-        isLoadingAny: pendingDeposit.isLoading || completed.isLoading,
+        completed: mergedCompleted,
+        isLoadingAny: pendingDeposit.isLoading || completed.isLoading || isLoadingLocalSwaps,
         isValidatingAny: pendingDeposit.isValidating || completed.isValidating,
     };
 }