@layerswap/widget 1.0.4 → 1.0.5

package/dist/esm/Models/Theme.js

@@ -1,6 +1,5 @@
 export const THEME_COLORS = {
     "imxMarketplace": {
-        backdrop: "0, 121, 133",
         buttonTextColor: '255, 255, 255',
         tertiary: '140, 152, 192',
         logo: '255, 255, 255',
@@ -65,7 +64,6 @@ export const THEME_COLORS = {
         },
     },
     "default": {
-        backdrop: "62, 18, 64",
         tertiary: '118, 128, 147',
         buttonTextColor: '228, 229, 240',
         logo: '255, 0, 147',
@@ -110,6 +108,50 @@ export const THEME_COLORS = {
             'text': '163, 173, 194',
         },
     },
+    "halloween": {
+        tertiary: "110, 80, 140",
+        buttonTextColor: "255, 240, 200",
+        logo: '255, 0, 147',
+        footerLogo: "none",
+        warning: {
+            Foreground: "255, 180, 70",
+            Background: "45, 30, 10",
+        },
+        error: {
+            Foreground: "255, 90, 90",
+            Background: "40, 15, 15",
+        },
+        success: {
+            Foreground: "150, 255, 180",
+            Background: "20, 40, 25",
+        },
+        primary: {
+            DEFAULT: "230, 80, 25",
+            "100": "255, 180, 120",
+            "200": "255, 150, 70",
+            "300": "255, 120, 50",
+            "400": "255, 100, 30",
+            "500": "230, 80, 25",
+            "600": "190, 60, 20",
+            "700": "150, 45, 15",
+            "800": "100, 30, 10",
+            "900": "50, 15, 5",
+            "text": "255, 240, 200",
+        },
+        secondary: {
+            DEFAULT: "35, 25, 60",
+            "100": "90, 75, 130",
+            "200": "75, 60, 120",
+            "300": "60, 50, 110",
+            "400": "50, 40, 90",
+            "500": "40, 30, 75",
+            "600": "30, 25, 65",
+            "700": "25, 20, 55",
+            "800": "18, 15, 45",
+            "900": "12, 10, 35",
+            "text": "220, 210, 250",
+        },
+    },
     "ton": {
         tertiary: '134, 134, 134',
         buttonTextColor: '15, 15, 15',

package/dist/esm/components/Buttons/secondaryButton.js

@@ -4,7 +4,7 @@ import SpinIcon from "../Icons/spinIcon";
 const SecondaryButton = (props) => {
     const { className, isLoading, children, ...buttonProps } = props;
     const size = props.size || 'md';
-    return (_jsxs("button", { ...buttonProps, type: "button", disabled: props.disabled || isLoading, className: clsx('rounded-md duration-200 break-keep transition bg-secondary-500 hover:bg-secondary-400 border border-secondary-400 hover:border-secondary-200 font-semibold text-primary-buttonTextColor shadow-xs cursor-pointer disabled:bg-secondary-300 disabled:text-secondary-text/50 disabled:cursor-not-allowed relative flex items-center justify-center space-x-2', className, {
+    return (_jsxs("button", { ...buttonProps, type: "button", disabled: props.disabled || isLoading, className: clsx('rounded-md duration-200 break-keep transition bg-secondary-500 hover:bg-secondary-400 border border-secondary-400 hover:border-secondary-200 font-semibold text-primary-text shadow-xs cursor-pointer disabled:bg-secondary-300 disabled:text-secondary-text/50 disabled:cursor-not-allowed relative flex items-center justify-center space-x-2', className, {
             'px-2 py-1 text-xs': size === 'xs',
             'px-2 py-1 text-sm': size === 'sm',
             'px-2.5 py-1.5 text-sm': size === 'md',

package/dist/esm/components/ColorSchema.js

@@ -57,7 +57,6 @@ const ColorSchema = ({ themeData }) => {
                     --ls-border-radius-full: 9999px;
                     --ls-border-radius-default: ${adjustBorderRadius('small', mergedTheme.borderRadius)};
 
-                    --ls-colors-backdrop: ${mergedTheme.backdrop};
                     --ls-colors-logo: ${mergedTheme.logo};
                     --ls-colors-primary: ${mergedTheme.primary?.DEFAULT};
                     --ls-colors-primary-100: ${mergedTheme.primary?.[100]};

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

@@ -10,12 +10,12 @@ const Balance = ({ values, direction }) => {
     const token = direction === 'from' ? fromCurrency : toCurrency;
     const network = direction === 'from' ? from : to;
     const address = direction === 'from' ? selectedSourceAccount?.address : destination_address;
-    const { balances, isLoading } = useBalance(address, network, { refreshInterval: 20000 });
+    const { balances, isLoading } = useBalance(address, network, { refreshInterval: 20000, dedupeInterval: 20000 });
     const tokenBalance = balances?.find(b => b?.network === network?.name && b?.token === token?.symbol);
     const truncatedBalance = tokenBalance?.amount !== undefined ? truncateDecimals(tokenBalance?.amount, token?.precision) : '';
     if (!isLoading && !(network && token && tokenBalance))
         return null;
-    return _jsx("div", { className: "min-w-4/5 -top-[1px] p-1 mx-2 relative rounded-b-lg text-center bg-secondary-400 py-0.5 text-xs text-secondary-text leading-[18px] font-normal", children: isLoading ?
+    return _jsx("div", { className: "min-w-4/5  p-1 mx-2 relative rounded-b-lg text-center bg-secondary-400 py-0.5 text-xs text-secondary-text leading-[18px] font-normal", children: isLoading ?
             _jsx("div", { className: 'h-[10px] w-fit px-4 inline-flex bg-gray-500 rounded-xs animate-pulse' })
             : !truncatedBalance ?
                 _jsxs("div", { className: "flex items-center justify-center gap-1 text-orange-400", children: [_jsx(InfoIcon, { className: 'w-3 h-3' }), _jsx("span", { children: "Network issue" })] })

package/dist/esm/components/Modal/vaulModal.js

@@ -81,7 +81,7 @@ const Comp = ({ children, show, setShow, header, description, onClose, onAnimati
     return (_jsx(Drawer.Root, { open: show, onOpenChange: handleOpenChange, container: container, snapPoints: snapPointsHeight, activeSnapPoint: snap, setActiveSnapPoint: setSnap, fadeFromIndex: 0, onDrag: (e) => {
             if (e.movementY < 0 && !expandRef.current?.classList.contains('hidden'))
                 expandRef.current?.classList.add('hidden');
-        }, modal: isMobile ? true : false, repositionInputs: false, onAnimationEnd: (e) => { onAnimationEnd && onAnimationEnd(e); }, handleOnly: isMobile, children: _jsxs(Drawer.Portal, { children: [_jsx(Drawer.Close, { asChild: true, children: isMobile
+        }, modal: isMobile ? true : false, repositionInputs: false, onAnimationEnd: (e) => { onAnimationEnd && onAnimationEnd(e); }, handleOnly: isMobileWithoutPortal, children: _jsxs(Drawer.Portal, { children: [_jsx(Drawer.Close, { asChild: true, children: isMobile
                         ? _jsx(Drawer.Overlay, { className: 'fixed inset-0 z-50 bg-black/50 block' })
                         : _jsx(motion.div, { className: 'absolute inset-0 z-50 bg-black/50 block', initial: { opacity: 0.5 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, "backdrop") }), _jsxs(Drawer.Content, { "data-testid": "content", className: clsx('absolute flex flex-col bg-secondary-700 rounded-t-3xl bottom-0 left-0 right-0 h-full z-50 pb-4 text-primary-text ring-0! outline-hidden! ', className, {
                         'border-none! rounded-none!': snap === 1,

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

@@ -14,7 +14,7 @@ export const WalletTransferAction = ({ swapData, swapId, refuel, onWalletWithdra
     const selectedSourceAccount = useSelectedAccount("from", source_network?.name);
     useEffect(() => {
         const selectedWallet = wallets.find(w => w.id === selectedSourceAccount?.id && w.addresses.some(a => a.toLowerCase() === selectedSourceAccount.address.toLowerCase()));
-        if (selectedSourceAccount && selectedWallet) {
+        if (selectedSourceAccount && selectedWallet && provider?.switchAccount) {
             provider?.switchAccount(selectedWallet, selectedSourceAccount.address);
         }
     }, [selectedSourceAccount?.address, source_network?.name]);

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

@@ -11,7 +11,7 @@ const Widget = ({ children, hideMenu, goBack, contextualMenu }) => {
     return _jsxs("div", { className: "relative p-px h-full", children: [AppSettings.ThemeData?.enableWideVersion &&
                 _jsx("div", { className: "invisible sm:visible absolute inset-0 rounded-[25px] bg-gradient-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 sm:overflow-hidden relative bg-secondary-700 h-full flex flex-col", {
                     "max-sm:has-openpicker:min-h-svh max-sm:min-h-[99.8svh] sm:has-openpicker:min-h-[79svh]": AppSettings.ThemeData?.enableWideVersion,
-                    "sm:has-openpicker:min-h-[650px]": !AppSettings.ThemeData?.enableWideVersion,
+                    "has-openpicker:min-h-[650px]": !AppSettings.ThemeData?.enableWideVersion,
                     "pb-4 overflow-hidden": AppSettings.ThemeData?.enablePortal == false,
                 }), children: [AppSettings.ApiVersion === 'testnet' &&
                         _jsx("div", { className: "relative z-20", children: _jsx("div", { className: "absolute -top-1 right-[calc(50%-68px)] bg-warning-foreground py-0.5 px-10 rounded-b-md text-xs scale-75", children: "TESTNET" }) }), !hideMenu &&

package/dist/esm/context/balanceAccounts.js

@@ -114,7 +114,7 @@ export function useNetworkBalanceKey(direction, networkName) {
 }
 export function useNetworkBalance(direction, networkName) {
     const balanceKey = useNetworkBalanceKey(direction, networkName);
-    const balance = useBalanceStore((s) => (s.isLoading ? undefined : s.balances[balanceKey || "unknown"]));
+    const balance = useBalanceStore((s) => (s.balances[balanceKey || "unknown"]));
     return balance;
 }
 export function useUpdateBalanceAccount(direction) {

package/dist/esm/hooks/useAllWithdrawalBalances.js

@@ -1,5 +1,5 @@
 import { useSettingsState } from "../context/settings";
-import { selectResolvedInitiatedBalances, useBalanceStore } from "../stores/balanceStore";
+import { selectResolvedSortingBalances, useBalanceStore } from "../stores/balanceStore";
 import { useEffect, useMemo, useRef } from "react";
 import { useBalanceAccounts } from "../context/balanceAccounts";
 export default function useAllWithdrawalBalances() {
@@ -26,11 +26,11 @@ export default function useAllWithdrawalBalances() {
     }, [walletNetworks]);
     useEffect(() => {
         if (walletNetworks)
-            useBalanceStore.getState().initAllBalances(walletNetworks);
+            useBalanceStore.getState().initSortingBalances(walletNetworks);
     }, [walletNetwokrsString]);
     const lastBalancesRef = useRef(null);
-    const resolvedBalances = useBalanceStore(selectResolvedInitiatedBalances);
-    const isLoading = useBalanceStore(s => s.isLoading);
+    const resolvedBalances = useBalanceStore(selectResolvedSortingBalances);
+    const isLoading = useBalanceStore(s => s.sortingDataIsLoading);
     if (resolvedBalances != null && Object.keys(resolvedBalances).length > 0) {
         lastBalancesRef.current = resolvedBalances;
     }

package/dist/esm/stores/balanceStore.js

@@ -19,8 +19,11 @@ function processQueue() {
 export const useBalanceStore = create()(subscribeWithSelector((set, get, api) => ({
     balances: {},
     lastFetchMap: {},
+    balanceKeysForSorting: {},
     initiatedBalances: null,
-    isLoading: false,
+    sortingDataIsLoading: false,
+    partialPublished: false,
+    startTimeOfInit: undefined,
     fetchBalance: (address, network, options) => {
         const key = getKey(address, network);
         const entry = get().balances[key];
@@ -76,92 +79,56 @@ export const useBalanceStore = create()(subscribeWithSelector((set, get, api) =>
         }));
         return queuedPromise;
     },
-    initAllBalances: pairs => {
-        if (pairs.length > 0)
-            set({ isLoading: true });
-        set({ initiatedBalances: null });
-        // kick off every fetch
-        pairs.forEach(({ address, network }) => {
-            get().fetchBalance(address, network, { dedupeInterval: 120000, ignoreCache: true, timeoutMs: 4000, retryCount: 0 });
+    initSortingBalances: pairs => {
+        const initiatedBalances = pairs.reduce((acc, { address, network }) => {
+            const key = getKey(address, network);
+            acc[network.name] = key;
+            return acc;
+        }, {});
+        const sortedpairs = pairs.sort((a, b) => Number(a.network.source_rank) - Number(b.network.source_rank));
+        sortedpairs.forEach(({ address, network }) => {
+            get().fetchBalance(address, network, { dedupeInterval: 120000, ignoreCache: false, timeoutMs: 4500, retryCount: 0 });
         });
-        // subscribe to balance map changes
-        const unsub = api.subscribe(state => state.balances, balances => {
-            const done = pairs.every(({ address, network }) => balances[getKey(address, network)]?.status !== 'loading');
+        set({ sortingDataIsLoading: true });
+        set({ initiatedBalances });
+        set({ startTimeOfInit: Date.now() });
+        set({ partialPublished: false });
+        api.subscribe(state => state.balances, balances => {
+            const keysArray = Object.entries(get().initiatedBalances || {});
+            const done = keysArray.every(([_, key]) => balances[key].data);
             if (done) {
-                const finalMap = pairs.reduce((acc, { address, network }) => {
-                    const key = getKey(address, network);
-                    const entry = balances[key];
-                    if (entry)
-                        acc[network.name] = key;
-                    return acc;
-                }, {});
-                set({ initiatedBalances: finalMap });
-                set({ isLoading: false });
-                unsub(); // cleanup subscription
+                set({ sortingDataIsLoading: false });
+                set({ balanceKeysForSorting: get().initiatedBalances });
+                set({ partialPublished: false });
             }
-        });
-    },
-    getResolvedInitiatedBalances: () => {
-        const keys = get().initiatedBalances;
-        if (!keys)
-            return null;
-        const balances = get().balances;
-        return Object.entries(keys).reduce((acc, [networkName, key]) => {
-            const entry = balances[key];
-            if (entry?.data)
-                acc[networkName] = entry.data;
-            return acc;
-        }, {});
+            else {
+                const startedAt = get().startTimeOfInit ?? 0;
+                const elapsed = Date.now() - startedAt;
+                if (!get().partialPublished && elapsed >= 3000) {
+                    const partial = {};
+                    keysArray.forEach(([networkName, key]) => {
+                        if (balances[key]?.data) {
+                            partial[networkName] = key;
+                        }
+                    });
+                    set({ balanceKeysForSorting: partial });
+                    set({ partialPublished: true });
+                    set({ sortingDataIsLoading: false });
+                }
+            }
+        }, { fireImmediately: true });
     }
 })));
-// Memoized selector to prevent unnecessary object creation
-let lastInitiatedBalances = null;
-let lastBalances = {};
-let memoizedResult = null;
-//Discuss with Babken M.
-export const selectResolvedInitiatedBalances = (state) => {
-    const keys = state.initiatedBalances;
+export const selectResolvedSortingBalances = (state) => {
+    const keys = state.balanceKeysForSorting;
     if (!keys)
         return null;
-    // Only recalculate if initiatedBalances or balances have actually changed
-    if (keys === lastInitiatedBalances && state.balances === lastBalances && memoizedResult) {
-        return memoizedResult;
-    }
-    // Check if the actual data has changed, not just the object references
-    if (lastInitiatedBalances && memoizedResult) {
-        let hasChanged = false;
-        // Check if keys are different
-        const currentKeySet = Object.keys(keys);
-        const lastKeySet = Object.keys(lastInitiatedBalances);
-        if (currentKeySet.length !== lastKeySet.length ||
-            !currentKeySet.every(k => lastKeySet.includes(k))) {
-            hasChanged = true;
-        }
-        // Check if balance data has changed for existing keys
-        if (!hasChanged) {
-            for (const [_, key] of Object.entries(keys)) {
-                const entry = state.balances[key];
-                const lastEntry = lastBalances[key];
-                if (entry?.data !== lastEntry?.data) {
-                    hasChanged = true;
-                    break;
-                }
-            }
-        }
-        if (!hasChanged) {
-            return memoizedResult;
-        }
-    }
-    // Recalculate the result
-    const result = Object.entries(keys).reduce((acc, [networkName, key]) => {
+    const keysArray = Object.entries(keys);
+    const balanceData = keysArray.reduce((acc, [networkName, key]) => {
         const entry = state.balances[key];
         if (entry?.data)
             acc[networkName] = entry.data;
         return acc;
     }, {});
-    // Update memoization cache
-    lastInitiatedBalances = keys;
-    lastBalances = state.balances;
-    memoizedResult = result;
-    return result;
+    return balanceData;
 };