@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
37 lines • 2.39 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Flex, Text, Box, ChainTokenIcon } from '../../../primitives/index.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
import useRelayClient from '../../../../hooks/useRelayClient.js';
export const TokenTrigger = ({ token, locked, isSingleChainLocked, address }) => {
const relayClient = useRelayClient();
const chain = relayClient?.chains?.find((chain) => chain.id === token?.chainId);
return token ? (_jsxs(Button, { color: "white", corners: "pill", disabled: locked, css: {
height: 50,
minHeight: 50,
width: 'max-content',
flexShrink: 0,
overflow: 'hidden',
px: '3',
py: '2',
backgroundColor: 'widget-selector-background',
border: 'none',
_hover: {
backgroundColor: 'widget-selector-hover-background'
},
_disabled: {
backgroundColor: 'widget-selector-background'
}
}, children: [_jsxs(Flex, { align: "center", css: { gap: '2' }, children: [_jsx(ChainTokenIcon, { chainId: token.chainId, tokenlogoURI: token.logoURI, tokenSymbol: token.symbol, css: { width: 32, height: 32 } }), _jsxs(Flex, { direction: "column", align: "start", css: { maxWidth: 100, minWidth: 60 }, children: [_jsx(Text, { style: "h6", ellipsify: true, css: { maxWidth: '100%' }, children: token.symbol }), _jsx(Text, { style: "subtitle3", ellipsify: true, color: "subtle", css: { lineHeight: '15px', maxWidth: '100%' }, children: chain?.displayName })] })] }), locked ? null : (_jsx(Box, { css: { color: 'gray11', width: 14, flexShrink: 0 }, children: _jsx(FontAwesomeIcon, { icon: faChevronRight, width: 14 }) }))] })) : (_jsxs(Button, { color: address ? 'primary' : 'secondary', corners: "pill", css: {
height: 50,
minHeight: 50,
width: 'max-content',
flexShrink: 0,
overflow: 'hidden',
px: '3',
py: '2',
fontWeight: 700,
fontSize: '16px'
}, children: ["Select Token", _jsx(Box, { css: { width: 14 }, children: _jsx(FontAwesomeIcon, { icon: faChevronRight, width: 14 }) })] }));
};
//# sourceMappingURL=TokenTrigger.js.map