@broxus/tvm-connect
Version:
Nekoton-compatible wallets connector.
42 lines (41 loc) • 2.97 kB
JavaScript
import { Close } from '@broxus/react-components';
import { Component, Drawer, Modal, Text, addModalMode, removeModalMode } from '@broxus/react-uikit';
import classNames from 'classnames';
import { observer } from 'mobx-react-lite';
import * as React from 'react';
import { useIntl } from 'react-intl';
import { TvmProvidersDispatcher } from '../../components';
import { useTvmWalletProviders } from '../../context';
import messages from '../../intl';
import './index.css';
export const TvmConnectDialog = observer(({ className, open, type, onClose }) => {
const intl = useIntl();
const walletProviders = useTvmWalletProviders();
const onClosed = () => {
removeModalMode('tvm-modal-page');
walletProviders.reset();
};
React.useEffect(() => {
if (open) {
addModalMode('tvm-modal-page');
}
}, [open]);
// eslint-disable-next-line react-hooks/exhaustive-deps
React.useEffect(() => onClosed, []);
if (type === 'drawer') {
return (React.createElement(Drawer, { className: className, destroyOnHidden: true, keyboard: !walletProviders.connectingProvider, maskClosable: !walletProviders.connectingProvider, motion: {
motionLeave: true,
removeOnLeave: true,
// eslint-disable-next-line sort-keys
onLeaveEnd: onClosed,
}, open: open, placement: "bottom", push: false, rootClassName: "tvm-connect-drawer", onClose: onClose },
React.createElement(Close, { kind: "drawer", ratio: 0.9, onClick: onClose }),
React.createElement(Component, { className: "uk-drawer-header" },
React.createElement(Component, { className: "uk-drawer-title" }, intl.formatMessage(messages.TVM_CONNECT_DISPATCHER_POPUP_TITLE))),
React.createElement("div", { className: "uk-drawer-body" },
React.createElement(TvmProvidersDispatcher, null)),
walletProviders.agreementsNote !== false && (React.createElement(Text, { align: "center", className: "uk-drawer-footer uk-margin-top", component: "footer", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(messages.TVM_CONNECT_AGREEMENTS_NOTE)))));
}
return (React.createElement(Modal, { centered: true, className: classNames('tvm-connect-modal', className), closeIcon: React.createElement(Close, { kind: "modal", ratio: 0.9, onClick: onClose }), destroyOnHidden: true, footer: walletProviders.agreementsNote !== false && (React.createElement(Text, { align: "center", component: "div", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(messages.TVM_CONNECT_AGREEMENTS_NOTE))), keyboard: !walletProviders.connectingProvider, maskClosable: !walletProviders.connectingProvider, title: intl.formatMessage(messages.TVM_CONNECT_DISPATCHER_POPUP_TITLE), visible: open, width: 380, onClose: onClose, onClosed: onClosed },
React.createElement(TvmProvidersDispatcher, null)));
});