@broxus/tvm-connect
Version:
TypeScript SDK for connecting to Nekoton-compatible wallets using a unified interface.
56 lines (55 loc) • 3.61 kB
JavaScript
import { getScrollWidth } from '@broxus/js-utils';
import { Close } from '@broxus/react-components';
import { addModalMode, Component, Drawer, Modal, removeModalMode, Text } 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 { CONTAINER_ID } from '../constants';
import { useSharedParams, useTvmConnectDialog } from '../context';
import messages from '../intl';
export const TvmConnectDialog = observer(({ agreementsNote, className, isActive, popupType, onClose, }) => {
const intl = useIntl();
const params = useSharedParams();
const dialog = useTvmConnectDialog();
const onClosed = React.useCallback(() => {
removeModalMode('tvm-modal-page');
dialog.setState('requestState', undefined);
dialog.reset();
}, [dialog]);
React.useEffect(() => {
if (isActive ?? dialog.isActive) {
addModalMode('tvm-modal-page');
}
}, [dialog.isActive, isActive]);
React.useEffect(() => onClosed, [onClosed]);
const mergedPopupType = popupType ?? dialog.popupType ?? params.popupType;
if (mergedPopupType === 'drawer') {
return (React.createElement(Drawer, { className: className, destroyOnHidden: true, getContainer: `#${CONTAINER_ID}`, keyboard: !dialog.connectingProvider, maskClosable: !dialog.connectingProvider, motion: {
motionLeave: true,
removeOnLeave: true,
onLeaveEnd: onClosed,
}, open: isActive ?? dialog.isActive, placement: "bottom", push: false, rootClassName: "tvm-connect-drawer", style: {
// @ts-ignore yeah yeah
'--global-scroll-width': `${getScrollWidth()}px`,
}, 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_POPUP_TITLE))),
React.createElement("div", { className: "uk-drawer-body" },
React.createElement(TvmProvidersDispatcher, null)),
agreementsNote !== false && (React.createElement(Text, { align: "center", className: "uk-drawer-footer uk-margin-top", component: "footer", kind: "meta" }, agreementsNote || intl.formatMessage(messages.TVM_CONNECT_AGREEMENTS_NOTE, {
policy: parts => parts,
terms: parts => parts,
})))));
}
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: agreementsNote !== false && (React.createElement(Text, { align: "center", component: "div", kind: "meta" }, agreementsNote || intl.formatMessage(messages.TVM_CONNECT_AGREEMENTS_NOTE, {
policy: parts => parts,
terms: parts => parts,
}))), getContainer: `#${CONTAINER_ID}`, keyboard: !dialog.connectingProvider, maskClosable: !dialog.connectingProvider, style: {
// @ts-ignore yeah yeah
'--global-scroll-width': `${getScrollWidth()}px`,
}, title: intl.formatMessage(messages.TVM_CONNECT_POPUP_TITLE), visible: isActive ?? dialog.isActive, onClose: onClose, onClosed: onClosed },
React.createElement(TvmProvidersDispatcher, null)));
});