Show executed time on proposal page

celo-org · Apr 27, 2024 · 303dbd0 · 303dbd0
1 parent e5187da
commit 303dbd0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/app/governance/[id]/page.tsx b/src/app/governance/[id]/page.tsx
@@ -78,7 +78,7 @@ function ProposalContent({ propData }: { propData: MergedProposalData }) {
     <div className="space-y-3">
       <BackLink href="/governance">Browse proposals</BackLink>
       <h1 className="font-serif text-2xl md:text-2xl">{title}</h1>
-      <ProposalBadgeRow propData={propData} showProposer />
+      <ProposalBadgeRow propData={propData} showProposer showExecutedTime />
       <ProposalLinkRow propData={propData} />
       {isLoading && !content && <FullWidthSpinner>Loading proposal content</FullWidthSpinner>}
       {!isLoading && !content && (

diff --git a/src/features/governance/components/ProposalCard.tsx b/src/features/governance/components/ProposalCard.tsx
@@ -82,19 +82,24 @@ export function ProposalCard({
 export function ProposalBadgeRow({
   propData,
   showProposer,
+  showExecutedTime,
 }: {
   propData: MergedProposalData;
   showProposer?: boolean;
+  showExecutedTime?: boolean;
 }) {
   const { stage, proposal, metadata, id } = propData;
 
   const { timestamp, proposer, isApproved } = proposal || {};
-  const { timestamp: cgpTimestamp, cgp } = metadata || {};
+  const { timestamp: cgpTimestamp, cgp, timestampExecuted } = metadata || {};
 
   const proposedTimestamp = timestamp || cgpTimestamp;
   const proposedTimeValue = proposedTimestamp
     ? new Date(proposedTimestamp).toLocaleDateString()
     : undefined;
+  const executedTimeValue = timestampExecuted
+    ? new Date(timestampExecuted).toLocaleDateString()
+    : undefined;
 
   return (
     <div className="flex items-center space-x-2">
@@ -110,6 +115,13 @@ export function ProposalBadgeRow({
           <ShortAddress address={proposer} className="hidden text-sm text-taupe-600 sm:block" />
         </>
       )}
+      {/* Show one of proposer or executedTimeValue but not both, too crowded */}
+      {showExecutedTime && executedTimeValue && !proposer && (
+        <>
+          <div className="hidden text-xs opacity-50 sm:block">•</div>
+          <div className="hidden text-sm text-taupe-600 sm:block">{`Executed ${executedTimeValue}`}</div>
+        </>
+      )}
     </div>
   );
 }