@broxus/evm-connect 1.12.8 → 1.13.0

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

@@ -52,8 +52,7 @@ require("./index.css");
 exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
     const intl = (0, react_intl_1.useIntl)();
     const walletService = (0, context_1.useEvmWalletService)();
-    const walletProviders = (0, context_1.useEvmWalletProviders)();
-    const [recentMeta, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)(walletProviders.recentMetaStorageKey);
+    const [recentMeta, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
     const drop = React.useRef(null);
     const { changeWalletButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CHANGE_WALLET_BTN_TEXT), className, connectButtonShape, connectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CONNECT_BTN_TEXT), connectButtonTrigger, connectButtonType, disconnectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_DISCONNECT_BTN_TEXT), network = walletService.network, popupType, suffix, showDropMenu = true, showSubIcon = true, standalone = walletService.providers?.length === 1, warnUnsupportedNetwork = true, } = props;
     const changeWallet = () => {
@@ -104,7 +103,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

@@ -49,11 +49,10 @@ const intl_1 = __importDefault(require("../../../intl"));
 const types_1 = require("../../../types");
 const utils_1 = require("../../../utils");
 require("./index.css");
-exports.ProviderButton = (0, mobx_react_lite_1.observer)((props) => {
+exports.ProviderButton = (0, mobx_react_lite_1.observer)(({ providerConfig, onSelect: onSelectProvider }) => {
     const intl = (0, react_intl_1.useIntl)();
     const walletService = (0, context_1.useEvmWalletService)();
     const walletProviders = (0, context_1.useEvmWalletProviders)();
-    const { providerConfig, onSelect: onSelectProvider } = props;
     const [hasProvider, setHasProvider] = React.useState(() => {
         if (providerConfig.connector.type === types_1.EthereumConnectionType.WALLET_CONNECT_V2) {
             return true;
@@ -66,13 +65,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,20 +32,27 @@ 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 ?? []);
+    const [recentMeta] = (0, hooks_1.useRecentConnectionMeta)();
+    const orderedProviders = (0, hooks_1.useOrderedConnections)(walletService.providers ?? [], recentMeta);
     const dispatcher = React.useRef(null);
     const content = React.useRef(null);
     React.useLayoutEffect(() => {
@@ -54,6 +61,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/hooks/useRecentConnectionMeta.js

@@ -70,15 +70,19 @@ function getRecentConnectionMeta(storageKey = constants_1.EVM_RECENT_CONNECTION)
     storeRecentConnectionMeta(undefined, storageKey);
     return undefined;
 }
-function useRecentConnectionMeta(storageKey = constants_1.EVM_RECENT_CONNECTION) {
+function useRecentConnectionMeta() {
     const walletProviders = (0, context_1.useEvmWalletProviders)();
-    const [meta, setMeta] = React.useState(getRecentConnectionMeta(walletProviders.recentMetaStorageKey || storageKey));
+    const storageKey = walletProviders.recentMetaStorageKey ?? constants_1.EVM_RECENT_CONNECTION;
+    const [recentMeta, setRecentMeta] = React.useState(getRecentConnectionMeta(storageKey));
+    const setMeta = (meta) => {
+        storeRecentConnectionMeta(meta, storageKey);
+    };
     React.useEffect(() => {
         const onStorage = (event) => {
             if (event.key === storageKey && event.newValue) {
                 const json = JSON.parse(event.newValue);
                 if (isRecentConnectionMeta(json)) {
-                    setMeta(json);
+                    setRecentMeta(json);
                 }
             }
         };
@@ -91,5 +95,5 @@ function useRecentConnectionMeta(storageKey = constants_1.EVM_RECENT_CONNECTION)
             }
         };
     }, [storageKey]);
-    return [meta, storeRecentConnectionMeta];
+    return [recentMeta, setMeta];
 }

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

@@ -6,15 +6,14 @@ import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import { EvmConnectButton } from '../../components/EvmConnectButton';
-import { useEvmWalletProviders, useEvmWalletService } from '../../context';
+import { useEvmWalletService } from '../../context';
 import { useRecentConnectionMeta } from '../../hooks';
 import messages from '../../intl';
 import './index.css';
 export const EvmConnector = observer((props) => {
     const intl = useIntl();
     const walletService = useEvmWalletService();
-    const walletProviders = useEvmWalletProviders();
-    const [recentMeta, setRecentMeta] = useRecentConnectionMeta(walletProviders.recentMetaStorageKey);
+    const [recentMeta, setRecentMeta] = useRecentConnectionMeta();
     const drop = React.useRef(null);
     const { changeWalletButtonText = intl.formatMessage(messages.EVM_CONNECT_CHANGE_WALLET_BTN_TEXT), className, connectButtonShape, connectButtonText = intl.formatMessage(messages.EVM_CONNECT_CONNECT_BTN_TEXT), connectButtonTrigger, connectButtonType, disconnectButtonText = intl.formatMessage(messages.EVM_CONNECT_DISCONNECT_BTN_TEXT), network = walletService.network, popupType, suffix, showDropMenu = true, showSubIcon = true, standalone = walletService.providers?.length === 1, warnUnsupportedNetwork = true, } = props;
     const changeWallet = () => {
@@ -65,7 +64,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.d.ts

@@ -5,7 +5,7 @@ interface ProviderButtonProps {
     providerConfig: EvmWalletProviderConfig;
     onSelect?: (providerConfig: EvmWalletProviderConfig) => Promise<void> | void;
 }
-export declare const ProviderButton: ((props: ProviderButtonProps) => React.JSX.Element) & {
+export declare const ProviderButton: (({ providerConfig, onSelect: onSelectProvider }: ProviderButtonProps) => React.JSX.Element) & {
     displayName: string;
 };
 export {};

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';
@@ -10,11 +10,10 @@ import messages from '../../../intl';
 import { EthereumConnectionType } from '../../../types';
 import { getEvmProviderPlatformLink } from '../../../utils';
 import './index.css';
-export const ProviderButton = observer((props) => {
+export const ProviderButton = observer(({ providerConfig, onSelect: onSelectProvider }) => {
     const intl = useIntl();
     const walletService = useEvmWalletService();
     const walletProviders = useEvmWalletProviders();
-    const { providerConfig, onSelect: onSelectProvider } = props;
     const [hasProvider, setHasProvider] = React.useState(() => {
         if (providerConfig.connector.type === EthereumConnectionType.WALLET_CONNECT_V2) {
             return true;
@@ -27,13 +26,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,15 +1,19 @@
 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 { useOrderedConnections, useRecentConnectionMeta } 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 ?? []);
+    const [recentMeta] = useRecentConnectionMeta();
+    const orderedProviders = useOrderedConnections(walletService.providers ?? [], recentMeta);
     const dispatcher = React.useRef(null);
     const content = React.useRef(null);
     React.useLayoutEffect(() => {
@@ -18,6 +22,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/hooks/useRecentConnectionMeta.d.ts

@@ -9,7 +9,7 @@ export declare function storeRecentConnectionMeta(meta: RecentConnectionMeta | u
 export declare function getRecentConnectionMeta(storageKey?: string): RecentConnectionMeta | undefined;
 type UseRecentConnectionMeta = [
     value: RecentConnectionMeta | undefined,
-    setValue: (meta: RecentConnectionMeta | undefined, storageKey?: string) => void
+    setValue: (meta: RecentConnectionMeta | undefined) => void
 ];
-export declare function useRecentConnectionMeta(storageKey?: string): UseRecentConnectionMeta;
+export declare function useRecentConnectionMeta(): UseRecentConnectionMeta;
 export {};

package/lib/esm/hooks/useRecentConnectionMeta.js

@@ -32,15 +32,19 @@ export function getRecentConnectionMeta(storageKey = EVM_RECENT_CONNECTION) {
     storeRecentConnectionMeta(undefined, storageKey);
     return undefined;
 }
-export function useRecentConnectionMeta(storageKey = EVM_RECENT_CONNECTION) {
+export function useRecentConnectionMeta() {
     const walletProviders = useEvmWalletProviders();
-    const [meta, setMeta] = React.useState(getRecentConnectionMeta(walletProviders.recentMetaStorageKey || storageKey));
+    const storageKey = walletProviders.recentMetaStorageKey ?? EVM_RECENT_CONNECTION;
+    const [recentMeta, setRecentMeta] = React.useState(getRecentConnectionMeta(storageKey));
+    const setMeta = (meta) => {
+        storeRecentConnectionMeta(meta, storageKey);
+    };
     React.useEffect(() => {
         const onStorage = (event) => {
             if (event.key === storageKey && event.newValue) {
                 const json = JSON.parse(event.newValue);
                 if (isRecentConnectionMeta(json)) {
-                    setMeta(json);
+                    setRecentMeta(json);
                 }
             }
         };
@@ -53,5 +57,5 @@ export function useRecentConnectionMeta(storageKey = EVM_RECENT_CONNECTION) {
             }
         };
     }, [storageKey]);
-    return [meta, storeRecentConnectionMeta];
+    return [recentMeta, setMeta];
 }

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.13.0",
     "description": "Ethereum wallets connector.",
     "license": "MIT",
     "keywords": [
@@ -76,9 +76,9 @@
         "prepare": "npx yarn cleanup && npx yarn build"
     },
     "dependencies": {
-        "@broxus/js-core": "^0.32.1",
+        "@broxus/js-core": "^0.33.0",
         "@broxus/js-utils": "^1.3.16",
-        "@broxus/react-components": "^0.23.4",
+        "@broxus/react-components": "^0.23.5",
         "@broxus/react-uikit": "^0.19.3",
         "@metamask/detect-provider": "^2.0.0",
         "@walletconnect/ethereum-provider": "^2.20.2",
@@ -96,5 +96,5 @@
         "web3-types": "^1.x",
         "web3-utils": "^4.x"
     },
-    "gitHead": "a22b1ebc71b696ca5d2a3caa114b0926805baf5c"
+    "gitHead": "f5b76b61d8ab82bed59723507e3dd5fe6740553e"
 }