@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

package/dist/esm/lib/virtual/core/utils.js

@@ -0,0 +1,59 @@
+export function memo(getDeps, fn, opts) {
+    let deps = opts.initialDeps ?? [];
+    let result;
+    function memoizedFunction() {
+        let depTime;
+        if (opts.key && opts.debug?.())
+            depTime = Date.now();
+        const newDeps = getDeps();
+        const depsChanged = newDeps.length !== deps.length ||
+            newDeps.some((dep, index) => deps[index] !== dep);
+        if (!depsChanged) {
+            return result;
+        }
+        deps = newDeps;
+        let resultTime;
+        if (opts.key && opts.debug?.())
+            resultTime = Date.now();
+        result = fn(...newDeps);
+        if (opts.key && opts.debug?.()) {
+            const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+            const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+            const resultFpsPercentage = resultEndTime / 16;
+            const pad = (str, num) => {
+                str = String(str);
+                while (str.length < num) {
+                    str = ' ' + str;
+                }
+                return str;
+            };
+            console.info(`%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`, `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120))}deg 100% 31%);`, opts?.key);
+        }
+        opts?.onChange?.(result);
+        return result;
+    }
+    // Attach updateDeps to the function itself
+    memoizedFunction.updateDeps = (newDeps) => {
+        deps = newDeps;
+    };
+    return memoizedFunction;
+}
+export function notUndefined(value, msg) {
+    if (value === undefined) {
+        throw new Error(`Unexpected undefined${msg ? `: ${msg}` : ''}`);
+    }
+    else {
+        return value;
+    }
+}
+export const approxEqual = (a, b) => Math.abs(a - b) <= 1;
+export const debounce = (targetWindow, fn, ms) => {
+    let timeoutId;
+    return function (...args) {
+        targetWindow.clearTimeout(timeoutId);
+        timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
+    };
+};

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { flushSync } from 'react-dom';
+import { Virtualizer, elementScroll, observeElementOffset, observeElementRect, observeWindowOffset, observeWindowRect, windowScroll, } from './core';
+export * from '@tanstack/virtual-core';
+const useIsomorphicLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+function useVirtualizerBase(options) {
+    const rerender = React.useReducer(() => ({}), {})[1];
+    const resolvedOptions = {
+        ...options,
+        onChange: (instance, sync) => {
+            if (sync) {
+                flushSync(rerender);
+            }
+            else {
+                rerender();
+            }
+            options.onChange?.(instance, sync);
+        },
+    };
+    const [instance] = React.useState(() => new Virtualizer(resolvedOptions));
+    instance.setOptions(resolvedOptions);
+    useIsomorphicLayoutEffect(() => {
+        return instance._didMount();
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        return instance._willUpdate();
+    });
+    return instance;
+}
+export function useVirtualizer(options) {
+    return useVirtualizerBase({
+        observeElementRect: observeElementRect,
+        observeElementOffset: observeElementOffset,
+        scrollToFn: elementScroll,
+        ...options,
+    });
+}
+export function useWindowVirtualizer(options) {
+    return useVirtualizerBase({
+        getScrollElement: () => (typeof document !== 'undefined' ? window : null),
+        observeElementRect: observeWindowRect,
+        observeElementOffset: observeWindowOffset,
+        scrollToFn: windowScroll,
+        initialOffset: () => (typeof document !== 'undefined' ? window.scrollY : 0),
+        ...options,
+    });
+}

package/dist/esm/lib/wallets/utils/convertSvgComponentToBase64.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from "react-dom/server";
+export function convertSvgComponentToBase64(Component, props = {}) {
+    // Render the React component to an SVG string
+    const svgString = renderToStaticMarkup(_jsx(Component, { ...props }));
+    // Convert the SVG string to Base64
+    const base64Encoded = btoa(encodeURIComponent(svgString).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16))));
+    // Return the data URL
+    return `data:image/svg+xml;base64,${base64Encoded}`;
+}

package/dist/esm/lib/wallets/utils/index.js

@@ -0,0 +1,5 @@
+export * from "./convertSvgComponentToBase64";
+export * from "./resolveWalletIcon";
+import sleep from "./sleep";
+export { sleep };
+export * from "./isMobile";

package/dist/esm/lib/wallets/utils/resolveWalletIcon.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AddressIcon from "../../../components/Common/AddressIcon";
+import SVGWithImg from "../../../components/Icons/SvgWithImg";
+import WalletIcon from "../../../components/Icons/WalletIcon";
+// import KnownEVMConnectors from "../evm/evmUtils/KnownEVMConnectors";
+// import KnownFuelConnectors from "../fuel/utils/KnownFuelConnectors";
+// import KnownSolanaConnectors from "../svm/utils/KnownSolanaConnectors";
+const connectors = [
+// ...KnownEVMConnectors,
+// ...KnownSolanaConnectors,
+// ...KnownStarknetConnectors,
+// ...KnownFuelConnectors
+];
+export const resolveWalletConnectorIcon = ({ connector, address, iconUrl }) => {
+    // const knownConnector = connectors.find(c => c.id.toLowerCase() === connector?.toLowerCase())
+    // if (knownConnector && knownConnector.icon) return knownConnector.icon
+    // else 
+    if (iconUrl)
+        return SVGIconWrapper(iconUrl);
+    if (address)
+        return AddressIconWrapper(address);
+    else
+        return WalletIcon;
+};
+export const resolveWalletConnectorIndex = (id) => {
+    return connectors.findIndex(c => c.id === id?.toLowerCase());
+};
+const AddressIconWrapper = (address) => (props) => {
+    return _jsx(AddressIcon, { address: address, size: 24, ...props });
+};
+const SVGIconWrapper = (iconUrl) => (props) => {
+    return _jsx(SVGWithImg, { ...props, image_url: iconUrl });
+};

package/dist/esm/lib/wallets/utils/sleep.js

@@ -0,0 +1,3 @@
+export default function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}

package/dist/esm/stores/balanceStore.js

@@ -0,0 +1,167 @@
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+import { resolverService } from '../lib/resolvers/resolverService';
+export function getKey(address, networkOrName) {
+    const name = typeof networkOrName === 'string' ? networkOrName : networkOrName.name;
+    return `${address}:${name}`;
+}
+// balanceFetcher is now accessed through resolverService
+const MAX_CONCURRENT = 500;
+let activeCount = 0;
+const queue = [];
+function processQueue() {
+    while (activeCount < MAX_CONCURRENT && queue.length > 0) {
+        const job = queue.shift();
+        activeCount++;
+        job();
+    }
+}
+export const useBalanceStore = create()(subscribeWithSelector((set, get, api) => ({
+    balances: {},
+    lastFetchMap: {},
+    initiatedBalances: null,
+    isLoading: false,
+    fetchBalance: (address, network, options) => {
+        const key = getKey(address, network);
+        const entry = get().balances[key];
+        const dedupeInterval = options?.dedupeInterval ?? 120000;
+        const now = Date.now();
+        const last = get().lastFetchMap[key] ?? 0;
+        if (entry?.promise)
+            return entry.promise;
+        if (!options?.ignoreCache && entry && now - last < dedupeInterval)
+            return Promise.resolve(entry.data);
+        const queuedPromise = new Promise((resolve, reject) => {
+            const job = () => {
+                resolverService.getBalanceResolver().getBalance(network, address, { timeoutMs: options?.timeoutMs, retryCount: options?.retryCount })
+                    .then(data => {
+                    set(state => ({
+                        balances: {
+                            ...state.balances,
+                            [key]: { data, status: 'success' },
+                        },
+                        lastFetchMap: {
+                            ...state.lastFetchMap,
+                            [key]: Date.now(),
+                        }
+                    }));
+                    resolve(data);
+                })
+                    .catch(error => {
+                    set(state => ({
+                        balances: {
+                            ...state.balances,
+                            [key]: { ...state.balances[key], error, status: 'error' },
+                        },
+                        lastFetchMap: {
+                            ...state.lastFetchMap,
+                            [key]: Date.now(),
+                        }
+                    }));
+                    reject(error);
+                })
+                    .finally(() => {
+                    activeCount--;
+                    processQueue();
+                });
+            };
+            queue.push(job);
+            processQueue();
+        });
+        set(state => ({
+            balances: {
+                ...state.balances,
+                [key]: { ...state.balances[key], status: 'loading', promise: queuedPromise },
+            }
+        }));
+        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: 1 });
+        });
+        // 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');
+            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
+            }
+        });
+    },
+    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;
+        }, {});
+    }
+})));
+// 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;
+    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 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;
+};

package/dist/esm/stores/index.js

@@ -0,0 +1,6 @@
+export * from "./walletStore";
+export * from "./slippageStore";
+export * from "./swapTransactionStore";
+export * from "./recentRoutesStore";
+export * from "./balanceStore";
+export * from "./routeTokenSwitchStore";

package/dist/esm/stores/recentRoutesStore.js

@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+export const useRecentNetworksStore = create()(persist((set) => ({
+    recentRoutes: {
+        sourceRoutes: {},
+        destinationRoutes: {},
+    },
+    updateRecentNetworks: (args) => {
+        set(state => ({
+            recentRoutes: updateRecentNetworksHelper(state.recentRoutes, args)
+        }));
+    }
+}), {
+    name: 'recentRoutes',
+    storage: createJSONStorage(() => localStorage),
+}));
+const updateRecentNetworksHelper = (prev, data) => {
+    const { from, to } = data;
+    return {
+        sourceRoutes: {
+            ...prev.sourceRoutes,
+            ...(from ? {
+                [from.network]: {
+                    ...prev.sourceRoutes[from.network],
+                    [from.token]: (prev.sourceRoutes?.[from.network]?.[from.token] || 0) + 1
+                }
+            } : {})
+        },
+        destinationRoutes: {
+            ...prev.destinationRoutes,
+            [to.network]: {
+                ...prev.sourceRoutes[to.network],
+                [to.token]: (prev.sourceRoutes?.[to.network]?.[to.token] || 0) + 1
+            }
+        },
+    };
+};

package/dist/esm/stores/routeTokenSwitchStore.js

@@ -0,0 +1,5 @@
+import { create } from 'zustand';
+export const useRouteTokenSwitchStore = create((set) => ({
+    showTokens: false,
+    setShowTokens: (val) => set({ showTokens: val }),
+}));

package/dist/esm/stores/slippageStore.js

@@ -0,0 +1,6 @@
+import { create } from 'zustand';
+export const useSlippageStore = create()((set) => ({
+    slippage: undefined,
+    setSlippage: (value) => set({ slippage: value }),
+    clearSlippage: () => set({ slippage: undefined })
+}));

package/dist/esm/stores/walletStore.js

@@ -0,0 +1,39 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+export const useWalletStore = create()(persist((set) => ({
+    connectedWallets: [],
+    selectProvider: (providerName) => set({ selectedProveder: providerName }),
+    addParadexAccount: (value) => set((state) => ({ paradexAccounts: { ...state.paradexAccounts, ...{ [value.l1Address.toLowerCase()]: value.paradexAddress } } })),
+    removeParadexAccount: (value) => set((state) => {
+        const { [value.toLowerCase()]: _, ...updatedAccounts } = state.paradexAccounts || {};
+        return { paradexAccounts: updatedAccounts };
+    }),
+    //    As we are calling this method for adding wallets to the store from provider hooks,
+    // in some providers they are called from useEffect hooks so are triggered multiple times,
+    // we check if the wallet is already connected do not modify the state
+    // TODO: get rid of useEffect hooks and implement singelton pattern
+    connectWallet: (wallet) => set((state) => {
+        const existingWallet = state.connectedWallets.find(w => w.providerName == wallet.providerName && w.id == wallet.id && w.address == wallet.address);
+        if (existingWallet) {
+            return {
+                connectedWallets: [
+                    ...state.connectedWallets.filter(w => !(w.providerName == wallet.providerName && w.id == wallet.id && w.address == wallet.address)),
+                    wallet
+                ]
+            };
+        }
+        return ({
+            connectedWallets: [
+                ...state.connectedWallets,
+                wallet
+            ]
+        });
+    }),
+    disconnectWallet: (providerName, connectorName) => set((state) => ({
+        connectedWallets: state.connectedWallets.filter(w => connectorName ? !(w.providerName == providerName && w.id == connectorName) : w.providerName != providerName)
+    }))
+}), {
+    name: 'ls-paradex-accounts',
+    storage: createJSONStorage(() => localStorage),
+    partialize: (state) => ({ paradexAccounts: state.paradexAccounts }),
+}));

package/dist/esm/types/balance.js

@@ -0,0 +1,27 @@
+import posthog from "posthog-js";
+export class BalanceProvider {
+    constructor() {
+        this.resolveTokenBalanceFetchError = (err, token, network, isNativeCurrency) => {
+            const errorMessage = `${err.message || err}`;
+            posthog.captureException("balance_fetch_error", {
+                where: "BalanceProvider",
+                network: network.name,
+                $layerswap_exception_type: "Balance Fetch Error",
+                token: token.symbol ?? undefined,
+                message: `Could not fetch balance for ${token.symbol} in ${network.name}, err: ${errorMessage}`,
+                cause: err.cause,
+                timoutError: errorMessage.toLowerCase().includes("timeout") || errorMessage.toLowerCase().includes("took too long")
+            });
+            const tokenBalance = {
+                network: network.name,
+                token: token.symbol,
+                amount: undefined,
+                request_time: new Date().toJSON(),
+                decimals: Number(token?.decimals),
+                isNativeCurrency: isNativeCurrency ?? !token.contract,
+                error: errorMessage
+            };
+            return tokenBalance;
+        };
+    }
+}

package/dist/esm/types/index.js

@@ -0,0 +1,10 @@
+export * from './wallet';
+export * from './balance';
+export * from './gas';
+export * from './addressUtils';
+export * from './transfer';
+export * from './nft';
+export * from './multiStepTransfer';
+export * from '../Models';
+export * from '../components/Pages/Swap/Withdraw/messages/TransactionMessages';
+export * from '../components/Pages/Swap/Withdraw/Wallet/Common/sharedTypes';

package/dist/esm/types/nft.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/transfer.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/wallet.js

@@ -0,0 +1 @@
+export {};