Change react hot toast to sonner

package.json

@@ -103,7 +103,6 @@
     "react-dropzone": "^14.2.3",
     "react-google-recaptcha": "^2.1.0",
     "react-hook-form": "^7.45.1",
-    "react-hot-toast": "^2.4.0",
     "react-hotkeys-hook": "^4.4.0",
     "react-icons": "^5.2.1",
     "react-infinite-scroll-component": "^6.1.0",
@@ -119,6 +118,7 @@
     "remark-gfm": "^4.0.0",
     "sharp": "^0.32.1",
     "slugify": "^1.6.6",
+    "sonner": "^1.5.0",
     "sort-keys-recursive": "^2.1.9",
     "tailwind-merge": "^1.10.0",
     "typescript": "5",

src/components/ForegroundNotificationHandler.tsx

@@ -4,8 +4,8 @@ import { cx } from '@/utils/class-names'
 import { currentNetwork } from '@/utils/network'
 import * as firebaseMessaging from 'firebase/messaging'
 import { useEffect } from 'react'
-import { toast } from 'react-hot-toast'
 import { HiArrowUpRight } from 'react-icons/hi2'
+import { toast } from 'sonner'
 import Button from './Button'
 import Toast from './Toast'
 import ChatImage from './chats/ChatImage'
@@ -43,7 +43,7 @@ export default function ForegroundNotificationHandler() {
                 href={urlToOpen}
                 target='_blank'
                 variant='transparent'
-                onClick={() => toast.dismiss(t.id)}
+                onClick={() => toast.dismiss(t)}
               >
                 <HiArrowUpRight />
               </Button>

src/components/Toast.tsx

@@ -2,7 +2,6 @@ import { cx } from '@/utils/class-names'
 // import { Transition } from '@headlessui/react'
 import { cva, VariantProps } from 'class-variance-authority'
 import { ReactNode } from 'react'
-import { Toast as ToastId } from 'react-hot-toast'
 
 const toastStyles = cva(
   'flex max-w-lg items-start rounded-2xl p-3 text-text shadow-xl ring-1 ring-black ring-opacity-5',
@@ -20,7 +19,7 @@ const toastStyles = cva(
 )
 
 export type ToastProps = VariantProps<typeof toastStyles> & {
-  t: ToastId
+  t: number | string
   title: ReactNode
   subtitle?: ReactNode
   description?: ReactNode
@@ -40,17 +39,6 @@ export default function Toast({
   const isTitleOnly = !description && !subtitle
 
   return (
-    // <Transition
-    //   appear
-    //   show={t.visible}
-    //   className='relative top-12'
-    //   enter={cx('transition duration-150')}
-    //   enterFrom={cx('-translate-y-6 opacity-0')}
-    //   enterTo={cx('translate-y-0 opacity-100')}
-    //   leave={cx('transition duration-150')}
-    //   leaveFrom={cx('translate-y-0 opacity-100')}
-    //   leaveTo={cx('-translate-y-6 opacity-0')}
-    // >
     <div className={cx(toastStyles({ type }), isTitleOnly && 'items-center')}>
       {icon?.(cx('text-3xl mr-2.5 text-text-muted')) ?? (
         <span className='mr-1'>{type === 'error' ? '😥' : 'ℹ️'}</span>
@@ -75,6 +63,5 @@ export default function Toast({
         <div className='ml-2 flex-shrink-0 self-center text-text'>{action}</div>
       )}
     </div>
-    // </Transition>
   )
 }

src/components/auth/LoginModal/contents/ScanQrContent.tsx

@@ -10,7 +10,7 @@ import { decodeSecretKey } from '@/utils/account'
 import { useQueryClient } from '@tanstack/react-query'
 import QrScanner from 'qr-scanner'
 import { useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { LoginModalContentProps } from '../LoginModalContent'
 import { finishLogin } from '../utils'
 

src/components/auth/OauthLoadingModal.tsx

@@ -28,7 +28,7 @@ import { Session } from 'next-auth'
 import { signOut, useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import Modal from '../modals/Modal'
 import { getReferralIdInUrl } from '../referral/ReferralUrlChanger'
 

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

@@ -19,12 +19,12 @@ import { useQueryClient } from '@tanstack/react-query'
 import { signIn, signOut, useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
 import { IconType } from 'react-icons'
 import { FaTelegramPlane } from 'react-icons/fa'
 import { FaXTwitter } from 'react-icons/fa6'
 import { IoLogoGoogle } from 'react-icons/io5'
 import { SiEthereum } from 'react-icons/si'
+import { toast } from 'sonner'
 import { useSignMessage } from 'wagmi'
 import { getExternalProviderPayload } from '../../OauthLoadingModal'
 import { CustomConnectButton } from '../../common/evm/CustomConnectButton'

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

@@ -10,9 +10,9 @@ import { useMyAccount } from '@/stores/my-account'
 import { installApp, isInstallAvailable } from '@/utils/install'
 import { LocalStorage } from '@/utils/storage'
 import { useEffect, useState } from 'react'
-import { toast } from 'react-hot-toast'
 import { FiPlusSquare } from 'react-icons/fi'
 import { MdIosShare } from 'react-icons/md'
+import { toast } from 'sonner'
 import { ProfileModalContentProps } from '../../types'
 
 const FCM_PUSH_NOTIFICATION_STORAGE_KEY = 'push-notification-fcm-token'

src/components/chats/ChatForm.tsx

@@ -32,9 +32,9 @@ import {
   useRef,
   useState,
 } from 'react'
-import { toast } from 'react-hot-toast'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { IoRefresh } from 'react-icons/io5'
+import { toast } from 'sonner'
 import { BeforeMessageResult } from '../extensions/common/CommonExtensionModal'
 import { interceptPastedData } from '../extensions/config'
 import { sendEventWithRef } from '../referral/analytics'
@@ -414,7 +414,7 @@ function showErrorSendingMessageToast(
               variant='transparent'
               className='text-lg'
               onClick={() => {
-                toast.dismiss(t.id)
+                toast.dismiss(t)
                 window.location.reload()
               }}
             >

src/components/content-staking/SuperLike.tsx

@@ -29,7 +29,7 @@ import {
   useEffect,
   useState,
 } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import PopOver from '../floating/PopOver'
 import { sendEventWithRef } from '../referral/analytics'
 import PostRewardStat from './PostRewardStat'

src/components/extensions/donate/api/hooks.tsx

@@ -3,8 +3,8 @@ import useToastError from '@/hooks/useToastError'
 import { isTouchDevice } from '@/utils/device'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { useEffect } from 'react'
-import { toast } from 'react-hot-toast'
 import { HiOutlineExclamationTriangle } from 'react-icons/hi2'
+import { toast } from 'sonner'
 import {
   useAccount,
   useBalance,

src/components/modals/HideMessageModal.tsx

@@ -2,10 +2,10 @@ import useToastError from '@/hooks/useToastError'
 import { getPostQuery } from '@/services/api/query'
 import { useHideMessage } from '@/services/subsocial/posts/mutation'
 import { cx } from '@/utils/class-names'
-import { toast } from 'react-hot-toast'
 import { HiOutlineEyeSlash } from 'react-icons/hi2'
-import ChatItem from '../chats/ChatItem'
+import { toast } from 'sonner'
 import Toast from '../Toast'
+import ChatItem from '../chats/ChatItem'
 import ConfirmationModal from './ConfirmationModal'
 import { ModalFunctionalityProps } from './Modal'
 

src/components/moderation/ModerationForm.tsx

@@ -9,11 +9,11 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { SocialCallDataArgs } from '@subsocial/data-hub-sdk'
 import { ComponentProps, useEffect, useMemo } from 'react'
 import { Controller, useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
 import {
   HiMiniArrowUturnLeft,
   HiOutlineInformationCircle,
 } from 'react-icons/hi2'
+import { toast } from 'sonner'
 import { z } from 'zod'
 import FormButton from '../FormButton'
 import LinkText from '../LinkText'
@@ -111,7 +111,7 @@ export default function ModerationForm({
               <LinkText
                 onClick={() => {
                   undo()
-                  toast.dismiss(t.id)
+                  toast.dismiss(t)
                 }}
                 variant='primary'
                 className='flex items-center gap-1 text-sm'

src/components/moderation/ModerationInfoModal.tsx

@@ -11,8 +11,8 @@ import { useMyMainAddress } from '@/stores/my-account'
 import { getTimeRelativeToNow } from '@/utils/date'
 import Image from 'next/image'
 import { useReducer } from 'react'
-import { toast } from 'react-hot-toast'
 import { HiOutlineInformationCircle, HiXMark } from 'react-icons/hi2'
+import { toast } from 'sonner'
 import AddressAvatar from '../AddressAvatar'
 import Button from '../Button'
 import DataCard, { DataCardProps } from '../DataCard'

src/components/subsocial-profile/SubsocialProfileModal.tsx

@@ -1,6 +1,6 @@
 import { useAnalytics } from '@/stores/analytics'
 import { useEffect } from 'react'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 import Button from '../Button'
 import Toast from '../Toast'
 import Modal, { ModalFunctionalityProps, ModalProps } from '../modals/Modal'

src/hooks/useToastError.tsx

@@ -1,15 +1,15 @@
 import CustomToast from '@/components/Toast'
 import { ReactNode, useEffect, useRef } from 'react'
-import { toast, Toast, ToastOptions } from 'react-hot-toast'
+import { ExternalToast, toast } from 'sonner'
 
 export function showErrorToast<ErrorType>(
   error: unknown,
   errorTitle: ReactNode,
   config?: {
-    getDescription?: (t: Toast) => ReactNode
+    getDescription?: (t: string | number) => ReactNode
     getMessage?: (error: ErrorType) => string
-    actionButton?: (t: Toast) => ReactNode
-    toastConfig?: ToastOptions
+    actionButton?: (t: string | number) => ReactNode
+    toastConfig?: ExternalToast
   }
 ) {
   const { actionButton, getMessage, toastConfig } = config ?? {}

src/modules/OldLandingPage/Footer.tsx

@@ -9,10 +9,10 @@ import { cx } from '@/utils/class-names'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { ComponentProps } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
 import { BiLogoTelegram } from 'react-icons/bi'
 import { RiDiscordFill, RiTwitterXLine } from 'react-icons/ri'
 import { useInView } from 'react-intersection-observer'
+import { toast } from 'sonner'
 import { z } from 'zod'
 import HighlightedText from './common/HighlightedText'
 

src/pages/_app.tsx

@@ -28,7 +28,7 @@ import type { AppProps } from 'next/app'
 // import { GoogleAnalytics } from 'nextjs-google-analytics'
 import Script from 'next/script'
 import { useEffect, useRef } from 'react'
-import { Toaster } from 'react-hot-toast'
+import { Toaster } from 'sonner'
 import urlJoin from 'url-join'
 
 export type AppCommonProps = {
@@ -163,7 +163,7 @@ function DatahubSubscriber() {
 }
 
 function ToasterConfig() {
-  return <Toaster position='top-center' />
+  return <Toaster position='top-center' offset={58} />
 }
 
 function SessionAccountChecker() {

src/providers/config/TelegramLoginProvider.tsx

@@ -26,7 +26,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 declare global {
   interface Options {

src/services/datahub/content-staking/subscription.tsx

@@ -6,7 +6,7 @@ import { DataHubSubscriptionEventEnum } from '@subsocial/data-hub-sdk'
 import { QueryClient, useQueryClient } from '@tanstack/react-query'
 import { gql } from 'graphql-request'
 import { useEffect, useRef } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { datahubSubscription, isDatahubAvailable } from '../utils'
 import { getAddressLikeCountToPostQuery, getSuperLikeCountQuery } from './query'
 

src/services/datahub/events/subscription.tsx

@@ -5,7 +5,7 @@ import { getMyMainAddress, useMyMainAddress } from '@/stores/my-account'
 import { QueryClient, useQueryClient } from '@tanstack/react-query'
 import { gql } from 'graphql-request'
 import { useEffect, useRef } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import sortKeysRecursive from 'sort-keys-recursive'
 import { getTodaySuperLikeCountQuery } from '../content-staking/query'
 import {

src/services/datahub/moderation/subscription.tsx

@@ -6,8 +6,8 @@ import { getMyMainAddress, useMyMainAddress } from '@/stores/my-account'
 import { QueryClient, useQueryClient } from '@tanstack/react-query'
 import { gql } from 'graphql-request'
 import { useEffect, useRef } from 'react'
-import { toast } from 'react-hot-toast'
 import { HiOutlineInformationCircle } from 'react-icons/hi2'
+import { toast } from 'sonner'
 import {
   DataHubSubscriptionEventEnum,
   GetBlockedInPostIdDetailedQuery,

src/services/datahub/posts/subscription.tsx

@@ -6,7 +6,7 @@ import { useSubscriptionState } from '@/stores/subscription'
 import { QueryClient, useQueryClient } from '@tanstack/react-query'
 import { gql } from 'graphql-request'
 import { useEffect, useRef } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { getCanPostSuperLikedQuery } from '../content-staking/query'
 import {
   DataHubSubscriptionEventEnum,

src/stores/version.tsx

@@ -1,8 +1,8 @@
 import Button from '@/components/Button'
 import Toast from '@/components/Toast'
 import { apiInstance } from '@/services/api/utils'
-import { toast } from 'react-hot-toast'
 import { IoRefresh } from 'react-icons/io5'
+import { toast } from 'sonner'
 import { create, createSelectors } from './utils'
 
 type State = {

yarn.lock

@@ -10537,11 +10537,6 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-goober@^2.1.10:
-  version "2.1.13"
-  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.13.tgz#e3c06d5578486212a76c9eba860cbc3232ff6d7c"
-  integrity sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==
-
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -14744,13 +14739,6 @@ react-hook-form@^7.45.1:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.45.1.tgz#e352c7f4dbc7540f0756abbb4dcfd1122fecc9bb"
   integrity sha512-6dWoFJwycbuFfw/iKMcl+RdAOAOHDiF11KWYhNDRN/OkUt+Di5qsZHwA0OwsVnu9y135gkHpTw9DJA+WzCeR9w==
 
-react-hot-toast@^2.4.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
-  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
-  dependencies:
-    goober "^2.1.10"
-
 react-hotkeys-hook@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-4.4.0.tgz#e7c55bb13ecb6ffb447e90ca5525403a5a3ac7b8"
@@ -15717,6 +15705,11 @@ sonic-boom@^2.2.1:
   dependencies:
     atomic-sleep "^1.0.0"
 
+sonner@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/sonner/-/sonner-1.5.0.tgz#af359f817063318415326b33aab54c5d17c747b7"
+  integrity sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==
+
 sort-keys-recursive@^2.1.9:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/sort-keys-recursive/-/sort-keys-recursive-2.1.9.tgz#32641a894e16340c1f064a9fa226e58eca1ab4c2"