Notifications: wiring and integration with API

src/App.js

@@ -6,6 +6,7 @@ import AppLoader from './components/AppLoader'
 import GlobalErrorHandler from './GlobalErrorHandler'
 import MainView from './components/MainView'
 import OnboardingLoader from './components/OnboardingLoader'
+import EmailNotificationsLoader from './components/EmailNotificationsLoader'
 import RequestPanel from './components/RequestPanel/RequestPanel'
 import Routes from './Routes'
 import { ActivityProvider } from './components/Activity/ActivityProvider'
@@ -32,6 +33,7 @@ function App() {
                     <RequestQueueProvider>
                       <MainView>
                         <OnboardingLoader>
+                          <EmailNotificationsLoader />
                           <AppLoader>
                             <Routes />
                           </AppLoader>

src/Routes.js

@@ -6,6 +6,9 @@ import Tasks from './components/Tasks/Tasks'
 import Disputes from './components/Disputes/Disputes'
 import DisputeDetail from './components/Disputes/DisputeDetail'
 
+// Preferences
+const GLOBAL_PREFERENCES_QUERY_PARAM = '?preferences=/'
+
 export default function Routes() {
   return (
     <Switch>
@@ -18,3 +21,7 @@ export default function Routes() {
     </Switch>
   )
 }
+
+export function getPreferencesSearch(screen) {
+  return `${GLOBAL_PREFERENCES_QUERY_PARAM}${screen}`
+}

src/components/EmailNotifications/DeleteEmail.js

@@ -1,25 +1,25 @@
 import React from 'react'
-import { Button, GU, textStyle, useTheme } from '@aragon/ui'
+import { Button, GU, textStyle, useInside, useTheme } from '@aragon/ui'
 
 import emailNotifcationIllustration from '../../assets/emailNotifications.svg'
 
 const DeleteEmail = React.memo(function DeleteEmail({
-  isModal,
   email,
   onDelete,
   onCancel,
 }) {
   const theme = useTheme()
+  const [insideModal] = useInside('NotificationsModal')
 
   return (
     <div
       css={`
         display: flex;
-        padding-top: ${isModal ? 3 : 0 * GU}px;
+        padding-top: ${insideModal ? 3 : 0 * GU}px;
         flex-direction: column;
       `}
     >
-      {!isModal && (
+      {!insideModal && (
         <div
           css={`
             text-align: center;
@@ -37,8 +37,8 @@ const DeleteEmail = React.memo(function DeleteEmail({
         css={`
           display: flex;
           flex-direction: column;
-          text-align: ${isModal ? 'left' : 'center'};
-          margin-top: ${isModal ? 0 : 5 * GU}px;
+          text-align: ${insideModal ? 'left' : 'center'};
+          margin-top: ${insideModal ? 0 : 5 * GU}px;
         `}
       >
         <span
@@ -63,7 +63,7 @@ const DeleteEmail = React.memo(function DeleteEmail({
           css={`
             margin-top: ${4 * GU}px;
             display: flex;
-            justify-content: ${isModal ? 'flex-end' : 'center'};
+            justify-content: ${insideModal ? 'flex-end' : 'center'};
           `}
         >
           <Button
@@ -72,15 +72,15 @@ const DeleteEmail = React.memo(function DeleteEmail({
             `}
             onClick={onCancel}
             size="medium"
-            wide={!isModal}
+            wide={!insideModal}
           >
             Cancel
           </Button>
           <Button
             mode="negative"
             onClick={onDelete}
             size="medium"
-            wide={!isModal}
+            wide={!insideModal}
           >
             Delete email
           </Button>

src/components/EmailNotifications/EmailNotificationError.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { GU, textStyle, useTheme } from '@aragon/ui'
+
+import emailIllustration from '../../assets/emailIllustration.svg'
+
+const VerifyEmailAddress = React.memo(function VerifyEmailAddress({ email }) {
+  const theme = useTheme()
+
+  return (
+    <div
+      css={`
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: ${5 * GU}px;
+      `}
+    >
+      <div
+        css={`
+          display: flex;
+          flex-direction: column;
+          text-align: center;
+        `}
+      >
+        <img src={emailIllustration} />
+        <span
+          css={`
+            ${textStyle('title2')};
+            margin-top: ${4 * GU}px;
+          `}
+        >
+          Cannot connect to Notifications server
+        </span>
+
+        <span
+          css={`
+            ${textStyle('body2')};
+            color: ${theme.surfaceContentSecondary};
+            margin-top: ${1.5 * GU}px;
+          `}
+        >
+          There was a problem when trying to connect to the Email Notifications
+          server. Make sure your Internet connection is working and please try
+          again.
+        </span>
+      </div>
+    </div>
+  )
+})
+
+export default VerifyEmailAddress

src/components/EmailNotifications/EmailNotificationsForm.js

@@ -30,7 +30,7 @@ function EmailNotificationsForm({
 
   const theme = useTheme()
   const { account } = useWallet()
-  const [insideModal] = useInside('Modal')
+  const [insideModal] = useInside('NotificationsModal')
   const { below } = useViewport()
   const compactMode = below('medium')
 
@@ -259,7 +259,6 @@ const LegalTermsAndPolicy = React.memo(function LegalTermsAndPolicy({
   termsAccepted,
   onChange,
 }) {
-  console.log('terms accepted ', termsAccepted)
   return (
     <div
       css={`