@broxus/evm-connect 1.4.0 → 1.4.2

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

@@ -2,10 +2,12 @@ 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';
 export type EvmConnectButtonProps = React.PropsWithChildren<{
     agreementsNote?: React.ReactNode;
     className?: string;
     disabled?: boolean;
+    network?: EvmNetworkConfig;
     popupClassName?: EvmConnectDialogProps['className'];
     popupType?: EvmConnectDialogProps['type'];
     shape?: ButtonProps['shape'];
@@ -16,6 +18,6 @@ export type EvmConnectButtonProps = React.PropsWithChildren<{
     onConnect?: (walletService?: EvmWalletService) => Promise<void> | void;
     onOpen?: VoidFunction;
 }>;
-export declare const EvmConnectButton: ((props: EvmConnectButtonProps) => React.JSX.Element) & {
+export declare const EvmConnectButton: (({ children, className, disabled, network, popupClassName, popupType, shape, size, standalone, type, onClose, onConnect, onOpen, }: EvmConnectButtonProps) => React.JSX.Element) & {
     displayName: string;
 };

package/dist/cjs/components/EvmConnectButton/index.js

@@ -29,15 +29,18 @@ 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");
-exports.EvmConnectButton = (0, mobx_react_lite_1.observer)((props) => {
+const utils_1 = require("../../utils");
+exports.EvmConnectButton = (0, mobx_react_lite_1.observer)(({ children, className, disabled, network, popupClassName, popupType, shape, size, standalone, type = 'primary', onClose, onConnect, onOpen, }) => {
     const walletService = (0, context_1.useEvmWalletService)();
     const walletProviders = React.useContext(context_1.EvmWalletProvidersContext);
-    const { children, className, disabled, popupClassName, popupType, shape, size, standalone, type = 'primary', onClose, onConnect, onOpen, } = props;
     const [isModalShown, setModalVisibility] = React.useState(false);
     const connect = React.useCallback(async () => {
         setModalVisibility(false);
-        await Promise.allSettled([onConnect?.(walletService), walletService.connect()]);
-    }, [onConnect, walletService]);
+        await Promise.allSettled([
+            onConnect?.(walletService),
+            walletService.connect(network?.chainId ? (0, utils_1.convertNetworkToChainParams)(network) : undefined),
+        ]);
+    }, [network, onConnect, walletService]);
     const close = React.useCallback(() => {
         setModalVisibility(false);
         onClose?.();
@@ -48,6 +51,6 @@ exports.EvmConnectButton = (0, mobx_react_lite_1.observer)((props) => {
     }, [onOpen]);
     return (React.createElement(React.Fragment, null,
         React.createElement(react_uikit_1.Button, { "aria-disabled": walletService.isInitializing || walletService.isConnecting, disabled: disabled === undefined ? walletService.isInitializing || walletService.isConnecting : disabled, className: className, shape: shape, size: size, type: type, onClick: standalone ? connect : open }, children),
-        !standalone && (React.createElement(context_1.EvmWalletProvidersProvider, { agreementsNote: walletProviders?.agreementsNote, onConnect: close },
+        !standalone && (React.createElement(context_1.EvmWalletProvidersProvider, { agreementsNote: walletProviders?.agreementsNote, network: network, onConnect: close },
             React.createElement(EvmConnectDialog_1.EvmConnectDialog, { className: popupClassName, open: isModalShown, type: popupType, onClose: close })))));
 });

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

@@ -1,5 +1,6 @@
 import { type ButtonProps } from '@broxus/react-uikit';
 import * as React from 'react';
+import { type EvmNetworkConfig } from '../../types';
 import './index.css';
 export interface EvmConnectorProps {
     changeWalletButtonText?: React.ReactNode;
@@ -8,6 +9,7 @@ export interface EvmConnectorProps {
     connectButtonText?: React.ReactNode;
     connectButtonType?: ButtonProps['type'];
     disconnectButtonText?: React.ReactNode;
+    network?: EvmNetworkConfig;
     popupType?: 'drawer';
     suffix?: React.ReactNode;
     showDropMenu?: boolean;

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

@@ -44,7 +44,7 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
     const walletService = (0, context_1.useEvmWalletService)();
     const [, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
     const drop = React.useRef(null);
-    const { changeWalletButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CHANGE_WALLET_BTN_TEXT), className, connectButtonShape, connectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CONNECT_BTN_TEXT), connectButtonType, disconnectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_DISCONNECT_BTN_TEXT), popupType, suffix, showDropMenu = true, showSubIcon = true, standalone = walletService.providers?.length === 1, } = props;
+    const { changeWalletButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CHANGE_WALLET_BTN_TEXT), className, connectButtonShape, connectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CONNECT_BTN_TEXT), connectButtonType, disconnectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_DISCONNECT_BTN_TEXT), network, popupType, suffix, showDropMenu = true, showSubIcon = true, standalone = walletService.providers?.length === 1, } = props;
     const changeWallet = () => {
         drop.current?.close();
     };
@@ -84,9 +84,9 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
             suffix,
             walletService.isConnected && showDropMenu && (React.createElement(react_uikit_1.Dropdown, { ref: drop, action: "click", overlayClassName: "evm-connect-dropdown", overlay: (React.createElement(react_uikit_1.List, { className: "uk-margin-remove", size: "large" },
                     !standalone && (React.createElement(react_uikit_1.List.Item, { key: "connect-wallet" },
-                        React.createElement(EvmConnectButton_1.EvmConnectButton, { className: "evm-connect-change-wallet", popupType: popupType, type: "link", onOpen: changeWallet }, changeWalletButtonText))),
+                        React.createElement(EvmConnectButton_1.EvmConnectButton, { className: "evm-connect-change-wallet", network: network, popupType: popupType, type: "link", onOpen: changeWallet }, changeWalletButtonText))),
                     React.createElement(react_uikit_1.List.Item, null,
                         React.createElement(react_uikit_1.Button, { "aria-disabled": walletService.isDisconnecting, className: "evm-connect-logout", disabled: walletService.isDisconnecting, type: "link", onClick: disconnect }, disconnectButtonText)))), placement: "bottom-right" },
                 React.createElement(react_components_1.Icon, { className: "evm-connect-dropdown-trigger", icon: "ellipsisVertical", ratio: 0.8 }))),
-            !walletService.isConnected && (React.createElement(EvmConnectButton_1.EvmConnectButton, { key: "connect", popupType: popupType, shape: connectButtonShape, standalone: standalone, type: connectButtonType }, connectButtonText)))));
+            !walletService.isConnected && (React.createElement(EvmConnectButton_1.EvmConnectButton, { key: "connect", network: network, popupType: popupType, shape: connectButtonShape, standalone: standalone, type: connectButtonType }, connectButtonText)))));
 });

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type EthereumConnector } from '../core';
-import { type EvmWalletProviderConfig } from '../types';
+import { type EvmNetworkConfig, type EvmWalletProviderConfig } from '../types';
 export interface EvmWalletProvidersContextConsumer {
     agreementsNote?: React.ReactNode;
     connect: (providerConfig: EvmWalletProviderConfig) => Promise<void>;
@@ -12,8 +12,9 @@ export declare const EvmWalletProvidersContext: React.Context<EvmWalletProviders
 export declare function useEvmWalletProviders(): EvmWalletProvidersContextConsumer;
 export type EvmWalletProvidersProviderProps = React.PropsWithChildren<{
     agreementsNote?: React.ReactNode;
+    network?: EvmNetworkConfig;
     onConnect?: (connector?: EthereumConnector) => Promise<void> | void;
 }>;
-export declare const EvmWalletProvidersProvider: (({ agreementsNote, children, onConnect }: EvmWalletProvidersProviderProps) => React.JSX.Element) & {
+export declare const EvmWalletProvidersProvider: (({ agreementsNote, children, network, onConnect }: EvmWalletProvidersProviderProps) => React.JSX.Element) & {
     displayName: string;
 };

package/dist/cjs/context/EvmWalletProvidersContext.js

@@ -30,12 +30,13 @@ 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");
+const utils_1 = require("../utils");
 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)(({ agreementsNote, children, onConnect }) => {
+exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)(({ agreementsNote, children, network, onConnect }) => {
     const walletService = (0, EvmWalletServiceContext_1.useEvmWalletService)();
     const [recentMeta, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
     const [error, setError] = React.useState(null);
@@ -45,23 +46,12 @@ exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)(({ agreemen
             setError(null);
             setConnectingProvider(providerConfig);
             const prevConnector = walletService.connector;
-            const chainParams = recentMeta?.chainId
-                ? walletService.networks.find(network => network.chainId === recentMeta.chainId) ?? 1
-                : 1;
+            // eslint-disable-next-line no-nested-ternary
+            const chainParams = network?.chainId ? Number(network.chainId) : undefined ?? (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],
-                });
+            await providerConfig.connector?.connect(typeof chainParams === 'number' ? chainParams : (0, utils_1.convertNetworkToChainParams)(chainParams));
             if (providerConfig.id !== walletService.providerId) {
                 await prevConnector?.disconnect(true);
             }
@@ -77,7 +67,7 @@ exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)(({ agreemen
         catch (e) {
             setError(e);
         }
-    }, [onConnect, recentMeta?.chainId, setRecentMeta, walletService]);
+    }, [network, onConnect, recentMeta, setRecentMeta, walletService]);
     const reset = React.useCallback(() => {
         setError(null);
         setConnectingProvider(null);

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

@@ -7,5 +7,5 @@ type EvmWalletProviderProps = React.PropsWithChildren<{
     params?: EvmWalletServiceCtorParams;
     wallet?: EvmWalletService;
 }>;
-export declare const EvmWalletServiceProvider: React.MemoExoticComponent<({ agreementsNote, children, params, wallet, }: EvmWalletProviderProps) => React.JSX.Element>;
+export declare function EvmWalletServiceProvider({ agreementsNote, children, params, wallet, }: EvmWalletProviderProps): React.JSX.Element;
 export {};

package/dist/cjs/context/EvmWalletServiceContext.js

@@ -35,7 +35,7 @@ function useEvmWalletService() {
     return (0, react_uikit_1.useContext)(exports.EvmWalletServiceContext);
 }
 exports.useEvmWalletService = useEvmWalletService;
-exports.EvmWalletServiceProvider = React.memo(({ agreementsNote, children, params, wallet, }) => {
+function EvmWalletServiceProvider({ agreementsNote, children, params, wallet, }) {
     const [, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
     const context = React.useMemo(() => {
         if (wallet instanceof services_1.EvmWalletService) {
@@ -51,7 +51,8 @@ exports.EvmWalletServiceProvider = React.memo(({ agreementsNote, children, param
     }, { delay: 10, fireImmediately: context.isReady }), [context, setRecentMeta]);
     return (React.createElement(exports.EvmWalletServiceContext.Provider, { value: context },
         React.createElement(EvmWalletProvidersContext_1.EvmWalletProvidersProvider, { agreementsNote: agreementsNote }, children)));
-});
+}
+exports.EvmWalletServiceProvider = EvmWalletServiceProvider;
 if (process.env.NODE_ENV !== 'production') {
     exports.EvmWalletServiceContext.displayName = 'EvmWalletServiceContext';
 }

package/dist/cjs/core/EthereumConnector.js

@@ -32,18 +32,19 @@ class EthereumConnector extends js_core_1.AbstractStore {
         if (!this.provider) {
             throw new Error('Provider is not defined');
         }
+        const chainId = `0x${chainParams.chainId.toString(16)}`;
         await this.provider.request({
             method: 'wallet_addEthereumChain',
-            params: [{ ...chainParams }],
+            params: [{ ...chainParams, chainId }],
         });
     }
     async switchNetwork(chainIdOrParams) {
         if (!this.provider) {
             throw new Error('Provider is not defined');
         }
+        const chainId = typeof chainIdOrParams === 'number' ? chainIdOrParams : chainIdOrParams?.chainId;
+        const desiredChainId = `0x${chainId.toString(16)}`;
         try {
-            const chainId = typeof chainIdOrParams === 'number' ? chainIdOrParams : chainIdOrParams?.chainId;
-            const desiredChainId = `0x${chainId.toString(16)}`;
             await this.provider.request({
                 method: 'wallet_switchEthereumChain',
                 params: [{ chainId: desiredChainId }],
@@ -55,7 +56,7 @@ class EthereumConnector extends js_core_1.AbstractStore {
             // 4902 indicates that the chain has not been added to MetaMask and wallet_addEthereumChain needs to be called
             // https://docs.metamask.io/guide/rpc-api.html#wallet-switchethereumchain
             if (errorCode === 4902 && typeof chainIdOrParams !== 'number') {
-                await this.addNetwork(chainIdOrParams);
+                await this.addNetwork({ ...chainIdOrParams });
             }
             else {
                 throw e;
@@ -66,8 +67,7 @@ class EthereumConnector extends js_core_1.AbstractStore {
         if (!this.provider) {
             throw new Error('Provider is not defined');
         }
-        return this.provider
-            .request({
+        return this.provider.request({
             method: 'wallet_watchAsset',
             params: {
                 options: {
@@ -78,8 +78,7 @@ class EthereumConnector extends js_core_1.AbstractStore {
                 },
                 type: 'ERC20', // Initially only supports ERC20, but eventually more!
             },
-        })
-            .then(result => {
+        }).then(result => {
             if (!result) {
                 throw new Error('Watch asset request was rejected');
             }

package/dist/cjs/services/EvmWalletService.d.ts

@@ -35,7 +35,7 @@ export declare class EvmWalletService extends AbstractStore<EvmWalletServiceData
      * Manually connect to the wallet
      * @returns {Promise<void>}
      */
-    connect(): Promise<void>;
+    connect(chainIdOrParams?: number | AddEthereumChainParams): Promise<void>;
     /**
      * Manually disconnect from the wallet
      * @returns {Promise<void>}

package/dist/cjs/services/EvmWalletService.js

@@ -17,6 +17,7 @@ const js_core_1 = require("@broxus/js-core");
 const js_utils_1 = require("@broxus/js-utils");
 const mobx_1 = require("mobx");
 const web3_1 = __importDefault(require("web3"));
+const utils_1 = require("../utils");
 class EvmWalletService extends js_core_1.AbstractStore {
     params;
     constructor(params) {
@@ -45,13 +46,20 @@ class EvmWalletService extends js_core_1.AbstractStore {
      * Manually connect to the wallet
      * @returns {Promise<void>}
      */
-    async connect() {
+    async connect(chainIdOrParams) {
         if (this.isConnecting || this.isDisconnecting) {
             return;
         }
         try {
-            const defaultNetworkId = this.params?.defaultNetworkId ?? this.network?.chainId ?? 1;
-            const chainParams = this.networks.find(network => network.chainId === defaultNetworkId?.toString());
+            const defaultNetworkId = typeof chainIdOrParams === 'number' ? chainIdOrParams : chainIdOrParams?.chainId
+                ?? this.params?.defaultNetworkId
+                ?? this.network?.chainId
+                ?? 1;
+            const network = this.networks.find(_network => _network.chainId === defaultNetworkId?.toString());
+            // eslint-disable-next-line no-nested-ternary
+            const chainParams = typeof chainIdOrParams === 'object'
+                ? chainIdOrParams
+                : network ? (0, utils_1.convertNetworkToChainParams)(network) : undefined;
             await this.connector?.connect(chainParams ?? 1);
         }
         catch (e) {
@@ -312,7 +320,7 @@ __decorate([
 __decorate([
     mobx_1.action.bound,
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], EvmWalletService.prototype, "connect", null);
 __decorate([