@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
35 lines • 1.64 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const index_js_1 = require("./index.js");
const useRelayClient_js_1 = tslib_1.__importDefault(require("../../hooks/useRelayClient.js"));
const RelayKitProvider_js_1 = require("../../providers/RelayKitProvider.js");
const ChainIcon = ({ chainId, css = {}, height = 14, width = 14, square = true }) => {
const providerOptions = (0, react_1.useContext)(RelayKitProvider_js_1.ProviderOptionsContext);
const client = (0, useRelayClient_js_1.default)();
const chain = chainId
? client?.chains?.find((chain) => chain.id === chainId)
: null;
const icon = chain
? providerOptions.themeScheme === 'dark'
? chain.icon?.dark || chain.icon?.light
: chain.icon?.light
: null;
const iconUrl = square && icon ? icon.replace('/icons/', '/icons/square/') : icon;
return iconUrl ? ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { css: {
display: 'flex',
flexShrink: 0,
...css
}, style: {
height: height,
width: width
}, children: iconUrl ? ((0, jsx_runtime_1.jsx)("img", { src: iconUrl, alt: `Chain #${chainId}`, style: {
borderRadius: square ? 4 : 0,
width: css && css.width ? Number(css.width) : '100%',
height: css && css.height ? Number(css.height) : '100%'
} })) : null })) : null;
};
exports.default = ChainIcon;
//# sourceMappingURL=ChainIcon.js.map