Merge pull request #43 from dappforce/fix/wording

Fix wording

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

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>
         )}

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,17 +28,21 @@ const HomePageContestPreview = () => {
           </LinkText>
         </div>
         <div className='flex flex-col gap-2'>
-          {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 $
@@ -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='my-0 w-40' />
+            <Skeleton className='my-0 w-24 text-sm' />
+          </div>
+        </div>
+        <Skeleton className='w-6' />
+      </div>
+    </div>
+  )
+}
+
 export default HomePageContestPreview

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

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>
   )

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}
                 />
               )