Update Proposal list

package.json

@@ -47,11 +47,10 @@
     "react-router-dom": "^6.22.0",
     "react-toastify": "^9.0.8",
     "remark-gfm": "^4.0.0",
-    "remove-markdown": "^0.5.0",
     "viem": "^2.8.12",
     "vite": "^5.1.0",
-    "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-checker": "^0.6.4",
+    "vite-plugin-node-polyfills": "^0.21.0",
     "wagmi": "^2.5.11",
     "yup": "^1"
   },

src/assets/css/Markdown.css

@@ -4,6 +4,7 @@
 
 .markdown-body {
   min-width: 100%;
+  max-width: 0;
 }
 .markdown-body,
 .markdown-body > * {

src/components/Activity/ActivityDescription.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useGetMetadata } from '../../hooks/DAO/proposal/useGetMetadata';
 import { Activity, FractalProposal, SnapshotProposal } from '../../types';
 import Markdown from '../ui/proposal/Markdown';
@@ -12,30 +12,35 @@ interface IActivityDescription {
 
 export function ActivityDescription({ activity, showFullDescription }: IActivityDescription) {
   const metaData = useGetMetadata(activity as FractalProposal);
+
   const snapshotProposal = activity as SnapshotProposal;
+
   const description = snapshotProposal.description || metaData.description;
 
   return (
-    <Flex
-      color="grayscale.100"
-      textStyle="text-lg-mono-semibold"
-      gap="0.5rem"
+    <Box
       mr="1rem"
-      flexWrap="wrap"
+      mt="0.5rem"
     >
-      <ProposalTitle activity={activity} />
+      <ProposalTitle
+        activity={activity}
+        showAuthor
+      />
       {description && (
         <Box
-          my={4}
-          minWidth="100%"
+          mt={2}
+          textColor="#B3B3B3"
         >
           <Markdown
             content={description}
             truncate={!showFullDescription}
+            collapsedLines={3}
           />
         </Box>
       )}
-      {!!activity.transaction && <ActivityDescriptionTreasury activity={activity} />}
-    </Flex>
+      <Box mt={2}>
+        {!!activity.transaction && <ActivityDescriptionTreasury activity={activity} />}
+      </Box>
+    </Box>
   );
 }

src/components/Activity/ActivityDescriptionGovernance.tsx

@@ -1,15 +1,17 @@
-import { Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { useGetMetadata } from '../../hooks/DAO/proposal/useGetMetadata';
+import useDisplayName from '../../hooks/utils/useDisplayName';
 import {
   Activity,
   GovernanceActivity,
   MultisigProposal,
   ActivityEventType,
-  TreasuryActivity,
   SnapshotProposal,
   FractalProposal,
+  AzoriusProposal,
 } from '../../types';
+import Avatar from '../ui/page/Header/Avatar';
 
 const formatId = (proposalId: string) => {
   if (proposalId.startsWith('0x')) {
@@ -36,33 +38,77 @@ function OnChainRejectionMessage({ activity }: { activity: Activity }) {
   );
 }
 
-export function ProposalTitle({ activity }: { activity: Activity }) {
-  const { t } = useTranslation(['common', 'dashboard']);
+function ProposalAuthor({ activity }: { activity: Activity }) {
+  const snapshotProposal = activity as SnapshotProposal;
+  const azoriusProposal = activity as AzoriusProposal;
+  const multisigProposal = activity as MultisigProposal;
+  const isSnapshotProposal = !!snapshotProposal.snapshotProposalId;
+  const isAzoriusProposal = !!azoriusProposal.proposer;
+
+  const proposer = isAzoriusProposal
+    ? azoriusProposal.proposer
+    : isSnapshotProposal
+      ? snapshotProposal.author
+      : multisigProposal.confirmations[0].owner;
+
+  const { displayName: author } = useDisplayName(proposer);
+  return (
+    <Flex
+      gap={2}
+      alignItems="center"
+      color="#B3B3B3"
+      textStyle="text-md-sans-regular"
+    >
+      <Avatar
+        size="sm"
+        address={author}
+      />
+      <Box>{author}</Box>
+    </Flex>
+  );
+}
+
+export function ProposalTitle({
+  activity,
+  showAuthor = false,
+}: {
+  activity: Activity;
+  showAuthor?: boolean;
+}) {
   const metaData = useGetMetadata(activity as FractalProposal);
 
   if (activity.eventType !== ActivityEventType.Governance) {
     return null;
   }
 
-  if ((activity as SnapshotProposal).snapshotProposalId) {
-    return (
-      <>
-        <Text>{formatId((activity as SnapshotProposal).snapshotProposalId)}</Text>
-        <Text>{(activity as SnapshotProposal).title}</Text>
-      </>
-    );
-  }
-
-  const treasuryActivity = activity as TreasuryActivity;
-  const hasTransfers =
-    treasuryActivity.transferAddresses && !!treasuryActivity.transferAddresses.length;
+  // Check if it's a SnapshotProposal and set variables accordingly
+  const isSnapshotProposal = (activity as SnapshotProposal).snapshotProposalId !== undefined;
+  const proposalIdText = isSnapshotProposal
+    ? formatId((activity as SnapshotProposal).snapshotProposalId)
+    : formatId((activity as GovernanceActivity).proposalId);
+  const proposaltitleText = isSnapshotProposal
+    ? (activity as SnapshotProposal).title
+    : metaData.title || '';
 
+  const titleText = proposalIdText + ' ' + proposaltitleText;
   return (
-    <>
-      <Text>{formatId((activity as GovernanceActivity).proposalId)}</Text>
-      {metaData.title ? <Text>{metaData.title}</Text> : null}
-      {hasTransfers && <Text> {t('proposalDescriptionCont', { ns: 'dashboard' })} </Text>}
-      <OnChainRejectionMessage activity={activity} />
-    </>
+    <Box
+      textStyle="text-lg-sans-medium"
+      fontSize="20px"
+      color="grayscale.100"
+      pr={2}
+    >
+      <Flex
+        alignItems="center"
+        gap={2}
+        flexWrap="wrap"
+      >
+        <Text as="span">{titleText}</Text>
+        {showAuthor && <ProposalAuthor activity={activity} />}
+      </Flex>
+      <Box mt={2}>
+        <OnChainRejectionMessage activity={activity} />
+      </Box>
+    </Box>
   );
 }

src/components/Activity/ActivityDescriptionModule.tsx

@@ -1,34 +1,60 @@
-import { Flex, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
-import { FractalProposal } from '../../types';
+import { useFractal } from '../../providers/App/AppProvider';
+import { ActivityEventType, FractalProposal } from '../../types';
+import { DEFAULT_DATE_FORMAT } from '../../utils';
 import { ActivityAddress } from './ActivityAddress';
 
 export function ActivityDescriptionModule({ activity }: { activity: FractalProposal }) {
-  const { t } = useTranslation(['treasury', 'dashboard']);
+  const { t } = useTranslation(['treasury', 'dashboard', 'common']);
+
+  const {
+    node: { daoAddress },
+  } = useFractal();
+  const eventDateLabel = t(
+    activity.eventType === ActivityEventType.Treasury
+      ? activity.transaction?.to === daoAddress
+        ? 'received'
+        : 'sent'
+      : 'created',
+  );
   return (
-    <Flex
+    <Box
       color="grayscale.100"
       textStyle="text-lg-mono-semibold"
-      gap="2"
-      flexWrap="wrap"
     >
-      <Text>{t('moduleDescription', { ns: 'dashboard', count: activity.targets.length })}</Text>
-      {activity.targets.length > 2 ? (
-        <Text>
-          {t('addresses', {
-            ns: 'treasury',
-            numOfAddresses: activity.targets.length,
-          })}
-        </Text>
-      ) : (
-        activity.targets.map((address, i, arr) => (
-          <ActivityAddress
-            key={address + i}
-            address={address}
-            addComma={i !== arr.length - 1}
-          />
-        ))
-      )}
-    </Flex>
+      <Flex
+        flexWrap="wrap"
+        gap={2}
+      >
+        <Box>{t('moduleDescription', { ns: 'dashboard', count: activity.targets.length })}</Box>
+        <Box>
+          {activity.targets.length > 2
+            ? t('addresses', {
+                ns: 'treasury',
+                numOfAddresses: activity.targets.length,
+              })
+            : activity.targets.map((address, i, arr) => (
+                <ActivityAddress
+                  key={address + i}
+                  address={address}
+                  addComma={i !== arr.length - 1}
+                />
+              ))}
+        </Box>
+      </Flex>
+      <Box>
+        {activity.eventDate && (
+          <Text
+            mt={2}
+            textStyle="text-base-sans-regular"
+            color="#838383"
+          >
+            {eventDateLabel} {format(activity.eventDate, DEFAULT_DATE_FORMAT)}
+          </Text>
+        )}
+      </Box>
+    </Box>
   );
 }

src/components/Activity/ActivityDescriptionTreasury.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { Activity, TreasuryActivity, ActivityEventType } from '../../types';
 import { ActivityAddress } from './ActivityAddress';
@@ -26,27 +26,29 @@ export function ActivityDescriptionTreasury({ activity }: { activity: Activity }
       ? t('from')
       : t('to');
 
+  const textString = transferTypeStr
+    ? transferTypeStr +
+      ' ' +
+      treasuryActivity.transferAmountTotals.join(', ') +
+      ' ' +
+      transferDirStr
+    : undefined;
+
   return (
-    <>
-      <Text>
-        {transferTypeStr} {treasuryActivity.transferAmountTotals.join(', ')} {transferDirStr}
-      </Text>
-      {treasuryActivity.transferAddresses.length > 2 ? (
-        <Text>
-          {t('addresses', {
+    <Flex>
+      <Text mr={2}>{textString}</Text>
+      {treasuryActivity.transferAddresses.length > 2
+        ? t('addresses', {
             ns: 'treasury',
             numOfAddresses: treasuryActivity.transferAddresses.length,
-          })}
-        </Text>
-      ) : (
-        treasuryActivity.transferAddresses.map((address, i, arr) => (
-          <ActivityAddress
-            key={address + i}
-            address={address}
-            addComma={i !== arr.length - 1}
-          />
-        ))
-      )}
-    </>
+          })
+        : treasuryActivity.transferAddresses.map((address, i, arr) => (
+            <ActivityAddress
+              key={address + i}
+              address={address}
+              addComma={i !== arr.length - 1}
+            />
+          ))}
+    </Flex>
   );
 }