fix: show uo to date voting records

packages/proposals/src/hooks/useVotingRecords.ts

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+import { PublicKey } from '@solana/web3.js';
+import {
+  ParsedAccount,
+  useConnection,
+  useConnectionConfig,
+  utils,
+} from '@oyster/common';
+import {
+  GovernanceVotingRecord,
+  GovernanceVotingRecordLayout,
+  GovernanceVotingRecordParser,
+} from '../models/timelock';
+import { getGovernanceVotingRecords } from '../utils/lookups';
+
+export function useVotingRecords(proposal: PublicKey) {
+  const [votingRecords, setVotingRecords] = useState<
+    Record<string, ParsedAccount<GovernanceVotingRecord>>
+  >({});
+
+  const { endpoint } = useConnectionConfig();
+  const connection = useConnection();
+
+  const { timelock } = utils.programIds();
+
+  useEffect(() => {
+    if (!proposal) {
+      return;
+    }
+
+    const sub = (async () => {
+      const records = await getGovernanceVotingRecords(proposal, endpoint);
+      setVotingRecords(records);
+
+      return connection.onProgramAccountChange(timelock.programId, info => {
+        if (
+          info.accountInfo.data.length === GovernanceVotingRecordLayout.span
+        ) {
+          const votingRecord = GovernanceVotingRecordParser(
+            info.accountId,
+            info.accountInfo,
+          ) as ParsedAccount<GovernanceVotingRecord>;
+
+          if (votingRecord.info.proposal.toBase58() !== proposal.toBase58()) {
+            return;
+          }
+
+          setVotingRecords(vrs => ({
+            ...vrs,
+            [votingRecord.info.owner.toBase58()]: votingRecord,
+          }));
+        }
+      });
+    })();
+
+    return () => {
+      sub.then(id => connection.removeProgramAccountChangeListener(id));
+    };
+  }, [proposal]);
+
+  return votingRecords;
+}

packages/proposals/src/models/timelock.ts

@@ -320,9 +320,8 @@ export const GovernanceVotingRecordParser = (
   pubKey: PublicKey,
   info: AccountInfo<Buffer>,
 ) => {
-  const buffer = Buffer.from(info.data);
-  const data = GovernanceVotingRecordLayout.decode(buffer);
-  console.log('Data', data);
+  const data = GovernanceVotingRecordLayout.decode(info.data);
+
   const details = {
     pubkey: pubKey,
     account: {

packages/proposals/src/views/proposal/index.tsx

@@ -1,10 +1,9 @@
 import { Card, Col, Grid, Row, Spin, Statistic, Tabs } from 'antd';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { LABELS } from '../../constants';
 import { ParsedAccount, TokenIcon } from '@oyster/common';
 import {
   ConsensusAlgorithm,
-  GovernanceVotingRecord,
   INSTRUCTION_LIMIT,
   TimelockConfig,
   TimelockSet,
@@ -14,7 +13,7 @@ import {
 } from '../../models/timelock';
 import { useParams } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
-import { useConfig, useProposals } from '../../contexts/proposals';
+import { useProposals } from '../../contexts/proposals';
 import { StateBadge } from '../../components/Proposal/StateBadge';
 import { contexts, hooks } from '@oyster/common';
 import { MintInfo } from '@solana/spl-token';
@@ -26,7 +25,7 @@ import MintSourceTokens from '../../components/Proposal/MintSourceTokens';
 import { Vote } from '../../components/Proposal/Vote';
 import { WithdrawVote } from '../../components/Proposal/WithdrawVote';
 import './style.less';
-import { getGovernanceVotingRecords } from '../../utils/lookups';
+import { useVotingRecords } from '../../hooks/useVotingRecords';
 import BN from 'bn.js';
 import { VoterBubbleGraph } from '../../components/Proposal/VoterBubbleGraph';
 import { VoterTable } from '../../components/Proposal/VoterTable';
@@ -58,12 +57,8 @@ export const ProposalView = () => {
   const yesVotingMint = useMint(proposal?.info.yesVotingMint);
   const noVotingMint = useMint(proposal?.info.noVotingMint);
 
-  const [votingDisplayData, setVotingDisplayData] = useState<any>({});
-  useEffect(() => {
-    getGovernanceVotingRecords(proposal?.pubkey, endpoint).then(records =>
-      setVotingDisplayData(voterDisplayData(records)),
-    );
-  }, [proposal]);
+  const votingRecords = useVotingRecords(proposal?.pubkey);
+
   return (
     <div className="flexColumn">
       {proposal &&
@@ -80,7 +75,7 @@ export const ProposalView = () => {
           votingMint={votingMint}
           yesVotingMint={yesVotingMint}
           noVotingMint={noVotingMint}
-          votingDisplayData={votingDisplayData}
+          votingDisplayData={voterDisplayData(votingRecords)}
           sigMint={sigMint}
           instructions={context.transactions}
           endpoint={endpoint}