NavBar

The NavBar component is the header of the app, and serves as the primary navigation bar for the app. It includes key elements such as logo, withdrawal cooldown, web3 status, notifications, network information, and a menu. Additionally, it features a banner for risk warnings and a special mode notice for read-only interactions.

The NavBar component utilizes several hooks related to state management and application context. Here's a breakdown of those hooks and their purposes:

useIsMobile: This custom hook determines if the current viewport matches a mobile device.

useModalOpen and useWithdrawBarModalToggle: They check if the withdrawal bar modal is open and provide a function to toggle its visibility. This functionality is crucial for showing detailed withdrawal information in a modal overlay.

useInjectedAddress: This hook checks if there's an injected address available, which indicates the presence of a web3 provider. It helps determine if the application is in read-only mode and displays a warning message accordingly.

useNewNotification: This hook tracks whether there are new notifications for the user. It's used to trigger popups within the navigation bar to alert the user to new events or updates.

useModalOpen(ApplicationModal.WITHDRAW_BAR): This custom hook checks if the "WITHDRAW_BAR" modal is currently open. It returns a boolean (showWithdrawBarModal) indicating the modal's visibility state.