@broxus/tvm-connect
Version:
Nekoton-compatible wallets connector.
87 lines (86 loc) • 6.73 kB
JavaScript
import { camelToSnake, getUserAgent, isMobile } from '@broxus/js-utils';
import { TokenIcon } from '@broxus/react-components';
import { Button, Spinner, 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 { useTvmWalletProviders, useTvmWalletService } from '../../../context';
import messages from '../../../intl';
import { getTvmProviderPlatformLink } from '../../../utils';
import './index.css';
export const ProviderButton = observer(({ providerConfig, onSelect: onSelectProvider }) => {
const intl = useIntl();
const walletService = useTvmWalletService();
const walletProviders = useTvmWalletProviders();
const [hasProvider, setHasProvider] = React.useState();
const onSelect = async () => {
if (hasProvider) {
await walletProviders.connect(providerConfig);
onSelectProvider?.(providerConfig);
}
};
// eslint-disable-next-line max-len
const isInitializing = providerConfig.connector.isInitializing === undefined || providerConfig.connector.isInitializing;
React.useEffect(() => reaction(() => providerConfig.connector, async (connector) => {
if (connector.provider instanceof ProviderRpcClient
&& typeof connector.provider?.hasProvider === 'function') {
setHasProvider(await connector.provider.hasProvider());
return;
}
setHasProvider(connector.provider != null);
}, { fireImmediately: true }), [providerConfig.connector]);
if (!hasProvider && isInitializing) {
return (React.createElement(Button, { className: "tvm-connect-provider-button", disabled: true },
React.createElement("span", { className: "tvm-connect-provider-icon" }, typeof providerConfig.info.icon === 'string' ? (React.createElement(TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
React.createElement("span", { className: "tvm-connect-provider-title" }, intl.formatMessage(messages.TVM_CONNECT_INITIALIZING_HINT)),
React.createElement("span", null,
React.createElement(Spinner, { ratio: 0.8 }))));
}
const ua = getUserAgent();
const homepage = providerConfig.info.links?.homepage;
const universalLink = providerConfig.info.links?.universalLink;
if (isMobile(ua) && !hasProvider && universalLink) {
return (React.createElement(Button, { className: "tvm-connect-provider-button", href: universalLink, rel: "noopener noreferrer", target: "_blank" },
React.createElement("span", { className: "tvm-connect-provider-icon" }, typeof providerConfig.info.icon === 'string' ? (React.createElement(TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
React.createElement("span", { className: "tvm-connect-provider-title" },
providerConfig.info.name,
providerConfig.info.description && (React.createElement(Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "xsmall", wrap: "truncate" }, providerConfig.info.description)))));
}
if (!hasProvider) {
const [platform = 'UNKNOWN', uri] = getTvmProviderPlatformLink({ ...providerConfig.info.links }) ?? [];
if (!uri && homepage) {
return (React.createElement(Button, { className: "tvm-connect-provider-button", href: homepage, rel: "noopener noreferrer", target: "_blank" },
React.createElement("span", { className: "tvm-connect-provider-icon" }, typeof providerConfig.info.icon === 'string' ? (React.createElement(TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
React.createElement("span", { className: "tvm-connect-provider-title" },
intl.formatMessage(messages.TVM_CONNECT_PROVIDER_HOMEPAGE, {
providerName: providerConfig.info.name ?? '',
}),
React.createElement(Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "small", wrap: "truncate" }, intl.formatMessage(messages.TVM_CONNECT_PROVIDER_HOMEPAGE_NOTE)))));
}
let text;
try {
text = intl.formatMessage(
// @ts-ignore
messages[`TVM_CONNECT_INSTALL_${camelToSnake(platform)}_PLATFORM`.toUpperCase()]);
}
catch { }
return (React.createElement(Button, { className: "tvm-connect-provider-button", href: uri, rel: "noopener noreferrer", target: "_blank" },
React.createElement("span", { className: "tvm-connect-provider-icon" }, typeof providerConfig.info.icon === 'string' ? (React.createElement(TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
React.createElement("span", { className: "tvm-connect-provider-title" },
intl.formatMessage(messages.TVM_CONNECT_INSTALL_PROVIDER, {
providerName: providerConfig.info.name ?? '',
}),
React.createElement(Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "small", wrap: "truncate" }, text))));
}
const isConnected = walletService.isConnected && walletService.providerId === providerConfig.id;
const isConnecting = walletService.isConnecting && walletProviders.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 providerConfig.info.icon === 'string' ? (React.createElement(TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
React.createElement("span", { className: "tvm-connect-provider-title" },
providerConfig.info.name,
providerConfig.info.description && (React.createElement(Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "xsmall", wrap: "truncate" }, providerConfig.info.description))),
isConnected && (React.createElement("span", { className: "tvm-connect-provider-connected" }, intl.formatMessage(messages.TVM_CONNECT_DISPATCHER_POPUP_CONNECTED_HINT))),
!isConnected && providerConfig.isRecent && (React.createElement("span", { className: "tvm-connect-provider-recent" }, intl.formatMessage(messages.TVM_CONNECT_DISPATCHER_POPUP_RECENT_HINT)))));
});