@broxus/evm-connect 1.0.0

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

@@ -0,0 +1,64 @@
+import { camelToSnake } from '@broxus/js-utils';
+import { TokenIcon } from '@broxus/react-components';
+import { Button, Text } from '@broxus/react-uikit';
+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 { ConnectionType } from '../../../types';
+import { getEvmProviderPlatformLink } from '../../../utils';
+import './index.css';
+export const ProviderButton = observer((props) => {
+    const intl = useIntl();
+    const walletService = useEvmWalletService();
+    const walletProviders = useEvmWalletProviders();
+    const { providerConfig, onSelect: onSelectProvider } = props;
+    const [hasProvider, setHasProvider] = React.useState(() => {
+        if (providerConfig.connector.type === ConnectionType.WALLET_CONNECT_V2) {
+            return true;
+        }
+        return undefined;
+    });
+    const onSelect = async () => {
+        if (hasProvider) {
+            await walletProviders.connect(providerConfig);
+            onSelectProvider?.(providerConfig);
+        }
+    };
+    React.useEffect(() => reaction(() => providerConfig.connector, connector => {
+        if (connector.type !== ConnectionType.WALLET_CONNECT_V2) {
+            setHasProvider(connector.provider != null);
+        }
+    }, { fireImmediately: true }), [providerConfig.connector]);
+    if (hasProvider === undefined) {
+        return (React.createElement(Button, { className: "evm-connect-provider-button", disabled: true }, intl.formatMessage(messages.EVM_CONNECT_INITIALIZING_HINT)));
+    }
+    if (!hasProvider) {
+        const [platform = 'UNKNOWN', uri] = getEvmProviderPlatformLink({ ...providerConfig.info.links }) ?? [];
+        let text;
+        try {
+            text = intl.formatMessage(
+            // @ts-ignore
+            messages[`EVM_CONNECT_INSTALL_${camelToSnake(platform)}_PLATFORM`.toUpperCase()]);
+        }
+        catch { }
+        return (React.createElement(Button, { className: "evm-connect-provider-button", href: uri, rel: "noopener noreferrer", target: "_blank" },
+            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_INSTALL_PROVIDER, {
+                    providerName: providerConfig.info.name ?? '',
+                }),
+                React.createElement(Text, { className: "evm-connect-provider-subtitle", color: "muted", component: "div", size: "xsmall" }, text))));
+    }
+    const isConnected = walletService.isConnected && walletService.providerId === providerConfig.id;
+    const isConnecting = walletService.isConnecting && walletProviders.connectingProvider?.id === providerConfig.id;
+    return (React.createElement(Button, { className: "evm-connect-provider-button", disabled: isConnected || isConnecting, onClick: onSelect },
+        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" },
+            providerConfig.info.name,
+            providerConfig.info.description && (React.createElement(Text, { className: "evm-connect-provider-subtitle", color: "muted", component: "div", size: "xsmall", wrap: "truncate" }, providerConfig.info.description))),
+        isConnected && (React.createElement("span", { className: "evm-connect-provider-connected" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_CONNECTED_HINT))),
+        !isConnected && providerConfig.isRecent && (React.createElement("span", { className: "evm-connect-provider-recent" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_RECENT_HINT)))));
+});

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

@@ -0,0 +1,13 @@
+.evm-connect-providers-dispatcher {
+    backface-visibility: hidden;
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    overflow: hidden;
+    transition: height var(--transition-fast-duration) var(--ease-in);
+    width: inherit;
+}
+
+.evm-connect-providers-list {
+    margin: 0;
+}

package/dist/esm/components/EvmProvidersDispatcher/index.d.ts

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

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

@@ -0,0 +1,23 @@
+import { List } from '@broxus/react-uikit';
+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 { useOrderedConnections } from '../../hooks';
+import './index.css';
+export const EvmProvidersDispatcher = observer(() => {
+    const walletProviders = useEvmWalletProviders();
+    const orderedProviders = useOrderedConnections(walletProviders.providers ?? []);
+    const dispatcher = React.useRef(null);
+    const content = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (dispatcher.current) {
+            const height = content.current?.clientHeight;
+            dispatcher.current.style.height = height ? `${height}px` : '';
+        }
+    });
+    return (React.createElement("div", { ref: dispatcher, className: "evm-connect-providers-dispatcher" },
+        React.createElement("div", { ref: content }, walletProviders.connectingProvider ? (React.createElement(ConnectionRequest, null)) : (React.createElement(List, { className: "evm-connect-providers-list" }, orderedProviders.map(providerConfig => (React.createElement(List.Item, { key: providerConfig.id },
+            React.createElement(ProviderButton, { providerConfig: providerConfig })))))))));
+});

package/dist/esm/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from '../components/EvmConnectButton';
+export * from '../components/EvmConnectDialog';
+export * from '../components/EvmConnector';
+export * from '../components/EvmProvidersDispatcher';

package/dist/esm/components/index.js

@@ -0,0 +1,4 @@
+export * from '../components/EvmConnectButton';
+export * from '../components/EvmConnectDialog';
+export * from '../components/EvmConnector';
+export * from '../components/EvmProvidersDispatcher';

package/dist/esm/constants.d.ts

@@ -0,0 +1 @@
+export declare const EVM_RECENT_CONNECTION = "EVM_RECENT_CONNECTION";

package/dist/esm/constants.js

@@ -0,0 +1 @@
+export const EVM_RECENT_CONNECTION = 'EVM_RECENT_CONNECTION';

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+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;
+}>;
+export declare const EvmWalletProvidersProvider: ((props: EvmWalletProvidersProviderProps) => React.JSX.Element) & {
+    displayName: string;
+};

package/dist/esm/context/EvmWalletProvidersContext.js

@@ -0,0 +1,68 @@
+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 { useRecentConnectionMeta } from '../hooks';
+export const EvmWalletProvidersContext = React.createContext(null);
+export function useEvmWalletProviders() {
+    return useContext(EvmWalletProvidersContext);
+}
+export const EvmWalletProvidersProvider = observer((props) => {
+    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) => {
+        try {
+            setError(null);
+            setConnectingProvider(providerConfig);
+            const prevConnector = walletService.connector;
+            const chainParams = 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],
+            });
+            if (providerConfig.id !== walletService.providerId) {
+                await prevConnector?.disconnect(true);
+            }
+            setRecentMeta({
+                chainId: providerConfig.connector.chainId?.toString(),
+                disconnected: false,
+                providerId: providerConfig.id,
+                type: providerConfig.connector.type,
+            });
+            walletService.setState('providerId', providerConfig.id);
+        }
+        catch (e) {
+            setError(e);
+        }
+    }, [recentMeta, setRecentMeta, walletService]);
+    const reset = React.useCallback(() => {
+        setError(null);
+        setConnectingProvider(null);
+    }, []);
+    const context = React.useMemo(() => ({
+        agreementsNote,
+        connect,
+        connectingProvider,
+        error,
+        providers,
+        reset,
+    }), [agreementsNote, connect, connectingProvider, error, providers, reset]);
+    return React.createElement(EvmWalletProvidersContext.Provider, { value: context }, children);
+});
+if (process.env.NODE_ENV !== 'production') {
+    EvmWalletProvidersContext.displayName = 'EvmWalletProvidersContext';
+}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { EvmWalletService, type EvmWalletServiceCtorParams } from '../services';
+export declare const EvmWalletServiceContext: React.Context<EvmWalletService | null>;
+export declare function useEvmWalletService(): EvmWalletService;
+type EvmWalletProviderProps = React.PropsWithChildren<{
+    params?: EvmWalletServiceCtorParams;
+    wallet?: EvmWalletService;
+}>;
+export declare const EvmWalletServiceProvider: React.MemoExoticComponent<({ children, params, wallet, }: EvmWalletProviderProps) => React.JSX.Element>;
+export {};

package/dist/esm/context/EvmWalletServiceContext.js

@@ -0,0 +1,28 @@
+import { useContext } from '@broxus/react-uikit';
+import { reaction } from 'mobx';
+import * as React from 'react';
+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, }) => {
+    const [, setRecentMeta] = useRecentConnectionMeta();
+    const context = React.useMemo(() => {
+        if (wallet instanceof EvmWalletService) {
+            return wallet;
+        }
+        return new EvmWalletService({ ...params });
+    }, [params, wallet]);
+    React.useEffect(() => reaction(() => context.chainId, chainId => {
+        if (chainId) {
+            const recentMeta = getRecentConnectionMeta();
+            setRecentMeta({ ...recentMeta, chainId: chainId.toString() });
+        }
+    }, { delay: 10, fireImmediately: context.isReady }), [context, setRecentMeta]);
+    return React.createElement(EvmWalletServiceContext.Provider, { value: context }, children);
+});
+if (process.env.NODE_ENV !== 'production') {
+    EvmWalletServiceContext.displayName = 'EvmWalletServiceContext';
+}

package/dist/esm/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../context/EvmWalletProvidersContext';
+export * from '../context/EvmWalletServiceContext';

package/dist/esm/context/index.js

@@ -0,0 +1,2 @@
+export * from '../context/EvmWalletProvidersContext';
+export * from '../context/EvmWalletServiceContext';

package/dist/esm/core/EIP6963Connector.d.ts

@@ -0,0 +1,17 @@
+import { type EIP6963ProviderInfo } from 'web3/lib/commonjs/web3_eip6963';
+import { type EthExecutionAPI, type ProviderConnectInfo } from 'web3-types';
+import { EthereumConnector, type EthereumConnectorCtorParams } from '../core';
+import { type AddEthereumChainParams, ConnectionType, type SupportedProviders } from '../types';
+export interface EIP6963ConnectorCtorParams extends EthereumConnectorCtorParams {
+    info: EIP6963ProviderInfo;
+    provider: Readonly<SupportedProviders<EthExecutionAPI>>;
+}
+export declare class EIP6963Connector extends EthereumConnector {
+    protected readonly params: Readonly<EIP6963ConnectorCtorParams>;
+    readonly type = ConnectionType.EIP_6963_INJECTED;
+    constructor(params: Readonly<EIP6963ConnectorCtorParams>);
+    connect(chainIdOrParams?: number | AddEthereumChainParams): Promise<void>;
+    disconnect(): Promise<void>;
+    protected init(): Promise<void>;
+    protected handleConnect({ chainId }: ProviderConnectInfo): void;
+}

package/dist/esm/core/EIP6963Connector.js

@@ -0,0 +1,123 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { debug, error, throwException } from '@broxus/js-utils';
+import { action, makeObservable } from 'mobx';
+import { EthereumConnector } from '../core';
+import { ConnectionType } from '../types';
+import { parseChainId } from '../utils';
+export class EIP6963Connector extends EthereumConnector {
+    params;
+    type = ConnectionType.EIP_6963_INJECTED;
+    constructor(params) {
+        super(params);
+        this.params = params;
+        this.provider = params.provider;
+        makeObservable(this);
+        this.provider.on('accountsChanged', this.handleAccountsChanged);
+        this.provider.on('chainChanged', this.handleChainChanged);
+        this.provider.on('connect', this.handleConnect);
+        this.provider.on('disconnect', this.handleDisconnect);
+        this.init().catch(error);
+    }
+    async connect(chainIdOrParams) {
+        if (!this.provider) {
+            throw new Error('Provider is not defined');
+        }
+        try {
+            this.setState('isConnecting', true);
+            const accounts = (await this.provider.request({ method: 'eth_requestAccounts' }));
+            const chainId = (await this.provider.request({ method: 'eth_chainId' }));
+            debug(`Connect to ${this.params.info.name} connection`, accounts, chainId);
+            const receivedChainId = parseChainId(chainId);
+            const desiredChainId = typeof chainIdOrParams === 'number' ? chainIdOrParams : chainIdOrParams?.chainId;
+            if (!desiredChainId || receivedChainId === desiredChainId) {
+                this.setData({ accounts, chainId: receivedChainId });
+                this.setState({ isConnecting: false, isInitialized: true });
+                debug(`${this.params.info.name} connection has skipped network switching.`);
+                return;
+            }
+            if (!chainIdOrParams) {
+                debug(`${this.params.info.name} connection has skipped network switching. Chain params or chainId is not provided.`);
+                return;
+            }
+            debug(`${this.params.info.name} connection trying to switch network.`);
+            await this.switchNetwork(chainIdOrParams).then(async () => {
+                await this.connect(desiredChainId);
+            });
+        }
+        catch (e) {
+            this.setState('isConnecting', false);
+            throw e;
+        }
+    }
+    async disconnect() {
+        if (!this.provider) {
+            this.setState('isDisconnecting', false);
+            return;
+        }
+        try {
+            debug(`Disconnect from ${this.params.info.name} connection`);
+            this.setState('isDisconnecting', true);
+            this.setData({ accounts: undefined, chainId: undefined });
+            this.setState('isDisconnecting', false);
+        }
+        catch (e) {
+            this.setState('isDisconnecting', false);
+            throw e;
+        }
+    }
+    async init() {
+        this.setState('isInitializing', true);
+        if (!this.provider) {
+            this.setState({ isInitialized: false, isInitializing: false });
+            return;
+        }
+        try {
+            const accounts = (await this.provider.request({ method: 'eth_accounts' }));
+            if (!accounts.length) {
+                throwException('No accounts returned');
+            }
+            const chainId = (await this.provider.request({ method: 'eth_chainId' }));
+            this.setData({ accounts, chainId: parseChainId(chainId) });
+            this.setState({ isInitialized: true, isInitializing: false });
+        }
+        catch (e) {
+            debug(`${this.params.info.name} could not be pre-connected`, e);
+            this.setState({ isInitialized: false, isInitializing: false });
+        }
+    }
+    handleConnect({ chainId }) {
+        this.setData({ chainId: parseChainId(chainId) });
+    }
+}
+__decorate([
+    action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], EIP6963Connector.prototype, "connect", null);
+__decorate([
+    action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], EIP6963Connector.prototype, "disconnect", null);
+__decorate([
+    action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], EIP6963Connector.prototype, "init", null);
+__decorate([
+    action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], EIP6963Connector.prototype, "handleConnect", null);

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

@@ -0,0 +1,43 @@
+import { AbstractStore } from '@broxus/js-core';
+import { type EthExecutionAPI, type ProviderRpcError } from 'web3-types';
+import { type AddEthereumChainParams, type ConnectionType, type SupportedProviders, type WatchAssetParameters } from '../types';
+export interface EthereumConnectorCtorParams {
+    onDisconnect?: (err: ProviderRpcError) => Promise<void> | void;
+}
+export interface EthereumConnectorData {
+    accounts?: string[];
+    chainId?: number;
+}
+export interface EthereumConnectorState {
+    isConnecting?: boolean;
+    isDisconnecting?: boolean;
+    isInitialized?: boolean;
+    isInitializing?: boolean;
+}
+export declare abstract class EthereumConnector extends AbstractStore<EthereumConnectorData, EthereumConnectorState> {
+    protected readonly params?: Readonly<EthereumConnectorCtorParams> | undefined;
+    readonly type?: ConnectionType;
+    /**
+     * An
+     * EIP-1193 ({@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1193.md}) and
+     * EIP-1102 ({@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md}) compliant provider.
+     * May also comply with EIP-3085 ({@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-3085.md}).
+     * This property must be defined while the connector is active.
+     */
+    provider?: SupportedProviders<EthExecutionAPI>;
+    protected constructor(params?: Readonly<EthereumConnectorCtorParams> | undefined);
+    abstract connect(...args: unknown[]): Promise<void>;
+    abstract disconnect(...args: unknown[]): Promise<void>;
+    addNetwork(chainParams: AddEthereumChainParams): Promise<void>;
+    switchNetwork(chainIdOrParams: number | AddEthereumChainParams): Promise<void>;
+    watchAsset(params: WatchAssetParameters): Promise<true>;
+    get accounts(): EthereumConnectorData['accounts'];
+    get chainId(): EthereumConnectorData['chainId'];
+    get isConnecting(): EthereumConnectorState['isConnecting'];
+    get isDisconnecting(): EthereumConnectorState['isDisconnecting'];
+    get isInitialized(): EthereumConnectorState['isInitialized'];
+    get isInitializing(): EthereumConnectorState['isInitializing'];
+    protected handleAccountsChanged(accounts: string[]): void;
+    protected handleChainChanged(chainId: string): void;
+    protected handleDisconnect(err: ProviderRpcError): void;
+}

package/dist/esm/core/EthereumConnector.js

@@ -0,0 +1,186 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { AbstractStore } from '@broxus/js-core';
+import { debug } from '@broxus/js-utils';
+import { action, computed, observable } from 'mobx';
+export class EthereumConnector extends AbstractStore {
+    params;
+    type;
+    /**
+     * An
+     * EIP-1193 ({@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1193.md}) and
+     * EIP-1102 ({@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md}) compliant provider.
+     * May also comply with EIP-3085 ({@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-3085.md}).
+     * This property must be defined while the connector is active.
+     */
+    provider;
+    constructor(params) {
+        super();
+        this.params = params;
+    }
+    async addNetwork(chainParams) {
+        if (!this.provider) {
+            throw new Error('Provider is not defined');
+        }
+        await this.provider.request({
+            method: 'wallet_addEthereumChain',
+            params: [{ ...chainParams }],
+        });
+    }
+    async switchNetwork(chainIdOrParams) {
+        if (!this.provider) {
+            throw new Error('Provider is not defined');
+        }
+        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 }],
+            });
+        }
+        catch (e) {
+            // https://github.com/MetaMask/metamask-mobile/issues/3312#issuecomment-1065923294
+            const errorCode = e.data?.originalError?.code || e.code;
+            // 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);
+            }
+            else {
+                throw e;
+            }
+        }
+    }
+    async watchAsset(params) {
+        if (!this.provider) {
+            throw new Error('Provider is not defined');
+        }
+        return this.provider
+            .request({
+            method: 'wallet_watchAsset',
+            params: {
+                options: {
+                    address: params.address, // The address that the token is at.
+                    decimals: params.decimals, // The number of decimals in the token
+                    image: params.image, // A string url of the token logo
+                    symbol: params.symbol, // A ticker symbol or shorthand, up to 5 chars.
+                },
+                type: 'ERC20', // Initially only supports ERC20, but eventually more!
+            },
+        })
+            .then(result => {
+            if (!result) {
+                throw new Error('Watch asset request was rejected');
+            }
+            return true;
+        });
+    }
+    get accounts() {
+        return this._data.accounts;
+    }
+    get chainId() {
+        return this._data.chainId;
+    }
+    get isConnecting() {
+        return this._state.isConnecting;
+    }
+    get isDisconnecting() {
+        return this._state.isDisconnecting;
+    }
+    get isInitialized() {
+        return this._state.isInitialized;
+    }
+    get isInitializing() {
+        return this._state.isInitializing;
+    }
+    handleAccountsChanged(accounts) {
+        debug(`Accounts have been changed to ${accounts}`);
+        this.setData({ accounts });
+    }
+    handleChainChanged(chainId) {
+        debug(`Chain has been changed to ${chainId}`);
+        this.setData({ chainId: Number.parseInt(chainId, 16) });
+    }
+    handleDisconnect(err) {
+        this.setData(() => ({}));
+        this.params?.onDisconnect?.(err);
+    }
+}
+__decorate([
+    observable,
+    __metadata("design:type", Object)
+], EthereumConnector.prototype, "provider", void 0);
+__decorate([
+    action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], EthereumConnector.prototype, "addNetwork", null);
+__decorate([
+    action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], EthereumConnector.prototype, "switchNetwork", null);
+__decorate([
+    action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], EthereumConnector.prototype, "watchAsset", null);
+__decorate([
+    computed,
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], EthereumConnector.prototype, "accounts", null);
+__decorate([
+    computed,
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], EthereumConnector.prototype, "chainId", null);
+__decorate([
+    computed,
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], EthereumConnector.prototype, "isConnecting", null);
+__decorate([
+    computed,
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], EthereumConnector.prototype, "isDisconnecting", null);
+__decorate([
+    computed,
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], EthereumConnector.prototype, "isInitialized", null);
+__decorate([
+    computed,
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], EthereumConnector.prototype, "isInitializing", null);
+__decorate([
+    action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Array]),
+    __metadata("design:returntype", void 0)
+], EthereumConnector.prototype, "handleAccountsChanged", null);
+__decorate([
+    action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", void 0)
+], EthereumConnector.prototype, "handleChainChanged", null);
+__decorate([
+    action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], EthereumConnector.prototype, "handleDisconnect", null);