Integrate Embedded Wallets with the ZetaChain Blockchain in React Native
Installation
To interact with an EVM blockchain in React Native, you can use any EIP1193
compatible package like
web3.js
, ethers.js
etc.
In this reference, we're using ethers.js
to demonstrate how to make blockchain calls using it with Web3Auth.
- Install the
ethers.js
package usingnpm
oryarn
:
- npm
- Yarn
- pnpm
- Bun
npm install @ethersproject/shims ethers
yarn add @ethersproject/shims ethers
pnpm add @ethersproject/shims ethers
bun add @ethersproject/shims ethers
- Import the packages and shims into your codebase:
// Import the required shims
import "@ethersproject/shims";
// Import the ethers library
import { ethers } from "ethers";
info
We have followed this guide to set up the ethers.js
package in React
Native.
Initializing Provider
- Mainnet
const chainConfig = {
chainNamespace: ChainNamespace.EIP155,
chainId: '0x1B58',
rpcTarget: 'https://zetachain-mainnet.g.allthatnode.com/archive/evm',
displayName: 'ZetaChain Mainnet',
blockExplorer: 'https://zetachain.blockscout.com/',
ticker: 'ZETA',
tickerName: 'ZETA',
}
Initialize
import * as WebBrowser from '@toruslabs/react-native-web-browser'
import EncryptedStorage from 'react-native-encrypted-storage'
import Web3Auth, { LOGIN_PROVIDER, WEB3AUTH_NETWORK } from '@web3auth/react-native-sdk'
import '@ethersproject/shims'
import { ethers } from 'ethers'
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider'
const [provider, setProvider] = useState<IProvider | null>(null)
const ethereumPrivateKeyProvider = new EthereumPrivateKeyProvider({
config: {
chainConfig,
},
})
const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
clientId,
network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or other networks
})
await ethereumPrivateKeyProvider.setupProvider(web3auth.privKey)
setProvider(ethereumPrivateKeyProvider)
Get User Info
You get the user information after a successful login is returned from the login
method. The userInfo
object contains the user information.
const info = web3auth.userInfo(); // User Information
Get Account
// For ethers v5
// const ethersProvider = new ethers.providers.Web3Provider(this.provider);
const ethersProvider = new ethers.BrowserProvider(provider!);
// For ethers v5
// const signer = ethersProvider.getSigner();
const signer = await ethersProvider.getSigner();
// Get user's Ethereum public address
const address = signer.getAddress();
uiConsole(address);
Get Balance
// For ethers v5
// const ethersProvider = new ethers.providers.Web3Provider(this.provider);
const ethersProvider = new ethers.BrowserProvider(provider!);
// 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.formatEther(
await ethersProvider.getBalance(address), // Balance is in wei
);
Send Transaction
const ethersProvider = ethers.getDefaultProvider(providerUrl);
const wallet = new ethers.Wallet(key, ethersProvider);
const destination = "0x40e1c367Eca34250cAF1bc8330E9EddfD403fC56";
// Convert 1 ether to wei
const amount = ethers.utils.parseEther("0.001");
// Submit transaction to the blockchain
const tx = await wallet.sendTransaction({
to: destination,
value: amount,
maxPriorityFeePerGas: "5000000000", // Max priority fee per gas
maxFeePerGas: "6000000000000", // Max fee per gas
});
Sign a message
// For ethers v5
// const ethersProvider = new ethers.providers.Web3Provider(this.provider);
const ethersProvider = new ethers.BrowserProvider(provider!);
// For ethers v5
// const signer = ethersProvider.getSigner();
const signer = await ethersProvider.getSigner();
const originalMessage = "YOUR_MESSAGE";
// Sign the message
const signedMessage = await signer.signMessage(originalMessage);