Update payment columns

src/components/pages/Roles/RoleCard.tsx

@@ -16,9 +16,11 @@ import { EditBadgeStatus, RoleEditProps, RoleProps, SablierPayment } from './typ
 export function AvatarAndRoleName({
   wearerAddress,
   name,
+  payments,
 }: {
   wearerAddress: string | undefined;
   name: string;
+  payments?: SablierPayment[];
 }) {
   const { addressPrefix } = useNetworkConfig();
   const { daoName: accountDisplayName } = useGetDAOName({
@@ -59,6 +61,37 @@ export function AvatarAndRoleName({
         >
           {wearerAddress ? accountDisplayName : t('unassigned')}
         </Text>
+        {payments && (
+          <Flex
+            mt="1rem"
+            gap="0.25rem"
+          >
+            <Text
+              textStyle="button-small"
+              color="neutral-7"
+              alignSelf="center"
+            >
+              {t('activePayments')}
+            </Text>
+            <Box
+              bg="celery--2"
+              color="neutral-3"
+              borderColor="neutral-3"
+              borderWidth="2px"
+              borderRadius="50%"
+              w="1.25rem"
+              h="1.25rem"
+            >
+              <Text
+                textStyle="helper-text-small"
+                lineHeight="1rem"
+                align="center"
+              >
+                {payments.length}
+              </Text>
+            </Box>
+          </Flex>
+        )}
       </Flex>
     </Flex>
   );
@@ -156,25 +189,15 @@ export function RoleCard({
         <AvatarAndRoleName
           wearerAddress={wearerAddress}
           name={name}
+          payments={payments}
         />
         <Flex
           alignItems="center"
           gap="1rem"
         >
           <EditBadge editStatus={editStatus} />
-          <Icon
-            as={CaretRight}
-            color="white-0"
-          />
         </Flex>
       </Flex>
-      {payments &&
-        payments.map((payment, index) => (
-          <Payment
-            key={index}
-            payment={payment}
-          />
-        ))}
     </Card>
   );
 }

src/components/pages/Roles/RolesTable.tsx

@@ -1,6 +1,5 @@
-import { Box, Flex, Icon, Image, Table, Tbody, Td, Text, Th, Thead, Tr } from '@chakra-ui/react';
+import { Box, Flex, Icon, Table, Tbody, Td, Text, Th, Thead, Tr } from '@chakra-ui/react';
 import { PencilLine } from '@phosphor-icons/react';
-import { formatDuration, intervalToDuration } from 'date-fns';
 import { useFormikContext } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { Address, Hex, getAddress, zeroAddress } from 'viem';
@@ -9,7 +8,6 @@ import useAvatar from '../../../hooks/utils/useAvatar';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
 import { DecentTree, useRolesStore } from '../../../store/roles';
 import { getChainIdFromPrefix } from '../../../utils/url';
-import EtherscanLink from '../../ui/links/EtherscanLink';
 import Avatar from '../../ui/page/Header/Avatar';
 import EditBadge from './EditBadge';
 import { RoleCardLoading, RoleCardNoRoles } from './RolePageCard';
@@ -22,6 +20,8 @@ function RolesHeader() {
       sx={{
         th: {
           padding: '0.75rem',
+          textTransform: 'none',
+          fontWeight: 'normal',
         },
       }}
       bg="white-alpha-04"
@@ -30,33 +30,25 @@ function RolesHeader() {
         textStyle="label-base"
         color="neutral-7"
       >
-        <Th>{t('role')}</Th>
-        <Th>{t('member')}</Th>
-        <Th>{t('payment')}</Th>
-        <Th>{t('payment')}</Th>
+        <Th
+          width="25%"
+          minW="230px"
+        >
+          {t('role')}
+        </Th>
+        <Th width="60%">{t('member')}</Th>
+        <Th
+          width="15%"
+          minWidth="140px"
+          textAlign="center"
+        >
+          {t('activePayments')}
+        </Th>
       </Tr>
     </Thead>
   );
 }
 
-function RoleNameColumn({ roleName }: { roleName: string }) {
-  return (
-    <Td>
-      <Flex
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text
-          textStyle="body-base"
-          color="lilac-0"
-        >
-          {roleName}
-        </Text>
-      </Flex>
-    </Td>
-  );
-}
-
 function RoleNameEditColumn({
   roleName,
   editStatus,
@@ -65,7 +57,10 @@ function RoleNameEditColumn({
   editStatus?: EditBadgeStatus;
 }) {
   return (
-    <Td>
+    <Td
+      width="25%"
+      minW="230px"
+    >
       <Flex
         alignItems="center"
         justifyContent="space-between"
@@ -104,10 +99,10 @@ function MemberColumn({ wearerAddress }: { wearerAddress: string | undefined })
     chainId: getChainIdFromPrefix(addressPrefix),
   });
   const avatarURL = useAvatar(wearerAddress || zeroAddress);
-  const { t } = useTranslation(['roles']);
+  const { t } = useTranslation('roles');
   return (
-    <Td>
-      <Flex alignItems="center">
+    <Td width="60%">
+      <Flex justifyContent="flex-start">
         {wearerAddress ? (
           <Avatar
             size="icon"
@@ -121,90 +116,47 @@ function MemberColumn({ wearerAddress }: { wearerAddress: string | undefined })
             bg="white-alpha-04"
           />
         )}
-        <Flex
-          direction="column"
+        <Text
+          textStyle="body-base"
+          color="white-0"
           ml="0.5rem"
         >
-          <Text
-            textStyle="body-base"
-            color="white-0"
-          >
-            {wearerAddress ? accountDisplayName : t('unassigned')}
-          </Text>
-        </Flex>
+          {wearerAddress ? accountDisplayName : t('unassigned')}
+        </Text>
       </Flex>
     </Td>
   );
 }
 
-function PaymentColumn({ payment }: { payment: SablierPayment | undefined }) {
-  const { t } = useTranslation(['roles']);
-  const format = ['years', 'days', 'hours'];
-  const endDate =
-    payment?.scheduleFixedDate?.endDate &&
-    formatDuration(
-      intervalToDuration({
-        start: payment.scheduleFixedDate.startDate,
-        end: payment.scheduleFixedDate.endDate,
-      }),
-      { format },
-    );
-  const cliffDate =
-    payment?.scheduleFixedDate?.cliffDate &&
-    formatDuration(
-      intervalToDuration({
-        start: payment.scheduleFixedDate.startDate,
-        end: payment.scheduleFixedDate.cliffDate,
-      }),
-      { format },
-    );
+function PaymentsColumn({ payments }: { payments?: SablierPayment[] }) {
+  const { t } = useTranslation('common');
   return (
-    <Td>
-      {payment ? (
-        <Box>
-          <Flex
-            textStyle="body-base"
-            color="white-0"
-            gap="0.25rem"
-            alignItems="center"
-            my="0.5rem"
-          >
-            <Image
-              src={payment.asset.logo}
-              fallbackSrc="/images/coin-icon-default.svg"
-              alt={payment.asset.symbol}
-              w="1.25rem"
-              h="1.25rem"
-            />
-            {payment.amount?.value}
-            <EtherscanLink
-              color="white-0"
-              _hover={{ bg: 'transparent' }}
-              textStyle="body-base"
-              padding={0}
-              borderWidth={0}
-              value={payment.asset.address}
-              type="token"
-              wordBreak="break-word"
-            >
-              {payment.asset.symbol}
-            </EtherscanLink>
-            <Flex
-              flexDir="column"
-              gap="0.25rem"
-            >
-              <Text>{endDate && `${t('after')} ${endDate}`}</Text>
-            </Flex>
-          </Flex>
-          <Text>{cliffDate && `${t('cliff')} ${t('after')} ${cliffDate}`}</Text>
+    <Td
+      width="15%"
+      minWidth="140px"
+      textAlign="center"
+      color="neutral-5"
+      textStyle="body-base"
+    >
+      {payments ? (
+        <Box
+          as="span"
+          display="inline-block"
+          textStyle="helper-text-small"
+          lineHeight="1rem"
+          textAlign="center"
+          bg="celery--2"
+          color="neutral-3"
+          borderColor="neutral-3"
+          borderWidth="2px"
+          borderRadius="50%"
+          w="1.25rem"
+          h="1.25rem"
+        >
+          {payments.length}
         </Box>
       ) : (
-        <Text
-          textStyle="body-base"
-          color="neutral-6"
-        >
-          {t('n/a')}
-        </Text>
+        t('none')
       )}
     </Td>
   );
@@ -224,10 +176,16 @@ export function RolesRow({ name, wearerAddress, payments, handleRoleClick, hatId
       transition="all ease-out 300ms"
       onClick={() => handleRoleClick(hatId)}
     >
-      <RoleNameColumn roleName={name} />
+      <Td
+        textStyle="body-base"
+        color="lilac-0"
+        width="25%"
+        minW="230px"
+      >
+        {name}
+      </Td>
       <MemberColumn wearerAddress={wearerAddress} />
-      <PaymentColumn payment={payments?.[0]} />
-      <PaymentColumn payment={payments?.[1]} />
+      <PaymentsColumn payments={payments} />
     </Tr>
   );
 }
@@ -257,8 +215,7 @@ export function RolesRowEdit({
         editStatus={editStatus}
       />
       <MemberColumn wearerAddress={wearerAddress} />
-      <PaymentColumn payment={payments?.[0]} />
-      <PaymentColumn payment={payments?.[1]} />
+      <PaymentsColumn payments={payments} />
     </Tr>
   );
 }

src/i18n/locales/en/common.json

@@ -110,5 +110,6 @@
   "show": "Show",
   "hide": "Hide",
   "poweredBy": "Powered by",
-  "goTo": "Go to"
+  "goTo": "Go to",
+  "none": "None"
 }

src/i18n/locales/en/roles.json

@@ -54,6 +54,7 @@
   "hours": "Hours",
   "cliff": "Cliff",
   "cliffSubTitle": "How long until the assets are claimable?",
+  "activePayments": "Active Payments",
   "payments": "Payments",
   "payment": "Payment",
   "withdraw": "Withdraw",