Update Proposal list

src/components/Activity/ActivityDescription.tsx

@@ -1,6 +1,14 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { useGetMetadata } from '../../hooks/DAO/proposal/useGetMetadata';
-import { Activity, FractalProposal, SnapshotProposal } from '../../types';
+import useDisplayName from '../../hooks/utils/useDisplayName';
+import {
+  Activity,
+  AzoriusProposal,
+  FractalProposal,
+  MultisigProposal,
+  SnapshotProposal,
+} from '../../types';
+import Avatar from '../ui/page/Header/Avatar';
 import Markdown from '../ui/proposal/Markdown';
 import { ProposalTitle } from './ActivityDescriptionGovernance';
 import { ActivityDescriptionTreasury } from './ActivityDescriptionTreasury';
@@ -12,26 +20,51 @@ interface IActivityDescription {
 
 export function ActivityDescription({ activity, showFullDescription }: IActivityDescription) {
   const metaData = useGetMetadata(activity as FractalProposal);
+
   const snapshotProposal = activity as SnapshotProposal;
+  const azoriusProposal = activity as AzoriusProposal;
+  const multisigProposal = activity as MultisigProposal;
+
   const description = snapshotProposal.description || metaData.description;
+  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
-      color="grayscale.100"
-      textStyle="text-lg-mono-semibold"
       gap="0.5rem"
       mr="1rem"
+      mt="0.5rem"
       flexWrap="wrap"
     >
       <ProposalTitle activity={activity} />
+      <Flex
+        gap={2}
+        alignItems="center"
+        color="#B3B3B3"
+        textStyle="text-md-sans-regular"
+      >
+        <Avatar
+          size="sm"
+          address={author}
+        />
+        <Box>{author}</Box>
+      </Flex>
       {description && (
         <Box
-          my={4}
           minWidth="100%"
+          textColor="#B3B3B3"
         >
           <Markdown
             content={description}
             truncate={!showFullDescription}
+            collapsedLines={3}
           />
         </Box>
       )}

src/components/Activity/ActivityDescriptionGovernance.tsx

@@ -1,4 +1,4 @@
-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 {
@@ -46,10 +46,17 @@ export function ProposalTitle({ activity }: { activity: Activity }) {
 
   if ((activity as SnapshotProposal).snapshotProposalId) {
     return (
-      <>
+      <Flex
+        textStyle="text-lg-sans-medium"
+        fontSize="20px"
+        alignItems="center"
+        color="grayscale.100"
+        pr={2}
+        gap={2}
+      >
         <Text>{formatId((activity as SnapshotProposal).snapshotProposalId)}</Text>
         <Text>{(activity as SnapshotProposal).title}</Text>
-      </>
+      </Flex>
     );
   }
 
@@ -58,11 +65,21 @@ export function ProposalTitle({ activity }: { activity: Activity }) {
     treasuryActivity.transferAddresses && !!treasuryActivity.transferAddresses.length;
 
   return (
-    <>
-      <Text>{formatId((activity as GovernanceActivity).proposalId)}</Text>
-      {metaData.title ? <Text>{metaData.title}</Text> : null}
+    <Box
+      textStyle="text-lg-sans-medium"
+      fontSize="20px"
+      color="grayscale.100"
+      pr={2}
+    >
+      <Flex
+        gap={2}
+        alignItems="center"
+      >
+        <Text>{formatId((activity as GovernanceActivity).proposalId)}</Text>
+        {metaData.title ? <Text>{metaData.title}</Text> : null}
+      </Flex>
       {hasTransfers && <Text> {t('proposalDescriptionCont', { ns: 'dashboard' })} </Text>}
       <OnChainRejectionMessage activity={activity} />
-    </>
+    </Box>
   );
 }

src/components/Proposals/ProposalCard/ProposalCard.tsx

@@ -0,0 +1,76 @@
+import { Box, Flex, Image, Text } from '@chakra-ui/react';
+import { format } from 'date-fns';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { DAO_ROUTES } from '../../../constants/routes';
+import { useFractal } from '../../../providers/App/AppProvider';
+import { ActivityEventType, FractalProposal, SnapshotProposal } from '../../../types';
+import { DEFAULT_DATE_FORMAT } from '../../../utils';
+import { ActivityDescription } from '../../Activity/ActivityDescription';
+import { Badge } from '../../ui/badges/Badge';
+import QuorumBadge from '../../ui/badges/QuorumBadge';
+
+function ProposalCard({ proposal }: { proposal: FractalProposal }) {
+  const {
+    node: { daoAddress },
+  } = useFractal();
+  const { t } = useTranslation('common');
+
+  const eventDateLabel = t(
+    proposal.eventType === ActivityEventType.Treasury
+      ? proposal.transaction?.to === daoAddress
+        ? 'received'
+        : 'sent'
+      : 'created',
+  );
+
+  const isSnapshotProposal = !!(proposal as SnapshotProposal).snapshotProposalId;
+
+  return (
+    <Link to={DAO_ROUTES.proposal.relative(daoAddress, proposal.proposalId)}>
+      <Box
+        minHeight="6.25rem"
+        bg="chocolate.900"
+        _hover={{ bg: '#0B0A09' }}
+        p="1.5rem"
+        borderRadius="0.5rem"
+      >
+        {/* Top Row */}
+        <Flex justifyContent="space-between">
+          <Flex
+            gap={2}
+            alignItems="center"
+          >
+            <Badge
+              labelKey={proposal.state!}
+              size="sm"
+              proposal={proposal}
+            />
+            {isSnapshotProposal && (
+              <Image
+                src="/images/snapshot-icon-fill.svg"
+                alt={t('snapshot')}
+                ml={1}
+              />
+            )}
+          </Flex>
+          <QuorumBadge proposal={proposal} />
+        </Flex>
+        <ActivityDescription activity={proposal} />
+        <Box>
+          {proposal.eventDate && (
+            <Text
+              mt={2}
+              textStyle="text-base-sans-regular"
+              color="#838383"
+            >
+              {eventDateLabel} {format(proposal.eventDate, DEFAULT_DATE_FORMAT)}
+            </Text>
+          )}
+        </Box>
+      </Box>
+    </Link>
+  );
+}
+
+export default ProposalCard;

src/components/Proposals/ProposalsList.tsx

@@ -5,9 +5,9 @@ import { DAO_ROUTES } from '../../constants/routes';
 import useSubmitProposal from '../../hooks/DAO/proposal/useSubmitProposal';
 import { useFractal } from '../../providers/App/AppProvider';
 import { FractalProposal } from '../../types';
-import { ActivityGovernance } from '../Activity/ActivityGovernance';
 import { EmptyBox } from '../ui/containers/EmptyBox';
 import { InfoBoxLoader } from '../ui/loaders/InfoBoxLoader';
+import ProposalCard from './ProposalCard/ProposalCard';
 
 export function ProposalsList({ proposals }: { proposals: FractalProposal[] }) {
   const {
@@ -27,9 +27,9 @@ export function ProposalsList({ proposals }: { proposals: FractalProposal[] }) {
         </Box>
       ) : proposals.length > 0 ? (
         proposals.map(proposal => (
-          <ActivityGovernance
+          <ProposalCard
             key={proposal.proposalId}
-            activity={proposal}
+            proposal={proposal}
           />
         ))
       ) : (

src/components/pages/DaoDashboard/Activities/index.tsx

@@ -3,9 +3,9 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { ActivityEventType, SortBy, TreasuryActivity, FractalProposal } from '../../../../types';
-import { ActivityGovernance } from '../../../Activity/ActivityGovernance';
 import { ActivityModule } from '../../../Activity/ActivityModule';
 import { ActivityTreasury } from '../../../Activity/ActivityTreasury';
+import ProposalCard from '../../../Proposals/ProposalCard/ProposalCard';
 import { EmptyBox } from '../../../ui/containers/EmptyBox';
 import { InfoBoxLoader } from '../../../ui/loaders/InfoBoxLoader';
 import { Sort } from '../../../ui/utils/Sort';
@@ -48,9 +48,9 @@ export function Activities() {
             {sortedActivities.map((activity, i) => {
               if (activity.eventType === ActivityEventType.Governance) {
                 return (
-                  <ActivityGovernance
+                  <ProposalCard
                     key={i}
-                    activity={activity as FractalProposal}
+                    proposal={activity as FractalProposal}
                   />
                 );
               }