chore:migrate react-toastify to sonner

app/positions/components/PositionsContent.tsx

@@ -6,7 +6,6 @@ import { useParams } from 'next/navigation';
 import { FaHistory, FaPlus } from 'react-icons/fa';
 import { IoRefreshOutline } from 'react-icons/io5';
 import { TbReport } from 'react-icons/tb';
-import { toast } from 'react-toastify';
 import { Address } from 'viem';
 import { useAccount } from 'wagmi';
 import { AddressDisplay } from '@/components/common/AddressDisplay';
@@ -16,6 +15,7 @@ import EmptyScreen from '@/components/Status/EmptyScreen';
 import LoadingScreen from '@/components/Status/LoadingScreen';
 import { SupplyModalV2 } from '@/components/SupplyModalV2';
 import { useMarkets } from '@/hooks/useMarkets';
+import { useStyledToast } from '@/hooks/useStyledToast';
 import useUserPositionsSummaryData from '@/hooks/useUserPositionsSummaryData';
 import { MarketPosition } from '@/utils/types';
 import { OnboardingModal } from './onboarding/OnboardingModal';
@@ -32,6 +32,8 @@ export default function Positions() {
 
   const [mounted, setMounted] = useState(false);
 
+  const toast = useStyledToast();
+
   const isOwner = useMemo(() => {
     if (!account || !address || !mounted) return false;
     return account === address;

package.json

@@ -63,7 +63,6 @@
     "react-remove-scroll": "^2.5.7",
     "react-spinners": "^0.14.1",
     "react-table": "^7.8.0",
-    "react-toastify": "11.0.2",
     "react-type-animation": "^3.2.0",
     "recharts": "^2.13.0",
     "rehype-pretty-code": "0.12.3",
@@ -73,6 +72,7 @@
     "sharp": "^0.33.5",
     "shikiji": "^0.9.17",
     "shikiji-core": "^0.9.17",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^2.5.5",
     "tailwind-variants": "^2.1.0",
     "unified": "^11.0.4",

src/components/providers/ConnectRedirectProvider.tsx

@@ -21,7 +21,7 @@ export function ConnectRedirectProvider({ children }: { children: ReactNode }) {
       if (redirectPath && !isReconnected) {
         router.push(`/${redirectPath}/${address}`);
         toast.success('Address connected', 'Redirecting to portfolio...', {
-          toastId: 'address-connected',
+          id: 'address-connected',
         });
         // Reset the path after redirect
         setRedirectPath(undefined);

src/components/providers/ThemeProvider.tsx

@@ -1,8 +1,31 @@
 'use client';
 
 import { HeroUIProvider } from '@heroui/react';
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import { ToastContainer } from 'react-toastify';
+import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
+import { Toaster } from 'sonner';
+
+function ToasterProvider() {
+  const { theme } = useTheme();
+
+  const isDark = theme === 'dark';
+
+  return (
+    <Toaster
+      position="bottom-right"
+      theme={(theme as 'light' | 'dark' | 'system' | undefined) ?? 'system'}
+      toastOptions={{
+        style: {
+          background: isDark ? '#202426' : '#fff',
+          color: isDark ? '#fff' : '#000',
+          border: 'none',
+          borderRadius: '3px',
+          fontSize: '16px',
+        },
+        className: 'font-zen',
+      }}
+    />
+  );
+}
 
 export function ThemeProviders({ children }: { children: React.ReactNode }) {
   return (
@@ -14,11 +37,7 @@ export function ThemeProviders({ children }: { children: React.ReactNode }) {
       themes={['light', 'dark']}
     >
       <HeroUIProvider>{children}</HeroUIProvider>
-      <ToastContainer
-        position="bottom-right"
-        toastClassName="bg-[#fff] dark:bg-[#202426] text-[#000] dark:text-[#fff]"
-        toastStyle={{ borderRadius: '3px', fontSize: '16px' }}
-      />
+      <ToasterProvider />
     </NextThemesProvider>
   );
 }

src/hooks/useStyledToast.tsx

@@ -1,20 +1,66 @@
-import React, { useCallback } from 'react';
-import { toast, ToastOptions } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import { StyledToast } from '../components/common/StyledToast';
+import { useCallback } from 'react';
+import { toast, ExternalToast } from 'sonner';
+
+type ToastMessage = string | undefined;
 
 export function useStyledToast() {
-  const success = useCallback((title: string, message?: string, options?: ToastOptions) => {
-    toast.success(<StyledToast title={title} message={message} />, options);
-  }, []);
+  const success = useCallback(
+    (title: string, messageOrOptions?: ToastMessage | ExternalToast, options?: ExternalToast) => {
+      // If second param is an object, treat it as options
+      const isSecondParamOptions =
+        typeof messageOrOptions === 'object' && messageOrOptions !== null;
+      const message = isSecondParamOptions ? undefined : (messageOrOptions as string | undefined);
+      const finalOptions = isSecondParamOptions
+        ? (messageOrOptions as ExternalToast)
+        : options;
+
+      toast.success(title, {
+        description: message,
+        className: 'font-zen',
+        descriptionClassName: 'font-inter text-xs',
+        ...finalOptions,
+      });
+    },
+    [],
+  );
+
+  const error = useCallback(
+    (title: string, messageOrOptions?: ToastMessage | ExternalToast, options?: ExternalToast) => {
+      const isSecondParamOptions =
+        typeof messageOrOptions === 'object' && messageOrOptions !== null;
+      const message = isSecondParamOptions ? undefined : (messageOrOptions as string | undefined);
+      const finalOptions = isSecondParamOptions
+        ? (messageOrOptions as ExternalToast)
+        : options;
+
+      toast.error(title, {
+        description: message,
+        className: 'font-zen',
+        descriptionClassName: 'font-inter text-xs',
+        ...finalOptions,
+      });
+    },
+    [],
+  );
 
-  const error = useCallback((title: string, message?: string, options?: ToastOptions) => {
-    toast.error(<StyledToast title={title} message={message} />, options);
-  }, []);
+  const info = useCallback(
+    (title: string, messageOrOptions?: ToastMessage | ExternalToast, options?: ExternalToast) => {
+      const isSecondParamOptions =
+        typeof messageOrOptions === 'object' && messageOrOptions !== null;
+      const message = isSecondParamOptions ? undefined : (messageOrOptions as string | undefined);
+      const finalOptions = isSecondParamOptions
+        ? (messageOrOptions as ExternalToast)
+        : options;
 
-  const info = useCallback((title: string, message?: string, options?: ToastOptions) => {
-    toast.info(<StyledToast title={title} message={message} />, options);
-  }, []);
+      toast.info(title, {
+        description: message,
+        className: 'font-zen',
+        descriptionClassName: 'font-inter text-xs',
+        ...finalOptions,
+      });
+    },
+    [],
+  );
 
   return { success, error, info };
 }

src/hooks/useTransactionWithToast.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
-import { toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { toast } from 'sonner';
 import { useSendTransaction, useWaitForTransactionReceipt } from 'wagmi';
-import { StyledToast, TransactionToast } from '@/components/common/StyledToast';
+import { TxHashDisplay } from '@/components/TxHashDisplay';
 import { getExplorerTxURL } from '../utils/external';
 import { SupportedNetworks } from '../utils/networks';
 
@@ -50,51 +49,68 @@ export function useTransactionWithToast({
   }, [hash, chainId]);
 
   useEffect(() => {
-    if (isConfirming) {
-      toast.loading(
-        <TransactionToast title={pendingText} description={pendingDescription} hash={hash} />,
-        {
-          toastId,
-          onClick,
-          closeButton: true,
-        },
-      );
+    if (isConfirming && hash) {
+      toast.loading(pendingText, {
+        id: toastId,
+        description: (
+          <div className="font-zen">
+            {pendingDescription && <div className="mb-2 mt-1 text-sm">{pendingDescription}</div>}
+            <TxHashDisplay hash={hash} />
+          </div>
+        ),
+        action: hash
+          ? {
+              label: 'View',
+              onClick,
+            }
+          : undefined,
+        className: 'font-zen',
+      });
     }
   }, [isConfirming, pendingText, pendingDescription, toastId, onClick, hash]);
 
   useEffect(() => {
     if (isConfirmed) {
-      toast.update(toastId, {
-        render: (
-          <TransactionToast
-            title={`${successText} 🎉`}
-            description={successDescription}
-            hash={hash}
-          />
-        ),
-        type: 'success',
-        isLoading: false,
-        autoClose: 5000,
-        onClick,
-        closeButton: true,
-      });
-      if (onSuccess) {
-        onSuccess();
+      if (hash) {
+        toast.success(`${successText} 🎉`, {
+          id: toastId,
+          description: (
+            <div className="font-zen">
+              {successDescription && <div className="mb-2 mt-1 text-sm">{successDescription}</div>}
+              <TxHashDisplay hash={hash} />
+            </div>
+          ),
+          action: {
+            label: 'View',
+            onClick,
+          },
+          duration: 5000,
+          className: 'font-zen',
+        });
+        if (onSuccess) {
+          onSuccess();
+        }
       }
     }
     if (isError || txError) {
-      toast.update(toastId, {
-        render: (
-          <StyledToast
-            title={errorText}
-            message={txError ? txError.message : 'Transaction Failed'}
-          />
+      toast.error(errorText, {
+        id: toastId,
+        description: (
+          <div className="font-zen">
+            <div className="py-2 font-inter text-xs">
+              {txError ? txError.message : 'Transaction Failed'}
+            </div>
+            {hash && <TxHashDisplay hash={hash} />}
+          </div>
         ),
-        type: 'error',
-        isLoading: false,
-        autoClose: 5000,
-        onClick,
-        closeButton: true,
+        action: hash
+          ? {
+              label: 'View',
+              onClick,
+            }
+          : undefined,
+        duration: 5000,
+        className: 'font-zen',
       });
     }
   }, [