Skip to content

EVM Provider

1% edited this page Jul 4, 2024 · 2 revisions

EVM Provider

Most extension wallets or mobile wallets (using in-app browser) will publish their wallet's object to websites. The Web DApps can use these objects to interact with specific wallets to authorize, get accounts and another wallet's information and sign the contract or transaction.

This article will guide you through the process of integrating OpenBit with EVM DApps

From Scratch

This section does not only show you how to integrate wallets that support EVM Provider like OpenBit but also demonstrates how a wallet and an EVM DApp work together

You need to follow these steps:

1. Check wallet installation

const wallet = window.OpenBit;

if (!wallet || !wallet.isOpenBit) {
  console.warn('OpenBit is not installed');
}

If wallet is undefined, it means OpenBit is not installed or activated

Note: OpenBit also publishes EVM provider to window.ethereum if no wallet is available when the web page finishes loading. We wait until the page is loaded because we don’t want to conflict with EVM wallets like MetaMask.

2. Enable DApp - Wallet connection

try {
  const accounts = await wallet.request({method: 'eth_requestAccounts'})
} catch (e) {
    // Response an error with code 4001 when the user rejects the request
  }
}

Another way to enable the wallet is just run await wallet.enabled()

There are some cases after running this code:

  • DApp not in the authorized list: request will respond after user confirm the authorized popup
  • DApp had been authorized: request will respond instantly
  • DApp is blocked or user cancel authorized popup: request will throw an error with code 4001

3. Subscribe events

Subscribe chain changed

wallet.on('chainChanged', (chainId) => {
  // ChainId in hex format
  // Common action in almost EVM Dapp is reloading the browser
});

Subscribe accounts changed

wallet.on('accountsChanged', (accounts) => {
  // Accounts is a can get from request('eth_accounts')
  // Common action in almost EVM Dapp is reloading the browser
});

4. Fetch basic information and start to use app

In before section you can enable wallet and get app accounts with request('eth_requestAccounts'). After the wallet is enabled you also can use request('eth_accounts') to get the same thing.

const accounts = await wallet.request({method: 'eth_accounts}')

Not like MetaMask always responds list with one account, OpenBit will respond to all authorized EVM list if you select All Account.

Most EVM DApp will check wallet's current chain to ensure that they can information from the correct chain. Below is 2 ways to get chainId from the wallet

const hexChainId = await wallet.request({method: 'eth_chainId'}) // get chainId in hex format
const decChainId = await wallet.request({method: 'net_version'}) // get chainId in decimal format

You can request wallet to add or change the current network with methods like wallet_addEthereumChain or wallet_switchEthereumChain

wallet.request({method: 'wallet_switchEthereumChain', [
  {
    chainId: '0x504' // Hex format of 1287
  }
])
Clone this wiki locally