At BlockWallet, we’ve made it as simple as possible to integrate with any DApp. By supporting all common libraries and schemes, you can use the same process for integrating BlockWallet the same way you would with any Web3.0 application.
Benefits of Integrating BlockWallet
In addition to the privacy & security that BlockWallet offers, integrating with BlockWallet helps expose your DApp in front of a completely new group of users. You also have the opportunity to become a BlockWallet partner, where your project is granted BlockWallet verification status to showcase your commitment to user anonymity.
How to Integrate BlockWallet
To integrate your DApp with BlockWallet, use the code blocks found here.
The following steps outlined in the code will use the BlockWallet extension to inject an Ethereum provider on every site that the user visits.
To complete this task, we have provided 4 different blocks of code:
Provider Detection - This is a class that’s instantiated as window.ethereum , to check if the user has BlockWallet or any other compatible wallet installed
const detectProvider = (): Promise<EthereumProvider | null> => {
return new Promise((resolve) => {
const handleProvider = () => {
window.removeEventListener('ethereum#initialized', handleProvider);
const { ethereum } = window;
if (ethereum) {
resolve(ethereum);
} else {
console.error('Unable to detect window.ethereum.');
resolve(null);
}
};
if (window.ethereum) {
handleProvider();
} else {
window.addEventListener('ethereum#initialized', handleProvider, {
once: true,
});
}
});
};
const provider = await detectProvider();
if (provider) {
// Initialize your app
} else {
console.log('Provider not detected');
}
Detect BlockWallet - This is used to detect if the user has BlockWallet installed on his browser, you can check if the isBlockWallet property is available in the detected provider.
const isBlockWallet: boolean | undefined = ethereum.isBlockWallet;
if (!isBlockWallet) {
console.log('Please install BlockWallet 😁');
}
Request permissions - An EIP-1193 connection method that will only grant eth_accounts permission to external dapps.
const connect = (): string[] => {
ethereum.request({ method: 'eth_requestAccounts' }).catch((error) => {
if (error.code === 4001) {
// See: https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1193.md#provider-errors
console.log('Connection rejected.');
} else {
console.error(err);
}
});
};
Events - Whenever there is an update on the accounts that the provider should communicate to your app, the event accountsChanged is emitted. If there is no account present, your app may have not been connected to the BlockWallet, or the wallet may be locked.
ethereum.on('accountsChanged', handler: (accounts: string[]) => void);
For more information and access to these blocks of code, visit the BlockWallet GitHub.
How to Use BlockWallet Assets
When you want to integrate our logo in your assets, simply use the logo icon and write “BlockWallet” underneath. Be cautious not to use the logo with text on the side, since this style is only used for promotions and social media.
You can download the BlockWallet library of brand assets in our "📝 │ resources" channel on Discord.
Comments
0 comments
Please sign in to leave a comment.