{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "evm-create2-demo",
  "type": "registry:component",
  "title": "EVM Create2 Demo",
  "description": "A demo of the EVM create2",
  "dependencies": [
    "lucide-react",
    "react-hook-form",
    "zod"
  ],
  "registryDependencies": [
    "card",
    "form",
    "https://ui.ednesdayw.com/r/create2.json",
    "https://ui.ednesdayw.com/r/wallet-address.json",
    "https://ui.ednesdayw.com/r/input.json"
  ],
  "files": [
    {
      "path": "src/registry/example/create2/evm-create2.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/components/ui/form\";\nimport { create2 } from \"@/lib/create2\";\nimport { isEVMAddress } from \"@/lib/wallet-address\";\nimport { Input } from \"@/components/ui/input\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\n\nconst formSchema = z.object({\n  implementation: z\n    .string()\n    .nonempty({\n      message: \"Implementation address is required\",\n    })\n    .refine((value) => isEVMAddress(value), {\n      message: \"Invalid implementation address\",\n    }),\n  deployer: z\n    .string()\n    .nonempty({\n      message: \"Deployer address is required\",\n    })\n    .refine((value) => isEVMAddress(value), {\n      message: \"Invalid deployer address\",\n    }),\n  salt: z\n    .string()\n    .nonempty({\n      message: \"Salt is required\",\n    })\n    .max(32, {\n      message: \"Salt must be less than 32 characters\",\n    }),\n});\n\nexport const PredictAddressDemo = () => {\n  const [predictAddress, setPredictAddress] = useState<`0x${string}`>();\n\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      implementation: \"\" as `0x${string}`,\n      deployer: \"\" as `0x${string}`,\n      salt: \"\",\n    },\n  });\n\n  const onSubmit = (values: z.infer<typeof formSchema>) => {\n    const address = create2({\n      implementation: values.implementation,\n      deployer: values.deployer,\n      salt: values.salt,\n    });\n\n    setPredictAddress(address as `0x${string}`);\n  };\n\n  return (\n    <Card className=\"w-full max-w-lg\">\n      <CardHeader>\n        <CardTitle>EVM Create2 Address</CardTitle>\n        <CardDescription>\n          Predict the address of the EVM contract using the implementation,\n          deployer, and salt\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form {...form}>\n          <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-2\">\n            <FormField\n              control={form.control}\n              name=\"implementation\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Implementation</FormLabel>\n                  <FormControl>\n                    <Input\n                      variant=\"bordered\"\n                      maxLength={42}\n                      placeholder=\"0x...\"\n                      {...field}\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n            <FormField\n              control={form.control}\n              name=\"deployer\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Deployer</FormLabel>\n                  <FormControl>\n                    <Input\n                      variant=\"bordered\"\n                      maxLength={42}\n                      placeholder=\"0x...\"\n                      {...field}\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n            <FormField\n              control={form.control}\n              name=\"salt\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Salt</FormLabel>\n                  <FormControl>\n                    <Input\n                      variant=\"bordered\"\n                      maxLength={32}\n                      placeholder=\"...\"\n                      {...field}\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n            <div className=\"flex flex-col gap-2 pt-2\">\n              {predictAddress && (\n                <p className=\"text-gray-700 font-medium text-center\">\n                  {predictAddress}\n                </p>\n              )}\n              <Button type=\"submit\" loading={form.formState.isSubmitting}>\n                Submit\n              </Button>\n            </div>\n          </form>\n        </Form>\n      </CardContent>\n    </Card>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/demo/evm-create2-demo.tsx"
    }
  ]
}