@broxus/tvm-connect
Version:
Nekoton-compatible wallets connector.
42 lines (41 loc) • 2.37 kB
JavaScript
import { Button } from '@broxus/react-uikit';
import { observer } from 'mobx-react-lite';
import * as React from 'react';
import { TvmConnectDialog } from '../../components/TvmConnectDialog';
import { TvmWalletProvidersContext, TvmWalletProvidersProvider, useTvmWalletService } from '../../context';
import { convertNetworkToChainParams } from '../../utils';
export const TvmConnectButton = observer(({ disabled, network, popupClassName, popupType, trigger, onClose, onConnect, onOpen, ...props }) => {
const walletService = useTvmWalletService();
const walletProviders = React.useContext(TvmWalletProvidersContext);
const { standalone = walletService.providers?.length === 1, ...restProps } = props;
const [isModalShown, setModalVisibility] = React.useState(false);
const close = React.useCallback(() => {
setModalVisibility(false);
onClose?.();
}, [onClose]);
const open = React.useCallback(() => {
setModalVisibility(true);
onOpen?.();
}, [onOpen]);
const connect = React.useCallback(async () => {
setModalVisibility(false);
const networkParams = network?.chainId ? convertNetworkToChainParams(network) : undefined;
await Promise.allSettled([
onConnect?.(walletService),
walletService.connect(networkParams).catch(() => {
if (walletService.providers?.length > 1) {
open();
}
}),
]);
}, [network, onConnect, open, walletService]);
const mergedDisabled = disabled === undefined
? walletService.isInitializing || walletService.isConnecting
: disabled;
return (React.createElement(React.Fragment, null,
typeof trigger === 'function'
? trigger({ connect: standalone ? connect : open, disabled: mergedDisabled })
: (React.createElement(Button, { "aria-disabled": mergedDisabled, disabled: mergedDisabled, ...restProps, onClick: standalone ? connect : open })),
!standalone && (React.createElement(TvmWalletProvidersProvider, { agreementsNote: walletProviders?.agreementsNote, network: network, recentMetaStorageKey: walletProviders?.recentMetaStorageKey, onConnect: close },
React.createElement(TvmConnectDialog, { className: popupClassName, open: isModalShown, type: popupType, onClose: close })))));
});