feat(wallet): rebrand toasters (#2141)

* feat: use snachbar in toasts * feat: add renderable type to keep message as it was * feat: add duration to toasters --------- Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
iotaledger · Sep 5, 2024 · 1a72993 · 1a72993
1 parent 555c3ab
commit 1a72993
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 32 deletions.
diff --git a/apps/ui-kit/src/lib/components/atoms/snackbar/Snackbar.tsx b/apps/ui-kit/src/lib/components/atoms/snackbar/Snackbar.tsx
@@ -1,18 +1,18 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@iota/ui-icons';
 import { SnackbarType } from './snackbar.enums';
 import { BACKGROUND_COLOR, TEXT_COLOR } from '@/components/atoms/snackbar/snackbar.classes';
 
+type Renderable = JSX.Element | string | null;
 export interface SnackbarProps {
     /**
      * The message to display in the snackbar.
      */
-    text: string;
-
+    text: Renderable;
     /**
      * Type of the snackbar.
      */
@@ -57,7 +57,7 @@ export function Snackbar({
                 BACKGROUND_COLOR[type],
             )}
         >
-            <p className={cx('text-left text-body-md', TEXT_COLOR[type])}>{text}</p>
+            <div className={cx('text-left text-body-md', TEXT_COLOR[type])}>{text}</div>
             {showClose && (
                 <Close
                     className={cx('h-5 w-5 cursor-pointer', TEXT_COLOR[type])}

diff --git a/apps/wallet/src/ui/app/shared/faucet/FaucetRequestButton.tsx b/apps/wallet/src/ui/app/shared/faucet/FaucetRequestButton.tsx
@@ -7,10 +7,10 @@ import { getCustomNetwork } from '_src/shared/api-env';
 import { getNetwork } from '@iota/iota-sdk/client';
 import { FaucetRateLimitError } from '@iota/iota-sdk/faucet';
 import { toast } from 'react-hot-toast';
-import FaucetMessageInfo from './FaucetMessageInfo';
 import { useFaucetMutation } from './useFaucetMutation';
 import { useFaucetRateLimiter } from './useFaucetRateLimiter';
 import { Button, ButtonType } from '@iota/apps-ui-kit';
+import FaucetMessageInfo from './FaucetMessageInfo';
 
 function FaucetRequestButton(): JSX.Element | null {
     const network = useAppSelector(({ app }) => app.network);
@@ -33,11 +33,19 @@ function FaucetRequestButton(): JSX.Element | null {
             type={ButtonType.Secondary}
             disabled={isRateLimited}
             onClick={() => {
-                toast.promise(mutation.mutateAsync(), {
-                    loading: <FaucetMessageInfo loading />,
-                    success: (totalReceived) => <FaucetMessageInfo totalReceived={totalReceived} />,
-                    error: (error) => <FaucetMessageInfo error={error.message} />,
-                });
+                toast.promise(
+                    mutation.mutateAsync(),
+                    {
+                        loading: <FaucetMessageInfo loading />,
+                        success: (totalReceived) => (
+                            <FaucetMessageInfo totalReceived={totalReceived} />
+                        ),
+                        error: (error) => <FaucetMessageInfo error={error.message} />,
+                    },
+                    {
+                        duration: 5000,
+                    },
+                );
             }}
             text={`Request ${networkConfig?.name} Tokens`}
         />

diff --git a/apps/wallet/src/ui/app/shared/toaster/index.tsx b/apps/wallet/src/ui/app/shared/toaster/index.tsx
@@ -6,23 +6,36 @@ import { useMenuIsOpen } from '_components';
 import { useAppSelector } from '_hooks';
 import { getNavIsVisible } from '_redux/slices/app';
 import cl from 'clsx';
-import { Toaster as ToasterLib } from 'react-hot-toast';
+import toast, { Toaster as ToasterLib, type ToastType, resolveValue } from 'react-hot-toast';
 import { useLocation } from 'react-router-dom';
-
 import { Portal } from '../Portal';
+import { Snackbar, SnackbarType } from '@iota/apps-ui-kit';
 
 export type ToasterProps = {
     bottomNavEnabled?: boolean;
 };
-const COMMON_TOAST_CLASSES =
-    '!px-0 !py-1 !text-pBodySmall !font-medium !rounded-2lg !shadow-notification';
+
 export function Toaster({ bottomNavEnabled = false }: ToasterProps) {
     const { pathname } = useLocation();
     const isExtraNavTabsVisible = ['/apps', '/nfts'].includes(pathname);
     const menuVisible = useMenuIsOpen();
     const isBottomNavVisible = useAppSelector(getNavIsVisible);
     const includeBottomNavSpace = !menuVisible && isBottomNavVisible && bottomNavEnabled;
     const includeExtraBottomNavSpace = includeBottomNavSpace && isExtraNavTabsVisible;
+
+    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 (
         <Portal containerId="toaster-portal-container">
             <ToasterLib
@@ -31,22 +44,20 @@ export function Toaster({ bottomNavEnabled = false }: ToasterProps) {
                     includeBottomNavSpace && 'mb-nav-height',
                     includeExtraBottomNavSpace && '!bottom-10',
                 )}
-                position="bottom-center"
-                toastOptions={{
-                    loading: {
-                        icon: null,
-                        className: `${COMMON_TOAST_CLASSES} !bg-steel !text-white`,
-                    },
-                    error: {
-                        icon: null,
-                        className: `${COMMON_TOAST_CLASSES} !border !border-solid !border-issue-dark/20 !bg-issue-light !text-issue-dark`,
-                    },
-                    success: {
-                        icon: null,
-                        className: `${COMMON_TOAST_CLASSES} !border !border-solid !border-success-dark/20 !bg-success-light !text-success-dark`,
-                    },
-                }}
-            />
+                position="bottom-right"
+            >
+                {(t) => (
+                    <div style={{ opacity: t.visible ? 1 : 0 }}>
+                        <Snackbar
+                            onClose={() => toast.dismiss(t.id)}
+                            text={resolveValue(t.message, t)}
+                            type={getSnackbarType(t.type)}
+                            showClose={true}
+                            duration={t.duration}
+                        />
+                    </div>
+                )}
+            </ToasterLib>
         </Portal>
     );
 }
diff --git a/apps/wallet/src/ui/styles/values/sizing.scss b/apps/wallet/src/ui/styles/values/sizing.scss
@@ -1,3 +1,3 @@
-$nav-height: 80px;
+$nav-height: 60px;
 $main-bottom-space: 12px;
 $main-sides-space: 20px;
diff --git a/apps/wallet/tailwind.config.ts b/apps/wallet/tailwind.config.ts
@@ -30,7 +30,7 @@ export default {
                 15: '3.75rem',
                 'popup-height': '680px',
                 'popup-width': '360px',
-                'nav-height': '80px',
+                'nav-height': '60px',
             },
             boxShadow: {
                 'wallet-content': '0px -5px 20px 5px rgba(160, 182, 195, 0.15)',