[Dashboard] Vote contract proposal drawer (#4899)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the proposal creation UI components, replacing a `Drawer` with a `Sheet` for better user experience, and enhancing the proposal submission process with improved form handling and error management.

### Detailed summary
- Deleted `proposal-form.tsx`.
- Modified `metadata-header.tsx` className for better styling.
- Replaced `Flex` components with `div` for layout in `page.tsx`.
- Refactored `ProposalButton` to use `Sheet` instead of `Drawer`.
- Added form handling with `react-hook-form` in `ProposalButton`.
- Implemented error handling and user feedback with `toast` in the proposal submission process.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx

@@ -83,7 +83,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
             {chain && (
               <Link
                 href={`/${chain.slug}`}
-                className="flex shrink-0 items-center gap-2 rounded-3xl border border-border bg-muted/50 px-2.5 py-1.5 hover:bg-muted"
+                className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-muted/50 px-2.5 py-1.5 hover:bg-muted"
               >
                 <ChainIcon ipfsSrc={chain.icon?.url} size={16} />
                 {cleanedChainName && (

apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-button.tsx

@@ -1,12 +1,23 @@
 "use client";
 
-import { useDisclosure } from "@chakra-ui/react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { FormControl, Textarea } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
+import { useTrack } from "hooks/analytics/useTrack";
 import { PlusIcon } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
+import * as VoteExt from "thirdweb/extensions/vote";
 import { useSendAndConfirmTransaction } from "thirdweb/react";
-import { Button, Drawer } from "tw-components";
-import { CreateProposalForm } from "./proposal-form";
+import { Button, FormErrorMessage, FormLabel } from "tw-components";
 
 interface VoteButtonProps {
   contract: ThirdwebContract;
@@ -15,55 +26,93 @@ interface VoteButtonProps {
 const PROPOSAL_FORM_ID = "proposal-form-id";
 
 export const ProposalButton: React.FC<VoteButtonProps> = ({ contract }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
+  const [open, setOpen] = useState(false);
   const sendTx = useSendAndConfirmTransaction();
-
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<{ description: string }>();
+  const trackEvent = useTrack();
   return (
-    <>
-      <Drawer
-        size="md"
-        isOpen={isOpen}
-        onClose={onClose}
-        header={{ children: <>Create new proposal</> }}
-        footer={{
-          children: (
-            <>
-              <Button
-                isDisabled={sendTx.isPending}
-                variant="outline"
-                mr={3}
-                onClick={onClose}
-              >
-                Cancel
-              </Button>
-              <TransactionButton
-                txChainID={contract.chain.id}
-                transactionCount={1}
-                isLoading={sendTx.isPending}
-                form={PROPOSAL_FORM_ID}
-                type="submit"
-                colorScheme="primary"
-              >
-                Submit Proposal
-              </TransactionButton>
-            </>
-          ),
-        }}
-      >
-        <CreateProposalForm
-          formId={PROPOSAL_FORM_ID}
-          contract={contract}
-          sendTx={sendTx}
-        />
-      </Drawer>
-      <Button
-        colorScheme="primary"
-        onClick={onOpen}
-        leftIcon={<PlusIcon className="size-5" />}
-      >
-        Create Proposal
-      </Button>
-    </>
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          colorScheme="primary"
+          leftIcon={<PlusIcon className="size-5" />}
+        >
+          Create Proposal
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="z-[10000] w-full sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">
+        <SheetHeader>
+          <SheetTitle>Create new proposal</SheetTitle>
+        </SheetHeader>
+        <form
+          className="mt-10 flex flex-col gap-6"
+          id={PROPOSAL_FORM_ID}
+          onSubmit={handleSubmit((data) => {
+            const tx = VoteExt.propose({
+              contract,
+              calldatas: ["0x"],
+              values: [0n],
+              targets: [contract.address],
+              description: data.description,
+            });
+            toast.promise(
+              sendTx.mutateAsync(tx, {
+                onSuccess: () => {
+                  trackEvent({
+                    category: "vote",
+                    action: "create-proposal",
+                    label: "success",
+                  });
+                  setOpen(false);
+                },
+                onError: (error) => {
+                  console.error(error);
+                  trackEvent({
+                    category: "vote",
+                    action: "create-proposal",
+                    label: "error",
+                    error,
+                  });
+                },
+              }),
+              {
+                loading: "Creating proposal...",
+                success: "Proposal created successfully",
+                error: "Failed to create proposal",
+              },
+            );
+          })}
+        >
+          <FormControl isRequired isInvalid={!!errors.description}>
+            <FormLabel>Description</FormLabel>
+            <Textarea {...register("description")} />
+            <FormErrorMessage>{errors?.description?.message}</FormErrorMessage>
+          </FormControl>
+        </form>
+        <div className="mt-6 flex flex-row justify-end gap-3">
+          <Button
+            isDisabled={sendTx.isPending}
+            variant="outline"
+            onClick={() => setOpen(false)}
+          >
+            Cancel
+          </Button>
+          <TransactionButton
+            txChainID={contract.chain.id}
+            transactionCount={1}
+            isLoading={sendTx.isPending}
+            form={PROPOSAL_FORM_ID}
+            type="submit"
+            colorScheme="primary"
+          >
+            Submit
+          </TransactionButton>
+        </div>
+      </SheetContent>
+    </Sheet>
   );
 };

apps/dashboard/src/contract-ui/tabs/proposals/page.tsx

@@ -39,13 +39,13 @@ export const ContractProposalsPage: React.FC<ProposalsPageProps> = ({
 
   return (
     <Flex direction="column" gap={6}>
-      <Flex direction="row" justify="space-between" align="center">
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
         <Heading size="title.sm">Proposals</Heading>
-        <Flex gap={4}>
+        <div className="flex flex-col flex-wrap gap-3 md:flex-row">
           <DelegateButton contract={contract} />
           <ProposalButton contract={contract} />
-        </Flex>
-      </Flex>
+        </div>
+      </div>
       <div className="flex flex-col gap-4">
         {proposals.map((proposal) => (
           <Proposal