@broxus/tvm-connect
Version:
TypeScript SDK for connecting to Nekoton-compatible wallets using a unified interface.
87 lines (86 loc) • 4.9 kB
JavaScript
import { Icon } from '@broxus/react-components';
import { Button, Grid, Text, useConfig } from '@broxus/react-uikit';
import { ProviderRpcClient } from 'everscale-inpage-provider';
import { reaction } from 'mobx';
import { observer } from 'mobx-react-lite';
import { QRCodeSVG } from 'qrcode.react';
import * as React from 'react';
import { useIntl } from 'react-intl';
import { useTvmConnectDialog } from '../context';
import messages from '../intl';
import { getTvmProviderPlatformLink } from '../utils';
export const TvmProviderQRCode = observer(() => {
const intl = useIntl();
const config = useConfig();
const dialog = useTvmConnectDialog();
const [hasProvider, setHasProvider] = React.useState();
const { connectingProvider, popupType } = dialog;
const onConnect = async () => {
if (!hasProvider) {
dialog.setState('requestState', 'installation');
return;
}
if (connectingProvider) {
dialog.setState('requestState', 'connecting');
await dialog.connectTo(connectingProvider);
}
};
const onBack = () => {
dialog.setState('requestState', undefined);
dialog.reset();
};
React.useEffect(() => reaction(() => connectingProvider?.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 }), [connectingProvider]);
const providerInfo = connectingProvider?.connector?.info;
const homepage = providerInfo?.links?.homepage;
const universalLink = providerInfo?.links?.universalLink;
const [, extensionLink] = getTvmProviderPlatformLink({ ...providerInfo?.links }) ?? [];
const currentLocation = window?.location.href;
let actions = [
{
key: 'browser-extension',
node: (React.createElement(Button, { shape: config.button?.shape ?? 'circle', type: "secondary", onClick: onConnect }, intl.formatMessage(messages.TVM_CONNECT_POPUP_BROWSER_EXTENSION_BTN_TEXT))),
},
];
if (!hasProvider && !extensionLink) {
actions = homepage ? [
{
key: 'install-extension',
node: (React.createElement(Button, { href: homepage, rel: "noopener noreferrer", shape: config.button?.shape ?? 'circle', target: "_blank", type: "secondary" }, intl.formatMessage(messages.TVM_CONNECT_PROVIDER_HOMEPAGE, {
providerName: providerInfo?.name ?? '',
}))),
},
] : [];
}
return (React.createElement(React.Fragment, null,
React.createElement(Button, { className: "tvm-connect-back-button uk-position-top-left", type: "text", onClick: onBack },
React.createElement(Icon, { icon: "arrowLeft", ratio: 0.9 })),
React.createElement("div", { className: "tvm-connect-provider-content uk-animation-fade", style: {
animationDelay: 'var(--animation-medium-fast-duration)',
animationDuration: 'var(--animation-fast-duration)',
animationTimingFunction: 'var(--ease-in)',
} },
React.createElement(Grid, { childWidth: 1, gap: popupType === 'drawer' ? 'medium' : undefined },
universalLink && (React.createElement(React.Fragment, null,
React.createElement("div", null,
React.createElement(Text, { align: "center", className: "uk-padding-small uk-padding-remove-vertical", component: "div", kind: "meta" }, intl.formatMessage(providerInfo?.hasScanner
? messages.TVM_CONNECT_POPUP_QR_WITH_SCANNER_TITLE
: messages.TVM_CONNECT_POPUP_QR_TITLE, {
providerName: providerInfo?.name || '',
}))),
React.createElement("div", null,
React.createElement("div", { className: "tvm-connect-qrcode-wrapper" },
React.createElement(QRCodeSVG, { imageSettings: providerInfo?.icon ? {
excavate: true,
height: 30,
src: providerInfo.icon,
width: 30,
} : undefined, size: 200, style: { height: 'auto', maxWidth: '100%', width: '100%' }, value: universalLink.concat(`&link=${encodeURIComponent(currentLocation)}`) }))))),
React.createElement(Text, { align: "center", component: "div" }, actions.map(action => (React.createElement(React.Fragment, { key: action.key }, action.node))))))));
});