@broxus/tvm-connect
Version:
Nekoton-compatible wallets connector.
126 lines (125 loc) • 8.77 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProviderButton = void 0;
const js_utils_1 = require("@broxus/js-utils");
const react_components_1 = require("@broxus/react-components");
const react_uikit_1 = require("@broxus/react-uikit");
const everscale_inpage_provider_1 = require("everscale-inpage-provider");
const mobx_1 = require("mobx");
const mobx_react_lite_1 = require("mobx-react-lite");
const React = __importStar(require("react"));
const react_intl_1 = require("react-intl");
const context_1 = require("../../../context");
const intl_1 = __importDefault(require("../../../intl"));
const utils_1 = require("../../../utils");
require("./index.css");
exports.ProviderButton = (0, mobx_react_lite_1.observer)(({ providerConfig, onSelect: onSelectProvider }) => {
const intl = (0, react_intl_1.useIntl)();
const walletService = (0, context_1.useTvmWalletService)();
const walletProviders = (0, context_1.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(() => (0, mobx_1.reaction)(() => providerConfig.connector, async (connector) => {
if (connector.provider instanceof everscale_inpage_provider_1.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(react_uikit_1.Button, { className: "tvm-connect-provider-button", disabled: true },
React.createElement("span", { className: "tvm-connect-provider-icon" }, typeof providerConfig.info.icon === 'string' ? (React.createElement(react_components_1.TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
React.createElement("span", { className: "tvm-connect-provider-title" }, intl.formatMessage(intl_1.default.TVM_CONNECT_INITIALIZING_HINT)),
React.createElement("span", null,
React.createElement(react_uikit_1.Spinner, { ratio: 0.8 }))));
}
const ua = (0, js_utils_1.getUserAgent)();
const homepage = providerConfig.info.links?.homepage;
const universalLink = providerConfig.info.links?.universalLink;
if ((0, js_utils_1.isMobile)(ua) && !hasProvider && universalLink) {
return (React.createElement(react_uikit_1.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(react_components_1.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(react_uikit_1.Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "xsmall", wrap: "truncate" }, providerConfig.info.description)))));
}
if (!hasProvider) {
const [platform = 'UNKNOWN', uri] = (0, utils_1.getTvmProviderPlatformLink)({ ...providerConfig.info.links }) ?? [];
if (!uri && homepage) {
return (React.createElement(react_uikit_1.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(react_components_1.TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
React.createElement("span", { className: "tvm-connect-provider-title" },
intl.formatMessage(intl_1.default.TVM_CONNECT_PROVIDER_HOMEPAGE, {
providerName: providerConfig.info.name ?? '',
}),
React.createElement(react_uikit_1.Text, { className: "tvm-connect-provider-subtitle", color: "muted", component: "div", size: "small", wrap: "truncate" }, intl.formatMessage(intl_1.default.TVM_CONNECT_PROVIDER_HOMEPAGE_NOTE)))));
}
let text;
try {
text = intl.formatMessage(
// @ts-ignore
intl_1.default[`TVM_CONNECT_INSTALL_${(0, js_utils_1.camelToSnake)(platform)}_PLATFORM`.toUpperCase()]);
}
catch { }
return (React.createElement(react_uikit_1.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(react_components_1.TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
React.createElement("span", { className: "tvm-connect-provider-title" },
intl.formatMessage(intl_1.default.TVM_CONNECT_INSTALL_PROVIDER, {
providerName: providerConfig.info.name ?? '',
}),
React.createElement(react_uikit_1.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(react_uikit_1.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(react_components_1.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(react_uikit_1.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(intl_1.default.TVM_CONNECT_DISPATCHER_POPUP_CONNECTED_HINT))),
!isConnected && providerConfig.isRecent && (React.createElement("span", { className: "tvm-connect-provider-recent" }, intl.formatMessage(intl_1.default.TVM_CONNECT_DISPATCHER_POPUP_RECENT_HINT)))));
});