Notification Improvements

src/components/auth/ProfileModal/contents/AccountContent.tsx

@@ -136,7 +136,7 @@ function useColorModeOptions(): MenuListProps['menus'] {
   if (configTheme) return []
 
   const lightModeOption: MenuListProps['menus'][number] = {
-    text: 'Light Mode',
+    text: 'Light mode',
     onClick: () => setTheme('light'),
     icon: HiSun,
     iconClassName: cx('text-text-muted-on-primary'),

src/components/auth/ProfileModal/contents/notifications/NotificationContent.tsx

@@ -9,6 +9,7 @@ import { getLinkedTelegramAccountsQuery } from '@/services/api/notifications/que
 import { cx } from '@/utils/class-names'
 import { FaDiscord, FaTelegram } from 'react-icons/fa'
 import { ContentProps } from '../../types'
+import { useIsPushNotificationEnabled } from './PushNotificationContent'
 
 export default function NotificationContent({
   address,
@@ -20,6 +21,8 @@ export default function NotificationContent({
     address,
   })
 
+  const isPushNotificationEnabled = useIsPushNotificationEnabled()
+
   return (
     <MenuList
       className='mb-2 pt-0'
@@ -43,6 +46,7 @@ export default function NotificationContent({
           text: (
             <span className='flex items-center gap-2'>
               <span>Push Notifications</span>
+              {isPushNotificationEnabled && <Notice size='sm'>Enabled</Notice>}
               {pwa.showNotification && <DotBlinkingNotification />}
             </span>
           ),

src/components/auth/ProfileModal/contents/notifications/PushNotificationContent.tsx

@@ -1,8 +1,11 @@
 import Button from '@/components/Button'
+import Toast from '@/components/Toast'
 import { useLinkFcm } from '@/services/api/notifications/mutation'
 import { getMessageToken } from '@/services/firebase/messaging'
 import { LocalStorage } from '@/utils/storage'
 import { useEffect, useState } from 'react'
+import { toast } from 'react-hot-toast'
+import { HiOutlineExclamationTriangle } from 'react-icons/hi2'
 import { ContentProps } from '../../types'
 
 const FCM_PUSH_NOTIFICATION_STORAGE_KEY = 'push-notification-fcm-token'
@@ -44,6 +47,26 @@ type NotificationButtonProps = ContentProps & {
   setIsRegistered: (v: boolean) => void
 }
 
+async function getMessageTokenWithCatch() {
+  try {
+    const fcmToken = await getMessageToken()
+    console.log('FCM Token', fcmToken)
+    if (!fcmToken) return
+    return fcmToken
+  } catch (err: any) {
+    toast.custom((t) => (
+      <Toast
+        title='Failed to enable push notification'
+        icon={(className) => (
+          <HiOutlineExclamationTriangle className={className} />
+        )}
+        t={t}
+        description='If you are using Brave browser, please go to brave://settings/privacy and turn on "Use Google services for push messaging".'
+      />
+    ))
+  }
+}
+
 function DisableNotificationButton({
   address,
   setIsRegistered,
@@ -65,7 +88,7 @@ function DisableNotificationButton({
   const handleClickDisable = async () => {
     if (!address) return
     setIsGettingToken(true)
-    const fcmToken = await getMessageToken()
+    const fcmToken = await getMessageTokenWithCatch()
     setIsGettingToken(false)
     if (!fcmToken) return
 
@@ -87,7 +110,7 @@ function EnableNotificationButton({
   const [fcmToken, setFcmToken] = useState<string | undefined>()
 
   const { mutate: linkFcm, isLoading: isLinking } = useLinkFcm({
-    onSuccess: (data) => {
+    onSuccess: () => {
       // FCM Token Enabled.
       if (fcmToken) {
         fcmPushNotificationStorage.set(fcmToken)
@@ -101,9 +124,8 @@ function EnableNotificationButton({
   const handleClickEnable = async () => {
     if (!address) return
     setIsGettingToken(true)
-    const fcmToken = await getMessageToken()
+    const fcmToken = await getMessageTokenWithCatch()
     setIsGettingToken(false)
-    console.log('FCM Token', fcmToken)
     if (!fcmToken) return
 
     setFcmToken(fcmToken)
@@ -116,3 +138,18 @@ function EnableNotificationButton({
     </Button>
   )
 }
+
+export function useIsPushNotificationEnabled() {
+  const [isPushNotificationEnabled, setIsPushNotificationEnabled] =
+    useState(false)
+
+  useEffect(() => {
+    if (typeof Notification === 'undefined') return
+
+    const permission = Notification.permission
+    const storedFcmToken = fcmPushNotificationStorage.get()
+    setIsPushNotificationEnabled(!!storedFcmToken && permission === 'granted')
+  }, [])
+
+  return isPushNotificationEnabled
+}

src/components/auth/ProfileModal/contents/notifications/TelegramNotificationContent.tsx

@@ -62,7 +62,7 @@ export default function TelegramNotificationContent(props: ContentProps) {
             <LinkText
               className='flex-shrink-0'
               withArrow
-              href='https://t.me/GrillNotificationsStagingBot'
+              href='https://t.me/grill_notifications_bot'
               openInNewTab
               variant='primary'
             >