Added Proposal Grace Period (#4478)

* proposal grace period added * proposed changes * proposed changes * Show `exactExecutionBlock` is stories * change block network to optional * block time renderer * block time display * yarn lint fix * Number of Blocks and BlockTimeDisplay * Number of Blocks and BlockTimeDisplay * Number of Blocks and BlockTimeDisplay * last change * last change --------- Co-authored-by: Theophile Sandoz <[email protected]>
Joystream · Sep 29, 2023 · 99ca49e · 99ca49e · vercel · Sep 29, 2023
1 parent cfca8af
commit 99ca49e
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 16 deletions.
diff --git a/packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx b/packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx
@@ -46,6 +46,7 @@ type Args = {
   isInDiscussionWhitelist: boolean
   type: ProposalDetailsType
   constitutionality: number
+  exactExecutionBlock: number
   vote1: VoteArg
   vote2: VoteArg
   vote3: VoteArg
@@ -73,6 +74,7 @@ export default {
     isDiscussionOpen: true,
     type: 'SignalProposalDetails',
     constitutionality: 1,
+    exactExecutionBlock: 0,
     vote1: 'None',
     vote2: 'None',
     vote3: 'None',
@@ -155,6 +157,7 @@ export default {
                 status,
                 type: args.type,
                 creator: args.isProposer ? alice : bob,
+                exactExecutionBlock: args.exactExecutionBlock || null,
 
                 discussionThread: {
                   posts: proposalDiscussionPosts,

diff --git a/packages/ui/src/app/pages/Proposals/ProposalPreview.tsx b/packages/ui/src/app/pages/Proposals/ProposalPreview.tsx
@@ -180,7 +180,12 @@ export const ProposalPreview = () => {
             {/* Proposal-specific dashboard */}
             <h3>{camelCaseToText(proposal.type)}</h3>
 
-            <ProposalDetails proposalDetails={proposal.details} />
+            <ProposalDetails
+              proposalDetails={proposal.details}
+              gracePeriod={constants?.gracePeriod}
+              exactExecutionBlock={proposal.exactExecutionBlock}
+              createdInBlock={proposal.createdInBlock}
+            />
 
             <RationalePreview rationale={proposal.rationale} />
             <ProposalDiscussions thread={proposal.discussionThread} proposalId={id} />

diff --git a/packages/ui/src/common/types/Block.ts b/packages/ui/src/common/types/Block.ts
@@ -5,7 +5,7 @@ export type NetworkType = 'BABYLON' | 'ALEXANDRIA' | 'ROME' | 'GIZA' | 'OLYMPIA'
 
 export interface Block {
   number: number
-  network: NetworkType
+  network?: NetworkType
   timestamp: string
 }
 

diff --git a/packages/ui/src/mocks/helpers/randomBlock.ts b/packages/ui/src/mocks/helpers/randomBlock.ts
@@ -15,5 +15,5 @@ export const randomBlock = (): Block => {
 
 export const randomRawBlock = (): BlockFieldsMock => {
   const { number, timestamp, network } = randomBlock()
-  return { inBlock: number, createdAt: timestamp, network }
+  return { inBlock: number, createdAt: timestamp, network: network || 'OLYMPIA' }
 }
diff --git a/packages/ui/src/proposals/components/ProposalDetails/ProposalDetails.tsx b/packages/ui/src/proposals/components/ProposalDetails/ProposalDetails.tsx
@@ -6,6 +6,8 @@ import { StatisticsThreeColumns } from '@/common/components/statistics'
 import { TooltipContentProp } from '@/common/components/Tooltip'
 import { TextMedium } from '@/common/components/typography'
 import { useFirstObservableValue } from '@/common/hooks/useFirstObservableValue'
+import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
+import { Block } from '@/common/types'
 import { useCouncilStatistics } from '@/council/hooks/useCouncilStatistics'
 import { Percentage } from '@/proposals/components/ProposalDetails/renderers/Percentage'
 import getDetailsRenderStructure, { RenderNode, RenderType } from '@/proposals/helpers/getDetailsRenderStructure'
@@ -27,9 +29,13 @@ import {
   RuntimeBlob,
   Text,
 } from './renderers'
+import { BlockTimeDisplay } from './renderers/BlockTimeDisplay'
 
 interface Props {
   proposalDetails?: ProposalWithDetails['details']
+  gracePeriod?: number
+  exactExecutionBlock?: number
+  createdInBlock: Block
 }
 
 export interface ProposalDetailContent {
@@ -51,9 +57,10 @@ const renderTypeMapper: Partial<Record<RenderType, ProposalDetailContent>> = {
   Percentage: Percentage,
   Hash: Hash,
   DestinationsPreview: DestinationsPreview,
+  BlockTimeDisplay: BlockTimeDisplay,
 }
 
-export const ProposalDetails = ({ proposalDetails }: Props) => {
+export const ProposalDetails = ({ proposalDetails, gracePeriod, exactExecutionBlock, createdInBlock }: Props) => {
   const { api } = useApi()
   const { budget } = useCouncilStatistics()
   const { group } = useWorkingGroup({
@@ -115,6 +122,34 @@ export const ProposalDetails = ({ proposalDetails }: Props) => {
     return []
   }, [membershipPrice, !group, budget])
 
+  const extraProposalDetails = useMemo(() => {
+    if (exactExecutionBlock) {
+      return [
+        {
+          renderType: 'BlockTimeDisplay',
+          label: 'Exact Execution Block',
+          value: {
+            number: exactExecutionBlock,
+            timestamp: new Date(
+              new Date(createdInBlock.timestamp).getTime() +
+                (exactExecutionBlock - createdInBlock.number) * MILLISECONDS_PER_BLOCK
+            ).toString(),
+          },
+        },
+      ] as unknown as RenderNode[]
+    }
+    if (gracePeriod) {
+      return [
+        {
+          renderType: 'NumberOfBlocks',
+          label: 'Gracing Period',
+          value: gracePeriod,
+        },
+      ] as unknown as RenderNode[]
+    }
+    return []
+  }, [exactExecutionBlock, gracePeriod])
+
   const extraInformation = useMemo(() => {
     if (proposalDetails?.type === 'updateWorkingGroupBudget') {
       const isDecreasing = proposalDetails.amount.isNeg()
@@ -145,7 +180,9 @@ export const ProposalDetails = ({ proposalDetails }: Props) => {
   return (
     <>
       <StatisticsThreeColumns>
-        {[...(detailsRenderStructure?.structure ?? []), ...additionalDetails].map(renderProposalDetail)}
+        {[...(detailsRenderStructure?.structure ?? []), ...additionalDetails, ...extraProposalDetails].map(
+          renderProposalDetail
+        )}
       </StatisticsThreeColumns>
       {extraInformation}
     </>

diff --git a/packages/ui/src/proposals/components/ProposalDetails/renderers/BlockTimeDisplay.tsx b/packages/ui/src/proposals/components/ProposalDetails/renderers/BlockTimeDisplay.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { BlockTime } from '@/common/components/BlockTime'
+import { StatisticItem } from '@/common/components/statistics'
+import { Block } from '@/common/types'
+
+interface Props {
+  label: string
+  value: Block
+}
+export const BlockTimeDisplay = ({ label, value }: Props) => {
+  return (
+    <StatisticItem title={label}>
+      <BlockTime block={value} />
+    </StatisticItem>
+  )
+}
diff --git a/packages/ui/src/proposals/components/ProposalDetails/renderers/NumberOfBlocks.tsx b/packages/ui/src/proposals/components/ProposalDetails/renderers/NumberOfBlocks.tsx
@@ -1,19 +1,11 @@
 import BN from 'bn.js'
 import React from 'react'
 
-import { StatisticItem } from '@/common/components/statistics'
-import { TextInlineBig } from '@/common/components/typography'
-import { formatTokenValue } from '@/common/model/formatters'
+import { BlockDurationStatistics } from '@/common/components/statistics'
 
 interface Props {
   label: string
   value: BN
 }
 
-export const NumberOfBlocks = ({ label, value }: Props) => (
-  <StatisticItem title={label}>
-    <TextInlineBig bold value>
-      {formatTokenValue(value)} blocks
-    </TextInlineBig>
-  </StatisticItem>
-)
+export const NumberOfBlocks = ({ label, value }: Props) => <BlockDurationStatistics title={label} value={value} />
diff --git a/packages/ui/src/proposals/helpers/getDetailsRenderStructure.ts b/packages/ui/src/proposals/helpers/getDetailsRenderStructure.ts
@@ -41,7 +41,7 @@ export type RenderType =
   | 'Percentage'
   | 'Hash'
   | 'DestinationsPreview'
-
+  | 'BlockTimeDisplay'
 export interface RenderNode {
   label: string
   value: any