@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
70 lines • 5.63 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Modal } from './Modal.js';
import { Anchor, Box, Button, Flex, Text } from '../primitives/index.js';
import { CopyToClipBoard } from './CopyToClipBoard.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExclamationTriangle, faExternalLink } from '@fortawesome/free-solid-svg-icons';
import useRelayClient from '../../hooks/useRelayClient.js';
import { alreadyAcceptedToken, getRelayUiKitData, setRelayUiKitData } from '../../utils/localStorage.js';
import { EventNames } from '../../constants/events.js';
export const UnverifiedTokenModal = ({ open, onOpenChange, data, onAcceptToken, onDecline, onAnalyticEvent }) => {
const client = useRelayClient();
const chain = client?.chains?.find((chain) => chain.id === data?.token?.chainId);
const isValidTokenLogo = data?.token?.logoURI && data?.token?.logoURI !== 'missing.png';
return (_jsx(Modal, { trigger: null, open: open, onOpenChange: onOpenChange, onPointerDownOutside: () => {
onDecline?.(data?.token, data?.context);
}, onCloseButtonClicked: () => {
onDecline?.(data?.token, data?.context);
}, css: {
overflow: 'hidden',
zIndex: 1000
}, overlayZIndex: 10001, children: _jsxs(Flex, { direction: "column", css: {
width: '100%',
height: '100%',
gap: '4',
sm: {
width: 370
}
}, children: [_jsx(Text, { style: "h6", children: "Unverified Token" }), _jsxs(Flex, { align: "center", direction: "column", css: { gap: '4' }, children: [_jsxs(Flex, { align: "center", justify: "center", children: [isValidTokenLogo ? (_jsx("img", { src: data?.token.logoURI, alt: data?.token?.name, style: { width: '48px', height: '48px', borderRadius: 9999 } })) : null, _jsx(Flex, { align: "center", css: {
width: '48px',
height: '48px',
background: 'amber3',
borderRadius: 9999,
p: '3',
marginLeft: isValidTokenLogo ? '-20px' : '0'
}, children: _jsx(Box, { css: { color: 'amber9' }, children: _jsx(FontAwesomeIcon, { icon: faExclamationTriangle, width: 24, height: 24, style: { width: 24, height: 24 } }) }) })] }), _jsx(Text, { style: "subtitle2", color: "subtle", css: { textAlign: 'center' }, children: "This token isn\u2019t traded on leading U.S. centralized exchanges or frequently swapped on major DEXes. Always conduct your own research before trading." }), _jsxs(Flex, { align: "center", css: {
gap: '3',
p: '3',
bg: 'gray2',
borderRadius: '12px',
width: '100%'
}, children: [_jsx(Text, { style: "subtitle2", ellipsify: true, children: data?.token?.address }), _jsx(CopyToClipBoard, { text: data?.token?.address ?? '' }), _jsx(Anchor, { href: `${chain?.explorerUrl}/token/${data?.token?.address}`, target: "_blank", css: { height: '14px' }, children: _jsx(Box, { css: { color: 'gray9', _hover: { color: 'gray11' } }, children: _jsx(FontAwesomeIcon, { icon: faExternalLink }) }) })] }), _jsxs(Flex, { css: { gap: '3', width: '100%' }, children: [_jsx(Button, { onClick: () => {
onDecline?.(data?.token, data?.context);
onOpenChange(false);
}, color: "ghost", css: {
flex: 1,
justifyContent: 'center',
bg: 'gray3',
_hover: { bg: 'gray4' }
}, children: "Cancel" }), _jsx(Button, { onClick: () => {
if (data?.token) {
const tokenIdentifier = `${data?.token.chainId}:${data?.token.address}`;
const alreadyAccepted = alreadyAcceptedToken(data?.token);
const currentData = getRelayUiKitData();
if (!alreadyAccepted) {
setRelayUiKitData({
acceptedUnverifiedTokens: [
...currentData.acceptedUnverifiedTokens,
tokenIdentifier
]
});
}
onAnalyticEvent?.(EventNames.UNVERIFIED_TOKEN_ACCEPTED, {
token: data?.token,
context: data?.context
});
}
onAcceptToken(data?.token, data?.context);
}, color: "warning", css: { flex: 1, justifyContent: 'center' }, children: "I Understand" })] })] })] }) }));
};
//# sourceMappingURL=UnverifiedTokenModal.js.map