@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
75 lines • 6.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UnverifiedTokenModal = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const Modal_js_1 = require("./Modal.js");
const index_js_1 = require("../primitives/index.js");
const CopyToClipBoard_js_1 = require("./CopyToClipBoard.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const useRelayClient_js_1 = tslib_1.__importDefault(require("../../hooks/useRelayClient.js"));
const localStorage_js_1 = require("../../utils/localStorage.js");
const events_js_1 = require("../../constants/events.js");
const UnverifiedTokenModal = ({ open, onOpenChange, data, onAcceptToken, onDecline, onAnalyticEvent }) => {
const client = (0, useRelayClient_js_1.default)();
const chain = client?.chains?.find((chain) => chain.id === data?.token?.chainId);
const isValidTokenLogo = data?.token?.logoURI && data?.token?.logoURI !== 'missing.png';
return ((0, jsx_runtime_1.jsx)(Modal_js_1.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: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
width: '100%',
height: '100%',
gap: '4',
sm: {
width: 370
}
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", children: "Unverified Token" }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", direction: "column", css: { gap: '4' }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", justify: "center", children: [isValidTokenLogo ? ((0, jsx_runtime_1.jsx)("img", { src: data?.token.logoURI, alt: data?.token?.name, style: { width: '48px', height: '48px', borderRadius: 9999 } })) : null, (0, jsx_runtime_1.jsx)(index_js_1.Flex, { align: "center", css: {
width: '48px',
height: '48px',
background: 'amber3',
borderRadius: 9999,
p: '3',
marginLeft: isValidTokenLogo ? '-20px' : '0'
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'amber9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faExclamationTriangle, width: 24, height: 24, style: { width: 24, height: 24 } }) }) })] }), (0, jsx_runtime_1.jsx)(index_js_1.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." }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: {
gap: '3',
p: '3',
bg: 'gray2',
borderRadius: '12px',
width: '100%'
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", ellipsify: true, children: data?.token?.address }), (0, jsx_runtime_1.jsx)(CopyToClipBoard_js_1.CopyToClipBoard, { text: data?.token?.address ?? '' }), (0, jsx_runtime_1.jsx)(index_js_1.Anchor, { href: `${chain?.explorerUrl}/token/${data?.token?.address}`, target: "_blank", css: { height: '14px' }, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray9', _hover: { color: 'gray11' } }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faExternalLink }) }) })] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { gap: '3', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Button, { onClick: () => {
onDecline?.(data?.token, data?.context);
onOpenChange(false);
}, color: "ghost", css: {
flex: 1,
justifyContent: 'center',
bg: 'gray3',
_hover: { bg: 'gray4' }
}, children: "Cancel" }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { onClick: () => {
if (data?.token) {
const tokenIdentifier = `${data?.token.chainId}:${data?.token.address}`;
const alreadyAccepted = (0, localStorage_js_1.alreadyAcceptedToken)(data?.token);
const currentData = (0, localStorage_js_1.getRelayUiKitData)();
if (!alreadyAccepted) {
(0, localStorage_js_1.setRelayUiKitData)({
acceptedUnverifiedTokens: [
...currentData.acceptedUnverifiedTokens,
tokenIdentifier
]
});
}
onAnalyticEvent?.(events_js_1.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" })] })] })] }) }));
};
exports.UnverifiedTokenModal = UnverifiedTokenModal;
//# sourceMappingURL=UnverifiedTokenModal.js.map