Merge pull request #500 from dappforce/improvement/ui-icons

UI Improvements and Minor Fixes
dappforce · Dec 19, 2023 · da60267 · da60267
2 parents ae8168b + 82ae4f6
commit da60267
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 48 deletions.
diff --git a/src/components/ProfilePreview.tsx b/src/components/ProfilePreview.tsx
@@ -9,7 +9,7 @@ import { cx } from '@/utils/class-names'
 import { ProfileSource } from '@/utils/profile'
 import { ProfileContent } from '@subsocial/api/types'
 import { ComponentProps } from 'react'
-import { HiPencil } from 'react-icons/hi2'
+import { LuPencil } from 'react-icons/lu'
 import AddressAvatar from './AddressAvatar'
 import AllIdentityIcons from './AllIdentityIcons'
 import Button from './Button'
@@ -70,7 +70,7 @@ const ProfilePreview = ({
       onClick={onEditClick}
     >
       <span>Edit</span>
-      <HiPencil />
+      <LuPencil />
     </Button>
   ) : (
     <PopOver
@@ -85,7 +85,7 @@ const ProfilePreview = ({
           variant='transparent'
           onClick={onEditClick}
         >
-          <HiPencil />
+          <LuPencil />
         </Button>
       }
     >

diff --git a/src/components/auth/ProfileModal/contents/notifications/TelegramNotificationContent.tsx b/src/components/auth/ProfileModal/contents/notifications/TelegramNotificationContent.tsx
@@ -127,32 +127,33 @@ function ConnectTelegramButton({ address }: ProfileModalContentProps) {
         window.open(url, '_blank')
         setOpenedTelegramBotLink(true)
         sendEvent('open_tg_notifs_bot_link')
-      } else {
-        toast.custom(
-          (t) => (
-            <Toast
-              t={t}
-              title='Use this link to connect your Telegram'
-              description='You will be taken to the Grill bot.'
-              action={
-                <Button
-                  size='circle'
-                  className='text-lg'
-                  href={url}
-                  target='_blank'
-                  onClick={() => {
-                    toast.dismiss(t.id)
-                    setOpenedTelegramBotLink(true)
-                  }}
-                >
-                  <HiArrowUpRight />
-                </Button>
-              }
-            />
-          ),
-          { duration: Infinity }
-        )
       }
+
+      toast.custom(
+        (t) => (
+          <Toast
+            t={t}
+            title='Use this link to connect your Telegram'
+            description='You will be taken to the Grill bot.'
+            action={
+              <Button
+                size='circle'
+                className='text-lg'
+                href={url}
+                target='_blank'
+                onClick={() => {
+                  toast.dismiss(t.id)
+                  setOpenedTelegramBotLink(true)
+                  sendEvent('open_tg_notifs_bot_link')
+                }}
+              >
+                <HiArrowUpRight />
+              </Button>
+            }
+          />
+        ),
+        { duration: Infinity }
+      )
     },
   })
 

diff --git a/src/components/chats/ChatItem/ChatItemMenus.tsx b/src/components/chats/ChatItem/ChatItemMenus.tsx
@@ -31,13 +31,9 @@ import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { BiGift } from 'react-icons/bi'
-import {
-  BsFillPencilFill,
-  BsFillPinAngleFill,
-  BsFillReplyFill,
-} from 'react-icons/bs'
+import { BsFillPinAngleFill, BsFillReplyFill } from 'react-icons/bs'
 import { HiChevronRight, HiCircleStack, HiLink } from 'react-icons/hi2'
-import { LuShield } from 'react-icons/lu'
+import { LuPencil, LuShield } from 'react-icons/lu'
 import { MdContentCopy } from 'react-icons/md'
 import { RiCopperCoinLine } from 'react-icons/ri'
 import urlJoin from 'url-join'
@@ -179,7 +175,7 @@ export default function ChatItemMenus({
     }
     const editItem: FloatingMenusProps['menus'][number] = {
       text: 'Edit',
-      icon: BsFillPencilFill,
+      icon: LuPencil,
       onClick: () => setMessageToEdit(messageId),
     }
     const showDonateMenuItem = messageOwnerEvmAddress && canSendMessage

diff --git a/src/components/chats/ChatRoom/ActionDetailBar.tsx b/src/components/chats/ChatRoom/ActionDetailBar.tsx
@@ -2,8 +2,9 @@ import Button from '@/components/Button'
 import { getPostQuery } from '@/services/api/query'
 import { useMessageData } from '@/stores/message'
 import { ComponentProps } from 'react'
-import { BsFillPencilFill, BsFillReplyFill } from 'react-icons/bs'
+import { BsFillReplyFill } from 'react-icons/bs'
 import { HiXMark } from 'react-icons/hi2'
+import { LuPencil } from 'react-icons/lu'
 import RepliedMessagePreview from '../ChatItem/RepliedMessagePreview'
 import usePinnedMessage from '../hooks/usePinnedMessage'
 import { getMessageElementId, scrollToMessageElement } from '../utils'
@@ -44,12 +45,12 @@ export default function ActionDetailBar({
       onClick={() => onMessageClick(replyTo)}
     >
       {replyTo ? (
-        <div className='flex-shrink-0 pl-2 pr-3 text-text-muted'>
-          <BsFillReplyFill className='text-2xl' />
+        <div className='flex-shrink-0 pl-2 pr-4 text-text-muted'>
+          <BsFillReplyFill className='text-lg' />
         </div>
       ) : (
-        <div className='flex-shrink-0 pl-2 pr-3 text-text-muted'>
-          <BsFillPencilFill className='text-2xl' />
+        <div className='flex-shrink-0 pl-2 pr-4 text-text-muted'>
+          <LuPencil className='text-lg' />
         </div>
       )}
       <RepliedMessagePreview

diff --git a/src/components/modals/about/AboutChatModal.tsx b/src/components/modals/about/AboutChatModal.tsx
@@ -27,10 +27,9 @@ import {
   HiCircleStack,
   HiOutlineEye,
   HiOutlineEyeSlash,
-  HiPencilSquare,
   HiQrCode,
 } from 'react-icons/hi2'
-import { LuShield } from 'react-icons/lu'
+import { LuPencil, LuShield } from 'react-icons/lu'
 import { RxEnter, RxExit } from 'react-icons/rx'
 import urlJoin from 'url-join'
 import ConfirmationModal from '../ConfirmationModal'
@@ -144,7 +143,7 @@ export default function AboutChatModal({
     if (chatOwner === address) {
       additionalMenus.push({
         text: 'Edit',
-        icon: HiPencilSquare,
+        icon: LuPencil,
         iconClassName: cx('text-text-muted'),
         onClick: () => {
           setOpenedModalType('edit')

diff --git a/src/hooks/useIsMessageBlocked.ts b/src/hooks/useIsMessageBlocked.ts
@@ -1,5 +1,4 @@
 import { getPostQuery } from '@/services/api/query'
-import { getLinkedIdentityQuery } from '@/services/datahub/identity/query'
 import { getBlockedResourcesQuery } from '@/services/datahub/moderation/query'
 import { isMessageBlocked } from '@/utils/chat'
 import { getAppId } from '@/utils/env/client'
@@ -41,8 +40,6 @@ export default function useIsMessageBlocked(
     spaceId: hubId,
   })
   const { data: chat } = getPostQuery.useQuery(chatId)
-  const ownerId = chat?.struct.ownerId
-  const { data: identity } = getLinkedIdentityQuery.useQuery(ownerId ?? '')
 
   const entityId = chat?.entityId ?? ''
   const { data: chatModerationData } = getBlockedResourcesQuery.useQuery({

diff --git a/src/hooks/useLoginAndRequestToken.ts b/src/hooks/useLoginAndRequestToken.ts
@@ -8,6 +8,7 @@ export default function useLoginAndRequestToken(
 ) {
   const { mutateAsync: requestToken } = useRequestToken()
   const login = useMyAccount((state) => state.login)
+  const currentAddress = useMyAccount((state) => state.address)
   const loginAsTemporaryAccount = useMyAccount(
     (state) => state.loginAsTemporaryAccount
   )
@@ -16,8 +17,11 @@ export default function useLoginAndRequestToken(
     const loginFunc = config?.asTemporaryAccount
       ? loginAsTemporaryAccount
       : login
-    const address = await loginFunc()
-    if (!address) throw new Error('Failed to login')
+    let address: string | false | null = currentAddress
+    if (!address) {
+      address = await loginFunc()
+      if (!address) throw new Error('Failed to login')
+    }
 
     await requestToken({ address })
 

diff --git a/src/services/datahub/identity/subscription.ts b/src/services/datahub/identity/subscription.ts
@@ -13,6 +13,13 @@ import { getLinkedIdentityQuery } from './query'
 export function useDatahubIdentitySubscriber() {
   const queryClient = useQueryClient()
   const unsubRef = useRef<(() => void) | undefined>()
+  const subState = useSubscriptionState(
+    (state) => state.subscriptionState['identity']
+  )
+
+  useEffect(() => {
+    if (subState === 'always-sub') unsubRef.current = subscription(queryClient)
+  }, [subState, queryClient])
 
   useEffect(() => {
     if (!getDatahubConfig()) return

diff --git a/src/services/datahub/posts/subscription.ts b/src/services/datahub/posts/subscription.ts
@@ -20,6 +20,13 @@ import {
 export function useDatahubPostSubscriber(subscribedPostId?: string) {
   const queryClient = useQueryClient()
   const unsubRef = useRef<(() => void) | undefined>()
+  const subState = useSubscriptionState(
+    (state) => state.subscriptionState['identity']
+  )
+
+  useEffect(() => {
+    if (subState === 'always-sub') unsubRef.current = subscription(queryClient)
+  }, [subState, queryClient])
 
   useEffect(() => {
     if (!getDatahubConfig()) return