refactor: toast

src/components/BookmarkButton/index.tsx

@@ -1,14 +1,13 @@
-import { useToast } from '@/hooks'
 import { useBookmarks } from '@/providers/BookmarksProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { BookmarkIcon, Loader } from 'lucide-react'
+import { Event } from 'nostr-tools'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Event } from 'nostr-tools'
+import { toast } from 'sonner'
 
 export default function BookmarkButton({ event }: { event: Event }) {
   const { t } = useTranslation()
-  const { toast } = useToast()
   const { pubkey: accountPubkey, bookmarkListEvent, checkLogin } = useNostr()
   const { addBookmark, removeBookmark } = useBookmarks()
   const [updating, setUpdating] = useState(false)
@@ -28,11 +27,7 @@ export default function BookmarkButton({ event }: { event: Event }) {
       try {
         await addBookmark(event)
       } catch (error) {
-        toast({
-          title: t('Bookmark failed'),
-          description: (error as Error).message,
-          variant: 'destructive'
-        })
+        toast.error(t('Bookmark failed') + ': ' + (error as Error).message)
       } finally {
         setUpdating(false)
       }
@@ -48,11 +43,7 @@ export default function BookmarkButton({ event }: { event: Event }) {
       try {
         await removeBookmark(event)
       } catch (error) {
-        toast({
-          title: t('Remove bookmark failed'),
-          description: (error as Error).message,
-          variant: 'destructive'
-        })
+        toast.error(t('Remove bookmark failed') + ': ' + (error as Error).message)
       } finally {
         setUpdating(false)
       }

src/components/Embedded/EmbeddedLNInvoice.tsx

@@ -1,15 +1,14 @@
 import { Button } from '@/components/ui/button'
-import { useToast } from '@/hooks'
 import { formatAmount, getAmountFromInvoice } from '@/lib/lightning'
 import { useNostr } from '@/providers/NostrProvider'
 import lightning from '@/services/lightning.service'
 import { Loader, Zap } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 export function EmbeddedLNInvoice({ invoice }: { invoice: string }) {
   const { t } = useTranslation()
-  const { toast } = useToast()
   const { checkLogin, pubkey } = useNostr()
   const [paying, setPaying] = useState(false)
 
@@ -29,11 +28,7 @@ export function EmbeddedLNInvoice({ invoice }: { invoice: string }) {
         return
       }
     } catch (error) {
-      toast({
-        title: t('Lightning payment failed'),
-        description: (error as Error).message,
-        variant: 'destructive'
-      })
+      toast.error(t('Lightning payment failed') + ': ' + (error as Error).message)
     } finally {
       setPaying(false)
     }

src/components/FollowButton/index.tsx

@@ -10,16 +10,15 @@ import {
   AlertDialogTrigger
 } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
-import { useToast } from '@/hooks'
 import { useFollowList } from '@/providers/FollowListProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { Loader } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 export default function FollowButton({ pubkey }: { pubkey: string }) {
   const { t } = useTranslation()
-  const { toast } = useToast()
   const { pubkey: accountPubkey, checkLogin } = useNostr()
   const { followings, follow, unfollow } = useFollowList()
   const [updating, setUpdating] = useState(false)
@@ -37,11 +36,7 @@ export default function FollowButton({ pubkey }: { pubkey: string }) {
       try {
         await follow(pubkey)
       } catch (error) {
-        toast({
-          title: t('Follow failed'),
-          description: (error as Error).message,
-          variant: 'destructive'
-        })
+        toast.error(t('Follow failed') + ': ' + (error as Error).message)
       } finally {
         setUpdating(false)
       }
@@ -57,11 +52,7 @@ export default function FollowButton({ pubkey }: { pubkey: string }) {
       try {
         await unfollow(pubkey)
       } catch (error) {
-        toast({
-          title: t('Unfollow failed'),
-          description: (error as Error).message,
-          variant: 'destructive'
-        })
+        toast.error(t('Unfollow failed') + ': ' + (error as Error).message)
       } finally {
         setUpdating(false)
       }

src/components/MailboxSetting/SaveButton.tsx

@@ -1,10 +1,10 @@
-import { useToast } from '@/hooks'
+import { Button } from '@/components/ui/button'
 import { createRelayListDraftEvent } from '@/lib/draft-event'
 import { useNostr } from '@/providers/NostrProvider'
 import { TMailboxRelay } from '@/types'
 import { CloudUpload, Loader } from 'lucide-react'
 import { useState } from 'react'
-import { Button } from '../ui/button'
+import { toast } from 'sonner'
 
 export default function SaveButton({
   mailboxRelays,
@@ -15,7 +15,6 @@ export default function SaveButton({
   hasChange: boolean
   setHasChange: (hasChange: boolean) => void
 }) {
-  const { toast } = useToast()
   const { pubkey, publish, updateRelayListEvent } = useNostr()
   const [pushing, setPushing] = useState(false)
 
@@ -26,10 +25,7 @@ export default function SaveButton({
     const event = createRelayListDraftEvent(mailboxRelays)
     const relayListEvent = await publish(event)
     await updateRelayListEvent(relayListEvent)
-    toast({
-      title: 'Save Successful',
-      description: 'Successfully saved mailbox relays'
-    })
+    toast.success('Successfully saved mailbox relays')
     setHasChange(false)
     setPushing(false)
   }

src/components/MuteButton/index.tsx

@@ -6,18 +6,17 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { useToast } from '@/hooks'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { BellOff, Loader } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 export default function MuteButton({ pubkey }: { pubkey: string }) {
   const { t } = useTranslation()
   const { isSmallScreen } = useScreenSize()
-  const { toast } = useToast()
   const { pubkey: accountPubkey, checkLogin } = useNostr()
   const { mutePubkeys, changing, mutePubkeyPrivately, mutePubkeyPublicly, unmutePubkey } =
     useMuteList()
@@ -39,11 +38,7 @@ export default function MuteButton({ pubkey }: { pubkey: string }) {
           await mutePubkeyPublicly(pubkey)
         }
       } catch (error) {
-        toast({
-          title: t('Mute failed'),
-          description: (error as Error).message,
-          variant: 'destructive'
-        })
+        toast.error(`${t('Mute failed')}: ${(error as Error).message}`)
       } finally {
         setUpdating(false)
       }
@@ -59,11 +54,7 @@ export default function MuteButton({ pubkey }: { pubkey: string }) {
       try {
         await unmutePubkey(pubkey)
       } catch (error) {
-        toast({
-          title: t('Unmute failed'),
-          description: (error as Error).message,
-          variant: 'destructive'
-        })
+        toast.error(`${t('Unmute failed')}: ${(error as Error).message}`)
       } finally {
         setUpdating(false)
       }

src/components/NoteStats/ZapButton.tsx

@@ -1,4 +1,3 @@
-import { useToast } from '@/hooks'
 import { getLightningAddressFromProfile } from '@/lib/lightning'
 import { cn } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
@@ -10,11 +9,11 @@ import { Loader, Zap } from 'lucide-react'
 import { Event } from 'nostr-tools'
 import { MouseEvent, TouchEvent, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 import ZapDialog from '../ZapDialog'
 
 export default function ZapButton({ event }: { event: Event }) {
   const { t } = useTranslation()
-  const { toast } = useToast()
   const { checkLogin, pubkey } = useNostr()
   const { noteStatsMap, addZap } = useNoteStats()
   const { defaultZapSats, defaultZapComment, quickZap } = useZap()
@@ -60,11 +59,7 @@ export default function ZapButton({ event }: { event: Event }) {
       }
       addZap(event.id, zapResult.invoice, defaultZapSats, defaultZapComment)
     } catch (error) {
-      toast({
-        title: t('Zap failed'),
-        description: (error as Error).message,
-        variant: 'destructive'
-      })
+      toast.error(`${t('Zap failed')}: ${(error as Error).message}`)
     } finally {
       setZapping(false)
     }

src/components/PostEditor/PostContent.tsx

@@ -1,7 +1,6 @@
 import Note from '@/components/Note'
 import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
-import { useToast } from '@/hooks/use-toast'
 import { createCommentDraftEvent, createShortTextNoteDraftEvent } from '@/lib/draft-event'
 import { isTouchDevice } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
@@ -10,6 +9,7 @@ import { ImageUp, LoaderCircle, Settings, Smile } from 'lucide-react'
 import { Event, kinds } from 'nostr-tools'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 import EmojiPickerDialog from '../EmojiPickerDialog'
 import Mentions from './Mentions'
 import { usePostEditor } from './PostEditorProvider'
@@ -28,7 +28,6 @@ export default function PostContent({
   close: () => void
 }) {
   const { t } = useTranslation()
-  const { toast } = useToast()
   const { publish, checkLogin } = useNostr()
   const { uploadingFiles, setUploadingFiles } = usePostEditor()
   const [text, setText] = useState('')
@@ -63,29 +62,16 @@ export default function PostContent({
         close()
       } catch (error) {
         if (error instanceof AggregateError) {
-          error.errors.forEach((e) =>
-            toast({
-              variant: 'destructive',
-              title: t('Failed to post'),
-              description: e.message
-            })
-          )
+          error.errors.forEach((e) => toast.error(`${t('Failed to post')}: ${e.message}`))
         } else if (error instanceof Error) {
-          toast({
-            variant: 'destructive',
-            title: t('Failed to post'),
-            description: error.message
-          })
+          toast.error(`${t('Failed to post')}: ${error.message}`)
         }
         console.error(error)
         return
       } finally {
         setPosting(false)
       }
-      toast({
-        title: t('Post successful'),
-        description: t('Your post has been published')
-      })
+      toast.success(t('Post successful'), { duration: 2000 })
     })
   }
 

src/components/PostEditor/Uploader.tsx

@@ -1,6 +1,6 @@
-import { useToast } from '@/hooks/use-toast'
 import mediaUpload from '@/services/media-upload.service'
 import { useRef } from 'react'
+import { toast } from 'sonner'
 
 export default function Uploader({
   children,
@@ -15,7 +15,6 @@ export default function Uploader({
   className?: string
   accept?: string
 }) {
-  const { toast } = useToast()
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -30,11 +29,7 @@ export default function Uploader({
       }
     } catch (error) {
       console.error('Error uploading file', error)
-      toast({
-        variant: 'destructive',
-        title: 'Failed to upload file',
-        description: (error as Error).message
-      })
+      toast.error(`Failed to upload file: ${(error as Error).message}`)
       if (fileInputRef.current) {
         fileInputRef.current.value = ''
       }

src/components/ZapDialog/index.tsx

@@ -15,7 +15,6 @@ import {
 } from '@/components/ui/drawer'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { useToast } from '@/hooks'
 import { useNostr } from '@/providers/NostrProvider'
 import { useNoteStats } from '@/providers/NoteStatsProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
@@ -24,6 +23,7 @@ import lightning from '@/services/lightning.service'
 import { Loader } from 'lucide-react'
 import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 import UserAvatar from '../UserAvatar'
 import Username from '../Username'
 
@@ -134,7 +134,6 @@ function ZapDialogContent({
   defaultComment?: string
 }) {
   const { t } = useTranslation()
-  const { toast } = useToast()
   const { pubkey } = useNostr()
   const { defaultZapSats, defaultZapComment } = useZap()
   const { addZap } = useNoteStats()
@@ -159,11 +158,7 @@ function ZapDialogContent({
         addZap(eventId, zapResult.invoice, sats, comment)
       }
     } catch (error) {
-      toast({
-        title: t('Zap failed'),
-        description: (error as Error).message,
-        variant: 'destructive'
-      })
+      toast.error(`${t('Zap failed')}: ${(error as Error).message}`)
     } finally {
       setZapping(false)
     }

src/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+// import { useTheme } from "next-themes"
+import { useTheme } from '@/providers/ThemeProvider'
+import { Toaster as Sonner } from 'sonner'
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  // const { theme = "system" } = useTheme()
+  const { themeSetting } = useTheme()
+
+  return (
+    <Sonner
+      theme={themeSetting}
+      className="toaster group"
+      richColors
+      mobileOffset={64}
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+        }
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/components/ui/toast.tsx

@@ -1,126 +0,0 @@
-import * as React from 'react'
-import * as ToastPrimitives from '@radix-ui/react-toast'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { X } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
-  {
-    variants: {
-      variant: {
-        default: 'border bg-background text-foreground',
-        destructive:
-          'destructive group border-destructive bg-destructive text-destructive-foreground'
-      }
-    },
-    defaultVariants: {
-      variant: 'default'
-    }
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn('text-sm font-semibold [&+div]:text-xs', className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn('text-sm opacity-90', className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction
-}

src/components/ui/toaster.tsx

@@ -1,31 +0,0 @@
-import { useToast } from '@/hooks/use-toast'
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport
-} from '@/components/ui/toast'
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}