@broxus/tvm-connect
Version:
TypeScript SDK for connecting to Nekoton-compatible wallets using a unified interface.
76 lines (75 loc) • 5.43 kB
JavaScript
import { getUserAgent, isMobile } from '@broxus/js-utils';
import { TokenIcon } from '@broxus/react-components';
import { Button, Text } from '@broxus/react-uikit';
import { ProviderRpcClient } from 'everscale-inpage-provider';
import { reaction } from 'mobx';
import { observer } from 'mobx-react-lite';
import * as React from 'react';
import { useIntl } from 'react-intl';
import { useSharedParams, useTvmConnectDialog, useTvmConnectService } from '../context';
import messages from '../intl';
export const TvmProviderButton = observer(({ providerConfig, onSelect: onSelectProvider, }) => {
const intl = useIntl();
const service = useTvmConnectService();
const params = useSharedParams();
const dialog = useTvmConnectDialog();
const ua = getUserAgent();
const providerInfo = providerConfig.connector?.info;
const homepage = providerInfo?.links?.homepage;
const universalLink = providerInfo?.links?.universalLink;
const currentLocation = window?.location.href;
const [hasProvider, setHasProvider] = React.useState();
const onSelect = async () => {
dialog.setData({ connectingProvider: providerConfig });
if (!hasProvider) {
dialog.setState({
error: undefined,
requestState: (universalLink && (dialog.qrEnabled ?? params.qrEnabled ?? true)) ? 'mobile' : 'installation',
});
onSelectProvider?.(providerConfig);
return;
}
dialog.setState({
error: undefined,
requestState: (universalLink && (dialog.qrEnabled ?? params.qrEnabled ?? true)) ? 'mobile' : 'connecting',
});
if (dialog.requestState === 'connecting') {
await dialog.connectTo(providerConfig);
}
};
const isInitializing = providerConfig.connector.isInitializing == null || providerConfig.connector.isInitializing;
React.useEffect(() => reaction(() => providerConfig.connector, async (connector) => {
const isProviderRpcClient = connector.provider instanceof ProviderRpcClient;
if (isProviderRpcClient && typeof connector.provider?.hasProvider === 'function') {
setHasProvider(await connector.provider.hasProvider());
return;
}
setHasProvider(connector.provider != null);
}, { fireImmediately: true }), [providerConfig]);
// Display initializing placeholder
if (!hasProvider && isInitializing) {
return (React.createElement(Button, { className: "tvm-connect-provider-button", disabled: true },
React.createElement("span", { className: "tvm-connect-provider-icon" }, typeof providerInfo?.icon === 'string' ? (React.createElement(TokenIcon, { iconUrl: providerInfo.icon, size: 32 })) : providerInfo?.icon),
React.createElement("span", { className: "tvm-connect-provider-title" },
providerInfo?.name,
providerInfo?.description && (React.createElement(Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "xsmall", wrap: "truncate" },
React.createElement(Text, { loading: true }, intl.formatMessage(messages.TVM_CONNECT_INITIALIZING_HINT)))))));
}
// Display button that will redirect to the installed wallet app or store page
if (isMobile(ua) && !hasProvider && (universalLink || homepage)) {
return (React.createElement(Button, { className: "tvm-connect-provider-button", href: universalLink ? universalLink.concat(`&link=${encodeURIComponent(currentLocation)}`) : homepage, rel: "noopener noreferrer", target: "_blank" },
React.createElement("span", { className: "tvm-connect-provider-icon" }, typeof providerInfo?.icon === 'string' ? (React.createElement(TokenIcon, { iconUrl: providerInfo.icon, size: 32 })) : providerInfo?.icon),
React.createElement("span", { className: "tvm-connect-provider-title" },
providerInfo?.name,
providerInfo?.description && (React.createElement(Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "xsmall", wrap: "truncate" }, providerInfo.description)))));
}
const isConnected = service?.isConnected && service.providerId === providerConfig.id;
const isConnecting = service?.isConnecting && dialog.connectingProvider?.id === providerConfig.id;
return (React.createElement(Button, { className: "tvm-connect-provider-button", disabled: isConnected || isConnecting, onClick: onSelect },
React.createElement("span", { className: "tvm-connect-provider-icon" }, typeof providerInfo?.icon === 'string' ? (React.createElement(TokenIcon, { iconUrl: providerInfo.icon, size: 32 })) : providerInfo?.icon),
React.createElement("span", { className: "tvm-connect-provider-title" },
providerInfo?.name,
providerInfo?.description && (React.createElement(Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "xsmall", wrap: "truncate" }, providerInfo.description))),
isConnected && (React.createElement("span", { className: "tvm-connect-provider-connected" }, intl.formatMessage(messages.TVM_CONNECT_POPUP_CONNECTED_HINT))),
!isConnected && providerConfig.isRecent && (React.createElement("span", { className: "tvm-connect-provider-recent" }, intl.formatMessage(messages.TVM_CONNECT_POPUP_RECENT_HINT)))));
});