Create a connection to Web3 wallets and dApps
To apply this component, install it with npm using following command:
npm install @broxus/evm-connector using yarn:
yarn add @broxus/evm-connectIn general it works great with our UIkit package. If you use this package you don't need to worry about the details.
If you are only going to use stores, you should install a few required packages
npm i web3 mobxor using yarn:
yarn add web3 mobxIf 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-intlor using yarn:
yarn add web3 mobx-react-lite react-intlThe 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.
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,
)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',
},
} : undefinedconst 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',
},
}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()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'