@broxus/evm-connect 1.0.0

package/dist/cjs/types.d.ts

@@ -0,0 +1,47 @@
+import { type EIP1193Provider, type MetaMaskProvider, type Web3APISpec, type Web3BaseProvider, type Web3EthExecutionAPI } from 'web3-types';
+import { type EthereumConnector } from './core';
+export type SupportedProviders<API extends Web3APISpec = Web3EthExecutionAPI> = EIP1193Provider<API> | Web3BaseProvider<API> | MetaMaskProvider<API>;
+export declare enum ConnectionType {
+    INJECTED = "INJECTED",
+    COINBASE_WALLET = "COINBASE_WALLET",
+    WALLET_CONNECT_V2 = "WALLET_CONNECT_V2",
+    EIP_6963_INJECTED = "EIP_6963_INJECTED"
+}
+export declare enum EIP6963Event {
+    REQUEST_PROVIDER = "eip6963:requestProvider",
+    ANNOUNCE_PROVIDER = "eip6963:announceProvider"
+}
+export interface WatchAssetParameters {
+    address: string;
+    decimals: number;
+    image?: string;
+    symbol: string;
+}
+export interface AddEthereumChainParams {
+    blockExplorerUrls?: string[];
+    chainId: number;
+    chainName: string;
+    iconUrls?: string[];
+    nativeCurrency: {
+        decimals: 18;
+        name: string;
+        symbol: string;
+    };
+    rpcUrls: string[];
+}
+export type EvmProviderAvailablePlatforms = 'ios' | 'android' | 'chromeExtension' | 'firefoxExtension';
+export type EvmProviderPlatformLinks = Partial<Record<EvmProviderAvailablePlatforms, string>>;
+export interface EvmWalletProviderConfig {
+    connector: EthereumConnector;
+    id: string;
+    info: {
+        description?: string;
+        icon?: string;
+        links?: EvmProviderPlatformLinks & {
+            homepage?: string;
+        };
+        name: string;
+        rdns?: string;
+    };
+    isRecent?: boolean;
+}

package/dist/cjs/types.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EIP6963Event = exports.ConnectionType = void 0;
+var ConnectionType;
+(function (ConnectionType) {
+    ConnectionType["INJECTED"] = "INJECTED";
+    ConnectionType["COINBASE_WALLET"] = "COINBASE_WALLET";
+    ConnectionType["WALLET_CONNECT_V2"] = "WALLET_CONNECT_V2";
+    ConnectionType["EIP_6963_INJECTED"] = "EIP_6963_INJECTED";
+})(ConnectionType || (exports.ConnectionType = ConnectionType = {}));
+var EIP6963Event;
+(function (EIP6963Event) {
+    EIP6963Event["REQUEST_PROVIDER"] = "eip6963:requestProvider";
+    EIP6963Event["ANNOUNCE_PROVIDER"] = "eip6963:announceProvider";
+})(EIP6963Event || (exports.EIP6963Event = EIP6963Event = {}));

package/dist/cjs/utils/get-evm-provider-platform-link.d.ts

@@ -0,0 +1,2 @@
+import { type EvmProviderAvailablePlatforms, type EvmProviderPlatformLinks } from '../types';
+export declare function getEvmProviderPlatformLink(links: EvmProviderPlatformLinks): [EvmProviderAvailablePlatforms, string | undefined] | undefined;

package/dist/cjs/utils/get-evm-provider-platform-link.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEvmProviderPlatformLink = void 0;
+const js_utils_1 = require("@broxus/js-utils");
+function getEvmProviderPlatformLink(links) {
+    const [platform] = Array.from(new Map([
+        ['android', (0, js_utils_1.isMobile)(navigator.userAgent) && (0, js_utils_1.isAndroid)(navigator.userAgent)],
+        ['ios', (0, js_utils_1.isMobile)(navigator.userAgent) && (0, js_utils_1.isIos)(navigator.userAgent)],
+        ['chromeExtension', (0, js_utils_1.isBrowser)() && (0, js_utils_1.isChrome)(navigator.userAgent)],
+        ['firefoxExtension', (0, js_utils_1.isBrowser)() && (0, js_utils_1.isFirefox)(navigator.userAgent)],
+    ])).find(([, enabled]) => enabled) ?? [];
+    return platform ? [platform, links[platform]] : undefined;
+}
+exports.getEvmProviderPlatformLink = getEvmProviderPlatformLink;

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

@@ -0,0 +1,2 @@
+export * from '../utils/get-evm-provider-platform-link';
+export * from '../utils/parse-chain-id';

package/dist/cjs/utils/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../utils/get-evm-provider-platform-link"), exports);
+__exportStar(require("../utils/parse-chain-id"), exports);

package/dist/cjs/utils/parse-chain-id.d.ts

@@ -0,0 +1 @@
+export declare function parseChainId(chainId: string | number): number;

package/dist/cjs/utils/parse-chain-id.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseChainId = void 0;
+function parseChainId(chainId) {
+    return typeof chainId === 'string' ? Number.parseInt(chainId, 16) : chainId;
+}
+exports.parseChainId = parseChainId;

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

@@ -0,0 +1,26 @@
+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';
+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 [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(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 },
+            React.createElement(EvmConnectDialog, { className: popupClassName, open: isModalShown, type: popupType, onClose: close })))));
+});

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

@@ -0,0 +1,36 @@
+import { Close } from '@broxus/react-components';
+import { Component, Drawer, Modal, Text } from '@broxus/react-uikit';
+import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { EvmProvidersDispatcher } from '../../components';
+import { useEvmWalletProviders } from '../../context';
+import messages from '../../intl';
+import './index.css';
+export const EvmConnectDialog = observer(({ className, open, type, onClose }) => {
+    const intl = useIntl();
+    const { agreementsNote, connectingProvider, reset } = useEvmWalletProviders();
+    const onClosed = () => {
+        reset();
+    };
+    const close = () => {
+        onClose?.();
+    };
+    if (type === 'drawer') {
+        return (React.createElement(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(Close, { kind: "drawer", ratio: 0.9, onClick: onClose }),
+            React.createElement(Component, { className: "uk-drawer-header" },
+                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))));
+    }
+    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 },
+        React.createElement(EvmProvidersDispatcher, null)));
+});

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

@@ -0,0 +1,68 @@
+import { formattedTokenAmount } from '@broxus/js-utils';
+import { ExplorerAccountLink, Icon, Skeleton, TokenIcon, WalletAccount } from '@broxus/react-components';
+import { Button, Dropdown, Flex, Grid, List, Text } from '@broxus/react-uikit';
+import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { EvmConnectButton } from '../../components/EvmConnectButton';
+import { useEvmWalletService } from '../../context';
+import { getRecentConnectionMeta, useRecentConnectionMeta } from '../../hooks';
+import messages from '../../intl';
+import './index.css';
+export const EvmConnector = observer((props) => {
+    const intl = useIntl();
+    const walletService = useEvmWalletService();
+    const [, setRecentMeta] = useRecentConnectionMeta();
+    const drop = React.useRef(null);
+    const { changeNetworkButtonText = intl.formatMessage(messages.EVM_CONNECT_CHANGE_NETWORK_BTN_TEXT), changeWalletButtonText = intl.formatMessage(messages.EVM_CONNECT_CHANGE_WALLET_BTN_TEXT), className, connectButtonShape, connectButtonText = intl.formatMessage(messages.EVM_CONNECT_CONNECT_BTN_TEXT), connectButtonType, disconnectButtonText = intl.formatMessage(messages.EVM_CONNECT_DISCONNECT_BTN_TEXT), popupType, suffix, showDropMenu = true, showSubIcon = true, standalone = walletService.providers?.length === 1, } = props;
+    const 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 = getRecentConnectionMeta();
+            if (recentMeta) {
+                setRecentMeta({ ...recentMeta, disconnected: true });
+            }
+        }
+    }, [setRecentMeta, walletService]);
+    let subTitle = intl.formatMessage(messages.EVM_CONNECT_NOT_CONNECTED_HINT);
+    if (walletService.isUnsupportedNetwork && walletService.isConnected) {
+        subTitle = (React.createElement(Text, { color: "danger" }, intl.formatMessage(messages.EVM_CONNECT_UNSUPPORTED_NETWORK_WARNING)));
+    }
+    else if (walletService.isSyncing) {
+        subTitle = React.createElement(Skeleton, { width: 80 });
+    }
+    else if (walletService.isReady) {
+        subTitle = `${formattedTokenAmount(walletService.balance, walletService.currency.decimals)} ${walletService.currency.symbol}`;
+    }
+    let networkIcon = React.createElement(Icon, { icon: "evm1BlockchainIcon", ratio: 1.6 }), providerIcon;
+    if (walletService.network?.icon) {
+        networkIcon = React.createElement(TokenIcon, { iconUrl: walletService.network.icon, size: 32 });
+    }
+    if (walletService.providerInfo?.icon) {
+        providerIcon = React.createElement(TokenIcon, { iconUrl: walletService.providerInfo.icon, size: 16 });
+    }
+    return (React.createElement(Flex, { alignItems: "stretch", className: classNames('evm-connect-connector', className, walletService.providerId), component: Grid },
+        React.createElement("div", null,
+            React.createElement(WalletAccount, { address: walletService.address?.toString(), icon: networkIcon, subIcon: walletService.isConnected && showSubIcon ? providerIcon : undefined, subTitle: subTitle, title: !walletService.isConnected ? (intl.formatMessage(messages.EVM_CONNECT_CONNECTOR_BLOCKCHAIN_NAME)) : (React.createElement(ExplorerAccountLink, { address: walletService.address.toString(), baseUrl: walletService.network?.explorer.baseUrl, copyable: true, subPath: walletService.network?.explorer.accountsSubPath, tooltip: intl.formatMessage(messages.EVM_CONNECT_CONNECTOR_EXPLORER_HINT, {
+                        explorerTitle: walletService.network?.explorer.title ?? '',
+                    }) })) })),
+        React.createElement(Flex, { alignItems: "center", className: "evm-connect-connector-suffix" },
+            suffix,
+            walletService.isConnected && showDropMenu && (React.createElement(Dropdown, { ref: drop, action: "click", overlayClassName: "evm-connect-dropdown", overlay: (React.createElement(List, { className: "uk-margin-remove", size: "large" },
+                    React.createElement(List.Item, null,
+                        React.createElement(Button, { className: "evm-connect-change-network", disabled: true, type: "link", onClick: changeNetwork }, changeNetworkButtonText)),
+                    !standalone && (React.createElement(List.Item, { key: "connect-wallet" },
+                        React.createElement(EvmConnectButton, { className: "evm-connect-change-wallet", popupType: popupType, type: "link", onOpen: changeWallet }, changeWalletButtonText))),
+                    React.createElement(List.Item, null,
+                        React.createElement(Button, { "aria-disabled": walletService.isDisconnecting, className: "evm-connect-logout", disabled: walletService.isDisconnecting, type: "link", onClick: disconnect }, disconnectButtonText)))), placement: "bottom-right" },
+                React.createElement(Icon, { className: "evm-connect-dropdown-trigger", icon: "ellipsisVertical", ratio: 0.8 }))),
+            !walletService.isConnected && (React.createElement(EvmConnectButton, { key: "connect", popupType: popupType, shape: connectButtonShape, standalone: standalone, type: connectButtonType }, connectButtonText)))));
+});

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

@@ -0,0 +1,43 @@
+.evm-connect-connection-request {
+
+}
+
+.evm-connect-connection-request .evm-connect-connection-request-back-button {
+    color: var(--close-color, #333);
+    left: var(--modal-close-position);
+    position: absolute;
+    top: var(--modal-close-position);
+}
+
+.evm-connect-connection-request .evm-connect-connection-request-back-button:hover,
+.evm-connect-connection-request .evm-connect-connection-request-back-button:focus {
+    color: var(--close-hover-color, #5e5e5e);
+}
+
+.evm-connect-connection-request .evm-connect-connection-request-title {
+    color: var(--base-body-color, #333);
+    font-weight: 600;
+    margin-bottom: var(--global-small-margin, 10px);
+}
+
+.evm-connect-connection-request .evm-connect-connection-request-button {
+    background-color: rgb(0 0 0 / 12%);
+    border: var(--evm-connect-connection-request-button-border-width) var(--evm-connect-connection-request-button-border-style) var(--evm-connect-connection-request-button-border);
+    border-radius: 8px;
+    box-sizing: border-box;
+    color: var(--base-body-color, #383838);
+}
+
+.evm-connect-connection-request .evm-connect-connection-request-button:hover,
+.evm-connect-connection-request .evm-connect-connection-request-button:focus {
+    background-color: rgb(0 0 0 / 16%);
+    border-color: var(--evm-connect-provider-button-hover-border);
+    color: var(--base-body-color, #383838);
+}
+
+:root {
+    --evm-connect-connection-request-button-border-width: 2px;
+    --evm-connect-connection-request-button-border-style: solid;
+    --evm-connect-connection-request-button-border: transparent;
+    --evm-connect-connection-request-button-hover-border: var(--global-border, transparent);
+}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import './index.css';
+export declare function ConnectionRequest(): React.JSX.Element;

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

@@ -0,0 +1,35 @@
+import { Icon } from '@broxus/react-components';
+import { Button, Grid, Text } from '@broxus/react-uikit';
+import classNames from 'classnames';
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { useEvmWalletProviders } from '../../../context';
+import messages from '../../../intl';
+import './index.css';
+export function ConnectionRequest() {
+    const intl = useIntl();
+    const { connect, connectingProvider, error, reset } = useEvmWalletProviders();
+    const tryAgain = async () => {
+        if (connectingProvider) {
+            await connect(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(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,
+                }) },
+                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("h4", { className: "evm-connect-connection-request-title" }, intl.formatMessage(messages.EVM_CONNECT_DISPATCHER_POPUP_REQUEST_TITLE, {
+                    title: 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(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/ProviderButton/index.css

@@ -0,0 +1,54 @@
+.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button {
+    align-content: center;
+    align-items: center;
+    background-color: rgb(0 0 0 / 8%);
+    border: var(--evm-connect-provider-button-border-width) var(--evm-connect-provider-button-border-style) var(--evm-connect-provider-button-border);
+    border-radius: 8px;
+    box-sizing: border-box;
+    color: var(--base-body-color, #383838);
+    display: grid;
+    gap: 16px;
+    grid-auto-rows: max-content;
+    grid-template-columns: 30px minmax(50%, 100%) auto;
+    line-height: normal;
+    min-height: 65px;
+    padding: 0 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button:hover:not(:disabled),
+.evm-connect-providers-dispatcher .evm-connect-providers-list .evm-connect-provider-button:focus:not(:disabled) {
+    background-color: rgb(0 0 0 / 12%);
+    border-color: var(--evm-connect-provider-button-hover-border);
+    color: var(--base-body-color, #383838);
+}
+
+.evm-connect-providers-list .evm-connect-provider-title {
+    color: var(--base-body-color, #383838);
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.evm-connect-providers-list .evm-connect-provider-subtitle {
+    max-width: 100%;
+    opacity: 0.8;
+}
+
+.evm-connect-providers-list .evm-connect-provider-connected,
+.evm-connect-providers-list .evm-connect-provider-recent {
+    background: var(--evm-connect-modal-content-background);
+    border-radius: 3px;
+    color: var(--global-muted-color, #383838);
+    display: inline-block;
+    font-size: 12px;
+    justify-self: flex-end;
+    padding: 1px 5px;
+}
+
+:root {
+    --evm-connect-provider-button-border-width: 2px;
+    --evm-connect-provider-button-border-style: solid;
+    --evm-connect-provider-button-border: transparent;
+    --evm-connect-provider-button-hover-border: var(--global-border, transparent);
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type EvmWalletProviderConfig } from '../../../types';
+import './index.css';
+interface ProviderButtonProps {
+    providerConfig: EvmWalletProviderConfig;
+    onSelect?: (providerConfig: EvmWalletProviderConfig) => Promise<void> | void;
+}
+export declare const ProviderButton: ((props: ProviderButtonProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};