@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
30 lines • 1.63 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { SearchInput } from '../../components/Search/SearchInput.js';
import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js';
import { useFieldActions } from '../../stores/form/useFieldActions.js';
import { useFieldValues } from '../../stores/form/useFieldValues.js';
export const SearchTokenInput = ({ formType }) => {
const { t } = useTranslation();
const [value] = useFieldValues('tokenSearchFilter');
const { setFieldValue, setAsTouched } = useFieldActions();
const [fromChain, toChain] = useFieldValues('fromChain', 'toChain');
const isAllNetworks = useChainOrderStore((state) => state[`${formType}IsAllNetworks`]);
const onChange = useCallback((newValue) => {
setFieldValue('tokenSearchFilter', newValue, {
isDirty: true,
isTouched: true,
});
}, [setFieldValue]);
const onBlur = useCallback(() => {
setAsTouched('tokenSearchFilter');
}, [setAsTouched]);
useEffect(() => () => {
setFieldValue('tokenSearchFilter', '');
}, [setFieldValue]);
return (_jsx(SearchInput
// Reset the search input when a chain or the "All Networks" is changed
, { name: "tokenSearchFilter", placeholder: t('main.tokenSearch'), onChange: (e) => onChange(e.target.value), onBlur: onBlur, onClear: () => setFieldValue('tokenSearchFilter', ''), value: value, autoFocus: true }, `${fromChain}-${toChain}-${isAllNetworks}`));
};
//# sourceMappingURL=SearchTokenInput.js.map