@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.
42 lines • 2.41 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ArrowDownward from '@mui/icons-material/ArrowDownward';
import ArrowForward from '@mui/icons-material/ArrowForward';
import { useAvailableChains } from '../../hooks/useAvailableChains.js';
import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js';
import { useToAddressReset } from '../../hooks/useToAddressReset.js';
import { useFieldActions } from '../../stores/form/useFieldActions.js';
import { IconCard, ReverseContainer } from './ReverseTokensButton.style.js';
export const ReverseTokensButton = ({ vertical, }) => {
const { setFieldValue, getFieldValues } = useFieldActions();
const { getChainById } = useAvailableChains();
const { tryResetToAddress } = useToAddressReset();
const autoPopulateToAddress = useToAddressAutoPopulate();
const handleClick = () => {
const [fromChainId, fromToken, toChainId, toToken, toAddress] = getFieldValues('fromChain', 'fromToken', 'toChain', 'toToken', 'toAddress');
setFieldValue('fromAmount', '', { isTouched: true });
setFieldValue('fromChain', toChainId, { isTouched: true });
setFieldValue('fromToken', toToken, { isTouched: true });
setFieldValue('toChain', fromChainId, { isTouched: true });
setFieldValue('toToken', fromToken, { isTouched: true });
const autoPopulatedToAddress = autoPopulateToAddress({
formType: 'from',
selectedToAddress: toAddress,
selectedChainId: toChainId,
selectedOppositeChainId: fromChainId,
selectedOppositeTokenAddress: fromToken,
});
// Returning early as a compatible connected wallet was found, and toAddress has been populated
if (autoPopulatedToAddress) {
return;
}
// Auto-population applies in certain scenarios, but otherwise,
// we attempt to reset `toAddress` when bridging across ecosystems
// fromChainId becomes toChainId after using reverse
const toChain = getChainById(fromChainId);
if (toChain) {
tryResetToAddress(toChain);
}
};
return (_jsx(ReverseContainer, { children: _jsx(IconCard, { onClick: handleClick, children: vertical ? (_jsx(ArrowDownward, { fontSize: "inherit" })) : (_jsx(ArrowForward, { fontSize: "inherit" })) }) }));
};
//# sourceMappingURL=ReverseTokensButton.js.map