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-connectThe 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()This is library/framework agnostic component. So, you can use it anywhere.