From 4b80b250b4c708b32ede244d09c26bf6a6e43aa8 Mon Sep 17 00:00:00 2001
From: kien-ngo <github@kien.ngo>
Date: Thu, 3 Oct 2024 17:11:43 +0000
Subject: [PATCH] [Dashboard] Vote contract proposal drawer (#4899)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 -->
---
 .../contract-header/metadata-header.tsx       |   2 +-
 .../proposals/components/proposal-button.tsx  | 151 ++++++++++++------
 .../proposals/components/proposal-form.tsx    |  75 ---------
 .../src/contract-ui/tabs/proposals/page.tsx   |   8 +-
 4 files changed, 105 insertions(+), 131 deletions(-)
 delete mode 100644 apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-form.tsx

diff --git a/apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx b/apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx
index b87a01fdcca..7b94eb1a545 100644
--- a/apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx
+++ b/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 && (
diff --git a/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-button.tsx b/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-button.tsx
index 69c32923fee..e2eadfe9a23 100644
--- a/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-button.tsx
+++ b/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>
   );
 };
diff --git a/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-form.tsx b/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-form.tsx
deleted file mode 100644
index f8e069cd43e..00000000000
--- a/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-form.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { FormControl, Textarea, useModalContext } from "@chakra-ui/react";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import type { ThirdwebContract } from "thirdweb";
-import * as VoteExt from "thirdweb/extensions/vote";
-import type { useSendAndConfirmTransaction } from "thirdweb/react";
-import { FormErrorMessage, FormLabel } from "tw-components";
-
-interface ProposalFormProps {
-  sendTx: ReturnType<typeof useSendAndConfirmTransaction>;
-  contract: ThirdwebContract;
-  formId: string;
-}
-
-export const CreateProposalForm: React.FC<ProposalFormProps> = ({
-  sendTx,
-  formId,
-  contract,
-}) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<{ description: string }>();
-  const trackEvent = useTrack();
-  const modalContext = useModalContext();
-
-  return (
-    <form
-      className="flex flex-col gap-6"
-      id={formId}
-      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",
-              });
-              modalContext.onClose();
-            },
-            onError: (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>
-  );
-};
diff --git a/apps/dashboard/src/contract-ui/tabs/proposals/page.tsx b/apps/dashboard/src/contract-ui/tabs/proposals/page.tsx
index ea1eb893250..11b101315d1 100644
--- a/apps/dashboard/src/contract-ui/tabs/proposals/page.tsx
+++ b/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