@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
54 lines • 2.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChainTokenIcon = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const Flex_js_1 = tslib_1.__importDefault(require("./Flex.js"));
const ChainIcon_js_1 = tslib_1.__importDefault(require("./ChainIcon.js"));
const Box_js_1 = tslib_1.__importDefault(require("./Box.js"));
const Text_js_1 = tslib_1.__importDefault(require("./Text.js"));
const SIZES = {
md: {
token: 32,
chain: 16
},
lg: {
token: 40,
chain: 18
}
};
const ChainTokenIcon = ({ chainId, tokenlogoURI, tokenSymbol, css = {}, size = 'md' }) => {
const isValidTokenLogo = tokenlogoURI && tokenlogoURI !== 'missing.png';
const dimensions = SIZES[size];
return chainId ? ((0, jsx_runtime_1.jsxs)(Flex_js_1.default, { css: {
position: 'relative',
flexShrink: 0,
width: dimensions.token,
height: dimensions.token,
overflow: 'hidden',
...css
}, children: [isValidTokenLogo ? ((0, jsx_runtime_1.jsx)("img", { alt: 'Token', src: tokenlogoURI, width: dimensions.token, height: dimensions.token, style: {
borderRadius: 9999,
overflow: 'hidden'
} })) : tokenSymbol ? ((0, jsx_runtime_1.jsx)(Box_js_1.default, { css: {
width: dimensions.token,
height: dimensions.token,
borderRadius: '50%',
backgroundColor: 'primary4',
color: 'primary8',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}, children: (0, jsx_runtime_1.jsx)(Text_js_1.default, { style: "h6", children: tokenSymbol?.charAt(0).toUpperCase() }) })) : null, (0, jsx_runtime_1.jsx)(ChainIcon_js_1.default, { 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;
};
exports.ChainTokenIcon = ChainTokenIcon;
//# sourceMappingURL=ChainTokenIcon.js.map