🚧 ui

components/OperationsModal/BorrowDateSelector/index.tsx

@@ -0,0 +1,83 @@
+import React, { useCallback } from 'react';
+import { Box, Typography } from '@mui/material';
+
+import DropdownMenu from 'components/DropdownMenu';
+import parseTimestamp from 'utils/parseTimestamp';
+
+import { useTranslation } from 'react-i18next';
+import { useOperationContext } from 'contexts/OperationContext';
+import getHourUTC2Local from 'utils/getHourUTC2Local';
+import { track } from 'utils/mixpanel';
+
+import ModalAlert from '../../common/modal/ModalAlert';
+
+type DateOptionProps = {
+  label: string;
+  option?: boolean;
+};
+
+export function DateOption({ label, option = false }: DateOptionProps) {
+  return (
+    <Typography
+      fontWeight={600}
+      fontSize={option ? 14 : 18}
+      mt={option ? '4px' : '6px'}
+      data-testid={!option ? 'modal-date-selector' : undefined}
+    >
+      {label}
+    </Typography>
+  );
+}
+
+function BorrowDateSelector() {
+  const { t } = useTranslation();
+  const { date, dates, setDate } = useOperationContext();
+
+  const handleChange = useCallback(
+    (maturity: bigint) => {
+      setDate(maturity);
+      track('Option Selected', {
+        location: 'Operations Modal',
+        name: 'maturity',
+        value: String(maturity),
+        prevValue: String(date),
+      });
+    },
+    [date, setDate],
+  );
+
+  const daysToMaturity = Math.floor((Number(date) - Date.now() / 1000) / 60 / 60 / 24);
+
+  return (
+    <Box display="flex" flexDirection="column" flexGrow={1} gap="20px">
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Typography fontFamily="fontFamilyMonospaced" color="grey.600" fontSize={12} fontWeight={500} noWrap>
+          {t('First Payment Due Date')}
+        </Typography>
+        <Box>
+          <DropdownMenu
+            label={t('Maturity')}
+            options={dates}
+            onChange={handleChange}
+            renderValue={date ? <DateOption label={parseTimestamp(date)} /> : null}
+            renderOption={(o: bigint) => <DateOption option label={parseTimestamp(o)} />}
+          />
+          <Typography color="figma.grey.500" fontWeight={500} fontSize={13} fontFamily="fontFamilyMonospaced">
+            {t('at {{hour}}', { hour: getHourUTC2Local() })}
+          </Typography>
+        </Box>
+      </Box>
+      {daysToMaturity <= 7 && (
+        <ModalAlert
+          message={t(
+            'Dues in {{daysToMaturity}} days. for optimal benefits, consider selecting a pool with a longer remaining duration.',
+            { daysToMaturity },
+          )}
+          variant="warning"
+        />
+      )}
+    </Box>
+  );
+}
+
+export default React.memo(BorrowDateSelector);

components/common/modal/ModalAlert/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Box, SxProps, Typography } from '@mui/material';
 import InfoIcon from '@mui/icons-material/InfoRounded';
 import WarningIcon from '@mui/icons-material/ErrorRounded';
@@ -11,7 +11,7 @@ type Variant = 'info' | 'warning' | 'error' | 'success';
 
 type Props = {
   variant?: Variant;
-  message: string;
+  message: ReactNode;
   mb?: number;
 };