From 79591ebf331c1e764a94527fa308db883acd5497 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Thu, 12 Sep 2024 00:15:34 +0700
Subject: [PATCH 1/4] Fix wrong wording

---
 src/modules/telegram/channels/ChannelContentPage/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/telegram/channels/ChannelContentPage/index.tsx b/src/modules/telegram/channels/ChannelContentPage/index.tsx
index 4901a0083..9a74d9386 100644
--- a/src/modules/telegram/channels/ChannelContentPage/index.tsx
+++ b/src/modules/telegram/channels/ChannelContentPage/index.tsx
@@ -316,7 +316,7 @@ function ContestInfo({
               : 'Points'}
           </span>
         </div>
-        <span className='text-sm text-text-muted'>Winners</span>
+        <span className='text-sm text-text-muted'>Rewards pool</span>
       </div>
     </div>
   )

From 925ccb07e994df068a56d7d5f17cf8b0254a388c Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Thu, 12 Sep 2024 22:06:12 +0700
Subject: [PATCH 2/4] Add loading skeleton for contest winners

---
 .../HomePage/HomePageContestPreview.tsx       | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/modules/telegram/HomePage/HomePageContestPreview.tsx b/src/modules/telegram/HomePage/HomePageContestPreview.tsx
index 512214a24..5918806a5 100644
--- a/src/modules/telegram/HomePage/HomePageContestPreview.tsx
+++ b/src/modules/telegram/HomePage/HomePageContestPreview.tsx
@@ -2,13 +2,16 @@ import AddressAvatar from '@/components/AddressAvatar'
 import Button from '@/components/Button'
 import LinkText from '@/components/LinkText'
 import Name from '@/components/Name'
+import { Skeleton } from '@/components/SkeletonFallback'
 import { getReferralLeaderboardQuery } from '@/services/datahub/referral/query'
 import { isDef } from '@subsocial/utils'
 import { useState } from 'react'
 import LeaderboardModal from '../FriendsPage/LeaderboardModal'
 
 const HomePageContestPreview = () => {
-  const { data: referrersData } = getReferralLeaderboardQuery(true).useQuery({})
+  const { data: referrersData, isLoading } = getReferralLeaderboardQuery(
+    true
+  ).useQuery({})
   const [isOpen, setIsOpen] = useState(false)
 
   const { leaderboardData: items } = referrersData || {}
@@ -25,6 +28,10 @@ const HomePageContestPreview = () => {
           </LinkText>
         </div>
         <div className='flex flex-col gap-2'>
+          {isLoading &&
+            Array.from({ length: 3 }).map((_, idx) => (
+              <ContestPreviewItemSkeleton key={idx} />
+            ))}
           {data.map((item, index) => {
             if (!item) return null
 
@@ -79,4 +86,21 @@ const ContestPreviewItem = ({ item, withDivider }: ContestPreviewItemProps) => {
   )
 }
 
+const ContestPreviewItemSkeleton = () => {
+  return (
+    <div className='flex flex-col gap-2'>
+      <div className='flex items-center justify-between gap-2'>
+        <div className='flex items-center gap-2'>
+          <Skeleton className='h-[38px] w-[38px] rounded-full' />
+          <div className='flex flex-col gap-2'>
+            <Skeleton className='w-40' />
+            <Skeleton className='w-24 text-sm' />
+          </div>
+        </div>
+        <Skeleton className='w-6' />
+      </div>
+    </div>
+  )
+}
+
 export default HomePageContestPreview

From df8324fda3e2695b0015980e3443f497d2fe76bd Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Thu, 12 Sep 2024 22:12:12 +0700
Subject: [PATCH 3/4] Adjust margin for skeleton

---
 .../HomePage/HomePageContestPreview.tsx       | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/modules/telegram/HomePage/HomePageContestPreview.tsx b/src/modules/telegram/HomePage/HomePageContestPreview.tsx
index 5918806a5..a6c36d2af 100644
--- a/src/modules/telegram/HomePage/HomePageContestPreview.tsx
+++ b/src/modules/telegram/HomePage/HomePageContestPreview.tsx
@@ -28,21 +28,21 @@ const HomePageContestPreview = () => {
           </LinkText>
         </div>
         <div className='flex flex-col gap-2'>
-          {isLoading &&
-            Array.from({ length: 3 }).map((_, idx) => (
-              <ContestPreviewItemSkeleton key={idx} />
-            ))}
-          {data.map((item, index) => {
-            if (!item) return null
+          {isLoading
+            ? Array.from({ length: 3 }).map((_, idx) => (
+                <ContestPreviewItemSkeleton key={idx} />
+              ))
+            : data.map((item, index) => {
+                if (!item) return null
 
-            return (
-              <ContestPreviewItem
-                key={index}
-                item={item}
-                withDivider={data.length !== index + 1}
-              />
-            )
-          })}
+                return (
+                  <ContestPreviewItem
+                    key={index}
+                    item={item}
+                    withDivider={data.length !== index + 1}
+                  />
+                )
+              })}
         </div>
         <Button variant={'primary'} size={'md'} href='/tg/friends'>
           Invite frends and earn $
@@ -93,8 +93,8 @@ const ContestPreviewItemSkeleton = () => {
         <div className='flex items-center gap-2'>
           <Skeleton className='h-[38px] w-[38px] rounded-full' />
           <div className='flex flex-col gap-2'>
-            <Skeleton className='w-40' />
-            <Skeleton className='w-24 text-sm' />
+            <Skeleton className='my-0 w-40' />
+            <Skeleton className='my-0 w-24 text-sm' />
           </div>
         </div>
         <Skeleton className='w-6' />

From 59e5784ce2a544be584d7f9f47785c263a9f2af7 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Thu, 12 Sep 2024 22:28:51 +0700
Subject: [PATCH 4/4] Add meme preview modal

---
 .../ChatList/ChatListSupportingContent.tsx    |  2 +-
 src/components/modals/MessageModal.tsx        | 25 +++++++++----------
 .../telegram/HomePage/MemesPreview.tsx        |  6 ++++-
 .../telegram/channels/ChannelsPage/index.tsx  |  1 -
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/chats/ChatList/ChatListSupportingContent.tsx b/src/components/chats/ChatList/ChatListSupportingContent.tsx
index ac0079e35..40ed232be 100644
--- a/src/components/chats/ChatList/ChatListSupportingContent.tsx
+++ b/src/components/chats/ChatList/ChatListSupportingContent.tsx
@@ -65,13 +65,13 @@ export default function ChatListSupportingContent({
   const renderedMessageIdsRef = useWrapInRef(renderedMessageIds)
   useEffect(() => {
     if (hasScrolledToMessageRef.current) return
-    hasScrolledToMessageRef.current = true
 
     const messageId = getUrlQuery('messageId')
     const recipient = getUrlQuery('targetAcc')
     const isMessageIdsFetched = !isLoadingIds
 
     if (!isMessageIdsFetched) return
+    hasScrolledToMessageRef.current = true
 
     if (messageId && validateNumber(messageId)) {
       isInitialized.current = true
diff --git a/src/components/modals/MessageModal.tsx b/src/components/modals/MessageModal.tsx
index 78231b055..3f85e83f5 100644
--- a/src/components/modals/MessageModal.tsx
+++ b/src/components/modals/MessageModal.tsx
@@ -5,7 +5,7 @@ import { useMyAccount, useMyMainAddress } from '@/stores/my-account'
 import { cx } from '@/utils/class-names'
 import { CommentData } from '@subsocial/api/types'
 import { useEffect, useRef, useState } from 'react'
-import { HiArrowUpRight, HiOutlineInformationCircle } from 'react-icons/hi2'
+import { HiOutlineInformationCircle } from 'react-icons/hi2'
 import Button from '../Button'
 import Card from '../Card'
 import ProfilePreview from '../ProfilePreview'
@@ -76,20 +76,18 @@ export default function MessageModal({
       {...props}
       isOpen={props.isOpen && !isOpenLoginModal}
       initialFocus={buttonRef}
-      title={
-        <span className='flex items-center'>Message from {chatTitle}</span>
-      }
+      title={<span className='flex items-center'>{chatTitle}</span>}
     >
       <div
         className={cx(
-          'relative flex max-h-96 flex-col overflow-y-auto rounded-2xl bg-background p-2 pb-0 md:p-4 md:pb-0',
+          'relative flex flex-col overflow-y-auto rounded-2xl pb-0',
           !message && 'h-28 animate-pulse'
         )}
       >
         {message ? (
           <div className='flex flex-col pb-2'>
             <MemeChatItem
-              className='max-w-none rounded-2xl bg-background-lighter'
+              className='max-w-none rounded-2xl bg-background-lighter/50'
               noBorder
               enableChatMenu={false}
               message={message}
@@ -98,27 +96,28 @@ export default function MessageModal({
             />
           </div>
         ) : (
-          <Skeleton />
+          <Skeleton className='h-96 w-full rounded-2xl' />
         )}
         {(scrollToMessage || redirectTo) && (
-          <div className='sticky -bottom-px left-0 bg-background pb-4 pt-2'>
+          <div className='sticky -bottom-px left-0 pt-4'>
             <Button
               ref={buttonRef}
               isLoading={isScrolling}
-              onClick={scrollToMessage ? handleScrollToMessage : undefined}
-              href={scrollToMessage ? undefined : redirectTo}
+              onClick={() => props.closeModal()}
+              // onClick={scrollToMessage ? handleScrollToMessage : undefined}
+              // href={scrollToMessage ? undefined : redirectTo}
               target='_blank'
               size='lg'
-              variant='primaryOutline'
               className='w-full'
             >
-              {scrollToMessage ? (
+              Check Out More Memes!
+              {/* {scrollToMessage ? (
                 'Scroll to message'
               ) : (
                 <span>
                   Go to message <HiArrowUpRight className='inline' />
                 </span>
-              )}
+              )} */}
             </Button>
           </div>
         )}
diff --git a/src/modules/telegram/HomePage/MemesPreview.tsx b/src/modules/telegram/HomePage/MemesPreview.tsx
index 1f7e21f39..b694fe314 100644
--- a/src/modules/telegram/HomePage/MemesPreview.tsx
+++ b/src/modules/telegram/HomePage/MemesPreview.tsx
@@ -126,7 +126,11 @@ export const MemesPreviewItem = ({
 
   return (
     <Link
-      href={href ? href : '/tg/channels'}
+      href={
+        href
+          ? href
+          : `/tg/channels/${message.struct.rootPostId}?messageId=${message.id}`
+      }
       className={cx('relative', memeCardSize, className)}
     >
       <MediaLoader
diff --git a/src/modules/telegram/channels/ChannelsPage/index.tsx b/src/modules/telegram/channels/ChannelsPage/index.tsx
index fd03f3329..33a18dacb 100644
--- a/src/modules/telegram/channels/ChannelsPage/index.tsx
+++ b/src/modules/telegram/channels/ChannelsPage/index.tsx
@@ -100,7 +100,6 @@ function TopMemesToday() {
                 <MemesPreviewItem
                   key={index}
                   message={message}
-                  href={`/tg/channels/${message.struct.rootPostId}`}
                   address={message.struct.createdByAccount}
                 />
               )