Add next validation to calendar

renderer/pages/profile.js

@@ -29,7 +29,11 @@ import {
   UserStatLabel,
   ActivateMiningForm,
 } from '../screens/profile/components'
-import {PrimaryButton, IconButton2} from '../shared/components/button'
+import {
+  PrimaryButton,
+  IconButton2,
+  SecondaryButton,
+} from '../shared/components/button'
 import Layout from '../shared/components/layout'
 import {IconLink} from '../shared/components/link'
 import {IdentityStatus, OnboardingStep} from '../shared/types'
@@ -38,8 +42,16 @@ import {
   toLocaleDna,
   callRpc,
   eitherState,
+  buildNextValidationCalendarLink,
 } from '../shared/utils/utils'
-import {ExternalLink, Toast} from '../shared/components/components'
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  ExternalLink,
+  Toast,
+} from '../shared/components/components'
 import KillForm, {
   KillIdentityDrawer,
 } from '../screens/wallets/components/kill-form'
@@ -63,6 +75,7 @@ import {
   activeShowingOnboardingStep,
   onboardingStep,
 } from '../shared/utils/onboarding'
+import {createProfileDb} from '../screens/profile/utils'
 
 export default function ProfilePage() {
   const {
@@ -101,15 +114,22 @@ export default function ProfilePage() {
     online,
     delegatee,
     delegationEpoch,
+    isValidated,
   } = useIdentityState()
 
   const epoch = useEpochState()
 
+  const {
+    isOpen: isOpenNextValidationDialog,
+    onOpen: onOpenNextValidationDialog,
+    onClose: onCloseNextValidationDialog,
+  } = useDisclosure()
+
   const [showValidationResults, setShowValidationResults] = React.useState()
 
   React.useEffect(() => {
-    if (epoch && shouldExpectValidationResults(epoch.epoch)) {
-      const {epoch: epochNumber} = epoch
+    const epochNumber = epoch?.epoch
+    if (epoch && shouldExpectValidationResults(epochNumber)) {
       if (hasPersistedValidationResults(epochNumber)) {
         setShowValidationResults(true)
       } else {
@@ -121,6 +141,21 @@ export default function ProfilePage() {
     }
   }, [epoch])
 
+  const profileDb = createProfileDb(epoch)
+
+  React.useEffect(() => {
+    if (epoch && isValidated) {
+      profileDb
+        .getDidPlanNextValidation()
+        .then(didPlan => {
+          if (!didPlan) onOpenNextValidationDialog()
+        })
+        .catch(error => {
+          if (error?.notFound) onOpenNextValidationDialog()
+        })
+    }
+  }, [epoch, isValidated, onOpenNextValidationDialog, profileDb])
+
   const [currentOnboarding, {done, dismiss, next}] = useOnboarding()
 
   React.useEffect(() => {
@@ -397,6 +432,38 @@ export default function ProfilePage() {
           </Page>
         </Layout>
       </InviteProvider>
+      <Dialog
+        isOpen={isOpenNextValidationDialog}
+        onClose={onCloseNextValidationDialog}
+      >
+        <DialogHeader>
+          {t('Next validation: {{nextValidation}}', {
+            nextValidation: new Date(epoch?.nextValidation).toLocaleString(),
+            nsSeparator: '!!',
+          })}
+        </DialogHeader>
+        <DialogBody>
+          {t(`Add this event to your personal calendar so that you don't miss the
+          next validation`)}
+        </DialogBody>
+        <DialogFooter>
+          <SecondaryButton onClick={onCloseNextValidationDialog}>
+            {t('Cancel')}
+          </SecondaryButton>
+          <PrimaryButton
+            onClick={() => {
+              global.openExternal(
+                buildNextValidationCalendarLink(epoch?.nextValidation)
+              )
+              profileDb
+                .putDidPlanNextValidation(1)
+                .finally(onCloseNextValidationDialog)
+            }}
+          >
+            {t('Add to calendar')}
+          </PrimaryButton>
+        </DialogFooter>
+      </Dialog>
     </>
   )
 }

renderer/screens/profile/utils.js

@@ -0,0 +1,18 @@
+import {requestDb} from '../../shared/utils/db'
+
+export function createProfileDb(epoch) {
+  const db = global.sub(requestDb(), 'profile')
+  const planNextValidationkey = `didPlanNextValidation!!${epoch.epoch}`
+
+  return {
+    getDidPlanNextValidation() {
+      return db.get(planNextValidationkey)
+    },
+    putDidPlanNextValidation(value) {
+      return db.put(planNextValidationkey, value)
+    },
+    clear() {
+      return db.clear()
+    },
+  }
+}

renderer/shared/components/sidebar.js

@@ -6,8 +6,13 @@ import {Trans, useTranslation} from 'react-i18next'
 import {
   Badge,
   Box as ChakraBox,
+  Flex as ChakraFlex,
   Button,
   Icon,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
   PopoverTrigger,
   Stack,
   Text as ChakraText,
@@ -41,7 +46,7 @@ import {
   OnboardingPopoverContent,
   OnboardingPopoverContentIconRow,
 } from './onboarding'
-import {eitherState} from '../utils/utils'
+import {buildNextValidationCalendarLink, eitherState} from '../utils/utils'
 
 function Sidebar() {
   return (
@@ -361,9 +366,55 @@ function ActionPanel() {
                 position="relative"
                 zIndex={9}
               >
-                <Block title={t('Next validation')}>
-                  {new Date(nextValidation).toLocaleString()}
-                </Block>
+                <ChakraFlex justify="space-between" align="baseline" pr={1}>
+                  <Block title={t('Next validation')}>
+                    {new Date(nextValidation).toLocaleString()}
+                  </Block>
+                  <Menu autoSelect={false} mr={1}>
+                    <MenuButton
+                      rounded="md"
+                      py="3/2"
+                      px="2px"
+                      mt="-6px"
+                      _expanded={{bg: 'brandGray.500'}}
+                      _focus={{outline: 0}}
+                    >
+                      <Icon name="more" size={5} />
+                    </MenuButton>
+                    <MenuList
+                      placement="bottom-end"
+                      border="none"
+                      shadow="0 4px 6px 0 rgba(83, 86, 92, 0.24), 0 0 2px 0 rgba(83, 86, 92, 0.2)"
+                      rounded="lg"
+                      py={2}
+                      minWidth="145px"
+                    >
+                      <MenuItem
+                        color="brandGray.500"
+                        fontWeight={500}
+                        px={3}
+                        py={2}
+                        _hover={{bg: 'gray.50'}}
+                        _focus={{bg: 'gray.50'}}
+                        _selected={{bg: 'gray.50'}}
+                        _active={{bg: 'gray.50'}}
+                        onClick={() => {
+                          global.openExternal(
+                            buildNextValidationCalendarLink(nextValidation)
+                          )
+                        }}
+                      >
+                        <Icon
+                          name="plus-square"
+                          size={5}
+                          mr={3}
+                          color="brandBlue.500"
+                        />
+                        Add to calendar
+                      </MenuItem>
+                    </MenuList>
+                  </Menu>
+                </ChakraFlex>
               </ChakraBox>
             </PopoverTrigger>
             <OnboardingPopoverContent

renderer/shared/providers/identity-context.js

@@ -160,6 +160,11 @@ function IdentityProvider({children}) {
         canValidate,
         canMine,
         canTerminate,
+        isValidated: [
+          IdentityStatus.Newbie,
+          IdentityStatus.Verified,
+          IdentityStatus.Human,
+        ].includes(identity?.state),
       }}
     >
       <IdentityDispatchContext.Provider value={{killMe}}>

renderer/shared/utils/utils.js

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs'
 import {getRpcParams} from '../api/api-client'
 
 export function createRpcCaller({url, key}) {
@@ -82,3 +83,13 @@ export function ntp(t0, t1, t2, t3) {
     offset: (t1 - t0 + (t2 - t3)) / 2,
   }
 }
+
+export function buildNextValidationCalendarLink(nextValidation) {
+  return `https://calendar.google.com/calendar/render?action=TEMPLATE&dates=${dayjs(
+    nextValidation
+  ).format('YYYYMMDDTHHmmssZ')}%2F${dayjs(nextValidation)
+    .add(30, 'minute')
+    .format(
+      'YYYYMMDDTHHmmssZ'
+    )}&details=Plan%20your%20time%20in%20advance%20to%20take%20part%20in%20the%20validation%20ceremony%21%20Before%20the%20ceremony%2C%20read%20our%20explainer%20of%20how%20to%20get%20validated%3A%20https%3A%2F%2Fmedium.com%2Fidena%2Fhow-to-pass-a-validation-session-in-idena-1724a0203e81&text=Idena%20Validation%20Ceremony`
+}