soso-widget/dist/esm/stores/form/URLSearchParamsBuilder.js

LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
import { formatInputAmount } from '../../utils/format.js';
import { useFieldActions } from '../form/useFieldActions.js';
import { useFieldValues } from '../form/useFieldValues.js';
import { useTouchedFields } from '../form/useTouchedFields.js';
const formValueKeys = [
    'fromAmount',
    'fromChain',
    'fromToken',
    'toAddress',
    'toChain',
    'toToken',
];
const getDefaultValuesFromQueryString = () => {
    const searchParams = Object.fromEntries(new URLSearchParams(window?.location.search));
    ['from', 'to'].forEach((key) => {
        if (searchParams[`${key}Token`] && !searchParams[`${key}Chain`]) {
            delete searchParams[`${key}Token`];
        }
    });
    return {
        ...(Number.isFinite(Number.parseInt(searchParams.fromChain, 10))
            ? { fromChain: Number.parseInt(searchParams.fromChain, 10) }
            : {}),
        ...(Number.isFinite(Number.parseInt(searchParams.toChain, 10))
            ? { toChain: Number.parseInt(searchParams.toChain, 10) }
            : {}),
        ...(searchParams.fromToken ? { fromToken: searchParams.fromToken } : {}),
        ...(searchParams.toToken ? { toToken: searchParams.toToken } : {}),
        ...(Number.isFinite(Number.parseFloat(searchParams.fromAmount))
            ? { fromAmount: formatInputAmount(searchParams.fromAmount) }
            : {}),
        ...(searchParams.toAddress ? { toAddress: searchParams.toAddress } : {}),
    };
};
export const URLSearchParamsBuilder = () => {
    const { pathname } = useLocation();
    const touchedFields = useTouchedFields();
    const values = useFieldValues(...formValueKeys);
    const { setSendToWallet } = useSendToWalletActions();
    // Using these methods as trying to use the touchedFields and values above
    // often has a lag that can effect the widgets initialisation sequence
    // and accidentally cause values to be wiped from the query string
    const { getFieldValues, isTouched, setUserAndDefaultValues } = useFieldActions();
    useEffect(() => {
        // get the  initial values from the querysting
        const formValues = getDefaultValuesFromQueryString();
        if (formValues.toAddress) {
            setSendToWallet(true);
        }
        setUserAndDefaultValues(formValues);
    }, [setUserAndDefaultValues, setSendToWallet]);
    // biome-ignore lint/correctness/useExhaustiveDependencies:
    useEffect(() => {
        // set the values on the querysting
        const url = new URL(window.location);
        formValueKeys.forEach((key, _index) => {
            const value = getFieldValues(key)[0];
            if (isTouched(key) && value) {
                url.searchParams.set(key, value.toString());
            }
            else if (url.searchParams.has(key) && !value) {
                url.searchParams.delete(key);
            }
        });
        url.searchParams.sort();
        window.history.replaceState(window.history.state, '', url);
    }, [pathname, touchedFields, values, isTouched, getFieldValues]);
    return null;
};
//# sourceMappingURL=URLSearchParamsBuilder.js.map