@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.
90 lines • 6.35 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import Close from '@mui/icons-material/Close';
import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded';
import { Box, IconButton, Link, Skeleton, Typography } from '@mui/material';
import { forwardRef, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useAvailableChains } from '../../hooks/useAvailableChains.js';
import { useExplorer } from '../../hooks/useExplorer.js';
import { useToken } from '../../hooks/useToken.js';
import { shortenAddress } from '../../utils/wallet.js';
import { TokenAvatar } from '../Avatar/TokenAvatar.js';
import { CardIconButton } from '../Card/CardIconButton.js';
import { Label, MetricContainer, TokenDetailsSheetContainer, TokenDetailsSheetHeader, } from './TokenDetailsSheetContent.style.js';
const noDataLabel = '-';
export const TokenDetailsSheetContent = forwardRef(({ tokenAddress, chainId, withoutContractAddress }, ref) => {
const { t } = useTranslation();
const { getAddressLink } = useExplorer();
const { getChainById } = useAvailableChains();
const { token, isLoading } = useToken(chainId, tokenAddress, true);
const chain = useMemo(() => getChainById(chainId), [chainId, getChainById]);
const copyContractAddress = async (e) => {
e.stopPropagation();
try {
// Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)
await navigator.clipboard.writeText(tokenAddress || '');
}
catch {
// Silently fail to avoid crashing the UI if clipboard write fails
}
};
return (_jsxs(TokenDetailsSheetContainer, { children: [_jsxs(TokenDetailsSheetHeader, { children: [_jsxs(Box, { sx: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: 3,
}, children: [_jsx(TokenAvatar, { token: token, chain: chain, tokenAvatarSize: 72, chainAvatarSize: 28, isLoading: isLoading }), _jsx(MetricContainer, { children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "rounded", width: 80, height: 24 }), _jsx(Skeleton, { variant: "rounded", width: 80, height: 16 })] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { fontWeight: 700, fontSize: "24px", lineHeight: "24px", color: "text.primary", children: token?.symbol || noDataLabel }), _jsx(Label, { children: token?.name || noDataLabel })] })) })] }), _jsx(IconButton, { onClick: (e) => {
e.stopPropagation();
if (ref && typeof ref !== 'function') {
ref.current?.close();
}
}, sx: { mt: '-8px', mr: '-8px' }, children: _jsx(Close, {}) })] }), _jsx(MetricWithSkeleton, { isLoading: isLoading, label: t('tokenMetric.currentPrice'), width: 200, height: 40, children: _jsx(Typography, { sx: {
fontWeight: 700,
fontSize: '32px',
lineHeight: '40px',
color: 'text.primary',
}, children: token?.priceUSD
? t('format.currency', {
value: token.priceUSD,
})
: noDataLabel }) }), !withoutContractAddress && (_jsx(MetricWithSkeleton, { isLoading: isLoading, label: t('tokenMetric.contractAddress'), width: 200, height: 24, children: _jsxs(Box, { sx: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: 1,
}, children: [_jsx(Typography, { sx: {
fontWeight: 700,
fontSize: '18px',
lineHeight: '24px',
color: 'text.primary',
}, children: shortenAddress(tokenAddress) }), tokenAddress && (_jsx(CardIconButton, { size: "small", onClick: copyContractAddress, children: _jsx(ContentCopyRounded, { fontSize: "inherit" }) })), tokenAddress && (_jsx(CardIconButton, { size: "small", LinkComponent: Link, href: getAddressLink(tokenAddress, chainId), target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), children: _jsx(OpenInNewRounded, { fontSize: "inherit" }) }))] }) })), _jsx(MetricWithSkeleton, { isLoading: isLoading, label: t('tokenMetric.marketCap'), width: 200, height: 24, children: _jsx(Typography, { sx: {
fontWeight: 700,
fontSize: '18px',
lineHeight: '24px',
color: 'text.primary',
}, children: token?.marketCapUSD
? t('format.currency', {
value: token.marketCapUSD,
notation: 'compact',
compactDisplay: 'short',
maximumFractionDigits: 2,
})
: noDataLabel }) }), _jsx(MetricWithSkeleton, { isLoading: isLoading, label: t('tokenMetric.volume24h'), width: 200, height: 24, children: _jsx(Typography, { sx: {
fontWeight: 700,
fontSize: '18px',
lineHeight: '24px',
color: 'text.primary',
}, children: token?.volumeUSD24H
? t('format.currency', {
value: token.volumeUSD24H,
notation: 'compact',
compactDisplay: 'short',
maximumFractionDigits: 2,
})
: noDataLabel }) })] }));
});
const MetricWithSkeleton = ({ label, width, height, isLoading, children, }) => {
return (_jsxs(MetricContainer, { children: [_jsx(Label, { children: label }), isLoading ? (_jsx(Skeleton, { variant: "rounded", width: width, height: height })) : (children)] }));
};
//# sourceMappingURL=TokenDetailsSheetContent.js.map