Fix voting UI and nav buttons

delvtech · Feb 22, 2024 · 89c1794 · 89c1794
1 parent 9c56e2a
commit 89c1794
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 48 deletions.
diff --git a/apps/council-ui/src/ui/navigation/Navigation.tsx b/apps/council-ui/src/ui/navigation/Navigation.tsx
@@ -95,44 +95,37 @@ export function Navigation(): ReactElement {
         <div className="ml-2 whitespace-nowrap text-xl text-base-content">
           council-reference-ui
         </div>
+      </div>
 
-        <ul className="ml-4 hidden items-center p-0 lg:flex">
+      <div className="daisy-navbar-center hidden lg:flex">
+        <ul className="daisy-menu daisy-menu-horizontal px-1">
           <li>
             <Link
-              className={classNames(
-                "px-4 py-3 font-medium transition-all hover:text-primary focus:text-primary",
-                {
-                  "text-primary": pathname.startsWith(Routes.PROPOSALS),
-                },
-              )}
+              className={classNames("px-4 py-3 font-medium", {
+                "!text-primary": pathname.startsWith(Routes.PROPOSALS),
+              })}
               href={Routes.PROPOSALS}
             >
               proposals
             </Link>
           </li>
           <li>
             <Link
-              className={classNames(
-                "px-4 py-3 font-medium transition-all hover:text-primary focus:text-primary",
-                {
-                  "text-primary": pathname.startsWith(Routes.VAULTS),
-                },
-              )}
+              className={classNames("px-4 py-3 font-medium", {
+                "!text-primary": pathname.startsWith(Routes.VAULTS),
+              })}
               href={Routes.VAULTS}
             >
               vaults
             </Link>
           </li>
           <li>
             <Link
-              className={classNames(
-                "px-4 py-3 font-medium transition-all hover:text-primary focus:text-primary",
-                {
-                  "text-primary":
-                    pathname.startsWith(Routes.VOTERS) &&
-                    address !== query.address,
-                },
-              )}
+              className={classNames("px-4 py-3 font-medium", {
+                "!text-primary":
+                  pathname.startsWith(Routes.VOTERS) &&
+                  address !== query.address,
+              })}
               href={Routes.VOTERS}
             >
               voters
@@ -141,14 +134,11 @@ export function Navigation(): ReactElement {
           {address && (
             <li>
               <Link
-                className={classNames(
-                  "px-4 py-3 font-medium transition-all hover:text-primary focus:text-primary",
-                  {
-                    "text-primary":
-                      pathname.startsWith(Routes.VOTERS) &&
-                      address === query.address,
-                  },
-                )}
+                className={classNames("px-4 py-3 font-medium", {
+                  "!text-primary":
+                    pathname.startsWith(Routes.VOTERS) &&
+                    address === query.address,
+                })}
                 href={makeVoterURL(address)}
               >
                 profile

diff --git a/apps/council-ui/src/ui/vaults/hooks/useVotingPowerByVault.ts b/apps/council-ui/src/ui/vaults/hooks/useVotingPowerByVault.ts
@@ -1,5 +1,5 @@
 import { BlockLike, ReadVotingVault } from "@delvtech/council-core";
-import { QueryStatus, useQuery } from "@tanstack/react-query";
+import { FetchStatus, QueryStatus, useQuery } from "@tanstack/react-query";
 import { useCouncilConfig } from "src/ui/config/hooks/useCouncilConfig";
 import { useReadCouncil } from "src/ui/council/hooks/useReadCouncil";
 import { useSupportedChainId } from "src/ui/network/hooks/useSupportedChainId";
@@ -31,6 +31,7 @@ export default function useVotingPowerByVault({
       }[]
     | undefined;
   status: QueryStatus;
+  fetchStatus: FetchStatus;
 } {
   const chainId = useSupportedChainId();
   const council = useReadCouncil();
@@ -45,8 +46,8 @@ export default function useVotingPowerByVault({
 
   const enabled = !!accountToUse;
 
-  const { data, status } = useQuery({
-    queryKey: ["votingPowerByVault", account, chainId],
+  const { data, status, fetchStatus } = useQuery({
+    queryKey: ["votingPowerByVault", account, chainId, Number(atBlock)],
     enabled,
     queryFn: enabled
       ? async () => {
@@ -89,5 +90,6 @@ export default function useVotingPowerByVault({
   return {
     votingPowerByVault: data,
     status,
+    fetchStatus,
   };
 }
diff --git a/apps/council-ui/src/ui/voting/ProposalVoting.tsx b/apps/council-ui/src/ui/voting/ProposalVoting.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { ReactElement } from "react";
 import { makeVaultURL } from "src/routes";
 import { formatVotingPower } from "src/ui/base/formatting/formatVotingPower";
+import { useReadProposal } from "src/ui/proposals/hooks/useReadProposal";
 import useVotingPowerByVault from "src/ui/vaults/hooks/useVotingPowerByVault";
 import { ProposalVotingSkeleton } from "src/ui/voting/ProposalVotingSkeleton";
 import { useSubmitVote } from "src/ui/voting/hooks/useSubmitVote";
@@ -12,29 +13,31 @@ import { useAccount } from "wagmi";
 
 interface ProposalVotingProps {
   coreVotingAddress: `0x${string}`;
-  createdBlock: bigint;
   proposalId: bigint;
   vaults: (ReadVotingVault | `0x${string}`)[];
 }
 
 export function ProposalVoting({
   coreVotingAddress,
-  createdBlock,
   proposalId,
   vaults,
 }: ProposalVotingProps): ReactElement {
   const isConnected = useAccount().isConnected;
+  const { proposal } = useReadProposal({
+    id: proposalId,
+    coreVoting: coreVotingAddress,
+  });
 
-  const { votingPowerByVault } = useVotingPowerByVault({
+  const { votingPowerByVault, status, fetchStatus } = useVotingPowerByVault({
     vaults,
-    atBlock: createdBlock,
+    atBlock: proposal?.created,
   });
   const totalVotingPower = votingPowerByVault?.reduce(
     (total, vault) => total + vault.votingPower,
     0n,
   );
 
-  const { vote, status } = useVote({
+  const { vote } = useVote({
     proposalId,
     coreVotingAddress,
   });
@@ -52,7 +55,7 @@ export function ProposalVoting({
   const disabled =
     !isConnected || !submitVote || submitVoteStatus === "pending";
 
-  return status === "pending" ? (
+  return fetchStatus === "fetching" ? (
     <ProposalVotingSkeleton />
   ) : (
     <div className="flex flex-col gap-y-4">
@@ -81,29 +84,38 @@ export function ProposalVoting({
         </p>
       </div>
 
-      <div className="daisy-btn-group m-auto">
+      <div className="daisy-join m-auto flex w-full">
         <button
-          className={classNames("daisy-btn daisy-btn-lg", {
-            "daisy-btn-active": vote?.ballot === "yes",
-          })}
+          className={classNames(
+            "daisy-btn daisy-join-item daisy-btn-lg flex-1",
+            {
+              "daisy-btn-active": vote?.ballot === "yes",
+            },
+          )}
           onClick={() => handleVote("yes")}
           disabled={disabled}
         >
           YES
         </button>
         <button
-          className={classNames("daisy-btn daisy-btn-lg", {
-            "daisy-btn-active": vote?.ballot === "no",
-          })}
+          className={classNames(
+            "daisy-btn daisy-join-item daisy-btn-lg flex-1",
+            {
+              "daisy-btn-active": vote?.ballot === "no",
+            },
+          )}
           onClick={() => handleVote("no")}
           disabled={disabled}
         >
           NO
         </button>
         <button
-          className={classNames("daisy-btn daisy-btn-lg", {
-            "daisy-btn-active": vote?.ballot === "maybe",
-          })}
+          className={classNames(
+            "daisy-btn daisy-join-item daisy-btn-lg flex-1",
+            {
+              "daisy-btn-active": vote?.ballot === "maybe",
+            },
+          )}
           onClick={() => handleVote("maybe")}
           disabled={disabled}
         >