fix: minimise number of requests to get Proposal buttons state

packages/governance/src/hooks/apiHooks.ts

@@ -164,7 +164,7 @@ export const useVoteRecordsByProposal = (proposal: PublicKey | undefined) => {
 
 export const useTokenOwnerVoteRecord = (
   proposal: PublicKey,
-  tokenOwnerRecord: PublicKey,
+  tokenOwnerRecord: PublicKey | undefined,
 ) => {
   const { programId } = useRpcContext();
 
@@ -177,6 +177,6 @@ export const useTokenOwnerVoteRecord = (
 
       return await getVoteRecordAddress(programId, proposal, tokenOwnerRecord);
     },
-    [tokenOwnerRecord.toBase58(), proposal],
+    [tokenOwnerRecord, proposal],
   );
 };

packages/governance/src/views/proposal/components/buttons/castVoteButton.tsx

@@ -13,14 +13,15 @@ import {
   Proposal,
   ProposalState,
   TokenOwnerRecord,
+  VoteRecord,
 } from '../../../../models/accounts';
 
 import { Vote } from '../../../../models/instructions';
 
 import { castVote } from '../../../../actions/castVote';
-import { useHasVoteTimeExpired } from '../../../../hooks/useHasVoteTimeExpired';
-import { useTokenOwnerVoteRecord } from '../../../../hooks/apiHooks';
+
 import { useRpcContext } from '../../../../hooks/useRpcContext';
+import { Option } from '../../../../tools/option';
 
 const { confirm } = Modal;
 export function CastVoteButton({
@@ -28,18 +29,17 @@ export function CastVoteButton({
   governance,
   tokenOwnerRecord,
   vote,
+  voteRecord,
+  hasVoteTimeExpired,
 }: {
   proposal: ParsedAccount<Proposal>;
   governance: ParsedAccount<Governance>;
   tokenOwnerRecord: ParsedAccount<TokenOwnerRecord>;
   vote: Vote;
+  voteRecord: Option<ParsedAccount<VoteRecord>> | undefined;
+  hasVoteTimeExpired: boolean | undefined;
 }) {
   const rpcContext = useRpcContext();
-  const voteRecord = useTokenOwnerVoteRecord(
-    proposal.pubkey,
-    tokenOwnerRecord.pubkey,
-  );
-  const hasVoteTimeExpired = useHasVoteTimeExpired(governance, proposal);
 
   const isVisible =
     hasVoteTimeExpired === false &&

packages/governance/src/views/proposal/components/buttons/finalizeVoteButton.tsx

@@ -13,7 +13,7 @@ import {
 } from '../../../../models/accounts';
 
 import { finalizeVote } from '../../../../actions/finalizeVote';
-import { useHasVoteTimeExpired } from '../../../../hooks/useHasVoteTimeExpired';
+
 import { useRpcContext } from '../../../../hooks/useRpcContext';
 
 const { useWallet } = contexts.Wallet;
@@ -21,13 +21,14 @@ const { useWallet } = contexts.Wallet;
 export function FinalizeVoteButton({
   governance,
   proposal,
+  hasVoteTimeExpired,
 }: {
   governance: ParsedAccount<Governance>;
   proposal: ParsedAccount<Proposal>;
+  hasVoteTimeExpired: boolean | undefined;
 }) {
   const { connected } = useWallet();
   const rpcContext = useRpcContext();
-  const hasVoteTimeExpired = useHasVoteTimeExpired(governance, proposal);
 
   const isVisible =
     hasVoteTimeExpired === true &&

packages/governance/src/views/proposal/components/buttons/proposalActionBar.tsx

@@ -13,7 +13,11 @@ import { RelinquishVoteButton } from './relinquishVoteButton';
 import { Vote } from '../../../../models/instructions';
 import { CastVoteButton } from './castVoteButton';
 
-import { useWalletSignatoryRecord } from '../../../../hooks/apiHooks';
+import {
+  useWalletSignatoryRecord,
+  useTokenOwnerVoteRecord,
+} from '../../../../hooks/apiHooks';
+import { useHasVoteTimeExpired } from '../../../../hooks/useHasVoteTimeExpired';
 
 export function ProposalActionBar({
   governance,
@@ -26,6 +30,13 @@ export function ProposalActionBar({
 }) {
   let signatoryRecord = useWalletSignatoryRecord(proposal.pubkey);
 
+  const voteRecord = useTokenOwnerVoteRecord(
+    proposal.pubkey,
+    tokenOwnerRecord?.pubkey,
+  );
+
+  const hasVoteTimeExpired = useHasVoteTimeExpired(governance, proposal);
+
   return (
     <div className="proposal-actions">
       <CancelButton proposal={proposal}></CancelButton>
@@ -41,6 +52,7 @@ export function ProposalActionBar({
       <FinalizeVoteButton
         proposal={proposal}
         governance={governance}
+        hasVoteTimeExpired={hasVoteTimeExpired}
       ></FinalizeVoteButton>
 
       {tokenOwnerRecord && (
@@ -48,18 +60,23 @@ export function ProposalActionBar({
           <RelinquishVoteButton
             proposal={proposal}
             tokenOwnerRecord={tokenOwnerRecord}
+            voteRecord={voteRecord?.tryUnwrap()}
           />
           <CastVoteButton
             governance={governance}
             proposal={proposal}
             tokenOwnerRecord={tokenOwnerRecord}
             vote={Vote.Yes}
+            voteRecord={voteRecord}
+            hasVoteTimeExpired={hasVoteTimeExpired}
           />
           <CastVoteButton
             governance={governance}
             proposal={proposal}
             vote={Vote.No}
             tokenOwnerRecord={tokenOwnerRecord}
+            voteRecord={voteRecord}
+            hasVoteTimeExpired={hasVoteTimeExpired}
           />
         </>
       )}

packages/governance/src/views/proposal/components/buttons/relinquishVoteButton.tsx

@@ -11,10 +11,11 @@ import {
   Proposal,
   ProposalState,
   TokenOwnerRecord,
+  VoteRecord,
 } from '../../../../models/accounts';
 import { useAccountChangeTracker } from '../../../../contexts/GovernanceContext';
 import { relinquishVote } from '../../../../actions/relinquishVote';
-import { useTokenOwnerVoteRecord } from '../../../../hooks/apiHooks';
+
 import { useRpcContext } from '../../../../hooks/useRpcContext';
 
 const { useWallet } = contexts.Wallet;
@@ -23,18 +24,15 @@ const { confirm } = Modal;
 export function RelinquishVoteButton({
   proposal,
   tokenOwnerRecord,
+  voteRecord,
 }: {
   proposal: ParsedAccount<Proposal>;
   tokenOwnerRecord: ParsedAccount<TokenOwnerRecord>;
+  voteRecord: ParsedAccount<VoteRecord> | undefined;
 }) {
   const { connected } = useWallet();
   const rpcContext = useRpcContext();
 
-  const voteRecord = useTokenOwnerVoteRecord(
-    proposal.pubkey,
-    tokenOwnerRecord.pubkey,
-  )?.tryUnwrap();
-
   const accountChangeTracker = useAccountChangeTracker();
 
   const isVisible =