@digitaldefiance/express-suite-react-components 2.8.5 → 2.9.2

package/src/contexts/I18nProvider.tsx

@@ -0,0 +1,85 @@
+import {
+  GlobalActiveContext,
+  IActiveContext,
+  LanguageRegistry,
+  I18nEngine,
+  CoreLanguageCode,
+} from '@digitaldefiance/i18n-lib';
+import { createContext, FC, ReactNode, useCallback, useContext, useState } from 'react';
+
+export interface I18nProviderProps {
+  children: ReactNode;
+  i18nEngine: I18nEngine;
+  onLanguageChange?: (language: string) => Promise<void>;
+}
+
+export interface I18nContextType {
+  t: (key: string, vars?: Record<string, string | number>, language?: string) => string;
+  tComponent: <TStringKey extends string>(componentId: string, stringKey: TStringKey, vars?: Record<string, string | number>, language?: string) => string;
+  changeLanguage: (language: string) => void;
+  currentLanguage: string;
+}
+
+const I18nContext = createContext<I18nContextType | undefined>(undefined);
+
+export const I18nProvider: FC<I18nProviderProps> = ({
+  children,
+  i18nEngine,
+  onLanguageChange,
+}) => {
+  const context = GlobalActiveContext.getInstance<
+    string,
+    IActiveContext<string>
+  >();
+  const [currentLanguage, setCurrentLanguage] = useState<string>(
+    context.userLanguage
+  );
+
+  const changeLanguage = useCallback(
+    async (language: string) => {
+      const languageDetails = LanguageRegistry.getLanguageByCode(language);
+      if (language && languageDetails) {
+        context.userLanguage = language;
+        i18nEngine.setLanguage(language);
+        localStorage.setItem('language', languageDetails.name);
+        localStorage.setItem('languageCode', language);
+        setCurrentLanguage(language);
+        if (onLanguageChange) {
+          await onLanguageChange(language);
+        }
+      }
+    },
+    [onLanguageChange, i18nEngine, context]
+  );
+
+  const t = useCallback(
+    (key: string, vars?: Record<string, string | number>, language?: string) => {
+      return i18nEngine.t(key, vars, language ?? currentLanguage);
+    },
+    [i18nEngine, currentLanguage]
+  );
+
+  const tComponent = useCallback(
+    <TStringKey extends string>(componentId: string, stringKey: TStringKey, vars?: Record<string, string | number>, language?: string): string => {
+      return i18nEngine.translate(componentId, stringKey, vars, language ?? currentLanguage);
+    },
+    [currentLanguage, i18nEngine]
+  );
+
+  const value = {
+    t,
+    tComponent,
+    changeLanguage,
+    currentLanguage,
+  };
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+};
+
+export const useI18n = () => {
+  const context = useContext(I18nContext);
+  if (context === undefined) {
+    throw new Error('useI18n must be used within an I18nProvider');
+  }
+  return context;
+};

package/src/contexts/MenuContext.tsx

@@ -0,0 +1,310 @@
+// src/app/menuContext.tsx
+import { IRoleDTO, SuiteCoreComponentId } from '@digitaldefiance/suite-core-lib';
+import { SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
+import {
+  AccountCircle,
+  Autorenew as AutorenewIcon,
+  Brightness4,
+  Brightness7,
+  Dashboard as DashboardIcon,
+  Key as KeyIcon,
+  LockOpen as LockOpenIcon,
+  LockReset as LockResetIcon,
+  Login as LoginIcon,
+  ExitToApp as LogoutIcon,
+  PersonAdd as PersonAddIcon,
+  Settings,
+} from '@mui/icons-material';
+import {
+  FC,
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useAuth } from './AuthProvider';
+import { useTheme } from './ThemeProvider';
+import { MenuType, MenuTypes } from '../types/MenuType';
+import { useI18n } from './I18nProvider';
+import { IMenuOption } from '../interfaces/IMenuOption';
+import { IMenuConfig } from '../interfaces/IMenuConfig';
+import { useUserSettings } from '../hooks';
+import { useSuiteConfig } from './SuiteConfigProvider';
+import { createAuthenticatedApiClient } from '../services';
+
+interface MenuProviderProps {
+  children: ReactNode;
+  menuConfigs?: IMenuConfig[];
+  enableBackupCodes?: boolean;
+}
+
+interface MenuContextType {
+  menuOptions: IMenuOption[];
+  getMenuOptions: (
+    menuType: MenuType,
+    includeDividers: boolean,
+  ) => IMenuOption[];
+  registerMenuOption: (option: IMenuOption) => () => void;
+  registerMenuOptions: (options: IMenuOption[]) => () => void;
+  getTopMenus: () => Array<IMenuConfig>;
+}
+
+const MenuContext = createContext<MenuContextType | undefined>(undefined);
+
+export const MenuProvider: FC<MenuProviderProps> = ({ children, menuConfigs = [], enableBackupCodes = true }) => {
+  const { userData: user, isAuthenticated, mnemonic, clearMnemonic, wallet, clearWallet } = useAuth();
+  const { mode: colorMode } = useTheme();
+  const registeredMenuOptions = useRef(new Set<() => void>());
+  const [registeredOptions, setRegisteredOptions] = useState<
+    Map<string, IMenuOption>
+  >(new Map<string, IMenuOption>());
+  const { tComponent } = useI18n();
+  const { baseUrl } = useSuiteConfig();
+  const authenticatedApi = useMemo(() => createAuthenticatedApiClient(baseUrl), [baseUrl]);
+  const { toggleColorMode } = useUserSettings({ authenticatedApi, isAuthenticated });
+
+  const registerMenuOption = useCallback((option: IMenuOption) => {
+    const unregister = () => {
+      setRegisteredOptions((prev) => {
+        const newMap = new Map(prev);
+        newMap.delete(option.id);
+        return newMap;
+      });
+      registeredMenuOptions.current.delete(unregister);
+    };
+
+    setRegisteredOptions((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(option.id, option);
+      return newMap;
+    });
+    registeredMenuOptions.current.add(unregister);
+
+    return unregister;
+  }, []);
+
+  const registerMenuOptions = useCallback(
+    (options: IMenuOption[]) => {
+      const unregisterFunctions = options.map(registerMenuOption);
+      return () => unregisterFunctions.forEach((f) => f());
+    },
+    [registerMenuOption],
+  );
+
+  const menuOptions = useMemo(() => {
+    const isUserRestricted = () => {
+      return user?.roles?.some((role: IRoleDTO) => role.child) ?? false;
+    };
+    let index = 0;
+    const baseOptions: IMenuOption[] = [
+      {
+        id: 'dashboard',
+        label: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Dashboard),
+        icon: <DashboardIcon />,
+        link: '/dashboard',
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.SideMenu],
+        index: index++,
+      },
+      {
+        id: 'user-divider',
+        label: '',
+        divider: true,
+        includeOnMenus: [MenuTypes.SideMenu],
+        index: index++,
+        requiresAuth: false,
+      },
+      {
+        id: 'logout',
+        label: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.LogoutButton),
+        icon: <LogoutIcon />,
+        link: '/logout',
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+      {
+        id: 'login',
+        label: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_LoginButton),
+        icon: <LoginIcon />,
+        link: '/login',
+        requiresAuth: false,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+      {
+        id: 'register',
+        label: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.RegisterButton),
+        icon: <PersonAddIcon />,
+        link: '/register',
+        requiresAuth: false,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+      {
+        id: 'forgot-password',
+        label: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ForgotPassword_Title),
+        icon: <LockOpenIcon />,
+        link: '/forgot-password',
+        requiresAuth: false,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+      {
+        id: 'change-password',
+        label: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ChangePassword),
+        icon: <LockResetIcon />,
+        link: '/change-password',
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+      ...(enableBackupCodes ? [{
+        id: 'backup-code',
+        label: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_Title),
+        icon: <KeyIcon />,
+        link: '/backup-code',
+        requiresAuth: false,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+      {
+        id: 'backup-codes',
+        label: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes),
+        icon: <AutorenewIcon />,
+        link: '/backup-codes',
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      }] : []),
+      {
+        id: 'divider',
+        label: '',
+        divider: true,
+        includeOnMenus: [MenuTypes.SideMenu],
+        index: index++,
+        requiresAuth: false,
+      },
+      {
+        id: 'clear-mnemonic',
+        label: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ClearMnemonic),
+        action: clearMnemonic,
+        icon: <KeyIcon />,
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+        filter: () => !!mnemonic,
+      },
+      {
+        id: 'clear-wallet',
+        label: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ClearWallet),
+        action: clearWallet,
+        icon: <KeyIcon />,
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+        filter: () => !!wallet,
+      },
+      ...(isUserRestricted() ? [] : []),
+      {
+        id: 'color-divider',
+        label: '',
+        divider: true,
+        includeOnMenus: [MenuTypes.SideMenu],
+        index: index++,
+        requiresAuth: undefined,
+      },
+      {
+        id: 'theme-toggle',
+        label:
+          colorMode === 'dark'
+            ? tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ThemeToggle_Light)
+            : tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ThemeToggle_Dark),
+        icon: colorMode === 'dark' ? <Brightness7 /> : <Brightness4 />,
+        includeOnMenus: [MenuTypes.SideMenu],
+        index: index++,
+        requiresAuth: undefined,
+        action: toggleColorMode,
+      },
+      {
+        id: 'user-settings',
+        label: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Settings_Title),
+        icon: <Settings />,
+        link: '/user-settings',
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      }
+    ];
+
+    const allOptions = [...baseOptions, ...registeredOptions.values()];
+    return allOptions.sort((a, b) => a.index - b.index);
+  }, [tComponent, registeredOptions, user?.roles, colorMode, toggleColorMode, clearMnemonic, clearWallet, mnemonic, wallet]);
+
+  const getMenuOptions = useCallback(
+    (menuType: MenuType, includeDividers: boolean) => {
+      const MenuFilter = (o: IMenuOption) => {
+        // Apply the custom filter first
+        let customFilterPasses = true;
+        if (o.filter !== undefined) {
+          customFilterPasses = o.filter(o);
+        }
+        if (!customFilterPasses) return false;
+
+        if (o.divider === true && !includeDividers) return false;
+
+        return (
+          o.includeOnMenus.includes(menuType) &&
+          (o.requiresAuth === undefined || o.requiresAuth === isAuthenticated)
+        );
+      };
+
+      return menuOptions.filter(MenuFilter);
+    },
+    [isAuthenticated, menuOptions],
+  );
+
+  useEffect(() => {
+    if (menuConfigs.length > 0) {
+      return registerMenuOptions(menuConfigs.flatMap(config => config.options));
+    }
+    return undefined;
+  }, [menuConfigs, registerMenuOptions]);
+
+  const getTopMenus = useCallback(() => {
+    const menus: Array<IMenuConfig & { isUserMenu?: boolean }> = [
+      ...menuConfigs.map(config => ({ ...config, isUserMenu: false })),
+      { menuType: MenuTypes.UserMenu, menuIcon: <AccountCircle />, priority: 0, options: [], isUserMenu: true }
+    ];
+    return menus.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  }, [menuConfigs]);
+
+  const contextValue = useMemo(() => {
+    return {
+      menuOptions: menuOptions,
+      getMenuOptions: getMenuOptions,
+      registerMenuOption: registerMenuOption,
+      registerMenuOptions: registerMenuOptions,
+      getTopMenus: getTopMenus,
+    };
+  }, [menuOptions, getMenuOptions, registerMenuOption, registerMenuOptions, getTopMenus]);
+
+  const memoizedChildren = useMemo(() => children, [children]);
+  return (
+    <MenuContext.Provider value={contextValue}>
+      {memoizedChildren}
+    </MenuContext.Provider>
+  );
+};
+
+export const useMenu = (): MenuContextType => {
+  const context = useContext(MenuContext);
+  if (context === undefined) {
+    throw new Error('useMenu must be used within a MenuProvider');
+  }
+  return context;
+};

package/src/contexts/SuiteConfigProvider.tsx

@@ -0,0 +1,93 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+export interface SuiteConfigRoutes {
+  dashboard?: string;
+  login?: string;
+  register?: string;
+  verifyEmail?: string;
+  forgotPassword?: string;
+  resetPassword?: string;
+  settings?: string;
+}
+
+export interface SuiteConfigContextData {
+  /**
+   * Base URL for API calls
+   */
+  baseUrl: string;
+  
+  /**
+   * Application routes for navigation
+   */
+  routes: SuiteConfigRoutes;
+  
+  /**
+   * Available languages for the application
+   */
+  languages: Array<{ code: string; label: string }>;
+  
+  /**
+   * Available timezones
+   */
+  timezones?: string[];
+}
+
+const defaultRoutes: SuiteConfigRoutes = {
+  dashboard: '/dashboard',
+  login: '/login',
+  register: '/register',
+  verifyEmail: '/verify-email',
+  forgotPassword: '/forgot-password',
+  resetPassword: '/reset-password',
+  settings: '/settings',
+};
+
+const defaultLanguages = [
+  { code: 'en-US', label: 'English (US)' },
+  { code: 'en-GB', label: 'English (UK)' },
+  { code: 'es-ES', label: 'Español' },
+  { code: 'fr-FR', label: 'Français' },
+  { code: 'de-DE', label: 'Deutsch' },
+  { code: 'ja', label: '日本語' },
+  { code: 'zh-CN', label: '中文 (简体)' },
+  { code: 'uk', label: 'Українська' },
+];
+
+const SuiteConfigContext = createContext<SuiteConfigContextData | undefined>(undefined);
+
+export interface SuiteConfigProviderProps {
+  children: ReactNode;
+  baseUrl: string;
+  routes?: Partial<SuiteConfigRoutes>;
+  languages?: Array<{ code: string; label: string }>;
+  timezones?: string[];
+}
+
+export const SuiteConfigProvider = ({
+  children,
+  baseUrl,
+  routes = {},
+  languages = defaultLanguages,
+  timezones,
+}: SuiteConfigProviderProps) => {
+  const value: SuiteConfigContextData = {
+    baseUrl,
+    routes: { ...defaultRoutes, ...routes },
+    languages,
+    timezones,
+  };
+
+  return (
+    <SuiteConfigContext.Provider value={value}>
+      {children}
+    </SuiteConfigContext.Provider>
+  );
+};
+
+export const useSuiteConfig = (): SuiteConfigContextData => {
+  const context = useContext(SuiteConfigContext);
+  if (!context) {
+    throw new Error('useSuiteConfig must be used within a SuiteConfigProvider');
+  }
+  return context;
+};

package/src/contexts/ThemeProvider.tsx

@@ -0,0 +1,67 @@
+import { Brightness4, Brightness7 } from '@mui/icons-material';
+import {
+  IconButton,
+  ThemeProvider as MuiThemeProvider,
+  PaletteMode,
+  createTheme,
+  Theme,
+} from '@mui/material';
+import { FC, ReactNode, createContext, useContext, useMemo, useState } from 'react';
+
+export interface ThemeContextType {
+  toggleColorMode: () => void;
+  setColorMode: (mode: PaletteMode) => void;
+  mode: PaletteMode;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within an AppThemeProvider');
+  }
+  return context;
+};
+
+export interface AppThemeProviderProps {
+  children: ReactNode;
+  customTheme?: (mode: PaletteMode) => Theme;
+}
+
+export const AppThemeProvider: FC<AppThemeProviderProps> = ({ children, customTheme }) => {
+  const [mode, setMode] = useState<PaletteMode>('light');
+
+  const colorMode = useMemo(
+    () => ({
+      toggleColorMode: () => {
+        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+      },
+      setColorMode: (newMode: PaletteMode) => {
+        setMode(newMode);
+      },
+      mode,
+    }),
+    [mode]
+  );
+
+  const theme = useMemo(
+    () => (customTheme ? customTheme(mode) : createTheme({ palette: { mode } })),
+    [mode, customTheme]
+  );
+
+  return (
+    <ThemeContext.Provider value={colorMode}>
+      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export const ThemeToggleButton: FC = () => {
+  const { mode, toggleColorMode } = useTheme();
+  return (
+    <IconButton onClick={toggleColorMode} color="inherit">
+      {mode === 'dark' ? <Brightness7 /> : <Brightness4 />}
+    </IconButton>
+  );
+};

package/src/contexts/{index.d.ts → index.ts}

@@ -3,4 +3,3 @@ export * from './MenuContext';
 export * from './I18nProvider';
 export * from './ThemeProvider';
 export * from './SuiteConfigProvider';
-//# sourceMappingURL=index.d.ts.map

package/src/hooks/{index.d.ts → index.ts}

@@ -3,4 +3,3 @@ export * from './useLocalStorage';
 export * from './useBackupCodes';
 export * from './useUserSettings';
 export * from './useEmailVerification';
-//# sourceMappingURL=index.d.ts.map

package/src/hooks/useBackupCodes.ts

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createAuthenticatedApiClient } from '../services';
+import { useSuiteConfig } from '../contexts';
+import { SuiteCoreStringKey, TranslatableSuiteError } from '@digitaldefiance/suite-core-lib';
+
+export interface UseBackupCodesOptions {
+  initialCodeCount?: number | null;
+}
+
+export interface UseBackupCodesResult {
+  backupCodesRemaining: number | null;
+  isLoading: boolean;
+  error: Error | null;
+  generateBackupCodes: (password?: string, mnemonic?: string) => Promise<{
+    message: string;
+    backupCodes: string[];
+  }>;
+  refreshCodeCount: () => Promise<void>;
+}
+
+export const useBackupCodes = (
+  options: UseBackupCodesOptions = {}
+): UseBackupCodesResult => {
+  const { baseUrl } = useSuiteConfig();
+  const [backupCodesRemaining, setBackupCodesRemaining] = useState<number | null>(
+    options.initialCodeCount ?? null
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const requestedOnMountRef = useRef(false);
+  const api = useMemo(() => createAuthenticatedApiClient(baseUrl), [baseUrl]);
+
+  const refreshCodeCount = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await api.get('/user/backup-codes');
+      if (result?.data?.codeCount !== undefined) {
+        setBackupCodesRemaining(result.data.codeCount);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new TranslatableSuiteError(SuiteCoreStringKey.BackupCodes_FailedToFetch));
+      setBackupCodesRemaining(0);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [api]);
+
+  useEffect(() => {
+    if (requestedOnMountRef.current) return;
+    if (backupCodesRemaining !== null) return;
+
+    requestedOnMountRef.current = true;
+    refreshCodeCount();
+  }, [backupCodesRemaining, refreshCodeCount]);
+
+  const generateBackupCodes = async (password?: string, mnemonic?: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await api.post('/user/backup-codes', {
+        ...(password ? { password } : {}),
+        ...(mnemonic ? { mnemonic } : {}),
+      });
+      return {
+        message: result.data.message,
+        backupCodes: result.data.backupCodes,
+      };
+    } catch (err) {
+      const error = err instanceof Error ? err : new TranslatableSuiteError(SuiteCoreStringKey.BackupCodes_FailedToGenerate);
+      setError(error);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    backupCodesRemaining,
+    isLoading,
+    error,
+    generateBackupCodes,
+    refreshCodeCount,
+  };
+};

package/src/hooks/useEmailVerification.ts

@@ -0,0 +1,39 @@
+import { useMemo, useState } from 'react';
+import { createAuthenticatedApiClient } from '../services';
+import { useSuiteConfig } from '../contexts';
+import { getSuiteCoreTranslation, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
+
+export interface UseEmailVerificationResult {
+  isVerifying: boolean;
+  error: Error | null;
+  verifyEmail: (token: string) => Promise<{ success: boolean; message?: string }>;
+}
+
+export const useEmailVerification = (): UseEmailVerificationResult => {
+  const { baseUrl } = useSuiteConfig();
+  const api = useMemo(() => createAuthenticatedApiClient(baseUrl), [baseUrl]);
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const verifyEmail = async (verificationToken: string) => {
+    setIsVerifying(true);
+    setError(null);
+    try {
+      const result = await api.post('/verify-email', { token: verificationToken });
+      return { success: true, message: result.data.message };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.message || getSuiteCoreTranslation(SuiteCoreStringKey.Error_VerificationFailed);
+      const error = new Error(errorMessage);
+      setError(error);
+      return { success: false, message: errorMessage };
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+
+  return {
+    isVerifying,
+    error,
+    verifyEmail,
+  };
+};