chore: Show warning banner while using incognito tabs

zkemail · Oct 22, 2024 · 0a1347a · 0a1347a
1 parent ac9aa27
commit 0a1347a
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 20 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -7,6 +7,7 @@
     "@rainbow-me/rainbowkit": "^1.3.3",
     "@react-oauth/google": "^0.12.1",
     "@zk-email/helpers": "^6.1.3",
+    "detectincognitojs": "^1.3.5",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/packages/app/src/pages/MainPage.tsx b/packages/app/src/pages/MainPage.tsx
@@ -30,6 +30,7 @@ import {
 } from "../hooks/useGmailClient";
 import { formatDateTime } from "../helpers/dateTimeFormat";
 import EmailInputMethod from "../components/EmailInputMethod";
+import { detectIncognito } from "detectincognitojs";
 
 const CIRCUIT_NAME = "twitter";
 
@@ -97,6 +98,13 @@ export const MainPage: React.FC<{}> = (props) => {
   useEffect(() => {
     const userAgent = navigator.userAgent;
     const isChrome = userAgent.indexOf("Chrome") > -1;
+
+    detectIncognito().then((result) => {
+      if (result.isPrivate) {
+        setShowBrowserWarning(true);
+      }
+    });
+
     if (!isChrome) {
       setShowBrowserWarning(true);
     }
@@ -251,7 +259,7 @@ export const MainPage: React.FC<{}> = (props) => {
     <Container>
       {showBrowserWarning && (
         <TopBanner
-          message={"ZK Email only works on Chrome or Chromium-based browsers."}
+          message={"ZK Email only works on any non-incognito, Chrome or Chromium-based browsers."}
         />
       )}
       <div className="title">
@@ -284,7 +292,7 @@ export const MainPage: React.FC<{}> = (props) => {
           <br />
           If you wish to generate a ZK proof of Twitter badge (NFT), you must:
         </span>
-        <div>              
+        <div>
           <NumberedStep step={"1"}>
             Send yourself a{" "}
             <a
@@ -294,41 +302,55 @@ export const MainPage: React.FC<{}> = (props) => {
             >
               password reset email
             </a>{" "}
-            from Twitter. (Reminder: Twitter name with emoji might fail to pass DKIM verification)
+            from Twitter. (Reminder: Twitter name with emoji might fail to pass
+            DKIM verification)
           </NumberedStep>
           <NumberedStep step={"2"}>
-          <p>Sign in with Gmail, then select the most recent Twitter email.</p>
+            <p>
+              Sign in with Gmail, then select the most recent Twitter email.
+            </p>
           </NumberedStep>
           <details>
-            <summary style={{ marginLeft: "20px", marginBottom: "10px" }}>Alternative method (for non-Gmail users or if you prefer not to sign in)</summary>
+            <summary style={{ marginLeft: "20px", marginBottom: "10px" }}>
+              Alternative method (for non-Gmail users or if you prefer not to
+              sign in)
+            </summary>
             <div style={{ marginLeft: "20px" }}>
               <NumberedStep step={"2a"}>
-                In your inbox, find the email from Twitter and click the three dot
-                menu, then "Show original" then "Copy to clipboard". If on Outlook,
-                download the original email as .eml and copy it instead.
+                In your inbox, find the email from Twitter and click the three
+                dot menu, then "Show original" then "Copy to clipboard". If on
+                Outlook, download the original email as .eml and copy it
+                instead.
               </NumberedStep>
               <NumberedStep step={"2b"}>
-                Copy paste or drop that into the box below. Note that we cannot use
-                this to phish you: we do not know your password, and we never get this
-                email info because we have no server at all. We are actively searching
-                for a less sketchy email.
+                Copy paste or drop that into the box below. Note that we cannot
+                use this to phish you: we do not know your password, and we
+                never get this email info because we have no server at all. We
+                are actively searching for a less sketchy email.
               </NumberedStep>
             </div>
           </details>
           <NumberedStep step={"3"}>
-            Paste in your sending Ethereum address. This ensures that no one else
-            can "steal" your proof for another account (frontrunning protection!).
+            Paste in your sending Ethereum address. This ensures that no one
+            else can "steal" your proof for another account (frontrunning
+            protection!).
           </NumberedStep>
           <NumberedStep step={"4"}>
             Click <b>"Prove"</b>. Note it is completely client side and{" "}
-            <a href="https://github.com/zkemail/proof-of-twitter/" target="_blank" rel="noreferrer">open source</a>, 
-            and no server ever sees your private information.
+            <a
+              href="https://github.com/zkemail/proof-of-twitter/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              open source
+            </a>
+            , and no server ever sees your private information.
           </NumberedStep>
           <NumberedStep step={"5"}>
             Click <b>"Verify"</b> and then <b>"Mint Twitter Badge On-Chain"</b>,
-            and approve to mint the NFT badge that proves Twitter ownership! Note
-            that it is 700K gas right now so only feasible on Sepolia, though we
-            intend to reduce this soon.
+            and approve to mint the NFT badge that proves Twitter ownership!
+            Note that it is 700K gas right now so only feasible on Sepolia,
+            though we intend to reduce this soon.
           </NumberedStep>
         </div>
       </Col>
@@ -395,7 +417,8 @@ export const MainPage: React.FC<{}> = (props) => {
               )}
             </div>
           ) : null}
-          {inputMethod === "EML_FILE" || !import.meta.env.VITE_GOOGLE_CLIENT_ID ? (
+          {inputMethod === "EML_FILE" ||
+          !import.meta.env.VITE_GOOGLE_CLIENT_ID ? (
             <>
               {" "}
               <DragAndDropTextBox onFileDrop={onFileDrop} />

diff --git a/yarn.lock b/yarn.lock
@@ -4586,6 +4586,7 @@ __metadata:
     "@vitejs/plugin-react": ^4.2.1
     "@zk-email/helpers": ^6.1.3
     crypto-browserify: ^3.12.0
+    detectincognitojs: ^1.3.5
     jest: ^29.7.0
     jest-environment-jsdom: ^29.7.0
     jest-fetch-mock: ^3.0.3
@@ -6513,6 +6514,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detectincognitojs@npm:^1.3.5":
+  version: 1.3.5
+  resolution: "detectincognitojs@npm:1.3.5"
+  checksum: c812618a526cca98e47ac8a3871feaf6052c0e499eaf77b2eb65ad282172353cbb687a06bfc908bb05a9bdbc09bf6ed204ca06845dd1637b611fff9edf7b1d48
+  languageName: node
+  linkType: hard
+
 "detective-amd@npm:^3.1.0":
   version: 3.1.2
   resolution: "detective-amd@npm:3.1.2"