feat: max length changes

bun.lock

@@ -18,7 +18,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.4.1-2",
+        "@zk-email/sdk": "2.0.1-6",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "framer-motion": "^11.11.11",
@@ -398,9 +398,9 @@
 
     "@zk-email/helpers": ["@zk-email/[email protected]", "", { "dependencies": { "addressparser": "^1.0.1", "atob": "^2.1.2", "circomlibjs": "^0.1.7", "libmime": "^5.2.1", "localforage": "^1.10.0", "node-forge": "^1.3.1", "pako": "^2.1.0", "psl": "^1.9.0", "snarkjs": "https://github.com/sampritipanda/snarkjs.git#fef81fc51d17a734637555c6edbd585ecda02d9e" } }, "sha512-0S49A5cezcnCR98qAw/zJfjr8l/uFy20BcPxS8ADXNA9RVp4cUB2EQ4imRqnAg8ZoM+C/D+si1h/9KkW9qrJyw=="],
 
-    "@zk-email/relayer-utils": ["@zk-email/[email protected]2", "", {}, "sha512-4bf3g9kkauQqr3IncB/oidwP9seYR1BZ4pdHTiND89zL287QWEJkQAvKfF3neNA34ZsY1f3omCsylCMGJJrwQA=="],
+    "@zk-email/relayer-utils": ["@zk-email/[email protected]4", "", {}, "sha512-Fyx93d909uxbaCZHm/C44dge1s3s5h+4pFMylCqPwb2b1Gj+wmfJwYNM1zsZcQeJowFVkqlUJeJ3rYIBlJyhkg=="],
 
-    "@zk-email/sdk": ["@zk-email/sdk@1.4.1-2", "", { "dependencies": { "@azure/msal-browser": "^4.5.1", "@mach-34/noir-bignum-paramgen": "^1.1.2", "@peculiar/webcrypto": "^1.5.0", "@zk-email/relayer-utils": "0.4.66-2", "@zk-email/snarkjs": "^0.0.1", "@zk-email/zkemail-nr": "1.3.3-3", "ethers": "^6.13.4", "jszip": "^3.10.1", "poseidon-lite": "^0.3.0", "rsa-key": "^0.0.6", "snarkjs": "^0.7.5", "viem": "^2.21.53", "zod": "^3.23.8" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-W3xCOzVeU/miasnyzpmS/Wa9qdMRE5xN1kSiq/qd5cWXikFPHfN0XX8YMD/6XpPcUW6FkO3LclX6Lgi0cclHyA=="],
+    "@zk-email/sdk": ["@zk-email/sdk@2.0.1-6", "", { "dependencies": { "@azure/msal-browser": "^4.5.1", "@mach-34/noir-bignum-paramgen": "^1.1.2", "@peculiar/webcrypto": "^1.5.0", "@zk-email/relayer-utils": "0.4.66-4", "@zk-email/snarkjs": "^0.0.1", "@zk-email/zkemail-nr": "1.3.3-3", "ethers": "^6.13.4", "jszip": "^3.10.1", "poseidon-lite": "^0.3.0", "rsa-key": "^0.0.6", "snarkjs": "^0.7.5", "viem": "^2.21.53", "zod": "^3.23.8" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-HxsIGd1MdrRT5NxCaFP6WW9aiKUMOHyjHy9sMxmHjmJ6EewK2PwrjDNg+gEcguXd7MLDJsh9s8yk2kRzUrYFbw=="],
 
     "@zk-email/snarkjs": ["@zk-email/[email protected]", "", { "dependencies": { "@iden3/binfileutils": "0.0.12", "bfj": "^7.0.2", "blake2b-wasm": "^2.4.0", "circom_runtime": "0.1.28", "ejs": "^3.1.6", "fastfile": "0.0.20", "ffjavascript": "0.3.1", "js-sha3": "^0.8.0", "logplease": "^1.2.15", "r1csfile": "0.0.48" }, "bin": { "snarkjs": "build/cli.cjs" } }, ""],
 

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.4.1-2",
+    "@zk-email/sdk": "2.0.1-6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.11.11",

src/app/components/Navbar.tsx

@@ -15,11 +15,6 @@ const Navbar = () => {
   const searchParams = useSearchParams();
   const { search, filters, sort } = useBlueprintFiltersStore();
 
-  const handleCreateBlueprint = () => {
-    localStorage.removeItem('create-blueprint');
-    router.push('/create');
-  };
-
   // Handle logo click to preserve filters and sort when on home page
   const handleLogoClick = () => {
     if (pathname === '/') {
@@ -44,6 +39,11 @@ const Navbar = () => {
     }
   };
 
+  const handleCreateBlueprint = () => {
+    localStorage.removeItem('create-blueprint');
+    router.push('/create');
+  };
+
   return (
     <nav className="flex items-center justify-between border-b bg-white px-6 py-3 dark:border-grey-800 dark:bg-black">
       <button

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

@@ -7,13 +7,20 @@ import { Select } from '@/components/ui/select';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
 import Image from 'next/image';
-import { DecomposedRegex, ExternalInput, parseEmail, testDecomposedRegex } from '@zk-email/sdk';
+import {
+  DecomposedRegex,
+  DecomposedRegexPart,
+  ExternalInput,
+  parseEmail,
+  testDecomposedRegex,
+} from '@zk-email/sdk';
 import { toast } from 'react-toastify';
 import { posthog } from 'posthog-js';
 import { Separator } from '@/components/ui/separator';
 import Link from 'next/link';
 import { REGEX_COLORS } from '@/app/constants';
 import { Checkbox } from '@/components/ui/checkbox';
+import { Switch } from '@/components/ui/switch';
 
 const AIPromptInput = ({
   aiPrompt,
@@ -471,7 +478,7 @@ const ExtractFields = ({
                             {
                               isPublic: true,
                               regexDef:
-                                "[A-Za-z0-9!#$%&'\\*\\+-/=\\?\\^_`{\\|}~\\.]+@[A-Za-z0-9\\.-]+",
+                                "[A-Za-z0-9!#$%&'\\*\\+\\-\\/=\\?\\^_`{\\|}~\\.]+@[A-Za-z0-9\\.-]+",
                             },
                             {
                               isPublic: false,
@@ -503,7 +510,7 @@ const ExtractFields = ({
                           parts: [
                             {
                               isPublic: false,
-                              regexDef: '(\r\n|^)from:[^\r\n]*@',
+                              regexDef: '(?:\r\n|^)from:[^\r\n]*@',
                             },
                             {
                               isPublic: true,
@@ -663,17 +670,6 @@ const ExtractFields = ({
                     { label: 'Email Header', value: 'header' },
                   ]}
                 />
-                <Input
-                  title="Max Length"
-                  placeholder="64"
-                  type="number"
-                  value={regex.maxLength}
-                  onChange={(e) => {
-                    const updatedRegexes = [...store.decomposedRegexes];
-                    updatedRegexes[index] = { ...regex, maxLength: parseInt(e.target.value) };
-                    setField('decomposedRegexes', updatedRegexes);
-                  }}
-                />
                 <Checkbox
                   title="Hash Public Output"
                   checked={regex.isHashed}
@@ -726,54 +722,54 @@ const ExtractFields = ({
                           </span>
                           <Label>Field</Label>
                         </div>
-                        <Button
-                          variant="destructive"
-                          size="smIcon"
-                          onClick={() => {
-                            const parts = parseRegexParts(regex.parts);
-                            parts.splice(partIndex, 1);
-                            const updatedRegexes = [...store.decomposedRegexes];
-                            updatedRegexes[index] = {
-                              ...regex,
-                              parts: parts,
-                            };
-                            setField('decomposedRegexes', updatedRegexes);
-                          }}
-                        >
-                          <Image
-                            src="/assets/Trash.svg"
-                            alt="trash"
-                            width={16}
-                            height={16}
-                            style={{
-                              maxWidth: '100%',
-                              height: 'auto',
+                        <div className="flex flex-row items-center gap-2">
+                          <div className="flex flex-row items-center gap-2">
+                            <Switch
+                              id={`${regex.name}-${partIndex}-isPublic`}
+                              className="mr-2"
+                              checked={!part.isPublic}
+                              onCheckedChange={(checked) => {
+                                const parts = parseRegexParts(regex.parts);
+                                parts[partIndex].isPublic = !checked;
+                                const updatedRegexes = [...store.decomposedRegexes];
+                                updatedRegexes[index] = {
+                                  ...regex,
+                                  parts: parts,
+                                };
+                                setField('decomposedRegexes', updatedRegexes);
+                              }}
+                            />
+                            <Label htmlFor={`${regex.name}-${partIndex}-isPublic`}>Private</Label>
+                          </div>
+
+                          <Button
+                            variant="destructive"
+                            size="smIcon"
+                            onClick={() => {
+                              const parts = parseRegexParts(regex.parts);
+                              parts.splice(partIndex, 1);
+                              const updatedRegexes = [...store.decomposedRegexes];
+                              updatedRegexes[index] = {
+                                ...regex,
+                                parts: parts,
+                              };
+                              setField('decomposedRegexes', updatedRegexes);
                             }}
-                          />
-                        </Button>
-                      </div>
-                      <div className="ml-3 flex flex-col gap-3">
-                        <Label>Public / Private</Label>
-                        <Select
-                          value={part.isPublic ? 'public' : 'private'}
-                          onChange={(value) => {
-                            const parts = parseRegexParts(regex.parts);
-                            parts[partIndex].isPublic = value === 'public';
-                            const updatedRegexes = [...store.decomposedRegexes];
-                            updatedRegexes[index] = {
-                              ...regex,
-                              parts: parts,
-                            };
-                            setField('decomposedRegexes', updatedRegexes);
-                          }}
-                          options={[
-                            { label: 'Public', value: 'public' },
-                            { label: 'Private', value: 'private' },
-                          ]}
-                        />
+                          >
+                            <Image
+                              src="/assets/Trash.svg"
+                              alt="trash"
+                              width={16}
+                              height={16}
+                              style={{
+                                maxWidth: '100%',
+                                height: 'auto',
+                              }}
+                            />
+                          </Button>
+                        </div>
                       </div>
-                      <div className="ml-3 flex flex-col gap-3">
-                        <Label>Define Regex</Label>
+                      <div className="flex flex-col gap-3">
                         <div className="relative">
                           <Input
                             value={part.regexDef?.replace(/\r/g, '\\r').replace(/\n/g, '\\n')}
@@ -800,6 +796,43 @@ const ExtractFields = ({
                             placeholder="Enter regex definition"
                           />
                         </div>
+                        {part.isPublic ? (
+                          <div className="relative mx-3">
+                            <Label>Max Length</Label>
+                            <Input
+                              value={part.maxLength}
+                              onChange={(e) => {
+                                const parts: DecomposedRegexPart[] = [
+                                  ...parseRegexParts(regex.parts),
+                                ];
+                                const rawValue = e.target.value;
+                                console.log(rawValue, 'rawValue');
+                                parts[partIndex] = {
+                                  ...parts[partIndex],
+                                  maxLength: parseInt(rawValue),
+                                };
+                                const updatedRegexes = [...store.decomposedRegexes];
+                                const updatedMaxLength = parts.reduce((acc: number, p: any) => {
+                                  const partMax =
+                                    p && p.isPublic && typeof p.maxLength === 'number'
+                                      ? p.maxLength
+                                      : 0;
+                                  return acc + partMax;
+                                }, 0);
+                                updatedRegexes[index] = {
+                                  ...regex,
+                                  parts: parts,
+                                  maxMatchLength:
+                                    updatedMaxLength > (updatedRegexes[index].maxLength ?? 0)
+                                      ? updatedMaxLength
+                                      : updatedRegexes[index].maxLength,
+                                };
+                                setField('decomposedRegexes', updatedRegexes);
+                              }}
+                              placeholder="Enter max length for this regex"
+                            />
+                          </div>
+                        ) : null}
                       </div>
                     </div>
                   );

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

@@ -147,16 +147,27 @@ export const useCreateBlueprintStore = create<CreateBlueprintState>()(
           )
         ) as BlueprintProps;
 
-        console.log('Creating blueprint with: ', data);
-
+
         // Parse decomposedRegexes since we are saving them as string to make handling TextArea easier
+        // TODO: need to add the maxmatch length and max length per public part in the client side for user
         data.decomposedRegexes?.forEach((dcr) => {
           dcr.parts =
-            typeof dcr.parts === 'string'
-              ? (JSON.parse((dcr.parts as unknown as string).trim()) as DecomposedRegexPart[])
-              : dcr.parts;
+          typeof dcr.parts === 'string'
+          ? (JSON.parse((dcr.parts as unknown as string).trim()) as DecomposedRegexPart[])
+          : dcr.parts;
           dcr.maxLength = dcr.maxLength || 64;
+          dcr.maxMatchLength = dcr.maxMatchLength || 64;
+          dcr.isHashed = dcr.isHashed || false;
+
+
+          dcr.parts?.forEach((part) => {
+            if (part.isPublic) {
+              part.maxLength = part.maxLength || 64;
+            }
+          });
         });
+
+        console.log('Creating blueprint with: ', data);
 
         const githubUserName = useAuthStore.getState().username;
         data.githubUsername = githubUserName ?? '';