Add toast UI for handling axios error

components/Navbar.tsx

@@ -8,9 +8,10 @@ import { NoSSR } from './NoSSR'
 
 const NavBar: React.FC = () => {
   const { openModal } = useModalStore();
+  // get saved session ticket data
+  const sessionTicket = localStorage.getItem('SessionTicket');
+
   const handleClick = () => {
-    // get saved session ticket data
-    const sessionTicket = localStorage.getItem('SessionTicket');
     if (sessionTicket !== null) {
       openModal({
         title: 'Wallet',
@@ -70,8 +71,12 @@ const NavBar: React.FC = () => {
               onClick={handleClick}
             >
               <span className="text-orange text-base font-bold leading-none">
-                Connect <br className="lg:hidden" />
-                Wallet
+                {
+                  sessionTicket ?
+                  <>Connect <br className="lg:hidden" /> Wallet</>
+                  :
+                  <>Sign <br className="lg:hidden" /> In</>
+                }
               </span>
             </button>
           </div>

features/Auth/components/SignupForm.tsx

@@ -51,33 +51,35 @@ const SignupForm: React.FC = () => {
   })
 
   return (
-    <form className="flex flex-col gap-6" onSubmit={onSubmit}>
-      <div className="flex flex-col gap-1">
-        <Label htmlFor="email">Email</Label>
-        <TextInput type="email" id="email" {...register('Email')} />
-      </div>
-      <div className="flex flex-col gap-1">
-        <Label htmlFor="password">Password</Label>
-        <TextInput type="password" id="password" {...register('Password')} />
-      </div>
-      <div className="flex flex-col gap-1">
-        <Label htmlFor="name">Name</Label>
-        <TextInput type="text" id="name" {...register('DisplayName')} />
-      </div>
-      <div className="flex flex-col gap-2">
-        <Button type="submit" loading={isSubmitting}>
-          Submit
-        </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          onClick={handleClickSignin}
-          loading={isSubmitting}
-        >
-          Sign in
-        </Button>
-      </div>
-    </form>
+    <>
+      <form className="flex flex-col gap-6" onSubmit={onSubmit}>
+        <div className="flex flex-col gap-1">
+          <Label htmlFor="email">Email</Label>
+          <TextInput type="email" id="email" {...register('Email')} />
+        </div>
+        <div className="flex flex-col gap-1">
+          <Label htmlFor="password">Password</Label>
+          <TextInput type="password" id="password" {...register('Password')} />
+        </div>
+        <div className="flex flex-col gap-1">
+          <Label htmlFor="name">Name</Label>
+          <TextInput type="text" id="name" {...register('DisplayName')} />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Button type="submit" loading={isSubmitting}>
+            Submit
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={handleClickSignin}
+            loading={isSubmitting}
+          >
+            Sign in
+          </Button>
+        </div>
+      </form>
+    </>
   )
 }
 export default SignupForm

package.json

@@ -28,6 +28,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.41.1",
     "react-ipfs-url": "^0.2.2",
+    "react-toastify": "^9.1.1",
     "react-use": "^17.4.0",
     "recoil": "^0.7.5",
     "yup": "^0.32.11"

pages/_app.tsx

@@ -1,4 +1,6 @@
 import '@/styles/globals.css'
+import 'react-toastify/dist/ReactToastify.css'
+import { ToastContainer } from 'react-toastify'
 import type { AppProps } from 'next/app'
 
 import { RecoilRoot } from 'recoil'
@@ -7,6 +9,11 @@ function App({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
       <Component {...pageProps} />
+      <ToastContainer
+        draggable
+        position='top-center'
+        progressStyle={{ background: '#FBB03B' }}
+      />
     </RecoilRoot>
   )
 }

utils/requester.ts

@@ -1,8 +1,8 @@
 import axios from 'axios'
 import type { AxiosError, AxiosRequestConfig } from 'axios'
+import { toast } from 'react-toastify'
 
 const titleId: string = process.env.NEXT_PUBLIC_PLAYFAB_TITLEID
-
 const Requester = axios.create({
   baseURL: `https://${titleId}.playfabapi.com`,
 })
@@ -31,7 +31,7 @@ Requester.interceptors.response.use(
 
     if (axios.isAxiosError(error)) {
       const axiosError = error as AxiosError<PlayFab.Error>
-      return Promise.reject(axiosError.response?.data)
+      return Promise.reject(axiosError.response?.data), toast(axiosError.response?.data.errorMessage);
     }
 
     return Promise.reject(error)

yarn.lock

@@ -2151,7 +2151,7 @@ clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
-clsx@^1.1.0, clsx@^1.2.1:
+clsx@^1.1.0, clsx@^1.1.1, clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -5442,6 +5442,13 @@ react-promiseful@^2.0.0:
     lodash "^4.17.11"
     prop-types "^15.7.2"
 
+react-toastify@^9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.1.tgz#9280caea4a13dc1739c350d90660a630807bf10b"
+  integrity sha512-pkFCla1z3ve045qvjEmn2xOJOy4ZciwRXm1oMPULVkELi5aJdHCN/FHnuqXq8IwGDLB7PPk2/J6uP9D8ejuiRw==
+  dependencies:
+    clsx "^1.1.1"
+
 react-universal-interface@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"