feat: Review Errors menu option (#1440)

- Removed floating error button - New "Review Errors" option in Hamburger Menu when new errors are detected. ![image](https://github.com/user-attachments/assets/85f4b167-d307-496d-9384-9a6841bb06e9) ![image](https://github.com/user-attachments/assets/98f0ec3d-71b4-4e4c-9646-4e8e57b39df1)
FuelLabs · Aug 29, 2024 · dc9b452 · dc9b452
1 parent d5c61de
commit dc9b452
Show file tree

Hide file tree

Showing 14 changed files with 194 additions and 219 deletions.
diff --git a/.changeset/brown-pianos-sit.md b/.changeset/brown-pianos-sit.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+- New "Review Errors" option in Hamburger Menu when new errors are detected.
diff --git a/.changeset/dull-mugs-hunt.md b/.changeset/dull-mugs-hunt.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+- Removed Error Floating Button
diff --git a/packages/app/playwright/e2e/ReportError.test.ts b/packages/app/playwright/e2e/ReportError.test.ts
@@ -1,13 +1,7 @@
 import type { Browser, BrowserContext, Page } from '@playwright/test';
 import test, { chromium, expect } from '@playwright/test';
 
-import {
-  getButtonByText,
-  getByAriaLabel,
-  hasText,
-  reload,
-  visit,
-} from '../commons';
+import { getByAriaLabel, hasText, reload, visit } from '../commons';
 import { mockData } from '../mocks';
 
 test.describe('ReportError', () => {
@@ -51,7 +45,7 @@ test.describe('ReportError', () => {
     expect(errorsAfterReporting.length).toBe(0);
   });
 
-  test('should show floating error button when there is a error in the database', async () => {
+  test('should show Review Error in menu when there is a error in the database', async () => {
     await visit(page, '/');
     await page.evaluate(async () => {
       await window.fuelDB.errors.clear();
@@ -73,10 +67,8 @@ test.describe('ReportError', () => {
     });
 
     await reload(page);
-    const floatingButton = await page.waitForSelector(
-      '[data-testid="ErrorFloatingButton"]',
-      { state: 'visible' }
-    );
+    await getByAriaLabel(page, 'Menu').click();
+    const floatingButton = page.locator(`[data-key="hasErrors"]`);
     expect(floatingButton.isVisible).toBeTruthy();
   });
 
@@ -101,11 +93,8 @@ test.describe('ReportError', () => {
       });
     });
     await reload(page);
-    (
-      await page.waitForSelector('[data-testid="ErrorFloatingButton"]', {
-        state: 'visible',
-      })
-    ).click();
+    await getByAriaLabel(page, 'Menu').click();
+    page.locator(`[data-key="hasErrors"]`).click();
     await hasText(page, /Unexpected error/i);
 
     // report error
@@ -136,11 +125,8 @@ test.describe('ReportError', () => {
       });
     });
     await reload(page);
-    (
-      await page.waitForSelector('[data-testid="ErrorFloatingButton"]', {
-        state: 'visible',
-      })
-    ).click();
+    await getByAriaLabel(page, 'Menu').click();
+    page.locator(`[data-key="hasErrors"]`).click();
     await hasText(page, /Unexpected error/i);
 
     // report error
@@ -174,11 +160,8 @@ test.describe('ReportError', () => {
       });
     });
     await reload(page);
-    (
-      await page.waitForSelector('[data-testid="ErrorFloatingButton"]', {
-        state: 'visible',
-      })
-    ).click();
+    await getByAriaLabel(page, 'Menu').click();
+    page.locator(`[data-key="hasErrors"]`).click();
     await hasText(page, /Unexpected error/i);
 
     // report error
@@ -195,11 +178,8 @@ test.describe('ReportError', () => {
       console.error(new Error('Test Error'));
     });
     await reload(page);
-    (
-      await page.waitForSelector('[data-testid="ErrorFloatingButton"]', {
-        state: 'visible',
-      })
-    ).click();
+    await getByAriaLabel(page, 'Menu').click();
+    page.locator(`[data-key="hasErrors"]`).click();
     await hasText(page, /Unexpected error/i);
 
     const errorsAfterReporting = await getPageErrors(page);
@@ -242,11 +222,8 @@ test.describe('ReportError', () => {
       });
     });
     await reload(page);
-    (
-      await page.waitForSelector('[data-testid="ErrorFloatingButton"]', {
-        state: 'visible',
-      })
-    ).click();
+    await getByAriaLabel(page, 'Menu').click();
+    page.locator(`[data-key="hasErrors"]`).click();
     await hasText(page, /Unexpected error/i);
     await reload(page);
     const errorsAfterReporting = await getPageErrors(page);

diff --git a/packages/app/src/systems/Core/components/Layout/TopBar.tsx b/packages/app/src/systems/Core/components/Layout/TopBar.tsx
@@ -10,6 +10,7 @@ import { NetworkDropdown } from '~/systems/Network/components';
 import { useNetworks } from '~/systems/Network/hooks';
 import { useOverlay } from '~/systems/Overlay';
 
+import { useReportError } from '~/systems/Error';
 import { useLayoutContext } from './Layout';
 
 export enum TopBarType {
@@ -32,6 +33,7 @@ function InternalTopBar({ onBack }: TopBarProps) {
   const overlay = useOverlay();
   const { isLoading, title, isHome } = useLayoutContext();
   const { selectedNetwork, handlers } = useNetworks();
+  const { hasErrorsToReport } = useReportError();
 
   return (
     <Box.Flex as="nav" css={styles.root}>
@@ -61,7 +63,8 @@ function InternalTopBar({ onBack }: TopBarProps) {
           </>
         )}
       </Box.Flex>
-      <Box.Stack direction="row" gap="$2">
+      <Box.Stack direction="row" gap="$2" css={styles.menuContainer}>
+        {hasErrorsToReport && <Text css={styles.badge}>●</Text>}
         <IconButton
           iconSize={20}
           icon={<Icon icon="Menu2" />}
@@ -127,6 +130,17 @@ const styles = {
     minHeight: '50px',
     transition: 'none',
   }),
+  menuContainer: cssObj({
+    position: 'relative',
+  }),
+  badge: cssObj({
+    position: 'absolute',
+    top: -6,
+    right: -2,
+    fontSize: 8,
+    color: '$intentsError10 !important',
+    transform: 'translate(25%, -25%)',
+  }),
   topbarIcon: cssObj({
     px: '$0 !important',
     color: '$intentsBase8 !important',

diff --git a/packages/app/src/systems/Error/components/ErrorFloatingButton/ErrorFloatingButton.tsx b/packages/app/src/systems/Error/components/ErrorFloatingButton/ErrorFloatingButton.tsx
diff --git a/packages/app/src/systems/Error/components/ErrorFloatingButton/index.ts b/packages/app/src/systems/Error/components/ErrorFloatingButton/index.ts
diff --git a/packages/app/src/systems/Error/components/index.tsx b/packages/app/src/systems/Error/components/index.tsx
@@ -1,3 +1,2 @@
 export * from './Providers';
 export * from './ThrowError';
-export * from './ErrorFloatingButton';
diff --git a/packages/app/src/systems/Error/hooks/useReportError.tsx b/packages/app/src/systems/Error/hooks/useReportError.tsx
@@ -41,7 +41,7 @@ export function useReportError() {
   };
 
   return {
-    hasErrorsToReport,
+    hasErrorsToReport: !!hasErrorsToReport || !!errors.length,
     isLoadingSendOnce,
     errors,
     handlers: {

diff --git a/packages/app/src/systems/Sidebar/components/Menu/Menu.stories.tsx b/packages/app/src/systems/Sidebar/components/Menu/Menu.stories.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@fuel-ui/react';
 
-import type { MenuItemObj, MenuProps } from './Menu';
+import type { MenuItemObj, MenuProps } from './types';
 import { Menu } from './Menu';
 
 export default {

diff --git a/packages/app/src/systems/Sidebar/components/Menu/Menu.tsx b/packages/app/src/systems/Sidebar/components/Menu/Menu.tsx
@@ -1,27 +1,12 @@
 import { cssObj } from '@fuel-ui/css';
-import type { Icons } from '@fuel-ui/react';
-import { Box, Icon, Menu as RootMenu } from '@fuel-ui/react';
+import { Badge, Box, Icon, Menu as RootMenu, Text } from '@fuel-ui/react';
 import { motion } from 'framer-motion';
 import type { Key } from 'react';
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import { useMatch, useNavigate, useResolvedPath } from 'react-router-dom';
 import { store } from '~/store';
 import { coreStyles } from '~/systems/Core/styles';
-
-export type MenuItemObj = {
-  key: string;
-  icon: Icons;
-  label: string;
-  path?: string;
-  ahref?: string;
-  submenu?: MenuItemObj[];
-  onPress?: () => void;
-};
-
-type MenuItemContentProps = {
-  item: MenuItemObj;
-  isOpened?: boolean;
-};
+import type { MenuItemContentProps, MenuItemObj, MenuProps } from './types';
 
 function commonActions(
   item: MenuItemObj,
@@ -63,6 +48,7 @@ function MenuItemContent({ item, isOpened }: MenuItemContentProps) {
 
   return (
     <Box css={styles.routeContent}>
+      {item.badge && <Text css={styles.badge}>●</Text>}
       <Box.Flex
         css={styles.route}
         data-active={Boolean(match && item.path)}
@@ -93,11 +79,7 @@ function MenuItemContent({ item, isOpened }: MenuItemContentProps) {
   );
 }
 
-export type MenuProps = {
-  items: MenuItemObj[];
-};
-
-export function Menu({ items }: MenuProps) {
+function _Menu({ items }: MenuProps) {
   const [opened, setOpened] = useState<string | null>(null);
   const navigate = useNavigate();
 
@@ -134,6 +116,8 @@ export function Menu({ items }: MenuProps) {
   );
 }
 
+export const Menu = memo(_Menu);
+
 const styles = {
   root: cssObj({
     ...coreStyles.scrollable('$intentsBase2'),
@@ -186,6 +170,7 @@ const styles = {
   }),
   routeContent: cssObj({
     flex: 1,
+    position: 'relative',
   }),
   submenu: cssObj({
     position: 'relative',
@@ -229,4 +214,12 @@ const styles = {
       transform: 'translateY(-50%)',
     },
   }),
+  badge: cssObj({
+    position: 'absolute',
+    top: 2,
+    left: 2,
+    fontSize: 8,
+    color: '$intentsError10 !important',
+    transform: 'translate(25%, -25%)',
+  }),
 };
diff --git a/packages/app/src/systems/Sidebar/components/Menu/types.ts b/packages/app/src/systems/Sidebar/components/Menu/types.ts
@@ -0,0 +1,21 @@
+import type { Icons } from '@fuel-ui/react';
+
+export type MenuItemObj = {
+  key: string;
+  icon: Icons;
+  label: string;
+  path?: string;
+  ahref?: string;
+  submenu?: MenuItemObj[];
+  onPress?: () => void;
+  badge?: boolean;
+};
+
+export type MenuItemContentProps = {
+  item: MenuItemObj;
+  isOpened?: boolean;
+};
+
+export type MenuProps = {
+  items: MenuItemObj[];
+};
diff --git a/packages/app/src/systems/Sidebar/components/Sidebar/Sidebar.tsx b/packages/app/src/systems/Sidebar/components/Sidebar/Sidebar.tsx
@@ -1,15 +1,22 @@
 import { cssObj } from '@fuel-ui/css';
 import { Box, Drawer, Icon, IconButton, Text } from '@fuel-ui/react';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { APP_VERSION } from '~/config';
 import { useOverlay } from '~/systems/Overlay';
 
+import { useReportError } from '~/systems/Error';
 import { Menu } from '..';
 import { sidebarItems } from '../../constants';
 import { ThemeToggler } from '../ThemeToggler';
 
 function SidebarContent() {
   const overlay = useOverlay();
+  const { hasErrorsToReport } = useReportError();
+
+  const menuItems = useMemo(
+    () => sidebarItems(hasErrorsToReport),
+    [hasErrorsToReport]
+  );
 
   return (
     <>
@@ -25,7 +32,7 @@ function SidebarContent() {
           onPress={overlay.close}
         />
       </Box.Flex>
-      <Menu items={sidebarItems()} />
+      <Menu items={menuItems} />
       <Box css={styles.version}>
         <Text fontSize="xs" color="intentsBase8">
           Version: {APP_VERSION}{' '}