[ENG-65] [ENG-66] - example proposal templates + unified UX for Sablier PB and general PB

src/components/ProposalBuilder/ProposalDetails.tsx

@@ -3,7 +3,12 @@ import { FormikProps } from 'formik';
 import { Fragment, PropsWithChildren, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import '../../assets/css/Markdown.css';
-import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
+import {
+  CreateProposalForm,
+  CreateSablierProposalForm,
+  ProposalBuilderMode,
+  Stream,
+} from '../../types/proposalBuilder';
 import Markdown from '../ui/proposal/Markdown';
 import CeleryButtonWithIcon from '../ui/utils/CeleryButtonWithIcon';
 import Divider from '../ui/utils/Divider';
@@ -20,13 +25,18 @@ export function TransactionValueContainer({ children }: PropsWithChildren<{}>) {
   );
 }
 
-export default function ProposalTemplateDetails({
-  values: { proposalMetadata, transactions },
+export default function ProposalDetails({
+  values,
   mode,
-}: FormikProps<CreateProposalForm> & { mode: ProposalBuilderMode }) {
+}: FormikProps<CreateProposalForm | CreateSablierProposalForm> & { mode: ProposalBuilderMode }) {
   const { t } = useTranslation(['proposalTemplate', 'proposal']);
+  const { proposalMetadata, transactions } = values;
   const trimmedTitle = proposalMetadata.title?.trim();
   const [descriptionCollapsed, setDescriptionCollapsed] = useState(true);
+  let streams: Stream[] = [];
+  if (mode === ProposalBuilderMode.SABLIER) {
+    streams = (values as CreateSablierProposalForm).streams;
+  }
 
   return (
     <Box
@@ -82,49 +92,76 @@ export default function ProposalTemplateDetails({
           />
         )}
         <Divider />
-        {transactions.map((transaction, i) => {
-          const valueBiggerThanZero = transaction.ethValue.bigintValue
-            ? transaction.ethValue.bigintValue > 0n
-            : false;
-          return (
-            <Fragment key={i}>
-              <Text color="neutral-7">{t('labelTargetAddress', { ns: 'proposal' })}</Text>
-              {transaction.targetAddress && (
-                <TransactionValueContainer>{transaction.targetAddress}</TransactionValueContainer>
+        {mode !== ProposalBuilderMode.SABLIER &&
+          transactions.map((transaction, i) => {
+            const valueBiggerThanZero = transaction.ethValue.bigintValue
+              ? transaction.ethValue.bigintValue > 0n
+              : false;
+            return (
+              <Fragment key={i}>
+                <Text color="neutral-7">{t('labelTargetAddress', { ns: 'proposal' })}</Text>
+                {transaction.targetAddress && (
+                  <TransactionValueContainer>{transaction.targetAddress}</TransactionValueContainer>
+                )}
+                <Divider />
+                <Text color="neutral-7">{t('labelFunctionName', { ns: 'proposal' })}</Text>
+                {transaction.functionName && (
+                  <TransactionValueContainer>{transaction.functionName}</TransactionValueContainer>
+                )}
+                {transaction.parameters.map((parameter, parameterIndex) => (
+                  <Fragment key={parameterIndex}>
+                    <Text color="neutral-7">{t('parameter')}</Text>
+                    {parameter.signature && (
+                      <TransactionValueContainer>{parameter.signature}</TransactionValueContainer>
+                    )}
+                    <Text color="neutral-7">
+                      {!!parameter.label ? parameter.label : t('value')}
+                    </Text>
+                    {(parameter.label || parameter.value) && (
+                      <TransactionValueContainer>
+                        {parameter.value || t('userInput')}
+                      </TransactionValueContainer>
+                    )}
+                  </Fragment>
+                ))}
+                <Divider />
+                <HStack justifyContent="space-between">
+                  <Text color="neutral-7">{t('eth')}</Text>
+                  <Text
+                    textAlign="right"
+                    color={valueBiggerThanZero ? 'white-0' : 'neutral-7'}
+                    wordBreak="break-all"
+                  >
+                    {valueBiggerThanZero ? transaction.ethValue.value : 'n/a'}
+                  </Text>
+                </HStack>
+              </Fragment>
+            );
+          })}
+        {mode === ProposalBuilderMode.SABLIER &&
+          streams.map((stream, idx) => (
+            <Fragment key={idx}>
+              <Text color="neutral-7">{t('labelRecipientAddress', { ns: 'proposal' })}</Text>
+              {stream.recipientAddress && (
+                <TransactionValueContainer>{stream.recipientAddress}</TransactionValueContainer>
               )}
               <Divider />
-              <Text color="neutral-7">{t('labelFunctionName', { ns: 'proposal' })}</Text>
-              {transaction.functionName && (
-                <TransactionValueContainer>{transaction.functionName}</TransactionValueContainer>
+              <Text color="neutral-7">{t('labelTotalAmount', { ns: 'proposal' })}</Text>
+              {stream.totalAmount && (
+                <TransactionValueContainer>{stream.totalAmount.value}</TransactionValueContainer>
               )}
-              {transaction.parameters.map((parameter, parameterIndex) => (
-                <Fragment key={parameterIndex}>
-                  <Text color="neutral-7">{t('parameter')}</Text>
-                  {parameter.signature && (
-                    <TransactionValueContainer>{parameter.signature}</TransactionValueContainer>
-                  )}
-                  <Text color="neutral-7">{!!parameter.label ? parameter.label : t('value')}</Text>
-                  {(parameter.label || parameter.value) && (
-                    <TransactionValueContainer>
-                      {parameter.value || t('userInput')}
-                    </TransactionValueContainer>
-                  )}
+              <Divider />
+              <Text color="neutral-7">{t('labelTranches', { ns: 'proposal' })}</Text>
+              {stream.tranches.map((tranche, trancheIdx) => (
+                <Fragment key={trancheIdx}>
+                  <Text color="neutral-7">{t('labelTrancheAmount', { ns: 'proposal' })}</Text>
+                  <TransactionValueContainer>{tranche.amount.value}</TransactionValueContainer>
+                  <Text color="neutral-7">{t('labelTrancheDuration', { ns: 'proposal' })}</Text>
+                  <TransactionValueContainer>{tranche.duration.value}</TransactionValueContainer>
                 </Fragment>
               ))}
-              <Divider />
-              <HStack justifyContent="space-between">
-                <Text color="neutral-7">{t('eth')}</Text>
-                <Text
-                  textAlign="right"
-                  color={valueBiggerThanZero ? 'white-0' : 'neutral-7'}
-                  wordBreak="break-all"
-                >
-                  {valueBiggerThanZero ? transaction.ethValue.value : 'n/a'}
-                </Text>
-              </HStack>
             </Fragment>
-          );
-        })}
+          ))}
       </VStack>
     </Box>
   );