11 |
12 |
13 |
14 | # BlockWallet - Extension Developer Documentation
15 |
16 | Welcome! This repository is aimed at developers that want to integrate BlockWallet into their projects.
17 |
18 | - For the extension itself, visit: [BlockWallet/extension](https://github.com/block-wallet/extension)
19 |
20 | - To integrate BlockWallet to your dApp, visit: [BlockWallet Provider Documentation](https://github.com/block-wallet/block-extension-dev-docs/tree/main/provider)
21 |
22 | - For open bug bounties, visit: [Immunefi - BlockWallet Bug Bounties](https://immunefi.com/bounty/blockwallet)
23 |
--------------------------------------------------------------------------------
/provider/README.md:
--------------------------------------------------------------------------------
1 | # BlockWallet Ethereum Provider API
2 |
3 | The BlockWallet extension injects an ethereum provider on every site that the user visits. This document aims to help developers to connect to BlockWallet.
4 |
5 | ## If your project already supports injected providers or specific wallets like MetaMask, your site is most-likely already ready to be used with BlockWallet. As long as you don't specifically check for a certain property like `isMetaMask`, you can connect BlockWallet as you would other browser wallets.
6 |
7 | ## Provider detection
8 |
9 | The BlockWallet provider is a class that's instantiated as `window.ethereum` , to check if the user has BlockWallet or any other compatible wallet installed, you could use the following:
10 |
11 | ```typescript
12 | const detectProvider = (): Promise => {
13 | return new Promise((resolve) => {
14 | const handleProvider = () => {
15 | window.removeEventListener('ethereum#initialized', handleProvider);
16 |
17 | const { ethereum } = window;
18 |
19 | if (ethereum) {
20 | resolve(ethereum);
21 | } else {
22 | console.error('Unable to detect window.ethereum.');
23 | resolve(null);
24 | }
25 | };
26 |
27 | if (window.ethereum) {
28 | handleProvider();
29 | } else {
30 | window.addEventListener('ethereum#initialized', handleProvider, {
31 | once: true,
32 | });
33 | }
34 | });
35 | };
36 |
37 | const provider = await detectProvider();
38 |
39 | if (provider) {
40 | // Initialize your app
41 | } else {
42 | console.log('Provider not detected');
43 | }
44 | ```
45 |
46 | ## Detect BlockWallet
47 |
48 | To detect if the user has BlockWallet installed on his browser, you can check if the `isBlockWallet` property is available in the detected provider.
49 |
50 | ```typescript
51 | const isBlockWallet: boolean | undefined = ethereum.isBlockWallet;
52 |
53 | if (!isBlockWallet) {
54 | console.log('Please install BlockWallet 😁');
55 | }
56 | ```
57 |
58 | This value will be undefined if it's not a BlockWallet provider. If the value is undefined, you can lead your user to the BlockWallet website at https://blockwallet.io/ or directly to the Chrome Webstore page at https://chrome.google.com/webstore/detail/blockwallet/bopcbmipnjdcdfflfgjdgdjejmgpoaab
59 |
60 | ## Request permissions
61 |
62 | The only permission that we grant to external dapps is the `eth_accounts` permission.
63 |
64 | We recommend you use the standard EIP-1193 connection method:
65 |
66 | ```typescript
67 | const connect = (): string[] => {
68 | ethereum.request({ method: 'eth_requestAccounts' }).catch((error) => {
69 | if (error.code === 4001) {
70 | // See: https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1193.md#provider-errors
71 | console.log('Connection rejected.');
72 | } else {
73 | console.error(err);
74 | }
75 | });
76 | };
77 | ```
78 |
79 | At all times, BlockWallet will return only one account in the array, that would be the account the user decides to connect and is active.
80 |
81 | ## Web3Modal
82 |
83 | Since version 1.9.6, Web3Modal natively supports BlockWallet. With a default implementation, the BlockWallet option will automatically show up in your modal, if the user has BlockWallet installed and activated.
84 |
85 | ## Custom Web3Modal connection
86 |
87 | You can also add BlockWallet as a custom Web3Modal connection, if for some reason you cannot or do not want to use the default connection.
88 |
89 | ```typescript
90 | const blockWalletProvider = {
91 | id: "injected",
92 | name: "BlockWallet",
93 | logo: BlockWalletLogo,
94 | type: "injected",
95 | check: "isBlockWallet"
96 | }
97 |
98 | const providerOptions = {
99 | "custom-blockWallet": {
100 | display: {
101 | logo: BlockWalletLogo,
102 | name: "BlockWallet",
103 | description: "Connect to BlockWallet",
104 | },
105 | package: blockWalletProvider,
106 | connector: async () => {
107 | let provider = null
108 |
109 | if (window.ethereum) {
110 | provider = window.ethereum
111 |
112 | if (!provider.isBlockWallet) {
113 | throw new Error("Not a BlockWallet")
114 | }
115 |
116 | try {
117 | await provider.request({ method: "eth_requestAccounts" })
118 | } catch (error) {
119 | throw new Error("User Rejected")
120 | }
121 | } else {
122 | throw new Error("BlockWallet not found")
123 | }
124 |
125 | return provider
126 | }
127 | },
128 | }
129 |
130 | const web3Modal = new Web3Modal({
131 | providerOptions
132 | })
133 | ```
134 |
135 | ## Events
136 |
137 | ### Accounts
138 |
139 | Whenever there is an update on the accounts that the provider should communicate to your app, the event `accountsChanged` is emitted.
140 |
141 | ```typescript
142 | ethereum.on('accountsChanged', handler: (accounts: string[]) => void);
143 | ```
144 |
145 | If there is no account present, your app may not be connected to BlockWallet, or the wallet may be locked.
146 |
--------------------------------------------------------------------------------
8 |