Integrate Embedded Wallets with the Base Chain (Coinbase) Blockchain in React Native
While using the Embedded Wallets Mobile SDKs (formerly Web3Auth) in React Native, the private key is available in the SDK state. Use it with EVM libraries to derive accounts, sign, and make JSON-RPC calls to the Base network.
The SDKs are now branded as MetaMask Embedded Wallet SDKs (formerly Web3Auth Plug and Play SDKs). Package names and APIs remain Web3Auth (for example, Web3Auth React SDK), and code snippets may reference web3auth
identifiers.
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";
We have followed this guide to set up the ethers.js
package in React
Native.
Initializing Provider
Using eip155
as chainNamespace
while initializing web3auth
will provide an EIP1193
compatible provider as web3auth.provider
after successful authentication.
Getting the chainConfig
- Mainnet
- Testnet
const chainConfig = {
chainNamespace: ChainNamespace.EIP155,
chainId: '0x2105', // hex of 8453
rpcTarget: '`https://mainnet.base.org`',
// Avoid using public rpcTarget in production.
// Use services like Infura
displayName: 'Base',
blockExplorer: 'https://basescan.org/',
ticker: 'ETH',
tickerName: 'ETH',
}
const chainConfig = {
chainNamespace: ChainNamespace.EIP155,
chainId: '0x14A34', // hex of 84531
rpcTarget: '`https://sepolia.base.org`',
// Avoid using public rpcTarget in production.
// Use services like Infura
displayName: 'Base Sepolia',
blockExplorer: 'https://sepolia-explorer.base.org/',
ticker: 'ETH',
tickerName: 'ETH',
}
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);