1  import { ProposalState } from '@aave/contract-helpers';
 2  import { Trans } from '@lingui/macro';
 3  import { Typography } from '@mui/material';
 4  import dayjs from 'dayjs';
 5  import relativeTime from 'dayjs/plugin/relativeTime';
 6  import { useCurrentTimestamp } from 'src/hooks/useCurrentTimestamp';
 7  
 8  dayjs.extend(relativeTime);
 9  
10  interface FormattedProposalTimeProps {
11    state: ProposalState;
12    startTimestamp: number;
13    executionTime: number;
14    expirationTimestamp: number;
15    executionTimeWithGracePeriod: number;
16  }
17  
18  export function FormattedProposalTime({
19    state,
20    executionTime,
21    startTimestamp,
22    expirationTimestamp,
23    executionTimeWithGracePeriod,
24  }: FormattedProposalTimeProps) {
25    const timestamp = useCurrentTimestamp(30);
26  
27    if ([ProposalState.Pending].includes(state)) {
28      return (
29        <Typography component="span" variant="caption">
30          <Typography
31            variant="caption"
32            color="text.secondary"
33            sx={{ display: { xs: 'none', md: 'inline' } }}
34          >
35            {state}&nbsp;
36            <Trans>starts</Trans>
37            &nbsp;
38          </Typography>
39          {dayjs.unix(startTimestamp).fromNow()}
40        </Typography>
41      );
42    }
43    if ([ProposalState.Active].includes(state)) {
44      return (
45        <Typography component="span" variant="caption">
46          <Typography
47            variant="caption"
48            color="text.secondary"
49            sx={{ display: { xs: 'none', md: 'inline' } }}
50          >
51            {state}&nbsp;
52            <Trans>ends</Trans>
53            &nbsp;
54          </Typography>
55          {dayjs.unix(expirationTimestamp).fromNow()}
56        </Typography>
57      );
58    }
59    if (
60      [
61        ProposalState.Canceled,
62        ProposalState.Expired,
63        ProposalState.Failed,
64        ProposalState.Succeeded,
65        ProposalState.Executed,
66      ].includes(state)
67    ) {
68      return (
69        <Typography component="span" variant="caption">
70          <Typography
71            variant="caption"
72            color="text.secondary"
73            sx={{ display: { xs: 'none', md: 'inline' } }}
74          >
75            {state}&nbsp;
76            <Trans>on</Trans>
77            &nbsp;
78          </Typography>
79          {dayjs
80            .unix(state === ProposalState.Executed ? executionTime : expirationTimestamp)
81            .format('MMM DD, YYYY')}
82        </Typography>
83      );
84    }
85    const canBeExecuted = timestamp > executionTime;
86    return (
87      <Typography component="span" variant="caption">
88        <Typography
89          variant="caption"
90          color="text.secondary"
91          sx={{ display: { xs: 'none', md: 'inline' } }}
92        >
93          {canBeExecuted ? <Trans>Expires</Trans> : <Trans>Can be executed</Trans>}
94          &nbsp;
95        </Typography>
96        {dayjs.unix(canBeExecuted ? executionTimeWithGracePeriod : executionTime).fromNow()}
97      </Typography>
98    );
99  }