@nazabalm/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
51 lines • 3.06 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 { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.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 { tokens: configTokens } = useWidgetConfig();
const handleClick = () => {
const [fromChainId, fromToken, toChainId, toToken, toAddress] = getFieldValues('fromChain', 'fromToken', 'toChain', 'toToken', 'toAddress');
// Check if tokens are denied in the opposite form
const isFromTokenDeniedInTo = configTokens?.to?.deny?.some((token) => token.chainId === fromChainId && token.address === fromToken);
const isToTokenDeniedInFrom = configTokens?.from?.deny?.some((token) => token.chainId === toChainId && token.address === toToken);
// If either token is denied in the opposite form, don't allow the swap
if (isFromTokenDeniedInTo || isToTokenDeniedInFrom) {
return;
}
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