From 321e1a241aaf93a43d41491b8a0463dad6cb208d Mon Sep 17 00:00:00 2001
From: Maharshi Mishra <ihsraham27@gmail.com>
Date: Wed, 20 Sep 2023 13:46:53 +0800
Subject: [PATCH] Optimized agg verifier example

---
 .../src/App.tsx                               | 66 +++++++------------
 1 file changed, 25 insertions(+), 41 deletions(-)

diff --git a/single-factor-auth-web/sfa-react-auth0-agg-verifier-example/src/App.tsx b/single-factor-auth-web/sfa-react-auth0-agg-verifier-example/src/App.tsx
index 9fd290d3..aeae5065 100644
--- a/single-factor-auth-web/sfa-react-auth0-agg-verifier-example/src/App.tsx
+++ b/single-factor-auth-web/sfa-react-auth0-agg-verifier-example/src/App.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 
 // Import Single Factor Auth SDK for no redirect flow
 import { Web3Auth } from "@web3auth/single-factor-auth";
-import { CHAIN_NAMESPACES, IProvider } from "@web3auth/base";
+import { CHAIN_NAMESPACES } from "@web3auth/base";
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 import { GoogleLogin, CredentialResponse, googleLogout } from '@react-oauth/google';
 
@@ -11,11 +11,6 @@ import { GoogleLogin, CredentialResponse, googleLogout } from '@react-oauth/goog
 import RPC from "./evm.ethers";
 
 import { useAuth0 } from "@auth0/auth0-react";
-// import { auth } from './FireBaseConfig';
-// import {
-//   GoogleAuthProvider,
-//   signInWithPopup,
-// } from "firebase/auth";
 
 import "./App.css";
 
@@ -36,32 +31,27 @@ const chainConfig = {
   tickerName: "Ethereum",
 };
 
+// Initialising Web3Auth Single Factor Auth SDK
+const web3authSfa = new Web3Auth({
+  clientId, // Get your Client ID from Web3Auth Dashboard
+  web3AuthNetwork: "testnet", // ["cyan", "testnet"]
+  usePnPKey: false, // Setting this to true returns the same key as PnP Web SDK, By default, this SDK returns CoreKitKey.
+});
+const ethereumPrivateKeyProvider = new EthereumPrivateKeyProvider({
+  config: { chainConfig },
+});
+
 function App() {
-  const [web3authSFAuth, setWeb3authSFAuth] = useState<Web3Auth | null>(null);
   const [usesSfaSDK, setUsesSfaSDK] = useState(false);
   const [idToken, setIdToken] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [provider, setProvider] = useState<IProvider | null>(
-    null
-  );
   const { getIdTokenClaims, loginWithPopup } = useAuth0();
 
   useEffect(() => {
     const init = async () => {
       try {
-        // Initialising Web3Auth Single Factor Auth SDK
-        const web3authSfa = new Web3Auth({
-          clientId, // Get your Client ID from Web3Auth Dashboard
-          web3AuthNetwork: "testnet", // ["cyan", "testnet"]
-          usePnPKey: false, // Setting this to true returns the same key as PnP Web SDK, By default, this SDK returns CoreKitKey.
-        });
-        setWeb3authSFAuth(web3authSfa);
-        const provider = new EthereumPrivateKeyProvider({
-          config: { chainConfig },
-        });
-
-        web3authSfa.init(provider);
+        web3authSfa.init(ethereumPrivateKeyProvider);
       } catch (error) {
         console.error(error);
       }
@@ -84,7 +74,7 @@ function App() {
   const loginAuth0GitHub = async () => {
     // trying logging in with the Single Factor Auth SDK
     try {
-      if (!web3authSFAuth) {
+      if (!web3authSfa) {
         uiConsole("Web3Auth Single Factor Auth SDK not initialized yet");
         return;
       }
@@ -100,15 +90,12 @@ function App() {
           idToken: idToken!,
         }
       ]
-      const web3authSfaprovider = await web3authSFAuth.connect({
+      await web3authSfa.connect({
         verifier,
         verifierId: email,
         idToken: idToken!,
         subVerifierInfoArray,
       });
-      if (web3authSfaprovider) {
-        setProvider(web3authSfaprovider);
-      }
       setUsesSfaSDK(true);
       setLoading(false);
       setIsLoggedIn(true);
@@ -122,7 +109,7 @@ function App() {
 
   const onSuccess = async (response: CredentialResponse) => {
     try {
-      if (!web3authSFAuth) {
+      if (!web3authSfa) {
         uiConsole("Web3Auth Single Factor Auth SDK not initialized yet");
         return;
       }
@@ -137,15 +124,12 @@ function App() {
           idToken: idToken!,
         }
       ]
-      const web3authSfaprovider = await web3authSFAuth.connect({
+      await web3authSfa.connect({
         verifier,
         verifierId: email,
         idToken: idToken!,
         subVerifierInfoArray,
       });
-      if (web3authSfaprovider) {
-        setProvider(web3authSfaprovider);
-      }
       setUsesSfaSDK(true);
       setLoading(false);
       setIsLoggedIn(true);
@@ -172,7 +156,7 @@ function App() {
       console.log(
         "You are directly using Single Factor Auth SDK to login the user, hence the Web3Auth logout function won't work for you. You can logout the user directly from your login provider, or just clear the provider object."
       );
-      web3authSFAuth?.logout();
+      web3authSfa?.logout();
       googleLogout();
       setIsLoggedIn(false);
       return;
@@ -180,41 +164,41 @@ function App() {
   };
 
   const getAccounts = async () => {
-    if (!provider) {
+    if (!web3authSfa.provider) {
       uiConsole("No provider found");
       return;
     }
-    const rpc = new RPC(provider!);
+    const rpc = new RPC(web3authSfa.provider);
     const userAccount = await rpc.getAccounts();
     uiConsole(userAccount);
   };
 
   const getBalance = async () => {
-    if (!provider) {
+    if (!web3authSfa.provider) {
       uiConsole("No provider found");
       return;
     }
-    const rpc = new RPC(provider!);
+    const rpc = new RPC(web3authSfa.provider);
     const balance = await rpc.getBalance();
     uiConsole(balance);
   };
 
   const signMessage = async () => {
-    if (!provider) {
+    if (!web3authSfa.provider) {
       uiConsole("No provider found");
       return;
     }
-    const rpc = new RPC(provider!);
+    const rpc = new RPC(web3authSfa.provider);
     const result = await rpc.signMessage();
     uiConsole(result);
   };
 
   const sendTransaction = async () => {
-    if (!provider) {
+    if (!web3authSfa.provider) {
       uiConsole("No provider found");
       return;
     }
-    const rpc = new RPC(provider!);
+    const rpc = new RPC(web3authSfa.provider);
     const result = await rpc.signAndSendTransaction();
     uiConsole(result);
   };