|
1 | 1 | !!! caution "Content disclaimer" |
2 | 2 | Please view the third-party content disclaimer [here](https://github.com/0xPolygon/polygon-docs/blob/main/CONTENT_DISCLAIMER.md). |
3 | 3 |
|
4 | | -[MetaMask](https://metamask.io/) is a crypto wallet that can be used in a web browser and on mobile devices to interact with the Ethereum blockchain. It allows you to run Ethereum Dapps (Decentralized Apps) right in your browser without running a full Ethereum node. |
| 4 | +[MetaMask](https://metamask.io/) is a crypto wallet for web browsers and mobile devices that interacts with the Ethereum blockchain. It allows you to run Ethereum dApps in your browser without running a full Ethereum node. |
5 | 5 |
|
6 | | -**Type**: Non-custodial/HD <br/> |
7 | | -**Private Key Storage**: User’s local browser storage <br/> |
8 | | -**Communication to Ethereum Ledger**: Infura <br/> |
9 | | -**Private key encoding**: Mnemonic <br/> |
| 6 | +- Type: Non-custodial/HD |
| 7 | +- Private key storage: User local browser storage |
| 8 | +- Ethereum connection: Infura |
| 9 | +- Private key encoding: Mnemonic |
10 | 10 |
|
11 | 11 | !!! warning |
12 | | - Please Backup your **Secret Recovery Phrase**. If your device breaks, is lost, stolen, or has data corruption, there is no other way to recover it. The Secret Recovery Phrase is the only way to recover your MetaMask accounts. Check more **[Basic Safety and Security Tips for MetaMask](https://metamask.zendesk.com/hc/en-us/articles/360015489591-Basic-Safety-and-Security-Tips-for-MetaMask)**. |
| 12 | + - Backup your **Secret Recovery Phrase**. |
| 13 | + - If your device breaks, is lost, stolen, or has data corruption, there is no other way to recover it. |
| 14 | + -The Secret Recovery Phrase is the only way to recover your MetaMask accounts. Check more **[Basic Safety and Security Tips for MetaMask](https://metamask.zendesk.com/hc/en-us/articles/360015489591-Basic-Safety-and-Security-Tips-for-MetaMask)**. |
13 | 15 |
|
14 | | -## Guide to set up MetaMask for Polygon |
15 | | - |
16 | | -* [Download & install MetaMask](create-metamask-wallet.md). |
17 | | -* [Configure Polygon on MetaMask](add-polygon-network.md). |
18 | | -* [Config custom tokens](custom-tokens.md). |
19 | | -* [Create & import accounts](multiple-accounts.md). |
20 | | - |
21 | | -### 1. Set up Web3 |
22 | | - |
23 | | -#### Step 1.1 |
24 | | - |
25 | | -Install the following in your DApp: |
26 | | - |
27 | | -```sh |
28 | | -npm install --save web3 |
29 | | -``` |
30 | | - |
31 | | -Create a new file, name it `web3.js` and insert the following code in it: |
32 | | - |
33 | | - ```javascript |
34 | | - import Web3 from 'web3'; |
35 | | - |
36 | | - const getWeb3 = () => new Promise((resolve) => { |
37 | | - window.addEventListener('load', () => { |
38 | | - let currentWeb3; |
39 | | - |
40 | | - if (window.ethereum) { |
41 | | - currentWeb3 = new Web3(window.ethereum); |
42 | | - try { |
43 | | - // Request account access if needed |
44 | | - window.ethereum.enable(); |
45 | | - // Acccounts now exposed |
46 | | - resolve(currentWeb3); |
47 | | - } catch (error) { |
48 | | - // User denied account access... |
49 | | - alert('Please allow access for the app to work'); |
50 | | - } |
51 | | - } else if (window.web3) { |
52 | | - window.web3 = new Web3(web3.currentProvider); |
53 | | - // Acccounts always exposed |
54 | | - resolve(currentWeb3); |
55 | | - } else { |
56 | | - console.log('Non-Ethereum browser detected. You should consider trying MetaMask!'); |
57 | | - } |
58 | | - }); |
59 | | - }); |
60 | | - |
61 | | - export default getWeb3; |
62 | | - ``` |
63 | | - |
64 | | -The above file exports a function called `getWeb3()` - the purpose of which is to request MetaMask account’s access via detecting a global object (`ethereum` or `web3`) injected by Metamask. |
65 | | - |
66 | | -According to [Metamask’s API documentation](https://docs.metamask.io/guide/ethereum-provider.html#upcoming-provider-changes): |
67 | | - |
68 | | -> MetaMask injects a global API into websites visited by its users at window.ethereum. This API allows websites to request users' Ethereum accounts, read data from blockchains the user is connected to, and suggest that the user sign messages and transactions. The presence of the provider object indicates an Ethereum user. |
69 | | -
|
70 | | -In simpler terms, it basically means that having Metamask’s extension/add-on installed in your browser, you’d have a global variable defined, called `ethereum` (`web3` for older versions), and using this variable we instantiate our web3 object. |
71 | | - |
72 | | -#### Step 1.2 |
73 | | - |
74 | | -Now, in your client code, import the above file: |
75 | | - |
76 | | -```js |
77 | | - import getWeb3 from '/path/to/web3'; |
78 | | -``` |
79 | | - |
80 | | -and call the function: |
81 | | - |
82 | | -```js |
83 | | - getWeb3() |
84 | | - .then((result) => { |
85 | | - this.web3 = result;// we instantiate our contract next |
86 | | - }); |
87 | | -``` |
88 | | - |
89 | | -### 2. Set up account |
90 | | - |
91 | | -Now to send transactions (specifically those that alter the state of the blockchain) we’ll need an account to sign those transactions. We instantiate our contract instance from the web3 object we created above: |
92 | | - |
93 | | -```js |
94 | | - this.web3.eth.getAccounts() |
95 | | - .then((accounts) => { |
96 | | - this.account = accounts[0]; |
97 | | - }) |
98 | | -``` |
99 | | - |
100 | | -The `getAccounts()` function returns an array of all the accounts on user’s MetaMask, and `accounts[0]` is the one currently selected by the user. |
101 | | - |
102 | | -### 3. Instantiate your contracts |
103 | | - |
104 | | -Once we have our `web3` object in place, we’ll next instantiate our contracts, assuming you have your contract ABI and address already in place: |
105 | | - |
106 | | -```js |
107 | | - const myContractInstance = new this.web3.eth.Contract(myContractAbi, myContractAddress) |
108 | | -``` |
109 | | - |
110 | | -### 4. Call functions |
111 | | - |
112 | | -Now for any function you’d want to call from your contract, we directly interact with our instantiated contract object (which is `myContractInstance` declared in Step 2). |
113 | | - |
114 | | -!!! tip |
115 | | - - Functions that alter the state of the contract are called `send()` functions. |
116 | | - - Functions that do not alter the state of the contract are called `call()` functions. |
117 | | - |
118 | | -#### Calling `call()` Functions |
119 | | - |
120 | | -```js |
121 | | - this.myContractInstance.methods.myMethod(myParams) |
122 | | - .call() |
123 | | - .then ( |
124 | | - // do stuff with returned values |
125 | | - ) |
126 | | -``` |
127 | | - |
128 | | -#### Calling `send()` Functions |
129 | | - |
130 | | -```js |
131 | | - this.myContractInstance.methods.myMethod(myParams) |
132 | | - .send({ |
133 | | - from: this.account,gasPrice: 0 |
134 | | - }) |
135 | | - .then ( |
136 | | - (receipt) => { |
137 | | - // returns a transaction receipt} |
138 | | - ) |
139 | | -``` |
0 commit comments