@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.
54 lines • 3.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { InputAdornment } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { formatUnits } from 'viem';
import { useAvailableChains } from '../../hooks/useAvailableChains.js';
import { useGasRecommendation } from '../../hooks/useGasRecommendation.js';
import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js';
import { FormKeyHelper } from '../../stores/form/types.js';
import { useFieldActions } from '../../stores/form/useFieldActions.js';
import { useFieldValues } from '../../stores/form/useFieldValues.js';
import { ButtonContainer, MaxButton } from './AmountInputAdornment.style.js';
export const AmountInputEndAdornment = ({ formType }) => {
const { t } = useTranslation();
const { getChainById } = useAvailableChains();
const { setFieldValue } = useFieldActions();
const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
// We get gas recommendations for the source chain to make sure that after pressing the Max button
// the user will have enough funds remaining to cover gas costs
const { data } = useGasRecommendation(chainId);
const { token } = useTokenAddressBalance(chainId, tokenAddress);
const getMaxAmount = () => {
if (!token?.amount) {
return 0n;
}
const chain = getChainById(chainId);
let maxAmount = token.amount;
if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
const recommendedAmount = BigInt(data.recommended.amount);
if (token.amount > recommendedAmount) {
maxAmount = token.amount - recommendedAmount;
}
}
return maxAmount;
};
const handlePercentage = (percentage) => {
const maxAmount = getMaxAmount();
if (maxAmount && token?.decimals) {
const percentageAmount = (maxAmount * BigInt(percentage)) / 100n;
setFieldValue(FormKeyHelper.getAmountKey(formType), formatUnits(percentageAmount, token.decimals), {
isTouched: true,
});
}
};
const handleMax = () => {
const maxAmount = getMaxAmount();
if (maxAmount && token?.decimals) {
setFieldValue(FormKeyHelper.getAmountKey(formType), formatUnits(maxAmount, token.decimals), {
isTouched: true,
});
}
};
return (_jsx(InputAdornment, { position: "end", sx: { paddingTop: 2 }, children: formType === 'from' && token?.amount ? (_jsxs(ButtonContainer, { children: [_jsx(MaxButton, { onClick: () => handlePercentage(25), "data-delay": "0", children: "25%" }), _jsx(MaxButton, { onClick: () => handlePercentage(50), "data-delay": "1", children: "50%" }), _jsx(MaxButton, { onClick: () => handlePercentage(75), "data-delay": "2", children: "75%" }), _jsx(MaxButton, { onClick: handleMax, "data-delay": "3", children: t('button.max') })] })) : null }));
};
//# sourceMappingURL=AmountInputEndAdornment.js.map