Merge pull request #97 from Web3Auth/feat/expo-example

expo example updates

Author: chaitanyapotti

demo/rn-bare-example/package.json

@@ -34,7 +34,6 @@
     "jest": "^29.7.0",
     "prettier": "^3.3.2",
     "process": "^0.11.10",
-    "react-native-get-random-values": "^1.11.0",
     "react-native-quick-crypto": "^0.7.0",
     "react-test-renderer": "18.2.0",
     "readable-stream": "^4.5.2",

demo/rn-expo-example/android/app/src/main/AndroidManifest.xml

@@ -24,7 +24,7 @@
         <action android:name="android.intent.action.VIEW"/>
         <category android:name="android.intent.category.DEFAULT"/>
         <category android:name="android.intent.category.BROWSABLE"/>
-        <data android:scheme="myapp"/>
+        <data android:scheme="com.anonymous.rnexpoexample"/>
         <data android:scheme="com.anonymous.rnexpoexample"/>
       </intent-filter>
     </activity>

demo/rn-expo-example/android/app/src/main/res/values/styles.xml

@@ -4,7 +4,7 @@
     <item name="android:editTextStyle">@style/ResetEditText</item>
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+    <item name="android:statusBarColor">#ffffff</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">
     <item name="android:padding">0dp</item>

demo/rn-expo-example/app/_layout.tsx

@@ -4,37 +4,54 @@ import * as WebBrowser from "expo-web-browser";
 
 import { Button, Dimensions, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
 import Constants, { AppOwnership } from "expo-constants";
-import React, { useEffect, useState } from "react";
-import Web3Auth, { ChainNamespace, LOGIN_PROVIDER } from "@web3auth/react-native-sdk";
+import { useEffect, useState } from "react";
+import Web3Auth, { ChainNamespace, LOGIN_PROVIDER, OpenloginUserInfo } from "@web3auth/react-native-sdk";
 
 import RPC from "../ethersRPC"; // for using ethers.js
 
+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 resolvedRedirectUrl =
-  Constants.appOwnership == AppOwnership.Expo || Constants.appOwnership == AppOwnership.Guest
+  Constants.appOwnership == AppOwnership.Expo
     ? Linking.createURL("web3auth", {})
     : Linking.createURL("web3auth", { scheme: "com.anonymous.rnexpoexample" });
 
-const clientId = "BILxiaDYbvlcwNdeJsyXEUDieKdYPIHfSdvEabzidwYZ3zaGsEN6noiM5u8f-5wuIksJcOn-Ga1LWNqen1eUZbw";
+const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
 
 export default function App() {
   const [key, setKey] = useState("");
-  const [userInfo, setUserInfo] = useState("");
+  const [userInfo, setUserInfo] = useState({});
   const [console, setConsole] = useState("");
-  const [web3auth, setWeb3Auth] = useState(null);
-  const [email, setEmail] = React.useState("[email protected]");
+  const [web3auth, setWeb3Auth] = useState<Web3Auth | null>(null);
+  const [email, setEmail] = useState("[email protected]");
 
   useEffect(() => {
     const init = async () => {
       try {
         const auth = new Web3Auth(WebBrowser, SecureStore, {
           clientId,
-          network: "cyan", // or other networks
+          network: "sapphire_mainnet", // or other networks
+          redirectUrl: resolvedRedirectUrl,
+          enableLogging: true,
+          buildEnv: "testing",
         });
         setWeb3Auth(auth);
         await auth.init();
         if (auth?.privKey) {
           uiConsole("Re logged in");
-          setUserInfo(auth.userInfo());
+          setUserInfo(auth.userInfo() as OpenloginUserInfo);
           setKey(auth.privKey);
         }
       } catch (e) {
@@ -47,16 +64,16 @@ export default function App() {
   const login = async () => {
     try {
       setConsole("Logging in");
-      await web3auth.login({
+      await web3auth?.login({
         loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
         redirectUrl: resolvedRedirectUrl,
         extraLoginOptions: {
           login_hint: email,
         },
       });
 
-      if (web3auth.privKey) {
-        setUserInfo(web3auth.userInfo());
+      if (web3auth?.privKey) {
+        setUserInfo(web3auth?.userInfo() as OpenloginUserInfo);
         setKey(web3auth.privKey);
         uiConsole("Logged In");
       }
@@ -84,13 +101,7 @@ export default function App() {
     }
 
     setConsole("Launch Wallet Services");
-    await web3auth.launchWalletServices({
-      chainNamespace: ChainNamespace.EIP155,
-      decimals: 18,
-      chainId: "0x1",
-      rpcTarget: "https://mainnet.infura.io/v3/daeee53504be4cd3a997d4f2718d33e0",
-      ticker: "ETH",
-    });
+    await web3auth.launchWalletServices(chainConfig);
   };
 
   const logout = async () => {
@@ -103,7 +114,7 @@ export default function App() {
     await web3auth.logout();
 
     if (!web3auth.privKey) {
-      setUserInfo(undefined);
+      setUserInfo({});
       setKey("");
       uiConsole("Logged out");
     }
@@ -233,7 +244,7 @@ export default function App() {
     uiConsole(res);
   };
 
-  const uiConsole = (...args) => {
+  const uiConsole = (...args: unknown[]) => {
     setConsole(`${JSON.stringify(args || {}, null, 2)}\n\n\n\n${console}`);
   };
 

demo/rn-expo-example/ethersRPC.js demo/rn-expo-example/ethersRPC.tsdemo/rn-expo-example/ethersRPC.js renamed to demo/rn-expo-example/ethersRPC.ts

@@ -14,17 +14,17 @@ const getChainId = async () => {
   }
 };
 
-const getAccounts = async (key) => {
+const getAccounts = async (key: string) => {
   try {
     const wallet = new ethers.Wallet(key);
-    const address = await wallet.address;
+    const address = wallet.address;
     return address;
   } catch (error) {
     return error;
   }
 };
 
-const getBalance = async (key) => {
+const getBalance = async (key: string) => {
   try {
     const ethersProvider = ethers.getDefaultProvider(providerUrl);
     const wallet = new ethers.Wallet(key, ethersProvider);
@@ -36,7 +36,7 @@ const getBalance = async (key) => {
   }
 };
 
-const sendTransaction = async (key) => {
+const sendTransaction = async (key: string) => {
   try {
     const ethersProvider = ethers.getDefaultProvider(providerUrl);
     const wallet = new ethers.Wallet(key, ethersProvider);
@@ -60,7 +60,7 @@ const sendTransaction = async (key) => {
   }
 };
 
-const signMessage = async (key) => {
+const signMessage = async (key: string) => {
   try {
     const ethersProvider = ethers.getDefaultProvider(providerUrl);
     const wallet = new ethers.Wallet(key, ethersProvider);

demo/rn-expo-example/globals.js

@@ -0,0 +1,17 @@
+import { install } from "react-native-quick-crypto";
+
+install();
+
+// Needed so that 'stream-http' chooses the right default protocol.
+// @ts-ignore
+global.location = {
+  protocol: "file:",
+};
+// @ts-ignore
+global.process.version = "v16.0.0";
+if (!global.process.version) {
+  global.process = require("process");
+  console.log({ process: global.process });
+}
+// @ts-ignore
+process.browser = true;

demo/rn-expo-example/globals.ts

@@ -1,7 +1,6 @@
+import "./globals";
 import "@ethersproject/shims";
 import "@expo/metro-runtime";
-import "react-native-get-random-values";
-import "./globals";
 
 import { App } from "expo-router/build/qualified-entry";
 import { renderRootComponent } from "expo-router/build/renderRootComponent";

demo/rn-expo-example/index.tsx

@@ -25,9 +25,7 @@ target 'rnexpoexample' do
     :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
     # An absolute path to your application root.
     :app_path => "#{Pod::Config.instance.installation_root}/..",
-    # Temporarily disable privacy file aggregation by default, until React
-    # Native 0.74.2 is released with fixes.
-    :privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] == 'true',
+    :privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
   )
 
   post_install do |installer|