Installation

To interact with the Polygon network, you will need to use a web3 provider library, such as ethers.js, 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 install ethers magic-sdk

Initialization

The Magic class is the entry-point to the Magic SDK. It must be instantiated with a Magic publishable key.
ImportantEthereum provider is only supported in [email protected] or later versions.

Mainnet

Mainnet Block Explorer URL: https://polygonscan.com/
JavaScript
const customNodeOptions = {
  rpcUrl: 'https://polygon-rpc.com/', // Polygon RPC URL
  chainId: 137, // Polygon chain id
}

// Setting network to Polygon
const 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
const customNodeOptions = {
  rpcUrl: 'https://rpc-amoy.polygon.technology/', // Polygon RPC URL
  chainId: 80002, // Polygon chain id
}

// Setting network to Polygon - Testnet
const magic = new Magic('YOUR_PUBLISHABLE_API_KEY', { network: customNodeOptions });

Send Transaction

Ethers.js

import { Magic } from 'magic-sdk';
import { ethers } from 'ethers';

const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
const provider = new ethers.BrowserProvider(magic.rpcProvider);

// ⭐️ After user is successfully authenticated

const signer = await provider.getSigner();

const destination = '0xE0cef4417a772512E6C95cEf366403839b0D6D6D';
const amount = ethers.parseEther('1.0'); // Convert 1 ether to wei

// Submit transaction to the blockchain
const tx = await signer.sendTransaction({
  to: destination,
  value: amount,
});

// Wait for transaction to be mined
const receipt = await tx.wait();

Sign Message

Ethers.js

Personal Sign

import { Magic } from 'magic-sdk';
import { ethers } from 'ethers';

const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
const provider = new ethers.BrowserProvider(magic.rpcProvider);

// ⭐️ After user is successfully authenticated

const signer = await provider.getSigner();

const originalMessage = 'YOUR_MESSAGE';

const signedMessage = await signer.signMessage(originalMessage);

Sign Typed Data v1

import { Magic } from 'magic-sdk';
import { ethers } from 'ethers';

const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
const provider = new ethers.BrowserProvider(magic.rpcProvider);
const signer = await provider.getSigner();

// ⭐️ After user is successfully authenticated

// Get user's Ethereum public address
const fromAddress = await signer.getAddress();

const originalMessage = [
  {
    type: 'string',
    name: 'fullName',
    value: 'John Doe',
  },
  {
    type: 'uint32',
    name: 'userId',
    value: '1234',
  },
];
const params = [originalMessage, fromAddress];
const method = 'eth_signTypedData';

const signedMessage = await signer.provider.send(method, params);

Sign Typed Data v3

import { Magic } from 'magic-sdk';
import { ethers } from 'ethers';

const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
const provider = new ethers.BrowserProvider(magic.rpcProvider);
const signer = await provider.getSigner();

// ⭐️ After user is successfully authenticated

// Get user's Ethereum public address
const fromAddress = await signer.getAddress();

const originalMessage = {
  types: {
    EIP712Domain: [
      {
        name: 'name',
        type: 'string',
      },
      {
        name: 'version',
        type: 'string',
      },
      {
        name: 'verifyingContract',
        type: 'address',
      },
    ],
    Greeting: [
      {
        name: 'contents',
        type: 'string',
     },
    ],
 },
  primaryType: 'Greeting',
  domain: {
    name: 'Magic',
    version: '1',
    verifyingContract: '0xE0cef4417a772512E6C95cEf366403839b0D6D6D',
  },
  message: {
    contents: 'Hello, from Magic!',
  },
};
const params = [fromAddress, originalMessage];
const method = 'eth_signTypedData_v3';

const signedMessage = await signer.provider.send(method, params);

Sign Typed Data v4

/*
  Sign Typed Data v4 adds support for
  arrays and recursive data types.

  Otherwise, it works the same as Sign Typed Data v3.
 */

import { Magic } from 'magic-sdk';
import { ethers } from 'ethers';

const magic = new Magic('YOUR_PUBLISHABLE_API_KEY');
const provider = new ethers.BrowserProvider(magic.rpcProvider);
const signer = await provider.getSigner();

// ⭐️ After user is successfully authenticated

// Get user's Ethereum public address
const fromAddress = await signer.getAddress();

const originalMessage = {
  types: {
    EIP712Domain: [
      {
        name: 'name',
        type: 'string',
      },
      {
        name: 'version',
        type: 'string',
      },
      {
        name: 'verifyingContract',
        type: 'address',
      },
    ],
    Greeting: [
      {
        name: 'contents',
        type: 'string',
      },
    ],
  },
  primaryType: 'Greeting',
  domain: {
    name: 'Magic',
    version: '1',
    verifyingContract: '0xE0cef4417a772512E6C95cEf366403839b0D6D6D',
  },
  message: {
    contents: 'Hello, from Magic!',
  },
};
const params = [fromAddress, originalMessage];
const method = 'eth_signTypedData_v4';

const signedMessage = await signer.provider.send(method, params);

Get Balance

Ethers.js

import { Magic } from 'magic-sdk';
import { ethers } from 'ethers';

const magic = new Magic('YOUR_PUBLISHABLE_API_KEY')
const provider = new ethers.BrowserProvider(magic.rpcProvider);

const signer = await provider.getSigner();

// Get user's Ethereum public address
const address = await signer.getAddress();

// Get user's balance in ether
const balance = ethers.formatEther(
  await provider.getBalance(address), // Balance is in wei
);

Resources