Integrate Web3Auth with the Shardeum 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 install @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
- Testnet
const chainConfig = {
chainNamespace: ChainNamespace.EIP155,
chainId: "0x1F92",
rpcTarget: "https://atomium.shardeum.org",
displayName: "Shardeum Atomium",
blockExplorer: "https://explorer-atomium.shardeum.org/",
ticker: "SHM",
tickerName: "SHM",
};
Initialize
- PnP React Native SDK
- SFA React Native SDK
import * as WebBrowser from "@toruslabs/react-native-web-browser";
import EncryptedStorage from "react-native-encrypted-storage";
import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK, OpenloginUserInfo } 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: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET, // or other networks
});
await ethereumPrivateKeyProvider.setupProvider(web3auth.privKey);
setProvider(ethereumPrivateKeyProvider);
import EncryptedStorage from "react-native-encrypted-storage";
import "@ethersproject/shims";
import Web3Auth from "@web3auth/single-factor-auth-react-native";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { ethers } from "ethers";
const [provider, setProvider] = useState<IProvider | null>(null);
const web3auth = new Web3Auth(EncryptedStorage, {
clientId, // Get your Client ID from Web3Auth Dashboard
web3AuthNetwork: "sapphire_mainnet",
});
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
await web3auth.init(privateKeyProvider);
setProvider(web3auth.provider);
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);