EVM Connect

Create a connection to Web3 wallets and dApps

Usage

Installation

To apply this component, install it with npm using following command:

npm install @broxus/evm-connect

or using yarn:

yarn add @broxus/evm-connect

Requirements

In general it works great with our UIkit package. If you use this package you don't need to worry about the details.

Minimum requirements

If you are only going to use stores, you should install a few required packages

npm i web3 mobx

or using yarn:

yarn add web3 mobx

Full requirements

If you would like to use stores and included react components, you need to install a few more packages

npm i web3 mobx mobx-react-lite react-intl

or using yarn:

yarn add web3 mobx-react-lite react-intl

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

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

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

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

const walletService = new EvmWalletService({
    defaultNetworkId: recentMeta.chainId,
    networks: evmNetworks,
    providerId: recentMeta.providerId ?? 'MetaMask', // EvmWalletProviderConfig['id']
    providers: !hasMetamask && metaMaskConnection
        ? [...eip6963FilteredConnections, metaMaskConnection, walletConnectConnection]
        : [...eip6963FilteredConnections, walletConnectConnection],
})

await walletService.connect()

Styling

If you are using our UIkit package it will it automatically adapts to your interface colors.

Otherwise, you can import standalone CSS

import '~@broxus/evm-connect/style.min.css'

Below you can find all supported CSS variables and their defaults

/* Connector */
--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, 5px);
--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, #0af);

/* Providers list buttons */
--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-primary-border, transparent);

/* 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-title-font-size: var(--modal-title-font-size, 18px);
--evm-connect-modal-title-font-weight: 500;
--evm-connect-modal-title-line-height: var(--modal-title-line-height, 22px);
--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-title-font-size: var(--drawer-title-font-size, 24px);
--evm-connect-drawer-title-font-weight: 500;
--evm-connect-drawer-title-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);

/* Connection approve popup stage */
--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);