EVM Create2 Demo

1import { Button } from "@/components/ui/button";
2import {
3  Card,
4  CardContent,
5  CardDescription,
6  CardHeader,
7  CardTitle,
8} from "@/components/ui/card";
9import {
10  Form,
11  FormControl,
12  FormField,
13  FormItem,
14  FormLabel,
15  FormMessage,
16} from "@/components/ui/form";
17import { create2 } from "@/lib/create2";
18import { isEVMAddress } from "@/lib/wallet-address";
19import { Input } from "@/components/ui/input";
20import { zodResolver } from "@hookform/resolvers/zod";
21import { useState } from "react";
22import { useForm } from "react-hook-form";
23import { z } from "zod";
24 
25const formSchema = z.object({
26  implementation: z
27    .string()
28    .nonempty({
29      message: "Implementation address is required",
30    })
31    .refine((value) => isEVMAddress(value), {
32      message: "Invalid implementation address",
33    }),
34  deployer: z
35    .string()
36    .nonempty({
37      message: "Deployer address is required",
38    })
39    .refine((value) => isEVMAddress(value), {
40      message: "Invalid deployer address",
41    }),
42  salt: z
43    .string()
44    .nonempty({
45      message: "Salt is required",
46    })
47    .max(32, {
48      message: "Salt must be less than 32 characters",
49    }),
50});
51 
52export const PredictAddressDemo = () => {
53  const [predictAddress, setPredictAddress] = useState<`0x${string}`>();
54 
55  const form = useForm<z.infer<typeof formSchema>>({
56    resolver: zodResolver(formSchema),
57    defaultValues: {
58      implementation: "" as `0x${string}`,
59      deployer: "" as `0x${string}`,
60      salt: "",
61    },
62  });
63 
64  const onSubmit = (values: z.infer<typeof formSchema>) => {
65    const address = create2({
66      implementation: values.implementation,
67      deployer: values.deployer,
68      salt: values.salt,
69    });
70 
71    setPredictAddress(address as `0x${string}`);
72  };
73 
74  return (
75    <Card className="w-full max-w-lg">
76      <CardHeader>
77        <CardTitle>EVM Create2 Address</CardTitle>
78        <CardDescription>
79          Predict the address of the EVM contract using the implementation,
80          deployer, and salt
81        </CardDescription>
82      </CardHeader>
83      <CardContent>
84        <Form {...form}>
85          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
86            <FormField
87              control={form.control}
88              name="implementation"
89              render={({ field }) => (
90                <FormItem>
91                  <FormLabel>Implementation</FormLabel>
92                  <FormControl>
93                    <Input
94// … truncated