Skip to main content

Integrate Web3Auth with the Flow Blockchain in React Native

While using the Web3Auth React Native SDK, you get a EIP1193 provider, similar to the Metamask Provider. This provider can be used with libraries like web3.js, ethers.js etc. to make Flow blockchain calls like getting the user's account, fetching balance, sign transaction, send transaction, read from and write to the smart contract, etc. We have highlighted a few here to get you started quickly on that.

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​

Using eip155 as chainNamespace while initializing web3auth will provide an EIP1193 compatible provider as web3auth.provider after successful authentication.

Getting the chainConfig​

const chainConfig = {
  chainNamespace: ChainNamespace.EIP155,
  chainId: "0x2eb", // hex of 747
  rpcTarget: "https://mainnet.evm.nodes.onflow.org",
  // Avoid using public rpcTarget in production.
  // Use services provided by Flow or other node providers
  displayName: "EVM on Flow",
  blockExplorer: "https://evm.flowscan.io/",
  ticker: "FLOW",
  tickerName: "FLOW",
};

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

Read the current Bitcoin price from the FTSO system​

Flow provides a native decentralized oracle system called FTSO (Flow Time Series Oracle) to fetch the current price of an asset.

/*
  Use code from the above Initializing Provider here
*/

// web3 is const web3 = new Web3(web3authProvider); from above.

const contractABI =
  '[{"type":"constructor","stateMutability":"nonpayable","inputs":[]},{"type":"event","name":"GovernanceCallTimelocked","inputs":[{"type":"bytes4","name":"selector","internalType":"bytes4","indexed":false},{"type":"uint256","name":"allowedAfterTimestamp","internalType":"uint256","indexed":false},{"type":"bytes","name":"encodedCall","internalType":"bytes","indexed":false}],"anonymous":false},{"type":"event","name":"GovernanceInitialised","inputs":[{"type":"address","name":"initialGovernance","internalType":"address","indexed":false}],"anonymous":false},{"type":"event","name":"GovernedProductionModeEntered","inputs":[{"type":"address","name":"governanceSettings","internalType":"address","indexed":false}],"anonymous":false},{"type":"event","name":"TimelockedGovernanceCallCanceled","inputs":[{"type":"bytes4","name":"selector","internalType":"bytes4","indexed":false},{"type":"uint256","name":"timestamp","internalType":"uint256","indexed":false}],"anonymous":false},{"type":"event","name":"TimelockedGovernanceCallExecuted","inputs":[{"type":"bytes4","name":"selector","internalType":"bytes4","indexed":false},{"type":"uint256","name":"timestamp","internalType":"uint256","indexed":false}],"anonymous":false},{"type":"function","stateMutability":"nonpayable","outputs":[{"type":"uint256","name":"_assetIndex","internalType":"uint256"}],"name":"addFtso","inputs":[{"type":"address","name":"_ftsoContract","internalType":"contract IIFtso"}]},{"type":"function","stateMutability":"nonpayable","outputs":[],"name":"cancelGovernanceCall","inputs":[{"type":"bytes4","name":"_selector","internalType":"bytes4"}]},{"type":"function","stateMutability":"nonpayable","outputs":[],"name":"executeGovernanceCall","inputs":[{"type":"bytes4","name":"_selector","internalType":"bytes4"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"address","name":"","internalType":"contract IIFtsoManager"}],"name":"ftsoManager","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"address","name":"_addressUpdater","internalType":"address"}],"name":"getAddressUpdater","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"tuple[]","name":"","internalType":"struct IFtsoRegistry.PriceInfo[]","components":[{"type":"uint256","name":"ftsoIndex","internalType":"uint256"},{"type":"uint256","name":"price","internalType":"uint256"},{"type":"uint256","name":"decimals","internalType":"uint256"},{"type":"uint256","name":"timestamp","internalType":"uint256"}]}],"name":"getAllCurrentPrices","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"address[]","name":"_ftsos","internalType":"contract IIFtso[]"}],"name":"getAllFtsos","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"uint256","name":"_price","internalType":"uint256"},{"type":"uint256","name":"_timestamp","internalType":"uint256"}],"name":"getCurrentPrice","inputs":[{"type":"string","name":"_symbol","internalType":"string"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"uint256","name":"_price","internalType":"uint256"},{"type":"uint256","name":"_timestamp","internalType":"uint256"}],"name":"getCurrentPrice","inputs":[{"type":"uint256","name":"_assetIndex","internalType":"uint256"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"uint256","name":"_price","internalType":"uint256"},{"type":"uint256","name":"_timestamp","internalType":"uint256"},{"type":"uint256","name":"_assetPriceUsdDecimals","internalType":"uint256"}],"name":"getCurrentPriceWithDecimals","inputs":[{"type":"uint256","name":"_assetIndex","internalType":"uint256"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"uint256","name":"_price","internalType":"uint256"},{"type":"uint256","name":"_timestamp","internalType":"uint256"},{"type":"uint256","name":"_assetPriceUsdDecimals","internalType":"uint256"}],"name":"getCurrentPriceWithDecimals","inputs":[{"type":"string","name":"_symbol","internalType":"string"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"tuple[]","name":"","internalType":"struct IFtsoRegistry.PriceInfo[]","components":[{"type":"uint256","name":"ftsoIndex","internalType":"uint256"},{"type":"uint256","name":"price","internalType":"uint256"},{"type":"uint256","name":"decimals","internalType":"uint256"},{"type":"uint256","name":"timestamp","internalType":"uint256"}]}],"name":"getCurrentPricesByIndices","inputs":[{"type":"uint256[]","name":"_indices","internalType":"uint256[]"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"tuple[]","name":"","internalType":"struct IFtsoRegistry.PriceInfo[]","components":[{"type":"uint256","name":"ftsoIndex","internalType":"uint256"},{"type":"uint256","name":"price","internalType":"uint256"},{"type":"uint256","name":"decimals","internalType":"uint256"},{"type":"uint256","name":"timestamp","internalType":"uint256"}]}],"name":"getCurrentPricesBySymbols","inputs":[{"type":"string[]","name":"_symbols","internalType":"string[]"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"address","name":"_activeFtso","internalType":"contract IIFtso"}],"name":"getFtso","inputs":[{"type":"uint256","name":"_assetIndex","internalType":"uint256"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"address","name":"_activeFtso","internalType":"contract IIFtso"}],"name":"getFtsoBySymbol","inputs":[{"type":"string","name":"_symbol","internalType":"string"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"address[5]","name":"_ftsoAddressHistory","internalType":"contract IIFtso[5]"}],"name":"getFtsoHistory","inputs":[{"type":"uint256","name":"_assetIndex","internalType":"uint256"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"uint256","name":"_assetIndex","internalType":"uint256"}],"name":"getFtsoIndex","inputs":[{"type":"string","name":"_symbol","internalType":"string"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"string","name":"_symbol","internalType":"string"}],"name":"getFtsoSymbol","inputs":[{"type":"uint256","name":"_assetIndex","internalType":"uint256"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"address[]","name":"_ftsos","internalType":"contract IFtsoGenesis[]"}],"name":"getFtsos","inputs":[{"type":"uint256[]","name":"_assetIndices","internalType":"uint256[]"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"address[]","name":"_ftsos","internalType":"contract IIFtso[]"}],"name":"getSupportedFtsos","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"uint256[]","name":"_supportedIndices","internalType":"uint256[]"}],"name":"getSupportedIndices","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"uint256[]","name":"_supportedIndices","internalType":"uint256[]"},{"type":"address[]","name":"_ftsos","internalType":"contract IIFtso[]"}],"name":"getSupportedIndicesAndFtsos","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"uint256[]","name":"_supportedIndices","internalType":"uint256[]"},{"type":"string[]","name":"_supportedSymbols","internalType":"string[]"}],"name":"getSupportedIndicesAndSymbols","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"uint256[]","name":"_supportedIndices","internalType":"uint256[]"},{"type":"string[]","name":"_supportedSymbols","internalType":"string[]"},{"type":"address[]","name":"_ftsos","internalType":"contract IIFtso[]"}],"name":"getSupportedIndicesSymbolsAndFtsos","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"string[]","name":"_supportedSymbols","internalType":"string[]"}],"name":"getSupportedSymbols","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"string[]","name":"_supportedSymbols","internalType":"string[]"},{"type":"address[]","name":"_ftsos","internalType":"contract IIFtso[]"}],"name":"getSupportedSymbolsAndFtsos","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"address","name":"","internalType":"address"}],"name":"governance","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"address","name":"","internalType":"contract IGovernanceSettings"}],"name":"governanceSettings","inputs":[]},{"type":"function","stateMutability":"nonpayable","outputs":[],"name":"initialise","inputs":[{"type":"address","name":"_initialGovernance","internalType":"address"}]},{"type":"function","stateMutability":"nonpayable","outputs":[],"name":"initialiseRegistry","inputs":[{"type":"address","name":"_addressUpdater","internalType":"address"}]},{"type":"function","stateMutability":"view","outputs":[{"type":"bool","name":"","internalType":"bool"}],"name":"productionMode","inputs":[]},{"type":"function","stateMutability":"nonpayable","outputs":[],"name":"removeFtso","inputs":[{"type":"address","name":"_ftso","internalType":"contract IIFtso"}]},{"type":"function","stateMutability":"nonpayable","outputs":[],"name":"switchToProductionMode","inputs":[]},{"type":"function","stateMutability":"view","outputs":[{"type":"uint256","name":"allowedAfterTimestamp","internalType":"uint256"},{"type":"bytes","name":"encodedCall","internalType":"bytes"}],"name":"timelockedCalls","inputs":[{"type":"bytes4","name":"","internalType":"bytes4"}]},{"type":"function","stateMutability":"nonpayable","outputs":[],"name":"updateContractAddresses","inputs":[{"type":"bytes32[]","name":"_contractNameHashes","internalType":"bytes32[]"},{"type":"address[]","name":"_contractAddresses","internalType":"address[]"}]}]';
const contractAddress = "0x13DC2b5053857AE17a4f95aFF55530b267F3E040";
const contract = new web3.eth.Contract(JSON.parse(contractABI), contractAddress);

// Read current pricing data from FTSO system
const [btcPriceInfo, flowPriceInfo] = await contract.methods
  .getCurrentPricesBySymbols(["BTC", "FLR"])
  .call();
const btcPrice = btcPriceInfo.price;
const flowPrice = flowPriceInfo.price;