chore(wallet): Proper Expanded View

apps/core/src/components/toaster/Toaster.tsx

@@ -1,13 +1,15 @@
 // Copyright (c) 2025 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
 import toast, { Toaster as ToasterLib, type ToastType, resolveValue, Toast } from 'react-hot-toast';
 import { Snackbar, SnackbarType } from '@iota/apps-ui-kit';
 import cl from 'clsx';
 
 export type ToasterProps = {
     bottomNavEnabled?: boolean;
     containerClassName?: string;
+    containerStyle?: React.CSSProperties;
     snackbarWrapClassName?: string;
 };
 
@@ -31,6 +33,7 @@ export function Toaster(props: ToasterProps) {
         <ToasterLib
             position="bottom-right"
             containerClassName={cl('!z-[9999999] toast-layer', props.containerClassName)}
+            containerStyle={props.containerStyle}
         >
             {(t) => (
                 <div style={{ opacity: t.visible ? 1 : 0 }} className={props.snackbarWrapClassName}>

apps/evm-bridge/tests/helpers/wallet.ts

@@ -39,7 +39,7 @@ export async function importL1WalletFromMnemonic(
     }
 
     // We need to switch the network to ALPHANET (custom RPC) before requesting
-    await page.getByLabel(/Open settings menu/).click();
+    await page.getByTestId('network-button').click();
     await page.getByText(/Network/).click();
     await page.getByText(/Custom RPC/).click();
     await page.getByPlaceholder(WALLET_CUSTOMRPC_PLACEHOLDER).fill(CONFIG.L1.rpcUrl);

apps/names/tests/utils.ts

@@ -69,7 +69,7 @@ export async function createWallet(page: Page) {
     await page.getByText('I saved my mnemonic').click();
     await page.getByRole('button', { name: 'Open Wallet' }).click();
 
-    await page.getByLabel('Open settings menu').click();
+    await page.getByTestId('network-button').click();
     await page.getByText('Network', { exact: true }).click();
     await page.getByText('Custom RPC').click();
     const networkId = CONFIG.network;

apps/wallet/src/ui/app/components/Overlay.tsx

@@ -50,29 +50,36 @@ export function Overlay({
             navigate(-1);
         }
     }, [onBack, navigate]);
-    return showModal ? (
+
+    if (!showModal) return null;
+
+    const header = title ? (
+        <div className="relative w-full">
+            <Header
+                onBack={showBackButton ? handleBack : undefined}
+                title={title}
+                onClose={!hideCloseIcon ? closeModal : undefined}
+                titleCentered={titleCentered}
+                testId="overlay-title"
+            />
+            {headerAction && hideCloseIcon && (
+                <div className="absolute right-4 top-[-4.5px] translate-y-1/2">{headerAction}</div>
+            )}
+        </div>
+    ) : null;
+
+    const content = (
+        <div className="flex w-full flex-1 flex-col overflow-y-auto bg-iota-neutral-100 p-md dark:bg-iota-neutral-6">
+            {children}
+        </div>
+    );
+
+    return (
         <Portal containerId="overlay-portal-container">
             <div className="absolute inset-0 z-[9999] flex flex-col flex-nowrap items-center backdrop-blur-[20px]">
-                {title && (
-                    <div className="relative w-full">
-                        <Header
-                            onBack={showBackButton ? handleBack : undefined}
-                            title={title}
-                            onClose={!hideCloseIcon ? closeModal : undefined}
-                            titleCentered={titleCentered}
-                            testId="overlay-title"
-                        />
-                        {headerAction && hideCloseIcon && (
-                            <div className="absolute right-4 top-[-4.5px] translate-y-1/2">
-                                {headerAction}
-                            </div>
-                        )}
-                    </div>
-                )}
-                <div className="flex w-full flex-1 flex-col overflow-hidden bg-iota-neutral-100 p-md dark:bg-iota-neutral-6">
-                    {children}
-                </div>
+                {header}
+                {content}
             </div>
         </Portal>
-    ) : null;
+    );
 }

apps/wallet/src/ui/app/components/PageTemplate.tsx

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Header } from '@iota/apps-ui-kit';
-import { useCallback } from 'react';
+import cn from 'clsx';
+import { useCallback, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -13,6 +14,7 @@ interface PageTemplateProps {
     isTitleCentered?: boolean;
     showBackButton?: boolean;
     onBack?: () => void;
+    headerAction?: ReactNode;
 }
 
 export function PageTemplate({
@@ -22,26 +24,53 @@ export function PageTemplate({
     isTitleCentered,
     showBackButton,
     onBack,
+    headerAction,
 }: PageTemplateProps) {
     const navigate = useNavigate();
+    const [isScrolled, setIsScrolled] = useState(false);
+    const scrollRef = useRef<HTMLDivElement>(null);
+
     const handleBack = useCallback(() => {
         if (onBack) {
             onBack();
         } else {
             navigate(-1);
         }
-    }, [navigate]);
+    }, [navigate, onBack]);
+
+    const handleScroll = useCallback(() => {
+        setIsScrolled((scrollRef.current?.scrollTop ?? 0) > 2);
+    }, []);
+
     return (
         <div className="flex h-full w-full flex-col">
             {title && (
-                <Header
-                    titleCentered={isTitleCentered}
-                    title={title}
-                    onBack={showBackButton ? handleBack : undefined}
-                    onClose={onClose}
-                />
+                <div
+                    className={cn(
+                        'relative border-b transition-colors duration-200',
+                        isScrolled
+                            ? 'border-shader-neutral-light-8 dark:border-shader-neutral-dark-8'
+                            : 'border-transparent',
+                    )}
+                >
+                    <Header
+                        titleCentered={isTitleCentered}
+                        title={title}
+                        onBack={showBackButton ? handleBack : undefined}
+                        onClose={onClose}
+                    />
+                    {headerAction && !onClose && (
+                        <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                            {headerAction}
+                        </div>
+                    )}
+                </div>
             )}
-            <div className="w-full flex-1 overflow-y-auto overflow-x-hidden bg-iota-neutral-100 p-md dark:bg-iota-neutral-6">
+            <div
+                ref={scrollRef}
+                onScroll={handleScroll}
+                className="w-full flex-1 overflow-y-auto overflow-x-hidden bg-iota-neutral-100 p-md dark:bg-iota-neutral-6"
+            >
                 {children}
             </div>
         </div>

apps/wallet/src/ui/app/components/menu/content/AutoLockAccounts.tsx

@@ -2,7 +2,8 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Loading, Overlay, AutoLockSelector, zodSchema } from '_components';
+import { Loading, AutoLockSelector, zodSchema } from '_components';
+import { PageTemplate } from '_src/ui/app/components/PageTemplate';
 import {
     autoLockDataToMinutes,
     parseAutoLock,
@@ -47,12 +48,7 @@ export function AutoLockAccounts() {
         );
     }
     return (
-        <Overlay
-            showModal={true}
-            title="Auto Lock Profile"
-            closeOverlay={() => navigate('/tokens')}
-            showBackButton
-        >
+        <PageTemplate title="Auto Lock Profile" showBackButton onClose={() => navigate('/tokens')}>
             <Loading loading={autoLock.isPending}>
                 <Form className="flex h-full flex-col" form={form} onSubmit={handleSave}>
                     <AutoLockSelector disabled={isSubmitting} />
@@ -65,6 +61,6 @@ export function AutoLockAccounts() {
                     />
                 </Form>
             </Loading>
-        </Overlay>
+        </PageTemplate>
     );
 }

apps/wallet/src/ui/app/components/menu/content/ThemeSettings.tsx

@@ -3,9 +3,9 @@
 
 import { RadioButton } from '@iota/apps-ui-kit';
 import { ThemePreference, useTheme } from '@iota/core';
-import { Overlay } from '_components';
-import { useNavigate } from 'react-router-dom';
+import { PageTemplate } from '_src/ui/app/components/PageTemplate';
 import { ampli } from '_src/shared/analytics/ampli';
+import { useNavigate } from 'react-router-dom';
 
 const THEMES_TO_SHOW = [ThemePreference.Light, ThemePreference.Dark, ThemePreference.System];
 
@@ -15,15 +15,14 @@ const THEME_ENTRIES = (Object.entries(ThemePreference) as Array<[string, ThemePr
 
 export function ThemeSettings() {
     const { themePreference, setThemePreference } = useTheme();
-
     const navigate = useNavigate();
 
     function updateThemePreference(value: ThemePreference) {
         setThemePreference(value);
         ampli.changedTheme({ theme: value });
     }
     return (
-        <Overlay showModal title="Theme" closeOverlay={() => navigate('/tokens')} showBackButton>
+        <PageTemplate title="Theme" showBackButton onClose={() => navigate('/tokens')}>
             <div className="flex w-full flex-col">
                 {THEME_ENTRIES.map(([label, value]) => (
                     <div className="px-md" key={value}>
@@ -35,6 +34,6 @@ export function ThemeSettings() {
                     </div>
                 ))}
             </div>
-        </Overlay>
+        </PageTemplate>
     );
 }

apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx

@@ -2,9 +2,9 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useNextMenuUrl, Overlay, VerifyPasswordModal } from '_components';
+import { useNextMenuUrl, VerifyPasswordModal } from '_components';
+import { PageTemplate } from '_src/ui/app/components/PageTemplate';
 import { useAppSelector, formatAutoLock, useAutoLockMinutes, useLogoutMutation } from '_hooks';
-import { FaucetRequestButton } from '_src/ui/app/shared/faucet/FaucetRequestButton';
 import { getNetwork, Network } from '@iota/iota-sdk/client';
 import Browser from 'webextension-polyfill';
 import { Link, useNavigate } from 'react-router-dom';
@@ -126,6 +126,7 @@ export function MenuList() {
             subtitle: networkConfig.name,
             icon: <Globe />,
             onClick: onNetworkClick,
+            hidden: true,
         },
         {
             title: 'Auto Lock Profile',
@@ -173,11 +174,11 @@ export function MenuList() {
     ];
 
     return (
-        <Overlay showModal title="Settings" closeOverlay={() => navigate('/tokens')}>
+        <PageTemplate title="Settings" onClose={() => navigate(-1)}>
             <div className="flex h-full w-full flex-col justify-between">
                 <div className="flex flex-col">
-                    {MENU_ITEMS.filter((item) => !item.hidden).map((item, index) => (
-                        <Card key={index} type={CardType.Default} onClick={item.onClick}>
+                    {MENU_ITEMS.filter((item) => !item.hidden).map((item) => (
+                        <Card key={item.title} type={CardType.Default} onClick={item.onClick}>
                             <CardImage type={ImageType.BgSolid}>
                                 <div className="flex h-10 w-10 items-center justify-center rounded-full  text-iota-neutral-10 dark:text-iota-neutral-92 [&_svg]:h-5 [&_svg]:w-5">
                                     <span className="text-2xl">{item.icon}</span>
@@ -214,7 +215,6 @@ export function MenuList() {
                     />
                 </div>
                 <div className="flex flex-col gap-y-lg">
-                    <FaucetRequestButton />
                     <div className="flex flex-row items-center justify-center gap-x-md">
                         <span className="text-label-sm text-iota-neutral-40 dark:text-iota-neutral-60">
                             IOTA Wallet v{version}
@@ -230,6 +230,6 @@ export function MenuList() {
                     </div>
                 </div>
             </div>
-        </Overlay>
+        </PageTemplate>
     );
 }

apps/wallet/src/ui/app/components/menu/content/index.tsx

@@ -14,7 +14,6 @@ import { useCallback } from 'react';
 import type { MouseEvent } from 'react';
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { AutoLockAccounts } from './AutoLockAccounts';
-import { NetworkSettings } from './NetworkSettings';
 import { MenuList } from './WalletSettingsMenuList';
 import { ThemeSettings } from './ThemeSettings';
 
@@ -43,12 +42,11 @@ export function MenuContent() {
     }
 
     return (
-        <div className="absolute inset-0 z-50 flex flex-col justify-items-stretch overflow-y-auto rounded-t-xl bg-iota-neutral-100 px-2.5 pb-8 dark:bg-iota-neutral-6">
+        <div className="absolute inset-0 z-50 flex flex-col overflow-hidden bg-iota-neutral-100 dark:bg-iota-neutral-6">
             <ErrorBoundary>
                 <MainLocationContext.Provider value={mainLocation}>
                     <Routes location={menuUrl || ''}>
                         <Route path="/" element={<MenuList />} />
-                        <Route path="/network" element={<NetworkSettings />} />
                         <Route path="/auto-lock" element={<AutoLockAccounts />} />
                         <Route path="/theme" element={<ThemeSettings />} />
                         <Route path="*" element={<Navigate to={menuHomeUrl} replace={true} />} />