diff --git a/src/Login/LoggenInViewComponent.tsx b/src/Login/LoggenInViewComponent.tsx new file mode 100644 index 0000000..83d5dd5 --- /dev/null +++ b/src/Login/LoggenInViewComponent.tsx @@ -0,0 +1,168 @@ +import React, { useState } from 'react'; + +import { useAuthStore } from '../context/NotifyContext'; +import { + getUserInfo, + authenticateUser, + getChainId, + getAccounts, + getBalance, + signMessage, + sendTransaction, +} from '../utils/Auth'; +import { Box, Button, Text } from '@chakra-ui/react'; + +interface ButtonData { + [key: string]: { heading: string }; +} + +const LoggedInViewComponent = () => { + const { web3auth, provider } = useAuthStore(); + const [loggedValue, setLoggedValue] = useState<{ + value: any; + button: string | null; + heading: string; + }>({ value: null, button: null, heading: '' }); + + const buttonData: ButtonData = { + getUserInfo: { + heading: 'User Information', + }, + getChainId: { + heading: 'Chain ID', + }, + getAccounts: { + heading: 'Accounts', + }, + getBalance: { + heading: 'Balance', + }, + }; + + const handleButtonClick = async (button: string, operation: string) => { + let value; + switch (operation) { + case 'getUserInfo': + value = await getUserInfo(web3auth); + setLoggedValue({ + value, + button, + heading: buttonData[button]?.heading || 'Default Heading', + }); + break; + case 'authenticateUser': + value = await authenticateUser({ web3auth, provider }); + break; + case 'getChainId': + value = await getChainId({ provider, web3auth }); + break; + case 'getAccounts': + value = await getAccounts({ provider, web3auth }); + break; + case 'getBalance': + value = await getBalance({ provider, web3auth }); + break; + case 'signMessage': + value = await signMessage({ provider, web3auth }); + break; + case 'sendTransaction': + value = await sendTransaction({ provider, web3auth }); + break; + default: + break; + } + setLoggedValue({ + value, + button, + heading: buttonData[button]?.heading || 'Default Heading', + }); + }; + + const handleBackButton = () => { + setLoggedValue({ value: null, button: null, heading: '' }); + }; + + return ( +
+ {loggedValue.button === null ? ( + <> +
+ +
+ {/*
+ +
*/} +
+ +
+
+ +
+
+ +
+ {/*
+ +
+
+ +
*/} + + ) : ( + + {loggedValue.button === 'getUserInfo' ? ( + + + {loggedValue.heading} + + + email: {loggedValue.value.email} +
+ name: {loggedValue.value.name} +
+ verifier: {loggedValue.value.verifier} +
+ + + ) : ( +
+ {loggedValue.heading}:{' '} + {JSON.stringify(loggedValue.value).replace(/"/g, '')} +
+ )} + + + )} +
+ ); +}; + +export default LoggedInViewComponent; diff --git a/src/Login/LoginComponent.tsx b/src/Login/LoginComponent.tsx index e4eb9d4..5e24530 100644 --- a/src/Login/LoginComponent.tsx +++ b/src/Login/LoginComponent.tsx @@ -1,39 +1,51 @@ -import React, { useEffect, useState, useContext } from "react"; -import { Web3AuthNoModal } from "@web3auth/no-modal"; -import { CHAIN_NAMESPACES, IProvider, WALLET_ADAPTERS, WEB3AUTH_NETWORK } from "@web3auth/base"; -import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; -import { OpenloginAdapter, OpenloginUserInfo } from "@web3auth/openlogin-adapter"; -import "./login.css"; -import RPC from "./web3RPC"; // for using web3.js - -const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io +import React, { useEffect, useState } from 'react'; +import { Web3AuthNoModal } from '@web3auth/no-modal'; +import { + CHAIN_NAMESPACES, + IProvider, + WALLET_ADAPTERS, + WEB3AUTH_NETWORK, +} from '@web3auth/base'; +import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider'; +import { + OpenloginAdapter, + OpenloginUserInfo, +} from '@web3auth/openlogin-adapter'; +import './login.css'; +import { useAuthStore } from '../context/NotifyContext'; +import { Box, Flex, Button, Heading, Text } from '@chakra-ui/react'; + +const clientId = + 'BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ'; // get from https://dashboard.web3auth.io interface LoginComponentProps { onLogin: () => void; // Add a type for the onLogin prop } -function LoginComponent({onLogin}:LoginComponentProps) { - const [web3auth, setWeb3auth] = useState(null); - const [provider, setProvider] = useState(null); +function LoginComponent({ onLogin }: LoginComponentProps) { const [loggedIn, setLoggedIn] = useState(false); // Modify here const [isFullPage, setIsFullPage] = useState(false); - + const { web3auth, setWeb3Auth, provider, setProvider } = useAuthStore(); + const [isLoading, setIsLoading] = useState(false); useEffect(() => { const init = async () => { try { const chainConfig = { chainNamespace: CHAIN_NAMESPACES.EIP155, - chainId: "0x1", // Please use 0x1 for Mainnet - rpcTarget: "https://rpc.ankr.com/eth", - displayName: "Ethereum Mainnet", - blockExplorerUrl: "https://etherscan.io/", - ticker: "ETH", - tickerName: "Ethereum", - logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png", + chainId: '0x1', // Please use 0x1 for Mainnet + rpcTarget: 'https://rpc.ankr.com/eth', + displayName: 'Ethereum Mainnet', + blockExplorerUrl: 'https://etherscan.io/', + ticker: 'ETH', + tickerName: 'Ethereum', + logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png', }; - const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } }); + const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, + }); const web3auth = new Web3AuthNoModal({ - clientId :"BP_vYOMN--pogDqBiyO30wS7QijQr9_STFuQVhVf6CAhm5BMGkjrR4dX7CAbxpuSf64TIBes_DARD3y9NLxQHkU", + clientId: + 'BP_vYOMN--pogDqBiyO30wS7QijQr9_STFuQVhVf6CAhm5BMGkjrR4dX7CAbxpuSf64TIBes_DARD3y9NLxQHkU', web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, privateKeyProvider, }); @@ -41,12 +53,11 @@ function LoginComponent({onLogin}:LoginComponentProps) { const openloginAdapter = new OpenloginAdapter({}); web3auth.configureAdapter(openloginAdapter); - - setWeb3auth(web3auth); + + setWeb3Auth(web3auth); await web3auth.init(); setProvider(web3auth.provider); - } catch (error) { console.error(error); } @@ -58,180 +69,65 @@ function LoginComponent({onLogin}:LoginComponentProps) { }, []); const login = async () => { + setIsLoading(true); if (!web3auth) { - uiConsole("web3auth not initialized yet"); + console.log('web3auth not initialized yet'); return; } - const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { - loginProvider: "google", - }); - setProvider(web3authProvider); - setLoggedIn(true); // Set loggedIn to true after successful login - localStorage.setItem("userLoggedIn", "true"); - onLogin(); - }; - - const authenticateUser = async () => { - if (!web3auth) { - uiConsole("web3auth not initialized yet"); - return; + try { + const web3authProvider = await web3auth.connectTo( + WALLET_ADAPTERS.OPENLOGIN, + { + loginProvider: 'google', + } + ); + setProvider(web3authProvider); + setLoggedIn(true); // Set loggedIn to true after successful login + localStorage.setItem('userLoggedIn', 'true'); + onLogin(); + } catch (error) { + console.log('Error in loggin in', error); + setIsLoading(false); } - const idToken = await web3auth.authenticateUser(); - uiConsole(idToken); + setIsLoading(false); }; - const getUserInfo = async () => { - if (!web3auth) { - uiConsole("web3auth not initialized yet"); - return; - } - const user = await web3auth.getUserInfo(); - uiConsole(user); - }; - - const logout = async () => { - if (!web3auth) { - uiConsole("web3auth not initialized yet"); - return; - } - await web3auth.logout(); - setProvider(null); - setLoggedIn(false); - }; - - const getChainId = async () => { - if (!provider) { - uiConsole("provider not initialized yet"); - return; - } - const rpc = new RPC(provider); - const chainId = await rpc.getChainId(); - uiConsole(chainId); - }; - const getAccounts = async () => { - if (!provider) { - uiConsole("provider not initialized yet"); - return; - } - const rpc = new RPC(provider); - const address = await rpc.getAccounts(); - uiConsole(address); - }; - - const getBalance = async () => { - if (!provider) { - uiConsole("provider not initialized yet"); - return; - } - const rpc = new RPC(provider); - const balance = await rpc.getBalance(); - uiConsole(balance); - }; - - const sendTransaction = async () => { - if (!provider) { - uiConsole("provider not initialized yet"); - return; - } - const rpc = new RPC(provider); - const receipt = await rpc.sendTransaction(); - uiConsole(receipt); - }; - - const signMessage = async () => { - if (!provider) { - uiConsole("provider not initialized yet"); - return; - } - const rpc = new RPC(provider); - const signedMessage = await rpc.signMessage(); - uiConsole(signedMessage); - }; - - function uiConsole(...args: (string | Partial)[]) { - const el = document.querySelector("#console>p"); - if (el) { - el.innerHTML = JSON.stringify(args || {}, null, 2); - } - } - - const loggedInView = ( - <> -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-

Login Successful

-
- - ); - const unloggedInView = ( <> {!isFullPage ? ( - + ) : ( - + )} ); return ( -
-

- - Web3Auth{" "} - - -

- -
{!loggedIn ? unloggedInView : null}
- -
+ + + + End-user digital assistant product for on-chain and off-chain + automation + + {!loggedIn ? unloggedInView : null} + + ); } -export default LoginComponent \ No newline at end of file +export default LoginComponent; diff --git a/src/common/App.tsx b/src/common/App.tsx index f6b2f70..2618701 100644 --- a/src/common/App.tsx +++ b/src/common/App.tsx @@ -11,6 +11,14 @@ import { TabPanel, Button, Input, + Flex, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalFooter, + ModalBody, + ModalCloseButton, } from '@chakra-ui/react'; import { useAppState } from '../state/store'; import ModelDropdown from './ModelDropdown'; @@ -21,17 +29,19 @@ import logo from '../assets/img/icon-128.png'; import ChatUI from './ChatUI'; import LoginComponent from '../Login/LoginComponent'; import { ModalProvider } from '../context/ModalContext'; +import LoggedInViewComponent from '../Login/LoggenInViewComponent'; +import { FaCircleInfo } from 'react-icons/fa6'; const App: React.FC = () => { const openAIKey = useAppState((state) => state.settings.openAIKey); const [loggedIn, setLoggedIn] = useState(false); const [selectedFile, setSelectedFile] = useState(null); + const [showModal, setShowModal] = useState(false); useEffect(() => { // Check local storage to see if the user has already logged in const isUserLoggedIn = localStorage.getItem('userLoggedIn'); if (isUserLoggedIn === 'true') { - console.log(isUserLoggedIn); setLoggedIn(true); } else { setLoggedIn(false); @@ -40,7 +50,8 @@ const App: React.FC = () => { const handleLogout = async () => { localStorage.setItem('userLoggedIn', 'false'); - localStorage.removeItem('openlogin_store') + localStorage.removeItem('userLoggedIn'); + localStorage.removeItem('openlogin_store'); setLoggedIn(false); }; const handleLogin = () => { @@ -59,6 +70,9 @@ const App: React.FC = () => { // Call the parent component callback with the selected file and message }; + const toggleModal = () => { + setShowModal((prevState) => !prevState); + }; return ( @@ -68,20 +82,25 @@ const App: React.FC = () => { logo - ZkSurf + ZkSurfer - {loggedIn ?( - ):NaN} + {loggedIn ? ( + + + + + ) : ( + NaN + )} @@ -90,27 +109,37 @@ const App: React.FC = () => { {loggedIn ? ( - - - Browser Automation - Chat - - - - - - - - - - - - - + + + {/* Browser Automation */} + Chat + + + {/* + + */} + + + + + + + ) : ( - -)} + + )} + + + + + User Details + + + + + + ); diff --git a/src/context/NotifyContext.tsx b/src/context/NotifyContext.tsx new file mode 100644 index 0000000..d403f02 --- /dev/null +++ b/src/context/NotifyContext.tsx @@ -0,0 +1,17 @@ +import { create } from 'zustand'; +import { Web3AuthNoModal } from '@web3auth/no-modal'; +import { IProvider } from '@web3auth/base'; + +interface NotifyContextValue { + web3auth: Web3AuthNoModal | null; + setWeb3Auth: (auth: Web3AuthNoModal) => void; + provider: IProvider | null; + setProvider: (prov: IProvider | null) => void; +} + +export const useAuthStore = create((set) => ({ + web3auth: null, + setWeb3Auth: (auth: Web3AuthNoModal) => set((state) => ({ web3auth: auth })), + provider: null, + setProvider: (prov: IProvider | null) => set((state) => ({ provider: prov })), +})); diff --git a/src/utils/Auth.ts b/src/utils/Auth.ts new file mode 100644 index 0000000..67ab972 --- /dev/null +++ b/src/utils/Auth.ts @@ -0,0 +1,76 @@ +import { IProvider } from '@web3auth/base'; +import { Web3AuthNoModal } from '@web3auth/no-modal'; +import RPC from '../Login/web3RPC'; + +interface Props { + web3auth: Web3AuthNoModal | null; + provider: IProvider | null; +} + +export const authenticateUser = async ({ web3auth }: Props) => { + if (!web3auth) { + console.log('web3auth not initialized yet'); + return; + } + const idToken = await web3auth.authenticateUser(); + return idToken; +}; + +export const getUserInfo = async (web3auth: Web3AuthNoModal | null) => { + if (!web3auth) { + console.log('web3auth not initialized yet'); + return; + } + const user = await web3auth.getUserInfo(); + const { email, name, verifier } = user; + return { email, name, verifier }; +}; + +export const getChainId = async ({ provider }: Props) => { + if (!provider) { + console.log('provider not initialized yet'); + return; + } + const rpc = new RPC(provider); + const chainId = await rpc.getChainId(); + return chainId; +}; +export const getAccounts = async ({ provider }: Props) => { + if (!provider) { + console.log('provider not initialized yet'); + return; + } + const rpc = new RPC(provider); + const address = await rpc.getAccounts(); + return address; +}; + +export const getBalance = async ({ provider }: Props) => { + if (!provider) { + console.log('provider not initialized yet'); + return; + } + const rpc = new RPC(provider); + const balance = await rpc.getBalance(); + return balance; +}; + +export const sendTransaction = async ({ provider }: Props) => { + if (!provider) { + console.log('provider not initialized yet'); + return; + } + const rpc = new RPC(provider); + const receipt = await rpc.sendTransaction(); + return receipt; +}; + +export const signMessage = async ({ provider }: Props) => { + if (!provider) { + console.log('provider not initialized yet'); + return; + } + const rpc = new RPC(provider); + const signedMessage = await rpc.signMessage(); + return signedMessage; +};