@broxus/evm-connect 1.4.0 → 1.4.2

package/dist/cjs/utils/convert-network-to-chain-params.d.ts

@@ -0,0 +1,2 @@
+import { type AddEthereumChainParams, type EvmNetworkConfig } from '../types';
+export declare function convertNetworkToChainParams(network: EvmNetworkConfig): AddEthereumChainParams;

package/dist/cjs/utils/convert-network-to-chain-params.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertNetworkToChainParams = void 0;
+function convertNetworkToChainParams(network) {
+    return {
+        blockExplorerUrls: [network.explorer.baseUrl],
+        chainId: Number(network.chainId),
+        chainName: network.name,
+        iconUrls: network.icon ? [network.icon] : undefined,
+        nativeCurrency: {
+            decimals: 18,
+            name: network.currency.name ?? network.currency.symbol,
+            symbol: network.currency.symbol,
+        },
+        rpcUrls: [network.rpcUrl],
+    };
+}
+exports.convertNetworkToChainParams = convertNetworkToChainParams;

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

@@ -1,2 +1,3 @@
+export * from '../utils/convert-network-to-chain-params';
 export * from '../utils/get-evm-provider-platform-link';
 export * from '../utils/parse-chain-id';

package/dist/cjs/utils/index.js

@@ -14,5 +14,6 @@ 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("../utils/convert-network-to-chain-params"), exports);
 __exportStar(require("../utils/get-evm-provider-platform-link"), exports);
 __exportStar(require("../utils/parse-chain-id"), exports);

package/dist/esm/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/esm/components/EvmConnectButton/index.js

@@ -3,15 +3,18 @@ import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 import { EvmConnectDialog } from '../../components/EvmConnectDialog';
 import { EvmWalletProvidersContext, EvmWalletProvidersProvider, useEvmWalletService } from '../../context';
-export const EvmConnectButton = observer((props) => {
+import { convertNetworkToChainParams } from '../../utils';
+export const EvmConnectButton = observer(({ children, className, disabled, network, popupClassName, popupType, shape, size, standalone, type = 'primary', onClose, onConnect, onOpen, }) => {
     const walletService = useEvmWalletService();
     const walletProviders = React.useContext(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 ? convertNetworkToChainParams(network) : undefined),
+        ]);
+    }, [network, onConnect, walletService]);
     const close = React.useCallback(() => {
         setModalVisibility(false);
         onClose?.();
@@ -22,6 +25,6 @@ export const EvmConnectButton = observer((props) => {
     }, [onOpen]);
     return (React.createElement(React.Fragment, null,
         React.createElement(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(EvmWalletProvidersProvider, { agreementsNote: walletProviders?.agreementsNote, onConnect: close },
+        !standalone && (React.createElement(EvmWalletProvidersProvider, { agreementsNote: walletProviders?.agreementsNote, network: network, onConnect: close },
             React.createElement(EvmConnectDialog, { className: popupClassName, open: isModalShown, type: popupType, onClose: close })))));
 });

package/dist/esm/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/esm/components/EvmConnector/index.js

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

package/dist/esm/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/esm/context/EvmWalletProvidersContext.js

@@ -4,11 +4,12 @@ import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 import { useEvmWalletService } from '../context/EvmWalletServiceContext';
 import { useRecentConnectionMeta } from '../hooks';
+import { convertNetworkToChainParams } from '../utils';
 export const EvmWalletProvidersContext = React.createContext(null);
 export function useEvmWalletProviders() {
     return useContext(EvmWalletProvidersContext);
 }
-export const EvmWalletProvidersProvider = observer(({ agreementsNote, children, onConnect }) => {
+export const EvmWalletProvidersProvider = observer(({ agreementsNote, children, network, onConnect }) => {
     const walletService = useEvmWalletService();
     const [recentMeta, setRecentMeta] = useRecentConnectionMeta();
     const [error, setError] = React.useState(null);
@@ -18,23 +19,12 @@ export const EvmWalletProvidersProvider = observer(({ agreementsNote, children,
             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);
             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 : convertNetworkToChainParams(chainParams));
             if (providerConfig.id !== walletService.providerId) {
                 await prevConnector?.disconnect(true);
             }
@@ -50,7 +40,7 @@ export const EvmWalletProvidersProvider = observer(({ agreementsNote, children,
         catch (e) {
             setError(e);
         }
-    }, [onConnect, recentMeta?.chainId, setRecentMeta, walletService]);
+    }, [network, onConnect, recentMeta, setRecentMeta, walletService]);
     const reset = React.useCallback(() => {
         setError(null);
         setConnectingProvider(null);

package/dist/esm/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/esm/context/EvmWalletServiceContext.js

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

package/dist/esm/core/EthereumConnector.js

@@ -29,18 +29,19 @@ export class EthereumConnector extends 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 }],
@@ -52,7 +53,7 @@ export class EthereumConnector extends 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;
@@ -63,8 +64,7 @@ export class EthereumConnector extends AbstractStore {
         if (!this.provider) {
             throw new Error('Provider is not defined');
         }
-        return this.provider
-            .request({
+        return this.provider.request({
             method: 'wallet_watchAsset',
             params: {
                 options: {
@@ -75,8 +75,7 @@ export class EthereumConnector extends 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/esm/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/esm/services/EvmWalletService.js

@@ -11,6 +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';
 export class EvmWalletService extends AbstractStore {
     params;
     constructor(params) {
@@ -39,13 +40,20 @@ export class EvmWalletService extends 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 ? convertNetworkToChainParams(network) : undefined;
             await this.connector?.connect(chainParams ?? 1);
         }
         catch (e) {
@@ -305,7 +313,7 @@ __decorate([
 __decorate([
     action.bound,
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], EvmWalletService.prototype, "connect", null);
 __decorate([