diff --git a/src/components/@shared/Orbis/DirectMessages/Conversation.module.css b/src/components/@shared/Orbis/DirectMessages/Conversation.module.css
index c67e1844f..f50c4aab7 100644
--- a/src/components/@shared/Orbis/DirectMessages/Conversation.module.css
+++ b/src/components/@shared/Orbis/DirectMessages/Conversation.module.css
@@ -8,9 +8,9 @@
padding: calc(var(--spacer) / 4);
text-align: center;
color: var(--color-secondary);
- -webkit-animation: pulse 2s ease-in-out 0s infinite forwards;
- -moz-animation: pulse 2s ease-in-out 0s infinite forwards;
- animation: pulse 2s ease-in-out 0s infinite forwards;
+ -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+ -moz-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.connectLit {
@@ -66,6 +66,10 @@
max-width: 80%;
}
+.pulse {
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
.chatBubble {
display: inline-block;
background-color: var(--color-primary);
@@ -113,13 +117,7 @@
}
@keyframes pulse {
- 0% {
- opacity: 1;
- }
50% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
+ opacity: 0.5;
}
}
diff --git a/src/components/@shared/Orbis/DirectMessages/Conversation.tsx b/src/components/@shared/Orbis/DirectMessages/Conversation.tsx
index a087a4ba9..e95dacccc 100644
--- a/src/components/@shared/Orbis/DirectMessages/Conversation.tsx
+++ b/src/components/@shared/Orbis/DirectMessages/Conversation.tsx
@@ -17,7 +17,7 @@ export default function DmConversation() {
const [isLoading, setIsLoading] = useState(false)
const [messages, setMessages] = useState<IOrbisMessage[]>([])
const [currentPage, setCurrentPage] = useState(0)
- const [hasMore, setHasMore] = useState(false)
+ const [hasMore, setHasMore] = useState(true)
const [newMessages, setNewMessages] = useState(0)
const scrollToBottom = (smooth = false) => {
@@ -42,6 +42,7 @@ export default function DmConversation() {
}
if (data) {
+ console.log(data.length)
data.reverse()
if (!polling) {
setHasMore(data.length >= 50)
@@ -61,9 +62,12 @@ export default function DmConversation() {
setIsLoading(false)
}
- useInterval(async () => {
- await getMessages(true)
- }, 7000)
+ useInterval(
+ async () => {
+ getMessages(true)
+ },
+ !isLoading ? 15000 : false
+ )
const showTime = (index: number): boolean => {
const nextMessage = messages[index + 1]
@@ -82,7 +86,7 @@ export default function DmConversation() {
const onScrollMessages = throttle(() => {
const el = messagesWrapper.current
- if (hasMore && el.scrollTop === 0) {
+ if (hasMore && el.scrollTop <= 50) {
getMessages()
}
@@ -91,6 +95,14 @@ export default function DmConversation() {
) {
setNewMessages(0)
}
+
+ // Remove scroll listener
+ messagesWrapper.current.removeEventListener('scroll', onScrollMessages)
+
+ // Readd scroll listener
+ setTimeout(() => {
+ messagesWrapper.current.addEventListener('scroll', onScrollMessages)
+ }, 100)
}, 1000)
useEffect(() => {
@@ -105,13 +117,12 @@ export default function DmConversation() {
useEffect(() => {
const el = messagesWrapper.current
-
- el.addEventListener('scroll', onScrollMessages)
+ messagesWrapper.current.addEventListener('scroll', onScrollMessages)
return () => {
el.removeEventListener('scroll', onScrollMessages)
}
- }, [messagesWrapper])
+ }, [messages])
return (
<div className={styles.conversation}>
@@ -139,6 +150,10 @@ export default function DmConversation() {
<div
key={index}
className={`${styles.message} ${
+ message.stream_id.startsWith('new_post--')
+ ? styles.pulse
+ : ''
+ } ${
account?.did === message.creator_details.did
? styles.right
: styles.left
diff --git a/src/components/@shared/Orbis/DirectMessages/DecryptedMessage.tsx b/src/components/@shared/Orbis/DirectMessages/DecryptedMessage.tsx
index aa897d644..f18fd45a8 100644
--- a/src/components/@shared/Orbis/DirectMessages/DecryptedMessage.tsx
+++ b/src/components/@shared/Orbis/DirectMessages/DecryptedMessage.tsx
@@ -33,7 +33,7 @@ export default function DecryptedMessage({
}, [content, orbis])
return (
- <span className={loading && styles.decrypting}>
+ <span className={loading ? styles.decrypting : ''}>
{!loading ? decrypted : '---'}
</span>
)
diff --git a/src/components/@shared/Orbis/DirectMessages/Postbox.tsx b/src/components/@shared/Orbis/DirectMessages/Postbox.tsx
index 3a01b39d5..462775623 100644
--- a/src/components/@shared/Orbis/DirectMessages/Postbox.tsx
+++ b/src/components/@shared/Orbis/DirectMessages/Postbox.tsx
@@ -49,6 +49,8 @@ export default function Postbox({
reply_to: replyTo ? replyTo.stream_id : undefined
}
+ const timestamp = Math.floor(Date.now() / 1000)
+
const _callbackContent: IOrbisMessage = {
conversation_id: conversationId,
content,
@@ -62,12 +64,10 @@ export default function Postbox({
reply_to: replyTo ? replyTo.stream_id : null,
reply_to_creator_details: replyTo ? replyTo.creator_details : null,
reply_to_details: replyTo ? replyTo.content : null,
- stream_id: 'new_post',
- timestamp: Math.floor(Date.now() / 1000)
+ stream_id: 'new_post--' + timestamp,
+ timestamp
}
- console.log(_callbackContent)
-
if (callback) callback(_callbackContent)
postBoxArea.current.innerText = ''
diff --git a/src/components/Profile/Header/index.tsx b/src/components/Profile/Header/index.tsx
index 65253c348..c7d0eec7a 100644
--- a/src/components/Profile/Header/index.tsx
+++ b/src/components/Profile/Header/index.tsx
@@ -27,12 +27,7 @@ export default function AccountHeader({
accountId: string
}): ReactElement {
const { profile, ownAccount } = useProfile()
- const {
- account: orbisAccount,
- hasLit,
- createConversation,
- getDid
- } = useOrbis()
+ const { account: orbisAccount, createConversation, getDid } = useOrbis()
const [isShowMore, setIsShowMore] = useState(false)
const [userDid, setUserDid] = useState<string | undefined>()
@@ -70,9 +65,7 @@ export default function AccountHeader({
>
Send Direct Message
</Button>
- {userDid !== undefined && userDid === null && (
- <span>User has no Ceramic Network DID</span>
- )}
+ {userDid === null && <span>User has no Ceramic Network DID</span>}
{!orbisAccount && <span>Please connect your wallet</span>}
</div>
)}