chore: fix more build errors

missing_in_hooks.md

@@ -7,3 +7,9 @@
 1. `useSubscribtion` should expose `getSubscription` which takes params. 
 2. `useSubscribtion` should expose `isSubscribed` for convenience. 
 
+## `registerWithEcho`
+1. Add hook to register with echo
+
+# Things that would be nice
+
+## Fetch projects from cloud

src/components/settings/ContactsModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react'
+import React, { useCallback } from 'react'
 
 import capitalize from 'lodash/capitalize'
 
@@ -7,9 +7,6 @@ import Button from '@/components/general/Button'
 import CrossIcon from '@/components/general/Icon/CrossIcon'
 import Input from '@/components/general/Input'
 import { Modal } from '@/components/general/Modal/Modal'
-import PeerAndMessage from '@/components/messages/PeerAndMessage'
-import SettingsContext from '@/contexts/SettingsContext/context'
-import { useColorModeValue } from '@/utils/hooks'
 import { contactsModalService } from '@/utils/store'
 
 import './ContactsModal.scss'
@@ -32,8 +29,6 @@ const ContactsModal: React.FC<ContactsModalProps> = ({
   mutedContacts,
   setMutedContacts
 }) => {
-  const { mode } = useContext(SettingsContext)
-  const themeColors = useColorModeValue(mode)
 
   const handleContactAction = useCallback(
     (topic: string) => {
@@ -68,7 +63,6 @@ const ContactsModal: React.FC<ContactsModalProps> = ({
           />
           {mutedContacts.map(contact => (
             <div key={contact.topic} className="ContactsModal__content__contact">
-              <PeerAndMessage peer={contact.address} message="" withAvatar={true} />
               <Button customType="action" onClick={() => handleContactAction(contact.topic)}>
                 {status === 'muted' ? 'Unmute' : 'Unblock'}
               </Button>

src/components/settings/NotificationsSettings/index.tsx

@@ -10,7 +10,6 @@ import PrivacyIcon from '@/components/general/Icon/Privacy'
 import Input from '@/components/general/Input'
 import MobileHeader from '@/components/layout/MobileHeader'
 import SettingsContext from '@/contexts/SettingsContext/context'
-import W3iContext from '@/contexts/W3iContext/context'
 import { useNotificationPermissionState } from '@/utils/hooks/notificationHooks'
 import { getDbEchoRegistrations } from '@/utils/idb'
 import { notificationsAvailableInBrowser, requireNotifyPermission } from '@/utils/notifications'
@@ -22,6 +21,8 @@ import SettingsToggle from '../SettingsToggle/Index'
 
 import './NotificationsSettings.scss'
 
+const { useRegisterWithEcho } from '@web3inbox/react'
+
 const getHelperTooltip = () => {
   switch (window.Notification?.permission) {
     case 'denied':
@@ -35,7 +36,6 @@ const getHelperTooltip = () => {
 
 const NotificationsSettings: React.FC = () => {
   const { isDevModeEnabled, updateSettings, filterAppDomain } = useContext(SettingsContext)
-  const { notifyClientProxy } = useContext(W3iContext)
   const [domain, setDomain] = useState(filterAppDomain)
 
   const canSave = domain !== filterAppDomain
@@ -56,12 +56,8 @@ const NotificationsSettings: React.FC = () => {
   }, [])
 
   const handleEnableNotifications = async () => {
-    if (!notifyClientProxy) {
-      return
-    }
-
     if (await requireNotifyPermission()) {
-      await notifyClientProxy.registerWithEcho()
+      await registerWithEcho()
     }
   }
 

src/components/settings/Settings/index.tsx

@@ -1,21 +1,17 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react'
+import React, { useCallback, useContext, useState } from 'react'
 
-import { useWeb3ModalTheme } from '@web3modal/wagmi/react'
 import cn from 'classnames'
-import { useLocation } from 'react-router-dom'
 
 import ArtistPalette from '@/assets/ArtistPalette.png'
 import ColoredNotificationBell from '@/assets/ColoredNotificationBell.png'
 import DarkCity from '@/assets/DarkCity.png'
 import HalfHalfCity from '@/assets/HalfHalfCity.png'
-import Handshake from '@/assets/Handshake.png'
 import LightCity from '@/assets/LightCity.png'
 import IconWrapper from '@/components/general/Icon/IconWrapper/IconWrapper'
 import type { SettingsContextSimpleState } from '@/contexts/SettingsContext/context'
 // eslint-disable-next-line no-duplicate-imports
 import SettingsContext from '@/contexts/SettingsContext/context'
-import W3iContext from '@/contexts/W3iContext/context'
-import { useIsMobile, useModals } from '@/utils/hooks'
+import { useModals } from '@/utils/hooks'
 
 import ContactsModal from '../ContactsModal'
 
@@ -27,12 +23,6 @@ const themeModes: { id: SettingsContextSimpleState['mode']; icon: string }[] = [
   { id: 'system', icon: HalfHalfCity }
 ]
 
-const newContactModes: { id: SettingsContextSimpleState['newContacts']; label: string }[] = [
-  { id: 'require-invite', label: 'Require new contacts to send me a chat invite' },
-  { id: 'reject-new', label: 'Decline all chat invites from new contacts' },
-  { id: 'accept-new', label: 'Accept all chat invites from new contacts' }
-]
-
 /*
  * Const currencyOptions = [
  *   {
@@ -47,13 +37,9 @@ const newContactModes: { id: SettingsContextSimpleState['newContacts']; label: s
  */
 
 const Settings: React.FC = () => {
-  const { mode, newContacts, isDevModeEnabled, updateSettings } = useContext(SettingsContext)
+  const { mode,  updateSettings } = useContext(SettingsContext)
   const { isContactModalOpen } = useModals()
-  const { uiEnabled } = useContext(W3iContext)
   const [mutedContacts, setMutedContacts] = useState<{ topic: string; address: string }[]>([])
-  const { pathname } = useLocation()
-  const { setThemeMode } = useWeb3ModalTheme()
-  const isMobile = useIsMobile()
 
   const handleThemeChange = useCallback(
     (modeId: SettingsContextSimpleState['mode']) => {
@@ -134,73 +120,6 @@ const Settings: React.FC = () => {
         </div>
       </div>
 
-      {uiEnabled.chat ? (
-        <div className="Settings__section Settings__contacts">
-          <div className="Settings__section-title">
-            <IconWrapper shape="square" bgColor="purple">
-              <img src={Handshake} alt="contacts-icon" />
-            </IconWrapper>
-            <span>Contacts</span>
-          </div>
-          <div className="Settings__section-settings">
-            <div className="Settings__section-subtitle">New Contacts</div>
-            {/* {newContactModes.map(({ id, label }) => (
-              <Radio
-                name="new-contacts"
-                id={id}
-                key={id}
-                label={label}
-                checked={newContacts === id}
-                onCheck={() => updateSettings({ newContacts: id })}
-              />
-            ))} */}
-            <div className="Settings__section-helper-text">
-              People that want to message you will need to send an invite first that you can accept
-              or decline. Think of it as a polite handshake to start the conversation.
-            </div>
-            {/*
-          <div className="Settings__setting">
-            <div className="Settings__toggle-label">
-              Decline new contacts without any transactions onchain
-            </div>
-            <Toggle name="decline-new-contacts" id="decline-new-contacts" />
-          </div>
-          <div className="Settings__section-helper-text">
-            People with no transaction history will be blocked from contacting you. Enabling this
-            can help weed out spam.
-          </div>
-					*/}
-            {/*
-             <div
-
-              className="Settings__setting"
-              onClick={() => {
-                chatClientProxy?.getMutedContacts().then(({ length }) => {
-                  if (length) {
-                    contactsModalService.openModal()
-                  }
-                })
-              }}
-            >
-              <div>Muted contacts</div>
-              <div className="Settings__toggle-dropdown">
-                <CircleBadge>{mutedContacts.length}</CircleBadge>
-                <ArrowRightIcon />
-              </div>
-            </div>
-            */}
-            {/*
-          <div className="Settings__setting">
-            <div>Blocked contacts</div>
-            <div className="Settings__toggle-dropdown">
-              <CircleBadge>0</CircleBadge>
-              <ArrowRightIcon />
-            </div>
-          </div>
-					*/}
-          </div>
-        </div>
-      ) : null}
       {/*
       <div className="Settings__section Settings_crypto">
         <div className="Settings__section-title">

src/components/utils/AuthProtectedPage.tsx

@@ -9,11 +9,11 @@ interface AuthProtectedPageProps {
 }
 
 const AuthProtectedPage: React.FC<AuthProtectedPageProps> = ({ children }) => {
-  const { userPubkey, authProvider } = useContext(W3iContext)
+  const { userPubkey } = useContext(W3iContext)
   const loc = useLocation()
   const next = `${loc.pathname}${loc.search}`
 
-  if (!userPubkey && authProvider === 'internal') {
+  if (!userPubkey) {
     const query = next.length > 1 ? `?next=${encodeURIComponent(next)}` : ''
 
     return <Navigate to={`/login${query}`} />

src/components/utils/NotificationPwaModal/index.tsx

@@ -5,26 +5,20 @@ import Button from '@/components/general/Button'
 import CrossIcon from '@/components/general/Icon/CrossIcon'
 import { Modal } from '@/components/general/Modal/Modal'
 import Text from '@/components/general/Text'
-import W3iContext from '@/contexts/W3iContext/context'
 import { closeNotificationModal, requireNotifyPermission } from '@/utils/notifications'
 import { pwaModalService } from '@/utils/store'
+import { useRegisterWithEcho } from '@web3inbox/react'
 
 import './NotificationPwaModal.scss'
 
 export const NotificationPwaModal: React.FC = () => {
-  const { notifyClientProxy } = useContext(W3iContext)
-
   const explicitlyDeniedPermissionForNotifications = window.Notification?.permission === 'denied'
 
   const handleEnableNotifications = async () => {
     const notificationPermissionGranted = await requireNotifyPermission()
 
-    if (!notifyClientProxy) {
-      return
-    }
-
     if (notificationPermissionGranted) {
-      await notifyClientProxy.registerWithEcho()
+      await registerWithEcho()
     }
   }
 

src/contexts/W3iContext/hooks/w3iProxyHooks.ts

@@ -6,22 +6,20 @@ import { logError } from '@/utils/error'
 
 import Web3InboxProxy from '../../../w3iProxy'
 import { useDappOrigin } from './dappOrigin'
-import { useProviderQueries } from './providerQueryHooks'
-import { useUiState } from './uiHooks'
 
 export const useW3iProxy = () => {
   const relayUrl = import.meta.env.VITE_RELAY_URL
   const projectId = import.meta.env.VITE_PROJECT_ID
 
-  const { uiEnabled } = useUiState()
   const [ready, setReady] = useState(false)
   const { dappOrigin } = useDappOrigin()
-  const { notifyProvider, authProvider } = useProviderQueries()
 
   const [w3iProxy] = useState(
-    Web3InboxProxy.getProxy(notifyProvider, authProvider, dappOrigin, projectId, relayUrl, {
-      ...uiEnabled,
-      chat: false
+    Web3InboxProxy.getProxy('internal', 'internal', dappOrigin, projectId, relayUrl, {
+      chat: true,
+      notify: true,
+      settings: true,
+      sidebar: true
     })
   )
 

src/pages/Login/index.tsx

@@ -15,7 +15,7 @@ import W3iContext from '@/contexts/W3iContext/context'
 import './Login.scss'
 
 const Login: React.FC = () => {
-  const { userPubkey, uiEnabled, notifyRegisteredKey } = useContext(W3iContext)
+  const { userPubkey, notifyRegisteredKey } = useContext(W3iContext)
   const { search } = useLocation()
   const next = new URLSearchParams(search).get('next')
   const nav = useNavigate()
@@ -26,15 +26,13 @@ const Login: React.FC = () => {
     const path = next ? decodeURIComponent(next) : '/'
 
     if (userPubkey) {
-      const notifyConditionsPass = Boolean(
-        (!uiEnabled.chat || uiEnabled.notify) && notifyRegisteredKey
-      )
+      const notifyConditionsPass = Boolean(notifyRegisteredKey)
 
       if (notifyConditionsPass) {
         nav(path)
       }
     }
-  }, [userPubkey, next, notifyRegisteredKey, uiEnabled])
+  }, [userPubkey, next, notifyRegisteredKey])
 
   return (
     <TransitionDiv className="Login">