update example

Author: chaitanyapotti

demo/rn-bare-example/App.tsx

@@ -1,120 +1,109 @@
-import * as WebBrowser from '@toruslabs/react-native-web-browser';
+import * as WebBrowser from "@toruslabs/react-native-web-browser";
 
-import {
-  Button,
-  Dimensions,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
-import Web3Auth, {
-  IWeb3Auth,
-  LOGIN_PROVIDER,
-  OpenloginUserInfo,
-} from '@web3auth/react-native-sdk';
-import { useEffect, useState } from 'react';
+import { Button, Dimensions, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
+import Web3Auth, { IWeb3Auth, LOGIN_PROVIDER, OpenloginUserInfo } from "@web3auth/react-native-sdk";
+import { useEffect, useState } from "react";
 
-import { ChainNamespace } from '@web3auth/react-native-sdk';
-import EncryptedStorage from 'react-native-encrypted-storage';
-import RPC from './ethersRPC'; // for using ethers.js
+import { ChainNamespace } from "@web3auth/react-native-sdk";
+import EncryptedStorage from "react-native-encrypted-storage";
+import RPC from "./ethersRPC"; // for using ethers.js
 
-const scheme = 'web3authrnbareexample'; // Or your desired app redirection scheme
+const scheme = "web3authrnbareexample"; // Or your desired app redirection scheme
 const resolvedRedirectUrl = `${scheme}://openlogin`;
-const clientId =
-  'BFuUqebV5I8Pz5F7a5A2ihW7YVmbv_OHXnHYDv6OltAD5NGr6e-ViNvde3U4BHdn6HvwfkgobhVu4VwC-OSJkik';
+const clientId = "BFuUqebV5I8Pz5F7a5A2ihW7YVmbv_OHXnHYDv6OltAD5NGr6e-ViNvde3U4BHdn6HvwfkgobhVu4VwC-OSJkik";
 
 const chainConfig = {
   chainNamespace: ChainNamespace.EIP155,
-  chainId: '0xaa36a7',
-  rpcTarget: 'https://rpc.ankr.com/eth_sepolia',
+  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',
+  displayName: "Ethereum Sepolia Testnet",
+  blockExplorerUrl: "https://sepolia.etherscan.io",
+  ticker: "ETH",
+  tickerName: "Ethereum",
   decimals: 18,
-  logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png',
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
 };
 
 export default function App() {
-  const [userInfo, setUserInfo] = useState<OpenloginUserInfo | undefined>();
-  const [key, setKey] = useState<string | undefined>('');
-  const [console, setConsole] = useState<string>('');
+  const [userInfo, setUserInfo] = useState<OpenloginUserInfo | null>(null);
+  const [key, setKey] = useState<string | undefined>("");
+  const [localConsole, setLocalConsole] = useState<string>("");
   const [web3auth, setWeb3Auth] = useState<IWeb3Auth | null>(null);
-  const [email, setEmail] = useState('[email protected]');
+  const [email, setEmail] = useState("[email protected]");
 
   const login = async () => {
     try {
       if (!web3auth) {
-        setConsole('Web3auth not initialized');
+        setLocalConsole("Web3auth not initialized");
         return;
       }
 
-      setConsole('Logging in');
+      setLocalConsole("Logging in");
       await web3auth.login({
         loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
         extraLoginOptions: {
           login_hint: email,
         },
       });
-      setConsole(`Logged in ${web3auth.privKey}`);
+      setLocalConsole(`Logged in ${web3auth.privKey}`);
       if (web3auth.privKey) {
-        setUserInfo(web3auth.userInfo());
+        const userInfo = web3auth.userInfo();
+        if (userInfo) setUserInfo(userInfo);
         setKey(web3auth.privKey);
-        uiConsole('Logged In');
+        uiConsole("Logged In");
       }
     } catch (e: unknown) {
-      setConsole((e as Error).message);
+      console.error(e);
+      setLocalConsole((e as Error).message);
     }
   };
 
   const logout = async () => {
     if (!web3auth) {
-      setConsole('Web3auth not initialized');
+      setLocalConsole("Web3auth not initialized");
       return;
     }
 
-    setConsole('Logging out');
+    setLocalConsole("Logging out");
     await web3auth.logout();
 
     if (!web3auth.privKey) {
-      setUserInfo(undefined);
-      setKey('');
-      uiConsole('Logged out');
+      setUserInfo(null);
+      setKey("");
+      uiConsole("Logged out");
     }
   };
 
   const enableMFA = async () => {
     if (!web3auth) {
-      setConsole('Web3auth not initialized');
+      setLocalConsole("Web3auth not initialized");
       return;
     }
 
-    setConsole('Enable MFA');
+    setLocalConsole("Enable MFA");
     await web3auth.enableMFA();
-    uiConsole('MFA enabled');
+    uiConsole("MFA enabled");
   };
 
   const launchWalletSerices = async () => {
     if (!web3auth) {
-      setConsole('Web3auth not initialized');
+      setLocalConsole("Web3auth not initialized");
       return;
     }
 
-    setConsole('Launch Wallet Services');
+    setLocalConsole("Launch Wallet Services");
     await web3auth.launchWalletServices(chainConfig);
   };
 
   const requestSignature = async () => {
     if (!web3auth) {
-      setConsole('Web3auth not initialized');
+      setLocalConsole("Web3auth not initialized");
       return;
     }
     if (!key) {
-      setConsole('User not logged in');
+      setLocalConsole("User not logged in");
       return;
     }
 
@@ -127,7 +116,7 @@ export default function App() {
     //   },
     //   null,
     // ];
-    const params = ['Hello World', address];
+    const params = ["Hello World", address];
     // const params = [{ }];
     // params.push('Hello World');
     // params.push(address);
@@ -200,92 +189,87 @@ export default function App() {
     //   },
     // ];
 
-    setConsole('Request Signature');
-    const res = await web3auth.request(chainConfig, 'personal_sign', params);
+    setLocalConsole("Request Signature");
+    const res = await web3auth.request(chainConfig, "personal_sign", params);
     uiConsole(res);
   };
 
   useEffect(() => {
     const init = async () => {
       const auth = new Web3Auth(WebBrowser, EncryptedStorage, {
         clientId,
-        network: 'sapphire_devnet', // or other networks
+        network: "sapphire_devnet", // or other networks
         useCoreKitKey: false,
         loginConfig: {},
         enableLogging: true,
-        buildEnv: 'testing',
+        buildEnv: "testing",
         redirectUrl: resolvedRedirectUrl,
       });
       setWeb3Auth(auth);
       await auth.init();
       if (auth?.privKey) {
-        uiConsole('Re logged in');
-        setUserInfo(auth.userInfo());
+        uiConsole("Re logged in");
+        const userInfo = auth.userInfo();
+        if (userInfo) setUserInfo(userInfo);
         setKey(auth.privKey);
       }
     };
     init();
   }, []);
 
   const getChainId = async () => {
-    setConsole('Getting chain id');
+    setLocalConsole("Getting chain id");
     const networkDetails = await RPC.getChainId();
     uiConsole(networkDetails);
   };
 
   const getAccounts = async () => {
     if (!key) {
-      setConsole('User not logged in');
+      setLocalConsole("User not logged in");
       return;
     }
-    setConsole('Getting account');
+    setLocalConsole("Getting account");
     const address = await RPC.getAccounts(key);
     uiConsole(address);
   };
   const getBalance = async () => {
     if (!key) {
-      setConsole('User not logged in');
+      setLocalConsole("User not logged in");
       return;
     }
-    setConsole('Fetching balance');
+    setLocalConsole("Fetching balance");
     const balance = await RPC.getBalance(key);
     uiConsole(balance);
   };
   const sendTransaction = async () => {
     if (!key) {
-      setConsole('User not logged in');
+      setLocalConsole("User not logged in");
       return;
     }
-    setConsole('Sending transaction');
+    setLocalConsole("Sending transaction");
     const tx = await RPC.sendTransaction(key);
     uiConsole(tx);
   };
   const signMessage = async () => {
     if (!key) {
-      setConsole('User not logged in');
+      setLocalConsole("User not logged in");
       return;
     }
-    setConsole('Signing message');
+    setLocalConsole("Signing message");
     const message = await RPC.signMessage(key);
     uiConsole(message);
   };
 
   const uiConsole = (...args: unknown[]) => {
-    setConsole(JSON.stringify(args || {}, null, 2) + '\n\n\n\n' + console);
+    setLocalConsole(JSON.stringify(args || {}, null, 2) + "\n\n\n\n" + localConsole);
   };
 
   const loggedInView = (
     <View style={styles.buttonArea}>
       <Button title="Get User Info" onPress={() => uiConsole(userInfo)} />
       <Button title="Enable MFA" onPress={() => enableMFA()} />
-      <Button
-        title="launch Wallet Services"
-        onPress={() => launchWalletSerices()}
-      />
-      <Button
-        title="Request Signature from Wallet Services"
-        onPress={() => requestSignature()}
-      />
+      <Button title="launch Wallet Services" onPress={() => launchWalletSerices()} />
+      <Button title="Request Signature from Wallet Services" onPress={() => requestSignature()} />
       <Button title="Get Chain ID" onPress={() => getChainId()} />
       <Button title="Get Accounts" onPress={() => getAccounts()} />
       <Button title="Get Balance" onPress={() => getBalance()} />
@@ -300,7 +284,7 @@ export default function App() {
     <View style={styles.buttonArea}>
       <TextInput
         editable
-        onChangeText={text => setEmail(text)}
+        onChangeText={(text) => setEmail(text)}
         value={email}
         // eslint-disable-next-line react-native/no-inline-styles
         style={{ padding: 10 }}
@@ -315,7 +299,7 @@ export default function App() {
       <View style={styles.consoleArea}>
         <Text style={styles.consoleText}>Console:</Text>
         <ScrollView style={styles.console}>
-          <Text>{console}</Text>
+          <Text>{localConsole}</Text>
         </ScrollView>
       </View>
     </View>
@@ -325,32 +309,32 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
     paddingTop: 50,
     paddingBottom: 30,
   },
   consoleArea: {
     margin: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     flex: 1,
   },
   console: {
     flex: 1,
-    backgroundColor: '#CCCCCC',
-    color: '#ffffff',
+    backgroundColor: "#CCCCCC",
+    color: "#ffffff",
     padding: 10,
-    width: Dimensions.get('window').width - 60,
+    width: Dimensions.get("window").width - 60,
   },
   consoleText: {
     padding: 10,
   },
   buttonArea: {
     flex: 2,
-    alignItems: 'center',
-    justifyContent: 'space-around',
+    alignItems: "center",
+    justifyContent: "space-around",
     paddingBottom: 30,
   },
 });