Merge pull request #1283 from Web3Auth/rn-v8-upgrade

Update Web3Auth React Native SDK Examples to v8

Author: yashovardhan

react-native/rn-bare-aggregate-verifier-example/App.tsx

@@ -1,16 +1,16 @@
-import React, { useEffect, useState } from "react";
-import { StyleSheet, Text, View, Button, ScrollView, Dimensions } from "react-native";
 import * as WebBrowser from "@toruslabs/react-native-web-browser";
-import EncryptedStorage from "react-native-encrypted-storage";
-import Web3Auth, { OPENLOGIN_NETWORK, ChainNamespace } from "@web3auth/react-native-sdk";
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import Web3Auth, { ChainNamespace, WEB3AUTH_NETWORK } from "@web3auth/react-native-sdk";
+import React, { useEffect, useState } from "react";
+import { Button, Dimensions, ScrollView, StyleSheet, Text, View } from "react-native";
+import EncryptedStorage from "react-native-encrypted-storage";
 
 // import RPC from './web3RPC'; // for using web3.js
 // import RPC from "./viemRPC"; // for using viem
 import RPC from "./ethersRPC"; // for using ethers.js
 
 const scheme = "web3authrnbareaggregateexample"; // Or your desired app redirection scheme
-const redirectUrl = `${scheme}://openlogin`;
+const redirectUrl = `${scheme}://auth`;
 const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
 
 const chainConfig = {
@@ -35,9 +35,10 @@ const ethereumPrivateKeyProvider = new EthereumPrivateKeyProvider({
 
 const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
   clientId,
-  network: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET, // or other networks
+  network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or other networks
   redirectUrl,
   useCoreKitKey: true,
+  privateKeyProvider: ethereumPrivateKeyProvider,
   loginConfig: {
     google: {
       verifier: "aggregate-sapphire",
@@ -84,8 +85,7 @@ export default function App() {
       // IMP START - SDK Initialization
       await web3auth.init();
 
-      if (web3auth.privKey) {
-        await ethereumPrivateKeyProvider.setupProvider(web3auth.privKey);
+      if (web3auth.connected) {
         // IMP END - SDK Initialization
         setProvider(ethereumPrivateKeyProvider);
         setLoggedIn(true);
@@ -103,8 +103,7 @@ export default function App() {
       });
 
       uiConsole("Logged In");
-      if (web3auth.privKey) {
-        await ethereumPrivateKeyProvider.setupProvider(web3auth.privKey);
+      if (web3auth.connected) {
         // IMP END - Login
         setProvider(ethereumPrivateKeyProvider);
         uiConsole("Logged In");
@@ -124,7 +123,7 @@ export default function App() {
     setConsole("Logging out");
     await web3auth.logout();
 
-    if (!web3auth.privKey) {
+    if (!web3auth.connected) {
       setProvider(null);
       uiConsole("Logged out");
       setLoggedIn(false);
@@ -301,7 +300,7 @@ export default function App() {
   };
 
   const uiConsole = (...args: unknown[]) => {
-    setConsole(JSON.stringify(args || {}, null, 2) + "\n\n\n\n" + console);
+    setConsole(`${JSON.stringify(args || {}, null, 2)}\n\n\n\n${console}`);
   };
 
   const loggedInView = (

react-native/rn-bare-aggregate-verifier-example/globals.js

@@ -1,14 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 global.Buffer = require("buffer").Buffer;
 
+// eslint-disable-next-line import/first
+import { install } from "react-native-quick-crypto";
+
+install();
+
 // Needed so that 'stream-http' chooses the right default protocol.
 global.location = {
-    protocol: "file:",
+  protocol: "file:",
 };
 
 global.process.version = "v16.0.0";
 if (!global.process.version) {
-    global.process = require("process");
-    console.log({ process: global.process });
+  global.process = require("process");
+  // eslint-disable-next-line no-console
+  console.log({ process: global.process });
 }
 
-process.browser = true;
+process.browser = true;

react-native/rn-bare-aggregate-verifier-example/ios/Podfile.lock

@@ -7,6 +7,7 @@ PODS:
   - hermes-engine (0.74.2):
     - hermes-engine/Pre-built (= 0.74.2)
   - hermes-engine/Pre-built (0.74.2)
+  - OpenSSL-Universal (3.3.2000)
   - RCT-Folly (2024.01.01.00):
     - boost
     - DoubleConversion
@@ -939,6 +940,29 @@ PODS:
     - React-Core
   - react-native-get-random-values (1.11.0):
     - React-Core
+  - react-native-quick-crypto (0.7.6):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - OpenSSL-Universal
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-web-browser (1.1.0):
     - React-Core
   - React-nativeconfig (0.74.2)
@@ -1208,6 +1232,7 @@ DEPENDENCIES:
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - react-native-encrypted-storage (from `../node_modules/react-native-encrypted-storage`)
   - react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
+  - react-native-quick-crypto (from `../node_modules/react-native-quick-crypto`)
   - "react-native-web-browser (from `../node_modules/@toruslabs/react-native-web-browser`)"
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1236,6 +1261,7 @@ DEPENDENCIES:
 
 SPEC REPOS:
   trunk:
+    - OpenSSL-Universal
     - SocketRocket
 
 EXTERNAL SOURCES:
@@ -1304,6 +1330,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-encrypted-storage"
   react-native-get-random-values:
     :path: "../node_modules/react-native-get-random-values"
+  react-native-quick-crypto:
+    :path: "../node_modules/react-native-quick-crypto"
   react-native-web-browser:
     :path: "../node_modules/@toruslabs/react-native-web-browser"
   React-nativeconfig:
@@ -1362,6 +1390,7 @@ SPEC CHECKSUMS:
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
   glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
   hermes-engine: 01d3e052018c2a13937aca1860fbedbccd4a41b7
+  OpenSSL-Universal: b60a3702c9fea8b3145549d421fdb018e53ab7b4
   RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
   RCTDeprecation: b03c35057846b685b3ccadc9bfe43e349989cdb2
   RCTRequired: 194626909cfa8d39ca6663138c417bc6c431648c
@@ -1388,6 +1417,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: bf56147c9775491e53122a94c423ac201417e326
   react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
   react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
+  react-native-quick-crypto: 3d1d972bc231e88073b3821dbaf89f84d8208200
   react-native-web-browser: 087b454e1e94b58b40ba73f54251d77486144d19
   React-nativeconfig: 9f223cd321823afdecf59ed00861ab2d69ee0fc1
   React-NativeModulesApple: ff7efaff7098639db5631236cfd91d60abff04c0
@@ -1413,7 +1443,7 @@ SPEC CHECKSUMS:
   React-utils: 4476b7fcbbd95cfd002f3e778616155241d86e31
   ReactCommon: ecad995f26e0d1e24061f60f4e5d74782f003f12
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 2f71ecf38d934aecb366e686278102a51679c308
+  Yoga: ae3c32c514802d30f687a04a6a35b348506d411f
 
 PODFILE CHECKSUM: cdf505c86a042435106cb526157d127c0fa9785c