@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.
72 lines • 3.92 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import SwapVertIcon from '@mui/icons-material/SwapVert';
import { FormHelperText, Skeleton, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js';
import { FormKeyHelper } from '../../stores/form/types.js';
import { useFieldValues } from '../../stores/form/useFieldValues.js';
import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js';
import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
import { InputPriceButton } from './PriceFormHelperText.style.js';
export const PriceFormHelperText = ({ formType }) => {
const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
return (_jsx(PriceFormHelperTextBase, { formType: formType, isLoading: isLoading, tokenAddress: tokenAddress, token: token }));
};
export const PriceFormHelperTextBase = ({ formType, isLoading, tokenAddress, token }) => {
const { t } = useTranslation();
const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType));
const { inputMode, toggleInputMode } = useInputModeStore();
const currentInputMode = inputMode[formType];
const tokenAmount = token
? formatTokenAmount(token.amount, token.decimals)
: '0';
const getPriceAmountDisplayValue = () => {
if (currentInputMode === 'amount') {
const tokenPrice = formatTokenPrice(amount, token?.priceUSD, token?.decimals);
return t('format.currency', { value: tokenPrice });
}
else {
return t('format.tokenAmount', { value: amount || '0' });
}
};
const handleToggleMode = (e) => {
e.stopPropagation();
toggleInputMode(formType);
};
return (_jsxs(FormHelperText, { component: "div", sx: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
margin: 0,
marginLeft: 1.25,
marginTop: 0.5,
}, children: [_jsxs(InputPriceButton, { onClick: token?.priceUSD ? handleToggleMode : undefined, children: [_jsx(Typography, { sx: {
color: 'text.secondary',
fontWeight: 500,
fontSize: 12,
lineHeight: 1,
marginRight: 0.25,
maxWidth: 136,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}, children: getPriceAmountDisplayValue() }), currentInputMode === 'price' && token?.symbol ? (_jsx(Typography, { sx: {
color: 'text.secondary',
fontWeight: 500,
fontSize: 12,
lineHeight: 1,
wordBreak: 'break-word',
overflowWrap: 'break-word',
marginRight: 0.25,
}, children: token.symbol })) : null, token?.priceUSD && _jsx(SwapVertIcon, { sx: { fontSize: 14 } })] }), isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "text", width: 56, height: 16 })) : token?.amount ? (_jsx(Typography, { sx: {
fontWeight: 500,
fontSize: 12,
color: 'text.secondary',
lineHeight: 1,
paddingLeft: 0.25,
}, title: tokenAmount, children: `/ ${t('format.tokenAmount', {
value: tokenAmount,
})}` })) : null] }));
};
//# sourceMappingURL=PriceFormHelperText.js.map