@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
50 lines • 2.06 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import {} from 'react';
import Flex from './Flex.js';
import ChainIcon from './ChainIcon.js';
import Box from './Box.js';
import Text from './Text.js';
const SIZES = {
md: {
token: 32,
chain: 16
},
lg: {
token: 40,
chain: 18
}
};
export const ChainTokenIcon = ({ chainId, tokenlogoURI, tokenSymbol, css = {}, size = 'md' }) => {
const isValidTokenLogo = tokenlogoURI && tokenlogoURI !== 'missing.png';
const dimensions = SIZES[size];
return chainId ? (_jsxs(Flex, { css: {
position: 'relative',
flexShrink: 0,
width: dimensions.token,
height: dimensions.token,
overflow: 'hidden',
...css
}, children: [isValidTokenLogo ? (_jsx("img", { alt: 'Token', src: tokenlogoURI, width: dimensions.token, height: dimensions.token, style: {
borderRadius: 9999,
overflow: 'hidden'
} })) : tokenSymbol ? (_jsx(Box, { css: {
width: dimensions.token,
height: dimensions.token,
borderRadius: '50%',
backgroundColor: 'primary4',
color: 'primary8',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}, children: _jsx(Text, { style: "h6", children: tokenSymbol?.charAt(0).toUpperCase() }) })) : null, _jsx(ChainIcon, { chainId: chainId, width: dimensions.chain, height: dimensions.chain, css: {
position: 'absolute',
right: 0,
bottom: 0,
borderRadius: 4,
overflow: 'hidden',
'--borderColor': 'colors.modal-background',
border: '1px solid var(--borderColor)',
backgroundColor: 'modal-background'
} })] })) : null;
};
//# sourceMappingURL=ChainTokenIcon.js.map