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.

In this article, we will guide you through the process of integrating BlockWallet with your DApp, discuss the benefits of doing so, and provide code examples for a smooth implementation.

Benefits of Integrating BlockWallet

Integrating BlockWallet with your DApp offers several advantages:

In addition to the privacy & security that BlockWallet offers, integrating with BlockWallet helps expose your DApp to 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.

Prerequisites

Before you begin the integration process, ensure you have the following:

Basic understanding of Ethereum and DApps.
Familiarity with JavaScript and web development.
Access to the BlockWallet GitHub repository for code examples and documentation.

How to Integrate BlockWallet

To integrate your DApp with BlockWallet, follow these steps and refer to the accompanying code examples. Each code block serves a specific purpose in the overall integration process.

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:

Step 1: Provider Detection

This class checks if the user has BlockWallet or any other compatible wallet installed. It's instantiated as window.ethereum

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');
}

Step 2: Detect BlockWallet

Detect if the user has BlockWallet installed on their browser by checking if the isBlockWallet property is available in the detected provider.

const isBlockWallet: boolean | undefined = ethereum.isBlockWallet;

if (!isBlockWallet) {
  console.log('Please install BlockWallet');
}

Step 3: Request Permissions

Use the EIP-1193 connection method to 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);
    }
  });
};

Step 4: Events

Handle account updates communicated by the provider through the accountsChanged event. If there is no account present, your app may not have been connected to the BlockWallet, or the wallet may be locked.

ethereum.on('accountsChanged', (accounts: string[]) => {
  // Handle the account change
});

For more information and access to these blocks of code, visit the BlockWallet GitHub.

Troubleshooting Tips

If you encounter issues during the integration process, consider the following solutions:

Double-check your code against the provided examples.
Consult the BlockWallet documentation for additional guidance.
Search for similar issues on the BlockWallet GitHub repository.

How to Use BlockWallet Assets

When integrating the BlockWallet logo into your assets, use the logo icon with the text "BlockWallet" underneath. Avoid using the logo with text on the side, as this style is reserved for promotions and social media.

Integrating BlockWallet with your DApp provides numerous benefits, including enhanced privacy and security, access to a new user base, and potential partnership opportunities. By following the steps and code examples provided in this article, you can easily integrate BlockWallet into your Web3.0 application. For more information and resources, visit the official BlockWallet documentation or GitHub repository.

Integrate BlockWallet With Your DApp