Polygon
Polygon
#Installation
To interact with the Polygon network, you can use either ethers.js or web3.js libraries with Magic. For a more in-depth guide on available functions provided, refer to the EVM documentation.
To get started, install the following dependencies for your project:
#Ethers.js
NPM
Yarn
CDN
01npm install ethers magic-sdk
#Web3.js
NPM
Yarn
CDN
01npm install web3 magic-sdk
#Initialization
The Magic class is the entry-point to the Magic SDK. It must be instantiated with a Magic publishable key.
important
Ethereum provider is only supported in [email protected] or later versions.
#Mainnet
Mainnet Block Explorer URL: https://polygonscan.com/
Javascript
01const customNodeOptions = {
02 rpcUrl: 'https://polygon-rpc.com/', // Polygon RPC URL
03 chainId: 137, // Polygon chain id
04}
05
06// Setting network to Polygon
07const magic = new Magic('YOUR_PUBLISHABLE_API_KEY', { network: customNodeOptions });
#Testnet
Mumbai Block Explorer: https://www.oklink.com/amoy
Mumbai Testnet Faucet: https://faucet.polygon.technology/
Javascript
01const customNodeOptions = {
02 rpcUrl: 'https://rpc-amoy.polygon.technology/', // Polygon RPC URL
03 chainId: 80002, // Polygon chain id
04}
05
06// Setting network to Polygon - Testnet
07const magic = new Magic('YOUR_PUBLISHABLE_API_KEY', { network: customNodeOptions });
#Common Methods
#Send Transaction
Ethers.js
Ethers (v6)
Ethers (v5)
01import { Magic } from 'magic-sdk';
02import { ethers } from 'ethers';
03
04const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
05const provider = new ethers.BrowserProvider(magic.rpcProvider);
06
07// ⭐️ After user is successfully authenticated
08
09const signer = await provider.getSigner();
10
11const destination = '0xE0cef4417a772512E6C95cEf366403839b0D6D6D';
12const amount = ethers.parseEther('1.0'); // Convert 1 ether to wei
13
14// Submit transaction to the blockchain
15const tx = await signer.sendTransaction({
16 to: destination,
17 value: amount,
18});
19
20// Wait for transaction to be mined
21const receipt = await tx.wait();
Web3.js
note
Example is using [email protected] or later version.
Javascript
01import { Magic } from 'magic-sdk';
02import Web3 from 'web3';
03
04const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
05const web3 = new Web3(magic.rpcProvider);
06
07// ⭐️ After user is successfully authenticated
08
09const fromAddress = (await web3.eth.getAccounts())[0];
10const amount = web3.utils.toWei(1, 'wei'); // Convert 1 ether to wei
11
12const receipt = await web3.eth.sendTransaction({
13 from: fromAddress,
14 to: destination,
15 value: amount,
16});
#Sign Message
#Ethers.js
Personal Sign
Ethers (v6)
Ethers (v5)
01import { Magic } from 'magic-sdk';
02import { ethers } from 'ethers';
03
04const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
05const provider = new ethers.BrowserProvider(magic.rpcProvider);
06
07// ⭐️ After user is successfully authenticated
08
09const signer = await provider.getSigner();
10
11const originalMessage = 'YOUR_MESSAGE';
12
13const signedMessage = await signer.signMessage(originalMessage);
Sign Typed Data v1
Ethers (v6)
Ethers (v5)
01import { Magic } from 'magic-sdk';
02import { ethers } from 'ethers';
03
04const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
05const provider = new ethers.BrowserProvider(magic.rpcProvider);
06const signer = await provider.getSigner();
07
08// ⭐️ After user is successfully authenticated
09
10// Get user's Ethereum public address
11const fromAddress = await signer.getAddress();
12
13const originalMessage = [
14 {
15 type: 'string',
16 name: 'fullName',
17 value: 'John Doe',
18 },
19 {
20 type: 'uint32',
21 name: 'userId',
22 value: '1234',
23 },
24];
25const params = [originalMessage, fromAddress];
26const method = 'eth_signTypedData';
27
28const signedMessage = await signer.provider.send(method, params);
Sign Typed Data v3
Ethers (v6)
Ethers (v5)
01import { Magic } from 'magic-sdk';
02import { ethers } from 'ethers';
03
04const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
05const provider = new ethers.BrowserProvider(magic.rpcProvider);
06const signer = await provider.getSigner();
07
08// ⭐️ After user is successfully authenticated
09
10// Get user's Ethereum public address
11const fromAddress = await signer.getAddress();
12
13const originalMessage = {
14 types: {
15 EIP712Domain: [
16 {
17 name: 'name',
18 type: 'string',
19 },
20 {
21 name: 'version',
22 type: 'string',
23 },
24 {
25 name: 'verifyingContract',
26 type: 'address',
27 },
28 ],
29 Greeting: [
30 {
31 name: 'contents',
32 type: 'string',
33 },
34 ],
35 },
36 primaryType: 'Greeting',
37 domain: {
38 name: 'Magic',
39 version: '1',
40 verifyingContract: '0xE0cef4417a772512E6C95cEf366403839b0D6D6D',
41 },
42 message: {
43 contents: 'Hello, from Magic!',
44 },
45};
46const params = [fromAddress, originalMessage];
47const method = 'eth_signTypedData_v3';
48
49const signedMessage = await signer.provider.send(method, params);
Sign Typed Data v4
Ethers (v6)
Ethers (v5)
01/*
02 Sign Typed Data v4 adds support for
03 arrays and recursive data types.
04
05 Otherwise, it works the same as Sign Typed Data v3.
06 */
07
08import { Magic } from 'magic-sdk';
09import { ethers } from 'ethers';
10
11const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
12const provider = new ethers.BrowserProvider(magic.rpcProvider);
13const signer = await provider.getSigner();
14
15// ⭐️ After user is successfully authenticated
16
17// Get user's Ethereum public address
18const fromAddress = await signer.getAddress();
19
20const originalMessage = {
21 types: {
22 EIP712Domain: [
23 {
24 name: 'name',
25 type: 'string',
26 },
27 {
28 name: 'version',
29 type: 'string',
30 },
31 {
32 name: 'verifyingContract',
33 type: 'address',
34 },
35 ],
36 Greeting: [
37 {
38 name: 'contents',
39 type: 'string',
40 },
41 ],
42 },
43 primaryType: 'Greeting',
44 domain: {
45 name: 'Magic',
46 version: '1',
47 verifyingContract: '0xE0cef4417a772512E6C95cEf366403839b0D6D6D',
48 },
49 message: {
50 contents: 'Hello, from Magic!',
51 },
52};
53const params = [fromAddress, originalMessage];
54const method = 'eth_signTypedData_v4';
55
56const signedMessage = await signer.provider.send(method, params);
#Web3.js
note
The following examples assume web3@>=4.0.2
Personal Sign
Typescript
01import { Magic } from 'magic-sdk';
02import Web3 from 'web3';
03
04const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
05const web3 = new Web3(magic.rpcProvider);
06
07// ⭐️ After user is successfully authenticated
08
09// Get user's Ethereum public address
10const fromAddress = (await web3.eth.getAccounts())[0];
11
12const originalMessage = 'YOUR_MESSAGE';
13
14const signedMessage = await web3.eth.personal.sign(originalMessage, fromAddress, "ACCOUNT_PASSWORD");
Sign Typed Data v1
Typescript
01import { Magic } from 'magic-sdk';
02import Web3 from 'web3';
03
04const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
05const web3 = new Web3(magic.rpcProvider);
06
07// ⭐️ After user is successfully authenticated
08
09// Get user's Ethereum public address
10const fromAddress = (await web3.eth.getAccounts())[0];
11
12const message = [
13 {
14 type: 'string',
15 name: 'fullName',
16 value: 'John Doe',
17 },
18 {
19 type: 'uint32',
20 name: 'userId',
21 value: '1234',
22 },
23];
24
25const signedMessage = await web3.eth.signTypedData(fromAddress, message, true)
Sign Typed Data v4
Typescript
01/*
02 Sign Typed Data v4 adds support for
03 arrays and recursive data types.
04
05 Otherwise, it works the same as Sign Typed Data v3.
06 */
07
08import { Magic } from 'magic-sdk';
09import Web3 from 'web3';
10
11const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
12const web3 = new Web3(magic.rpcProvider);
13
14// ⭐️ After user is successfully authenticated
15
16// Get user's Ethereum public address
17const fromAddress = (await web3.eth.getAccounts())[0];
18
19const message = {
20 types: {
21 EIP712Domain: [
22 {
23 name: 'name',
24 type: 'string',
25 },
26 {
27 name: 'version',
28 type: 'string',
29 },
30 {
31 name: 'verifyingContract',
32 type: 'address',
33 },
34 ],
35 Greeting: [
36 {
37 name: 'contents',
38 type: 'string',
39 },
40 ],
41 },
42 primaryType: 'Greeting',
43 domain: {
44 name: 'Magic',
45 version: '1',
46 verifyingContract: '0xE0cef4417a772512E6C95cEf366403839b0D6D6D',
47 },
48 message: {
49 contents: 'Hello, from Magic!',
50 },
51};
52
53const signedMessage = await web3.eth.signTypedData(fromAddress, message);
#Get Balance
#Ethers.js
Ethers (v6)
Ethers (v5)
01import { Magic } from 'magic-sdk';
02import { ethers } from 'ethers';
03
04const magic = new Magic('YOUR_PUBLISHABLE_API_KEY')
05const provider = new ethers.BrowserProvider(magic.rpcProvider);
06
07const signer = await provider.getSigner();
08
09// Get user's Ethereum public address
10const address = await signer.getAddress();
11
12// Get user's balance in ether
13const balance = ethers.formatEther(
14 await provider.getBalance(address), // Balance is in wei
15);
#Web3.js
Javascript
01import { Magic } from 'magic-sdk';
02import Web3 from 'web3';
03
04const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
05const web3 = new Web3(magic.rpcProvider);
06
07// Get user's Ethereum public address
08const address = (await web3.eth.getAccounts())[0];
09
10// Get user's balance in ether
11const balance = web3.utils.fromWei(
12 await web3.eth.getBalance(address),
13 'wei' // Balance is in wei
14);