feat: rebrand toasts (#4261)

Co-authored-by: Bran <[email protected]>

apps/wallet-dashboard/components/Toaster.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import toast, { Toaster as ToasterLib, type ToastType, resolveValue } from 'react-hot-toast';
+import { Snackbar, SnackbarType } from '@iota/apps-ui-kit';
+
+export type ToasterProps = {
+    bottomNavEnabled?: boolean;
+};
+
+export function Toaster() {
+    function getSnackbarType(type: ToastType): SnackbarType {
+        switch (type) {
+            case 'success':
+                return SnackbarType.Default;
+            case 'error':
+                return SnackbarType.Error;
+            case 'loading':
+                return SnackbarType.Default;
+            default:
+                return SnackbarType.Default;
+        }
+    }
+
+    return (
+        <ToasterLib position="bottom-right" containerClassName="!z-[999999] !right-8">
+            {(t) => (
+                <div style={{ opacity: t.visible ? 1 : 0 }}>
+                    <Snackbar
+                        onClose={() => toast.dismiss(t.id)}
+                        text={resolveValue(t.message, t)}
+                        type={getSnackbarType(t.type)}
+                        showClose
+                        duration={t.duration}
+                    />
+                </div>
+            )}
+        </ToasterLib>
+    );
+}

apps/wallet-dashboard/components/index.ts

@@ -23,3 +23,4 @@ export * from './ExplorerLink';
 export * from './Dialogs';
 export * from './ValidatorStakingData';
 export * from './tiles';
+export * from './Toaster';

apps/wallet-dashboard/providers/AppProviders.tsx

@@ -3,15 +3,14 @@
 
 'use client';
 
-import { PopupProvider } from '@/components';
+import { PopupProvider, Toaster } from '@/components';
 import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import { IotaClientProvider, lightTheme, darkTheme, WalletProvider } from '@iota/dapp-kit';
 import { getAllNetworks, getDefaultNetwork } from '@iota/iota-sdk/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useState } from 'react';
 import { growthbook } from '@/lib/utils';
 import { Popup } from '@/components/Popup';
-import { Toaster } from 'react-hot-toast';
 import { ThemeProvider } from '@iota/core';
 
 growthbook.init();
@@ -40,11 +39,7 @@ export function AppProviders({ children }: React.PropsWithChildren) {
                         <ThemeProvider appId="dashboard">
                             <PopupProvider>
                                 {children}
-                                <Toaster
-                                    containerStyle={{
-                                        zIndex: 99999,
-                                    }}
-                                />
+                                <Toaster />
                                 <Popup />
                             </PopupProvider>
                         </ThemeProvider>