@broxus/evm-connect

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

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', // 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.