Merge pull request #4810 from h3poteto/fix/toast

Show toast

renderer/pages/_app.tsx

@@ -4,6 +4,7 @@ import AccountLayout from '@/components/layouts/account'
 import TimelineLayout from '@/components/layouts/timelines'
 import { IntlProviderWrapper } from '@/utils/i18n'
 import { ThemeProvider } from '@material-tailwind/react'
+import { ToastProvider } from '@/utils/toast'
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   const customTheme = {
@@ -102,11 +103,13 @@ export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider value={customTheme}>
       <IntlProviderWrapper>
-        <AccountLayout>
-          <TimelineLayout>
-            <Component {...pageProps} />
-          </TimelineLayout>
-        </AccountLayout>
+        <ToastProvider>
+          <AccountLayout>
+            <TimelineLayout>
+              <Component {...pageProps} />
+            </TimelineLayout>
+          </AccountLayout>
+        </ToastProvider>
       </IntlProviderWrapper>
     </ThemeProvider>
   )

renderer/utils/toast.tsx

@@ -43,12 +43,12 @@ export const ToastProvider: React.FC<Props> = ({ children }) => {
 
   return (
     <ToastContext.Provider value={showToast}>
-      {children}
       <div className={`${showable ? 'block' : 'hidden'} fixed top-2 -translate-x-1/2`} style={{ left: '50%' }}>
         <Alert color={color(toastType)} className="w96">
           <span>{toastText}</span>
         </Alert>
       </div>
+      {children}
     </ToastContext.Provider>
   )
 }