Integrate Embedded Wallets with the Polygon Blockchain in JavaScript
While using the Web3Auth React SDK, you get access to the Web3Auth provider. You can pair it up with the libraries like ethers.js, viem etc. to make EVM based blockchain calls, like getting user's account, fetch balance, sign transaction, send transaction, read from and write to the smart contract, etc. We have highlighted a few here for getting you started quickly on that.
Chain details for Polygon
- Mainnet
- Amoy Testnet
- Chain ID: 0x89
- RPC URL: You can use our bundled RPC service from Infura, or your own choice of RPC service for production.
- Display Name: Polygon Mainnet
- Block Explorer Link: https://polygonscan.com
- Ticker: MATIC
- Ticker Name: Polygon
- Chain ID: 0x13882
- Public RPC URL: https://rpc-amoy.polygon.technology
- Display Name: Polygon Amoy Testnet
- Block Explorer Link: https://amoy.polygonscan.com
- Ticker: MATIC
- Ticker Name: Polygon
For VanillaJS, Angular and other frameworks
Installation
To interact with the blockchain, you can use either the viem or
ethers.js library with Web3Auth.
- viem
- ethers.js
- npm
- Yarn
- pnpm
- Bun
npm install --save viem
yarn add viem
pnpm add viem
bun add viem
- npm
- Yarn
- pnpm
- Bun
npm install --save ethers
yarn add ethers
pnpm add ethers
bun add ethers
Initializing provider
Using eip155 as chainNamespace while initializing web3auth will provide an
EIP1193 compatible provider as web3auth.provider
after successful authentication.
Initializing and instantiating the Embedded Wallets SDK
import { Web3Auth, WEB3AUTH_NETWORK } from '@web3auth/modal'
const web3AuthOptions: Web3AuthOptions = {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
}
Getting the Embedded Wallets provider
After initializing Embedded Wallets, the next step is to initialize the provider and use it for your operations.
// Initialize for PnP Web SDK
await web3auth.init()
// Trigger the login
await web3auth.connect()
// await web3auth.connectTo(); // For custom flow
// Get the provider
const provider = web3auth.provider
// Continue using the `provider`
Get account and balance
- viem
- ethers.js
/*
Use code from the above Initializing Provider here
*/
// provider is const provider = new ethers.providers.Web3Provider(web3Auth.provider); from above.
// For ethers v5
// const signer = ethersProvider.getSigner();
const signer = await ethersProvider.getSigner()
// Get user's Ethereum public address
const address = signer.getAddress()
// Get user's balance in ether
// For ethers v5
// const balance = ethers.utils.formatEther(
// await ethersProvider.getBalance(address) // Balance is in wei
// );
const balance = ethers.utils.formatEther(
await provider.getBalance(address) // Balance is in wei
)
const publicClient = createPublicClient({
chain: mainnet, // for mainnet
transport: custom(this.provider),
})
const walletClient = createWalletClient({
chain: mainnet,
transport: custom(this.provider),
})
// Get user's Ethereum public address
const address = await walletClient.getAddresses()
// Get user's balance in ether
const balance = await publicClient.getBalance({ address: address[0] })