@broxus/evm-connect 1.0.0

package/dist/cjs/components/EvmProvidersDispatcher/ConnectionRequest/index.css

@@ -0,0 +1,43 @@
+.evm-connect-connection-request {
+
+}
+
+.evm-connect-connection-request .evm-connect-connection-request-back-button {
+    color: var(--close-color, #333);
+    left: var(--modal-close-position);
+    position: absolute;
+    top: var(--modal-close-position);
+}
+
+.evm-connect-connection-request .evm-connect-connection-request-back-button:hover,
+.evm-connect-connection-request .evm-connect-connection-request-back-button:focus {
+    color: var(--close-hover-color, #5e5e5e);
+}
+
+.evm-connect-connection-request .evm-connect-connection-request-title {
+    color: var(--base-body-color, #333);
+    font-weight: 600;
+    margin-bottom: var(--global-small-margin, 10px);
+}
+
+.evm-connect-connection-request .evm-connect-connection-request-button {
+    background-color: rgb(0 0 0 / 12%);
+    border: var(--evm-connect-connection-request-button-border-width) var(--evm-connect-connection-request-button-border-style) var(--evm-connect-connection-request-button-border);
+    border-radius: 8px;
+    box-sizing: border-box;
+    color: var(--base-body-color, #383838);
+}
+
+.evm-connect-connection-request .evm-connect-connection-request-button:hover,
+.evm-connect-connection-request .evm-connect-connection-request-button:focus {
+    background-color: rgb(0 0 0 / 16%);
+    border-color: var(--evm-connect-provider-button-hover-border);
+    color: var(--base-body-color, #383838);
+}
+
+:root {
+    --evm-connect-connection-request-button-border-width: 2px;
+    --evm-connect-connection-request-button-border-style: solid;
+    --evm-connect-connection-request-button-border: transparent;
+    --evm-connect-connection-request-button-hover-border: var(--global-border, transparent);
+}

package/dist/cjs/components/EvmProvidersDispatcher/ConnectionRequest/index.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import './index.css';
+export declare function ConnectionRequest(): React.JSX.Element;

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

@@ -0,0 +1,65 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.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 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() {
+    const intl = (0, react_intl_1.useIntl)();
+    const { connect, connectingProvider, error, reset } = (0, context_1.useEvmWalletProviders)();
+    const tryAgain = async () => {
+        if (connectingProvider) {
+            await connect(connectingProvider);
+        }
+    };
+    return (React.createElement("div", { className: "evm-connect-connection-request" },
+        React.createElement(react_uikit_1.Button, { className: "evm-connect-connection-request-back-button uk-position-top-left", type: "text", onClick: reset },
+            React.createElement(react_components_1.Icon, { icon: "arrowLeft", ratio: 0.9 })),
+        React.createElement(react_uikit_1.Grid, { childWidth: 1, gap: "collapse" },
+            connectingProvider?.info.icon && (React.createElement(react_uikit_1.Text, { align: "center", className: (0, classnames_1.default)('uk-margin-top', {
+                    'uk-margin-bottom': connectingProvider?.info.description,
+                    'uk-margin-medium-bottom': !connectingProvider?.info.description,
+                }) },
+                React.createElement("img", { src: connectingProvider.info.icon, alt: connectingProvider.info.name, height: 60, width: 60 }))),
+            connectingProvider?.info.description && (React.createElement(react_uikit_1.Text, { align: "center", className: "uk-margin-medium-bottom", component: "div", kind: "meta" }, connectingProvider.info.description)),
+            !error ? (React.createElement(react_uikit_1.Text, { align: "center" },
+                React.createElement("h4", { className: "evm-connect-connection-request-title" }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TITLE, {
+                    title: connectingProvider?.info.name ?? 'wallet',
+                })),
+                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" }, error.message ? (React.createElement(react_uikit_1.Text, { color: "danger" }, 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)))))));
+}
+exports.ConnectionRequest = ConnectionRequest;

package/dist/cjs/components/EvmProvidersDispatcher/ProviderButton/index.css

@@ -0,0 +1,54 @@
+.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button {
+    align-content: center;
+    align-items: center;
+    background-color: rgb(0 0 0 / 8%);
+    border: var(--evm-connect-provider-button-border-width) var(--evm-connect-provider-button-border-style) var(--evm-connect-provider-button-border);
+    border-radius: 8px;
+    box-sizing: border-box;
+    color: var(--base-body-color, #383838);
+    display: grid;
+    gap: 16px;
+    grid-auto-rows: max-content;
+    grid-template-columns: 30px minmax(50%, 100%) auto;
+    line-height: normal;
+    min-height: 65px;
+    padding: 0 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button:hover:not(:disabled),
+.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button:focus:not(:disabled) {
+    background-color: rgb(0 0 0 / 12%);
+    border-color: var(--evm-connect-provider-button-hover-border);
+    color: var(--base-body-color, #383838);
+}
+
+.evm-connect-providers-list .evm-connect-provider-title {
+    color: var(--base-body-color, #383838);
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.evm-connect-providers-list .evm-connect-provider-subtitle {
+    max-width: 100%;
+    opacity: 0.8;
+}
+
+.evm-connect-providers-list .evm-connect-provider-connected,
+.evm-connect-providers-list .evm-connect-provider-recent {
+    background: var(--evm-connect-modal-content-background);
+    border-radius: 3px;
+    color: var(--global-muted-color, #383838);
+    display: inline-block;
+    font-size: 12px;
+    justify-self: flex-end;
+    padding: 1px 5px;
+}
+
+:root {
+    --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(--global-border, transparent);
+}

package/dist/cjs/components/EvmProvidersDispatcher/ProviderButton/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type EvmWalletProviderConfig } from '../../../types';
+import './index.css';
+interface ProviderButtonProps {
+    providerConfig: EvmWalletProviderConfig;
+    onSelect?: (providerConfig: EvmWalletProviderConfig) => Promise<void> | void;
+}
+export declare const ProviderButton: ((props: ProviderButtonProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,93 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProviderButton = void 0;
+const js_utils_1 = require("@broxus/js-utils");
+const react_components_1 = require("@broxus/react-components");
+const react_uikit_1 = require("@broxus/react-uikit");
+const 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)((props) => {
+    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.ConnectionType.WALLET_CONNECT_V2) {
+            return true;
+        }
+        return undefined;
+    });
+    const onSelect = async () => {
+        if (hasProvider) {
+            await walletProviders.connect(providerConfig);
+            onSelectProvider?.(providerConfig);
+        }
+    };
+    React.useEffect(() => (0, mobx_1.reaction)(() => providerConfig.connector, connector => {
+        if (connector.type !== types_1.ConnectionType.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) {
+        const [platform = 'UNKNOWN', uri] = (0, utils_1.getEvmProviderPlatformLink)({ ...providerConfig.info.links }) ?? [];
+        let text;
+        try {
+            text = intl.formatMessage(
+            // @ts-ignore
+            intl_1.default[`EVM_CONNECT_INSTALL_${(0, js_utils_1.camelToSnake)(platform)}_PLATFORM`.toUpperCase()]);
+        }
+        catch { }
+        return (React.createElement(react_uikit_1.Button, { className: "evm-connect-provider-button", href: uri, rel: "noopener noreferrer", target: "_blank" },
+            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_INSTALL_PROVIDER, {
+                    providerName: providerConfig.info.name ?? '',
+                }),
+                React.createElement(react_uikit_1.Text, { className: "evm-connect-provider-subtitle", color: "muted", component: "div", size: "xsmall" }, text))));
+    }
+    const isConnected = walletService.isConnected && walletService.providerId === providerConfig.id;
+    const isConnecting = walletService.isConnecting && walletProviders.connectingProvider?.id === providerConfig.id;
+    return (React.createElement(react_uikit_1.Button, { className: "evm-connect-provider-button", disabled: isConnected || isConnecting, onClick: onSelect },
+        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" },
+            providerConfig.info.name,
+            providerConfig.info.description && (React.createElement(react_uikit_1.Text, { className: "evm-connect-provider-subtitle", color: "muted", component: "div", size: "xsmall", wrap: "truncate" }, providerConfig.info.description))),
+        isConnected && (React.createElement("span", { className: "evm-connect-provider-connected" }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_CONNECTED_HINT))),
+        !isConnected && providerConfig.isRecent && (React.createElement("span", { className: "evm-connect-provider-recent" }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_RECENT_HINT)))));
+});

package/dist/cjs/components/EvmProvidersDispatcher/index.css

@@ -0,0 +1,13 @@
+.evm-connect-providers-dispatcher {
+    backface-visibility: hidden;
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    overflow: hidden;
+    transition: height var(--transition-fast-duration) var(--ease-in);
+    width: inherit;
+}
+
+.evm-connect-providers-list {
+    margin: 0;
+}

package/dist/cjs/components/EvmProvidersDispatcher/index.d.ts

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

package/dist/cjs/components/EvmProvidersDispatcher/index.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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 ConnectionRequest_1 = require("../../components/EvmProvidersDispatcher/ConnectionRequest");
+const ProviderButton_1 = require("../../components/EvmProvidersDispatcher/ProviderButton");
+const context_1 = require("../../context");
+const hooks_1 = require("../../hooks");
+require("./index.css");
+exports.EvmProvidersDispatcher = (0, mobx_react_lite_1.observer)(() => {
+    const walletProviders = (0, context_1.useEvmWalletProviders)();
+    const orderedProviders = (0, hooks_1.useOrderedConnections)(walletProviders.providers ?? []);
+    const dispatcher = React.useRef(null);
+    const content = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (dispatcher.current) {
+            const height = content.current?.clientHeight;
+            dispatcher.current.style.height = height ? `${height}px` : '';
+        }
+    });
+    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/dist/cjs/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from '../components/EvmConnectButton';
+export * from '../components/EvmConnectDialog';
+export * from '../components/EvmConnector';
+export * from '../components/EvmProvidersDispatcher';

package/dist/cjs/components/index.js

@@ -0,0 +1,20 @@
+"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 __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("../components/EvmConnectButton"), exports);
+__exportStar(require("../components/EvmConnectDialog"), exports);
+__exportStar(require("../components/EvmConnector"), exports);
+__exportStar(require("../components/EvmProvidersDispatcher"), exports);

package/dist/cjs/constants.d.ts

@@ -0,0 +1 @@
+export declare const EVM_RECENT_CONNECTION = "EVM_RECENT_CONNECTION";

package/dist/cjs/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EVM_RECENT_CONNECTION = void 0;
+exports.EVM_RECENT_CONNECTION = 'EVM_RECENT_CONNECTION';

package/dist/cjs/context/EvmWalletProvidersContext.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type EvmWalletProviderConfig } from '../types';
+export interface EvmWalletProvidersContextConsumer {
+    agreementsNote?: React.ReactNode;
+    connect: (providerConfig: EvmWalletProviderConfig) => Promise<void>;
+    connectingProvider?: EvmWalletProviderConfig | null;
+    error?: Error | null;
+    providers?: Readonly<EvmWalletProviderConfig[]>;
+    reset: VoidFunction;
+}
+export declare const EvmWalletProvidersContext: React.Context<EvmWalletProvidersContextConsumer | null>;
+export declare function useEvmWalletProviders(): EvmWalletProvidersContextConsumer;
+export type EvmWalletProvidersProviderProps = React.PropsWithChildren<{
+    agreementsNote?: React.ReactNode;
+    providers?: Readonly<EvmWalletProviderConfig[]>;
+    onConnected?: VoidFunction;
+}>;
+export declare const EvmWalletProvidersProvider: ((props: EvmWalletProvidersProviderProps) => React.JSX.Element) & {
+    displayName: string;
+};

package/dist/cjs/context/EvmWalletProvidersContext.js

@@ -0,0 +1,95 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EvmWalletProvidersProvider = exports.useEvmWalletProviders = exports.EvmWalletProvidersContext = void 0;
+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");
+const hooks_1 = require("../hooks");
+exports.EvmWalletProvidersContext = React.createContext(null);
+function useEvmWalletProviders() {
+    return (0, react_uikit_1.useContext)(exports.EvmWalletProvidersContext);
+}
+exports.useEvmWalletProviders = useEvmWalletProviders;
+exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)((props) => {
+    const walletService = (0, EvmWalletServiceContext_1.useEvmWalletService)();
+    const [recentMeta, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
+    const { agreementsNote, children, providers = walletService.providers } = props;
+    const [error, setError] = React.useState(null);
+    const [connectingProvider, setConnectingProvider] = React.useState(null);
+    const connect = React.useCallback(async (providerConfig) => {
+        try {
+            setError(null);
+            setConnectingProvider(providerConfig);
+            const prevConnector = walletService.connector;
+            const chainParams = 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 : {
+                blockExplorerUrls: [chainParams.explorer.baseUrl],
+                chainId: Number(chainParams.chainId),
+                chainName: chainParams.name,
+                nativeCurrency: {
+                    decimals: 18,
+                    name: chainParams.currency.name,
+                    symbol: chainParams.currency.symbol,
+                },
+                rpcUrls: [chainParams.rpcUrl],
+            });
+            if (providerConfig.id !== walletService.providerId) {
+                await prevConnector?.disconnect(true);
+            }
+            setRecentMeta({
+                chainId: providerConfig.connector.chainId?.toString(),
+                disconnected: false,
+                providerId: providerConfig.id,
+                type: providerConfig.connector.type,
+            });
+            walletService.setState('providerId', providerConfig.id);
+        }
+        catch (e) {
+            setError(e);
+        }
+    }, [recentMeta, setRecentMeta, walletService]);
+    const reset = React.useCallback(() => {
+        setError(null);
+        setConnectingProvider(null);
+    }, []);
+    const context = React.useMemo(() => ({
+        agreementsNote,
+        connect,
+        connectingProvider,
+        error,
+        providers,
+        reset,
+    }), [agreementsNote, connect, connectingProvider, error, providers, reset]);
+    return React.createElement(exports.EvmWalletProvidersContext.Provider, { value: context }, children);
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.EvmWalletProvidersContext.displayName = 'EvmWalletProvidersContext';
+}

package/dist/cjs/context/EvmWalletServiceContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { EvmWalletService, type EvmWalletServiceCtorParams } from '../services';
+export declare const EvmWalletServiceContext: React.Context<EvmWalletService | null>;
+export declare function useEvmWalletService(): EvmWalletService;
+type EvmWalletProviderProps = React.PropsWithChildren<{
+    params?: EvmWalletServiceCtorParams;
+    wallet?: EvmWalletService;
+}>;
+export declare const EvmWalletServiceProvider: React.MemoExoticComponent<({ children, params, wallet, }: EvmWalletProviderProps) => React.JSX.Element>;
+export {};

package/dist/cjs/context/EvmWalletServiceContext.js

@@ -0,0 +1,55 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EvmWalletServiceProvider = exports.useEvmWalletService = exports.EvmWalletServiceContext = void 0;
+const react_uikit_1 = require("@broxus/react-uikit");
+const mobx_1 = require("mobx");
+const React = __importStar(require("react"));
+const hooks_1 = require("../hooks");
+const services_1 = require("../services");
+exports.EvmWalletServiceContext = React.createContext(null);
+function useEvmWalletService() {
+    return (0, react_uikit_1.useContext)(exports.EvmWalletServiceContext);
+}
+exports.useEvmWalletService = useEvmWalletService;
+exports.EvmWalletServiceProvider = React.memo(({ children, params, wallet, }) => {
+    const [, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
+    const context = React.useMemo(() => {
+        if (wallet instanceof services_1.EvmWalletService) {
+            return wallet;
+        }
+        return new services_1.EvmWalletService({ ...params });
+    }, [params, wallet]);
+    React.useEffect(() => (0, mobx_1.reaction)(() => context.chainId, chainId => {
+        if (chainId) {
+            const recentMeta = (0, hooks_1.getRecentConnectionMeta)();
+            setRecentMeta({ ...recentMeta, chainId: chainId.toString() });
+        }
+    }, { delay: 10, fireImmediately: context.isReady }), [context, setRecentMeta]);
+    return React.createElement(exports.EvmWalletServiceContext.Provider, { value: context }, children);
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.EvmWalletServiceContext.displayName = 'EvmWalletServiceContext';
+}

package/dist/cjs/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../context/EvmWalletProvidersContext';
+export * from '../context/EvmWalletServiceContext';

package/dist/cjs/context/index.js

@@ -0,0 +1,18 @@
+"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 __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("../context/EvmWalletProvidersContext"), exports);
+__exportStar(require("../context/EvmWalletServiceContext"), exports);

package/dist/cjs/core/EIP6963Connector.d.ts

@@ -0,0 +1,17 @@
+import { type EIP6963ProviderInfo } from 'web3/lib/commonjs/web3_eip6963';
+import { type EthExecutionAPI, type ProviderConnectInfo } from 'web3-types';
+import { EthereumConnector, type EthereumConnectorCtorParams } from '../core';
+import { type AddEthereumChainParams, ConnectionType, type SupportedProviders } from '../types';
+export interface EIP6963ConnectorCtorParams extends EthereumConnectorCtorParams {
+    info: EIP6963ProviderInfo;
+    provider: Readonly<SupportedProviders<EthExecutionAPI>>;
+}
+export declare class EIP6963Connector extends EthereumConnector {
+    protected readonly params: Readonly<EIP6963ConnectorCtorParams>;
+    readonly type = ConnectionType.EIP_6963_INJECTED;
+    constructor(params: Readonly<EIP6963ConnectorCtorParams>);
+    connect(chainIdOrParams?: number | AddEthereumChainParams): Promise<void>;
+    disconnect(): Promise<void>;
+    protected init(): Promise<void>;
+    protected handleConnect({ chainId }: ProviderConnectInfo): void;
+}