mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-16 17:33:26 +02:00
8fd3eaf8de
* add orbis context * new changes * Add orbis floating chat * adding orbis function * load orbis conversations * update message button in profile * minor fix conversation styles * update orbis version * adding details conditional * updating post comment function * Update send message button style * Fix send message button css * udpate orbis * update posts and floating function * Add chatbox emoji * Add Emoji Picker Theme * useDarkMode emoji fix * remove next dynamic on emoji picker * show conversation title from participant * update callbackMessage. * Update Emoji Picker * Add Emoji Picker to Postbox * rename FloatingChat to DirectMessages * create some global orbis components * update package-lock.json * change any type * change Blockie to Avatar component * fix type errors * fix infinite loop when no comment found * Hide send message button on ownAccount profile * Delete unused component * minor changes * update orbis comment and DM components * fix load older messages on DM scroll * fixed orbis createPost * update optional wallet signs * add return value on connect * add padding bottom to compensate DM component * add conditional connect and sign button * update direct message component * update get notifications logic * rerun npm install * rerun npm install * temporary push * rerun npm install * add new custom hooks * run npm install * update flow on address changed * update custom DID string * remove lit auth signatures on resetStates() * add hasLit condition on getMessages * add removeCeramicSession function * useLocalStorage to store notifications * minor bug fix * update styles for conversation details * use getEnsName util * update create conversation flow * rerun npm install * update typescript * update orbis sdk version * temporary push * revisions * update orbis version * update notifs count and conversation creation flow * update orbis types * add toast after copy address * add message decryption refresh button * rerun npm install * remove comment from asset page * test push * remove lit-auth-signature on wallet changed * update orbis SDK to v0.4.14 * update copy * update Orbis SDK to v0.4.17 * update copy * create new DM button component and add to asset * add send button and remove emojiPicker * Revert "Merge branch 'main' into orbis" This reverts commit3cdaf54827
, reversing changes made to02f2acb774
. * Revert "Revert "Merge branch 'main' into orbis"" This reverts commita5a32b1534
. * update new conversation flow * update intro message * minor fix typo * remove unused package and fixed outdated versions * remove comment component and restructured folders * update orbis-sdk * small cleanup * direct message button style updates --------- Co-authored-by: Nuary Pradipta <nuary.pradipta@gmail.com> Co-authored-by: Dollar Bull <ramadhanakhri@gmail.com> Co-authored-by: Bogdan Fazakas <bogdan.fazakas@gmail.com>
128 lines
3.6 KiB
TypeScript
128 lines
3.6 KiB
TypeScript
import React, { useEffect } from 'react'
|
|
import styles from './Header.module.css'
|
|
import { useWeb3 } from '@context/Web3'
|
|
import { useOrbis } from '@context/DirectMessages'
|
|
import { didToAddress } from './_utils'
|
|
import { toast } from 'react-toastify'
|
|
import ChatBubble from '@images/chatbubble.svg'
|
|
import ArrowBack from '@images/arrow.svg'
|
|
import ChevronUp from '@images/chevronup.svg'
|
|
import Copy from '@images/copy.svg'
|
|
|
|
export default function Header() {
|
|
const { accountId } = useWeb3()
|
|
const {
|
|
conversations,
|
|
conversationId,
|
|
openConversations,
|
|
activeConversationTitle,
|
|
totalNotifications,
|
|
setActiveConversationTitle,
|
|
getConversationTitle,
|
|
setOpenConversations,
|
|
setConversationId
|
|
} = useOrbis()
|
|
|
|
const handleClick = (
|
|
e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>
|
|
) => {
|
|
e.preventDefault()
|
|
const target = e.target as HTMLElement
|
|
const { role } = target.dataset
|
|
if (role) {
|
|
if (role === 'back-button') {
|
|
setConversationId(null)
|
|
} else {
|
|
let _address = ''
|
|
const conversation = conversations.find(
|
|
(c) => c.stream_id === conversationId
|
|
)
|
|
const recipients = conversation.recipients.filter(
|
|
(r) => didToAddress(r) !== accountId.toLowerCase()
|
|
)
|
|
_address = didToAddress(recipients[0])
|
|
navigator.clipboard.writeText(_address)
|
|
toast.info('Address copied to clipboard')
|
|
}
|
|
} else {
|
|
setOpenConversations(!openConversations)
|
|
}
|
|
}
|
|
|
|
const setConversationTitle = async (conversationId: string) => {
|
|
if (conversationId.startsWith('new-')) {
|
|
setActiveConversationTitle(conversationId.replace('new-', ''))
|
|
} else {
|
|
const title = await getConversationTitle(conversationId)
|
|
setActiveConversationTitle(title)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!conversationId) setActiveConversationTitle(null)
|
|
else setConversationTitle(conversationId)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [conversationId])
|
|
|
|
return (
|
|
<div className={styles.header} onClick={handleClick}>
|
|
{!conversationId ? (
|
|
<>
|
|
<div>
|
|
<ChatBubble role="img" aria-label="Chat" className={styles.icon} />
|
|
</div>
|
|
<span>Direct Messages</span>
|
|
{totalNotifications > 0 && (
|
|
<span className={styles.notificationCount}>
|
|
{totalNotifications}
|
|
</span>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
{openConversations && (
|
|
<button
|
|
type="button"
|
|
aria-label="button"
|
|
data-role="back-button"
|
|
className={styles.btnBack}
|
|
>
|
|
<ArrowBack
|
|
role="img"
|
|
aria-label="arrow"
|
|
className={styles.backIcon}
|
|
/>
|
|
</button>
|
|
)}
|
|
{activeConversationTitle && (
|
|
<>
|
|
<span>{activeConversationTitle}</span>
|
|
<button
|
|
type="button"
|
|
data-role="copy-address"
|
|
title="Copy Address"
|
|
className={styles.btnCopy}
|
|
>
|
|
<Copy
|
|
role="img"
|
|
aria-label="Copy Address"
|
|
className={styles.copyIcon}
|
|
/>
|
|
</button>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
<div className={styles.toggleArrow}>
|
|
<ChevronUp
|
|
role="img"
|
|
aria-label="Toggle"
|
|
className={`${styles.icon} ${
|
|
openConversations ? styles.isFlipped : ''
|
|
}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|