feedback comments

decentdao · Sep 12, 2024 · 974e7b9 · 974e7b9
1 parent efc7555
commit 974e7b9
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 66 deletions.
diff --git a/src/components/pages/Roles/RolePaymentDetails.tsx b/src/components/pages/Roles/RolePaymentDetails.tsx
@@ -291,7 +291,7 @@ export function RolePaymentDetails({
  (isTop: boolean) =>
  isActiveStream
  ? {
- bg: '#221D25',
+ bg: 'neutral-2',
  sx: undefined,
  boxShadow: PAYMENT_DETAILS_BOX_SHADOW,
  }
@@ -303,10 +303,8 @@ export function RolePaymentDetails({
  },
  bg: 'none',
  boxShadow: 'none',
- borderTop: '1px solid',
+ border: '1px solid',
  borderBottom: isTop ? 'none' : '1px solid',
- borderLeft: '1px solid',
- borderRight: '1px solid',
  borderColor: 'neutral-4',
  },
  [isActiveStream],

diff --git a/src/components/pages/Roles/RolesDetailsDrawer.tsx b/src/components/pages/Roles/RolesDetailsDrawer.tsx
@@ -10,6 +10,7 @@ import {
  Text,
 } from '@chakra-ui/react';
 import { List, PencilLine, User, X } from '@phosphor-icons/react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Hex, getAddress } from 'viem';
 import { isFeatureEnabled } from '../../../constants/common';
@@ -69,6 +70,17 @@ export default function RolesDetailsDrawer({
  });
  const avatarURL = useAvatar(roleHat.wearer);
 
+ const sortedPayments = useMemo(
+ () =>
+ roleHat.payments
+ ? [...roleHat.payments]
+ .sort(paymentSorterByWithdrawAmount)
+ .sort(paymentSorterByStartDate)
+ .sort(paymentSorterByActiveStatus)
+ : [],
+ [roleHat.payments],
+ );
+
  if (!daoAddress) return null;
 
  return (
@@ -172,19 +184,15 @@ export default function RolesDetailsDrawer({
  >
  {t('payments')}
  </Text>
- {[...roleHat.payments]
- .sort(paymentSorterByWithdrawAmount)
- .sort(paymentSorterByStartDate)
- .sort(paymentSorterByActiveStatus)
- .map((payment, index) => (
- <RolePaymentDetails
- key={index}
- payment={payment}
- roleHatSmartAddress={roleHat.smartAddress}
- roleHatWearerAddress={getAddress(roleHat.wearer)}
- showWithdraw
- />
- ))}
+ {sortedPayments.map((payment, index) => (
+ <RolePaymentDetails
+ key={index}
+ payment={payment}
+ roleHatSmartAddress={roleHat.smartAddress}
+ roleHatWearerAddress={getAddress(roleHat.wearer)}
+ showWithdraw
+ />
+ ))}
  </>
  )}
  </DrawerBody>

diff --git a/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx b/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx
@@ -1,5 +1,6 @@
 import { Box, Flex, Icon, IconButton, Text } from '@chakra-ui/react';
 import { PencilLine } from '@phosphor-icons/react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getAddress, Hex } from 'viem';
 import { isFeatureEnabled } from '../../../constants/common';
@@ -37,6 +38,17 @@ export default function RolesDetailsDrawerMobile({
  const { t } = useTranslation('roles');
  const { hatsTree } = useRolesStore();
 
+ const sortedPayments = useMemo(
+ () =>
+ roleHat.payments
+ ? [...roleHat.payments]
+ .sort(paymentSorterByWithdrawAmount)
+ .sort(paymentSorterByStartDate)
+ .sort(paymentSorterByActiveStatus)
+ : [],
+ [roleHat.payments],
+ );
+
  if (!daoAddress || !hatsTree) return null;
 
  return (
@@ -105,19 +117,15 @@ export default function RolesDetailsDrawerMobile({
  >
  {t('payments')}
  </Text>
- {[...roleHat.payments]
- .sort(paymentSorterByWithdrawAmount)
- .sort(paymentSorterByStartDate)
- .sort(paymentSorterByActiveStatus)
- .map((payment, index) => (
- <RolePaymentDetails
- key={index}
- payment={payment}
- roleHatSmartAddress={roleHat.smartAddress}
- roleHatWearerAddress={getAddress(roleHat.wearer)}
- showWithdraw
- />
- ))}
+ {sortedPayments.map((payment, index) => (
+ <RolePaymentDetails
+ key={index}
+ payment={payment}
+ roleHatSmartAddress={roleHat.smartAddress}
+ roleHatWearerAddress={getAddress(roleHat.wearer)}
+ showWithdraw
+ />
+ ))}
  </>
  )}
  </Box>

diff --git a/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx b/src/components/pages/Roles/forms/RoleFormPaymentStreams.tsx
@@ -1,6 +1,7 @@
 import { Box, Button } from '@chakra-ui/react';
 import { Plus } from '@phosphor-icons/react';
 import { FieldArray, useFormikContext } from 'formik';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
  paymentSorterByWithdrawAmount,
@@ -15,6 +16,17 @@ export function RoleFormPaymentStreams() {
  const { values, setFieldValue, validateForm } = useFormikContext<RoleFormValues>();
  const payments = values.roleEditing?.payments;
 
+ const sortedPayments = useMemo(
+ () =>
+ payments
+ ? [...payments]
+ .sort(paymentSorterByWithdrawAmount)
+ .sort(paymentSorterByStartDate)
+ .sort(paymentSorterByActiveStatus)
+ : [],
+ [payments],
+ );
+
  return (
  <FieldArray name="roleEditing.payments">
  {({ push: pushPayment }: { push: (streamFormValue: SablierPaymentFormValues) => void }) => (
@@ -35,42 +47,38 @@ export function RoleFormPaymentStreams() {
  {t('addPayment')}
  </Button>
  <Box mt="0.5rem">
- {[...(payments ?? [])]
- .sort(paymentSorterByWithdrawAmount)
- .sort(paymentSorterByStartDate)
- .sort(paymentSorterByActiveStatus)
- .map((payment, index) => {
- // @note don't render if form isn't valid
- if (!payment.amount || !payment.asset || !payment.startDate || !payment.endDate)
- return null;
- return (
- <RolePaymentDetails
- key={index}
- roleHatId={values.roleEditing?.id}
- showCancel={
- // @note can not cancel a new role
- values.roleEditing?.id !== undefined &&
- // @note can not cancel a pending creation
- payment.streamId !== undefined &&
- // @note can not cancel a stream that is already cancelled or ended
- !payment.isCancelled &&
- !!payment.endDate &&
- payment.endDate.getTime() > Date.now()
- }
- payment={{
- streamId: payment.streamId,
- amount: payment.amount,
- asset: payment.asset,
- endDate: payment.endDate,
- startDate: payment.startDate,
- cliffDate: payment.cliffDate,
- isCancelled: payment.isCancelled ?? false,
- isStreaming: payment.isStreaming ?? (() => false),
- isCancelling: payment.isCancelling,
- }}
- />
- );
- })}
+ {sortedPayments.map((payment, index) => {
+ // @note don't render if form isn't valid
+ if (!payment.amount || !payment.asset || !payment.startDate || !payment.endDate)
+ return null;
+ return (
+ <RolePaymentDetails
+ key={index}
+ roleHatId={values.roleEditing?.id}
+ showCancel={
+ // @note can not cancel a new role
+ values.roleEditing?.id !== undefined &&
+ // @note can not cancel a pending creation
+ payment.streamId !== undefined &&
+ // @note can not cancel a stream that is already cancelled or ended
+ !payment.isCancelled &&
+ !!payment.endDate &&
+ payment.endDate.getTime() > Date.now()
+ }
+ payment={{
+ streamId: payment.streamId,
+ amount: payment.amount,
+ asset: payment.asset,
+ endDate: payment.endDate,
+ startDate: payment.startDate,
+ cliffDate: payment.cliffDate,
+ isCancelled: payment.isCancelled ?? false,
+ isStreaming: payment.isStreaming ?? (() => false),
+ isCancelling: payment.isCancelling,
+ }}
+ />
+ );
+ })}
  </Box>
  </Box>
  )}