@broxus/evm-connect 1.12.8 → 1.12.9

package/lib/cjs/components/EvmConnectDialog/index.js

@@ -54,30 +54,27 @@ exports.EvmConnectDialog = (0, mobx_react_lite_1.observer)(({ className, open, t
         (0, react_uikit_1.removeModalMode)('evm-modal-page');
         walletProviders.reset();
     };
-    const close = () => {
-        onClose?.();
-    };
     React.useEffect(() => {
         if (open) {
             (0, react_uikit_1.addModalMode)('evm-modal-page');
         }
     }, [open]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useEffect(() => () => onClosed(), []);
+    React.useEffect(() => onClosed, []);
     if (type === 'drawer') {
         return (React.createElement(react_uikit_1.Drawer, { className: className, destroyOnClose: true, keyboard: !walletProviders.connectingProvider, maskClosable: !walletProviders.connectingProvider, motion: {
                 motionLeave: true,
                 removeOnLeave: true,
                 // eslint-disable-next-line sort-keys
                 onLeaveEnd: onClosed,
-            }, open: open, placement: "bottom", push: false, rootClassName: "evm-connect-drawer", onClose: close },
+            }, open: open, placement: "bottom", push: false, rootClassName: "evm-connect-drawer", onClose: onClose },
             React.createElement(react_components_1.Close, { kind: "drawer", ratio: 0.9, onClick: onClose }),
             React.createElement(react_uikit_1.Component, { className: "uk-drawer-header" },
                 React.createElement(react_uikit_1.Component, { className: "uk-drawer-title" }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_TITLE))),
             React.createElement("div", { className: "uk-drawer-body" },
                 React.createElement(components_1.EvmProvidersDispatcher, null)),
-            React.createElement(react_uikit_1.Text, { align: "center", className: "uk-drawer-footer uk-margin-top", component: "footer", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(intl_1.default.EVM_CONNECT_AGREEMENTS_NOTE))));
+            walletProviders.agreementsNote !== false && (React.createElement(react_uikit_1.Text, { align: "center", className: "uk-drawer-footer uk-margin-top", component: "footer", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(intl_1.default.EVM_CONNECT_AGREEMENTS_NOTE)))));
     }
-    return (React.createElement(react_uikit_1.Modal, { centered: true, className: (0, classnames_1.default)('evm-connect-modal', className), closeIcon: React.createElement(react_components_1.Close, { kind: "modal", ratio: 0.9, onClick: close }), destroyOnClose: true, footer: (React.createElement(react_uikit_1.Text, { align: "center", component: "div", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(intl_1.default.EVM_CONNECT_AGREEMENTS_NOTE))), keyboard: !walletProviders.connectingProvider, maskClosable: !walletProviders.connectingProvider, title: intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_TITLE), visible: open, width: 380, onClose: close, onClosed: onClosed },
+    return (React.createElement(react_uikit_1.Modal, { centered: true, className: (0, classnames_1.default)('evm-connect-modal', className), closeIcon: React.createElement(react_components_1.Close, { kind: "modal", ratio: 0.9, onClick: onClose }), destroyOnClose: true, footer: walletProviders.agreementsNote !== false && (React.createElement(react_uikit_1.Text, { align: "center", component: "div", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(intl_1.default.EVM_CONNECT_AGREEMENTS_NOTE))), keyboard: !walletProviders.connectingProvider, maskClosable: !walletProviders.connectingProvider, title: intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_TITLE), visible: open, width: 380, onClose: onClose, onClosed: onClosed },
         React.createElement(components_1.EvmProvidersDispatcher, null)));
 });

package/lib/cjs/components/EvmConnector/index.js

@@ -64,7 +64,7 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
             drop.current?.close();
             await walletService.disconnect();
             if (recentMeta) {
-                setRecentMeta({ ...recentMeta, disconnected: true });
+                setRecentMeta({ ...recentMeta, disconnected: true }, walletProviders.recentMetaStorageKey);
             }
         }
     };
@@ -104,7 +104,7 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
                         }) })) })),
         React.createElement(react_uikit_1.Flex, { alignItems: "center", className: "evm-connect-connector-suffix" },
             suffix,
-            walletService.isConnected && showDropMenu && (React.createElement(react_uikit_1.Dropdown, { ref: drop, action: ['click'], hideAction: ['click'], overlayClassName: "evm-connect-dropdown", overlay: (React.createElement(react_uikit_1.List, { className: "uk-margin-remove", size: "large" },
+            !isDisconnected && showDropMenu && (React.createElement(react_uikit_1.Dropdown, { ref: drop, action: ['click'], hideAction: ['click'], overlayClassName: "evm-connect-dropdown", overlay: (React.createElement(react_uikit_1.List, { className: "uk-margin-remove", size: "large" },
                     !standalone && (React.createElement(react_uikit_1.List.Item, { key: "connect-wallet" },
                         React.createElement(EvmConnectButton_1.EvmConnectButton, { className: "evm-connect-change-wallet", network: network, popupType: popupType, type: "link", onOpen: changeWallet }, changeWalletButtonText))),
                     React.createElement(react_uikit_1.List.Item, null,

package/lib/cjs/components/EvmProvidersDispatcher/ConnectionRequest/index.js

@@ -36,16 +36,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectionRequest = ConnectionRequest;
+exports.ConnectionRequest = void 0;
 const react_components_1 = require("@broxus/react-components");
 const react_uikit_1 = require("@broxus/react-uikit");
 const classnames_1 = __importDefault(require("classnames"));
+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"));
 require("./index.css");
-function ConnectionRequest() {
+exports.ConnectionRequest = (0, mobx_react_lite_1.observer)(() => {
     const intl = (0, react_intl_1.useIntl)();
     const walletProviders = (0, context_1.useEvmWalletProviders)();
     const tryAgain = async () => {
@@ -69,6 +70,6 @@ function ConnectionRequest() {
                 })),
                 React.createElement("div", null, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_NOTE)))) : (React.createElement(react_uikit_1.Text, { align: "center" },
                 React.createElement("h4", { className: "evm-connect-connection-request-title uk-text-danger" }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_TITLE)),
-                React.createElement("div", { className: "uk-margin-small-bottom" }, walletProviders.error.message ? (React.createElement(react_uikit_1.Text, { color: "danger" }, walletProviders.error.message)) : intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_NOTE)),
+                React.createElement("div", { className: "uk-margin-small-bottom" }, walletProviders.error.message ? (React.createElement(react_uikit_1.Text, { color: "danger" }, walletProviders.error.message)) : (intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_NOTE))),
                 React.createElement(react_uikit_1.Button, { className: "evm-connect-connection-request-button", type: "default", onClick: tryAgain }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TRY_AGAIN_BTN_TEXT)))))));
-}
+});

package/lib/cjs/components/EvmProvidersDispatcher/ProviderButton/index.js

@@ -66,13 +66,19 @@ exports.ProviderButton = (0, mobx_react_lite_1.observer)((props) => {
             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, connector => {
         if (connector.type !== types_1.EthereumConnectionType.WALLET_CONNECT_V2) {
             setHasProvider(connector.provider != null);
         }
     }, { fireImmediately: true }), [providerConfig.connector]);
-    if (hasProvider === undefined) {
-        return (React.createElement(react_uikit_1.Button, { className: "evm-connect-provider-button", disabled: true }, intl.formatMessage(intl_1.default.EVM_CONNECT_INITIALIZING_HINT)));
+    if (!hasProvider && isInitializing) {
+        return (React.createElement(react_uikit_1.Button, { className: "evm-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.EVM_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;

package/lib/cjs/components/EvmProvidersDispatcher/index.js

@@ -32,17 +32,23 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EvmProvidersDispatcher = void 0;
 const react_uikit_1 = require("@broxus/react-uikit");
 const mobx_react_lite_1 = require("mobx-react-lite");
 const React = __importStar(require("react"));
+const react_intl_1 = require("react-intl");
 const ConnectionRequest_1 = require("../../components/EvmProvidersDispatcher/ConnectionRequest");
 const ProviderButton_1 = require("../../components/EvmProvidersDispatcher/ProviderButton");
 const context_1 = require("../../context");
 const hooks_1 = require("../../hooks");
+const intl_1 = __importDefault(require("../../intl"));
 require("./index.css");
 exports.EvmProvidersDispatcher = (0, mobx_react_lite_1.observer)(() => {
+    const intl = (0, react_intl_1.useIntl)();
     const walletService = (0, context_1.useEvmWalletService)();
     const walletProviders = (0, context_1.useEvmWalletProviders)();
     const orderedProviders = (0, hooks_1.useOrderedConnections)(walletService.providers ?? []);
@@ -54,6 +60,10 @@ exports.EvmProvidersDispatcher = (0, mobx_react_lite_1.observer)(() => {
             dispatcher.current.style.height = height ? `${height}px` : '';
         }
     }, [walletProviders.connectingProvider, walletProviders.error]);
+    if (walletService.providers.length === 0) {
+        return (React.createElement("div", { ref: dispatcher, className: "tvm-connect-providers-dispatcher" },
+            React.createElement("div", { className: "uk-padding-large" }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_NO_PROVIDERS_HINT))));
+    }
     return (React.createElement("div", { ref: dispatcher, className: "evm-connect-providers-dispatcher" },
         React.createElement("div", { ref: content }, walletProviders.connectingProvider ? (React.createElement(ConnectionRequest_1.ConnectionRequest, null)) : (React.createElement(react_uikit_1.List, { className: "evm-connect-providers-list" }, orderedProviders.map(providerConfig => (React.createElement(react_uikit_1.List.Item, { key: providerConfig.id },
             React.createElement(ProviderButton_1.ProviderButton, { providerConfig: providerConfig })))))))));

package/lib/cjs/context/EvmWalletProvidersContext.js

@@ -58,15 +58,16 @@ exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)(({ agreemen
             const prevConnector = walletService.connector;
             const recentMeta = (0, hooks_1.getRecentConnectionMeta)(recentMetaStorageKey);
             // eslint-disable-next-line no-nested-ternary
-            const chainParams = network ?? (recentMeta?.chainId
+            const networkParams = network ?? (recentMeta?.chainId
                 ? walletService.networks.find(_network => _network.chainId === recentMeta.chainId) ?? 1
                 : 1);
-            (0, js_utils_1.debug)(`Try to activate ${providerConfig.info.name} connection with chain`, typeof chainParams === 'number' ? chainParams : chainParams.chainId);
-            await providerConfig.connector?.connect(typeof chainParams === 'number' ? chainParams : (0, utils_1.convertNetworkToChainParams)(chainParams));
-            if (providerConfig.id !== walletService.providerId) {
-                await prevConnector?.disconnect(true);
+            (0, js_utils_1.debug)(`Try to activate ${providerConfig.info.name} connection with chain`, typeof networkParams === 'number' ? networkParams : networkParams?.chainId);
+            await providerConfig.connector?.connect(typeof networkParams === 'number'
+                ? networkParams
+                : networkParams && (0, utils_1.convertNetworkToChainParams)(networkParams), { onConnect });
+            if (walletService.providerId && providerConfig.id !== walletService.providerId) {
+                await prevConnector?.disconnect({ force: true });
             }
-            await onConnect?.(providerConfig.connector);
             (0, hooks_1.storeRecentConnectionMeta)({
                 chainId: providerConfig.connector.chainId?.toString(),
                 disconnected: false,

package/lib/cjs/intl/index.js

@@ -111,4 +111,8 @@ exports.default = (0, react_intl_1.defineMessages)({
         defaultMessage: 'Recent',
         id: 'EVM_CONNECT_DISPATCHER_POPUP_RECENT_HINT',
     },
+    EVM_CONNECT_DISPATCHER_POPUP_NO_PROVIDERS_HINT: {
+        defaultMessage: 'It seems that no provider was configured. Please ensure the service settings are correct.',
+        id: 'EVM_CONNECT_DISPATCHER_POPUP_NO_PROVIDERS_HINT',
+    },
 });

package/lib/esm/components/EvmConnectButton/index.d.ts

@@ -8,7 +8,6 @@ interface TriggerProps {
     connect: VoidFunction;
 }
 export interface EvmConnectButtonProps extends ButtonProps {
-    agreementsNote?: React.ReactNode;
     className?: string;
     disabled?: boolean;
     network?: EvmNetworkConfig;

package/lib/esm/components/EvmConnectDialog/index.js

@@ -15,30 +15,27 @@ export const EvmConnectDialog = observer(({ className, open, type, onClose }) =>
         removeModalMode('evm-modal-page');
         walletProviders.reset();
     };
-    const close = () => {
-        onClose?.();
-    };
     React.useEffect(() => {
         if (open) {
             addModalMode('evm-modal-page');
         }
     }, [open]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useEffect(() => () => onClosed(), []);
+    React.useEffect(() => onClosed, []);
     if (type === 'drawer') {
         return (React.createElement(Drawer, { className: className, destroyOnClose: true, keyboard: !walletProviders.connectingProvider, maskClosable: !walletProviders.connectingProvider, motion: {
                 motionLeave: true,
                 removeOnLeave: true,
                 // eslint-disable-next-line sort-keys
                 onLeaveEnd: onClosed,
-            }, open: open, placement: "bottom", push: false, rootClassName: "evm-connect-drawer", onClose: close },
+            }, open: open, placement: "bottom", push: false, rootClassName: "evm-connect-drawer", onClose: onClose },
             React.createElement(Close, { kind: "drawer", ratio: 0.9, onClick: onClose }),
             React.createElement(Component, { className: "uk-drawer-header" },
                 React.createElement(Component, { className: "uk-drawer-title" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_TITLE))),
             React.createElement("div", { className: "uk-drawer-body" },
                 React.createElement(EvmProvidersDispatcher, null)),
-            React.createElement(Text, { align: "center", className: "uk-drawer-footer uk-margin-top", component: "footer", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(messages.EVM_CONNECT_AGREEMENTS_NOTE))));
+            walletProviders.agreementsNote !== false && (React.createElement(Text, { align: "center", className: "uk-drawer-footer uk-margin-top", component: "footer", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(messages.EVM_CONNECT_AGREEMENTS_NOTE)))));
     }
-    return (React.createElement(Modal, { centered: true, className: classNames('evm-connect-modal', className), closeIcon: React.createElement(Close, { kind: "modal", ratio: 0.9, onClick: close }), destroyOnClose: true, footer: (React.createElement(Text, { align: "center", component: "div", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(messages.EVM_CONNECT_AGREEMENTS_NOTE))), keyboard: !walletProviders.connectingProvider, maskClosable: !walletProviders.connectingProvider, title: intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_TITLE), visible: open, width: 380, onClose: close, onClosed: onClosed },
+    return (React.createElement(Modal, { centered: true, className: classNames('evm-connect-modal', className), closeIcon: React.createElement(Close, { kind: "modal", ratio: 0.9, onClick: onClose }), destroyOnClose: true, footer: walletProviders.agreementsNote !== false && (React.createElement(Text, { align: "center", component: "div", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(messages.EVM_CONNECT_AGREEMENTS_NOTE))), keyboard: !walletProviders.connectingProvider, maskClosable: !walletProviders.connectingProvider, title: intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_TITLE), visible: open, width: 380, onClose: onClose, onClosed: onClosed },
         React.createElement(EvmProvidersDispatcher, null)));
 });

package/lib/esm/components/EvmConnector/index.js

@@ -25,7 +25,7 @@ export const EvmConnector = observer((props) => {
             drop.current?.close();
             await walletService.disconnect();
             if (recentMeta) {
-                setRecentMeta({ ...recentMeta, disconnected: true });
+                setRecentMeta({ ...recentMeta, disconnected: true }, walletProviders.recentMetaStorageKey);
             }
         }
     };
@@ -65,7 +65,7 @@ export const EvmConnector = observer((props) => {
                         }) })) })),
         React.createElement(Flex, { alignItems: "center", className: "evm-connect-connector-suffix" },
             suffix,
-            walletService.isConnected && showDropMenu && (React.createElement(Dropdown, { ref: drop, action: ['click'], hideAction: ['click'], overlayClassName: "evm-connect-dropdown", overlay: (React.createElement(List, { className: "uk-margin-remove", size: "large" },
+            !isDisconnected && showDropMenu && (React.createElement(Dropdown, { ref: drop, action: ['click'], hideAction: ['click'], overlayClassName: "evm-connect-dropdown", overlay: (React.createElement(List, { className: "uk-margin-remove", size: "large" },
                     !standalone && (React.createElement(List.Item, { key: "connect-wallet" },
                         React.createElement(EvmConnectButton, { className: "evm-connect-change-wallet", network: network, popupType: popupType, type: "link", onOpen: changeWallet }, changeWalletButtonText))),
                     React.createElement(List.Item, null,

package/lib/esm/components/EvmProvidersDispatcher/ConnectionRequest/index.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
 import './index.css';
-export declare function ConnectionRequest(): React.JSX.Element;
+export declare const ConnectionRequest: (() => React.JSX.Element) & {
+    displayName: string;
+};

package/lib/esm/components/EvmProvidersDispatcher/ConnectionRequest/index.js

@@ -1,12 +1,13 @@
 import { Icon } from '@broxus/react-components';
 import { Button, Grid, Text } from '@broxus/react-uikit';
 import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import { useEvmWalletProviders } from '../../../context';
 import messages from '../../../intl';
 import './index.css';
-export function ConnectionRequest() {
+export const ConnectionRequest = observer(() => {
     const intl = useIntl();
     const walletProviders = useEvmWalletProviders();
     const tryAgain = async () => {
@@ -30,6 +31,6 @@ export function ConnectionRequest() {
                 })),
                 React.createElement("div", null, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_NOTE)))) : (React.createElement(Text, { align: "center" },
                 React.createElement("h4", { className: "evm-connect-connection-request-title uk-text-danger" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_TITLE)),
-                React.createElement("div", { className: "uk-margin-small-bottom" }, walletProviders.error.message ? (React.createElement(Text, { color: "danger" }, walletProviders.error.message)) : intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_NOTE)),
+                React.createElement("div", { className: "uk-margin-small-bottom" }, walletProviders.error.message ? (React.createElement(Text, { color: "danger" }, walletProviders.error.message)) : (intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_NOTE))),
                 React.createElement(Button, { className: "evm-connect-connection-request-button", type: "default", onClick: tryAgain }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TRY_AGAIN_BTN_TEXT)))))));
-}
+});

package/lib/esm/components/EvmProvidersDispatcher/ProviderButton/index.js

@@ -1,6 +1,6 @@
 import { camelToSnake, getUserAgent, isMobile } from '@broxus/js-utils';
 import { TokenIcon } from '@broxus/react-components';
-import { Button, Text } from '@broxus/react-uikit';
+import { Button, Spinner, Text } from '@broxus/react-uikit';
 import { reaction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import * as React from 'react';
@@ -27,13 +27,19 @@ export const ProviderButton = observer((props) => {
             onSelectProvider?.(providerConfig);
         }
     };
+    // eslint-disable-next-line max-len
+    const isInitializing = providerConfig.connector.isInitializing === undefined || providerConfig.connector.isInitializing;
     React.useEffect(() => reaction(() => providerConfig.connector, connector => {
         if (connector.type !== EthereumConnectionType.WALLET_CONNECT_V2) {
             setHasProvider(connector.provider != null);
         }
     }, { fireImmediately: true }), [providerConfig.connector]);
-    if (hasProvider === undefined) {
-        return (React.createElement(Button, { className: "evm-connect-provider-button", disabled: true }, intl.formatMessage(messages.EVM_CONNECT_INITIALIZING_HINT)));
+    if (!hasProvider && isInitializing) {
+        return (React.createElement(Button, { className: "evm-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.EVM_CONNECT_INITIALIZING_HINT)),
+            React.createElement("span", null,
+                React.createElement(Spinner, { ratio: 0.8 }))));
     }
     const ua = getUserAgent();
     const homepage = providerConfig.info.links?.homepage;

package/lib/esm/components/EvmProvidersDispatcher/index.js

@@ -1,12 +1,15 @@
 import { List } from '@broxus/react-uikit';
 import { observer } from 'mobx-react-lite';
 import * as React from 'react';
+import { useIntl } from 'react-intl';
 import { ConnectionRequest } from '../../components/EvmProvidersDispatcher/ConnectionRequest';
 import { ProviderButton } from '../../components/EvmProvidersDispatcher/ProviderButton';
 import { useEvmWalletProviders, useEvmWalletService } from '../../context';
 import { useOrderedConnections } from '../../hooks';
+import messages from '../../intl';
 import './index.css';
 export const EvmProvidersDispatcher = observer(() => {
+    const intl = useIntl();
     const walletService = useEvmWalletService();
     const walletProviders = useEvmWalletProviders();
     const orderedProviders = useOrderedConnections(walletService.providers ?? []);
@@ -18,6 +21,10 @@ export const EvmProvidersDispatcher = observer(() => {
             dispatcher.current.style.height = height ? `${height}px` : '';
         }
     }, [walletProviders.connectingProvider, walletProviders.error]);
+    if (walletService.providers.length === 0) {
+        return (React.createElement("div", { ref: dispatcher, className: "tvm-connect-providers-dispatcher" },
+            React.createElement("div", { className: "uk-padding-large" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_NO_PROVIDERS_HINT))));
+    }
     return (React.createElement("div", { ref: dispatcher, className: "evm-connect-providers-dispatcher" },
         React.createElement("div", { ref: content }, walletProviders.connectingProvider ? (React.createElement(ConnectionRequest, null)) : (React.createElement(List, { className: "evm-connect-providers-list" }, orderedProviders.map(providerConfig => (React.createElement(List.Item, { key: providerConfig.id },
             React.createElement(ProviderButton, { providerConfig: providerConfig })))))))));

package/lib/esm/context/EvmWalletProvidersContext.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type EthereumConnector } from '../core';
 import { type EvmNetworkConfig, type EvmWalletProviderConfig } from '../types';
 export interface EvmWalletProvidersContextConsumer {
-    agreementsNote?: React.ReactNode;
+    agreementsNote?: React.ReactNode | false;
     connect: (providerConfig: EvmWalletProviderConfig) => Promise<void>;
     connectingProvider?: EvmWalletProviderConfig | null;
     error?: Error | null;
@@ -11,12 +11,13 @@ export interface EvmWalletProvidersContextConsumer {
 }
 export declare const EvmWalletProvidersContext: React.Context<EvmWalletProvidersContextConsumer | null>;
 export declare function useEvmWalletProviders(): EvmWalletProvidersContextConsumer;
-export type EvmWalletProvidersProviderProps = React.PropsWithChildren<{
+interface EvmWalletProvidersProviderProps {
     agreementsNote?: React.ReactNode;
     network?: EvmNetworkConfig;
     recentMetaStorageKey?: string;
     onConnect?: (connector?: EthereumConnector) => Promise<void> | void;
-}>;
-export declare const EvmWalletProvidersProvider: (({ agreementsNote, children, network, recentMetaStorageKey, onConnect, }: EvmWalletProvidersProviderProps) => React.JSX.Element) & {
+}
+export declare const EvmWalletProvidersProvider: (({ agreementsNote, children, network, recentMetaStorageKey, onConnect, }: React.PropsWithChildren<EvmWalletProvidersProviderProps>) => React.JSX.Element) & {
     displayName: string;
 };
+export {};

package/lib/esm/context/EvmWalletProvidersContext.js

@@ -21,15 +21,16 @@ export const EvmWalletProvidersProvider = observer(({ agreementsNote, children,
             const prevConnector = walletService.connector;
             const recentMeta = getRecentConnectionMeta(recentMetaStorageKey);
             // eslint-disable-next-line no-nested-ternary
-            const chainParams = network ?? (recentMeta?.chainId
+            const networkParams = network ?? (recentMeta?.chainId
                 ? walletService.networks.find(_network => _network.chainId === recentMeta.chainId) ?? 1
                 : 1);
-            debug(`Try to activate ${providerConfig.info.name} connection with chain`, typeof chainParams === 'number' ? chainParams : chainParams.chainId);
-            await providerConfig.connector?.connect(typeof chainParams === 'number' ? chainParams : convertNetworkToChainParams(chainParams));
-            if (providerConfig.id !== walletService.providerId) {
-                await prevConnector?.disconnect(true);
+            debug(`Try to activate ${providerConfig.info.name} connection with chain`, typeof networkParams === 'number' ? networkParams : networkParams?.chainId);
+            await providerConfig.connector?.connect(typeof networkParams === 'number'
+                ? networkParams
+                : networkParams && convertNetworkToChainParams(networkParams), { onConnect });
+            if (walletService.providerId && providerConfig.id !== walletService.providerId) {
+                await prevConnector?.disconnect({ force: true });
             }
-            await onConnect?.(providerConfig.connector);
             storeRecentConnectionMeta({
                 chainId: providerConfig.connector.chainId?.toString(),
                 disconnected: false,

package/lib/esm/intl/index.js

@@ -109,4 +109,8 @@ export default defineMessages({
         defaultMessage: 'Recent',
         id: 'EVM_CONNECT_DISPATCHER_POPUP_RECENT_HINT',
     },
+    EVM_CONNECT_DISPATCHER_POPUP_NO_PROVIDERS_HINT: {
+        defaultMessage: 'It seems that no provider was configured. Please ensure the service settings are correct.',
+        id: 'EVM_CONNECT_DISPATCHER_POPUP_NO_PROVIDERS_HINT',
+    },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@broxus/evm-connect",
-    "version": "1.12.8",
+    "version": "1.12.9",
     "description": "Ethereum wallets connector.",
     "license": "MIT",
     "keywords": [
@@ -96,5 +96,5 @@
         "web3-types": "^1.x",
         "web3-utils": "^4.x"
     },
-    "gitHead": "a22b1ebc71b696ca5d2a3caa114b0926805baf5c"
+    "gitHead": "0d38ed5de484717a5fcbc4c831055da0e43a81b7"
 }