update optional wallet signs

src/@context/Orbis.tsx

@@ -2,6 +2,7 @@ import React, {
   useContext,
   createContext,
   useState,
+  useMemo,
   useEffect,
   ReactNode,
   ReactElement
@@ -13,6 +14,8 @@ import { useWeb3 } from './Web3'
 import { accountTruncate } from '@utils/web3'
 import { didToAddress } from '@utils/orbis'
 
+import DirectMessages from '@shared/Orbis/DirectMessages'
+
 type IOrbisProvider = {
   orbis: IOrbis
   account: IOrbisProfile
@@ -22,20 +25,23 @@ type IOrbisProvider = {
   conversations: IOrbisConversation[]
   conversationTitle: string
   unreadMessages: IOrbisNotification[]
-  connectOrbis: () => Promise<void>
+  connectOrbis: (lit?: boolean) => Promise<IOrbisProfile | null>
   disconnectOrbis: () => void
-  checkConnection: (value: boolean) => Promise<void>
+  checkConnection: (options: {
+    autoConnect?: boolean
+    lit?: boolean
+  }) => Promise<IOrbisProfile>
   connectLit: () => Promise<{
     status?: number
-    error?: any
+    error?: unknown
     result?: string
   }>
   setOpenConversations: (value: boolean) => void
   setConversationId: (value: string) => void
   setConversations: (value: IOrbisConversation[]) => void
-  getConversations: () => Promise<void>
+  getConversations: (did: string) => Promise<void>
   createConversation: (value: string) => Promise<void>
-  checkConversation: (value: string) => IOrbisConversation[]
+  checkConversation: (value: string) => Promise<IOrbisConversation[]>
   getDid: (value: string) => Promise<string>
 }
 
@@ -43,27 +49,53 @@ const OrbisContext = createContext({} as IOrbisProvider)
 
 const orbis: IOrbis = new Orbis()
 const NOTIFICATION_REFRESH_INTERVAL = 10000
-const CONVERSATION_CONTEXT = 'ocean_market'
+const CONVERSATION_CONTEXT = 'ocean_market' // Can be changed to whatever
 
 function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
-  const { web3Provider } = useWeb3()
+  const { web3Provider, accountId } = useWeb3()
   const [account, setAccount] = useState<IOrbisProfile | null>(null)
   const [hasLit, setHasLit] = useState(false)
   const [openConversations, setOpenConversations] = useState(false)
   const [conversationId, setConversationId] = useState(null)
-  const [conversations, setConversations] = useState([])
-  const [conversationTitle, setConversationTitle] = useState(null)
+  const [conversations, setConversations] = useState<IOrbisConversation[]>([])
   const [unreadMessages, setUnreadMessages] = useState<IOrbisNotification[]>([])
 
+  const conversationTitle = useMemo(() => {
+    let title = null
+    if (conversationId && conversations.length) {
+      const conversation = conversations.find(
+        (o) => o.stream_id === conversationId
+      )
+      if (conversation) {
+        const recipient = conversation.recipients_details.find(
+          (o: IOrbisProfile) => o.did !== account.did
+        )
+
+        const address =
+          recipient?.metadata?.address || didToAddress(recipient?.did)
+
+        title =
+          recipient?.metadata?.ensName ||
+          recipient?.profile?.username ||
+          accountTruncate(address)
+      }
+    }
+
+    return title
+  }, [conversationId, account, conversations])
+
   // Connecting to Orbis
-  const connectOrbis = async () => {
+  const connectOrbis = async (lit = false) => {
     const res = await orbis.connect_v2({
       provider: web3Provider,
-      chain: 'ethereum'
+      chain: 'ethereum',
+      lit
     })
+
     if (res.status === 200) {
       const { data } = await orbis.getProfile(res.did)
       setAccount(data)
+      return data
     } else {
       await sleep(2000)
       await connectOrbis()
@@ -83,34 +115,37 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
     return res
   }
 
-  const checkConnection = async (autoConnect = true) => {
+  const checkConnection = async ({
+    autoConnect,
+    lit
+  }: {
+    autoConnect?: boolean
+    lit?: boolean
+  }) => {
     const res = await orbis.isConnected()
-
     if (res.status === 200) {
       setHasLit(res.details.hasLit)
       const { data } = await orbis.getProfile(res.did)
       setAccount(data)
+      return data
     } else if (autoConnect) {
-      await connectOrbis()
+      const data = await connectOrbis(lit)
+      return data
     }
+    return null
   }
 
-  const getConversations = async () => {
-    const { data, error } = await orbis.getConversations({
-      did: account?.did,
+  const getConversations = async (did: string = null) => {
+    const { data } = await orbis.getConversations({
+      did,
       context: CONVERSATION_CONTEXT
     })
 
-    if (error) {
-      console.log(error)
-    }
-
-    if (data) {
-      setConversations(data)
-    }
+    setConversations(data || [])
+    return data || []
   }
 
-  const checkConversation = (userDid: string) => {
+  const checkConversation = async (userDid: string) => {
     const filtered: IOrbisConversation[] = conversations.filter(
       (conversation: IOrbisConversation) => {
         return conversation.recipients.includes(userDid)
@@ -121,15 +156,30 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
   }
 
   const createConversation = async (userDid: string) => {
+    let _account = account
+    if (!_account) {
+      // Check connection and force connect
+      _account = await checkConnection({ autoConnect: true })
+    }
+
     if (!hasLit) {
       const res = await connectLit()
       if (res.status !== 200) return
     }
 
-    const convoExists = checkConversation(userDid)
+    let _conversations = [...conversations]
+    if (!_conversations.length) {
+      _conversations = await getConversations(_account?.did)
+    }
 
-    if (convoExists.length > 0) {
-      setConversationId(convoExists[0].stream_id)
+    const existingConversations = _conversations.filter(
+      (conversation: IOrbisConversation) => {
+        return conversation.recipients.includes(userDid)
+      }
+    )
+
+    if (existingConversations.length > 0) {
+      setConversationId(existingConversations[0].stream_id)
       setOpenConversations(true)
     } else {
       const res = await orbis.createConversation({
@@ -150,7 +200,6 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
     })
 
     if (error) {
-      console.log(error)
       setUnreadMessages([])
     } else if (data.length > 0) {
       const _unreads = data.filter((o: IOrbisNotification) => {
@@ -166,7 +215,6 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
     const { data, error } = await orbis.getDids(address)
 
     if (error) {
-      console.log(error)
       return
     }
 
@@ -184,38 +232,17 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
   }, NOTIFICATION_REFRESH_INTERVAL)
 
   useEffect(() => {
-    if (account) {
-      // Fetch conversations
-      getConversations()
-    } else if (web3Provider) {
+    if (accountId && web3Provider) {
       // Check if wallet connected
-      checkConnection()
+      checkConnection({})
     }
-  }, [account, web3Provider])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [accountId, web3Provider])
 
   useEffect(() => {
-    if (conversationId && conversations.length) {
-      const conversation = conversations.find(
-        (o) => o.stream_id === conversationId
-      )
-      if (conversation) {
-        const recipient = conversation.recipients_details.find(
-          (o: IOrbisProfile) => o.did !== account.did
-        )
-
-        const address =
-          recipient?.metadata?.address || didToAddress(recipient?.did)
-
-        setConversationTitle(
-          recipient?.metadata?.ensName ||
-            recipient?.profile?.username ||
-            accountTruncate(address)
-        )
-      }
-    } else {
-      setConversationTitle(null)
-    }
-  }, [conversationId, account, conversations])
+    if (account) getConversations(account?.did)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [account])
 
   return (
     <OrbisContext.Provider
@@ -242,6 +269,7 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
       }}
     >
       {children}
+      {account && <DirectMessages />}
     </OrbisContext.Provider>
   )
 }

src/components/@shared/Orbis/Comment/MasterPost.tsx

@@ -13,10 +13,6 @@ export default function MasterPost({ post }: { post: IOrbisPost }) {
     null
   )
 
-  const deletePost = async (post: IOrbisPost) => {
-    console.log('delete post:', post)
-  }
-
   useEffect(() => {
     if (scrollToEl !== null) {
       const _scrollable: HTMLElement = masterPost.current.closest(

src/components/@shared/Orbis/Comment/Postbox.tsx

@@ -22,7 +22,7 @@ export default function Postbox({
   editPost?: IOrbisPost
   enterToSend?: boolean
   cancelReplyTo?: () => void
-  callback: (value: any) => void
+  callback: (value: IOrbisPost | IOrbisPost['content']) => void
 }) {
   const [focusOffset, setFocusOffset] = useState<number | undefined>()
   const [focusNode, setFocusNode] = useState<Node | undefined>()

src/components/@shared/Orbis/Comment/Replies.tsx

@@ -107,6 +107,7 @@ const Replies = ({
 
   useEffect(() => {
     if (master) getPosts()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [master])
 
   return (

src/components/@shared/Orbis/Comment/index.tsx

@@ -12,11 +12,6 @@ export default function Comment({ context }: { context: string }) {
   const [hasMore, setHasMore] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const _context =
-    process.env.NODE_ENV === 'development'
-      ? 'kjzl6cwe1jw145gun3sei0a4puw586yxa614le1tfh434y7quv2wsm0ivhbge7x'
-      : context
-
   const fetchPosts = async () => {
     setLoading(true)
     const { data, error } = await orbis.getPosts(
@@ -42,6 +37,7 @@ export default function Comment({ context }: { context: string }) {
     if (context && !posts.length && orbis) {
       fetchPosts()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [context, posts, orbis])
 
   const callback = (nPost: IOrbisPost) => {

src/components/@shared/Orbis/DirectMessages/Conversation.tsx

@@ -116,6 +116,7 @@ export default function DmConversation() {
         setMessages([])
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [conversationId, orbis, isMounted])
 
   useEffect(() => {
@@ -125,6 +126,7 @@ export default function DmConversation() {
     return () => {
       el.removeEventListener('scroll', onScrollMessages)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messages])
 
   return (

src/components/@shared/Orbis/DirectMessages/Postbox.tsx

@@ -15,7 +15,7 @@ export default function Postbox({
   conversationId: string
   replyTo?: IOrbisMessage
   cancelReplyTo?: () => void
-  callback: (value: any) => void
+  callback: (value: IOrbisMessage) => void
 }) {
   const [focusOffset, setFocusOffset] = useState<number | undefined>()
   const [focusNode, setFocusNode] = useState<Node | undefined>()

src/components/App/index.tsx

@@ -2,7 +2,6 @@ import React, { ReactElement } from 'react'
 import Alert from '@shared/atoms/Alert'
 import Footer from '../Footer/Footer'
 import Header from '../Header'
-import DirectMessages from '@shared/Orbis/DirectMessages'
 import { useWeb3 } from '@context/Web3'
 import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
 import AnnouncementBanner from '@shared/AnnouncementBanner'
@@ -39,8 +38,6 @@ export default function App({
       <main className={styles.main}>{children}</main>
       <Footer />
 
-      <DirectMessages />
-
       {appConfig?.privacyPreferenceCenter === 'true' && (
         <PrivacyPreferenceCenter style="small" />
       )}

src/components/Header/Wallet/Details.tsx

@@ -5,6 +5,7 @@ import Button from '@shared/atoms/Button'
 import AddToken from '@shared/AddToken'
 import Conversion from '@shared/Price/Conversion'
 import { useWeb3 } from '@context/Web3'
+import { useOrbis } from '@context/Orbis'
 import { getOceanConfig } from '@utils/ocean'
 import styles from './Details.module.css'
 
@@ -18,6 +19,7 @@ export default function Details(): ReactElement {
     networkId,
     balance
   } = useWeb3()
+  const { disconnectOrbis } = useOrbis()
   const { locale } = useUserPreferences()
 
   const [mainCurrency, setMainCurrency] = useState<string>()
@@ -92,6 +94,7 @@ export default function Details(): ReactElement {
               size="small"
               onClick={() => {
                 logout()
+                disconnectOrbis()
                 location.reload()
               }}
             >

src/components/Profile/Header/index.tsx

@@ -5,6 +5,7 @@ import Button from '@shared/atoms/Button'
 import Stats from './Stats'
 import Account from './Account'
 import styles from './index.module.css'
+import { useWeb3 } from '@context/Web3'
 import { useProfile } from '@context/Profile'
 import { useOrbis } from '@context/Orbis'
 
@@ -27,7 +28,8 @@ export default function AccountHeader({
   accountId: string
 }): ReactElement {
   const { profile, ownAccount } = useProfile()
-  const { account: orbisAccount, createConversation, getDid } = useOrbis()
+  const { accountId: ownAccountId } = useWeb3()
+  const { createConversation, getDid } = useOrbis()
   const [isShowMore, setIsShowMore] = useState(false)
   const [userDid, setUserDid] = useState<string | undefined>()
 
@@ -45,6 +47,7 @@ export default function AccountHeader({
     if (accountId) {
       getUserDid()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [accountId])
 
   return (
@@ -55,18 +58,17 @@ export default function AccountHeader({
       </div>
 
       <div>
-        {!ownAccount && (
+        {!ownAccount && userDid && (
           <div className={styles.dmButton}>
             <Button
               style="primary"
               size="small"
-              disabled={!userDid || !orbisAccount}
+              disabled={!ownAccountId}
               onClick={() => createConversation(userDid)}
             >
               Send Direct Message
             </Button>
-            {userDid === null && <span>User has no Ceramic Network DID</span>}
-            {!orbisAccount && <span>Please connect your wallet</span>}
+            {!ownAccountId && <span>Please connect your wallet</span>}
           </div>
         )}
         <Markdown text={profile?.description} className={styles.description} />