remove old payment UI from edit card

decentdao · Feb 7, 2025 · 7408e13 · 7408e13
1 parent 7db450c
commit 7408e13
Showing 1 changed file with 3 additions and 89 deletions.
diff --git 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 (
-    <Flex flexDir="column">
-      <Box
-        mt="0.25rem"
-        ml="4rem"
-      >
-        <Text
-          textStyle="labels-large"
-          color="neutral-7"
-        >
-          {t('payment')}
-        </Text>
-        <Flex
-          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' }}
-            padding={0}
-            borderWidth={0}
-            value={payment.asset?.address ?? null}
-            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>
-      </Box>
-    </Flex>
-  );
-}
-
 export function RoleCard({
   name,
   wearerAddress,
@@ -221,6 +141,7 @@ export function RoleCardEdit({
         <AvatarAndRoleName
           wearerAddress={wearerAddress}
           name={name}
+          paymentsCount={payments?.length}
         />
         <Flex
           alignItems="center"
@@ -233,13 +154,6 @@ export function RoleCardEdit({
           />
         </Flex>
       </Flex>
-      {payments &&
-        payments.map((payment, index) => (
-          <Payment
-            key={index}
-            payment={payment}
-          />
-        ))}
     </Card>
   );
 }