Allow notif modal

package.json

@@ -70,6 +70,7 @@
     "eth-crypto": "1.6.0",
     "eth-sig-util": "^3.0.1",
     "ethers": "^5.7.2",
+    "firebase": "^10.12.2",
     "https-browserify": "1.0.0",
     "image-size": "0.9.3",
     "immer": "^10.0.2",

public/index.html

@@ -132,6 +132,7 @@
     <!-- Meta Tags Generated via https://www.opengraph.xyz -->
 
     <!-- Start Single Page Apps for GitHub Pages -->
+
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages
       // MIT License

src/App.tsx

@@ -1,5 +1,5 @@
 // React + Web3 Essentials
-import { FC, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 
 // External Packages
 import * as dotenv from 'dotenv';
@@ -14,9 +14,10 @@ import { createGlobalStyle } from 'styled-components';
 
 // Internal Compoonents
 import InitState from 'components/InitState';
-import { AppContext } from 'contexts/AppContext';
+import { useBrowserNotification } from 'hooks/useBrowserNotification';
+import AppContextProvider, { AppContext } from 'contexts/AppContext';
 import NavigationContextProvider from 'contexts/NavigationContext';
-import { useAccount, useInactiveListener } from 'hooks';
+import { useAccount, useInactiveListener, useSDKSocket } from 'hooks';
 import { resetAdminSlice } from 'redux/slices/adminSlice';
 import { resetChannelCreationSlice } from 'redux/slices/channelCreationSlice';
 import { resetNotificationsSlice } from 'redux/slices/notificationSlice';
@@ -27,6 +28,9 @@ import UserJourneySteps from 'segments/userJourneySteps';
 import Header from 'structure/Header';
 import MasterInterfacePage from 'structure/MasterInterfacePage';
 import Navigation from 'structure/Navigation';
+import AppLogin from './AppLogin';
+import { SectionV2 } from './components/reusables/SharedStylingV2';
+import { ErrorContext } from './contexts/ErrorContext';
 import { setIndex, setRun, setWelcomeNotifsEmpty } from './redux/slices/userJourneySlice';
 
 // Internal Configs
@@ -107,42 +111,42 @@ const GlobalStyle = createGlobalStyle`
 
 export interface IUseSpaceReturnValues {
   spaceUI: SpacesUI;
-  SpaceInvitesComponent: FC<ISpaceInvitesProps>;
-  SpaceWidgetComponent: FC<ISpaceWidgetProps>;
-  SpaceFeedComponent: FC<ISpaceFeedProps>;
-  SpaceBannerComponent: FC<ISpaceBannerProps>;
-  CreateSpaceComponent: FC<ISpaceCreateWidgetProps>;
+  SpaceInvitesComponent: React.FC<ISpaceInvitesProps>;
+  SpaceWidgetComponent: React.FC<ISpaceWidgetProps>;
+  SpaceFeedComponent: React.FC<ISpaceFeedProps>;
+  SpaceBannerComponent: React.FC<ISpaceBannerProps>;
+  CreateSpaceComponent: React.FC<ISpaceCreateWidgetProps>;
 }
 
-// Extend the console
-const extendConsole = () => {
-  'use strict';
-  try {
-    var disabledConsoles = {};
-    console.enable = function (level, enabled) {
-      if (window.console === 'undefined' || !window.console || window.console === null) {
-        window.console = {};
-      }
-      if (window.console[level] === 'undefined' || !window.console[level] || window.console[level] === null) {
-        window.console[level] = function () {};
-      }
-      if (enabled) {
-        if (disabledConsoles[level]) {
-          window.console[level] = disabledConsoles[level];
-        }
-      } else {
-        disabledConsoles[level] = window.console[level];
-        window.console[level] = function () {};
-      }
-    };
-  } catch (e) {
-    console.error('Extended console() threw an error!');
-    console.debug(e);
-  }
-};
-
-// extend console
-extendConsole();
+// // Extend the console
+// const extendConsole = () => {
+//   'use strict';
+//   try {
+//     var disabledConsoles = {};
+//     console.enable = function (level, enabled) {
+//       if (window.console === 'undefined' || !window.console || window.console === null) {
+//         window.console = {};
+//       }
+//       if (window.console[level] === 'undefined' || !window.console[level] || window.console[level] === null) {
+//         window.console[level] = function () {};
+//       }
+//       if (enabled) {
+//         if (disabledConsoles[level]) {
+//           window.console[level] = disabledConsoles[level];
+//         }
+//       } else {
+//         disabledConsoles[level] = window.console[level];
+//         window.console[level] = function () {};
+//       }
+//     };
+//   } catch (e) {
+//     console.error('Extended console() threw an error!');
+//     console.debug(e);
+//   }
+// };
+
+// // extend console
+// extendConsole();
 
 // Disable console but not on localhost
 if (location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') {
@@ -169,18 +173,17 @@ export default function App() {
 
   const dispatch = useDispatch();
 
-  const { isActive, account, provider } = useAccount();
-  const [currentTime, setcurrentTime] = useState(0);
-
+  const { isActive, account, chainId, provider } = useAccount();
+  const [currentTime, setcurrentTime] = React.useState(0);
+  const { authError, setAuthError } = useContext(ErrorContext);
   const { pgpPvtKey } = useContext<any>(AppContext);
-  const { sidebarCollapsed, setSidebarCollapsed } = useContext(GlobalContext);
+  const { sidebarCollapsed, setSidebarCollapsed } = React.useContext(GlobalContext);
 
   const updateOnboardTheme = useUpdateTheme();
   const { userPushSDKInstance } = useSelector((state: any) => {
     return state.user;
   });
 
-  useInactiveListener();
   const { run, stepIndex, tutorialContinous } = useSelector((state: any) => state.userJourney);
   // const location = useLocation();
   // Build takes care of this now
@@ -190,8 +193,8 @@ export default function App() {
   //   // This will run when the page first loads and whenever the title changes
   //   document.title = title;
   // }, [title]);
-
-  useEffect(() => {
+  useBrowserNotification();
+  React.useEffect(() => {
     const now = Date.now() / 1000;
     setcurrentTime(now);
   }, []);
@@ -206,6 +209,10 @@ export default function App() {
     dispatch(resetUserSlice());
   }, [account]);
 
+  // console.log(isActive, chainId, account);
+  // handle logic to reconnect in response to certain events from the provider
+  const { allowedChain } = useInactiveListener();
+
   // Initialize Theme
   const [darkMode, setDarkMode] = useState(false);
   const toggleDarkMode = () => {
@@ -215,7 +222,7 @@ export default function App() {
     setDarkMode(!darkMode);
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     const data = localStorage.getItem('theme');
     if (data) {
       const isDarkMode = JSON.parse(data);
@@ -232,16 +239,16 @@ export default function App() {
     }
   }, []);
 
-  useEffect(() => {
+  React.useEffect(() => {
     localStorage.setItem('theme', JSON.stringify(darkMode));
     localStorage.setItem('SidebarCollapsed', JSON.stringify(sidebarCollapsed));
   });
 
-  useEffect(() => {
+  React.useEffect(() => {
     document.body.style.backgroundColor = darkMode ? '#000' : '#fff';
   }, [darkMode]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     window?.Olvy?.init({
       organisation: 'epns',
       target: '#olvy-target',
@@ -263,7 +270,9 @@ export default function App() {
   const steps = UserJourneySteps({ darkMode });
 
   const handleJoyrideCallback = (data: CallBackProps) => {
-    const { action, lifecycle, index } = data;
+    // console.log(data)
+    // console.log(STATUS);
+    const { action, lifecycle, status, index } = data;
     if (lifecycle === 'ready') {
       setTimeout(() => {
         document.querySelector('div > section > div').scrollTop = 0;
@@ -314,7 +323,7 @@ export default function App() {
           <ChatUIProvider
             user={userPushSDKInstance}
             theme={darkMode && darkChatTheme}
-            debug={false}
+            debug={true}
             uiConfig={{
               suppressToast: false,
             }}
@@ -413,8 +422,6 @@ const HeaderContainer = styled.header`
 
 const ParentContainer = styled.div`
   flex-wrap: wrap;
-  position: relative;
-  z-index: 0;
   display: flex;
   flex-direction: row;
   justify-content: center;

src/api/index.js

@@ -7,6 +7,7 @@ import { appConfig } from 'config/index.js';
 // Constants
 const BASE_URL = appConfig.apiUrl;
 const TOOLING_BASE_URL = appConfig.toolingApiUrl;
+const DELIVERY_NODE_BASE_URL = appConfig.deliveryNodeApiUrl;
 
 /**
  * A function used to make get requests throughout the entire application
@@ -55,4 +56,18 @@ export const toolingPostReq = async (path, obj) => {
   }
 };
 
+export const deliveryNodePostReq = async (path, obj) => {
+  try {
+    const response = await axios.post(DELIVERY_NODE_BASE_URL + path, obj, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    return response;
+  } catch (error) {
+    console.error(error.response.data);
+    throw error.response.data;
+  }
+};
+
 export * from './ipfs';