@broxus/evm-connect 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present Broxus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,182 @@
+# EVM Connect
+
+Create a connection to Web3 wallets and dApps
+
+## Usage
+
+### Installation
+
+To apply this component, install it with **npm** using following command:
+
+```shell
+npm install @broxus/evm-connect
+```
+
+or using **yarn**:
+
+```shell
+yarn add @broxus/evm-connect
+```
+
+### EvmWalletService
+
+The Wallet Service is a key part of this module. It accepts a number of settings and
+parameters when created and has a convenient interface for working with a connected wallet.
+It works with wallets whose providers and standalone RPC connections are
+based on `web3.js` as the wrapper.
+
+#### Get all EIP6963 connections
+
+```typescript
+import {
+    EIP6963Connector,
+    EvmWalletService,
+    MetaMask,
+    useEIP6963Connections,
+    useFilteredConnections,
+    useRecentConnectionMeta,
+    WalletConnect,
+} from '@broxus/evm-connect'
+
+const [recentMeta] = useRecentConnectionMeta()
+const supportedEIP6963Providers = ['MetaMask', 'RabbyWallet', 'TrustWallet']
+const eip6963Connections = useEIP6963Connections()
+const eip6963FilteredConnections = useFilteredConnections(
+    eip6963Connections.map(connection => ({
+        connector: new EIP6963Connector({
+            info: connection.info,
+            provider: connection.provider,
+        }),
+        id: classify(connection.info.name),
+        info: {
+            icon: connection.info.icon,
+            name: connection.info.name,
+            rdns: connection.info.rdns,
+        },
+    })),
+    supportedEIP6963Providers,
+)
+```
+
+#### Create a MetaMask connection
+
+```typescript
+const hasMetamask = eip6963FilteredConnections.find(
+    connection => connection.info.name === 'MetaMask' && connection.info.rdns === 'io.metamask',
+)
+
+const metaMaskConnection = !hasMetamask ? {
+    connector: new MetaMask({
+        options: { mustBeMetaMask: true },
+    }),
+    id: 'MetaMask',
+    info: {
+        icon: '',
+        links: {
+            android: 'https://play.google.com/store/apps/details?id=io.metamask',
+            chromeExtension: 'https://chromewebstore.google.com/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
+            firefoxExtension: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/',
+            homepage: 'https://metamask.io/download/',
+            ios: 'https://apps.apple.com/us/app/metamask-blockchain-wallet/id1438144202',
+        },
+        name: 'MetaMask',
+        rdns: 'io.metamask',
+    },
+} : undefined
+```
+
+#### Create a WalletConnect V2 connection
+
+```typescript
+const evmNetworks = [
+    {
+        chainId: '1',
+        currency: {
+            decimals: 18,
+            icon: 'https://etherscan.io/images/svg/brands/ethereum-original.svg',
+            name: 'Native currency',
+            symbol: 'ETH',
+            wrappedCurrencyAddress: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
+        },
+        explorer: {
+            accountsSubPath: 'address',
+            baseUrl: 'https://etherscan.io',
+            title: 'Etherscan',
+            transactionsSubPath: 'tx',
+        },
+        icon: '/assets/icons/ETH.svg',
+        id: 'evm-1',
+        name: 'Ethereum Mainnet',
+        rpcUrl: 'https://mainnet.infura.io/v3/{infuraApiKey}',
+        shortName: 'Ethereum',
+        transactionType: '0x2',
+        type: 'evm',
+    },
+    {
+        chainId: '56',
+        currency: {
+            decimals: 18,
+            icon: 'https://bscscan.com/images/svg/brands/bnb-1.svg?v=1.3',
+            name: 'Native currency',
+            symbol: 'BNB',
+            wrappedCurrencyAddress: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c',
+        },
+        explorer: {
+            accountsSubPath: 'address',
+            baseUrl: 'https://bscscan.com',
+            title: 'BscScan',
+            transactionsSubPath: 'tx',
+        },
+        icon: '/assets/icons/BSC.svg',
+        id: 'evm-56',
+        name: 'Binance Smart Chain',
+        rpcUrl: 'https://bsc-dataseed.binance.org/',
+        shortName: 'BSC',
+        transactionType: '0x0',
+        type: 'evm',
+    },
+]
+
+const walletConnectConnection = {
+    connector: new WalletConnect({
+        options: {
+            chains: [1],
+            optionalChains: [56],
+            projectId: '***',
+            qrModalOptions: {
+                themeVariables: {
+                    '--wcm-z-index': 'calc(var(--modal-z-index) + 20)',
+                },
+            },
+            rpcMap: evmNetworks.reduce<Record<number, string>>((acc, value) => {
+                acc[Number(value.chainId)] = value.rpcUrl
+                return acc
+            }, {}),
+            showQrModal: true,
+        },
+    }),
+    id: 'WalletConnect',
+    info: {
+        description: 'Scan with WalletConnect to connect',
+        icon: '',
+        name: 'Wallet Connect',
+    },
+}
+```
+
+#### Combine all in `EvmWalletService` params
+
+```typescript
+const walletService = new EvmWalletService({
+    defaultNetworkId: recentMeta.chainId,
+    networks: evmNetworks,
+    providerId: recentMeta.providerId ?? 'MetaMask', // TvmWalletProviderConfig['id']
+    providers: !hasMetamask && metaMaskConnection
+        ? [...eip6963FilteredConnections, metaMaskConnection, walletConnectConnection]
+        : [...eip6963FilteredConnections, walletConnectConnection],
+})
+
+await walletService.connect()
+```
+
+> This is library/framework agnostic component. So, you can use it anywhere.

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

@@ -0,0 +1,21 @@
+import { type ButtonProps } from '@broxus/react-uikit';
+import * as React from 'react';
+import { type EvmConnectDialogProps } from '../../components/EvmConnectDialog';
+import { type EvmWalletService } from '../../services';
+export type EvmConnectButtonProps = React.PropsWithChildren<{
+    agreementsNote?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    popupClassName?: EvmConnectDialogProps['className'];
+    popupType?: EvmConnectDialogProps['type'];
+    shape?: ButtonProps['shape'];
+    size?: ButtonProps['size'];
+    standalone?: boolean;
+    type?: ButtonProps['type'];
+    onClose?: VoidFunction;
+    onConnect?: (walletService?: EvmWalletService) => Promise<void> | void;
+    onOpen?: VoidFunction;
+}>;
+export declare const EvmConnectButton: ((props: EvmConnectButtonProps) => React.JSX.Element) & {
+    displayName: string;
+};

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

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EvmConnectButton = void 0;
+const react_uikit_1 = require("@broxus/react-uikit");
+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 walletService = (0, context_1.useEvmWalletService)();
+    const { agreementsNote, 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]);
+    const close = React.useCallback(() => {
+        setModalVisibility(false);
+        onClose?.();
+    }, [onClose]);
+    const open = React.useCallback(() => {
+        setModalVisibility(true);
+        onOpen?.();
+    }, [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 },
+            React.createElement(EvmConnectDialog_1.EvmConnectDialog, { className: popupClassName, open: isModalShown, type: popupType, onClose: close })))));
+});

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

@@ -0,0 +1,130 @@
+/* Modal */
+.evm-connect-modal > *:not([class]) {
+    width: 100%;
+}
+
+.evm-connect-modal .uk-modal-content {
+    background: var(--evm-connect-modal-content-background);
+    border-radius: var(--evm-connect-modal-content-border-radius);
+    box-shadow: var(--evm-connect-modal-content-box-shadow);
+    color: var(--evm-connect-modal-content-color);
+    padding: var(--evm-connect-modal-content-padding-vertical) var(--evm-connect-modal-content-padding-horizontal);
+}
+
+.evm-connect-modal .uk-modal-header {
+    background: none;
+    padding: 0 var(--evm-connect-modal-header-padding-horizontal) var(--evm-connect-modal-header-padding-vertical);
+}
+
+.evm-connect-modal .uk-modal-title {
+    color: var(--evm-connect-modal-title-color);
+    font-size: var(--evm-connect-modal-font-size);
+    font-weight: var(--evm-connect-modal-font-weight);
+    line-height: var(--evm-connect-modal-line-height);
+    text-align: center;
+}
+
+.evm-connect-modal .uk-modal-body {
+    padding: var(--evm-connect-modal-body-padding-vertical) var(--evm-connect-modal-body-padding-horizontal);
+}
+
+.evm-connect-modal .uk-modal-body:last-child {
+    padding-bottom: 0;
+}
+
+.evm-connect-modal .uk-modal-footer {
+    background: none;
+    padding: var(--evm-connect-modal-footer-padding-vertical) var(--evm-connect-modal-footer-padding-horizontal) 0;
+}
+
+/* Drawer */
+.evm-connect-drawer .uk-drawer-content-wrapper {
+    --drawer-height: auto;
+}
+
+.evm-connect-drawer .uk-drawer-content {
+    background: var(--evm-connect-drawer-content-background);
+    border-radius: var(--evm-connect-drawer-content-border-radius) var(--evm-connect-drawer-content-border-radius) 0 0;
+    box-shadow: none;
+    color: var(--evm-connect-drawer-content-color);
+    padding: var(--evm-connect-drawer-content-padding-vertical) var(--evm-connect-drawer-content-padding-horizontal);
+}
+
+.evm-connect-drawer .uk-drawer-header {
+    padding: 0 var(--evm-connect-drawer-header-padding-horizontal) var(--evm-connect-drawer-header-padding-vertical);
+}
+
+.evm-connect-drawer .uk-drawer-title {
+    color: var(--evm-connect-drawer-title-color);
+    font-size: var(--evm-connect-drawer-font-size);
+    font-weight: var(--evm-connect-drawer-font-weight);
+    line-height: var(--evm-connect-drawer-line-height);
+    text-align: center;
+}
+
+.evm-connect-drawer .uk-drawer-body {
+    padding: var(--evm-connect-drawer-body-padding-vertical) var(--evm-connect-drawer-body-padding-horizontal);
+}
+
+.evm-connect-drawer .uk-drawer-body:last-child {
+    padding-bottom: 0;
+}
+
+.evm-connect-drawer .uk-modal-close-default,
+.evm-connect-drawer .uk-drawer-close {
+    color: var(--close-color, #a5a9b4);
+}
+
+.evm-connect-drawer .uk-drawer-close {
+    --drawer-close-position: var(--modal-close-position, 24px);
+}
+
+.evm-connect-modal .uk-modal-close-default:hover,
+.evm-connect-modal .uk-modal-close-default:focus,
+.evm-connect-drawer .uk-drawer-close:hover,
+.evm-connect-drawer .uk-drawer-close:focus {
+    color: var(--close-hover-color, #383838);
+}
+
+/* WalletConnect Modal */
+.wcm-overlay {
+    --wcm-z-index: calc(var(--modal-z-index) + 20);
+}
+
+:root {
+    /* Modal */
+    --evm-connect-modal-content-background: var(--modal-content-background, #fff);
+    --evm-connect-modal-content-border-radius: 12px;
+    --evm-connect-modal-content-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
+    --evm-connect-modal-content-color: var(--base-body-color, #383838);
+    --evm-connect-modal-content-padding-horizontal: 18px;
+    --evm-connect-modal-content-padding-vertical: var(--evm-connect-modal-content-padding-horizontal);
+    --evm-connect-modal-header-padding-horizontal: 0;
+    --evm-connect-modal-header-padding-vertical: var(--evm-connect-modal-content-padding-vertical);
+    --evm-connect-modal-title-color: var(--base-heading-color, #383838);
+    --evm-connect-modal-font-size: var(--modal-title-font-size, 24px);
+    --evm-connect-modal-font-weight: 500;
+    --evm-connect-modal-line-height: var(--modal-title-line-height, 28px);
+    --evm-connect-modal-body-padding-horizontal: 0;
+    --evm-connect-modal-body-padding-vertical: var(--evm-connect-modal-content-padding-vertical);
+    --evm-connect-modal-footer-padding-horizontal: 0;
+    --evm-connect-modal-footer-padding-vertical: var(--evm-connect-modal-content-padding-vertical);
+
+    /* Drawer */
+    --evm-connect-drawer-content-background: var(--drawer-content-background, #fff);
+    --evm-connect-drawer-content-border-radius: 16px;
+    --evm-connect-drawer-content-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
+    --evm-connect-drawer-content-color: var(--base-body-color, #383838);
+    --evm-connect-drawer-content-padding-horizontal: 24px;
+    --evm-connect-drawer-content-padding-vertical: var(--evm-connect-drawer-content-padding-horizontal);
+    --evm-connect-drawer-header-padding-horizontal: 0;
+    --evm-connect-drawer-header-padding-vertical: var(--evm-connect-drawer-content-padding-vertical);
+    --evm-connect-drawer-title-color: var(--base-heading-color, #383838);
+    --evm-connect-drawer-font-size: var(--drawer-title-font-size, 24px);
+    --evm-connect-drawer-font-weight: 500;
+    --evm-connect-drawer-line-height: var(--drawer-title-line-height, 28px);
+    --evm-connect-drawer-body-padding-horizontal: 0;
+    --evm-connect-drawer-body-padding-vertical: var(--evm-connect-drawer-content-padding-vertical);
+    --evm-connect-drawer-footer-padding-horizontal: 0;
+    --evm-connect-drawer-footer-padding-vertical: var(--evm-connect-drawer-content-padding-vertical);
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import './index.css';
+export interface EvmConnectDialogProps {
+    className?: string;
+    open?: boolean;
+    type?: 'drawer';
+    onClose?: VoidFunction;
+}
+export declare const EvmConnectDialog: (({ className, open, type, onClose }: EvmConnectDialogProps) => React.JSX.Element) & {
+    displayName: string;
+};

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

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EvmConnectDialog = void 0;
+const react_components_1 = require("@broxus/react-components");
+const react_uikit_1 = require("@broxus/react-uikit");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const React = __importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const components_1 = require("../../components");
+const context_1 = require("../../context");
+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 onClosed = () => {
+        reset();
+    };
+    const close = () => {
+        onClose?.();
+    };
+    if (type === 'drawer') {
+        return (React.createElement(react_uikit_1.Drawer, { className: className, destroyOnClose: true, keyboard: !connectingProvider, maskClosable: !connectingProvider, motion: {
+                motionLeave: true,
+                removeOnLeave: true,
+                // eslint-disable-next-line sort-keys
+                onLeaveEnd: onClosed,
+            }, open: open, placement: "bottom", rootClassName: "evm-connect-drawer", onClose: close },
+            React.createElement(react_components_1.Close, { kind: "drawer", ratio: 0.9, onClick: onClose }),
+            React.createElement(react_uikit_1.Component, { className: "uk-drawer-header" },
+                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))));
+    }
+    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 },
+        React.createElement(components_1.EvmProvidersDispatcher, null)));
+});

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

@@ -0,0 +1,37 @@
+.evm-connect-connector {
+    display: inline-flex;
+    max-width: max-content;
+}
+
+.evm-connect-connector .evm-connect-connector-suffix {
+    position: relative;
+}
+
+.evm-connect-connector .evm-connect-dropdown-trigger {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    height: 100%;
+    padding: var(--evm-connect-dropdown-trigger-vertical-padding) var(--evm-connect-dropdown-trigger-horizontal-padding);
+}
+
+.evm-connect-dropdown {
+    background: var(--evm-connect-dropdown-background);
+    border-radius: var(--evm-connect-dropdown-border-radius);
+    box-shadow: var(--evm-connect-dropdown-box-shadow);
+    color: var(--evm-connect-dropdown-color);
+}
+
+.evm-connect-dropdown .uk-button.uk-button-link {
+    color: var(--evm-connect-dropdown-link-color);
+}
+
+:root {
+    --evm-connect-dropdown-trigger-horizontal-padding: var(--global-small-gutter, 8px);
+    --evm-connect-dropdown-trigger-vertical-padding: 0;
+    --evm-connect-dropdown-background: var(--dropdown-background, #fff);
+    --evm-connect-dropdown-border-radius: var(--dropdown-border-radius, 0);
+    --evm-connect-dropdown-box-shadow: 0 8px 32px 0 rgb(63 74 111 / 12%), 0 1px 4px 0 rgb(63 74 111 / 8%);
+    --evm-connect-dropdown-color: var(--dropdown-color, #333);
+    --evm-connect-dropdown-link-color: var(--dropdown-color, #333);
+}

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

@@ -0,0 +1,20 @@
+import { type ButtonProps } from '@broxus/react-uikit';
+import * as React from 'react';
+import './index.css';
+export interface EvmConnectorProps {
+    changeNetworkButtonText?: React.ReactNode;
+    changeWalletButtonText?: React.ReactNode;
+    className?: string;
+    connectButtonShape?: ButtonProps['shape'];
+    connectButtonText?: React.ReactNode;
+    connectButtonType?: ButtonProps['type'];
+    disconnectButtonText?: React.ReactNode;
+    popupType?: 'drawer';
+    suffix?: React.ReactNode;
+    showDropMenu?: boolean;
+    showSubIcon?: boolean;
+    standalone?: boolean;
+}
+export declare const EvmConnector: ((props: EvmConnectorProps) => React.JSX.Element) & {
+    displayName: string;
+};

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

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EvmConnector = void 0;
+const js_utils_1 = require("@broxus/js-utils");
+const react_components_1 = require("@broxus/react-components");
+const react_uikit_1 = require("@broxus/react-uikit");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const React = __importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const EvmConnectButton_1 = require("../../components/EvmConnectButton");
+const context_1 = require("../../context");
+const hooks_1 = require("../../hooks");
+const intl_1 = __importDefault(require("../../intl"));
+require("./index.css");
+exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
+    const intl = (0, react_intl_1.useIntl)();
+    const walletService = (0, context_1.useEvmWalletService)();
+    const [, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
+    const drop = React.useRef(null);
+    const { changeNetworkButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CHANGE_NETWORK_BTN_TEXT), 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 changeNetwork = async () => {
+        drop.current?.close();
+    };
+    const changeWallet = () => {
+        drop.current?.close();
+    };
+    const disconnect = React.useCallback(async () => {
+        if (walletService.hasProvider) {
+            drop.current?.close();
+            await walletService.disconnect();
+            const recentMeta = (0, hooks_1.getRecentConnectionMeta)();
+            if (recentMeta) {
+                setRecentMeta({ ...recentMeta, disconnected: true });
+            }
+        }
+    }, [setRecentMeta, walletService]);
+    let subTitle = intl.formatMessage(intl_1.default.EVM_CONNECT_NOT_CONNECTED_HINT);
+    if (walletService.isUnsupportedNetwork && walletService.isConnected) {
+        subTitle = (React.createElement(react_uikit_1.Text, { color: "danger" }, intl.formatMessage(intl_1.default.EVM_CONNECT_UNSUPPORTED_NETWORK_WARNING)));
+    }
+    else if (walletService.isSyncing) {
+        subTitle = React.createElement(react_components_1.Skeleton, { width: 80 });
+    }
+    else if (walletService.isReady) {
+        subTitle = `${(0, js_utils_1.formattedTokenAmount)(walletService.balance, walletService.currency.decimals)} ${walletService.currency.symbol}`;
+    }
+    let networkIcon = React.createElement(react_components_1.Icon, { icon: "evm1BlockchainIcon", ratio: 1.6 }), providerIcon;
+    if (walletService.network?.icon) {
+        networkIcon = React.createElement(react_components_1.TokenIcon, { iconUrl: walletService.network.icon, size: 32 });
+    }
+    if (walletService.providerInfo?.icon) {
+        providerIcon = React.createElement(react_components_1.TokenIcon, { iconUrl: walletService.providerInfo.icon, size: 16 });
+    }
+    return (React.createElement(react_uikit_1.Flex, { alignItems: "stretch", className: (0, classnames_1.default)('evm-connect-connector', className, walletService.providerId), component: react_uikit_1.Grid },
+        React.createElement("div", null,
+            React.createElement(react_components_1.WalletAccount, { address: walletService.address?.toString(), icon: networkIcon, subIcon: walletService.isConnected && showSubIcon ? providerIcon : undefined, subTitle: subTitle, title: !walletService.isConnected ? (intl.formatMessage(intl_1.default.EVM_CONNECT_CONNECTOR_BLOCKCHAIN_NAME)) : (React.createElement(react_components_1.ExplorerAccountLink, { address: walletService.address.toString(), baseUrl: walletService.network?.explorer.baseUrl, copyable: true, subPath: walletService.network?.explorer.accountsSubPath, tooltip: intl.formatMessage(intl_1.default.EVM_CONNECT_CONNECTOR_EXPLORER_HINT, {
+                        explorerTitle: walletService.network?.explorer.title ?? '',
+                    }) })) })),
+        React.createElement(react_uikit_1.Flex, { alignItems: "center", className: "evm-connect-connector-suffix" },
+            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" },
+                    React.createElement(react_uikit_1.List.Item, null,
+                        React.createElement(react_uikit_1.Button, { className: "evm-connect-change-network", disabled: true, type: "link", onClick: changeNetwork }, changeNetworkButtonText)),
+                    !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(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)))));
+});