Update bare react native example

Author: yashovardhan

demo/rn-bare-example/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: '@react-native',
 };

demo/rn-bare-example/.gitignore

@@ -20,7 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-ios/.xcode.env.local
+**/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -56,8 +56,19 @@ yarn-error.log
 *.jsbundle
 
 # Ruby / CocoaPods
-/ios/Pods/
+**/Pods/
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

demo/rn-bare-example/.node-version

@@ -1 +1 @@
-{}
+{}

demo/rn-bare-example/.watchmanconfig

@@ -9,14 +9,14 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';
 import Web3Auth, {
   IWeb3Auth,
   LOGIN_PROVIDER,
   OpenloginUserInfo,
 } from '@web3auth/react-native-sdk';
 
-import { ChainNamespace } from '@web3auth/react-native-sdk';
+import {ChainNamespace} from '@web3auth/react-native-sdk';
 import EncryptedStorage from 'react-native-encrypted-storage';
 import RPC from './ethersRPC'; // for using ethers.js
 
@@ -30,7 +30,7 @@ export default function App() {
   const [key, setKey] = useState<string | undefined>('');
   const [console, setConsole] = useState<string>('');
   const [web3auth, setWeb3Auth] = useState<IWeb3Auth | null>(null);
-  const [email, setEmail] = React.useState('[email protected]');
+  const [email, setEmail] = React.useState('[email protected]');
 
   const login = async () => {
     try {
@@ -57,7 +57,6 @@ export default function App() {
         uiConsole('Logged In');
       }
     } catch (e: unknown) {
-      console.log(e, (e as Error).stack);
       setConsole((e as Error).message);
     }
   };
@@ -86,8 +85,8 @@ export default function App() {
 
     setConsole('Enable MFA');
     await web3auth.enableMFA();
-    uiConsole('MFA enabled')
-  }
+    uiConsole('MFA enabled');
+  };
 
   const launchWallerSerices = async () => {
     if (!web3auth) {
@@ -96,23 +95,27 @@ export default function App() {
     }
 
     setConsole('Launch Wallet Services');
-    await web3auth.launchWalletServices({
-      loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
-      redirectUrl: resolvedRedirectUrl,
-      mfaLevel: 'default',
-      curve: 'secp256k1',
-      extraLoginOptions: {
-        login_hint: email,
-        connection: 'email',
+    await web3auth.launchWalletServices(
+      {
+        loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
+        redirectUrl: resolvedRedirectUrl,
+        mfaLevel: 'default',
+        curve: 'secp256k1',
+        extraLoginOptions: {
+          login_hint: email,
+          connection: 'email',
+        },
       },
-    }, {
-      chainNamespace: ChainNamespace.EIP155,
-      decimals: 18,
-      chainId: "0x1",
-      rpcTarget: "https://mainnet.infura.io/v3/daeee53504be4cd3a997d4f2718d33e0",
-      ticker: "ETH",
-    });
-  }
+      {
+        chainNamespace: ChainNamespace.EIP155,
+        decimals: 18,
+        chainId: '0x1',
+        rpcTarget:
+          'https://mainnet.infura.io/v3/daeee53504be4cd3a997d4f2718d33e0',
+        ticker: 'ETH',
+      },
+    );
+  };
 
   useEffect(() => {
     const init = async () => {
@@ -186,7 +189,10 @@ export default function App() {
     <View style={styles.buttonArea}>
       <Button title="Get User Info" onPress={() => uiConsole(userInfo)} />
       <Button title="Enable MFA" onPress={() => enableMFA()} />
-      <Button title="launch Wallet Services" onPress={() => launchWallerSerices()} />
+      <Button
+        title="launch Wallet Services"
+        onPress={() => launchWallerSerices()}
+      />
       <Button title="Get Chain ID" onPress={() => getChainId()} />
       <Button title="Get Accounts" onPress={() => getAccounts()} />
       <Button title="Get Balance" onPress={() => getBalance()} />
@@ -204,7 +210,7 @@ export default function App() {
         onChangeText={text => setEmail(text)}
         value={email}
         // eslint-disable-next-line react-native/no-inline-styles
-        style={{ padding: 10 }}
+        style={{padding: 10}}
       />
       <Button title="Login with Web3Auth" onPress={login} />
     </View>

demo/rn-bare-example/App.tsx

@@ -1,6 +1,9 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '>= 2.6.10'
+ruby ">= 2.6.10"
 
-gem 'cocoapods', '>= 1.11.3'
+# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
+# bound in the template on Cocoapods with next React Native release.
+gem 'cocoapods', '>= 1.13', '< 1.15'
+gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'

demo/rn-bare-example/Gemfile

@@ -1,26 +1,29 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    CFPropertyList (3.0.6)
+    CFPropertyList (3.0.7)
+      base64
+      nkf
       rexml
-    activesupport (7.0.5)
+    activesupport (7.0.8.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-    addressable (2.8.4)
+    addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
       json (>= 1.5.1)
     atomos (0.1.3)
+    base64 (0.2.0)
     claide (1.1.0)
-    cocoapods (1.12.1)
+    cocoapods (1.14.3)
       addressable (~> 2.8)
       claide (>= 1.0.2, < 2.0)
-      cocoapods-core (= 1.12.1)
+      cocoapods-core (= 1.14.3)
       cocoapods-deintegrate (>= 1.0.3, < 2.0)
-      cocoapods-downloader (>= 1.6.0, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
       cocoapods-plugins (>= 1.0.0, < 2.0)
       cocoapods-search (>= 1.0.0, < 2.0)
       cocoapods-trunk (>= 1.6.0, < 2.0)
@@ -32,8 +35,8 @@ GEM
       molinillo (~> 0.8.0)
       nap (~> 1.0)
       ruby-macho (>= 2.3.0, < 3.0)
-      xcodeproj (>= 1.21.0, < 2.0)
-    cocoapods-core (1.12.1)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.14.3)
       activesupport (>= 5.0, < 8)
       addressable (~> 2.8)
       algoliasearch (~> 1.0)
@@ -44,7 +47,7 @@ GEM
       public_suffix (~> 4.0)
       typhoeus (~> 1.0)
     cocoapods-deintegrate (1.0.5)
-    cocoapods-downloader (1.6.3)
+    cocoapods-downloader (2.1)
     cocoapods-plugins (1.0.0)
       nap
     cocoapods-search (1.0.1)
@@ -53,31 +56,32 @@ GEM
       netrc (~> 0.11)
     cocoapods-try (1.2.0)
     colored2 (3.1.2)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.2.3)
     escape (0.0.4)
     ethon (0.16.0)
       ffi (>= 1.15.0)
-    ffi (1.15.5)
+    ffi (1.16.3)
     fourflusher (2.3.1)
     fuzzy_match (2.0.4)
     gh_inspector (1.1.3)
     httpclient (2.8.3)
-    i18n (1.14.1)
+    i18n (1.14.5)
       concurrent-ruby (~> 1.0)
-    json (2.6.3)
-    minitest (5.18.0)
+    json (2.7.2)
+    minitest (5.22.3)
     molinillo (0.8.0)
     nanaimo (0.3.0)
     nap (1.1.0)
     netrc (0.11.0)
+    nkf (0.2.0)
     public_suffix (4.0.7)
-    rexml (3.2.5)
+    rexml (3.2.6)
     ruby-macho (2.5.1)
-    typhoeus (1.4.0)
+    typhoeus (1.4.1)
       ethon (>= 0.9.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    xcodeproj (1.22.0)
+    xcodeproj (1.24.0)
       CFPropertyList (>= 2.3.3, < 4.0)
       atomos (~> 0.1.3)
       claide (>= 1.0.2, < 2.0)
@@ -89,10 +93,11 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  cocoapods (>= 1.11.3)
+  activesupport (>= 6.1.7.5, < 7.1.0)
+  cocoapods (>= 1.13, < 1.15)
 
 RUBY VERSION
-   ruby 2.7.7p221
+   ruby 2.7.5p203
 
 BUNDLED WITH
-   2.3.26
+   2.1.4

demo/rn-bare-example/Gemfile.lock

@@ -0,0 +1,79 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the _root_ of your React Native project:
+
+```bash
+# using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+
+This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
+
+## Step 3: Modifying your App
+
+Now that you have successfully run the app, let's modify it.
+
+1. Open `App.tsx` in your text editor of choice and edit some lines.
+2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+
+   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

demo/rn-bare-example/README.md

@@ -6,6 +6,9 @@ import 'react-native';
 import React from 'react';
 import App from '../App';
 
+// Note: import explicitly to use the types shipped with jest.
+import {it} from '@jest/globals';
+
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';