@0xsequence/connect
Version:
Connect package for Sequence Web SDK
18 lines • 1.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card, Text, TokenImage } from '@0xsequence/design-system';
import { SelectedIndicator } from './SelectedIndicator.js';
export const CryptoOption = ({ currencyName, chainId, iconUrl, symbol, price, onClick, isSelected, showInsufficientFundsWarning = undefined, disabled }) => {
const onClickCard = () => {
if (!showInsufficientFundsWarning && !disabled) {
onClick();
}
};
return (_jsxs(Card, { className: "flex w-full justify-between p-4 cursor-pointer", onClick: onClickCard, children: [_jsxs("div", { className: "flex flex-row gap-3", children: [_jsx("div", { className: "w-fit", children: _jsx(TokenImage, { src: iconUrl, size: "lg", symbol: symbol, withNetwork: chainId, disableAnimation: true }) }), _jsxs("div", { className: "flex flex-col justify-center", children: [_jsx(Text, { className: "whitespace-nowrap", variant: "normal", fontWeight: "bold", color: "primary", ellipsis: true, style: {
overflow: 'hidden',
maxWidth: '215px'
}, children: currencyName }), price && (_jsx(Text, { className: "whitespace-nowrap", variant: "normal", color: "muted", ellipsis: true, style: {
overflow: 'hidden',
width: '215px'
}, children: `${price} ${symbol}` }))] })] }), _jsx("div", { className: "flex flex-row justify-center items-center gap-3", children: showInsufficientFundsWarning ? (_jsx("div", { className: "flex flex-col text-center justify-between items-end", children: _jsx(Text, { variant: "small", color: "negative", children: "Insufficient funds" }) })) : (_jsx(SelectedIndicator, { selected: isSelected })) })] }));
};
//# sourceMappingURL=CryptoOption.js.map