Merge pull request #694 from dappforce/feedbacks

Feedbacks

src/components/BottomDrawer.tsx

@@ -0,0 +1,56 @@
+import { cx } from '@/utils/class-names'
+import { Transition } from '@headlessui/react'
+import { createPortal } from 'react-dom'
+import { HiXMark } from 'react-icons/hi2'
+import Button from './Button'
+import { ModalFunctionalityProps, ModalProps } from './modals/Modal'
+
+export default function BottomDrawer({
+  isOpen,
+  children,
+  closeModal,
+  title,
+  description,
+}: ModalFunctionalityProps &
+  Pick<ModalProps, 'title' | 'description' | 'children'>) {
+  return createPortal(
+    <>
+      <Transition
+        show={isOpen}
+        appear
+        className='fixed inset-0 z-40 h-full w-full bg-black/50 backdrop-blur-md transition duration-300'
+        enterFrom={cx('opacity-0')}
+        enterTo='opacity-100'
+        leaveFrom='h-auto'
+        leaveTo='opacity-0 !duration-150'
+        onClick={closeModal}
+      />
+      <Transition
+        show={isOpen}
+        appear
+        className='fixed bottom-0 left-1/2 z-40 mx-auto flex h-auto w-full max-w-screen-md -translate-x-1/2 rounded-t-[10px] bg-background-light outline-none transition duration-300'
+        enterFrom={cx('opacity-0 translate-y-48')}
+        enterTo='opacity-100 translate-y-0'
+        leaveFrom='h-auto'
+        leaveTo='opacity-0 translate-y-24 !duration-150'
+      >
+        <Button
+          size='circleSm'
+          variant='transparent'
+          className='absolute right-4 top-4'
+          onClick={closeModal}
+        >
+          <HiXMark className='text-lg' />
+        </Button>
+        <div className='mx-auto flex w-full max-w-screen-md flex-col gap-6 overflow-auto px-5 py-6 pb-6'>
+          <div className='flex flex-col gap-2'>
+            <span className='text-2xl font-medium'>{title}</span>
+            <span className='text-text-muted'>{description}</span>
+          </div>
+          <div className='flex w-full flex-col'>{children}</div>
+        </div>
+      </Transition>
+    </>,
+    document.body
+  )
+}

src/components/ErrorBoundary.tsx

@@ -1,6 +1,5 @@
 import { Component } from 'react'
-import Card from './Card'
-import LinkText from './LinkText'
+import Button from './Button'
 import Logo from './Logo'
 
 export default class ErrorBoundary extends Component<any, any> {
@@ -27,16 +26,14 @@ export default class ErrorBoundary extends Component<any, any> {
           <div className='flex flex-col gap-4'>
             <Logo className='text-5xl' />
             <p className='text-2xl'>Oops, something went wrong 🥲</p>
-            <p>
-              If you encounter this message inside Iframe, please enable cookies
-            </p>
-            <Card>
-              Go to{' '}
-              <LinkText href='chrome://settings/cookies' openInNewTab>
-                chrome://settings/cookies
-              </LinkText>{' '}
-              and uncheck &quot;Block third-party cookies&quot; option
-            </Card>
+            <Button
+              onClick={() => {
+                window.location.href = '/tg'
+              }}
+              size='lg'
+            >
+              Back to home
+            </Button>
           </div>
         </div>
       )

src/components/chats/ChatForm.tsx

@@ -230,6 +230,19 @@ export default function ChatForm({
       return
     }
 
+    const linkRegex = /(https?:\/\/[^\s]+)/g
+    if (linkRegex.test(messageParams.message ?? '')) {
+      toast.custom((t) => (
+        <Toast
+          t={t}
+          type='error'
+          title='No Links Allowed!'
+          description="Looks like you tried to send a link. We're keeping it link-free here! Please remove the link and try again. 😊"
+        />
+      ))
+      return
+    }
+
     unsentMessageStorage.set(JSON.stringify(messageParams), chatId)
     hasSentMessageStorage.set('true')
 

src/components/chats/ChatItem/ChatItemMenus.tsx

@@ -34,6 +34,7 @@ import { copyToClipboard } from '@/utils/strings'
 import { Transition } from '@headlessui/react'
 import { ImageProperties, PostData } from '@subsocial/api/types'
 import { SocialCallDataArgs } from '@subsocial/data-hub-sdk'
+import dayjs from 'dayjs'
 import { useEffect, useState } from 'react'
 import { BsFillPinAngleFill } from 'react-icons/bs'
 import { FaCheck } from 'react-icons/fa6'
@@ -126,7 +127,20 @@ export default function ChatItemMenus({
     }
     if (isMessageOwner && !isOptimisticMessage) {
       menus.unshift(hideMenu)
-      if ((message?.content?.body.trim().length ?? 0) > 0)
+
+      const approvedTime = message?.struct.approvedInRootPostAtTime
+      const createdTime = message?.struct.createdAtTime
+      const isApproved = message?.struct.approvedInRootPost
+
+      const isAutoApproved = isApproved && approvedTime === createdTime
+      const isAfter5MinsOfCreation =
+        dayjs(createdTime).diff(dayjs(), 'minute') < 5
+
+      if (
+        (message?.content?.body.trim().length ?? 0) > 0 &&
+        ((!isAutoApproved && isAfter5MinsOfCreation && !isApproved) ||
+          (isAutoApproved && isAfter5MinsOfCreation))
+      )
         menus.unshift(editItem)
     }
 

src/components/chats/ChatList/ChatList.tsx

@@ -177,7 +177,7 @@ function ChatListContent({
                   sendEvent('load_more_messages', { currentPage })
                 }}
                 className={cx(
-                  'relative flex w-full flex-col-reverse !overflow-hidden pb-2',
+                  'relative flex w-full flex-col-reverse !overflow-hidden',
                   // need to have enough room to open message menu
                   'min-h-[400px]'
                 )}

src/components/chats/ChatRoom/ChatRoom.tsx

@@ -104,7 +104,7 @@ function ChatInputWrapper({
 
   return (
     <>
-      <Component className={cx('mt-auto flex py-0')}>
+      <Component className={cx('mt-auto flex py-0 pt-2')}>
         <div className='flex flex-1 flex-col'>
           {/* <ActionDetailBar
             chatId={chatId}

src/components/extensions/common/CommonChatItem.tsx

@@ -1,5 +1,4 @@
 import Button from '@/components/Button'
-import LinkText from '@/components/LinkText'
 import { ProfilePreviewModalName } from '@/components/ProfilePreviewModalWrapper'
 import { useModerateWithSuccessToast } from '@/components/chats/ChatItem/ChatItemMenus'
 import ChatRelativeTime from '@/components/chats/ChatItem/ChatRelativeTime'
@@ -24,7 +23,6 @@ import { useMyMainAddress } from '@/stores/my-account'
 import { cx } from '@/utils/class-names'
 import { getIsContestEnded, getIsInContest } from '@/utils/contest'
 import { getTimeRelativeToNow } from '@/utils/date'
-import Linkify from 'linkify-react'
 import { useInView } from 'react-intersection-observer'
 import { ExtensionChatItemProps } from '../types'
 
@@ -277,7 +275,7 @@ export default function CommonChatItem({
               'whitespace-pre-wrap break-words px-2.5 text-base first:pt-1.5 last:pb-1.5'
             )}
           >
-            <Linkify
+            {/* <Linkify
               options={{
                 render: ({ content, attributes }) => (
                   <LinkText
@@ -295,9 +293,9 @@ export default function CommonChatItem({
                   </LinkText>
                 ),
               }}
-            >
-              {body}
-            </Linkify>
+            > */}
+            {body}
+            {/* </Linkify> */}
             {!isMyMessage && othersMessage.checkMark === 'bottom' && (
               <span className='pointer-events-none ml-3 select-none opacity-0'>
                 {otherMessageCheckMarkElement()}

src/components/extensions/common/CommonExtensionModal.tsx

@@ -1,12 +1,15 @@
+import BottomDrawer from '@/components/BottomDrawer'
 import ChatForm, { ChatFormProps } from '@/components/chats/ChatForm'
-import Modal, { ModalProps } from '@/components/modals/Modal'
+import { ModalProps } from '@/components/modals/Modal'
 import { sendEventWithRef } from '@/components/referral/analytics'
 import { SendMessageParams } from '@/services/subsocial/commentIds/types'
 import { useSendEvent } from '@/stores/analytics'
 import { useMessageData } from '@/stores/message'
 import { useMyMainAddress } from '@/stores/my-account'
 import { cx } from '@/utils/class-names'
 import { PostContentExtension } from '@subsocial/api/types'
+import { useViewportRaw } from '@tma.js/sdk-react'
+import { usePrevious } from '@uidotdev/usehooks'
 import { useEffect } from 'react'
 
 export type BeforeMessageResult = {
@@ -58,20 +61,17 @@ export default function CommonExtensionModal({
     setShowEmptyPrimaryChatInput(props.isOpen)
   }, [props.isOpen, setShowEmptyPrimaryChatInput])
 
-  const commonClassName = cx('px-5 md:px-6')
+  const viewport = useViewportRaw(true)
+  const viewportHeight = viewport?.result?.stableHeight
+  const prevHeight = usePrevious(viewportHeight)
+  const offset = Math.max(0, (prevHeight ?? 0) - (viewportHeight ?? 0))
 
   const isUsingBigButton = !!sendButtonText
 
   return (
-    <Modal
-      {...props}
-      withCloseButton
-      contentClassName='!pb-0 !px-0'
-      titleClassName={commonClassName}
-      descriptionClassName={commonClassName}
-    >
+    <BottomDrawer {...props}>
       <div
-        className={cx(commonClassName, {
+        className={cx({
           ['border-b border-border-gray pb-6']: withDivider,
         })}
       >
@@ -89,13 +89,12 @@ export default function CommonExtensionModal({
           className='pb-1 pt-0.5'
           inputProps={{
             className: cx(
-              'rounded-none bg-transparent pl-4 md:pl-5 py-4 pr-20 !ring-0',
+              'rounded-none bg-transparent py-4 pl-2 pr-20 !ring-0',
               !isUsingBigButton && 'rounded-b-2xl'
             ),
           }}
           sendButtonProps={{
             disabled: disableSendButton,
-            className: cx(!isUsingBigButton ? 'mr-4' : 'mx-5 md:px-6'),
           }}
           buildAdditionalTxParams={buildAdditionalTxParams}
           onSubmit={() => {
@@ -114,6 +113,8 @@ export default function CommonExtensionModal({
           }}
         />
       )}
-    </Modal>
+      {/* blank space offset so the input got pushed up, because in telegram apps, virtual keyboard doesn't push the content up when opened */}
+      <div style={{ height: offset }} />
+    </BottomDrawer>
   )
 }

src/components/extensions/image/ImageModal.tsx

@@ -59,6 +59,17 @@ export default function ImageModal({
     loadedLink: null,
   })
 
+  useEffect(() => {
+    setImageLinkStatus({
+      isShowingImage: false,
+      loadedLink: null,
+    })
+    setImageUploadStatus({
+      isShowingImage: false,
+      loadedLink: null,
+    })
+  }, [isOpen])
+
   const isImageLoaded =
     imageLinkStatus.loadedLink || imageUploadStatus.loadedLink
 
@@ -252,7 +263,7 @@ function ImageUpload({
     if (currentLoadedImage.current === imageUrl) {
       setUploadedImageLink((prev) => ({ ...prev, isShowingImage }))
     } else {
-      setUploadedImageLink({ isShowingImage, loadedLink: null })
+      setUploadedImageLink({ isShowingImage: false, loadedLink: null })
     }
   }, [setUploadedImageLink, imageUrl, isLoading, isError])
 

src/components/modals/RewardPerDayModal.tsx

@@ -31,10 +31,11 @@ export default function RewardPerDayModal({
   const stakerReward = Number(data?.earned.staker ?? '0')
   const creatorReward = Number(data?.earned.creator ?? '0')
 
-  const twitterShareText = `💰 Turn your love of memes into rewards! 
-Epic lets you earn tokens simply by liking and posting memes. 
+  const twitterShareText = `💰 Turn your love of memes into rewards!
+@EpicAppNet lets you earn tokens simply by liking and posting memes.
 
-Sounds too good to be true? Join me and see for yourself! 😉`
+Sounds too good to be true? Join me and see for yourself! 😉
+`
 
   useHotkeys('esc', close)
 

src/hooks/useTgNoScroll.ts

@@ -1,7 +1,9 @@
+import { useViewportRaw } from '@tma.js/sdk-react'
 import { useEffect } from 'react'
 
 // Solution from https://github.com/deptyped/vue-telegram/issues/11#issuecomment-1999265843
 export default function useTgNoScroll() {
+  const viewport = useViewportRaw(true)
   useEffect(() => {
     const overflow = 750
     document.body.style.overflow = 'hidden'
@@ -16,5 +18,5 @@ export default function useTgNoScroll() {
       document.body.style.height = 'auto'
       document.body.style.paddingBottom = '0'
     }
-  }, [])
+  }, [viewport?.result?.stableHeight])
 }

src/modules/telegram/TasksPage/index.tsx

@@ -199,7 +199,9 @@ function BasicTasks() {
         {data.map((task, index) => {
           const tag = task.tag as Exclude<ClaimModalVariant, null>
 
-          const { image, title, event } = modalConfigByVariant[tag]
+          const variant = modalConfigByVariant[tag]
+          if (!variant) return null
+          const { image, title, event } = variant || {}
 
           return (
             <TaskCard