From 8cabe6fa73f17043dc6d21d25666d6687ef03792 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <pedro@hathor.network>
Date: Mon, 15 Jul 2024 19:27:38 -0300
Subject: [PATCH 1/3] refactor: use import instead of require for axios

---
 src/api/axiosInstance.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/axiosInstance.js b/src/api/axiosInstance.js
index 4652e9f5..be836100 100644
--- a/src/api/axiosInstance.js
+++ b/src/api/axiosInstance.js
@@ -6,7 +6,7 @@
  */
 
 import { EXPLORER_SERVICE_BASE_URL } from '../constants.js';
-const axios = require('axios');
+import axios from 'axios';
 
 const errorHandler = (error) => {
   console.log("ERROR RESPONSE", error);

From 34f4e6faca16868ce0a8f5b98e452e5d18874c1c Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <pedro@hathor.network>
Date: Mon, 15 Jul 2024 19:28:09 -0300
Subject: [PATCH 2/3] fix: useFlag can't be used in class components

---
 src/components/Navigation.js | 140 +++++++++++++++++------------------
 1 file changed, 66 insertions(+), 74 deletions(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 6fddd825..e949fba6 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useRef } from 'react';
 import { NavLink, Link } from 'react-router-dom';
 import logo from '../assets/images/hathor-white-logo.png';
 import HathorAlert from './HathorAlert';
@@ -18,111 +18,103 @@ import {
   UNLEASH_TOKEN_BALANCES_FEATURE_FLAG,
 } from '../constants';
 
-class Navigation extends React.Component {
-  constructor(props) {
-    super(props);
+function Navigation(props) {
+  const alertErrorRef = useRef(null);
+  const txSearchRef = useRef(null);
+  const isTokensBaseEnabled = useFlag(`${UNLEASH_TOKENS_BASE_FEATURE_FLAG}.rollout`);
+  const isTokensBalanceEnabled = useFlag(`${UNLEASH_TOKEN_BALANCES_FEATURE_FLAG}.rollout`);
+  const showTokensTab = isTokensBalanceEnabled || isTokensBaseEnabled;
 
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-    this.search = this.search.bind(this);
-  }
-
-  handleKeyUp(e) {
+  const handleKeyUp = (e) => {
     if (e.key === 'Enter') {
-      this.search();
+      search();
     }
   }
 
-  search() {
-    const text = this.refs.txSearch.value;
+  const search = () => {
+    const text = txSearchRef.current.value;
 
     if (text) {
       const regex = /[A-Fa-f\d]{64}/g;
       if (regex.test(text)) {
         // It's a valid hash
-        this.props.history.push(`/transaction/${text}`);
+        props.history.push(`/transaction/${text}`);
       } else {
         const network = hathorLib.config.getNetwork();
         const addressObj = new hathorLib.Address(text, { network });
         if (addressObj.isValid()) {
           // It's a valid address
-          this.props.history.push(`/address/${text}`);
+          props.history.push(`/address/${text}`);
         } else {
-          this.showError();
+          showError();
         }
       }
     }
   }
 
-  showError() {
-    this.refs.alertError.show(3000);
+  const showError = () => {
+    alertErrorRef.current.show(3000);
   }
 
-  showTokensTab() {
-    return useFlag(`${UNLEASH_TOKENS_BASE_FEATURE_FLAG}.rollout`)
-      || useFlag(`${UNLEASH_TOKEN_BALANCES_FEATURE_FLAG}.rollout`);
-  }
-
-  render() {
-    return (
-      <div className="main-nav">
-        <nav className="navbar navbar-expand-lg navbar-dark pl-3 pl-lg-0">
-          <div className="d-flex flex-column align-items-center">
-            <Link className="navbar-brand" to="/" href="/">
-              <img src={logo} alt="" />
-            </Link>
-          </div>
-          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span className="navbar-toggler-icon" />
-          </button>
-          <div className="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul className="navbar-nav mr-auto">
-              <li className="nav-item">
-                <NavLink to="/" exact className="nav-link" activeClassName="active" activeStyle={{ fontWeight: 'bold' }}>Transactions</NavLink>
-              </li>
-              {this.showTokensTab() && (
-                <li className="nav-item dropdown">
-                  <span className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    Tokens
-                  </span>
-                  <div className="dropdown-menu" aria-labelledby="navbarDropdown">
-                    <ul>
-                      <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`} />
-                    </ul>
-                  </div>
-                </li>
-              )}
-              <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>
+  return (
+    <div className="main-nav">
+      <nav className="navbar navbar-expand-lg navbar-dark pl-3 pl-lg-0">
+        <div className="d-flex flex-column align-items-center">
+          <Link className="navbar-brand" to="/" href="/">
+            <img src={logo} alt="" />
+          </Link>
+        </div>
+        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon" />
+        </button>
+        <div className="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul className="navbar-nav mr-auto">
+            <li className="nav-item">
+              <NavLink to="/" exact className="nav-link" activeClassName="active" activeStyle={{ fontWeight: 'bold' }}>Transactions</NavLink>
+            </li>
+            {showTokensTab && (
               <li className="nav-item dropdown">
                 <span className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  Tools
+                  Tokens
                 </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>
+                  <ul>
+                    <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`} />
+                  </ul>
                 </div>
               </li>
-            </ul>
-            <div className="navbar-right d-flex flex-row align-items-center navigation-search">
-              <div className="d-flex flex-row align-items-center">
-                <input className="form-control mr-2" type="search" placeholder="Search tx or address" aria-label="Search" ref="txSearch" onKeyUp={this.handleKeyUp} />
-                <i className="fa fa-search pointer" onClick={this.search}></i>
+            )}
+            <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" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Tools
+              </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>
               </div>
-              <Version />
+            </li>
+          </ul>
+          <div className="navbar-right d-flex flex-row align-items-center navigation-search">
+            <div className="d-flex flex-row align-items-center">
+              <input className="form-control mr-2" type="search" placeholder="Search tx or address" aria-label="Search" ref={txSearchRef} onKeyUp={handleKeyUp} />
+              <i className="fa fa-search pointer" onClick={search}></i>
             </div>
+            <Version />
           </div>
-        </nav>
-        <HathorAlert ref="alertError" text="Invalid hash format or address" type="danger" />
-      </div>
-    );
-  }
+        </div>
+      </nav>
+      <HathorAlert ref={alertErrorRef} text="Invalid hash format or address" type="danger" />
+    </div>
+  );
 };
 
 export default Navigation;

From 05763f6ce5c4f4705d25ddb6b4a3cbb92419adc5 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <pedro@hathor.network>
Date: Mon, 15 Jul 2024 23:50:24 -0300
Subject: [PATCH 3/3] refactor: props object destructuring

---
 src/components/Navigation.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index e949fba6..88fa8171 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -18,7 +18,7 @@ import {
   UNLEASH_TOKEN_BALANCES_FEATURE_FLAG,
 } from '../constants';
 
-function Navigation(props) {
+function Navigation({ history }) {
   const alertErrorRef = useRef(null);
   const txSearchRef = useRef(null);
   const isTokensBaseEnabled = useFlag(`${UNLEASH_TOKENS_BASE_FEATURE_FLAG}.rollout`);
@@ -38,13 +38,13 @@ function Navigation(props) {
       const regex = /[A-Fa-f\d]{64}/g;
       if (regex.test(text)) {
         // It's a valid hash
-        props.history.push(`/transaction/${text}`);
+        history.push(`/transaction/${text}`);
       } else {
         const network = hathorLib.config.getNetwork();
         const addressObj = new hathorLib.Address(text, { network });
         if (addressObj.isValid()) {
           // It's a valid address
-          props.history.push(`/address/${text}`);
+          history.push(`/address/${text}`);
         } else {
           showError();
         }