Refactor/use hooks

missing_in_hooks.md

@@ -0,0 +1,19 @@
+# Bugs
+- ~~useSubscribe should update on domain param change~~
+# Things missing in hooks
+
+## `useSubscribe`
+1. ~~useSubscribe -> subscribe should accept domain. useSubscribe should only take account~~
+
+## `useSubscription`
+1. ~~useSubscribtion should expose getSubscription which takes params.~~
+
+## `registerWithEcho`
+1. ~~Add hook to register with echo~~
+
+# Things that would be nice
+
+## `useSubscription`
+1. `useSubscribtion` should expose `isSubscribed` for convenience. 
+
+## Fetch projects from cloud

package.json

@@ -23,8 +23,9 @@
     "@tanstack/react-query": "^5.20.1",
     "@walletconnect/core": "2.11.0",
     "@walletconnect/identity-keys": "^2.0.1",
-    "@walletconnect/notify-client": "^1.1.0",
     "@walletconnect/notify-message-decrypter": "^0.1.0",
+    "@web3inbox/core": "^1.2.0-5bd35d2",
+    "@web3inbox/react": "^1.2.0-5fd9098",
     "@web3modal/wagmi": "4.0.10",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
@@ -40,7 +41,6 @@
     "react-qr-reader-es6": "^2.2.1-2",
     "react-router-dom": "^6.4.4",
     "react-select": "^5.7.0",
-    "rxjs": "^7.6.0",
     "viem": "2.7.8",
     "vite-plugin-pwa": "^0.16.7",
     "wagmi": "^2.5.7"

playwright.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] }
-    },
+    }
   ],
 
   /* Run your local dev server before starting the tests */

src/App.tsx

@@ -1,18 +1,16 @@
-import { Fragment, useContext } from 'react'
+import { Fragment } from 'react'
 
 import { AnimatePresence, LazyMotion, domAnimation, m } from 'framer-motion'
 import { Outlet, useLocation } from 'react-router-dom'
 
 import MobileFooter from '@/components/layout/MobileFooter'
 import Sidebar from '@/components/layout/Sidebar'
 import AuthProtectedPage from '@/components/utils/AuthProtectedPage'
-import W3iContext from '@/contexts/W3iContext/context'
 import { useMobileResponsiveGrid } from '@/utils/hooks'
 
 import './App.scss'
 
 const App = () => {
-  const { uiEnabled } = useContext(W3iContext)
   const location = useLocation()
 
   const ref = useMobileResponsiveGrid()
@@ -22,7 +20,7 @@ const App = () => {
       <LazyMotion features={domAnimation}>
         <m.div ref={ref} data-path={location.pathname} className="App">
           <Fragment>
-            {uiEnabled.sidebar ? <Sidebar isLoggedIn={true} /> : null}
+            <Sidebar isLoggedIn={true} />
             <Outlet />
             <AnimatePresence mode="wait"></AnimatePresence>
           </Fragment>

src/Modals.tsx

@@ -1,6 +1,5 @@
 import { useContext, useEffect } from 'react'
 
-import { useWeb3Modal, useWeb3ModalState } from '@web3modal/wagmi/react'
 import { AnimatePresence } from 'framer-motion'
 
 import { PreferencesModal } from '@/components/notifications/NotificationsLayout/PreferencesModal'
@@ -18,7 +17,7 @@ import {
   notificationsAvailableInBrowser
 } from '@/utils/notifications'
 import { isAppleMobile, isMobileButNotInstalledOnHomeScreen, isNonSafari } from '@/utils/pwa'
-import { notificationPwaModalService, signatureModalService } from '@/utils/store'
+import { notificationPwaModalService } from '@/utils/store'
 import { isMobile } from '@/utils/ui'
 
 export const Modals = () => {
@@ -28,10 +27,8 @@ export const Modals = () => {
     isSignatureModalOpen,
     isNotificationPwaModalOpen
   } = useModals()
-  const { close: closeWeb3Modal } = useWeb3Modal()
-  const { open: isWeb3ModalOpen } = useWeb3ModalState()
 
-  const { notifyRegisterMessage, notifyRegisteredKey, userPubkey } = useContext(W3iContext)
+  const { notifyRegisteredKey, userPubkey, clientReady } = useContext(W3iContext)
 
   const notificationsEnabled = useNotificationPermissionState()
 
@@ -40,7 +37,9 @@ export const Modals = () => {
   const explicitlyDeniedOnDesktop = !isMobile() && window.Notification?.permission === 'denied'
   const shouldShowChangeBrowserModal = isAppleMobile ? isNonSafari : false
   const shouldShowPWAModal = isMobileButNotInstalledOnHomeScreen && !shouldShowChangeBrowserModal
-  const shouldShowSignatureModal = isSignatureModalOpen && !shouldShowChangeBrowserModal
+  const shouldShowSignatureModal =
+    (isSignatureModalOpen || (userPubkey && clientReady && !notifyRegisteredKey)) &&
+    !shouldShowChangeBrowserModal
   const shouldShowUnsubscribeModalOpen = isUnsubscribeModalOpen && !shouldShowChangeBrowserModal
   const shouldShowPreferencesModalOpen = isPreferencesModalOpen && !shouldShowChangeBrowserModal
 
@@ -54,26 +53,6 @@ export const Modals = () => {
     !notificationModalClosed &&
     !shouldShowChangeBrowserModal
 
-  useEffect(() => {
-    const notifySignatureRequired = Boolean(notifyRegisterMessage) && !notifyRegisteredKey
-    if (userPubkey && notifySignatureRequired) {
-      if (isWeb3ModalOpen) {
-        // Close web3modal in case user is switching accounts
-        // closeWeb3Modal()
-      }
-      signatureModalService.openModal()
-    } else {
-      signatureModalService.closeModal()
-    }
-  }, [
-    userPubkey,
-    closeWeb3Modal,
-    notifyRegisteredKey,
-    notifyRegisterMessage,
-    isWeb3ModalOpen,
-    signatureModalService
-  ])
-
   useEffect(() => {
     // Create an artificial delay to prevent modals being spammed one after the other
     if (shouldShowNotificationModal) {
@@ -91,7 +70,7 @@ export const Modals = () => {
 
       {shouldShowPreferencesModalOpen && <PreferencesModal />}
 
-      {shouldShowSignatureModal && <SignatureModal message={notifyRegisterMessage ?? ''} />}
+      {shouldShowSignatureModal && <SignatureModal />}
 
       {shouldShowPWAModal && <PwaModal />}
 

src/components/dev/DevTimeStamp/index.tsx

@@ -1,44 +1,46 @@
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react'
+
+import SettingsContext from '@/contexts/SettingsContext/context'
+
 import './DevTimeStamp.scss'
-import SettingsContext from '@/contexts/SettingsContext/context';
 
 const getTimeStampFormatted = (rawTimestamp: number) => {
-
   const timestamp = new Date(rawTimestamp)
 
-  const year = timestamp.getFullYear();
+  const year = timestamp.getFullYear()
 
   // Months are zero-indexed
-  const month = (timestamp.getMonth() + 1).toString().padStart(2, '0'); 
-  const day = timestamp.getDate().toString().padStart(2, '0');
-  const hours = timestamp.getHours().toString().padStart(2, '0');
-  const minutes = timestamp.getMinutes().toString().padStart(2, '0');
-  const seconds = timestamp.getSeconds().toString().padStart(2, '0');
-
-  const timeZone = new Intl.DateTimeFormat('en', { timeZoneName: 'short' }).formatToParts(timestamp).find(part => part.type === 'timeZoneName')!.value;
+  const month = (timestamp.getMonth() + 1).toString().padStart(2, '0')
+  const day = timestamp.getDate().toString().padStart(2, '0')
+  const hours = timestamp.getHours().toString().padStart(2, '0')
+  const minutes = timestamp.getMinutes().toString().padStart(2, '0')
+  const seconds = timestamp.getSeconds().toString().padStart(2, '0')
 
-  const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timeZone}`;
+  const timeZone = new Intl.DateTimeFormat('en', { timeZoneName: 'short' })
+    .formatToParts(timestamp)
+    .find(part => part.type === 'timeZoneName')!.value
 
-  return formattedDateTime
+  const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timeZone}`
 
+  return formattedDateTime
 }
 
 const DevTimeStamp = () => {
   const [timestamp, setTimestamp] = useState(Date.now())
-  const {isDevModeEnabled} = useContext(SettingsContext)
+  const { isDevModeEnabled } = useContext(SettingsContext)
 
   useEffect(() => {
-    if(isDevModeEnabled) {
-     const intervalId = setInterval(() => {
-      setTimestamp(Date.now())
-     }, 250)
+    if (isDevModeEnabled) {
+      const intervalId = setInterval(() => {
+        setTimestamp(Date.now())
+      }, 250)
 
-     return () => clearInterval(intervalId)
+      return () => clearInterval(intervalId)
     }
   }, [setTimestamp, isDevModeEnabled])
 
   if (!isDevModeEnabled) {
-    return null;
+    return null
   }
 
   return (
@@ -48,4 +50,4 @@ const DevTimeStamp = () => {
   )
 }
 
-export default DevTimeStamp;
+export default DevTimeStamp

src/components/general/Icon/CrossIcon2.tsx

@@ -6,9 +6,9 @@ const CrossIcon2: React.FC = () => {
       <path
         d="M4 4L12 12M4 12L12 4"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

src/components/layout/MobileFooter/index.tsx

@@ -1,37 +1,20 @@
-import React, { useContext, useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 
 import { Link, useLocation } from 'react-router-dom'
 
 import NewAppIcon from '@/components/general/Icon/NewAppIcon'
 import NotificationIcon from '@/components/general/Icon/NotificationIcon'
 import SettingIcon from '@/components/general/Icon/SettingIcon'
-import W3iContext from '@/contexts/W3iContext/context'
 
 import './MobileFooter.scss'
 
 const MobileFooter: React.FC = () => {
   const { pathname } = useLocation()
-  const { uiEnabled } = useContext(W3iContext)
-  const navItems = useMemo(() => {
-    const items: [React.ReactNode, string][] = []
-
-    if (uiEnabled.notify) {
-      items.push([
-        <NotificationIcon isFilled={pathname.endsWith('/notifications')} />,
-        'notifications'
-      ])
-    }
-
-    if (uiEnabled.notify) {
-      items.push([<NewAppIcon isFilled={pathname.includes('/new-app')} />, 'notifications/new-app'])
-    }
-
-    if (uiEnabled.settings) {
-      items.push([<SettingIcon isFilled={pathname.includes('/settings')} />, 'settings'])
-    }
-
-    return items
-  }, [pathname, uiEnabled])
+  const navItems = [
+    [<NotificationIcon isFilled={pathname.endsWith('/notifications')} />, 'notifications'],
+    [<NewAppIcon isFilled={pathname.includes('/new-app')} />, 'new-app'],
+    [<SettingIcon isFilled={pathname.includes('/settings')} />, 'settings']
+  ] as const
 
   return (
     <div className="MobileFooter">

src/components/layout/Sidebar/index.tsx

@@ -7,7 +7,6 @@ import Avatar from '@/components/account/Avatar'
 import MessageIcon from '@/components/general/Icon/MessageIcon'
 import NotificationIcon from '@/components/general/Icon/NotificationIcon'
 import SettingIcon from '@/components/general/Icon/SettingIcon'
-import WalletConnectIcon from '@/components/general/Icon/WalletConnectIcon'
 import ConnectWalletButton from '@/components/login/ConnectWalletButton'
 import W3iContext from '@/contexts/W3iContext/context'
 import { getEthChainAddress } from '@/utils/address'
@@ -28,35 +27,18 @@ const SidebarItem: React.FC<{ children?: React.ReactNode; isDisabled?: boolean }
 const Sidebar: React.FC<{ isLoggedIn: boolean }> = ({ isLoggedIn }) => {
   const { pathname } = useLocation()
   const navigationPaths = useMemo(() => pathname.split('/'), [pathname])
-  const { userPubkey, uiEnabled } = useContext(W3iContext)
+  const { userPubkey } = useContext(W3iContext)
   const isMobile = useIsMobile()
-
-  const navItems = useMemo(() => {
-    const items: [React.ReactNode, string][] = []
-
-    if (uiEnabled.chat) {
-      items.push([
-        <MessageIcon isFilled={pathname.startsWith(NAVIGATION.messages.index)} />,
-        NAVIGATION.messages.index
-      ])
-    }
-
-    if (uiEnabled.notify) {
-      items.push([
-        <NotificationIcon isFilled={pathname.startsWith(NAVIGATION.notifications.index)} />,
-        NAVIGATION.notifications.index
-      ])
-    }
-
-    if (uiEnabled.settings) {
-      items.push([
-        <SettingIcon isFilled={pathname.startsWith(NAVIGATION.settings.index)} />,
-        NAVIGATION.settings.index
-      ])
-    }
-
-    return items
-  }, [pathname, uiEnabled])
+  const navItems: [React.ReactNode, string][] = [
+    [
+      <NotificationIcon isFilled={pathname.startsWith(NAVIGATION.notifications.index)} />,
+      NAVIGATION.notifications.index
+    ],
+    [
+      <SettingIcon isFilled={pathname.startsWith(NAVIGATION.settings.index)} />,
+      NAVIGATION.settings.index
+    ]
+  ]
 
   // If pathname matches .*/.*/.*
   // As per design, sidebar in mobile is hidden when on "Main" is viewed on messages