diff --git a/src/components/pages/Roles/RoleCard.tsx b/src/components/pages/Roles/RoleCard.tsx index 68f9980ac5..f621ceb412 100644 --- a/src/components/pages/Roles/RoleCard.tsx +++ b/src/components/pages/Roles/RoleCard.tsx @@ -101,20 +101,20 @@ function Payment({ payment }: { payment: SablierPayment | undefined }) { const { t } = useTranslation(['roles']); const format = ['years', 'days', 'hours']; const endDate = - payment?.scheduleFixedDate?.endDate && + payment?.endDate && formatDuration( intervalToDuration({ - start: payment.scheduleFixedDate.startDate, - end: payment.scheduleFixedDate.endDate, + start: payment.startDate, + end: payment.endDate, }), { format }, ); const cliffDate = - payment?.scheduleFixedDate?.cliffDate && + payment?.cliffDate && formatDuration( intervalToDuration({ - start: payment.scheduleFixedDate.startDate, - end: payment.scheduleFixedDate.cliffDate, + start: payment.startDate, + end: payment.cliffDate, }), { format }, ); diff --git a/src/components/pages/Roles/RolePaymentDetails.tsx b/src/components/pages/Roles/RolePaymentDetails.tsx index 9addc760c1..3ba814a0a8 100644 --- a/src/components/pages/Roles/RolePaymentDetails.tsx +++ b/src/components/pages/Roles/RolePaymentDetails.tsx @@ -121,20 +121,19 @@ export function RolePaymentDetails({ }, [addressPrefix, navigate, safe?.address, withdraw]); const amountPerWeek = useMemo(() => { - if (!payment.amount || !payment.scheduleFixedDate) { + if (!payment.amount) { return; } const totalAmount = Number(payment.amount.value); - const endDate = payment.scheduleFixedDate.endDate.getTime(); - const startDate = payment.scheduleFixedDate.startDate.getTime(); + const endDate = payment.endDate.getTime(); + const startDate = payment.startDate.getTime(); const totalMilliseconds = endDate - startDate; const totalWeeks = totalMilliseconds / (1000 * 60 * 60 * 24 * 7); - const roundedWeeks = Math.ceil(totalWeeks); - return totalAmount / roundedWeeks; - }, [payment.amount, payment.scheduleFixedDate]); + return totalAmount / totalWeeks; + }, [payment]); const streamAmountUSD = useMemo(() => { if (!payment.amount) { @@ -148,7 +147,7 @@ export function RolePaymentDetails({ return; } return Number(payment.amount.value) * foundAsset.usdPrice; - }, [payment.amount, payment.asset.address, assetsFungible]); + }, [payment.amount, payment.asset?.address, assetsFungible]); return ( - {payment.amount.bigintValue + {payment.amount?.bigintValue ? formatCoin( payment.amount.bigintValue, false, - payment.asset.decimals, + payment.asset?.decimals, payment.asset?.symbol, ) : undefined} @@ -191,7 +190,7 @@ export function RolePaymentDetails({ p="0.5rem" > @@ -199,7 +198,7 @@ export function RolePaymentDetails({ textStyle="label-base" color="white-0" > - {payment.asset.symbol ?? t('selectLabel', { ns: 'modals' })} + {payment.asset?.symbol ?? t('selectLabel', { ns: 'modals' })} @@ -219,7 +218,7 @@ export function RolePaymentDetails({ textStyle="label-small" color="white-0" > - {`${amountPerWeek} ${payment.asset.symbol} / ${t('week')}`} + {`${amountPerWeek?.toLocaleString()} ${payment.asset?.symbol} / ${t('week')}`} @@ -240,7 +239,7 @@ export function RolePaymentDetails({ @@ -255,7 +254,7 @@ export function RolePaymentDetails({ @@ -270,7 +269,7 @@ export function RolePaymentDetails({ diff --git a/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx b/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx index 0468411332..e47218719e 100644 --- a/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx +++ b/src/components/pages/Roles/forms/RoleFormPaymentStream.tsx @@ -6,165 +6,25 @@ import { Grid, GridItem, Icon, - IconButton, Menu, MenuButton, MenuList, - NumberInput, - NumberInputField, Show, - Tab, - TabList, - TabPanel, - TabPanels, - Tabs, - Text, } from '@chakra-ui/react'; -import { ArrowLeft, ArrowRight, Minus, Plus } from '@phosphor-icons/react'; -import { Field, FieldProps, FormikErrors, useFormikContext } from 'formik'; +import { ArrowLeft, ArrowRight } from '@phosphor-icons/react'; +import { Field, FormikErrors, useFormikContext } from 'formik'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { getAddress } from 'viem'; import { CARD_SHADOW } from '../../../../constants/common'; import { useRolesStore } from '../../../../store/roles'; import DraggableDrawer from '../../../ui/containers/DraggableDrawer'; -import LabelWrapper from '../../../ui/forms/LabelWrapper'; import { DecentDatePicker } from '../../../ui/utils/DecentDatePicker'; import { DatePickerTrigger } from '../DatePickerTrigger'; import { RoleFormValues, RoleValue } from '../types'; import { AssetSelector } from './RoleFormAssetSelector'; import { SectionTitle } from './RoleFormSectionTitle'; -function DurationTicker({ - fieldName, - fieldType, - formIndex, -}: { - fieldType: 'duration' | 'cliffDuration'; - fieldName: 'years' | 'days' | 'hours'; - formIndex: number; -}) { - const { t } = useTranslation(['roles']); - return ( - - - {({ field, form: { setFieldValue }, meta }: FieldProps) => { - return ( - - - - } - onClick={() => { - if (field.value === undefined || Number(field.value) <= 0) return; - setFieldValue(field.name, Number(field.value) - 1); - }} - /> - setFieldValue(field.name, Number(value))} - > - - - - } - onClick={() => { - if (field.value === undefined) { - setFieldValue(field.name, 1); - return; - } - setFieldValue(field.name, Number(field.value) + 1); - }} - /> - - - ); - }} - - - ); -} - -function ScheduleDuration({ formIndex }: { formIndex: number }) { - return ( - - - - - - ); -} - -function CliffDuration({ formIndex }: { formIndex: number }) { - const { t } = useTranslation(['roles']); - return ( - - - - - - - - - ); -} - function PaymentDatePicker({ type, formIndex, @@ -174,7 +34,7 @@ function PaymentDatePicker({ }) { const { setFieldValue, values } = useFormikContext(); - const selectedDate = values.roleEditing?.payments?.[formIndex].scheduleFixedDate?.[type]; + const selectedDate = values.roleEditing?.payments?.[formIndex][type]; const [isDrawerOpen, setIsDrawerOpen] = useState(false); @@ -182,22 +42,19 @@ function PaymentDatePicker({ const onCliffDateChange = isCliffDate ? (date: Date) => { - setFieldValue(`roleEditing.payments[${formIndex}].scheduleFixedDate.cliffDate`, date); + setFieldValue(`roleEditing.payments[${formIndex}].cliffDate`, date); } : undefined; const onDateRangeChange = !isCliffDate ? (dateRange: Date[]) => { - setFieldValue( - `roleEditing.payments[${formIndex}].scheduleFixedDate.startDate`, - dateRange[0], - ); - setFieldValue(`roleEditing.payments[${formIndex}].scheduleFixedDate.endDate`, dateRange[1]); + setFieldValue(`roleEditing.payments[${formIndex}].startDate`, dateRange[0]); + setFieldValue(`roleEditing.payments[${formIndex}].endDate`, dateRange[1]); } : undefined; return ( - + {() => ( <> @@ -257,7 +114,6 @@ function FixedDate({ formIndex }: { formIndex: number }) { return ( - {t('fixedDates')} (); - - return ( - - - - setFieldValue(`roleEditing.payments[${formIndex}].scheduleType`, 'duration') - } - > - {t('duration')} - - - setFieldValue(`roleEditing.payments[${formIndex}].scheduleType`, 'fixedDate') - } - > - {t('fixedDates')} - - - - - - - - - - - - - - - - - ); -} - export default function RoleFormPaymentStream({ formIndex }: { formIndex: number }) { const { t } = useTranslation(['roles']); const { values, errors, setFieldValue } = useFormikContext(); @@ -425,7 +236,7 @@ export default function RoleFormPaymentStream({ formIndex }: { formIndex: number subTitle={t('scheduleSubTitle')} tooltipContent={t('cliffPaymentTooltip')} /> - +