From bf8bad9b3209f6bca25654cf662d80940153034c Mon Sep 17 00:00:00 2001 From: David Colon <38386583+Da-Colon@users.noreply.github.com> Date: Fri, 7 Feb 2025 01:50:06 -0500 Subject: [PATCH 1/4] Clean Up: Name, display address and payment count alignment --- src/components/Roles/RoleCard.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/Roles/RoleCard.tsx b/src/components/Roles/RoleCard.tsx index 3bbe3fdad..ee75ea34c 100644 --- a/src/components/Roles/RoleCard.tsx +++ b/src/components/Roles/RoleCard.tsx @@ -4,7 +4,6 @@ import { formatDuration, intervalToDuration } from 'date-fns'; import { useTranslation } from 'react-i18next'; import { Address, getAddress, zeroAddress } from 'viem'; import { useNetworkEnsAvatar } from '../../hooks/useNetworkEnsAvatar'; -import { useCopyText } from '../../hooks/utils/useCopyText'; import { useGetAccountName } from '../../hooks/utils/useGetAccountName'; import { EditBadgeStatus, @@ -30,7 +29,6 @@ export function AvatarAndRoleName({ const { data: avatarURL } = useNetworkEnsAvatar({ name: wearerAddress || zeroAddress }); const { t } = useTranslation(['roles']); - const copyToClipboard = useCopyText(); return ( @@ -50,7 +48,7 @@ export function AvatarAndRoleName({ copyToClipboard(wearerAddress)} > {displayName ?? t('unassigned')} {paymentsCount !== undefined && ( Date: Fri, 7 Feb 2025 01:51:39 -0500 Subject: [PATCH 2/4] fix inactive conditional --- src/components/Roles/RoleCard.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Roles/RoleCard.tsx b/src/components/Roles/RoleCard.tsx index ee75ea34c..76781595f 100644 --- a/src/components/Roles/RoleCard.tsx +++ b/src/components/Roles/RoleCard.tsx @@ -195,7 +195,9 @@ export function RoleCard({ name={name} paymentsCount={paymentsCount} /> - + ); From 7db450c711e9ce59e7a11ee24806a8a9bd043106 Mon Sep 17 00:00:00 2001 From: David Colon <38386583+Da-Colon@users.noreply.github.com> Date: Fri, 7 Feb 2025 01:52:27 -0500 Subject: [PATCH 3/4] fix conditional for active term --- src/components/Roles/RolesTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Roles/RolesTable.tsx b/src/components/Roles/RolesTable.tsx index b51f04f45..d8f6b6302 100644 --- a/src/components/Roles/RolesTable.tsx +++ b/src/components/Roles/RolesTable.tsx @@ -107,7 +107,7 @@ function MemberColumn({ const { t } = useTranslation('roles'); // @dev undefined = not termed - const memberTextColor = !isCurrentTermActive ? 'neutral-6' : 'white-0'; + const memberTextColor = isCurrentTermActive === false ? 'neutral-6' : 'white-0'; const isPendingText = isMemberTermPending ? t('wearerPending') : ''; const wearerAddressText = wearerAddress From 7408e13d78787e10d2b51d37e9c5af2dfbeb5d1d Mon Sep 17 00:00:00 2001 From: David Colon <38386583+Da-Colon@users.noreply.github.com> Date: Fri, 7 Feb 2025 02:16:43 -0500 Subject: [PATCH 4/4] remove old payment UI from edit card --- src/components/Roles/RoleCard.tsx | 92 +------------------------------ 1 file changed, 3 insertions(+), 89 deletions(-) diff --git a/src/components/Roles/RoleCard.tsx b/src/components/Roles/RoleCard.tsx index 76781595f..32eb2acb5 100644 --- a/src/components/Roles/RoleCard.tsx +++ b/src/components/Roles/RoleCard.tsx @@ -1,18 +1,11 @@ -import { Box, Flex, Icon, Image, Text } from '@chakra-ui/react'; +import { Box, Flex, Icon, Text } from '@chakra-ui/react'; import { CaretCircleRight, CaretRight } from '@phosphor-icons/react'; -import { formatDuration, intervalToDuration } from 'date-fns'; import { useTranslation } from 'react-i18next'; import { Address, getAddress, zeroAddress } from 'viem'; import { useNetworkEnsAvatar } from '../../hooks/useNetworkEnsAvatar'; import { useGetAccountName } from '../../hooks/utils/useGetAccountName'; -import { - EditBadgeStatus, - RoleEditProps, - RoleProps, - SablierPaymentFormValues, -} from '../../types/roles'; +import { EditBadgeStatus, RoleEditProps, RoleProps } from '../../types/roles'; import { Card } from '../ui/cards/Card'; -import EtherscanLink from '../ui/links/EtherscanLink'; import Avatar from '../ui/page/Header/Avatar'; import EditBadge from './EditBadge'; @@ -103,79 +96,6 @@ export function AvatarAndRoleName({ ); } -function Payment({ payment }: { payment: SablierPaymentFormValues }) { - const { t } = useTranslation(['roles']); - const format = ['years', 'days', 'hours']; - const endDate = - payment.endDate && - payment.startDate && - formatDuration( - intervalToDuration({ - start: payment.startDate, - end: payment.endDate, - }), - { format }, - ); - const cliffDate = - payment.startDate && - payment.cliffDate && - formatDuration( - intervalToDuration({ - start: payment.startDate, - end: payment.cliffDate, - }), - { format }, - ); - return ( - - - - {t('payment')} - - - {payment.asset?.symbol} - {payment.amount?.value} - - {payment.asset?.symbol} - - - {endDate && `${t('after')} ${endDate}`} - - - {cliffDate && `${t('cliff')} ${t('after')} ${cliffDate}`} - - - ); -} - export function RoleCard({ name, wearerAddress, @@ -221,6 +141,7 @@ export function RoleCardEdit({ - {payments && - payments.map((payment, index) => ( - - ))} ); }