diff --git a/src/components/chats/UnapprovedMemeCount.tsx b/src/components/chats/UnapprovedMemeCount.tsx
new file mode 100644
index 000000000..86ef07b01
--- /dev/null
+++ b/src/components/chats/UnapprovedMemeCount.tsx
@@ -0,0 +1,13 @@
+import { getUnapprovedMemesCountQuery } from '@/services/datahub/posts/query'
+
+export default function UnapprovedMemeCount({ address }: { address: string }) {
+ const { data: count, isLoading } =
+ getUnapprovedMemesCountQuery.useQuery(address)
+ if (isLoading) return null
+
+ return (
+
+ {(count ?? 0) >= 3 ? '✅' : '🚫'} {count ?? 0}
+
+ )
+}
diff --git a/src/components/extensions/common/CommonChatItem.tsx b/src/components/extensions/common/CommonChatItem.tsx
index ea866f3b0..44fd9b201 100644
--- a/src/components/extensions/common/CommonChatItem.tsx
+++ b/src/components/extensions/common/CommonChatItem.tsx
@@ -5,6 +5,7 @@ import { useModerateWithSuccessToast } from '@/components/chats/ChatItem/ChatIte
import ChatRelativeTime from '@/components/chats/ChatItem/ChatRelativeTime'
import MessageStatusIndicator from '@/components/chats/ChatItem/MessageStatusIndicator'
import RepliedMessagePreview from '@/components/chats/ChatItem/RepliedMessagePreview'
+import UnapprovedMemeCount from '@/components/chats/UnapprovedMemeCount'
import { getRepliedMessageId } from '@/components/chats/utils'
import SuperLike from '@/components/content-staking/SuperLike'
import useAuthorizedForModeration from '@/hooks/useAuthorizedForModeration'
@@ -12,12 +13,12 @@ import useIsMessageBlocked from '@/hooks/useIsMessageBlocked'
import { getSuperLikeCountQuery } from '@/services/datahub/content-staking/query'
import { getModerationReasonsQuery } from '@/services/datahub/moderation/query'
import { useApproveUser } from '@/services/datahub/posts/mutation'
-import { getProfileQuery } from '@/services/datahub/profiles/query'
import { isMessageSent } from '@/services/subsocial/commentIds/optimistic'
import { useMyMainAddress } from '@/stores/my-account'
import { cx } from '@/utils/class-names'
import { getTimeRelativeToNow } from '@/utils/date'
import Linkify from 'linkify-react'
+import { useInView } from 'react-intersection-observer'
import { ExtensionChatItemProps } from '../types'
type DerivativesData = {
@@ -70,6 +71,7 @@ export default function CommonChatItem({
bg = 'background',
showApproveButton,
}: CommonChatItemProps) {
+ const { inView, ref } = useInView()
const myAddress = useMyMainAddress()
const { isAuthorized } = useAuthorizedForModeration(chatId)
const { mutate: moderate, isLoading: loadingModeration } =
@@ -202,6 +204,7 @@ export default function CommonChatItem({
'flex items-baseline gap-2 overflow-hidden px-2.5 first:pt-1.5',
othersMessage.checkMark !== 'top' && 'justify-between'
)}
+ ref={ref}
>
+ {showApproveButton && inView && (
+
+ )}
{/* */}
{othersMessage.checkMark === 'top' &&
otherMessageCheckMarkElement()}
@@ -351,7 +357,6 @@ function ApproveButton({
chatId: string
ownerId: string
}) {
- const { data: profile } = getProfileQuery.useQuery(ownerId)
const { mutate, isLoading } = useApproveUser()
return (