@layerswap/widget 1.0.3 → 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/Input/Amount/ReceiveAmount.js

@@ -6,5 +6,5 @@ export const ReceiveAmount = ({ source_token, destination_token, fee, isFeeLoadi
     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;
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col min-w-0 font-normal border-0 text-[28px] leading-7 text-primary-text w-full relative truncate", children: [_jsx("div", { className: "flex items-center justify-start w-full 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", 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, format: { style: 'currency', currency: 'USD', maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }), _jsx(PriceImpact, { className: "h-5 text-base leading-5", bridgeFee: quote?.blockchain_fee, destinationTokenPriceUsd: quote?.destination_token?.price_in_usd, receiveAmount: quote?.receive_amount, requestedAmount: quote?.requested_amount, serviceFee: quote?.service_fee, sourceTokenPriceUsd: quote?.source_token?.price_in_usd })] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col min-w-0 font-normal border-0 text-[28px] leading-7 text-primary-text w-full relative truncate", children: [_jsx("div", { className: "flex items-center justify-start w-full relative", children: _jsx("div", { className: clsx("w-full flex items-center pt-2 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, format: { style: 'currency', currency: 'USD', maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }), _jsx(PriceImpact, { className: "h-5 text-base leading-5", bridgeFee: quote?.blockchain_fee, destinationTokenPriceUsd: quote?.destination_token?.price_in_usd, receiveAmount: quote?.receive_amount, requestedAmount: quote?.requested_amount, serviceFee: quote?.service_fee, sourceTokenPriceUsd: quote?.source_token?.price_in_usd })] })] }) }));
 };

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/Form/FeeDetails/index.js

@@ -43,10 +43,10 @@ export const DetailsButton = ({ quote: quoteData, isQuoteLoading, swapValues: va
     const averageCompletionTime = quote?.avg_completion_time;
     const shouldCheckNFT = reward?.campaign_type === "for_nft_holders" && !!reward?.nft_contract_address;
     const { balance: nftBalance, isLoading, error } = useSWRNftBalance(destinationAddress || '', destination, reward?.nft_contract_address || '');
-    return (_jsxs("div", { className: 'flex items-center gap-1 space-x-3', children: [gasFeeInUsd &&
+    return (_jsxs("div", { className: 'flex items-center gap-1 space-x-3', children: [gasFeeInUsd ?
                 _jsxs(_Fragment, { children: [_jsxs("div", { className: clsx("inline-flex items-center gap-1", { "animate-pulse-strong": isQuoteLoading }), children: [_jsx("div", { className: 'p-0.5', children: !values.fromExchange ?
-                                        _jsx(GasIcon, { className: 'h-4 w-4 text-secondary-text' }) : _jsx(ExchangeGasIcon, { className: 'h-5 w-5 text-secondary-text' }) }), _jsx(NumberFlow, { className: "text-primary-text text-sm leading-6", value: gasFeeInUsd < 0.01 ? '0.01' : gasFeeInUsd, format: { style: 'currency', currency: 'USD' }, prefix: gasFeeInUsd < 0.01 ? '<' : undefined })] }), _jsx("div", { className: "w-px h-3 bg-primary-text-tertiary rounded-2xl" })] }), averageCompletionTime &&
-                _jsx(_Fragment, { children: _jsxs("div", { className: clsx("text-right inline-flex items-center gap-1 text-sm", { "animate-pulse-strong": isQuoteLoading }), children: [_jsx("div", { className: 'p-0.5', children: _jsx(Clock, { className: 'h-4 w-4 text-secondary-text' }) }), _jsx(AverageCompletionTime, { className: "text-primary-text", avgCompletionTime: quote.avg_completion_time })] }) }), reward &&
-                (!shouldCheckNFT || (!isLoading && !error && nftBalance !== undefined && nftBalance > 0)) &&
-                _jsxs(_Fragment, { children: [_jsx("div", { className: "w-px h-3 bg-primary-text-tertiary rounded-2xl" }), _jsxs("div", { className: 'text-right text-primary-text inline-flex items-center gap-1', children: [_jsx(CupIcon, { alt: "Reward", width: 16, height: 16 }), _jsx(NumberFlow, { value: reward?.amount_in_usd < 0.01 ? '0.01' : reward?.amount_in_usd, format: { style: 'currency', currency: 'USD' }, prefix: reward?.amount_in_usd < 0.01 ? '<' : undefined })] })] })] }));
+                                        _jsx(GasIcon, { className: 'h-4 w-4 text-secondary-text' }) : _jsx(ExchangeGasIcon, { className: 'h-5 w-5 text-secondary-text' }) }), _jsx(NumberFlow, { className: "text-primary-text text-sm leading-6", value: gasFeeInUsd < 0.01 ? '0.01' : gasFeeInUsd, format: { style: 'currency', currency: 'USD' }, prefix: gasFeeInUsd < 0.01 ? '<' : undefined })] }), _jsx("div", { className: "w-px h-3 bg-primary-text-tertiary rounded-2xl" })] }) : null, averageCompletionTime ?
+                _jsx(_Fragment, { children: _jsxs("div", { className: clsx("text-right inline-flex items-center gap-1 text-sm", { "animate-pulse-strong": isQuoteLoading }), children: [_jsx("div", { className: 'p-0.5', children: _jsx(Clock, { className: 'h-4 w-4 text-secondary-text' }) }), _jsx(AverageCompletionTime, { className: "text-primary-text", avgCompletionTime: quote.avg_completion_time })] }) }) : null, (reward &&
+                (!shouldCheckNFT || (!isLoading && !error && nftBalance !== undefined && nftBalance > 0))) ?
+                _jsxs(_Fragment, { children: [_jsx("div", { className: "w-px h-3 bg-primary-text-tertiary rounded-2xl" }), _jsxs("div", { className: 'text-right text-primary-text inline-flex items-center gap-1', children: [_jsx(CupIcon, { alt: "Reward", width: 16, height: 16 }), _jsx(NumberFlow, { value: reward?.amount_in_usd < 0.01 ? '0.01' : reward?.amount_in_usd, format: { style: 'currency', currency: 'USD' }, prefix: reward?.amount_in_usd < 0.01 ? '<' : undefined })] })] }) : null] }));
 };

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]);
@@ -147,7 +147,7 @@ const TransactionMessage = ({ error, isLoading }) => {
         //     where: 'swapWithdrawalError',
         //     severity: 'error',
         // });
-        return _jsx(TransactionMessages.UexpectedErrorMessage, { message: error.message });
+        return _jsx(TransactionMessages.UnexpectedErrorMessage, { message: error.message });
     }
     else
         return _jsx(_Fragment, {});

package/dist/esm/components/Pages/Swap/Withdraw/messages/TransactionMessages.js

@@ -25,7 +25,7 @@ const WaletMismatchMessage = ({ address }) => {
 const SwapErrorMessage = ({ message }) => {
     return _jsx(WalletMessage, { status: "error", header: 'API error', details: message });
 };
-const UexpectedErrorMessage = ({ message }) => {
+const UnexpectedErrorMessage = ({ message }) => {
     return _jsx(WalletMessage, { status: "error", header: 'Unexpected error', details: message, showInModal: true });
 };
 const ActionMessages = {
@@ -36,7 +36,7 @@ const ActionMessages = {
     WaletMismatchMessage,
     TransactionFailedMessage,
     SwapErrorMessage,
-    UexpectedErrorMessage,
+    UnexpectedErrorMessage,
     DifferentAccountsNotAllowedError
 };
 export var TransactionMessageType;
@@ -47,7 +47,7 @@ export var TransactionMessageType;
     TransactionMessageType["TransactionRejected"] = "TransactionRejected";
     TransactionMessageType["WaletMismatch"] = "WaletMismatch";
     TransactionMessageType["TransactionFailed"] = "TransactionFailed";
-    TransactionMessageType["UexpectedErrorMessage"] = "UexpectedErrorMessage";
+    TransactionMessageType["UnexpectedErrorMessage"] = "UnexpectedErrorMessage";
     TransactionMessageType["DifferentAccountsNotAllowedError"] = "DifferentAccountsNotAllowedError";
 })(TransactionMessageType || (TransactionMessageType = {}));
 export default ActionMessages;

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/LayerswapProvider.js

@@ -25,6 +25,7 @@ const LayerswapProviderComponent = ({ children, callbacks, config, walletProvide
     themeData = { ...THEME_COLORS['default'], ...config?.theme };
     AppSettings.ApiVersion = version || AppSettings.ApiVersion;
     AppSettings.ImtblPassportConfig = imtblPassport;
+    AppSettings.TonClientConfig = config?.tonConfigs || AppSettings.TonClientConfig;
     AppSettings.WalletConnectConfig = config?.walletConnect || AppSettings.WalletConnectConfig;
     AppSettings.ThemeData = themeData;
     if (apiKey)

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/helpers/{getSettings.js → getSettings/getSettings.js}

@@ -1,5 +1,4 @@
-import { useEffect, useState } from "react";
-import LayerSwapApiClient from "../lib/apiClients/layerSwapApiClient";
+import LayerSwapApiClient from "../../lib/apiClients/layerSwapApiClient";
 export async function getSettings(apiKey) {
     const apiClient = new LayerSwapApiClient();
     LayerSwapApiClient.apiKey = apiKey;
@@ -17,17 +16,3 @@ export async function getSettings(apiKey) {
     };
     return settings;
 }
-export function useSettings(apiKey) {
-    const [loading, setLoading] = useState(true);
-    const [settings, setSettings] = useState(null);
-    useEffect(() => {
-        (async () => {
-            const settings = await getSettings(apiKey);
-            if (!settings)
-                throw new Error('Failed to fetch settings');
-            setSettings(settings);
-            setLoading(false);
-        })();
-    }, []);
-    return { settings, loading };
-}

package/dist/esm/helpers/getSettings/index.js

@@ -0,0 +1,2 @@
+export * from './getSettings';
+export * from './useSettings';

package/dist/esm/helpers/getSettings/useSettings.js

@@ -0,0 +1,17 @@
+'use client';
+import { useEffect, useState } from "react";
+import { getSettings } from "./getSettings";
+export function useSettings(apiKey) {
+    const [loading, setLoading] = useState(true);
+    const [settings, setSettings] = useState(null);
+    useEffect(() => {
+        (async () => {
+            const settings = await getSettings(apiKey);
+            if (!settings)
+                throw new Error('Failed to fetch settings');
+            setSettings(settings);
+            setLoading(false);
+        })();
+    }, []);
+    return { settings, loading };
+}

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/lib/AppSettings.js

@@ -19,6 +19,7 @@ AppSettings.WalletConnectConfig = {
 };
 AppSettings.TonClientConfig = {
     tonApiKey: 'ac793ea74c19105d617dfbeedb827f1b267b4e91f1b15b2420d003ec49722c82',
+    manifestUrl: `https://layerswap.io/app/tonconnect-manifest.json`
 };
 AppSettings.ImtblPassportConfig = {
     publishableKey: "",

package/dist/esm/lib/apiClients/index.js

@@ -1,2 +1,3 @@
 export * from './jsonRpcClient';
-export * from './layerSwapApiClient';
+import LayerswapApiClient from './layerSwapApiClient';
+export { LayerswapApiClient };

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;
 };