Integrate Web3Auth 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 using npm or yarn:

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

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

PnP React Native SDK

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);

SFA JS SDK

import React, {useEffect, useState} from 'react';
import '@ethersproject/shims';
import EncryptedStorage from 'react-native-encrypted-storage';
import {CHAIN_NAMESPACES, IProvider, WEB3AUTH_NETWORK} from '@web3auth/base';

// IMP START - Quick Start
import {Web3Auth, SDK_MODE, decodeToken} from '@web3auth/single-factor-auth';
import {EthereumPrivateKeyProvider} from '@web3auth/ethereum-provider';
// IMP END - Quick Start
import {ethers} from 'ethers';

// IMP START - Chain Config
const chainConfig = {
  chainId: '0x1',
  displayName: 'Ethereum Mainnet',
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  tickerName: 'Ethereum',
  ticker: 'ETH',
  decimals: 18,
  rpcTarget: 'https://rpc.ankr.com/eth',
  blockExplorerUrl: 'https://etherscan.io',
  logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png',
};
// IMP END - Chain Config

// IMP START - SDK Initialization
const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: {chainConfig},
});

const web3auth = new Web3Auth({
  clientId, // Get your Client ID from Web3Auth Dashboard
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  privateKeyProvider,
  storage: EncryptedStorage,
  mode: SDK_MODE.REACT_NATIVE,
});
// IMP END - SDK Initialization

export default function App() {
  const [provider, setProvider] = useState<IProvider | null>(null);
  const [loggedIn, setLoggedIn] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [userInfo, setUserInfo] = useState<string>('');
  const [consoleUI, setConsoleUI] = useState<string>('');

  useEffect(() => {
    const init = async () => {
      try {
        // IMP START - SDK Initialization
        await web3auth.init();
        setProvider(web3auth.provider);
        // IMP END - SDK Initialization

        if (web3auth.connected) {
          setLoggedIn(true);
        }
      } catch (error) {
        uiConsole(error, 'mounted caught');
      }
    };
    init();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

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);