@broxus/evm-connect 1.13.7 → 1.14.1

package/lib/cjs/components/{EvmConnectButton/index.js → EvmConnectButton.js}

@@ -37,9 +37,9 @@ exports.EvmConnectButton = 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 EvmConnectDialog_1 = require("../../components/EvmConnectDialog");
-const context_1 = require("../../context");
-const utils_1 = require("../../utils");
+const EvmConnectDialog_1 = require("../components/EvmConnectDialog");
+const context_1 = require("../context");
+const utils_1 = require("../utils");
 exports.EvmConnectButton = (0, mobx_react_lite_1.observer)(({ disabled, network, popupClassName, popupType, trigger, onClose, onConnect, onOpen, ...props }) => {
     const walletService = (0, context_1.useEvmWalletService)();
     const walletProviders = React.useContext(context_1.EvmWalletProvidersContext);
@@ -55,7 +55,7 @@ exports.EvmConnectButton = (0, mobx_react_lite_1.observer)(({ disabled, network,
     }, [onOpen]);
     const connect = React.useCallback(async () => {
         setModalVisibility(false);
-        const networkParams = network?.chainId ? (0, utils_1.convertNetworkToChainParams)(network) : undefined;
+        const networkParams = network?.chainId ? (0, utils_1.toChainParams)(network) : undefined;
         await Promise.allSettled([
             onConnect?.(walletService),
             walletService.connect(networkParams).catch(() => {

package/lib/cjs/components/{EvmConnectDialog/index.js → EvmConnectDialog.js}

@@ -37,16 +37,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EvmConnectDialog = 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 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 components_1 = require("../../components");
-const context_1 = require("../../context");
-const intl_1 = __importDefault(require("../../intl"));
-require("./index.css");
+const components_1 = require("../components");
+const context_1 = require("../context");
+const intl_1 = __importDefault(require("../intl"));
 exports.EvmConnectDialog = (0, mobx_react_lite_1.observer)(({ className, open, type, onClose }) => {
     const intl = (0, react_intl_1.useIntl)();
     const walletProviders = (0, context_1.useEvmWalletProviders)();
@@ -67,7 +67,10 @@ exports.EvmConnectDialog = (0, mobx_react_lite_1.observer)(({ className, open, t
                 removeOnLeave: true,
                 // eslint-disable-next-line sort-keys
                 onLeaveEnd: onClosed,
-            }, open: open, placement: "bottom", push: false, rootClassName: "evm-connect-drawer", onClose: onClose },
+            }, open: open, placement: "bottom", push: false, rootClassName: "evm-connect-drawer", style: {
+                // @ts-ignore
+                '--global-scroll-width': `${(0, js_utils_1.getScrollWidth)()}px`,
+            }, 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))),
@@ -75,6 +78,9 @@ exports.EvmConnectDialog = (0, mobx_react_lite_1.observer)(({ className, open, t
                 React.createElement(components_1.EvmProvidersDispatcher, null)),
             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: onClose }), destroyOnHidden: 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 },
+    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 }), destroyOnHidden: 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, style: {
+            // @ts-ignore
+            '--global-scroll-width': `${(0, js_utils_1.getScrollWidth)()}px`,
+        }, onClose: onClose, onClosed: onClosed },
         React.createElement(components_1.EvmProvidersDispatcher, null)));
 });

package/lib/cjs/components/EvmConnectionRequest.js

@@ -0,0 +1,80 @@
+"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.EvmConnectionRequest = 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"));
+exports.EvmConnectionRequest = (0, mobx_react_lite_1.observer)(() => {
+    const intl = (0, react_intl_1.useIntl)();
+    const walletProviders = (0, context_1.useEvmWalletProviders)();
+    const tryAgain = async () => {
+        if (walletProviders.connectingProvider) {
+            await walletProviders.connect(walletProviders.connectingProvider);
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_uikit_1.Button, { className: "evm-connect-back-button uk-position-top-left", type: "text", onClick: walletProviders.reset },
+            React.createElement(react_components_1.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(react_uikit_1.Grid, { childWidth: 1, gap: "collapse" },
+                walletProviders.connectingProvider?.info.icon && (React.createElement(react_uikit_1.Text, { align: "center", className: (0, classnames_1.default)('uk-margin-top', {
+                        'uk-margin-bottom': walletProviders.connectingProvider?.info.description,
+                        'uk-margin-medium-bottom': !walletProviders.connectingProvider?.info.description,
+                    }), component: "div" },
+                    React.createElement("img", { src: walletProviders.connectingProvider.info.icon, alt: walletProviders.connectingProvider.info.name, height: 60, width: 60 }))),
+                walletProviders.connectingProvider?.info.description && (React.createElement(react_uikit_1.Text, { align: "center", className: "uk-margin-medium-bottom", component: "div", kind: "meta" }, walletProviders.connectingProvider.info.description)),
+                !walletProviders.error ? (React.createElement("div", { className: "uk-text-center" },
+                    React.createElement(react_uikit_1.Text, { className: "evm-connect-connection-request-title", component: "h4" }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TITLE, {
+                        title: walletProviders.connectingProvider?.info.name ?? 'wallet',
+                    })),
+                    React.createElement(react_uikit_1.Text, { className: "uk-margin-small-bottom", component: "div", size: "small" }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_NOTE)))) : (React.createElement("div", { className: "uk-text-center" },
+                    React.createElement(react_uikit_1.Text, { className: "evm-connect-connection-request-title", component: "h4" }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_TITLE)),
+                    React.createElement(react_uikit_1.Text, { className: "uk-margin-small-bottom", color: "danger", component: "div", size: "small" }, walletProviders.error.message
+                        ?? intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_NOTE)),
+                    React.createElement(react_uikit_1.Button, { type: "link", onClick: tryAgain }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TRY_AGAIN_BTN_TEXT))))))));
+});

package/lib/cjs/components/{EvmConnector/index.js → EvmConnector.js}

@@ -44,11 +44,10 @@ 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 EvmConnectButton_1 = require("../../components/EvmConnectButton");
-const context_1 = require("../../context");
-const hooks_1 = require("../../hooks");
-const intl_1 = __importDefault(require("../../intl"));
-require("./index.css");
+const EvmConnectButton_1 = require("../components/EvmConnectButton");
+const context_1 = require("../context");
+const hooks_1 = require("../hooks");
+const intl_1 = __importDefault(require("../intl"));
 exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
     const intl = (0, react_intl_1.useIntl)();
     const walletService = (0, context_1.useEvmWalletService)();

package/lib/cjs/components/{EvmProvidersDispatcher/ProviderButton/index.js → EvmProviderButton.js}

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProviderButton = void 0;
+exports.EvmProviderButton = 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");
@@ -44,12 +44,11 @@ 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 types_1 = require("../../../types");
-const utils_1 = require("../../../utils");
-require("./index.css");
-exports.ProviderButton = (0, mobx_react_lite_1.observer)(({ providerConfig, onSelect: onSelectProvider }) => {
+const context_1 = require("../context");
+const intl_1 = __importDefault(require("../intl"));
+const types_1 = require("../types");
+const utils_1 = require("../utils");
+exports.EvmProviderButton = (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)();
@@ -74,8 +73,8 @@ exports.ProviderButton = (0, mobx_react_lite_1.observer)(({ providerConfig, onSe
     }, { fireImmediately: true }), [providerConfig.connector]);
     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", { className: "evm-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: "evm-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 }))));
     }

package/lib/cjs/components/{EvmProvidersDispatcher/index.js → EvmProvidersDispatcher.js}

@@ -38,34 +38,42 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EvmProvidersDispatcher = void 0;
 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 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");
+const EvmConnectionRequest_1 = require("../components/EvmConnectionRequest");
+const EvmProvidersList_1 = require("../components/EvmProvidersList");
+const context_1 = require("../context");
+const intl_1 = __importDefault(require("../intl"));
 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 [recentMeta] = (0, hooks_1.useRecentConnectionMeta)();
-    const orderedProviders = (0, hooks_1.useOrderedConnections)(walletService.providers ?? [], recentMeta);
-    const dispatcher = React.useRef(null);
+    const isMounted = (0, react_uikit_1.useMounted)();
+    const container = React.useRef(null);
     const content = React.useRef(null);
     React.useLayoutEffect(() => {
-        if (dispatcher.current) {
+        if (container.current) {
             const height = content.current?.clientHeight;
-            dispatcher.current.style.height = height ? `${height}px` : '';
+            container.current.style.height = height ? `${Math.ceil(height) + 1}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: container, className: "evm-connect-providers-dispatcher" },
+            React.createElement("div", { className: "uk-text-left uk-padding-large uk-padding-remove-horizontal" }, 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 })))))))));
+    return (React.createElement("div", { ref: container, className: "evm-connect-providers-dispatcher" },
+        React.createElement("div", { ref: content }, walletProviders.connectingProvider ? (React.createElement(EvmConnectionRequest_1.EvmConnectionRequest, null)) : (React.createElement("div", { className: (0, classnames_1.default)('tvm-connect-provider-content', {
+                'uk-animation-fade': isMounted,
+            }), style: isMounted ? {
+                animationDelay: 'var(--animation-medium-fast-duration)',
+                animationDuration: 'var(--animation-fast-duration)',
+                animationTimingFunction: 'var(--ease-in)',
+            } : undefined },
+            React.createElement(react_uikit_1.Grid, { childWidth: 1 },
+                React.createElement("div", null,
+                    React.createElement(react_uikit_1.Text, { align: "center", component: "div", kind: "meta" }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_NOTE))),
+                React.createElement("div", null,
+                    React.createElement(EvmProvidersList_1.EvmProvidersList, null))))))));
 });

package/lib/cjs/components/EvmProvidersList.js

@@ -0,0 +1,49 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EvmProvidersList = 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 EvmProviderButton_1 = require("../components/EvmProviderButton");
+const context_1 = require("../context");
+const hooks_1 = require("../hooks");
+exports.EvmProvidersList = (0, mobx_react_lite_1.observer)(() => {
+    const service = (0, context_1.useEvmWalletService)();
+    const [recentMeta] = (0, hooks_1.useRecentConnectionMeta)();
+    const orderedProviders = (0, hooks_1.useOrderedConnections)(service.providers ?? [], recentMeta);
+    return (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(EvmProviderButton_1.EvmProviderButton, { providerConfig: providerConfig }))))));
+});

package/lib/cjs/context/EvmWalletProvidersContext.js

@@ -37,7 +37,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EvmWalletProvidersProvider = exports.EvmWalletProvidersContext = void 0;
 exports.useEvmWalletProviders = useEvmWalletProviders;
 const js_utils_1 = require("@broxus/js-utils");
-const react_uikit_1 = require("@broxus/react-uikit");
 const mobx_react_lite_1 = require("mobx-react-lite");
 const React = __importStar(require("react"));
 const EvmWalletServiceContext_1 = require("../context/EvmWalletServiceContext");
@@ -45,7 +44,7 @@ const hooks_1 = require("../hooks");
 const utils_1 = require("../utils");
 exports.EvmWalletProvidersContext = React.createContext(null);
 function useEvmWalletProviders() {
-    return (0, react_uikit_1.useContext)(exports.EvmWalletProvidersContext);
+    return (0, hooks_1.useContext)(exports.EvmWalletProvidersContext);
 }
 exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)(({ agreementsNote, children, network, recentMetaStorageKey, onConnect, }) => {
     const walletService = (0, EvmWalletServiceContext_1.useEvmWalletService)();
@@ -56,7 +55,7 @@ exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)(({ agreemen
             setError(null);
             setConnectingProvider(providerConfig);
             const prevConnector = walletService.connector;
-            const recentMeta = (0, hooks_1.getRecentConnectionMeta)(recentMetaStorageKey);
+            const recentMeta = (0, utils_1.getRecentConnectionMeta)(recentMetaStorageKey);
             // eslint-disable-next-line no-nested-ternary
             const networkParams = network ?? (recentMeta?.chainId
                 ? walletService.networks.find(_network => _network.chainId === recentMeta.chainId) ?? 1
@@ -64,11 +63,11 @@ exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)(({ agreemen
             (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 });
+                : networkParams && (0, utils_1.toChainParams)(networkParams), { onConnect });
             if (walletService.providerId && providerConfig.id !== walletService.providerId) {
                 await prevConnector?.disconnect({ force: true });
             }
-            (0, hooks_1.storeRecentConnectionMeta)({
+            (0, utils_1.storeRecentConnectionMeta)({
                 chainId: providerConfig.connector.chainId?.toString(),
                 disconnected: false,
                 providerId: providerConfig.id,

package/lib/cjs/context/EvmWalletServiceContext.js

@@ -37,15 +37,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EvmWalletServiceContext = void 0;
 exports.useEvmWalletService = useEvmWalletService;
 exports.EvmWalletServiceProvider = EvmWalletServiceProvider;
-const react_uikit_1 = require("@broxus/react-uikit");
 const mobx_1 = require("mobx");
 const React = __importStar(require("react"));
 const EvmWalletProvidersContext_1 = require("../context/EvmWalletProvidersContext");
 const hooks_1 = require("../hooks");
 const services_1 = require("../services");
+const utils_1 = require("../utils");
 exports.EvmWalletServiceContext = React.createContext(null);
 function useEvmWalletService() {
-    return (0, react_uikit_1.useContext)(exports.EvmWalletServiceContext);
+    return (0, hooks_1.useContext)(exports.EvmWalletServiceContext);
 }
 function EvmWalletServiceProvider({ agreementsNote, children, params, recentMetaStorageKey, wallet, }) {
     const context = React.useMemo(() => {
@@ -56,8 +56,8 @@ function EvmWalletServiceProvider({ agreementsNote, children, params, recentMeta
     }, [params, wallet]);
     React.useEffect(() => (0, mobx_1.reaction)(() => context.chainId, chainId => {
         if (chainId) {
-            const recentMeta = (0, hooks_1.getRecentConnectionMeta)(recentMetaStorageKey);
-            (0, hooks_1.storeRecentConnectionMeta)({ ...recentMeta, chainId: chainId.toString() }, recentMetaStorageKey);
+            const recentMeta = (0, utils_1.getRecentConnectionMeta)(recentMetaStorageKey);
+            (0, utils_1.storeRecentConnectionMeta)({ ...recentMeta, chainId: chainId.toString() }, recentMetaStorageKey);
         }
     }, { delay: 10, fireImmediately: context.isReady }), [context, recentMetaStorageKey]);
     return (React.createElement(exports.EvmWalletServiceContext.Provider, { value: context },

package/lib/cjs/hooks/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../hooks/useContext"), exports);
 __exportStar(require("../hooks/useEIP6963Connections"), exports);
 __exportStar(require("../hooks/useFilteredConnections"), exports);
 __exportStar(require("../hooks/useOrderedConnections"), exports);

package/lib/cjs/hooks/useContext.js

@@ -0,0 +1,44 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContext = useContext;
+const React = __importStar(require("react"));
+function useContext(Context) {
+    const context = React.useContext(Context);
+    if (context == null) {
+        throw new Error(`use${Context.displayName || Context.constructor.name || 'Unknown'} must be used within a ${Context.displayName || Context.constructor.name || 'Unknown'}.Provider`);
+    }
+    return context;
+}

package/lib/cjs/hooks/useRecentConnectionMeta.js

@@ -33,55 +33,24 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.storeRecentConnectionMeta = storeRecentConnectionMeta;
-exports.getRecentConnectionMeta = getRecentConnectionMeta;
 exports.useRecentConnectionMeta = useRecentConnectionMeta;
 const js_utils_1 = require("@broxus/js-utils");
 const React = __importStar(require("react"));
 const constants_1 = require("../constants");
 const context_1 = require("../context");
-const types_1 = require("../types");
-function isRecentConnectionMeta(value) {
-    const meta = { providerId: value.providerId, type: value.type };
-    return Boolean(meta.type && types_1.EthereumConnectionType[meta.type] && !!meta.providerId);
-}
-function storeRecentConnectionMeta(meta, storageKey = constants_1.EVM_RECENT_CONNECTION) {
-    if (!meta) {
-        js_utils_1.storage.remove(storageKey);
-        return;
-    }
-    (0, js_utils_1.debug)('Store EVM recent connection', meta);
-    js_utils_1.storage.set(storageKey, JSON.stringify(meta));
-}
-function getRecentConnectionMeta(storageKey = constants_1.EVM_RECENT_CONNECTION) {
-    const value = js_utils_1.storage.get(storageKey);
-    if (!value) {
-        return undefined;
-    }
-    try {
-        const json = JSON.parse(value);
-        if (isRecentConnectionMeta(json)) {
-            return json;
-        }
-    }
-    catch (e) {
-        (0, js_utils_1.debug)(e);
-    }
-    storeRecentConnectionMeta(undefined, storageKey);
-    return undefined;
-}
+const utils_1 = require("../utils");
 function useRecentConnectionMeta() {
     const walletProviders = (0, context_1.useEvmWalletProviders)();
     const storageKey = walletProviders.recentMetaStorageKey ?? constants_1.EVM_RECENT_CONNECTION;
-    const [recentMeta, setRecentMeta] = React.useState(getRecentConnectionMeta(storageKey));
+    const [recentMeta, setRecentMeta] = React.useState((0, utils_1.getRecentConnectionMeta)(storageKey));
     const setMeta = (meta) => {
-        storeRecentConnectionMeta(meta, storageKey);
+        (0, utils_1.storeRecentConnectionMeta)(meta, storageKey);
     };
     React.useEffect(() => {
         const onStorage = (event) => {
             if (event.key === storageKey && event.newValue) {
                 const json = JSON.parse(event.newValue);
-                if (isRecentConnectionMeta(json)) {
+                if ((0, utils_1.isRecentConnectionMeta)(json)) {
                     setRecentMeta(json);
                 }
             }
@@ -95,5 +64,8 @@ function useRecentConnectionMeta() {
             }
         };
     }, [storageKey]);
+    React.useEffect(() => {
+        setRecentMeta((0, utils_1.getRecentConnectionMeta)(storageKey));
+    }, [storageKey]);
     return [recentMeta, setMeta];
 }

package/lib/cjs/intl/index.js

@@ -80,7 +80,7 @@ exports.default = (0, react_intl_1.defineMessages)({
         id: 'EVM_CONNECT_DISPATCHER_POPUP_TITLE',
     },
     EVM_CONNECT_DISPATCHER_POPUP_NOTE: {
-        defaultMessage: 'At the moment we only support the wallets below.',
+        defaultMessage: 'Please, connect your preferred wallet.',
         id: 'EVM_CONNECT_DISPATCHER_POPUP_NOTE',
     },
     EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TITLE: {

package/lib/cjs/services/EvmWalletService.js

@@ -66,7 +66,7 @@ class EvmWalletService extends js_core_1.AbstractStore {
             // eslint-disable-next-line no-nested-ternary
             const networkParams = typeof networkIdOParams === 'object'
                 ? networkIdOParams
-                : network ? (0, utils_1.convertNetworkToChainParams)(network) : undefined;
+                : network ? (0, utils_1.toChainParams)(network) : undefined;
             await this.connector?.connect(networkParams ?? 1);
         }
         catch (e) {

package/lib/cjs/styles/inheritance.css

@@ -0,0 +1,71 @@
+:root {
+    --evm-connect-color: var(--global-color, #383838);
+    --evm-connect-emphasis-color: var(--global-emphasis-color, #333);
+    --evm-connect-muted-color: var(--global-muted-color, #7698bb);
+    --evm-connect-link-color: var(--global-link-color, #1e87f0);
+    --evm-connect-link-hover-color: var(--global-link-hover-color, #00a6ff);
+    --evm-connect-border: var(--global-border, #93b6d8);
+    --evm-connect-border-radius: var(--global-border-radius, 12px);
+
+    /* Modal */
+    --evm-connect-modal-width: 380px;
+    --evm-connect-modal-background: var(--modal-background, #f7f9fb);
+    --evm-connect-modal-border-radius: 12px;
+    --evm-connect-modal-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
+    --evm-connect-modal-color: var(--evm-connect-color);
+    --evm-connect-modal-padding-horizontal: 24px;
+    --evm-connect-modal-padding-vertical: var(--evm-connect-modal-padding-horizontal);
+    --evm-connect-modal-header-padding-horizontal: 0;
+    --evm-connect-modal-header-padding-vertical: var(--evm-connect-modal-padding-vertical);
+    --evm-connect-modal-title-color: var(--evm-connect-emphasis-color);
+    --evm-connect-modal-title-font-size: 20px;
+    --evm-connect-modal-title-font-weight: 500;
+    --evm-connect-modal-title-line-height: 24px;
+    --evm-connect-modal-body-padding-horizontal: 0;
+    --evm-connect-modal-body-padding-vertical: var(--evm-connect-modal-padding-vertical);
+    --evm-connect-modal-footer-padding-horizontal: 0;
+    --evm-connect-modal-footer-padding-vertical: var(--evm-connect-modal-padding-vertical);
+
+    /* Drawer */
+    --evm-connect-drawer-content-background: var(--drawer-content-background, #f7f9fb);
+    --evm-connect-drawer-content-border-radius: 16px;
+    --evm-connect-drawer-content-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
+    --evm-connect-drawer-content-color: var(--evm-connect-color);
+    --evm-connect-drawer-content-padding-horizontal: 24px;
+    --evm-connect-drawer-content-padding-vertical: var(--evm-connect-drawer-content-padding-horizontal);
+    --evm-connect-drawer-header-padding-horizontal: 0;
+    --evm-connect-drawer-header-padding-vertical: var(--evm-connect-drawer-content-padding-vertical);
+    --evm-connect-drawer-title-color: var(--evm-connect-emphasis-color);
+    --evm-connect-drawer-title-font-size: 22px;
+    --evm-connect-drawer-title-font-weight: 500;
+    --evm-connect-drawer-title-line-height: 26px;
+    --evm-connect-drawer-body-padding-horizontal: 0;
+    --evm-connect-drawer-body-padding-vertical: var(--evm-connect-drawer-content-padding-vertical);
+    --evm-connect-drawer-footer-padding-horizontal: 0;
+    --evm-connect-drawer-footer-padding-vertical: var(--evm-connect-drawer-content-padding-vertical);
+
+    /* Connector */
+    --evm-connect-dropdown-trigger-horizontal-padding: 8px;
+    --evm-connect-dropdown-trigger-vertical-padding: 0;
+    --evm-connect-dropdown-background: var(--dropdown-background, #fff);
+    --evm-connect-dropdown-border-radius: 5px;
+    --evm-connect-dropdown-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
+    --evm-connect-dropdown-color: var(--evm-connect-emphasis-color);
+    --evm-connect-dropdown-link-color: var(--evm-connect-muted-color, #0098ea);
+    --evm-connect-dropdown-link-hover-color: var(--evm-connect-color, #00a6ff);
+
+    /* Providers list */
+    --evm-connect-provider-button-background: var(--button-default-background, #e4eaf1);
+    --evm-connect-provider-button-hover-background: var(
+        --button-default-hover-background,
+        rgb(0 154.494955 232.2106 / 8%)
+    );
+    --evm-connect-provider-button-hover-color: var(--evm-connect-color);
+    --evm-connect-provider-button-border-width: 2px;
+    --evm-connect-provider-button-border-style: solid;
+    --evm-connect-provider-button-border: transparent;
+    --evm-connect-provider-button-hover-border: var(--button-default-hover-border, #07acff);
+
+    /* WalletConnect */
+    --w3m-z-index: calc(var(--modal-z-index) + 20) !important;
+}

package/lib/cjs/styles/inheritance.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./inheritance.css");
+require("./style.css");