add: last seen

forbole · Jul 30, 2021 · 9907ed4 · 9907ed4
1 parent 9c239fc
commit 9907ed4
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 0 deletions.
diff --git a/declarations.d.ts b/declarations.d.ts
@@ -51,4 +51,5 @@ type ValidatorProfile = {
   commission: number;
   signedBlockWindow: number;
   missedBlockCounter: number;
+  lastSeen: string;
 }
diff --git a/src/components/desmos_profile/index.tsx b/src/components/desmos_profile/index.tsx
@@ -6,6 +6,8 @@ import {
   Typography,
   Divider,
 } from '@material-ui/core';
+import dayjs, { formatDayJs } from '@utils/dayjs';
+import { useSettingsContext } from '@contexts';
 import {
   Box,
   Avatar,
@@ -24,6 +26,7 @@ import {
 const DesmosProfile: React.FC<{
   className?: string;
 } & DesmosProfile> = (props) => {
+  const { dateFormat } = useSettingsContext();
   const { t } = useTranslation('accounts');
   const classes = useStyles();
   const {
@@ -147,6 +150,17 @@ const DesmosProfile: React.FC<{
                 </Typography>
               )}
             </div>
+            <div className={classnames(classes.item, 'last-seen')}>
+              <Typography variant="h4" className="label">
+                {t('validators:lastSeen')}
+              </Typography>
+              <Typography
+                variant="body1"
+                className="value"
+              >
+                {validator.lastSeen ? formatDayJs(dayjs.utc(validator.lastSeen), dateFormat) : t('validators:na')}
+              </Typography>
+            </div>
           </div>
         )}
         {props.bio && (

diff --git a/src/components/desmos_profile/styles.ts b/src/components/desmos_profile/styles.ts
@@ -84,6 +84,10 @@ export const useStyles = () => {
           display: 'grid',
           gridTemplateColumns: 'repeat(2, 1fr)',
           gridTemplateRows: 'auto',
+          gridGap: theme.spacing(2),
+          [theme.breakpoints.up('md')]: {
+            gridTemplateColumns: 'repeat(4, 1fr)',
+          },
         },
         item: {
           '& .label': {
@@ -116,6 +120,13 @@ export const useStyles = () => {
           '& a': {
             color: theme.palette.custom.fonts.highlight,
           },
+
+          '&.last-seen': {
+            gridColumn: '1/3',
+            [theme.breakpoints.up('md')]: {
+              gridColumn: '3/5',
+            },
+          },
         },
       });
     },

diff --git a/src/screens/validator_details/index.tsx b/src/screens/validator_details/index.tsx
@@ -58,6 +58,7 @@ const ValidatorDetails = () => {
                 commission: overview.commission,
                 signedBlockWindow: overview.signedBlockWindow,
                 missedBlockCounter: overview.missedBlockCounter,
+                lastSeen: overview.lastSeen,
               }}
             />
           ) : (