:fix: Handle error when no public field is present in the regex

package.json

@@ -31,7 +31,7 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@react-oauth/google": "^0.12.1",
-    "@zk-email/sdk": "1.0.0-2",
+    "@zk-email/sdk": "1.0.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.11.11",

src/app/(bluerpint-list)/BlueprintList.tsx

@@ -48,7 +48,7 @@ export default function BlueprintList({ search, filters, sort }: BlueprintListPr
             limit: PAGINATION_LIMIT,
             status: filters.length > 0 ? filters : undefined,
             sort: -1,
-            sortBy: sort as 'stars' | 'updatedAt',
+            sortBy: sort as 'stars' | 'updatedAt' | 'totalProofs',
           });
         } catch (err) {
           retryCount++;

src/app/(bluerpint-list)/FilterAndSortButton.tsx

@@ -150,6 +150,13 @@ const FilterAndSortButton = forwardRef<HTMLButtonElement, FilterAndSortButtonPro
                   handleSort('updatedAt', checked);
                 }}
               />
+              <Checkbox
+                title="Total Proofs"
+                checked={sort === 'totalProofs'}
+                onCheckedChange={(checked: boolean) => {
+                  handleSort('totalProofs', checked);
+                }}
+              />
             </div>
           </div>
         )}

src/app/(bluerpint-list)/page.tsx

@@ -42,7 +42,7 @@ function BlueprintListWrapper() {
   const search = searchParams.get('search');
   const filters =
     (searchParams.get('filter')?.split(',').filter(Boolean) as unknown as Status[]) || [];
-  const sort = searchParams.get('sort') || '';
+  const sort = searchParams.get('sort') || 'totalProofs';
 
   return (
     <div className="">

src/app/[id]/proofs/[proofId]/page.tsx

@@ -214,7 +214,7 @@ const ProofInfo = ({ params }: { params: Promise<{ id: string; proofId: string }
               />
             }
           >
-            Verify On-chain
+            Verify
           </Button>
           <Button
             className="flex flex-row gap-2"

src/app/components/BlueprintCard.tsx

@@ -54,6 +54,10 @@ const BlueprintCard = ({ blueprint, setStarred, setUnStarred, starred }: Bluepri
                 {getStatusName(blueprint.props.status)}
               </span>
             )}
+            <span className="flex flex-row items-center gap-1 rounded-lg px-2 py-1 font-medium text-grey-800">
+            <Image width={16} height={16} src="/assets/Users.svg" alt="views" />
+            {blueprint.props.totalProofs}
+          </span>
             <button
               onClick={onStar}
               className="flex flex-row gap-1 rounded-md border border-grey-500 bg-neutral-200 px-2 py-1 text-grey-800"

src/app/components/BlueprintTitle.tsx

@@ -21,19 +21,6 @@ export const BlueprintTitle = ({
   starBlueprint,
 }: BlueprintTitleProps) => {
   const token = useAuthStore((state) => state.token);
-  const [numProofs, setNumProofs] = useState(0);
-
-  useEffect(() => {
-    if (!blueprint || !blueprint.getNumOfRemoteProofs) return;
-    blueprint
-      .getNumOfRemoteProofs()
-      .then((remoteProofs) => {
-        setNumProofs(remoteProofs + (blueprint.props.numLocalProofs || 0) || 0);
-      })
-      .catch((err) => {
-        console.error('Failed to get remote proofs for blueprint: ', err);
-      });
-  }, [blueprint]);
 
   const handleStarClick = () => {
     if (!token) {
@@ -56,7 +43,7 @@ export const BlueprintTitle = ({
         <div className="flex items-center gap-3 text-sm">
           <span className="flex flex-row items-center gap-1 rounded-lg px-2 py-1 font-medium text-grey-800">
             <Image width={16} height={16} src="/assets/Users.svg" alt="views" />
-            {numProofs}
+            {blueprint.props.totalProofs}
           </span>
           <button
             onClick={handleStarClick}

src/app/contexts/GoogleAuthProvider.tsx

@@ -98,6 +98,7 @@ const GoogleAuthProvider = ({ children }: ProvidersProps) => {
       scope: 'email profile https://www.googleapis.com/auth/gmail.readonly',
       flow: 'implicit',
       ux_mode: 'redirect',
+      prompt: 'consent',
     } as UseGoogleLoginOptionsImplicitFlow);
 
   const googleLogOut = () => {

src/app/create/[id]/createBlueprintSteps/ExtractFields.tsx

@@ -114,6 +114,9 @@ const ExtractFields = ({
   const [regexGeneratedOutputs, setRegexGeneratedOutputs] = useState<string[]>(
     Array(store.decomposedRegexes?.length ?? 0).fill('')
   );
+  const [regexGeneratedOutputErrors, setRegexGeneratedOutputErrors] = useState<string[]>(
+    Array(store.decomposedRegexes?.length ?? 0).fill('')
+  );
 
   const [isExtractSubjectChecked, setIsExtractSubjectChecked] = useState(false);
   const [isExtractReceiverChecked, setIsExtractReceiverChecked] = useState(false);
@@ -149,32 +152,37 @@ const ExtractFields = ({
               revealPrivateFields
             );
 
+            const outputUpdated =
+              JSON.stringify(regexOutputs) !== JSON.stringify(regexGeneratedOutputs[index]);
+
             setRegexGeneratedOutputs((prev) => {
               const updated = [...prev];
               // @ts-ignore
               updated[index] = regexOutputs;
               return updated;
             });
 
-            // // update the max length of the regex at that particular index
-            const decomposedRegexes = [...store.decomposedRegexes];
-            decomposedRegexes[index].maxLength = regexOutputs[0].length ?? 64;
-            setField('decomposedRegexes', decomposedRegexes);
+            setRegexGeneratedOutputErrors((prev) => {
+              const updated = [...prev];
+              // @ts-ignore
+              updated[index] = '';
+              return updated;
+            });
+
+            // update the max length of the regex at that particular index
+            // Only update when the output changes, so we can still set maxLength
+            if (outputUpdated) {
+              const totalLength = regexOutputs.reduce((acc, cur) => (acc += cur.length), 0);
+              const decomposedRegexes = [...store.decomposedRegexes];
+              decomposedRegexes[index].maxLength = totalLength ?? 64;
+              setField('decomposedRegexes', decomposedRegexes);
+            }
           } catch (error) {
             console.error('Error testing decomposed regex:', error);
-            setRegexGeneratedOutputs((prev) => {
+            setRegexGeneratedOutputErrors((prev) => {
               const updated = [...prev];
-
-              if (regex.parts.filter((part) => part.isPublic).length === 0) {
-                // @ts-ignore
-                updated[index] = [
-                  'Error: Empty regex — you must define at least one public part for each pattern.',
-                ];
-              } else {
-                // @ts-ignore
-                updated[index] = ['Error: ' + error];
-              }
-
+              // @ts-ignore
+              updated[index] = 'Error: ' + error;
               return updated;
             });
           }
@@ -615,6 +623,9 @@ const ExtractFields = ({
                     setField('decomposedRegexes', updatedRegexes);
 
                     setRegexGeneratedOutputs(regexGeneratedOutputs.filter((_, i) => i !== index));
+                    setRegexGeneratedOutputErrors(
+                      regexGeneratedOutputErrors.filter((_, i) => i !== index)
+                    );
                   }}
                 >
                   Delete
@@ -826,27 +837,36 @@ const ExtractFields = ({
                   </Button>
                 </div>
                 {/* Only show output if there are regex parts and valid outputs */}
-                {parseRegexParts(regex.parts).length > 0 &&
-                regexGeneratedOutputs[index] !== undefined &&
-                regexGeneratedOutputs[index] !== null &&
-                regexGeneratedOutputs[index].length > 0 ? (
+                {regex.parts.some((p: any) => p.isPublic) ? (
+                  parseRegexParts(regex.parts).length > 0 &&
+                  regexGeneratedOutputs[index] !== undefined &&
+                  regexGeneratedOutputs[index] !== null &&
+                  regexGeneratedOutputs[index].length > 0 ? (
+                    <>
+                      <Label>Output</Label>
+                      <div
+                        className={`rounded-lg border p-2 text-sm ${
+                          regexGeneratedOutputErrors[index]
+                            ? 'border-red-500 bg-red-100'
+                            : 'border-grey-500 bg-neutral-100'
+                        }`}
+                      >
+                        {regexGeneratedOutputErrors[index]
+                          ? JSON.stringify(regexGeneratedOutputErrors[index])
+                          : regexGeneratedOutputs
+                            ? `${regex.name}: ${JSON.stringify(regexGeneratedOutputs[index])}`
+                            : ''}
+                      </div>
+                    </>
+                  ) : null
+                ) : (
                   <>
                     <Label>Output</Label>
-                    <div
-                      className={`rounded-lg border p-2 text-sm ${
-                        JSON.stringify(regexGeneratedOutputs[index]).includes('Error:')
-                          ? 'border-red-500 bg-red-100'
-                          : 'border-grey-500 bg-neutral-100'
-                      }`}
-                    >
-                      {JSON.stringify(regexGeneratedOutputs[index]).includes('Error: ')
-                        ? JSON.stringify(regexGeneratedOutputs[index])
-                        : regexGeneratedOutputs
-                          ? `${regex.name}: ${JSON.stringify(regexGeneratedOutputs[index])}`
-                          : ''}
+                    <div className={`rounded-lg border border-red-500 bg-red-100 p-2 text-sm`}>
+                      Please add at least one public regex
                     </div>
                   </>
-                ) : null}
+                )}
               </div>
             </div>
           );

src/app/create/[id]/page.tsx

@@ -1,16 +1,5 @@
 'use client';
 
-// Test decomposedRegex
-/*
-[
-          {
-            "isPublic": true,
-            "regexDef": "Hi!"
-          }
-        ]
-
-*/
-
 import { useCreateBlueprintStore } from './store';
 
 import { use, useEffect, useState } from 'react';
@@ -190,11 +179,11 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
       setDkimSelector(selector);
 
       if (
-        (store.senderDomain !== senderDomain ||
-          store.emailQuery !== emailQuery ||
-          store.emailHeaderMaxLength !== (Math.ceil(headerLength / 64) + 7) * 64 ||
-          store.emailBodyMaxLength !== (Math.ceil(emailBodyMaxLength / 64) + 7) * 64) &&
-        !updateFields && id !== 'new'
+        (store.senderDomain !== senderDomain || store.emailQuery !== emailQuery) &&
+        store.emailBodyMaxLength !== (Math.ceil(emailBodyMaxLength / 64) + 7) * 64 &&
+        store.emailHeaderMaxLength !== (Math.ceil(headerLength / 64) + 7) * 64 &&
+        !updateFields &&
+        id !== 'new'
       ) {
         setIsConfirmInputsUpdateModalOpen(true);
         return;
@@ -210,12 +199,16 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
       }
       console.error('Failed to get content from email', err);
       if (savedEmls[id]) {
-        toast.error('Invalid email');
+        if (typeof err === 'string') {
+          toast.error(err);
+        } else {
+          toast.error('Invalid email');
+        }
       }
       return;
     }
 
-    // Bleurpint was not defined yet, skip testing email against blueprint
+    // Blueprint was not defined yet, skip testing email against blueprint
     if (id === 'new') return;
 
     try {
@@ -261,7 +254,7 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
     if (!savedEmls[id]) {
       setIsFileInvalid(false);
     }
-  }, [JSON.stringify(store.decomposedRegexes), savedEmls[id], revealPrivateFields]);
+  }, [savedEmls[id]]);
 
   // Create a debounced version of the DKIM verification
   const debouncedVerifyDKIM = debounce(async (domain: string, selector: string | null) => {
@@ -302,6 +295,12 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
     };
   }, [JSON.stringify(store.senderDomain), dkimSelector, step]);
 
+  useEffect(() => {
+    if (step === '2') {
+      genrateHighlightRegexContent();
+    }
+  }, [JSON.stringify(store.decomposedRegexes), savedEmls[id]]);
+
   const isNextButtonDisabled = () => {
     if (!savedEmls[id] || isFileInvalid) {
       return true;
@@ -364,12 +363,6 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
     );
   }
 
-  useEffect(() => {
-    if (step === '2') {
-      genrateHighlightRegexContent();
-    }
-  }, [JSON.stringify(store.decomposedRegexes), savedEmls[id]]);
-
   const genrateHighlightRegexContent = async () => {
     if (!savedEmls[id]) {
       return;

src/app/create/[id]/store.ts

@@ -37,11 +37,11 @@ const initialState: BlueprintProps = {
   tags: [],
   emailQuery: '',
   circuitName: '',
-  ignoreBodyHashCheck: false,
+  ignoreBodyHashCheck: true,
   shaPrecomputeSelector: '',
   emailBodyMaxLength: 1024,
   emailHeaderMaxLength: 10240,
-  removeSoftLinebreaks: true,
+  removeSoftLinebreaks: false,
   githubUsername: '',
   senderDomain: '',
   enableHeaderMasking: false,
@@ -135,9 +135,9 @@ export const useCreateBlueprintStore = create<CreateBlueprintState>()(
         const savedEmls = JSON.parse(localStorage.getItem('blueprintEmls') || '{}');
 
         // Page logic should already prevent saving a draft without having a file
-        if (!state.file && !savedEmls[state.id ?? 'new']) {
-          throw new Error('Can only save a draft with an example email provided');
-        }
+        // if (!state.file && !savedEmls[state.id ?? 'new']) {
+        //   throw new Error('Can only save a draft with an example email provided');
+        // }
 
         // Remove functions from the state data and clone
         const data = JSON.parse(

src/app/layout.tsx

@@ -35,7 +35,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="">
+    <html lang="" suppressHydrationWarning>
       <body className={`${fustat.className} flex min-h-screen flex-col bg-[#F5F3EF] antialiased`}>
         <Suspense>
           <ThemeProvider attribute="class">

src/app/user/blueprints/page.tsx

@@ -39,7 +39,7 @@ function BlueprintListWrapper() {
 
   const filters =
     (searchParams.get('filter')?.split(',').filter(Boolean) as unknown as Status[]) || [];
-  const sort = searchParams.get('sort') || '';
+  const sort = searchParams.get('sort') || 'totalProofs';
 
   return (
     <div className="">