@broxus/evm-connect 1.13.7 → 1.14.0

package/lib/esm/_sdk.js

@@ -0,0 +1,6 @@
+export * from './connectors';
+export * from './core';
+export * from './services';
+export * from './utils';
+export * from './constants';
+export * from './types';

package/lib/esm/components/{EvmConnectButton/index.d.ts → EvmConnectButton.d.ts}

@@ -1,8 +1,8 @@
 import { type ButtonProps } from '@broxus/react-uikit';
 import * as React from 'react';
-import { type EvmConnectDialogProps } from '../../components/EvmConnectDialog';
-import { type EvmWalletService } from '../../services';
-import { type EvmNetworkConfig } from '../../types';
+import { type EvmConnectDialogProps } from '../components/EvmConnectDialog';
+import { type EvmWalletService } from '../services';
+import { type EvmNetworkConfig } from '../types';
 interface TriggerProps {
     disabled?: boolean;
     connect: VoidFunction;

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

@@ -1,9 +1,9 @@
 import { Button } from '@broxus/react-uikit';
 import { observer } from 'mobx-react-lite';
 import * as React from 'react';
-import { EvmConnectDialog } from '../../components/EvmConnectDialog';
-import { EvmWalletProvidersContext, EvmWalletProvidersProvider, useEvmWalletService } from '../../context';
-import { convertNetworkToChainParams } from '../../utils';
+import { EvmConnectDialog } from '../components/EvmConnectDialog';
+import { EvmWalletProvidersContext, EvmWalletProvidersProvider, useEvmWalletService } from '../context';
+import { toChainParams } from '../utils';
 export const EvmConnectButton = observer(({ disabled, network, popupClassName, popupType, trigger, onClose, onConnect, onOpen, ...props }) => {
     const walletService = useEvmWalletService();
     const walletProviders = React.useContext(EvmWalletProvidersContext);
@@ -19,7 +19,7 @@ export const EvmConnectButton = observer(({ disabled, network, popupClassName, p
     }, [onOpen]);
     const connect = React.useCallback(async () => {
         setModalVisibility(false);
-        const networkParams = network?.chainId ? convertNetworkToChainParams(network) : undefined;
+        const networkParams = network?.chainId ? toChainParams(network) : undefined;
         await Promise.allSettled([
             onConnect?.(walletService),
             walletService.connect(networkParams).catch(() => {

package/lib/esm/components/{EvmConnectDialog/index.d.ts → EvmConnectDialog.d.ts}

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import './index.css';
 export interface EvmConnectDialogProps {
     className?: string;
     open?: boolean;

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

@@ -1,13 +1,13 @@
+import { getScrollWidth } from '@broxus/js-utils';
 import { Close } from '@broxus/react-components';
 import { Component, Drawer, Modal, Text, addModalMode, removeModalMode } 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 { EvmProvidersDispatcher } from '../../components';
-import { useEvmWalletProviders } from '../../context';
-import messages from '../../intl';
-import './index.css';
+import { EvmProvidersDispatcher } from '../components';
+import { useEvmWalletProviders } from '../context';
+import messages from '../intl';
 export const EvmConnectDialog = observer(({ className, open, type, onClose }) => {
     const intl = useIntl();
     const walletProviders = useEvmWalletProviders();
@@ -28,7 +28,10 @@ export const EvmConnectDialog = observer(({ className, open, type, onClose }) =>
                 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': `${getScrollWidth()}px`,
+            }, 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))),
@@ -36,6 +39,9 @@ export const EvmConnectDialog = observer(({ className, open, type, onClose }) =>
                 React.createElement(EvmProvidersDispatcher, null)),
             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: onClose }), destroyOnHidden: 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 },
+    return (React.createElement(Modal, { centered: true, className: classNames('evm-connect-modal', className), closeIcon: React.createElement(Close, { kind: "modal", ratio: 0.9, onClick: onClose }), destroyOnHidden: 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, style: {
+            // @ts-ignore
+            '--global-scroll-width': `${getScrollWidth()}px`,
+        }, onClose: onClose, onClosed: onClosed },
         React.createElement(EvmProvidersDispatcher, null)));
 });

package/lib/esm/components/EvmConnectionRequest.d.ts

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

package/lib/esm/components/EvmConnectionRequest.js

@@ -0,0 +1,41 @@
+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';
+export const EvmConnectionRequest = observer(() => {
+    const intl = useIntl();
+    const walletProviders = useEvmWalletProviders();
+    const tryAgain = async () => {
+        if (walletProviders.connectingProvider) {
+            await walletProviders.connect(walletProviders.connectingProvider);
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { className: "evm-connect-back-button uk-position-top-left", type: "text", onClick: walletProviders.reset },
+            React.createElement(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(Grid, { childWidth: 1, gap: "collapse" },
+                walletProviders.connectingProvider?.info.icon && (React.createElement(Text, { align: "center", className: classNames('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(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(Text, { className: "evm-connect-connection-request-title", component: "h4" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TITLE, {
+                        title: walletProviders.connectingProvider?.info.name ?? 'wallet',
+                    })),
+                    React.createElement(Text, { className: "uk-margin-small-bottom", component: "div", size: "small" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_NOTE)))) : (React.createElement("div", { className: "uk-text-center" },
+                    React.createElement(Text, { className: "evm-connect-connection-request-title", component: "h4" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_TITLE)),
+                    React.createElement(Text, { className: "uk-margin-small-bottom", color: "danger", component: "div", size: "small" }, walletProviders.error.message
+                        ?? intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_NOTE)),
+                    React.createElement(Button, { type: "link", onClick: tryAgain }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TRY_AGAIN_BTN_TEXT))))))));
+});

package/lib/esm/components/{EvmConnector/index.d.ts → EvmConnector.d.ts}

@@ -1,7 +1,6 @@
 import { type ButtonProps } from '@broxus/react-uikit';
 import * as React from 'react';
-import { type EvmNetworkConfig } from '../../types';
-import './index.css';
+import { type EvmNetworkConfig } from '../types';
 export interface EvmConnectorProps {
     changeWalletButtonText?: React.ReactNode;
     className?: string;

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

@@ -5,11 +5,10 @@ import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
-import { EvmConnectButton } from '../../components/EvmConnectButton';
-import { useEvmWalletService } from '../../context';
-import { useRecentConnectionMeta } from '../../hooks';
-import messages from '../../intl';
-import './index.css';
+import { EvmConnectButton } from '../components/EvmConnectButton';
+import { useEvmWalletService } from '../context';
+import { useRecentConnectionMeta } from '../hooks';
+import messages from '../intl';
 export const EvmConnector = observer((props) => {
     const intl = useIntl();
     const walletService = useEvmWalletService();

package/lib/esm/components/EvmProviderButton.d.ts

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

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

@@ -5,12 +5,11 @@ import { reaction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
-import { useEvmWalletProviders, useEvmWalletService } from '../../../context';
-import messages from '../../../intl';
-import { EthereumConnectionType } from '../../../types';
-import { getEvmProviderPlatformLink } from '../../../utils';
-import './index.css';
-export const ProviderButton = observer(({ providerConfig, onSelect: onSelectProvider }) => {
+import { useEvmWalletProviders, useEvmWalletService } from '../context';
+import messages from '../intl';
+import { EthereumConnectionType } from '../types';
+import { getEvmProviderPlatformLink } from '../utils';
+export const EvmProviderButton = observer(({ providerConfig, onSelect: onSelectProvider }) => {
     const intl = useIntl();
     const walletService = useEvmWalletService();
     const walletProviders = useEvmWalletProviders();
@@ -35,8 +34,8 @@ export const ProviderButton = observer(({ providerConfig, onSelect: onSelectProv
     }, { fireImmediately: true }), [providerConfig.connector]);
     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", { className: "evm-connect-provider-icon" }, typeof providerConfig.info.icon === 'string' ? (React.createElement(TokenIcon, { iconUrl: providerConfig.info.icon, size: 28 })) : providerConfig.info.icon),
+            React.createElement("span", { className: "evm-connect-provider-title" }, intl.formatMessage(messages.EVM_CONNECT_INITIALIZING_HINT)),
             React.createElement("span", null,
                 React.createElement(Spinner, { ratio: 0.8 }))));
     }

package/lib/esm/components/{EvmProvidersDispatcher/index.d.ts → EvmProvidersDispatcher.d.ts}

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

package/lib/esm/components/EvmProvidersDispatcher.js

@@ -0,0 +1,40 @@
+import { Grid, Text, useMounted } 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 { EvmConnectionRequest } from '../components/EvmConnectionRequest';
+import { EvmProvidersList } from '../components/EvmProvidersList';
+import { useEvmWalletProviders, useEvmWalletService } from '../context';
+import messages from '../intl';
+export const EvmProvidersDispatcher = observer(() => {
+    const intl = useIntl();
+    const walletService = useEvmWalletService();
+    const walletProviders = useEvmWalletProviders();
+    const isMounted = useMounted();
+    const container = React.useRef(null);
+    const content = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (container.current) {
+            const height = content.current?.clientHeight;
+            container.current.style.height = height ? `${Math.ceil(height) + 1}px` : '';
+        }
+    }, [walletProviders.connectingProvider, walletProviders.error]);
+    if (walletService.providers.length === 0) {
+        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(messages.EVM_CONNECT_DISPATCHER_POPUP_NO_PROVIDERS_HINT))));
+    }
+    return (React.createElement("div", { ref: container, className: "evm-connect-providers-dispatcher" },
+        React.createElement("div", { ref: content }, walletProviders.connectingProvider ? (React.createElement(EvmConnectionRequest, null)) : (React.createElement("div", { className: classNames('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(Grid, { childWidth: 1 },
+                React.createElement("div", null,
+                    React.createElement(Text, { align: "center", component: "div", kind: "meta" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_NOTE))),
+                React.createElement("div", null,
+                    React.createElement(EvmProvidersList, null))))))));
+});

package/lib/esm/components/EvmProvidersList.d.ts

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

package/lib/esm/components/EvmProvidersList.js

@@ -0,0 +1,13 @@
+import { List } from '@broxus/react-uikit';
+import { observer } from 'mobx-react-lite';
+import * as React from 'react';
+import { EvmProviderButton } from '../components/EvmProviderButton';
+import { useEvmWalletService } from '../context';
+import { useOrderedConnections, useRecentConnectionMeta } from '../hooks';
+export const EvmProvidersList = observer(() => {
+    const service = useEvmWalletService();
+    const [recentMeta] = useRecentConnectionMeta();
+    const orderedProviders = useOrderedConnections(service.providers ?? [], recentMeta);
+    return (React.createElement(List, { className: "evm-connect-providers-list" }, orderedProviders.map(providerConfig => (React.createElement(List.Item, { key: providerConfig.id },
+        React.createElement(EvmProviderButton, { providerConfig: providerConfig }))))));
+});

package/lib/esm/connectors/EIP6963Connector.d.ts

@@ -1,5 +1,4 @@
-import { type EIP6963ProviderInfo } from 'web3/lib/commonjs/web3_eip6963';
-import { type EthExecutionAPI, type ProviderConnectInfo } from 'web3-types';
+import { type EIP6963ProviderInfo, type EthExecutionAPI, type ProviderConnectInfo } from 'web3';
 import { EthereumConnector, type EthereumConnectorCtorParams } from '../core';
 import { type AddEthereumChainParams, EthereumConnectionType, type SupportedProviders } from '../types';
 export interface EIP6963ConnectorCtorParams extends EthereumConnectorCtorParams {

package/lib/esm/connectors/MetaMask.d.ts

@@ -1,5 +1,5 @@
 import detectEthereumProvider from '@metamask/detect-provider';
-import { type EthExecutionAPI, type MetaMaskProvider, type ProviderConnectInfo } from 'web3-types';
+import { type EthExecutionAPI, type MetaMaskProvider, type ProviderConnectInfo } from 'web3';
 import { EthereumConnector, type EthereumConnectorCtorParams } from '../core';
 import { type AddEthereumChainParams, EthereumConnectionType } from '../types';
 interface MetaMaskEthereumProvider extends MetaMaskProvider<EthExecutionAPI> {

package/lib/esm/context/EvmWalletProvidersContext.js

@@ -1,11 +1,10 @@
 'use client';
 import { debug } from '@broxus/js-utils';
-import { useContext } from '@broxus/react-uikit';
 import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 import { useEvmWalletService } from '../context/EvmWalletServiceContext';
-import { getRecentConnectionMeta, storeRecentConnectionMeta } from '../hooks';
-import { convertNetworkToChainParams } from '../utils';
+import { useContext } from '../hooks';
+import { getRecentConnectionMeta, storeRecentConnectionMeta, toChainParams } from '../utils';
 export const EvmWalletProvidersContext = React.createContext(null);
 export function useEvmWalletProviders() {
     return useContext(EvmWalletProvidersContext);
@@ -27,7 +26,7 @@ export const EvmWalletProvidersProvider = observer(({ agreementsNote, children,
             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 });
+                : networkParams && toChainParams(networkParams), { onConnect });
             if (walletService.providerId && providerConfig.id !== walletService.providerId) {
                 await prevConnector?.disconnect({ force: true });
             }

package/lib/esm/context/EvmWalletServiceContext.js

@@ -1,10 +1,10 @@
 'use client';
-import { useContext } from '@broxus/react-uikit';
 import { reaction } from 'mobx';
 import * as React from 'react';
 import { EvmWalletProvidersProvider } from '../context/EvmWalletProvidersContext';
-import { getRecentConnectionMeta, storeRecentConnectionMeta } from '../hooks';
+import { useContext } from '../hooks';
 import { EvmWalletService } from '../services';
+import { getRecentConnectionMeta, storeRecentConnectionMeta } from '../utils';
 export const EvmWalletServiceContext = React.createContext(null);
 export function useEvmWalletService() {
     return useContext(EvmWalletServiceContext);

package/lib/esm/core/EthereumConnector.d.ts

@@ -1,5 +1,5 @@
 import { AbstractStore } from '@broxus/js-core';
-import { type EthExecutionAPI, type ProviderRpcError } from 'web3-types';
+import { type EthExecutionAPI, type ProviderRpcError } from 'web3';
 import { type AddEthereumChainParams, type EthereumConnectionType, type SupportedProviders, type WatchAssetParameters } from '../types';
 export interface EthereumConnectorCtorParams {
     onDisconnect?: (err: ProviderRpcError) => Promise<void> | void;

package/lib/esm/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from '../hooks/useContext';
 export * from '../hooks/useEIP6963Connections';
 export * from '../hooks/useFilteredConnections';
 export * from '../hooks/useOrderedConnections';

package/lib/esm/hooks/index.js

@@ -1,3 +1,4 @@
+export * from '../hooks/useContext';
 export * from '../hooks/useEIP6963Connections';
 export * from '../hooks/useFilteredConnections';
 export * from '../hooks/useOrderedConnections';

package/lib/esm/hooks/useContext.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function useContext<T>(Context: React.Context<T>): NonNullable<T>;

package/lib/esm/hooks/useContext.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export 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/esm/hooks/useEIP6963Connections.d.ts

@@ -1,4 +1,4 @@
-import { type EIP6963ProviderDetail } from 'web3/lib/commonjs/web3_eip6963';
+import { type EIP6963ProviderDetail } from 'web3';
 export declare const store: {
     readonly subscribe: (callback: () => void) => () => void;
     readonly value: () => EIP6963ProviderDetail<unknown>[];

package/lib/esm/hooks/useOrderedConnections.d.ts

@@ -1,3 +1,2 @@
-import { type RecentConnectionMeta } from '../hooks/useRecentConnectionMeta';
-import { type EvmWalletProviderConfig } from '../types';
+import { type EvmWalletProviderConfig, type RecentConnectionMeta } from '../types';
 export declare function useOrderedConnections(providers: Readonly<EvmWalletProviderConfig[]>, recentMeta?: RecentConnectionMeta): EvmWalletProviderConfig[];

package/lib/esm/hooks/useRecentConnectionMeta.d.ts

@@ -1,12 +1,4 @@
-import { EthereumConnectionType } from '../types';
-export interface RecentConnectionMeta {
-    chainId?: string;
-    disconnected?: boolean;
-    providerId: string;
-    type?: EthereumConnectionType;
-}
-export declare function storeRecentConnectionMeta(meta: RecentConnectionMeta | undefined, storageKey?: string): void;
-export declare function getRecentConnectionMeta(storageKey?: string): RecentConnectionMeta | undefined;
+import { type RecentConnectionMeta } from '../types';
 type UseRecentConnectionMeta = [
     value: RecentConnectionMeta | undefined,
     setValue: (meta: RecentConnectionMeta | undefined) => void

package/lib/esm/hooks/useRecentConnectionMeta.js

@@ -1,37 +1,8 @@
-import { debug, isBrowser, storage } from '@broxus/js-utils';
+import { isBrowser } from '@broxus/js-utils';
 import * as React from 'react';
 import { EVM_RECENT_CONNECTION } from '../constants';
 import { useEvmWalletProviders } from '../context';
-import { EthereumConnectionType } from '../types';
-function isRecentConnectionMeta(value) {
-    const meta = { providerId: value.providerId, type: value.type };
-    return Boolean(meta.type && EthereumConnectionType[meta.type] && !!meta.providerId);
-}
-export function storeRecentConnectionMeta(meta, storageKey = EVM_RECENT_CONNECTION) {
-    if (!meta) {
-        storage.remove(storageKey);
-        return;
-    }
-    debug('Store EVM recent connection', meta);
-    storage.set(storageKey, JSON.stringify(meta));
-}
-export function getRecentConnectionMeta(storageKey = EVM_RECENT_CONNECTION) {
-    const value = storage.get(storageKey);
-    if (!value) {
-        return undefined;
-    }
-    try {
-        const json = JSON.parse(value);
-        if (isRecentConnectionMeta(json)) {
-            return json;
-        }
-    }
-    catch (e) {
-        debug(e);
-    }
-    storeRecentConnectionMeta(undefined, storageKey);
-    return undefined;
-}
+import { getRecentConnectionMeta, isRecentConnectionMeta, storeRecentConnectionMeta } from '../utils';
 export function useRecentConnectionMeta() {
     const walletProviders = useEvmWalletProviders();
     const storageKey = walletProviders.recentMetaStorageKey ?? EVM_RECENT_CONNECTION;
@@ -57,5 +28,8 @@ export function useRecentConnectionMeta() {
             }
         };
     }, [storageKey]);
+    React.useEffect(() => {
+        setRecentMeta(getRecentConnectionMeta(storageKey));
+    }, [storageKey]);
     return [recentMeta, setMeta];
 }

package/lib/esm/intl/index.d.ts

@@ -0,0 +1,115 @@
+declare const _default: {
+    EVM_CONNECT_AGREEMENTS_NOTE: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_NOT_CONNECTED_HINT: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_INITIALIZING_HINT: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_CONNECT_BTN_TEXT: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_DISCONNECT_BTN_TEXT: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_CHANGE_WALLET_BTN_TEXT: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_UNSUPPORTED_NETWORK_WARNING: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_CONNECTOR_BLOCKCHAIN_NAME: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_CONNECTOR_EXPLORER_HINT: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_INSTALL_PROVIDER: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_INSTALL_ANDROID_PLATFORM: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_INSTALL_IOS_PLATFORM: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_INSTALL_CHROME_EXTENSION_PLATFORM: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_INSTALL_FIREFOX_EXTENSION_PLATFORM: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_INSTALL_SAFARI_EXTENSION_PLATFORM: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_INSTALL_UNKNOWN_PLATFORM: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_PROVIDER_HOMEPAGE: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_PROVIDER_HOMEPAGE_NOTE: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_DISPATCHER_POPUP_TITLE: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_DISPATCHER_POPUP_NOTE: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TITLE: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_DISPATCHER_POPUP_REQUEST_NOTE: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_TITLE: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_NOTE: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TRY_AGAIN_BTN_TEXT: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_DISPATCHER_POPUP_CONNECTED_HINT: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_DISPATCHER_POPUP_RECENT_HINT: {
+        defaultMessage: string;
+        id: string;
+    };
+    EVM_CONNECT_DISPATCHER_POPUP_NO_PROVIDERS_HINT: {
+        defaultMessage: string;
+        id: string;
+    };
+};
+export default _default;

package/lib/esm/intl/index.js

@@ -78,7 +78,7 @@ export default 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/esm/services/EvmWalletService.js

@@ -11,7 +11,7 @@ import { AbstractStore } from '@broxus/js-core';
 import { debounce, debug, error } from '@broxus/js-utils';
 import { action, computed, makeObservable, reaction } from 'mobx';
 import Web3 from 'web3';
-import { convertNetworkToChainParams } from '../utils';
+import { toChainParams } from '../utils';
 export class EvmWalletService extends AbstractStore {
     params;
     name = 'EvmWalletService';
@@ -60,7 +60,7 @@ export class EvmWalletService extends AbstractStore {
             // eslint-disable-next-line no-nested-ternary
             const networkParams = typeof networkIdOParams === 'object'
                 ? networkIdOParams
-                : network ? convertNetworkToChainParams(network) : undefined;
+                : network ? toChainParams(network) : undefined;
             await this.connector?.connect(networkParams ?? 1);
         }
         catch (e) {