refactor: toast

package-lock.json

@@ -46,6 +46,7 @@
         "i18next-browser-languagedetector": "^8.0.4",
         "lru-cache": "^11.0.2",
         "lucide-react": "^0.469.0",
+        "next-themes": "^0.4.6",
         "nostr-tools": "^2.13.0",
         "nstart-modal": "^2.0.0",
         "path-to-regexp": "^8.2.0",
@@ -54,6 +55,7 @@
         "react-dom": "^18.3.1",
         "react-i18next": "^15.2.0",
         "react-simple-pull-to-refresh": "^1.3.3",
+        "sonner": "^2.0.5",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
         "tippy.js": "^6.3.7",
@@ -7584,6 +7586,16 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -8894,6 +8906,16 @@
       "integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==",
       "dev": true
     },
+    "node_modules/sonner": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.5.tgz",
+      "integrity": "sha512-YwbHQO6cSso3HBXlbCkgrgzDNIhws14r4MO87Ofy+cV2X7ES4pOoAK3+veSmVTvqNx1BWUxlhPmZzP00Crk2aQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",

package.json

@@ -56,6 +56,7 @@
     "i18next-browser-languagedetector": "^8.0.4",
     "lru-cache": "^11.0.2",
     "lucide-react": "^0.469.0",
+    "next-themes": "^0.4.6",
     "nostr-tools": "^2.13.0",
     "nstart-modal": "^2.0.0",
     "path-to-regexp": "^8.2.0",
@@ -64,6 +65,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^15.2.0",
     "react-simple-pull-to-refresh": "^1.3.3",
+    "sonner": "^2.0.5",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "tippy.js": "^6.3.7",

src/App.tsx

@@ -1,8 +1,8 @@
 import 'yet-another-react-lightbox/styles.css'
 import './index.css'
 
-import { Toaster } from '@/components/ui/toaster'
 import { ThemeProvider } from '@/providers/ThemeProvider'
+import { Toaster } from './components/ui/sonner'
 import { PageManager } from './PageManager'
 import { AutoplayProvider } from './providers/AutoplayProvider'
 import { BookmarksProvider } from './providers/BookmarksProvider'

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>
-  )
-}

src/hooks/index.tsx

@@ -1,4 +1,3 @@
-export * from './use-toast'
 export * from './useFetchEvent'
 export * from './useFetchFollowings'
 export * from './useFetchNip05'

src/hooks/use-toast.ts

@@ -1,189 +0,0 @@
-'use client'
-
-// Inspired by react-hot-toast library
-import * as React from 'react'
-
-import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: 'ADD_TOAST',
-  UPDATE_TOAST: 'UPDATE_TOAST',
-  DISMISS_TOAST: 'DISMISS_TOAST',
-  REMOVE_TOAST: 'REMOVE_TOAST'
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType['ADD_TOAST']
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType['UPDATE_TOAST']
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType['DISMISS_TOAST']
-      toastId?: ToasterToast['id']
-    }
-  | {
-      type: ActionType['REMOVE_TOAST']
-      toastId?: ToasterToast['id']
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: 'REMOVE_TOAST',
-      toastId: toastId
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case 'ADD_TOAST':
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
-      }
-
-    case 'UPDATE_TOAST':
-      return {
-        ...state,
-        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t))
-      }
-
-    case 'DISMISS_TOAST': {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false
-              }
-            : t
-        )
-      }
-    }
-    case 'REMOVE_TOAST':
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: []
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId)
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, 'id'>
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: 'UPDATE_TOAST',
-      toast: { ...props, id }
-    })
-  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
-
-  dispatch({
-    type: 'ADD_TOAST',
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      }
-    }
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId })
-  }
-}
-
-export { useToast, toast }

src/i18n/locales/ar.ts

@@ -240,6 +240,8 @@ export default {
     'Mute user privately': 'كتم المستخدم بشكل خاص',
     'Mute user publicly': 'كتم المستخدم علنياً',
     Quotes: 'الاقتباسات',
-    'Lightning Invoice': 'فاتورة Lightning'
+    'Lightning Invoice': 'فاتورة Lightning',
+    'Bookmark failed': 'فشل في الإشارة المرجعية',
+    'Remove bookmark failed': 'فشل في إزالة الإشارة المرجعية'
   }
 }

src/i18n/locales/de.ts

@@ -247,6 +247,8 @@ export default {
     'Mute user privately': 'Benutzer privat stummschalten',
     'Mute user publicly': 'Benutzer öffentlich stummschalten',
     Quotes: 'Zitate',
-    'Lightning Invoice': 'Lightning-Rechnung'
+    'Lightning Invoice': 'Lightning-Rechnung',
+    'Bookmark failed': 'Bookmark fehlgeschlagen',
+    'Remove bookmark failed': 'Bookmark entfernen fehlgeschlagen'
   }
 }

src/i18n/locales/en.ts

@@ -240,6 +240,8 @@ export default {
     'Mute user privately': 'Mute user privately',
     'Mute user publicly': 'Mute user publicly',
     Quotes: 'Quotes',
-    'Lightning Invoice': 'Lightning Invoice'
+    'Lightning Invoice': 'Lightning Invoice',
+    'Bookmark failed': 'Bookmark failed',
+    'Remove bookmark failed': 'Remove bookmark failed'
   }
 }

src/i18n/locales/es.ts

@@ -245,6 +245,8 @@ export default {
     'Mute user privately': 'Silenciar usuario en privado',
     'Mute user publicly': 'Silenciar usuario públicamente',
     Quotes: 'Citas',
-    'Lightning Invoice': 'Factura Lightning'
+    'Lightning Invoice': 'Factura Lightning',
+    'Bookmark failed': 'Error al marcar',
+    'Remove bookmark failed': 'Error al quitar marcador'
   }
 }

src/i18n/locales/fr.ts

@@ -245,6 +245,8 @@ export default {
     'Mute user privately': 'Mettre l’utilisateur en sourdine en privé',
     'Mute user publicly': 'Mettre l’utilisateur en sourdine publiquement',
     Quotes: 'Citations',
-    'Lightning Invoice': 'Facture Lightning'
+    'Lightning Invoice': 'Facture Lightning',
+    'Bookmark failed': 'Échec de la mise en favori',
+    'Remove bookmark failed': 'Échec de la suppression du favori'
   }
 }

src/i18n/locales/it.ts

@@ -244,6 +244,8 @@ export default {
     'Mute user privately': 'Zittisci utente privatamente',
     'Mute user publicly': 'Zittisci utente pubblicamente',
     Quotes: 'Citazioni',
-    'Lightning Invoice': 'Fattura Lightning'
+    'Lightning Invoice': 'Fattura Lightning',
+    'Bookmark failed': 'Impossibile aggiungere segnalibro',
+    'Remove bookmark failed': 'Impossibile rimuovere segnalibro'
   }
 }

src/i18n/locales/ja.ts

@@ -241,6 +241,8 @@ export default {
     'Mute user privately': 'ユーザーを非公開でミュート',
     'Mute user publicly': 'ユーザーを公開でミュート',
     Quotes: '引用',
-    'Lightning Invoice': 'ライトニングインボイス'
+    'Lightning Invoice': 'ライトニングインボイス',
+    'Bookmark failed': 'ブックマークに失敗しました',
+    'Remove bookmark failed': 'ブックマークの削除に失敗しました'
   }
 }

src/i18n/locales/pl.ts

@@ -243,6 +243,8 @@ export default {
     'Mute user privately': 'Zablokuj użytkownika prywatnie',
     'Mute user publicly': 'Zablokuj użytkownika publicznie',
     Quotes: 'Cytaty',
-    'Lightning Invoice': 'Faktura Lightning'
+    'Lightning Invoice': 'Faktura Lightning',
+    'Bookmark failed': 'Nie udało się dodać zakładki',
+    'Remove bookmark failed': 'Nie udało się usunąć zakładki'
   }
 }

src/i18n/locales/pt-BR.ts

@@ -243,6 +243,8 @@ export default {
     'Mute user privately': 'Silenciar usuário privadamente',
     'Mute user publicly': 'Silenciar usuário publicamente',
     Quotes: 'Citações',
-    'Lightning Invoice': 'Fatura Lightning'
+    'Lightning Invoice': 'Fatura Lightning',
+    'Bookmark failed': 'Falha ao favoritar',
+    'Remove bookmark failed': 'Falha ao remover favorito'
   }
 }

src/i18n/locales/pt-PT.ts

@@ -244,6 +244,8 @@ export default {
     'Mute user privately': 'Silenciar usuário privadamente',
     'Mute user publicly': 'Silenciar usuário publicamente',
     Quotes: 'Citações',
-    'Lightning Invoice': 'Fatura Lightning'
+    'Lightning Invoice': 'Fatura Lightning',
+    'Bookmark failed': 'Falha ao favoritar',
+    'Remove bookmark failed': 'Falha ao remover favorito'
   }
 }

src/i18n/locales/ru.ts

@@ -245,6 +245,8 @@ export default {
     'Mute user privately': 'Заглушить пользователя приватно',
     'Mute user publicly': 'Заглушить пользователя публично',
     Quotes: 'Цитаты',
-    'Lightning Invoice': 'Lightning-счет'
+    'Lightning Invoice': 'Lightning-счет',
+    'Bookmark failed': 'Не удалось добавить закладку',
+    'Remove bookmark failed': 'Не удалось удалить закладку'
   }
 }

src/i18n/locales/zh.ts

@@ -241,6 +241,8 @@ export default {
     'Mute user privately': '悄悄屏蔽',
     'Mute user publicly': '公开屏蔽',
     Quotes: '引用',
-    'Lightning Invoice': '闪电发票'
+    'Lightning Invoice': '闪电发票',
+    'Bookmark failed': '收藏失败',
+    'Remove bookmark failed': '取消收藏失败'
   }
 }

src/pages/secondary/RelayPage/index.tsx

@@ -3,12 +3,13 @@ import RelayInfo from '@/components/RelayInfo'
 import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
 import SearchInput from '@/components/SearchInput'
 import { Button } from '@/components/ui/button'
-import { useFetchRelayInfo, useToast } from '@/hooks'
+import { useFetchRelayInfo } from '@/hooks'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { normalizeUrl, simplifyUrl } from '@/lib/url'
 import { Check, Copy, Link } from 'lucide-react'
 import { forwardRef, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 import NotFoundPage from '../NotFoundPage'
 
 const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number }, ref) => {
@@ -63,7 +64,6 @@ RelayPage.displayName = 'RelayPage'
 export default RelayPage
 
 function RelayPageControls({ url }: { url: string }) {
-  const { toast } = useToast()
   const [copiedUrl, setCopiedUrl] = useState(false)
   const [copiedShareableUrl, setCopiedShareableUrl] = useState(false)
 
@@ -76,10 +76,7 @@ function RelayPageControls({ url }: { url: string }) {
   const handleCopyShareableUrl = () => {
     navigator.clipboard.writeText(`https://jumble.social/?r=${url}`)
     setCopiedShareableUrl(true)
-    toast({
-      title: 'Shareable URL copied to clipboard',
-      description: 'You can share this URL with others.'
-    })
+    toast.success('Shareable URL copied to clipboard')
     setTimeout(() => setCopiedShareableUrl(false), 2000)
   }
 

src/pages/secondary/WalletPage/LightningAddressInput.tsx

@@ -1,17 +1,16 @@
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { useToast } from '@/hooks'
 import { isEmail } from '@/lib/common'
 import { createProfileDraftEvent } from '@/lib/draft-event'
 import { useNostr } from '@/providers/NostrProvider'
 import { Loader } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 export default function LightningAddressInput() {
   const { t } = useTranslation()
-  const { toast } = useToast()
   const { profile, profileEvent, publish, updateProfileEvent } = useNostr()
   const [lightningAddress, setLightningAddress] = useState('')
   const [hasChanged, setHasChanged] = useState(false)
@@ -36,11 +35,7 @@ export default function LightningAddressInput() {
     } else if (isEmail(lightningAddress)) {
       lud16 = lightningAddress
     } else {
-      toast({
-        title: 'Invalid Lightning Address',
-        description: 'Please enter a valid Lightning Address or LNURL',
-        variant: 'destructive'
-      })
+      toast.error(t('Invalid Lightning Address. Please enter a valid Lightning Address or LNURL.'))
       setSaving(false)
       return
     }

src/providers/MuteListProvider.tsx

@@ -5,9 +5,9 @@ import indexedDb from '@/services/indexed-db.service'
 import dayjs from 'dayjs'
 import { Event } from 'nostr-tools'
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { toast } from 'sonner'
 import { z } from 'zod'
 import { useNostr } from './NostrProvider'
-import { useToast } from '@/hooks'
 
 type TMuteListContext = {
   mutePubkeys: string[]
@@ -32,7 +32,6 @@ export const useMuteList = () => {
 }
 
 export function MuteListProvider({ children }: { children: React.ReactNode }) {
-  const { toast } = useToast()
   const {
     pubkey: accountPubkey,
     muteListEvent,
@@ -111,10 +110,7 @@ export function MuteListProvider({ children }: { children: React.ReactNode }) {
     }
     const newMuteListDraftEvent = createMuteListDraftEvent(tags, content)
     const event = await publish(newMuteListDraftEvent)
-    toast({
-      title: 'Mute list updated',
-      description: 'Your mute list has been updated successfully.'
-    })
+    toast.success('Successfully updated mute list')
     return event
   }
 

src/providers/NostrProvider/index.tsx

@@ -1,6 +1,5 @@
 import LoginDialog from '@/components/LoginDialog'
 import { ApplicationDataKey, BIG_RELAY_URLS, ExtendedKind } from '@/constants'
-import { useToast } from '@/hooks'
 import { createSeenNotificationsAtDraftEvent } from '@/lib/draft-event'
 import {
   getLatestEvent,
@@ -20,11 +19,12 @@ import * as nip19 from 'nostr-tools/nip19'
 import * as nip49 from 'nostr-tools/nip49'
 import { createContext, useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 import { BunkerSigner } from './bunker.signer'
 import { Nip07Signer } from './nip-07.signer'
+import { NostrConnectionSigner } from './nostrConnection.signer'
 import { NpubSigner } from './npub.signer'
 import { NsecSigner } from './nsec.signer'
-import { NostrConnectionSigner } from './nostrConnection.signer'
 
 type TNostrContext = {
   isInitialized: boolean
@@ -80,7 +80,6 @@ export const useNostr = () => {
 
 export function NostrProvider({ children }: { children: React.ReactNode }) {
   const { t } = useTranslation()
-  const { toast } = useToast()
   const [account, setAccount] = useState<TAccountPointer | null>(null)
   const [nsec, setNsec] = useState<string | null>(null)
   const [ncryptsec, setNcryptsec] = useState<string | null>(null)
@@ -379,11 +378,7 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
       }
       return login(nip07Signer, { pubkey, signerType: 'nip-07' })
     } catch (err) {
-      toast({
-        title: 'Login failed',
-        description: (err as Error).message,
-        variant: 'destructive'
-      })
+      toast.error(t('Login failed') + ': ' + (err as Error).message)
       throw err
     }
   }