From 3eda37f0dea7c7df260078774b59b04c0b890787 Mon Sep 17 00:00:00 2001
From: tuliomir <tulio.mir@gmail.com>
Date: Mon, 16 Dec 2024 21:01:51 -0300
Subject: [PATCH] fix: error handling on nav search

---
 src/components/Navigation.js     | 333 ++++++++++++++++---------------
 src/components/NewHathorAlert.js |   6 +-
 src/newUi.scss                   |   6 +
 3 files changed, 182 insertions(+), 163 deletions(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 25058151..571de402 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -29,6 +29,7 @@ import {
   REACT_APP_NETWORK,
 } from '../constants';
 import { toggleTheme } from '../actions';
+import NewHathorAlert from './NewHathorAlert';
 
 function Navigation() {
   const history = useHistory();
@@ -86,56 +87,109 @@ function Navigation() {
     const hathorNetwork = `Hathor ${REACT_APP_NETWORK}`;
 
     return (
-      <nav>
-        <div className="hide-logo-container-mobile">
-          <div className="newLogo-explorer-container">
-            <div className="d-flex flex-column align-items-center">
-              <Link className="navbar-brand" to="/" href="/">
-                <NewLogo
-                  className={`newLogo ${theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'}`}
-                />
-              </Link>
+      <>
+        <nav>
+          <div className="hide-logo-container-mobile">
+            <div className="newLogo-explorer-container">
+              <div className="d-flex flex-column align-items-center">
+                <Link className="navbar-brand" to="/" href="/">
+                  <NewLogo
+                    className={`newLogo ${
+                      theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'
+                    }`}
+                  />
+                </Link>
+              </div>
+              {!showSearchInput ? (
+                <button
+                  className="navbar-toggler"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#navbarSupportedContent"
+                  aria-controls="navbarSupportedContent"
+                  aria-expanded="false"
+                  aria-label="Toggle navigation"
+                >
+                  <span>EXPLORER</span>
+                </button>
+              ) : (
+                ''
+              )}
+            </div>
+            <div className="hide-network-mobile">
+              <GlobeNetwork
+                className={`${
+                  theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'
+                } theme-network-logo`}
+              />
+              <span className="nav-title">{hathorNetwork}</span>
             </div>
-            {!showSearchInput ? (
-              <button
-                className="navbar-toggler"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent"
-                aria-expanded="false"
-                aria-label="Toggle navigation"
-              >
-                <span>EXPLORER</span>
-              </button>
-            ) : (
-              ''
-            )}
-          </div>
-          <div className="hide-network-mobile">
-            <GlobeNetwork
-              className={`${
-                theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'
-              } theme-network-logo`}
-            />
-            <span className="nav-title">{hathorNetwork}</span>
           </div>
-        </div>
-        <div className="nav-tabs-container hide-tabs">
-          <ul className="navbar-nav me-auto">
-            <li className="nav-item">
-              <NavLink
-                to="/"
-                exact
-                className="nav-link"
-                activeClassName="active"
-                activeStyle={{ fontWeight: 'bold' }}
-              >
-                Home
-              </NavLink>
-            </li>
-            {showTokensTab && (
-              <ul className="nav-item dropdown">
+          <div className="nav-tabs-container hide-tabs">
+            <ul className="navbar-nav me-auto">
+              <li className="nav-item">
+                <NavLink
+                  to="/"
+                  exact
+                  className="nav-link"
+                  activeClassName="active"
+                  activeStyle={{ fontWeight: 'bold' }}
+                >
+                  Home
+                </NavLink>
+              </li>
+              {showTokensTab && (
+                <ul className="nav-item dropdown">
+                  <span
+                    className="nav-link dropdown-toggle custom-dropdown-toggle"
+                    id="navbarDropdown"
+                    role="button"
+                    data-bs-toggle="dropdown"
+                    aria-haspopup="true"
+                    aria-expanded="false"
+                  >
+                    Tokens
+                    <ArrorDownNavItem className="dropdown-icon" />
+                  </span>
+                  <div className="dropdown-menu" aria-labelledby="navbarDropdown">
+                    <li>
+                      <ConditionalNavigation
+                        to="/tokens"
+                        label="Token list"
+                        featureToggle={`${UNLEASH_TOKENS_BASE_FEATURE_FLAG}.rollout`}
+                      />
+                      <ConditionalNavigation
+                        to="/token_balances"
+                        label="Token balances"
+                        featureToggle={`${UNLEASH_TOKEN_BALANCES_FEATURE_FLAG}.rollout`}
+                      />
+                    </li>
+                  </div>
+                </ul>
+              )}
+              <li className="nav-item">
+                <NavLink
+                  to="/network"
+                  exact
+                  className="nav-link"
+                  activeClassName="active"
+                  activeStyle={{ fontWeight: 'bold' }}
+                >
+                  Network
+                </NavLink>
+              </li>
+              <li className="nav-item">
+                <NavLink
+                  to="/statistics"
+                  exact
+                  className="nav-link"
+                  activeClassName="active"
+                  activeStyle={{ fontWeight: 'bold' }}
+                >
+                  Statistics
+                </NavLink>
+              </li>
+              <li className="nav-item dropdown">
                 <span
                   className="nav-link dropdown-toggle custom-dropdown-toggle"
                   id="navbarDropdown"
@@ -144,132 +198,89 @@ function Navigation() {
                   aria-haspopup="true"
                   aria-expanded="false"
                 >
-                  Tokens
+                  Tools
                   <ArrorDownNavItem className="dropdown-icon" />
                 </span>
                 <div className="dropdown-menu" aria-labelledby="navbarDropdown">
-                  <li>
-                    <ConditionalNavigation
-                      to="/tokens"
-                      label="Token list"
-                      featureToggle={`${UNLEASH_TOKENS_BASE_FEATURE_FLAG}.rollout`}
-                    />
-                    <ConditionalNavigation
-                      to="/token_balances"
-                      label="Token balances"
-                      featureToggle={`${UNLEASH_TOKEN_BALANCES_FEATURE_FLAG}.rollout`}
-                    />
-                  </li>
+                  <NavLink to="/decode-tx/" exact className="nav-link">
+                    Decode Tx
+                  </NavLink>
+                  <NavLink to="/push-tx/" exact className="nav-link">
+                    Push Tx
+                  </NavLink>
+                  <NavLink to="/dag/" exact className="nav-link">
+                    DAG
+                  </NavLink>
+                  <NavLink to="/features/" exact className="nav-link">
+                    Features
+                  </NavLink>
                 </div>
-              </ul>
-            )}
-            <li className="nav-item">
-              <NavLink
-                to="/network"
-                exact
-                className="nav-link"
-                activeClassName="active"
-                activeStyle={{ fontWeight: 'bold' }}
-              >
-                Network
-              </NavLink>
-            </li>
-            <li className="nav-item">
-              <NavLink
-                to="/statistics"
-                exact
-                className="nav-link"
-                activeClassName="active"
-                activeStyle={{ fontWeight: 'bold' }}
-              >
-                Statistics
-              </NavLink>
-            </li>
-            <li className="nav-item dropdown">
-              <span
-                className="nav-link dropdown-toggle custom-dropdown-toggle"
-                id="navbarDropdown"
-                role="button"
-                data-bs-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-              >
-                Tools
-                <ArrorDownNavItem className="dropdown-icon" />
-              </span>
-              <div className="dropdown-menu" aria-labelledby="navbarDropdown">
-                <NavLink to="/decode-tx/" exact className="nav-link">
-                  Decode Tx
-                </NavLink>
-                <NavLink to="/push-tx/" exact className="nav-link">
-                  Push Tx
-                </NavLink>
-                <NavLink to="/dag/" exact className="nav-link">
-                  DAG
-                </NavLink>
-                <NavLink to="/features/" exact className="nav-link">
-                  Features
-                </NavLink>
+              </li>
+            </ul>
+            <div className="d-flex flex-row align-items-center ms-auto navigation-search">
+              <div className="d-flex flex-row align-items-center">
+                <input
+                  className="form-control me-2 bg-dark text-light navigation-search-input"
+                  type="search"
+                  placeholder={`Search here`}
+                  aria-label="Search"
+                  ref={txSearchRef}
+                  onKeyUp={handleKeyUp}
+                />
               </div>
-            </li>
-          </ul>
-          <div className="d-flex flex-row align-items-center ms-auto navigation-search">
-            <div className="d-flex flex-row align-items-center">
+            </div>
+          </div>
+          <div className="network-container hide-tabs">
+            <img
+              src={theme === 'dark' ? sun : moon}
+              alt="themeColorButton"
+              className="theme-color-btn"
+              onClick={() => dispatch(toggleTheme())}
+              role="button"
+            />
+            <div className="network-icon-container">
+              <GlobeNetwork
+                className={`${theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'}`}
+              />
+              <span className="nav-title">{hathorNetwork}</span>
+            </div>
+          </div>
+          <div className="mobile-tabs">
+            {showSearchInput ? (
               <input
-                className="form-control me-2 bg-dark text-light navigation-search-input"
                 type="search"
-                placeholder={`Search here`}
+                className={`form-control me-2 bg-dark text-light mobile-search-input ${
+                  showSearchInput ? 'expanded' : ''
+                }`}
+                placeholder="Search..."
                 aria-label="Search"
                 ref={txSearchRef}
                 onKeyUp={handleKeyUp}
+                onBlur={() => setShowSearchInput(false)}
+                autoFocus
               />
-            </div>
-          </div>
-        </div>
-        <div className="network-container hide-tabs">
-          <img
-            src={theme === 'dark' ? sun : moon}
-            alt="themeColorButton"
-            className="theme-color-btn"
-            onClick={() => dispatch(toggleTheme())}
-            role="button"
-          />
-          <div className="network-icon-container">
-            <GlobeNetwork
-              className={`${theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'}`}
-            />
-            <span className="nav-title">{hathorNetwork}</span>
-          </div>
-        </div>
-        <div className="mobile-tabs">
-          {showSearchInput ? (
-            <input
-              type="search"
-              className={`form-control me-2 bg-dark text-light mobile-search-input ${
-                showSearchInput ? 'expanded' : ''
-              }`}
-              placeholder="Search..."
-              aria-label="Search"
-              ref={txSearchRef}
-              onKeyUp={handleKeyUp}
-              onBlur={() => setShowSearchInput(false)}
-              autoFocus
-            />
-          ) : (
-            <SearchIcon
+            ) : (
+              <SearchIcon
+                fill={theme === 'dark' ? 'white' : 'black'}
+                onClick={toggleSearchInput}
+                className="mobile-search-icon"
+              />
+            )}
+            <MenuIcon
               fill={theme === 'dark' ? 'white' : 'black'}
-              onClick={toggleSearchInput}
-              className="mobile-search-icon"
+              onClick={showSidebarHandler}
+              className="mobile-sidebar-icon"
             />
-          )}
-          <MenuIcon
-            fill={theme === 'dark' ? 'white' : 'black'}
-            onClick={showSidebarHandler}
-            className="mobile-sidebar-icon"
-          />
-        </div>
-        <Sidebar close={() => setShowSidebar(false)} open={showSidebar} />
-      </nav>
+          </div>
+          <Sidebar close={() => setShowSidebar(false)} open={showSidebar} />
+        </nav>
+        <NewHathorAlert
+          ref={alertErrorRef}
+          text="Invalid hash format or address"
+          type="error"
+          fixedPosition
+        />
+      </>
     );
   };
 
diff --git a/src/components/NewHathorAlert.js b/src/components/NewHathorAlert.js
index 4761f5a5..a22d2276 100644
--- a/src/components/NewHathorAlert.js
+++ b/src/components/NewHathorAlert.js
@@ -15,6 +15,7 @@ import { ReactComponent as SuccessIcon } from '../assets/images/success-icon.svg
  * @param {Object} props - Component properties.
  * @param {string} props.type - Defines the alert type for styling (e.g., "success", "error").
  * @param {string} props.text - The message text displayed in the alert.
+ * @param {boolean} [props.fixedPosition=false] - If true, the alert will be fixed at the bottom right of the screen
  * @param {React.Ref} ref - A reference to call the `show` method from parent components.
  *
  * @example:
@@ -24,7 +25,7 @@ import { ReactComponent as SuccessIcon } from '../assets/images/success-icon.svg
  * alertRef.current.show(2000); // Show the alert for 2 seconds
  * ```
  */
-const NewHathorAlert = forwardRef(({ type, text, showAlert }, ref) => {
+const NewHathorAlert = forwardRef(({ type, text, showAlert, fixedPosition }, ref) => {
   const alertDiv = useRef(null);
 
   /**
@@ -56,10 +57,11 @@ const NewHathorAlert = forwardRef(({ type, text, showAlert }, ref) => {
     show,
   }));
 
+  const fixedPositionClass = fixedPosition ? 'fixed-position' : '';
   return (
     <div
       ref={alertDiv}
-      className={`new-hathor-alert alert alert-${type} alert-dismissible fade`}
+      className={`new-hathor-alert alert alert-${type} alert-dismissible fade ${fixedPositionClass}`}
       role="alert"
       style={{ display: 'flex', flexDirection: 'row' }}
     >
diff --git a/src/newUi.scss b/src/newUi.scss
index 38bdacad..f9814539 100644
--- a/src/newUi.scss
+++ b/src/newUi.scss
@@ -932,6 +932,12 @@ nav {
   justify-content: space-between;
   z-index: 9999;
   margin: 0;
+
+  &.fixed-position {
+    position: fixed !important;
+    right: 2rem;
+    bottom: 2rem;
+  }
 }
 
 .alert-success-container {