64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import {
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { ClipboardEventHandler } from "react";
|
|
import { UseFormReturn, useFieldArray } from "react-hook-form";
|
|
import { useChains } from "../../../context/ChainsContext";
|
|
import { exampleAddress, examplePubkey } from "../../../lib/displayHelpers";
|
|
|
|
interface MemberFormFieldProps {
|
|
readonly createMultisigForm: UseFormReturn<{ members: { member: string }[]; threshold: number }>;
|
|
readonly index: number;
|
|
}
|
|
|
|
export default function MemberFormField({ createMultisigForm, index }: MemberFormFieldProps) {
|
|
const { chain } = useChains();
|
|
const { replace } = useFieldArray({ name: "members", control: createMultisigForm.control });
|
|
|
|
const onPaste: ClipboardEventHandler<HTMLInputElement> = (ev) => {
|
|
const rawData = ev.clipboardData.getData("text");
|
|
const csv = rawData.split(",");
|
|
const finalValues =
|
|
csv.length > 1
|
|
? csv.map((el) => el.trim()).filter((el) => el !== "")
|
|
: rawData
|
|
.replace(/\n/g, " ")
|
|
.split(" ")
|
|
.map((el) => el.trim())
|
|
.filter((el) => el !== "");
|
|
|
|
replace(finalValues.map((el) => ({ member: el })));
|
|
|
|
ev.preventDefault();
|
|
};
|
|
|
|
return (
|
|
<FormField
|
|
control={createMultisigForm.control}
|
|
name={`members.${index}.member`}
|
|
render={() => (
|
|
<FormItem>
|
|
<FormLabel>Member #{index + 1}</FormLabel>
|
|
<FormDescription>Address or public key</FormDescription>
|
|
<FormControl>
|
|
<Input
|
|
placeholder={`E.g. "${
|
|
index % 2 === 0 ? exampleAddress(index, chain.addressPrefix) : examplePubkey(index)
|
|
}"`}
|
|
onPaste={index === 0 ? onPaste : undefined}
|
|
{...createMultisigForm.register(`members.${index}.member`)}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
);
|
|
}
|