78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { useChains } from "@/context/ChainsContext";
|
|
import { ReloadIcon } from "@radix-ui/react-icons";
|
|
import { Info } from "lucide-react";
|
|
import { UseFormReturn, useFormState } from "react-hook-form";
|
|
|
|
interface ConfirmCreateMultisigProps {
|
|
readonly createMultisigForm: UseFormReturn<{ members: { member: string }[]; threshold: number }>;
|
|
}
|
|
|
|
export default function ConfirmCreateMultisig({ createMultisigForm }: ConfirmCreateMultisigProps) {
|
|
const { chain } = useChains();
|
|
const { isValid, isSubmitting, isSubmitted } = useFormState(createMultisigForm);
|
|
const { members, threshold } = createMultisigForm.getValues();
|
|
|
|
const loading = isSubmitting || isSubmitted;
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
onClick={(e) => {
|
|
createMultisigForm.trigger();
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className={"overflow-y-auto bg-fuchsia-900"} style={{ width: "auto" }}>
|
|
<DialogTitle>Create a new multisig on "{chain.chainDisplayName}"?</DialogTitle>
|
|
<h4 className="font-bold">Members</h4>
|
|
<div className="flex flex-col gap-2">
|
|
{members
|
|
.filter(({ member }) => member !== "")
|
|
.map(({ member }) => (
|
|
<div
|
|
key={member}
|
|
className="flex items-center space-x-2 rounded-md border p-2 transition-colors"
|
|
>
|
|
<div className="flex-1 space-y-1">
|
|
<p className="text-sm font-medium leading-none">{member}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center gap-1 text-sm text-secondary">
|
|
<Info className="text-secondary" />
|
|
<p>
|
|
{threshold} {threshold === 1 ? "signature" : "signatures"} needed to send a transaction.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<DialogClose asChild>
|
|
<Button variant="secondary" className="mt-4" disabled={loading}>
|
|
Cancel
|
|
</Button>
|
|
</DialogClose>
|
|
<Button type="submit" form="create-multisig-form" className="mt-4" disabled={loading}>
|
|
{loading ? <ReloadIcon className="mr-2 h-4 w-4 animate-spin" /> : null}
|
|
Create multisig
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|