From b7d3119b6ec5e5ad3d944cdaad6253cdb0d35006 Mon Sep 17 00:00:00 2001 From: marcoelissa Date: Thu, 15 Dec 2022 19:05:17 +0700 Subject: [PATCH] use getEnsName util --- src/@context/Orbis.tsx | 177 ++++++++---------- .../@shared/Orbis/DirectMessages/Header.tsx | 16 +- .../@shared/Orbis/DirectMessages/ListItem.tsx | 7 +- 3 files changed, 100 insertions(+), 100 deletions(-) diff --git a/src/@context/Orbis.tsx b/src/@context/Orbis.tsx index 76e5f1de5..757b20ab8 100644 --- a/src/@context/Orbis.tsx +++ b/src/@context/Orbis.tsx @@ -12,6 +12,7 @@ import { Orbis } from '@orbisclub/orbis-sdk' import { useWeb3 } from './Web3' import { accountTruncate } from '@utils/web3' import { didToAddress } from '@utils/orbis' +import { getEnsName } from '@utils/ens' import usePrevious from '@hooks/usePrevious' import useLocalStorage from '@hooks/useLocalStorage' @@ -24,7 +25,6 @@ type IOrbisProvider = { openConversations: boolean conversationId: string conversations: IOrbisConversation[] - conversationTitle: string notifications: Record connectOrbis: (options: { address: string @@ -45,7 +45,7 @@ type IOrbisProvider = { setConversationId: (value: string) => void createConversation: (value: string) => Promise clearMessageNotifs: (conversationId: string) => void - getConversationTitle: (conversation: IOrbisConversation) => string + getConversationTitle: (conversationId: string) => Promise getDid: (value: string) => Promise } @@ -201,74 +201,6 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement { return _did } - const getConversations = async (did: string = null) => { - const { data } = await orbis.getConversations({ - did, - context: CONVERSATION_CONTEXT - }) - - // Only show conversations with exactly 2 unique participants and remove duplicates based on participants - const filteredConversations: IOrbisConversation[] = [] - data.forEach((conversation: IOrbisConversation) => { - if (conversation.recipients.length === 2) { - const found = filteredConversations.find( - (o: IOrbisConversation) => - o.recipients.length === 2 && - o.recipients.includes(conversation.recipients[0]) && - o.recipients.includes(conversation.recipients[1]) - ) - - if (!found) { - filteredConversations.push(conversation) - } - } - }) - - setConversations(filteredConversations) - return filteredConversations - } - - const createConversation = async (userDid: string) => { - let _account = account - if (!_account) { - // Check connection and force connect - _account = await checkOrbisConnection({ - address: accountId, - autoConnect: true - }) - } - - if (!hasLit) { - const res = await connectLit() - if (res.status !== 200) return - } - - let _conversations = [...conversations] - if (!_conversations.length) { - _conversations = await getConversations(_account?.did) - } - - 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({ - recipients: [userDid], - context: CONVERSATION_CONTEXT - }) - if (res.status === 200) { - setConversationId(res.doc) - setOpenConversations(true) - } - } - } - const getMessageNotifs = async () => { let did = account?.did @@ -329,39 +261,96 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement { setUsersNotifications(_usersNotifications) } - const getConversationTitle = (conversation: IOrbisConversation) => { - let title = null + const getConversations = async (did: string = null) => { + const { data } = await orbis.getConversations({ + did, + context: CONVERSATION_CONTEXT + }) - if (conversation) { - const details = conversation.recipients_details.find( - (o: IOrbisProfile) => o.did !== account.did - ) - const did = conversation.recipients.find((o: string) => o !== account.did) + // Only show conversations with exactly 2 unique participants and remove duplicates based on participants + const filteredConversations: IOrbisConversation[] = [] + data.forEach((conversation: IOrbisConversation) => { + if (conversation.recipients.length === 2) { + const found = filteredConversations.find( + (o: IOrbisConversation) => + o.recipients.length === 2 && + o.recipients.includes(conversation.recipients[0]) && + o.recipients.includes(conversation.recipients[1]) + ) - const address = didToAddress(did) - - if (details) { - title = details?.metadata?.ensName || accountTruncate(address) - } else { - title = accountTruncate(address) + if (!found) { + filteredConversations.push(conversation) + } } - } + }) - return title + // Also fetch message notifications + await getMessageNotifs() + + setConversations(filteredConversations) + return filteredConversations } - const conversationTitle = useMemo(() => { - let title = null + const createConversation = async (userDid: string) => { + let _account = account + if (!_account) { + // Check connection and force connect + _account = await checkOrbisConnection({ + address: accountId, + autoConnect: true + }) + } + + if (!hasLit) { + const res = await connectLit() + if (res.status !== 200) return + } + + let _conversations = [...conversations] + if (!_conversations.length) { + _conversations = await getConversations(_account?.did) + } + + 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({ + recipients: [userDid], + context: CONVERSATION_CONTEXT + }) + if (res.status === 200) { + setConversationId(res.doc) + setOpenConversations(true) + } + } + } + + const getConversationTitle = async (conversationId: string) => { if (conversationId && conversations.length) { + // Get conversation based on conversationId const conversation = conversations.find( (o) => o.stream_id === conversationId ) - title = getConversationTitle(conversation) - } - return title - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [conversationId, conversations]) + // Get address from did + const did = conversation.recipients.find((o: string) => o !== account.did) + const address = didToAddress(did) + + // Get ens name if exists + const ensName = await getEnsName(address) + + return ensName || accountTruncate(address) + } else { + return null + } + } const notifications = useMemo(() => { let _notifications = {} @@ -372,7 +361,7 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement { }, [accountId, usersNotifications]) useInterval(async () => { - await getMessageNotifs() + await getConversations(account?.did) }, NOTIFICATION_REFRESH_INTERVAL) useEffect(() => { @@ -389,7 +378,6 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement { useEffect(() => { if (account) { getConversations(account?.did) - getMessageNotifs() } // eslint-disable-next-line react-hooks/exhaustive-deps }, [account]) @@ -403,7 +391,6 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement { openConversations, conversationId, conversations, - conversationTitle, notifications, connectOrbis, disconnectOrbis, diff --git a/src/components/@shared/Orbis/DirectMessages/Header.tsx b/src/components/@shared/Orbis/DirectMessages/Header.tsx index f219d885f..1350dfe76 100644 --- a/src/components/@shared/Orbis/DirectMessages/Header.tsx +++ b/src/components/@shared/Orbis/DirectMessages/Header.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import styles from './Header.module.css' import { useOrbis } from '@context/Orbis' import ChatBubble from '@images/chatbubble.svg' @@ -9,12 +9,14 @@ export default function Header() { const { conversationId, openConversations, - conversationTitle, notifications, + getConversationTitle, setOpenConversations, setConversationId } = useOrbis() + const [name, setName] = useState(null) + const handleToggle = ( e: React.MouseEvent ) => { @@ -27,6 +29,14 @@ export default function Header() { } } + useEffect(() => { + if (conversationId) { + getConversationTitle(conversationId).then((name) => setName(name)) + } else { + setName(null) + } + }, [conversationId, getConversationTitle]) + return (
{!conversationId ? ( @@ -57,7 +67,7 @@ export default function Header() { /> )} - {conversationTitle} + {name} )}
diff --git a/src/components/@shared/Orbis/DirectMessages/ListItem.tsx b/src/components/@shared/Orbis/DirectMessages/ListItem.tsx index 7e1670493..e5c68069c 100644 --- a/src/components/@shared/Orbis/DirectMessages/ListItem.tsx +++ b/src/components/@shared/Orbis/DirectMessages/ListItem.tsx @@ -19,7 +19,7 @@ export default function ConversationItem({ const newCancelToken = useCancelToken() - const name = getConversationTitle(conversation) + const [name, setName] = useState(null) const [address, setAddress] = useState(null) useEffect(() => { @@ -28,12 +28,15 @@ export default function ConversationItem({ const _address = didToAddress(did) setAddress(_address) + + const _name = await getConversationTitle(conversation?.stream_id) + setName(_name) } if (conversation && account) { getProfile() } - }, [conversation, account, newCancelToken]) + }, [conversation, account, newCancelToken, getConversationTitle]) return (