Dashboard: migrate contract/proposals from chakra to tailwind

Author: MananTank

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx

@@ -1,26 +1,24 @@
 "use client";
 
-import { Divider, Flex, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
-import { Card } from "chakra/card";
-import { Heading } from "chakra/heading";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import * as VoteExt from "thirdweb/extensions/vote";
 import { useActiveAccount, useReadContract } from "thirdweb/react";
 import { voteTokenBalances } from "@/hooks/useVote";
+import { StatCard } from "../overview/components/stat-card";
 import { DelegateButton } from "./components/delegate-button";
 import { Proposal } from "./components/proposal";
 import { ProposalButton } from "./components/proposal-button";
 
-interface ProposalsPageProps {
+type ProposalsPageProps = {
   contract: ThirdwebContract;
   isLoggedIn: boolean;
-}
+};
 
-export const ContractProposalsPage: React.FC<ProposalsPageProps> = ({
+export function ContractProposalsPage({
   contract,
   isLoggedIn,
-}) => {
+}: ProposalsPageProps) {
   const address = useActiveAccount()?.address;
   const proposalsQuery = useReadContract(VoteExt.getAll, {
     contract,
@@ -41,38 +39,53 @@ export const ContractProposalsPage: React.FC<ProposalsPageProps> = ({
   });
 
   return (
-    <Flex direction="column" gap={6}>
-      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        <Heading size="title.sm">Proposals</Heading>
+    <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between mb-4">
+        <h2 className="text-2xl font-semibold tracking-tight">Proposals</h2>
         <div className="flex flex-col flex-wrap gap-3 md:flex-row">
           <DelegateButton contract={contract} isLoggedIn={isLoggedIn} />
           <ProposalButton contract={contract} isLoggedIn={isLoggedIn} />
         </div>
       </div>
-      <div className="flex flex-col gap-4">
-        {proposals.map((proposal) => (
-          <Proposal
-            contract={contract}
-            isLoggedIn={isLoggedIn}
-            key={proposal.proposalId.toString()}
-            proposal={proposal}
-          />
-        ))}
-        <Divider />
-        <Heading size="title.sm">Voting Tokens</Heading>
-        <div className="flex flex-row gap-2">
+
+      <div className="mb-6">
+        {proposals.length > 0 && (
+          <div className="space-y-6">
+            {proposals.map((proposal) => (
+              <Proposal
+                contract={contract}
+                isLoggedIn={isLoggedIn}
+                key={proposal.proposalId.toString()}
+                proposal={proposal}
+              />
+            ))}
+          </div>
+        )}
+
+        {proposals.length === 0 && (
+          <div className="flex flex-col gap-2 py-20 border rounded-md bg-card justify-center items-center">
+            <p className="text-muted-foreground">No proposals found</p>
+          </div>
+        )}
+      </div>
+
+      <div>
+        <h2 className="text-lg font-semibold mb-2">Voting Tokens</h2>
+        <div className="flex flex-row gap-3">
           {voteTokenBalancesQuery.data?.map((balance) => (
-            <Card as={Stat} key={balance.address} maxWidth="240px">
-              <StatLabel>
-                {balance.address?.toLowerCase() === address?.toLowerCase()
+            <StatCard
+              isPending={voteTokenBalancesQuery.isPending}
+              label={
+                balance.address?.toLowerCase() === address?.toLowerCase()
                   ? "Your Balance"
-                  : "Contract Balance"}
-              </StatLabel>
-              <StatNumber>{balance.balance}</StatNumber>
-            </Card>
+                  : "Contract Balance"
+              }
+              value={balance.balance}
+              key={balance.address}
+            />
           ))}
         </div>
       </div>
-    </Flex>
+    </div>
   );
-};
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/delegate-button.tsx

@@ -6,6 +6,7 @@ import { useActiveAccount, useReadContract } from "thirdweb/react";
 import { TransactionButton } from "@/components/tx-button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { tokensDelegated, useDelegateMutation } from "@/hooks/useVote";
+import { parseError } from "@/utils/errorParser";
 
 interface VoteButtonProps {
   contract: ThirdwebContract;
@@ -33,24 +34,25 @@ export const DelegateButton: React.FC<VoteButtonProps> = ({
   return (
     <ToolTipLabel label="You need to delegate tokens to this contract before you can make proposals and vote.">
       <TransactionButton
+        size="sm"
+        variant="default"
         client={contract.client}
         isLoggedIn={isLoggedIn}
         isPending={delegateMutation.isPending}
-        onClick={() => {
-          toast.promise(
-            delegateMutation.mutateAsync(contract, {
-              onError: (error) => {
-                console.error(error);
-              },
-            }),
-            {
-              error: "Error delegating tokens",
-              loading: "Delegating tokens...",
-              success: "Tokens delegated",
+        onClick={async () => {
+          await delegateMutation.mutateAsync(contract, {
+            onError: (error) => {
+              toast.error("Failed to delegate tokens", {
+                description: parseError(error),
+              });
+              console.error(error);
             },
-          );
+            onSuccess: () => {
+              toast.success("Tokens delegated successfully");
+            },
+          });
         }}
-        transactionCount={1}
+        transactionCount={undefined}
         txChainID={contract.chain.id}
       >
         Delegate Tokens

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal-button.tsx

@@ -1,8 +1,5 @@
 "use client";
 
-import { FormControl, Textarea } from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { FormErrorMessage, FormLabel } from "chakra/form";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -11,102 +8,123 @@ import type { ThirdwebContract } from "thirdweb";
 import * as VoteExt from "thirdweb/extensions/vote";
 import { useSendAndConfirmTransaction } from "thirdweb/react";
 import { TransactionButton } from "@/components/tx-button";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
+import { Textarea } from "@/components/ui/textarea";
+import { parseError } from "@/utils/errorParser";
 
-interface VoteButtonProps {
-  contract: ThirdwebContract;
-  isLoggedIn: boolean;
-}
-
-const PROPOSAL_FORM_ID = "proposal-form-id";
-
-export const ProposalButton: React.FC<VoteButtonProps> = ({
+export function ProposalButton({
   contract,
   isLoggedIn,
-}) => {
+}: {
+  contract: ThirdwebContract;
+  isLoggedIn: boolean;
+}) {
   const [open, setOpen] = useState(false);
   const sendTx = useSendAndConfirmTransaction();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<{ description: string }>();
+  const form = useForm<{ description: string }>({
+    defaultValues: {
+      description: "",
+    },
+  });
+
+  async function onSubmit(data: { description: string }) {
+    const tx = VoteExt.propose({
+      calldatas: ["0x"],
+      contract,
+      description: data.description,
+      targets: [contract.address],
+      values: [0n],
+    });
+
+    await sendTx.mutateAsync(tx, {
+      onError: (error) => {
+        toast.error("Failed to create proposal", {
+          description: parseError(error),
+        });
+        console.error(error);
+      },
+      onSuccess: () => {
+        toast.success("Proposal created successfully");
+        setOpen(false);
+      },
+    });
+  }
 
   return (
     <Sheet onOpenChange={setOpen} open={open}>
       <SheetTrigger asChild>
-        <Button
-          colorScheme="primary"
-          leftIcon={<PlusIcon className="size-5" />}
-        >
+        <Button className="gap-2" size="sm">
+          <PlusIcon className="size-3.5" />
           Create Proposal
         </Button>
       </SheetTrigger>
-      <SheetContent className="w-full sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">
+      <SheetContent className="!w-full lg:!max-w-lg">
         <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({
-              calldatas: ["0x"],
-              contract,
-              description: data.description,
-              targets: [contract.address],
-              values: [0n],
-            });
-            toast.promise(
-              sendTx.mutateAsync(tx, {
-                onError: (error) => {
-                  console.error(error);
-                },
-                onSuccess: () => {
-                  setOpen(false);
-                },
-              }),
-              {
-                error: "Failed to create proposal",
-                loading: "Creating proposal...",
-                success: "Proposal created successfully",
-              },
-            );
-          })}
-        >
-          <FormControl isInvalid={!!errors.description} isRequired>
-            <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}
-            onClick={() => setOpen(false)}
-            variant="outline"
+        <Form {...form}>
+          <form
+            className="mt-4 flex flex-col gap-6"
+            onSubmit={form.handleSubmit(onSubmit)}
           >
-            Cancel
-          </Button>
-          <TransactionButton
-            client={contract.client}
-            form={PROPOSAL_FORM_ID}
-            isLoggedIn={isLoggedIn}
-            isPending={sendTx.isPending}
-            transactionCount={1}
-            txChainID={contract.chain.id}
-            type="submit"
-          >
-            Submit
-          </TransactionButton>
-        </div>
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      className="bg-card"
+                      placeholder="Enter proposal description..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+              rules={{
+                required: "Description is required",
+              }}
+            />
+
+            <div className="mt-6 flex flex-row justify-end gap-3">
+              <Button
+                disabled={sendTx.isPending}
+                onClick={() => setOpen(false)}
+                variant="outline"
+              >
+                Cancel
+              </Button>
+              <TransactionButton
+                client={contract.client}
+                isLoggedIn={isLoggedIn}
+                isPending={sendTx.isPending}
+                transactionCount={1}
+                txChainID={contract.chain.id}
+                type="submit"
+              >
+                Submit
+              </TransactionButton>
+            </div>
+          </form>
+        </Form>
       </SheetContent>
     </Sheet>
   );
-};
+}