@broxus/tvm-connect
Version:
TypeScript SDK for connecting to Nekoton-compatible wallets using a unified interface.
67 lines (66 loc) • 3.87 kB
JavaScript
import { debounce } from '@broxus/js-utils';
import { Grid, Text, useMounted } from '@broxus/react-uikit';
import classNames from 'classnames';
import { Observer, observer } from 'mobx-react-lite';
import * as React from 'react';
import { useIntl } from 'react-intl';
import { TvmConnectionRequest } from '../components/TvmConnectionRequest';
import { TvmInstallationGuide } from '../components/TvmInstallationGuide';
import { TvmProviderQRCode } from '../components/TvmProviderQRCode';
import { TvmProvidersList } from '../components/TvmProvidersList';
import { useTvmConnectDialog, useTvmConnectService } from '../context';
import messages from '../intl';
import { ConnectionType } from '../types';
export const TvmProvidersDispatcher = observer(() => {
const intl = useIntl();
const service = useTvmConnectService();
const dialog = useTvmConnectDialog();
const isMounted = useMounted();
const container = React.useRef(null);
const content = React.useRef(null);
// eslint-disable-next-line react-hooks/exhaustive-deps
React.useLayoutEffect(debounce(() => {
if (container.current) {
const height = content.current?.clientHeight;
container.current.style.height = height ? `${Math.ceil(height) + 1}px` : '';
}
}, 50), [
dialog.connectingProvider,
dialog.connectingProvider?.connector.isInitialized,
dialog.connectingProvider?.connector.isInitializing,
dialog.connectingProvider?.connector.isConnecting,
dialog.error,
dialog.requestState,
]);
if (service?.providers?.length === 0) {
return (React.createElement("div", { ref: container, className: "tvm-connect-providers-dispatcher" },
React.createElement("div", { className: "uk-text-left uk-padding-large uk-padding-remove-horizontal" }, intl.formatMessage(messages.TVM_CONNECT_POPUP_NO_PROVIDERS_HINT))));
}
return (React.createElement("div", { ref: container, className: "tvm-connect-providers-dispatcher" },
React.createElement("div", { ref: content },
React.createElement(Observer, null, () => {
switch (true) {
case dialog.connectingProvider?.connector.type === ConnectionType.EXTERNAL_APP:
return React.createElement("div", null, "...");
case dialog.requestState === 'mobile':
return React.createElement(TvmProviderQRCode, null);
case dialog.requestState === 'connecting':
return React.createElement(TvmConnectionRequest, null);
case dialog.requestState === 'installation':
return React.createElement(TvmInstallationGuide, null);
default:
return (React.createElement("div", { className: classNames('tvm-connect-provider-content', {
'uk-animation-fade': isMounted,
}), style: isMounted ? {
animationDelay: 'var(--animation-medium-fast-duration)',
animationDuration: 'var(--animation-fast-duration)',
animationTimingFunction: 'var(--ease-in)',
} : undefined },
React.createElement(Grid, { childWidth: 1, gap: dialog.popupType === 'drawer' ? 'medium' : undefined },
React.createElement("div", null,
React.createElement(Text, { align: "center", component: "div", kind: "meta" }, intl.formatMessage(messages.TVM_CONNECT_POPUP_NOTE))),
React.createElement("div", null,
React.createElement(TvmProvidersList, null)))));
}
}))));
});