Merge branch 'roles-payments-remove-duration' into roles-0.2.0/stream…

…-withdraw-confirmation
decentdao · Aug 16, 2024 · cef8c40 · cef8c40
2 parents f25c88c + 0ebf33e
commit cef8c40
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 391 deletions.
diff --git 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
@@ -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 (
     <Box
@@ -171,11 +170,11 @@ export function RolePaymentDetails({
               textStyle="display-2xl"
               color="white-0"
             >
-              {payment.amount.bigintValue
+              {payment.amount?.bigintValue
                 ? formatCoin(
                     payment.amount.bigintValue,
                     false,
-                    payment.asset.decimals,
+                    payment.asset?.decimals,
                     payment.asset?.symbol,
                   )
                 : undefined}
@@ -191,15 +190,15 @@ export function RolePaymentDetails({
               p="0.5rem"
             >
               <Image
-                src={payment.asset.logo}
+                src={payment.asset?.logo}
                 fallbackSrc="/images/coin-icon-default.svg"
                 boxSize="1.5rem"
               />
               <Text
                 textStyle="label-base"
                 color="white-0"
               >
-                {payment.asset.symbol ?? t('selectLabel', { ns: 'modals' })}
+                {payment.asset?.symbol ?? t('selectLabel', { ns: 'modals' })}
               </Text>
             </Flex>
           </Flex>
@@ -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')}`}
               </Text>
             </Flex>
           </Flex>
@@ -240,7 +239,7 @@ export function RolePaymentDetails({
           <GridItem area="starting">
             <PaymentDate
               label="Starting"
-              date={payment.scheduleFixedDate?.startDate}
+              date={payment.startDate}
             />
           </GridItem>
           <GridItem area="dividerOne">
@@ -255,7 +254,7 @@ export function RolePaymentDetails({
           <GridItem area="cliff">
             <PaymentDate
               label="Cliff"
-              date={payment.scheduleFixedDate?.cliffDate}
+              date={payment.cliffDate}
             />
           </GridItem>
           <GridItem area="dividerTwo">
@@ -270,7 +269,7 @@ export function RolePaymentDetails({
           <GridItem area="ending">
             <PaymentDate
               label="Ending"
-              date={payment.scheduleFixedDate?.endDate}
+              date={payment.endDate}
             />
           </GridItem>
         </Grid>