chore: change toast package

Author: pooriaset

package.json

@@ -35,9 +35,9 @@
     "react-countdown": "^2.3.5",
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
+    "react-hot-toast": "^2.4.1",
     "react-otp-input": "^3.1.1",
     "react-swipeable-views": "^0.14.0",
-    "react-toastify": "^10.0.5",
     "sharp": "^0.33.5",
     "stylis": "^4.3.1",
     "stylis-plugin-rtl": "^2.1.1",

src/app/[locale]/(auth)/account/signin/page.tsx

@@ -12,7 +12,7 @@ import { signIn } from 'next-auth/react';
 import { useTranslations } from 'next-intl';
 import { useTransition } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
-import { toast } from 'react-toastify';
+import { toast } from 'react-hot-toast';
 import * as yup from 'yup';
 import { Link as MuiLink } from '@mui/material';
 

src/app/[locale]/(auth)/account/signup/page.tsx

@@ -14,7 +14,7 @@ import { signIn } from 'next-auth/react';
 import { useTranslations } from 'next-intl';
 import { useTransition } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
-import { toast } from 'react-toastify';
+import { toast } from 'react-hot-toast';
 import * as yup from 'yup';
 
 type FieldNames = Partial<

src/app/[locale]/layout.tsx

@@ -17,16 +17,15 @@ import type { Metadata } from 'next';
 import { headers } from 'next/headers';
 import { userAgent } from 'next/server';
 import { PropsWithChildren } from 'react';
-import { ToastContainer } from 'react-toastify';
 import ConfirmAlertProvider from '@/providers/ConfirmAlertProvider';
-import 'react-toastify/dist/ReactToastify.css';
 
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import IconsSymbols from '@/components/Icons/components/IconsSymbols';
 import { getServerSession } from 'next-auth';
 import SessionProvider from '@/components/Auth/SessionProvider';
+import { Toaster } from 'react-hot-toast';
 
 export type LocaleLayoutParams = { params: { locale: Locale } };
 
@@ -69,8 +68,8 @@ export default async function LocaleLayout({
         <SessionProvider session={session}>
           <AppRouterCacheProvider>
             <ThemeProvider theme={themes[locale] ?? defaultTheme}>
-              <ToastContainer
-                rtl={languages?.[locale]?.direction == 'rtl'}
+              <Toaster
+                // rtl={languages?.[locale]?.direction == 'rtl'}
                 position="top-center"
               />
               <ApolloProvider>

src/components/Header/components/MobileHeader.tsx

@@ -5,7 +5,7 @@ import { ArrowBack, Search, Share } from '@mui/icons-material';
 import { Box, BoxProps, IconButton, Stack, Typography } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { FC } from 'react';
-import { toast } from 'react-toastify';
+import { toast } from 'react-hot-toast';
 
 export interface MobileHeaderProps extends BoxProps {
   title?: string;

src/graphql/utils.ts

@@ -1,6 +1,6 @@
 import { onError } from '@apollo/client/link/error';
 import { Observable } from '@apollo/client/utilities';
-import { toast } from 'react-toastify';
+import { toast } from 'react-hot-toast';
 
 export const createErrorLink = () => {
   return onError(({ graphQLErrors, operation, forward }) => {

src/hooks/useAddOrUpdateCartItem.ts

@@ -10,7 +10,7 @@ import {
 } from '@/graphql/types/graphql';
 import { useMutation } from '@apollo/client';
 import useCartUtils from './useCartUtils';
-import { toast } from 'react-toastify';
+import { toast } from 'react-hot-toast';
 import { useTranslations } from 'next-intl';
 
 export interface MutateCartFunction {

yarn.lock

@@ -6134,6 +6134,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"goober@npm:^2.1.10":
+  version: 2.1.16
+  resolution: "goober@npm:2.1.16"
+  peerDependencies:
+    csstype: ^3.0.10
+  checksum: 10c0/f4c8256bf9c27873d47c1443f348779ac7f322516cb80a5dc647a6ebe790ce6bb9d3f487a0fb8be0b583fb96b9b2f6b7463f7fea3cd680306f95fa6fc9db1f6a
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -8559,9 +8568,9 @@ __metadata:
     react-countdown: "npm:^2.3.5"
     react-dom: "npm:^18"
     react-hook-form: "npm:^7.51.3"
+    react-hot-toast: "npm:^2.4.1"
     react-otp-input: "npm:^3.1.1"
     react-swipeable-views: "npm:^0.14.0"
-    react-toastify: "npm:^10.0.5"
     sharp: "npm:^0.33.5"
     stylis: "npm:^4.3.1"
     stylis-plugin-rtl: "npm:^2.1.1"
@@ -9546,6 +9555,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-hot-toast@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "react-hot-toast@npm:2.4.1"
+  dependencies:
+    goober: "npm:^2.1.10"
+  peerDependencies:
+    react: ">=16"
+    react-dom: ">=16"
+  checksum: 10c0/591ecec3c6adc1cdb70f00165a57baa3d7f75d0d30fa767213c36496bdcc6be2b2e6a3edbf7c04f7d726a1b17dcfb5e7feb2136b04b17c9ccb769894b970f365
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -9609,18 +9630,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-toastify@npm:^10.0.5":
-  version: 10.0.5
-  resolution: "react-toastify@npm:10.0.5"
-  dependencies:
-    clsx: "npm:^2.1.0"
-  peerDependencies:
-    react: ">=18"
-    react-dom: ">=18"
-  checksum: 10c0/66c68ec3d6c017d9f32652d73bb925224921c6a80b629b9d481430d5b4fd504abb7a99995a64b9aef0fc31326c74f3cbe088b3287b978dd0c355079c4bbf4158
-  languageName: node
-  linkType: hard
-
 "react-transition-group@npm:^4.4.5":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"