@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.
23 lines • 1.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '@mui/material';
import { memo } from 'react';
import { Avatar, ListItem, ListItemAvatar, ListItemButton, ListItemText, } from './ChainList.style.js';
import { PinChainButton, pinButtonClassName } from './PinChainButton.js';
export const ChainListItem = memo(({ chain, onSelect, selected, itemsSize, size, start, isPinned, onPin, withPin, }) => {
return (_jsx(ListItem, { style: {
height: `${size}px`,
transform: `translateY(${start}px)`,
padding: 0,
overflow: 'hidden',
}, sx: {
[`&:hover .${pinButtonClassName}`]: {
opacity: 1,
transform: 'translateY(0)',
},
}, children: _jsxs(ListItemButton, { onClick: () => onSelect(chain), selected: selected, size: itemsSize, children: [_jsx(ListItemAvatar, { size: itemsSize, children: _jsx(Avatar, { src: chain.logoURI, alt: chain.name, size: itemsSize, children: chain.name[0] }) }), _jsx(ListItemText, { primary: chain.name, size: itemsSize }), withPin && (_jsx(Box, { style: {
position: 'relative',
height: 28,
width: 28,
}, children: _jsx(PinChainButton, { isPinned: isPinned, onPin: () => onPin(chain.id) }) }))] }) }));
});
//# sourceMappingURL=ChainListItem.js.map