Update expo example

Author: yashovardhan

demo/rn-expo-example/.gitignore

@@ -1,20 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
 node_modules/
+
+# Expo
 .expo/
 dist/
-npm-debug.*
+web-build/
+
+# Native
+*.orig.*
 *.jks
 *.p8
 *.p12
 *.key
 *.mobileprovision
-*.orig.*
-web-build/
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
 
 # macOS
 .DS_Store
+*.pem
 
-# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
-# The following patterns were generated by expo-cli
+# local env files
+.env*.local
 
-expo-env.d.ts
-# @end expo-cli
+# typescript
+*.tsbuildinfo

demo/rn-expo-example/App.tsx

@@ -0,0 +1,288 @@
+import React, { useState, useEffect } from "react";
+import { Button, Dimensions, ScrollView, StyleSheet, Text, View, TextInput } from "react-native";
+import Constants, { AppOwnership } from "expo-constants";
+import * as Linking from "expo-linking";
+import "@ethersproject/shims";
+import "./globals";
+// IMP START - Quick Start
+import * as WebBrowser from "expo-web-browser";
+import * as SecureStore from "expo-secure-store";
+import Web3Auth, { WEB3AUTH_NETWORK, LOGIN_PROVIDER, ChainNamespace } from "@web3auth/react-native-sdk";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+// IMP END - Quick Start
+import { ethers } from "ethers";
+
+// IMP START - Whitelist bundle ID
+const redirectUrl =
+  //@ts-ignore
+  Constants.appOwnership == AppOwnership.Expo || Constants.appOwnership == AppOwnership.Guest
+    ? Linking.createURL("web3auth", {})
+    : Linking.createURL("web3auth", { scheme: "web3authexpoexample" });
+// IMP END - Whitelist bundle ID
+
+// IMP START - Dashboard Registration
+const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
+// IMP END - Dashboard Registration
+
+// IMP START - SDK Initialization
+const chainConfig = {
+  chainNamespace: ChainNamespace.EIP155,
+  chainId: "0xaa36a7",
+  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
+  // Avoid using public rpcTarget in production.
+  // Use services like Infura, Quicknode etc
+  displayName: "Ethereum Sepolia Testnet",
+  blockExplorerUrl: "https://sepolia.etherscan.io",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+  decimals: 18,
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+
+const ethereumPrivateKeyProvider = new EthereumPrivateKeyProvider({
+  config: {
+    chainConfig,
+  },
+});
+
+const web3auth = new Web3Auth(WebBrowser, SecureStore, {
+  clientId,
+  // IMP START - Whitelist bundle ID
+  redirectUrl,
+  // IMP END - Whitelist bundle ID
+  network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or other networks
+});
+// IMP END - SDK Initialization
+
+export default function App() {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [provider, setProvider] = useState<any>(null);
+  const [console, setConsole] = useState<string>("");
+  const [email, setEmail] = useState<string>("");
+
+  useEffect(() => {
+    const init = async () => {
+      // IMP START - SDK Initialization
+      await web3auth.init();
+
+      if (web3auth.privKey) {
+        await ethereumPrivateKeyProvider.setupProvider(web3auth.privKey);
+        // IMP END - SDK Initialization
+        setProvider(ethereumPrivateKeyProvider);
+        setLoggedIn(true);
+      }
+    };
+    init();
+  }, []);
+
+  const login = async () => {
+    try {
+      if (!web3auth.ready) {
+        setConsole("Web3auth not initialized");
+        return;
+      }
+      if (!email) {
+        setConsole("Enter email first");
+        return;
+      }
+
+      setConsole("Logging in");
+      // IMP START - Login
+      await web3auth.login({
+        loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
+        extraLoginOptions: {
+          login_hint: email,
+        },
+      });
+
+      if (web3auth.privKey) {
+        await ethereumPrivateKeyProvider.setupProvider(web3auth.privKey);
+        // IMP END - Login
+        setProvider(ethereumPrivateKeyProvider);
+        uiConsole("Logged In");
+        setLoggedIn(true);
+      }
+    } catch (e: any) {
+      setConsole(e.message);
+    }
+  };
+
+  const logout = async () => {
+    if (!web3auth.ready) {
+      setConsole("Web3auth not initialized");
+      return;
+    }
+
+    setConsole("Logging out");
+    // IMP START - Logout
+    await web3auth.logout();
+    // IMP END - Logout
+
+    if (!web3auth.privKey) {
+      setProvider(null);
+      uiConsole("Logged out");
+      setLoggedIn(false);
+    }
+  };
+
+  // IMP START - Blockchain Calls
+  const getAccounts = async () => {
+    if (!provider) {
+      uiConsole("provider not set");
+      return;
+    }
+    setConsole("Getting 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);
+  };
+
+  const getBalance = async () => {
+    if (!provider) {
+      uiConsole("provider not set");
+      return;
+    }
+    setConsole("Fetching 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
+    );
+    uiConsole(balance);
+  };
+
+  const signMessage = async () => {
+    if (!provider) {
+      uiConsole("provider not set");
+      return;
+    }
+    setConsole("Signing 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);
+    uiConsole(signedMessage);
+  };
+  // IMP END - Blockchain Calls
+
+  const launchWalletServices = async () => {
+    if (!web3auth) {
+      setConsole("Web3auth not initialized");
+      return;
+    }
+
+    setConsole("Launch Wallet Services");
+    await web3auth.launchWalletServices(chainConfig);
+  };
+
+  const uiConsole = (...args: unknown[]) => {
+    setConsole(JSON.stringify(args || {}, null, 2) + "\n\n\n\n" + console);
+  };
+
+  const loggedInView = (
+    <View style={styles.buttonArea}>
+      <Button title="Get User Info" onPress={() => uiConsole(web3auth.userInfo())} />
+      <Button title="Get Accounts" onPress={() => getAccounts()} />
+      <Button title="Get Balance" onPress={() => getBalance()} />
+      <Button title="Sign Message" onPress={() => signMessage()} />
+      <Button title="Show Wallet UI" onPress={() => launchWalletServices()} />
+      <Button title="Log Out" onPress={logout} />
+    </View>
+  );
+
+  const unloggedInView = (
+    <View style={styles.buttonAreaLogin}>
+      <TextInput style={styles.inputEmail} placeholder="Enter email" onChangeText={setEmail} />
+      <Button title="Login with Web3Auth" onPress={login} />
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      {loggedIn ? loggedInView : unloggedInView}
+      <View style={styles.consoleArea}>
+        <Text style={styles.consoleText}>Console:</Text>
+        <ScrollView style={styles.console}>
+          <Text>{console}</Text>
+        </ScrollView>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingTop: 50,
+    paddingBottom: 30,
+  },
+  consoleArea: {
+    margin: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+  },
+  console: {
+    flex: 1,
+    backgroundColor: "#CCCCCC",
+    color: "#ffffff",
+    padding: 10,
+    width: Dimensions.get("window").width - 60,
+  },
+  consoleText: {
+    padding: 10,
+  },
+  buttonArea: {
+    flex: 2,
+    alignItems: "center",
+    justifyContent: "space-around",
+    paddingBottom: 30,
+  },
+  buttonAreaLogin: {
+    flex: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingBottom: 30,
+  },
+  inputEmail: {
+    height: 40,
+    width: 300,
+    borderColor: "gray",
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5,
+    marginBottom: 20,
+  },
+});

demo/rn-expo-example/README.md

@@ -83,9 +83,9 @@ android {
     buildToolsVersion rootProject.ext.buildToolsVersion
     compileSdk rootProject.ext.compileSdkVersion
 
-    namespace 'com.anonymous.rnexpoexample'
+    namespace 'com.web3authexpoexample'
     defaultConfig {
-        applicationId 'com.anonymous.rnexpoexample'
+        applicationId 'com.web3authexpoexample'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1