From 89c1794afc2f81e7d0e3dc03c834adbf8fe2c929 Mon Sep 17 00:00:00 2001
From: Ryan Goree <goree.ryan@gmail.com>
Date: Thu, 22 Feb 2024 02:10:00 -0600
Subject: [PATCH] Fix voting UI and nav buttons

---
 .../src/ui/navigation/Navigation.tsx          | 48 ++++++++-----------
 .../ui/vaults/hooks/useVotingPowerByVault.ts  |  8 ++--
 .../src/ui/voting/ProposalVoting.tsx          | 44 ++++++++++-------
 3 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/apps/council-ui/src/ui/navigation/Navigation.tsx b/apps/council-ui/src/ui/navigation/Navigation.tsx
index 704f178d..17c17b17 100644
--- a/apps/council-ui/src/ui/navigation/Navigation.tsx
+++ b/apps/council-ui/src/ui/navigation/Navigation.tsx
@@ -95,16 +95,15 @@ 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
@@ -112,12 +111,9 @@ export function Navigation(): ReactElement {
           </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
@@ -125,14 +121,11 @@ export function Navigation(): ReactElement {
           </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
index 14ee847f..25f1e520 100644
--- 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
index 63036183..55891c11 100644
--- 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}
         >