feat: governance UI hash preview (#976)

* feat: add governance preview ui * fix: remove double fetching from governance & reduce interval * perf: reduce refetch interval * Update pages/governance/proposal/[proposalId].governance.tsx Co-authored-by: Andrew Schmidt <[email protected]> Co-authored-by: Andrew Schmidt <[email protected]>
aave · Aug 19, 2022 · a7725a0 · a7725a0 · github-actions · Aug 19, 2022
1 parent d820aef
commit a7725a0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 29 deletions.
diff --git a/pages/governance/ipfs-preview.governance.tsx b/pages/governance/ipfs-preview.governance.tsx
@@ -0,0 +1,41 @@
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { GovVoteModal } from 'src/components/transactions/GovVote/GovVoteModal';
+import { GovernanceDataProvider } from 'src/hooks/governance-data-provider/GovernanceDataProvider';
+import { MainLayout } from 'src/layouts/MainLayout';
+import { getProposalMetadata } from 'src/modules/governance/utils/getProposalMetadata';
+import { IpfsType } from 'src/static-build/ipfs';
+import { governanceConfig } from 'src/ui-config/governanceConfig';
+import ProposalPage from './proposal/[proposalId].governance';
+
+export default function IpfsPreview() {
+  const router = useRouter();
+  const ipfsHash = router.query.ipfsHash as string;
+  const [ipfs, setIpfs] = useState<IpfsType>();
+
+  async function fetchIpfs() {
+    const newIpfs = {
+      id: -1,
+      originalHash: ipfsHash,
+      ...(await getProposalMetadata(ipfsHash, governanceConfig?.ipfsGateway)),
+    };
+    setIpfs(newIpfs);
+  }
+  // // fetch ipfs on initial load
+  useEffect(() => {
+    if (!ipfsHash) return;
+    fetchIpfs();
+  }, [ipfsHash]);
+  return <ProposalPage ipfs={ipfs} proposal={undefined} />;
+}
+
+IpfsPreview.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <MainLayout>
+      <GovernanceDataProvider>
+        {page}
+        <GovVoteModal />
+      </GovernanceDataProvider>
+    </MainLayout>
+  );
+};
diff --git a/pages/governance/proposal/[proposalId].governance.tsx b/pages/governance/proposal/[proposalId].governance.tsx
@@ -110,11 +110,12 @@ export default function ProposalPage({
     setLoading(false);
   }
 
-  usePolling(updateProposal, 10000, !mightBeStale, []);
+  usePolling(updateProposal, loading ? 5000 : 30000, !mightBeStale, []);
 
   // seed when no ssg
   useEffect(() => {
     if (!proposal && initialProposal) setProposal(initialProposal);
+    setLoading(false);
   }, [initialProposal]);
 
   useEffect(() => {

diff --git a/pages/governance/proposal/index.governance.tsx b/pages/governance/proposal/index.governance.tsx
@@ -2,12 +2,10 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { GovVoteModal } from 'src/components/transactions/GovVote/GovVoteModal';
 import { GovernanceDataProvider } from 'src/hooks/governance-data-provider/GovernanceDataProvider';
-import { usePolling } from 'src/hooks/usePolling';
 import { MainLayout } from 'src/layouts/MainLayout';
 import { enhanceProposalWithTimes } from 'src/modules/governance/utils/formatProposal';
 import { getProposalMetadata } from 'src/modules/governance/utils/getProposalMetadata';
 import { governanceContract } from 'src/modules/governance/utils/governanceProvider';
-import { isProposalStateImmutable } from 'src/modules/governance/utils/immutableStates';
 import { IpfsType } from 'src/static-build/ipfs';
 import { CustomProposalType } from 'src/static-build/proposal';
 import { governanceConfig } from 'src/ui-config/governanceConfig';
@@ -19,34 +17,27 @@ export default function DynamicProposal() {
   const [proposal, setProposal] = useState<CustomProposalType>();
   const [ipfs, setIpfs] = useState<IpfsType>();
 
-  async function updateProposal() {
-    const { values, ...rest } = await governanceContract.getProposal({ proposalId: id });
-    setProposal(await enhanceProposalWithTimes(rest));
+  async function initialize() {
+    try {
+      const { values, ...rest } = await governanceContract.getProposal({ proposalId: id });
+      const proposal = await enhanceProposalWithTimes(rest);
+      setProposal(proposal);
+      const newIpfs = {
+        id,
+        originalHash: proposal.ipfsHash,
+        ...(await getProposalMetadata(proposal.ipfsHash, governanceConfig?.ipfsGateway)),
+      };
+      setIpfs(newIpfs);
+    } catch (e) {
+      console.log(e);
+      setTimeout(initialize, 5000);
+    }
   }
 
-  async function fetchIpfs() {
-    if (!proposal) return;
-    const newIpfs = {
-      id,
-      originalHash: proposal.ipfsHash,
-      ...(await getProposalMetadata(proposal.ipfsHash, governanceConfig?.ipfsGateway)),
-    };
-    setIpfs(newIpfs);
-  }
-
-  // poll every 10s
-  usePolling(
-    updateProposal,
-    20000,
-    (proposal ? isProposalStateImmutable(proposal) : false) || id === undefined,
-    [id]
-  );
-
-  // // fetch ipfs on initial load
   useEffect(() => {
-    if (!proposal || ipfs) return;
-    fetchIpfs();
-  }, [proposal, ipfs]);
+    id && initialize();
+  }, [id]);
+
   return <ProposalPage ipfs={ipfs} proposal={proposal} />;
 }
 

diff --git a/src/modules/governance/ProposalsList.tsx b/src/modules/governance/ProposalsList.tsx
@@ -88,7 +88,7 @@ export function ProposalsList({ proposals: initialProposals }: GovernancePagePro
   }
 
   usePolling(fetchNewProposals, 60000, false, [proposals.length]);
-  usePolling(updatePendingProposals, 15000, false, [proposals.length]);
+  usePolling(updatePendingProposals, 30000, false, [proposals.length]);
   return (
     <div>
       <Box