Show current values on the preview page

Joystream · Apr 2, 2024 · 6da8fcb · 6da8fcb
1 parent 9186e1b
commit 6da8fcb
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 15 deletions.
diff --git a/packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx b/packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx
@@ -134,6 +134,17 @@ export default {
               councilorReward: joy(1),
             },
             referendum: { stage: {} },
+            projectToken: {
+              ammBuyTxFees: 10_000,
+              ammSellTxFees: 20_000,
+              bloatBond: joy(0.1),
+              maxYearlyPatronageRate: 500_000,
+              minAmmSlopeParameter: joy(10),
+              minRevenueSplitDuration: 100,
+              minRevenueSplitTimeToStart: 200,
+              minSaleDuration: 300,
+              salePlatformFee: 30_000,
+            },
           },
 
           tx: {

diff --git a/packages/ui/src/proposals/components/ProposalDetails/ProposalDetails.tsx b/packages/ui/src/proposals/components/ProposalDetails/ProposalDetails.tsx
@@ -10,6 +10,7 @@ import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
 import { Block } from '@/common/types'
 import { useCouncilStatistics } from '@/council/hooks/useCouncilStatistics'
 import getDetailsRenderStructure, { RenderNode, RenderType } from '@/proposals/helpers/getDetailsRenderStructure'
+import { crtConstraints$ } from '@/proposals/model/crtConstraints'
 import { ProposalWithDetails, UpdateGroupBudgetDetails } from '@/proposals/types'
 import { useWorkingGroup } from '@/working-groups/hooks/useWorkingGroup'
 
@@ -76,6 +77,12 @@ export const ProposalDetails = ({ proposalDetails, gracePeriod, exactExecutionBl
 
   const detailsRenderStructure = useMemo(() => getDetailsRenderStructure(proposalDetails), [proposalDetails])
 
+  const crtConstraints = useFirstObservableValue(() => {
+    if (api && proposalDetails?.type === 'updateTokenPalletTokenConstraints') {
+      return crtConstraints$(api)
+    }
+  }, [proposalDetails?.type, api?.isConnected])
+
   const additionalDetails = useMemo(() => {
     if (proposalDetails?.type === 'setReferralCut') {
       return [
@@ -117,8 +124,62 @@ export const ProposalDetails = ({ proposalDetails, gracePeriod, exactExecutionBl
       ] as RenderNode[]
     }
 
+    if (proposalDetails?.type === 'updateTokenPalletTokenConstraints') {
+      return [
+        {
+          renderType: 'Numeric',
+          label: 'Current maximum yearly rate',
+          units: '%',
+          value: crtConstraints?.maxYearlyRate,
+        },
+        {
+          renderType: 'Amount',
+          label: 'Current minimum AMM slope',
+          value: crtConstraints?.minAmmSlope,
+        },
+        {
+          renderType: 'NumberOfBlocks',
+          label: 'Current minimum sale duration',
+          value: crtConstraints?.minSaleDuration,
+        },
+        {
+          renderType: 'NumberOfBlocks',
+          label: 'Current minimum revenue split duration',
+          value: crtConstraints?.minRevenueSplitDuration,
+        },
+        {
+          renderType: 'NumberOfBlocks',
+          label: 'Current minimum revenue split time to start',
+          value: crtConstraints?.minRevenueSplitTimeToStart,
+        },
+        {
+          renderType: 'Numeric',
+          label: 'Current sale platform fee',
+          units: '%',
+          value: crtConstraints?.salePlatformFee,
+        },
+        {
+          renderType: 'Numeric',
+          label: 'Current AMM buy transaction fees',
+          units: '%',
+          value: crtConstraints?.ammBuyTxFees,
+        },
+        {
+          renderType: 'Numeric',
+          label: 'Current AMM sell transaction fees',
+          units: '%',
+          value: crtConstraints?.ammSellTxFees,
+        },
+        {
+          renderType: 'Amount',
+          label: 'Current bloat bond',
+          value: crtConstraints?.bloatBond,
+        },
+      ] as RenderNode[]
+    }
+
     return []
-  }, [membershipPrice, !group, budget])
+  }, [membershipPrice, !group, budget, crtConstraints])
 
   const extraProposalDetails = useMemo(() => {
     if (exactExecutionBlock) {
@@ -171,17 +232,34 @@ export const ProposalDetails = ({ proposalDetails, gracePeriod, exactExecutionBl
     return null
   }, [proposalDetails?.type, budget.amount?.toString(), !group])
 
+  const renderNodes = useMemo(() => {
+    const renderStructure = (detailsRenderStructure?.structure ?? []) as RenderNode[]
+
+    if (proposalDetails?.type === 'updateTokenPalletTokenConstraints') {
+      return [
+        ...[...renderStructure, ...additionalDetails]
+          .map((node) => ({
+            ...node,
+            key: node.label
+              .toLowerCase()
+              .replace(/^current (.*)./, '$1')
+              .replace('proposed ', ''),
+          }))
+          .sort((a, b) => a.key.localeCompare(b.key)),
+        ...extraProposalDetails,
+      ]
+    }
+
+    return [...renderStructure, ...additionalDetails, ...extraProposalDetails]
+  }, [proposalDetails?.type, detailsRenderStructure, additionalDetails, extraProposalDetails])
+
   if (!proposalDetails) {
     return null
   }
 
   return (
     <>
-      <Statistics>
-        {[...(detailsRenderStructure?.structure ?? []), ...additionalDetails, ...extraProposalDetails].map(
-          renderProposalDetail
-        )}
-      </Statistics>
+      <Statistics>{renderNodes.map(renderProposalDetail)}</Statistics>
       {extraInformation}
     </>
   )

diff --git a/packages/ui/src/proposals/helpers/getDetailsRenderStructure.ts b/packages/ui/src/proposals/helpers/getDetailsRenderStructure.ts
@@ -308,15 +308,15 @@ const mappers: Partial<Record<ProposalDetailsKeys, Mapper<any, any>>> = {
   freeze: palletStatusMapper,
 
   // UpdateTokenPalletTokenConstraints
-  maxYearlyRate: percentageMapper('Maximum yearly rate'),
-  minAmmSlope: amountMapper('Minimum AMM slope'),
-  minSaleDuration: blocksMapper('Minimum sale duration'),
-  minRevenueSplitDuration: blocksMapper('Minimum revenue split duration'),
-  minRevenueSplitTimeToStart: blocksMapper('Minimum revenue split time to start'),
-  salePlatformFee: percentageMapper('Sale platform fee'),
-  ammBuyTxFees: percentageMapper('AMM buy transaction fees'),
-  ammSellTxFees: percentageMapper('AMM sell transaction fees'),
-  bloatBond: amountMapper('Bloat bond'),
+  maxYearlyRate: percentageMapper('Proposed maximum yearly rate'),
+  minAmmSlope: amountMapper('Proposed minimum AMM slope'),
+  minSaleDuration: blocksMapper('Proposed minimum sale duration'),
+  minRevenueSplitDuration: blocksMapper('Proposed minimum revenue split duration'),
+  minRevenueSplitTimeToStart: blocksMapper('Proposed minimum revenue split time to start'),
+  salePlatformFee: percentageMapper('Proposed sale platform fee'),
+  ammBuyTxFees: percentageMapper('Proposed AMM buy transaction fees'),
+  ammSellTxFees: percentageMapper('Proposed AMM sell transaction fees'),
+  bloatBond: amountMapper('Proposed bloat bond'),
 }
 
 const mapProposalDetail = (key: ProposalDetailsKeys, proposalDetails: ProposalWithDetails['details']) => {