@broxus/evm-connect 1.0.0 → 1.2.0

package/dist/cjs/types.d.ts

@@ -1,5 +1,11 @@
+import { type NetworkConfigBase } from '@broxus/js-core';
 import { type EIP1193Provider, type MetaMaskProvider, type Web3APISpec, type Web3BaseProvider, type Web3EthExecutionAPI } from 'web3-types';
 import { type EthereumConnector } from './core';
+type EvmBasedNetwork = 'evm';
+export interface EvmNetworkConfig extends NetworkConfigBase<string> {
+    transactionType?: string | string[];
+    type: EvmBasedNetwork;
+}
 export type SupportedProviders<API extends Web3APISpec = Web3EthExecutionAPI> = EIP1193Provider<API> | Web3BaseProvider<API> | MetaMaskProvider<API>;
 export declare enum ConnectionType {
     INJECTED = "INJECTED",
@@ -45,3 +51,4 @@ export interface EvmWalletProviderConfig {
     };
     isRecent?: boolean;
 }
+export {};

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

@@ -2,10 +2,11 @@ import { Button } from '@broxus/react-uikit';
 import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 import { EvmConnectDialog } from '../../components/EvmConnectDialog';
-import { EvmWalletProvidersProvider, useEvmWalletService } from '../../context';
+import { EvmWalletProvidersContext, EvmWalletProvidersProvider, useEvmWalletService } from '../../context';
 export const EvmConnectButton = observer((props) => {
     const walletService = useEvmWalletService();
-    const { agreementsNote, children, className, disabled, popupClassName, popupType, shape, size, standalone, type = 'primary', onClose, onConnect, onOpen, } = props;
+    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);
@@ -21,6 +22,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: agreementsNote, providers: walletService.providers, onConnected: close },
+        !standalone && (React.createElement(EvmWalletProvidersProvider, { agreementsNote: walletProviders?.agreementsNote, onConnect: close },
             React.createElement(EvmConnectDialog, { className: popupClassName, open: isModalShown, type: popupType, onClose: close })))));
 });

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

@@ -10,15 +10,15 @@ import messages from '../../intl';
 import './index.css';
 export const EvmConnectDialog = observer(({ className, open, type, onClose }) => {
     const intl = useIntl();
-    const { agreementsNote, connectingProvider, reset } = useEvmWalletProviders();
+    const walletProviders = useEvmWalletProviders();
     const onClosed = () => {
-        reset();
+        walletProviders.reset();
     };
     const close = () => {
         onClose?.();
     };
     if (type === 'drawer') {
-        return (React.createElement(Drawer, { className: className, destroyOnClose: true, keyboard: !connectingProvider, maskClosable: !connectingProvider, motion: {
+        return (React.createElement(Drawer, { className: className, destroyOnClose: true, keyboard: !walletProviders.connectingProvider, maskClosable: !walletProviders.connectingProvider, motion: {
                 motionLeave: true,
                 removeOnLeave: true,
                 // eslint-disable-next-line sort-keys
@@ -29,8 +29,8 @@ export const EvmConnectDialog = observer(({ className, open, type, onClose }) =>
                 React.createElement(Component, { className: "uk-drawer-title" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_TITLE))),
             React.createElement("div", { className: "uk-drawer-body" },
                 React.createElement(EvmProvidersDispatcher, null)),
-            React.createElement(Text, { align: "center", className: "uk-drawer-footer uk-margin-top", component: "footer", kind: "meta" }, agreementsNote || intl.formatMessage(messages.EVM_CONNECT_AGREEMENTS_NOTE))));
+            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: close }), destroyOnClose: true, footer: (React.createElement(Text, { align: "center", component: "div", kind: "meta" }, agreementsNote || intl.formatMessage(messages.EVM_CONNECT_AGREEMENTS_NOTE))), keyboard: !connectingProvider, maskClosable: !connectingProvider, title: intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_TITLE), visible: open, width: 380, onClose: close, onClosed: onClosed },
+    return (React.createElement(Modal, { centered: true, className: classNames('evm-connect-modal', className), closeIcon: React.createElement(Close, { kind: "modal", ratio: 0.9, onClick: close }), destroyOnClose: true, footer: (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: close, onClosed: onClosed },
         React.createElement(EvmProvidersDispatcher, null)));
 });

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

@@ -8,28 +8,28 @@ import messages from '../../../intl';
 import './index.css';
 export function ConnectionRequest() {
     const intl = useIntl();
-    const { connect, connectingProvider, error, reset } = useEvmWalletProviders();
+    const walletProviders = 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(Button, { className: "evm-connect-connection-request-back-button uk-position-top-left", type: "text", onClick: reset },
+        React.createElement(Button, { className: "evm-connect-connection-request-back-button uk-position-top-left", type: "text", onClick: walletProviders.reset },
             React.createElement(Icon, { icon: "arrowLeft", ratio: 0.9 })),
         React.createElement(Grid, { childWidth: 1, gap: "collapse" },
-            connectingProvider?.info.icon && (React.createElement(Text, { align: "center", className: classNames('uk-margin-top', {
-                    'uk-margin-bottom': connectingProvider?.info.description,
-                    'uk-margin-medium-bottom': !connectingProvider?.info.description,
+            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,
                 }) },
-                React.createElement("img", { src: connectingProvider.info.icon, alt: connectingProvider.info.name, height: 60, width: 60 }))),
-            connectingProvider?.info.description && (React.createElement(Text, { align: "center", className: "uk-margin-medium-bottom", component: "div", kind: "meta" }, connectingProvider.info.description)),
-            !error ? (React.createElement(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(Text, { align: "center", className: "uk-margin-medium-bottom", component: "div", kind: "meta" }, walletProviders.connectingProvider.info.description)),
+            !walletProviders.error ? (React.createElement(Text, { align: "center" },
                 React.createElement("h4", { className: "evm-connect-connection-request-title" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TITLE, {
-                    title: connectingProvider?.info.name ?? 'wallet',
+                    title: walletProviders.connectingProvider?.info.name ?? 'wallet',
                 })),
                 React.createElement("div", null, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_NOTE)))) : (React.createElement(Text, { align: "center" },
                 React.createElement("h4", { className: "evm-connect-connection-request-title uk-text-danger" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_TITLE)),
-                React.createElement("div", { className: "uk-margin-small-bottom" }, error.message ? (React.createElement(Text, { color: "danger" }, error.message)) : intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_NOTE)),
+                React.createElement("div", { className: "uk-margin-small-bottom" }, walletProviders.error.message ? (React.createElement(Text, { color: "danger" }, walletProviders.error.message)) : intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_FAILED_NOTE)),
                 React.createElement(Button, { className: "evm-connect-connection-request-button", type: "default", onClick: tryAgain }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TRY_AGAIN_BTN_TEXT)))))));
 }

package/dist/esm/components/EvmProvidersDispatcher/index.js

@@ -3,12 +3,13 @@ import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 import { ConnectionRequest } from '../../components/EvmProvidersDispatcher/ConnectionRequest';
 import { ProviderButton } from '../../components/EvmProvidersDispatcher/ProviderButton';
-import { useEvmWalletProviders } from '../../context';
+import { useEvmWalletProviders, useEvmWalletService } from '../../context';
 import { useOrderedConnections } from '../../hooks';
 import './index.css';
 export const EvmProvidersDispatcher = observer(() => {
+    const walletService = useEvmWalletService();
     const walletProviders = useEvmWalletProviders();
-    const orderedProviders = useOrderedConnections(walletProviders.providers ?? []);
+    const orderedProviders = useOrderedConnections(walletService.providers ?? []);
     const dispatcher = React.useRef(null);
     const content = React.useRef(null);
     React.useLayoutEffect(() => {

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

@@ -8,10 +8,9 @@ export const EvmWalletProvidersContext = React.createContext(null);
 export function useEvmWalletProviders() {
     return useContext(EvmWalletProvidersContext);
 }
-export const EvmWalletProvidersProvider = observer((props) => {
+export const EvmWalletProvidersProvider = observer(({ agreementsNote, children, onConnect }) => {
     const walletService = useEvmWalletService();
     const [recentMeta, setRecentMeta] = 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) => {
@@ -23,20 +22,23 @@ export const EvmWalletProvidersProvider = observer((props) => {
                 ? 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
+                : {
+                    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,
@@ -48,7 +50,7 @@ export const EvmWalletProvidersProvider = observer((props) => {
         catch (e) {
             setError(e);
         }
-    }, [recentMeta, setRecentMeta, walletService]);
+    }, [onConnect, recentMeta?.chainId, setRecentMeta, walletService]);
     const reset = React.useCallback(() => {
         setError(null);
         setConnectingProvider(null);
@@ -58,9 +60,8 @@ export const EvmWalletProvidersProvider = observer((props) => {
         connect,
         connectingProvider,
         error,
-        providers,
         reset,
-    }), [agreementsNote, connect, connectingProvider, error, providers, reset]);
+    }), [agreementsNote, connect, connectingProvider, error, reset]);
     return React.createElement(EvmWalletProvidersContext.Provider, { value: context }, children);
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -1,13 +1,14 @@
 import { useContext } from '@broxus/react-uikit';
 import { reaction } from 'mobx';
 import * as React from 'react';
+import { EvmWalletProvidersProvider } from '../context/EvmWalletProvidersContext';
 import { getRecentConnectionMeta, useRecentConnectionMeta } from '../hooks';
 import { EvmWalletService } from '../services';
 export const EvmWalletServiceContext = React.createContext(null);
 export function useEvmWalletService() {
     return useContext(EvmWalletServiceContext);
 }
-export const EvmWalletServiceProvider = React.memo(({ children, params, wallet, }) => {
+export const EvmWalletServiceProvider = React.memo(({ agreementsNote, children, params, wallet, }) => {
     const [, setRecentMeta] = useRecentConnectionMeta();
     const context = React.useMemo(() => {
         if (wallet instanceof EvmWalletService) {
@@ -21,7 +22,8 @@ export const EvmWalletServiceProvider = React.memo(({ children, params, wallet,
             setRecentMeta({ ...recentMeta, chainId: chainId.toString() });
         }
     }, { delay: 10, fireImmediately: context.isReady }), [context, setRecentMeta]);
-    return React.createElement(EvmWalletServiceContext.Provider, { value: context }, children);
+    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/main.d.ts

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

package/dist/esm/main.js

@@ -0,0 +1 @@
+import './main.scss';

package/dist/esm/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/esm/services/EvmWalletService.js

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