@broxus/evm-connect 1.0.0 → 1.2.0

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

@@ -31,7 +31,8 @@ const EvmConnectDialog_1 = require("../../components/EvmConnectDialog");
 const context_1 = require("../../context");
 exports.EvmConnectButton = (0, mobx_react_lite_1.observer)((props) => {
     const walletService = (0, context_1.useEvmWalletService)();
-    const { agreementsNote, children, className, disabled, popupClassName, popupType, shape, size, standalone, type = 'primary', onClose, onConnect, onOpen, } = props;
+    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);
@@ -47,6 +48,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: agreementsNote, providers: walletService.providers, onConnected: close },
+        !standalone && (React.createElement(context_1.EvmWalletProvidersProvider, { agreementsNote: walletProviders?.agreementsNote, onConnect: close },
             React.createElement(EvmConnectDialog_1.EvmConnectDialog, { className: popupClassName, open: isModalShown, type: popupType, onClose: close })))));
 });

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

@@ -39,15 +39,15 @@ const intl_1 = __importDefault(require("../../intl"));
 require("./index.css");
 exports.EvmConnectDialog = (0, mobx_react_lite_1.observer)(({ className, open, type, onClose }) => {
     const intl = (0, react_intl_1.useIntl)();
-    const { agreementsNote, connectingProvider, reset } = (0, context_1.useEvmWalletProviders)();
+    const walletProviders = (0, context_1.useEvmWalletProviders)();
     const onClosed = () => {
-        reset();
+        walletProviders.reset();
     };
     const close = () => {
         onClose?.();
     };
     if (type === 'drawer') {
-        return (React.createElement(react_uikit_1.Drawer, { className: className, destroyOnClose: true, keyboard: !connectingProvider, maskClosable: !connectingProvider, motion: {
+        return (React.createElement(react_uikit_1.Drawer, { className: className, destroyOnClose: true, keyboard: !walletProviders.connectingProvider, maskClosable: !walletProviders.connectingProvider, motion: {
                 motionLeave: true,
                 removeOnLeave: true,
                 // eslint-disable-next-line sort-keys
@@ -58,8 +58,8 @@ exports.EvmConnectDialog = (0, mobx_react_lite_1.observer)(({ className, open, t
                 React.createElement(react_uikit_1.Component, { className: "uk-drawer-title" }, intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_TITLE))),
             React.createElement("div", { className: "uk-drawer-body" },
                 React.createElement(components_1.EvmProvidersDispatcher, null)),
-            React.createElement(react_uikit_1.Text, { align: "center", className: "uk-drawer-footer uk-margin-top", component: "footer", kind: "meta" }, agreementsNote || intl.formatMessage(intl_1.default.EVM_CONNECT_AGREEMENTS_NOTE))));
+            React.createElement(react_uikit_1.Text, { align: "center", className: "uk-drawer-footer uk-margin-top", component: "footer", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(intl_1.default.EVM_CONNECT_AGREEMENTS_NOTE))));
     }
-    return (React.createElement(react_uikit_1.Modal, { centered: true, className: (0, classnames_1.default)('evm-connect-modal', className), closeIcon: React.createElement(react_components_1.Close, { kind: "modal", ratio: 0.9, onClick: close }), destroyOnClose: true, footer: (React.createElement(react_uikit_1.Text, { align: "center", component: "div", kind: "meta" }, agreementsNote || intl.formatMessage(intl_1.default.EVM_CONNECT_AGREEMENTS_NOTE))), keyboard: !connectingProvider, maskClosable: !connectingProvider, title: intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_TITLE), visible: open, width: 380, onClose: close, onClosed: onClosed },
+    return (React.createElement(react_uikit_1.Modal, { centered: true, className: (0, classnames_1.default)('evm-connect-modal', className), closeIcon: React.createElement(react_components_1.Close, { kind: "modal", ratio: 0.9, onClick: close }), destroyOnClose: true, footer: (React.createElement(react_uikit_1.Text, { align: "center", component: "div", kind: "meta" }, walletProviders.agreementsNote || intl.formatMessage(intl_1.default.EVM_CONNECT_AGREEMENTS_NOTE))), keyboard: !walletProviders.connectingProvider, maskClosable: !walletProviders.connectingProvider, title: intl.formatMessage(intl_1.default.EVM_CONNECT_DISPATCHER_POPUP_TITLE), visible: open, width: 380, onClose: close, onClosed: onClosed },
         React.createElement(components_1.EvmProvidersDispatcher, null)));
 });

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

@@ -37,29 +37,29 @@ 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 walletProviders = (0, context_1.useEvmWalletProviders)();
     const tryAgain = async () => {
-        if (connectingProvider) {
-            await connect(connectingProvider);
+        if (walletProviders.connectingProvider) {
+            await walletProviders.connect(walletProviders.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_uikit_1.Button, { className: "evm-connect-connection-request-back-button uk-position-top-left", type: "text", onClick: walletProviders.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,
+            walletProviders.connectingProvider?.info.icon && (React.createElement(react_uikit_1.Text, { align: "center", className: (0, classnames_1.default)('uk-margin-top', {
+                    'uk-margin-bottom': walletProviders.connectingProvider?.info.description,
+                    'uk-margin-medium-bottom': !walletProviders.connectingProvider?.info.description,
                 }) },
-                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("img", { src: walletProviders.connectingProvider.info.icon, alt: walletProviders.connectingProvider.info.name, height: 60, width: 60 }))),
+            walletProviders.connectingProvider?.info.description && (React.createElement(react_uikit_1.Text, { align: "center", className: "uk-margin-medium-bottom", component: "div", kind: "meta" }, walletProviders.connectingProvider.info.description)),
+            !walletProviders.error ? (React.createElement(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',
+                    title: walletProviders.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("div", { className: "uk-margin-small-bottom" }, walletProviders.error.message ? (React.createElement(react_uikit_1.Text, { color: "danger" }, walletProviders.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/index.js

@@ -33,8 +33,9 @@ const context_1 = require("../../context");
 const hooks_1 = require("../../hooks");
 require("./index.css");
 exports.EvmProvidersDispatcher = (0, mobx_react_lite_1.observer)(() => {
+    const walletService = (0, context_1.useEvmWalletService)();
     const walletProviders = (0, context_1.useEvmWalletProviders)();
-    const orderedProviders = (0, hooks_1.useOrderedConnections)(walletProviders.providers ?? []);
+    const orderedProviders = (0, hooks_1.useOrderedConnections)(walletService.providers ?? []);
     const dispatcher = React.useRef(null);
     const content = React.useRef(null);
     React.useLayoutEffect(() => {

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

@@ -1,20 +1,19 @@
 import * as React from 'react';
+import { type EthereumConnector } from '../core';
 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;
+    onConnect?: (connector?: EthereumConnector) => Promise<void> | void;
 }>;
-export declare const EvmWalletProvidersProvider: ((props: EvmWalletProvidersProviderProps) => React.JSX.Element) & {
+export declare const EvmWalletProvidersProvider: (({ agreementsNote, children, onConnect }: EvmWalletProvidersProviderProps) => React.JSX.Element) & {
     displayName: string;
 };

package/dist/cjs/context/EvmWalletProvidersContext.js

@@ -35,10 +35,9 @@ function useEvmWalletProviders() {
     return (0, react_uikit_1.useContext)(exports.EvmWalletProvidersContext);
 }
 exports.useEvmWalletProviders = useEvmWalletProviders;
-exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)((props) => {
+exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)(({ agreementsNote, children, onConnect }) => {
     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) => {
@@ -50,20 +49,23 @@ exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)((props) =>
                 ? 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
+                : {
+                    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);
             }
+            await onConnect?.(providerConfig.connector);
             setRecentMeta({
                 chainId: providerConfig.connector.chainId?.toString(),
                 disconnected: false,
@@ -75,7 +77,7 @@ exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)((props) =>
         catch (e) {
             setError(e);
         }
-    }, [recentMeta, setRecentMeta, walletService]);
+    }, [onConnect, recentMeta?.chainId, setRecentMeta, walletService]);
     const reset = React.useCallback(() => {
         setError(null);
         setConnectingProvider(null);
@@ -85,9 +87,8 @@ exports.EvmWalletProvidersProvider = (0, mobx_react_lite_1.observer)((props) =>
         connect,
         connectingProvider,
         error,
-        providers,
         reset,
-    }), [agreementsNote, connect, connectingProvider, error, providers, reset]);
+    }), [agreementsNote, connect, connectingProvider, error, reset]);
     return React.createElement(exports.EvmWalletProvidersContext.Provider, { value: context }, children);
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -3,8 +3,9 @@ import { EvmWalletService, type EvmWalletServiceCtorParams } from '../services';
 export declare const EvmWalletServiceContext: React.Context<EvmWalletService | null>;
 export declare function useEvmWalletService(): EvmWalletService;
 type EvmWalletProviderProps = React.PropsWithChildren<{
+    agreementsNote?: React.ReactNode;
     params?: EvmWalletServiceCtorParams;
     wallet?: EvmWalletService;
 }>;
-export declare const EvmWalletServiceProvider: React.MemoExoticComponent<({ children, params, wallet, }: EvmWalletProviderProps) => React.JSX.Element>;
+export declare const EvmWalletServiceProvider: React.MemoExoticComponent<({ agreementsNote, children, params, wallet, }: EvmWalletProviderProps) => React.JSX.Element>;
 export {};

package/dist/cjs/context/EvmWalletServiceContext.js

@@ -27,6 +27,7 @@ exports.EvmWalletServiceProvider = exports.useEvmWalletService = exports.EvmWall
 const react_uikit_1 = require("@broxus/react-uikit");
 const mobx_1 = require("mobx");
 const React = __importStar(require("react"));
+const EvmWalletProvidersContext_1 = require("../context/EvmWalletProvidersContext");
 const hooks_1 = require("../hooks");
 const services_1 = require("../services");
 exports.EvmWalletServiceContext = React.createContext(null);
@@ -34,7 +35,7 @@ function useEvmWalletService() {
     return (0, react_uikit_1.useContext)(exports.EvmWalletServiceContext);
 }
 exports.useEvmWalletService = useEvmWalletService;
-exports.EvmWalletServiceProvider = React.memo(({ children, params, wallet, }) => {
+exports.EvmWalletServiceProvider = React.memo(({ agreementsNote, children, params, wallet, }) => {
     const [, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
     const context = React.useMemo(() => {
         if (wallet instanceof services_1.EvmWalletService) {
@@ -48,7 +49,8 @@ exports.EvmWalletServiceProvider = React.memo(({ children, params, wallet, }) =>
             setRecentMeta({ ...recentMeta, chainId: chainId.toString() });
         }
     }, { delay: 10, fireImmediately: context.isReady }), [context, setRecentMeta]);
-    return React.createElement(exports.EvmWalletServiceContext.Provider, { value: context }, children);
+    return (React.createElement(exports.EvmWalletServiceContext.Provider, { value: context },
+        React.createElement(EvmWalletProvidersContext_1.EvmWalletProvidersProvider, { agreementsNote: agreementsNote }, children)));
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.EvmWalletServiceContext.displayName = 'EvmWalletServiceContext';

package/dist/cjs/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/main.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./main.scss");

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

@@ -1,9 +1,8 @@
-import { type EvmNetworkConfig } from '@broxus/js-bridge-essentials';
 import { AbstractStore, type NativeCurrency } from '@broxus/js-core';
 import { type IReactionDisposer } from 'mobx';
 import Web3 from 'web3';
 import { type EthereumConnector } from '../core';
-import { type AddEthereumChainParams, type EvmWalletProviderConfig } from '../types';
+import { type AddEthereumChainParams, type EvmNetworkConfig, type EvmWalletProviderConfig, type WatchAssetParameters } from '../types';
 export interface EvmWalletServiceCtorParams {
     defaultNetworkId?: number;
     /**
@@ -43,6 +42,7 @@ export declare class EvmWalletService extends AbstractStore<EvmWalletServiceData
      * @returns {Promise<void>}
      */
     switchNetwork(chainIdOrParams: number | AddEthereumChainParams): Promise<void>;
+    watchAsset(params: WatchAssetParameters): Promise<true | undefined>;
     /**
      * Define current provider connector
      * @returns {EthereumConnector|undefined}

package/dist/cjs/services/EvmWalletService.js

@@ -79,6 +79,9 @@ class EvmWalletService extends js_core_1.AbstractStore {
     async switchNetwork(chainIdOrParams) {
         await this.connector?.switchNetwork(chainIdOrParams);
     }
+    async watchAsset(params) {
+        return this.connector?.watchAsset(params);
+    }
     /**
      * Define current provider connector
      * @returns {EthereumConnector|undefined}
@@ -311,6 +314,12 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], EvmWalletService.prototype, "switchNetwork", null);
+__decorate([
+    mobx_1.action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], EvmWalletService.prototype, "watchAsset", null);
 __decorate([
     mobx_1.computed,
     __metadata("design:type", Object),