@broxus/tvm-connect
Version:
Nekoton-compatible wallets connector.
44 lines (43 loc) • 2.57 kB
JavaScript
import { List } from '@broxus/react-uikit';
import { Observer, observer } from 'mobx-react-lite';
import * as React from 'react';
import { useIntl } from 'react-intl';
import { ConnectionRequest } from '../../components/TvmProvidersDispatcher/ConnectionRequest';
import { ProviderButton } from '../../components/TvmProvidersDispatcher/ProviderButton';
import { useTvmWalletProviders, useTvmWalletService } from '../../context';
import { useOrderedConnections, useRecentConnectionMeta } from '../../hooks';
import messages from '../../intl';
import { ConnectionType } from '../../types';
import './index.css';
export const TvmProvidersDispatcher = observer(() => {
const intl = useIntl();
const walletService = useTvmWalletService();
const walletProviders = useTvmWalletProviders();
const [recentMeta] = useRecentConnectionMeta();
const orderedProviders = useOrderedConnections(walletService.providers ?? [], recentMeta);
const dispatcher = React.useRef(null);
const content = React.useRef(null);
React.useLayoutEffect(() => {
if (dispatcher.current) {
const height = content.current?.clientHeight;
dispatcher.current.style.height = height ? `${height}px` : '';
}
}, [walletProviders.connectingProvider, walletProviders.error]);
if (walletService.providers.length === 0) {
return (React.createElement("div", { ref: dispatcher, className: "tvm-connect-providers-dispatcher" },
React.createElement("div", { className: "uk-padding-large" }, intl.formatMessage(messages.TVM_CONNECT_DISPATCHER_POPUP_NO_PROVIDERS_HINT))));
}
return (React.createElement("div", { ref: dispatcher, className: "tvm-connect-providers-dispatcher" },
React.createElement("div", { ref: content },
React.createElement(Observer, null, () => {
switch (true) {
case walletProviders.connectingProvider?.connector.type === ConnectionType.EXTERNAL_APP:
return React.createElement("div", null, "...");
case !!walletProviders.connectingProvider:
return React.createElement(ConnectionRequest, null);
default:
return (React.createElement(List, { className: "tvm-connect-providers-list" }, orderedProviders?.map(providerConfig => (React.createElement(List.Item, { key: providerConfig.id },
React.createElement(ProviderButton, { providerConfig: providerConfig }))))));
}
}))));
});