diff --git a/packages/app/src/components/EmailInputMethod.tsx b/packages/app/src/components/EmailInputMethod.tsx index dd991f9..851b661 100644 --- a/packages/app/src/components/EmailInputMethod.tsx +++ b/packages/app/src/components/EmailInputMethod.tsx @@ -1,7 +1,13 @@ import { useState } from "react"; import { Button, OutlinedButton } from "./Button"; -const EmailInputMethod = ({ onClickGoogle, onClickEMLFile }) => { +const EmailInputMethod = ({ + onClickGoogle, + onClickEMLFile, +}: { + onClickGoogle: () => void; + onClickEMLFile: () => void; +}) => { return (
{ or { onClickEMLFile(); }} diff --git a/packages/app/src/contexts/Account/AccountContext.ts b/packages/app/src/contexts/Account/AccountContext.ts deleted file mode 100644 index 9e02379..0000000 --- a/packages/app/src/contexts/Account/AccountContext.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { createContext } from 'react'; - - -interface AccountValues { - isLoggedIn: boolean; - loggedInEthereumAddress: string | null; - loginStatus: string | null; - authenticatedLogout: (() => void) | null; - authenticatedLogin: (() => void) | null; - accountDisplay: string | null; - network: string | null; - connectStatus: string | null; - exportAuthenticatedWallet: (() => void) | null; -}; - -const defaultValues: AccountValues = { - isLoggedIn: false, - loggedInEthereumAddress: null, - loginStatus: null, - authenticatedLogout: null, - authenticatedLogin: null, - accountDisplay: null, - network: null, - connectStatus: null, - exportAuthenticatedWallet: null -}; - -const AccountContext = createContext(defaultValues); - -export default AccountContext; diff --git a/packages/app/src/contexts/Account/AccountProvider.tsx b/packages/app/src/contexts/Account/AccountProvider.tsx deleted file mode 100644 index cee6044..0000000 --- a/packages/app/src/contexts/Account/AccountProvider.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import { useEffect, useState, ReactNode } from 'react'; -import { useAccount, useConnect, useDisconnect, useNetwork } from 'wagmi'; -import { useWallets } from '@privy-io/react-auth'; -import { usePrivyWagmi } from '@privy-io/wagmi-connector'; -import { usePrivy } from '@privy-io/react-auth'; - -import AccountContext from './AccountContext'; -import { esl } from '../../constants'; -import { formatAddress } from '../../helpers/addressFormat'; -import { LoginStatus, LoginStatusType } from '../../helpers/types/loginStatus'; - -interface ProvidersProps { - children: ReactNode; -} - -const AccountProvider = ({ children }: ProvidersProps) => { - const { address } = useAccount(); - const { chain } = useNetwork(); - const { disconnect } = useDisconnect(); - const { status: connectStatus } = useConnect(); - - const { wallets } = useWallets(); - const { wallet: activeWallet, setActiveWallet } = usePrivyWagmi(); - const { - authenticated, - logout: authenticatedLogout, - user, - login: authenticatedLogin, - exportWallet: exportAuthenticatedWallet - } = usePrivy(); - - /* - * State - */ - - const [isLoggedIn, setIsLoggedIn] = useState(false); - const [loginStatus, setLoginStatus] = useState(LoginStatus.LOGGED_OUT); - const [loggedInEthereumAddress, setLoggedInEthereumAddress] = useState(null); - const [accountDisplay, setAccountDisplay] = useState(null); - const [network, setNetwork] = useState(null); - - /* - * Hooks - */ - - useEffect(() => { - esl && console.log('activeWallet_1'); - esl && console.log('checking wallets: ', wallets); - esl && console.log('checking activeWallet: ', activeWallet); - - if (wallets[0] && !activeWallet) { - esl && console.log('activeWallet_2'); - setActiveWallet(wallets[0]); - } - }, [activeWallet, wallets, setActiveWallet]); - - useEffect(() => { - esl && console.log('loginStatus_1'); - esl && console.log('user: ', user); - - if (authenticated && user?.wallet?.connectorType) { - const connectorType = user.wallet.connectorType; - if (connectorType === 'embedded') { - esl && console.log('loginStatus_2'); - - setLoginStatus(LoginStatus.AUTHENTICATED); - } else if ( - connectorType === 'injected' || - connectorType === 'coinbase_wallet' || - connectorType === 'wallet_connect' || - connectorType === 'wallet_connect_v2' - ) { - esl && console.log('loginStatus_3'); - - setLoginStatus(LoginStatus.EOA); - } else { - esl && console.log('loginStatus_4'); - - setLoginStatus(LoginStatus.LOGGED_OUT); - } - } else { - esl && console.log('loginStatus_5'); - - setLoginStatus(LoginStatus.LOGGED_OUT); - } - }, [authenticated, user]); - - useEffect(() => { - esl && console.log('isLoggedIn_1'); - esl && console.log('checking loginStatus: ', loginStatus); - esl && console.log('user: ', user); - esl && console.log('address: ', address); - - switch (loginStatus) { - case LoginStatus.AUTHENTICATED: - if (address && user) { - esl && console.log('isLoggedIn_2'); - - if (user.email && user.email.address) { - setAccountDisplay(user.email.address); - } else if (user.google && user.google.email) { - setAccountDisplay(user.google.email); - } else if (user.twitter && user.twitter.username) { - setAccountDisplay(user.twitter.username); - } else if (user.farcaster && user.farcaster.displayName) { - setAccountDisplay(user.farcaster.displayName); - } else { - setAccountDisplay('Account'); - } - - setIsLoggedIn(true); - setLoggedInEthereumAddress(address); - } - break; - - case LoginStatus.EOA: - if (address) { - esl && console.log('isLoggedIn_3'); - - const formattedAddress = formatAddress(address); - - setAccountDisplay(formattedAddress); - setIsLoggedIn(true); - setLoggedInEthereumAddress(address); - } - break; - - case LoginStatus.LOGGED_OUT: - default: - esl && console.log('isLoggedIn_4'); - - setAccountDisplay(null); - setIsLoggedIn(false); - setLoggedInEthereumAddress(null); - } - }, [user, address, loginStatus, disconnect]); - - useEffect(() => { - esl && console.log('networkRaw_1'); - esl && console.log('checking chain: ', chain); - - if (chain) { - esl && console.log('networkRaw_2'); - - setNetwork(chain.network); - } else { - esl && console.log('networkRaw_3'); - - setNetwork(null); - } - }, [chain]); - - return ( - - {children} - - ); -}; - -export default AccountProvider; diff --git a/packages/app/src/contexts/Account/index.ts b/packages/app/src/contexts/Account/index.ts deleted file mode 100644 index 91841ae..0000000 --- a/packages/app/src/contexts/Account/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as AccountContext } from './AccountContext' -export { default as AccountProvider } from './AccountProvider' diff --git a/packages/app/src/contexts/GoogleAuth/GoogleAuthProvider.tsx b/packages/app/src/contexts/GoogleAuth/GoogleAuthProvider.tsx index e0941d2..a28fbc0 100644 --- a/packages/app/src/contexts/GoogleAuth/GoogleAuthProvider.tsx +++ b/packages/app/src/contexts/GoogleAuth/GoogleAuthProvider.tsx @@ -1,16 +1,14 @@ -import React, { useEffect, useState, ReactNode } from 'react' +import React, { useEffect, useState, ReactNode } from "react"; import { hasGrantedAllScopesGoogle, useGoogleLogin, googleLogout, -} from '@react-oauth/google'; +} from "@react-oauth/google"; // import GoogleAuthContext from './GoogleAuthContext' -import { fetchProfile } from '../../hooks/useGmailClient'; -import useAccount from '../../hooks/useAccount'; -import { esl } from '../../constants'; -import GoogleAuthContext from './GoogleAuthContext'; - +import { fetchProfile } from "../../hooks/useGmailClient"; +import { esl } from "../../constants"; +import GoogleAuthContext from "./GoogleAuthContext"; interface ProvidersProps { children: ReactNode; @@ -21,72 +19,44 @@ const GoogleAuthProvider = ({ children }: ProvidersProps) => { * Contexts */ - const { loggedInEthereumAddress } = useAccount() - /* * State Keys */ - const getGoogleAuthTokenKey = () => { - return `googleAuthToken_${loggedInEthereumAddress}`; - } - /* * State */ - const [googleAuthToken, setGoogleAuthToken] = useState( - () => { - const cachedToken = localStorage.getItem(getGoogleAuthTokenKey()); - return cachedToken ? JSON.parse(cachedToken) : null; - } - ); + const [googleAuthToken, setGoogleAuthToken] = useState(); const [isGoogleAuthed, setIsGoogleAuthed] = useState(false); const [isScopesApproved, setIsScopesApproved] = useState(false); const [loggedInGmail, setLoggedInGmail] = useState(null); - /* - * Hooks - */ - - useEffect(() => { - esl && console.log('logoOutGoogleAuth'); - esl && console.log('checking loggedInEthereumAddress', loggedInEthereumAddress); - - if (!loggedInEthereumAddress) { - esl && console.log('logoOutGoogleAuth_1'); - - googleLogOut(); - } - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [loggedInEthereumAddress]); - useEffect(() => { - esl && console.log('googleAuthScopes_1'); - esl && console.log('checking googleAuthToken', googleAuthToken); + esl && console.log("googleAuthScopes_1"); + esl && console.log("checking googleAuthToken", googleAuthToken); if (googleAuthToken) { - esl && console.log('googleAuthScopes_2'); + esl && console.log("googleAuthScopes_2"); const allScope = hasGrantedAllScopesGoogle( googleAuthToken, - 'email', - 'profile', - 'https://www.googleapis.com/auth/gmail.readonly', + "email", + "profile", + "https://www.googleapis.com/auth/gmail.readonly" ); - + setIsScopesApproved(allScope); } }, [googleAuthToken]); useEffect(() => { - esl && console.log('googleProfile_1'); - esl && console.log('checking googleAuthToken', googleAuthToken); + esl && console.log("googleProfile_1"); + esl && console.log("checking googleAuthToken", googleAuthToken); if (googleAuthToken) { - esl && console.log('googleProfile_2'); + esl && console.log("googleProfile_2"); const fetchData = async () => { try { @@ -95,15 +65,15 @@ const GoogleAuthProvider = ({ children }: ProvidersProps) => { if (email) { setLoggedInGmail(email); - localStorage.setItem('loggedInEmail', email); + localStorage.setItem("loggedInEmail", email); } } catch (error) { - console.error('Error in fetching profile data:', error); + console.error("Error in fetching profile data:", error); } }; - + fetchData(); - }; + } }, [googleAuthToken]); /* @@ -111,27 +81,30 @@ const GoogleAuthProvider = ({ children }: ProvidersProps) => { */ const googleLogIn = useGoogleLogin({ - onSuccess: tokenResponse => { + onSuccess: (tokenResponse) => { setGoogleAuthToken(tokenResponse); setIsGoogleAuthed(true); - localStorage.setItem(getGoogleAuthTokenKey(), JSON.stringify(tokenResponse)); + // localStorage.setItem( + // getGoogleAuthTokenKey(), + // JSON.stringify(tokenResponse) + // ); }, - scope: 'email profile https://www.googleapis.com/auth/gmail.readonly', + scope: "email profile https://www.googleapis.com/auth/gmail.readonly", }); const googleLogOut = () => { setIsScopesApproved(false); setGoogleAuthToken(null); - localStorage.removeItem(getGoogleAuthTokenKey()); - + // localStorage.removeItem(getGoogleAuthTokenKey()); + setIsGoogleAuthed(false); - localStorage.removeItem('isGoogleAuthed'); - + localStorage.removeItem("isGoogleAuthed"); + setLoggedInGmail(null); - localStorage.removeItem('loggedInGmail'); - + localStorage.removeItem("loggedInGmail"); + googleLogout(); }; @@ -151,4 +124,4 @@ const GoogleAuthProvider = ({ children }: ProvidersProps) => { ); }; -export default GoogleAuthProvider +export default GoogleAuthProvider; diff --git a/packages/app/src/helpers/types/index.ts b/packages/app/src/helpers/types/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/packages/app/src/helpers/types/loginStatus.ts b/packages/app/src/helpers/types/loginStatus.ts deleted file mode 100644 index affed4e..0000000 --- a/packages/app/src/helpers/types/loginStatus.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const LoginStatus = { - LOGGED_OUT: 'logged_out', - AUTHENTICATED: 'authenticated', - EOA: 'eoa' - }; - - export type LoginStatusType = typeof LoginStatus[keyof typeof LoginStatus]; - \ No newline at end of file diff --git a/packages/app/src/hooks/useAccount.ts b/packages/app/src/hooks/useAccount.ts deleted file mode 100644 index b744222..0000000 --- a/packages/app/src/hooks/useAccount.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { useContext } from 'react' -import { AccountContext } from '../contexts/Account' - -const useAccount = () => { - return { ...useContext(AccountContext) } -} - -export default useAccount diff --git a/packages/app/src/pages/MainPage.tsx b/packages/app/src/pages/MainPage.tsx index fa31636..62fe46c 100644 --- a/packages/app/src/pages/MainPage.tsx +++ b/packages/app/src/pages/MainPage.tsx @@ -5,10 +5,6 @@ import styled from "styled-components"; import _ from "lodash"; import { useAccount, useContractWrite, usePrepareContractWrite } from "wagmi"; import { rawEmailToBuffer } from "@zk-email/helpers/dist/input-helpers"; -import { - verifyDKIMSignature, - DKIMVerificationResult, -} from "@zk-email/helpers/dist/dkim"; import { downloadProofFiles, generateProof, @@ -86,8 +82,6 @@ export const MainPage: React.FC<{}> = (props) => { | "sent" >("not-started"); - console.log(status); - const [stopwatch, setStopwatch] = useState>({ startedDownloading: 0, finishedDownloading: 0, @@ -101,8 +95,6 @@ export const MainPage: React.FC<{}> = (props) => { } }, [isGoogleAuthed]); - console.log(fetchedEmails); - useEffect(() => { const userAgent = navigator.userAgent; const isChrome = userAgent.indexOf("Chrome") > -1; @@ -226,7 +218,7 @@ export const MainPage: React.FC<{}> = (props) => { } }; - useEffect(() => { + useUpdateEffect(() => { const downloadZKey = async () => { console.time("zk-dl"); diff --git a/packages/app/tests/e2e-dl-zkp.test.ts b/packages/app/tests/e2e-dl-zkp.test.ts index 08105c4..83e2321 100644 --- a/packages/app/tests/e2e-dl-zkp.test.ts +++ b/packages/app/tests/e2e-dl-zkp.test.ts @@ -40,6 +40,9 @@ const setTextAreaValue = async (page: Page, selector: string, value: string) => const gotToPageAndEnterInputs = async (page: Page, emailInputSelector: string, ethInputSelector: string, testEmailText: string, testEthAddress: string) => { await page.goto(pageUrl); + const uploadEmailEMLFileButtonSelector = "button[data-testid='upload-email-eml-file-button']"; + await page.click(uploadEmailEMLFileButtonSelector); + await page.waitForSelector(emailInputSelector); // 'page.keyboard.type()' takes too long. Use workaround. // await page.focus(emailInputSelector); @@ -67,19 +70,25 @@ describe("App.js", () => { }, 60000); it("should start download and run zkproof after entering inputs and click", async () => { - await page.waitForSelector("[data-testid='status-not-started']"); + // await page.waitForSelector("[data-testid='status-not-started']"); console.log("starting e2e test...this will take up to 10 minutes and consume bandwidth and cpu time") - const proveButtonSelector = "button[data-testid='prove-button']"; - await page.click(proveButtonSelector); // starting download + const proveButtonSelector = "button[data-testid='prove-button']"; + console.log("starting download...this will take up to 10 minutes and consume bandwidth"); const proveButtonIsDisabled = await page.$eval(proveButtonSelector, button => (button as HTMLButtonElement).disabled); expect(proveButtonIsDisabled).toBe(true); - + + let status; await page.waitForSelector("[data-testid='status-downloading-proof-files']"); status = await page.$eval("[data-testid='status-downloading-proof-files']", e => (e.attributes as any)['data-testid'].value); expect(status).toBe("status-downloading-proof-files"); + + await new Promise((r) => setTimeout(r, 200000)); + console.log("buttonnnsndksj clicked") + + await page.click(proveButtonSelector); await page.waitForSelector("[data-testid='status-generating-proof']", {timeout: downloadTimeout}); console.log("finished download...starting proof"); diff --git a/packages/app/tests/e2e-ui.test.ts b/packages/app/tests/e2e-ui.test.ts index 98cfa7a..184745d 100644 --- a/packages/app/tests/e2e-ui.test.ts +++ b/packages/app/tests/e2e-ui.test.ts @@ -42,6 +42,9 @@ const setTextAreaValue = async (page: Page, selector: string, value: string) => const gotToPageAndEnterInputs = async (page: Page, emailInputSelector: string, ethInputSelector: string, testEmailText: string, testEthAddress: string) => { await page.goto(pageUrl); + const proveButtonSelector = "button[data-testid='upload-email-eml-file-button']"; + await page.click(proveButtonSelector); + await page.waitForSelector(emailInputSelector); // 'page.keyboard.type()' takes too long. Use workaround. // await page.focus(emailInputSelector); @@ -69,21 +72,20 @@ describe("App.js", () => { }, 60000); it("should allow email and eth addr to be entered into inputs", async () => { - await page.waitForSelector("[data-testid='status-not-started']"); + // await page.waitForSelector("[data-testid='status-not-started']"); const emailValue = await page.$eval(emailInputSelector, e => (e as HTMLInputElement).value); expect(emailValue).toBe(testEmailText); const ethValue = await page.$eval(ethInputSelector, e => (e as HTMLInputElement).value); expect(ethValue).toBe(testEthAddress); }); - it("should start with an enabled prove button and status should be 'not-started'", async () => { - await page.waitForSelector("[data-testid='status-not-started']"); + it("should start with an enabled prove button and status should be 'downloading-proof-files'", async () => { const proveButtonSelector = "button[data-testid='prove-button']"; const proveButtonIsDisabled = await page.$eval(proveButtonSelector, button => (button as HTMLButtonElement).disabled); - expect(proveButtonIsDisabled).toBe(false); + expect(proveButtonIsDisabled).toBe(true); - const status = await page.$eval("[data-testid='status-not-started']", e => (e.attributes as any)['data-testid'].value); - expect(status).toBe("status-not-started"); + const status = await page.$eval("[data-testid='status-downloading-proof-files']", e => (e.attributes as any)['data-testid'].value); + expect(status).toBe("status-downloading-proof-files"); }); afterAll(() => browser.close()); diff --git a/packages/app/tsconfig.json b/packages/app/tsconfig.json index 54435e4..744439c 100644 --- a/packages/app/tsconfig.json +++ b/packages/app/tsconfig.json @@ -5,10 +5,11 @@ "outDir": "dist", "skipLibCheck": true, "jsx": "react-jsx", - "module": "CommonJS", "typeRoots": ["./../../node_modules/@types"], "esModuleInterop": true, - "target": "es2022", + "target": "esnext", + "moduleResolution": "Node", + "module": "esnext", "isolatedModules": true, "resolveJsonModule": true, "strict": true