From a968e6747afb600bb8bf9ed1b83214ef608cbdaa Mon Sep 17 00:00:00 2001
From: Tulio Miranda <tulio.mir@gmail.com>
Date: Tue, 30 Apr 2024 12:58:49 -0300
Subject: [PATCH] Fix: Missing navigation calls (#594)

* fix: navigate ModalUnhandledError

* fix: navigate TxData

* style: better import syntax
---
 src/components/ModalUnhandledError.js | 113 +++++++++++++-------------
 src/components/TxData.js              |   5 +-
 2 files changed, 58 insertions(+), 60 deletions(-)

diff --git a/src/components/ModalUnhandledError.js b/src/components/ModalUnhandledError.js
index e290b585..b47f5504 100644
--- a/src/components/ModalUnhandledError.js
+++ b/src/components/ModalUnhandledError.js
@@ -5,108 +5,105 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { t } from 'ttag';
-import wallet from '../utils/wallet';
+import walletUtils from '../utils/wallet';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { walletReset } from '../actions';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 
 const UNHANDLED_ERROR_MODAL_ID = 'unhandledErrorModal';
 export const UNHANDLED_ERROR_MODAL_ID_SELECTOR = `#${UNHANDLED_ERROR_MODAL_ID}`;
 
-const mapDispatchToProps = dispatch => {
-  return {
-    walletReset: () => dispatch(walletReset()),
-  };
-};
-
 /**
  * Component that shows a modal when an unhandled error happens
  * Shows a message to the user with a button for him to copy the error or reset the wallet
  *
  * @memberof Components
  */
-class ModalUnhandledError extends React.Component {
+function ModalUnhandledError({ resetError, error, renderError, info }) {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
   /**
    * successMessage {string} Message to be shown to the user in the modal
    */
-  state = { successMessage: '' };
+  const [successMessage, setSuccessMessage] = useState('');
 
   /**
    * Called when user clicks the button to reset the wallet, then reset data and go to Welcome screen
    *
    * @param {Object} e Event emitted on button click
    */
-  handleConfirm = (e) => {
+  const handleConfirm = (e) => {
     e.preventDefault();
-    this.props.walletReset();
-    this.props.history.push('/welcome/');
+    dispatch(walletReset());
+    // TODO: This should reset the navigation history instead of just navigating
+    // @see: https://github.com/HathorNetwork/hathor-wallet-mobile/blob/53bb86ca5b2b8162cae6cd71b381c68d3474c000/src/NavigationService.js#L33-L45
+    navigate('/welcome/');
   }
 
   /**
    * Called when user clicks the button to go to home ('/'), then reset error data and redirects page
    */
-  handleGoToHome = () => {
-    this.props.resetError();
-    this.props.history.push('/');
+  const handleGoToHome = () => {
+    resetError();
+    navigate('/');
   }
 
   /**
    * Called when user clicks to send the error to Sentry, so we allow Sentry, send the error, and then disallow again
    */
-  onSendErrorToSentry = () => {
-    wallet.allowSentry();
-    wallet.sentryWithScope(this.props.error, this.props.info);
-    wallet.disallowSentry();
-    this.setState({ successMessage: t`Report sent to Hathor Team! Thanks for the support!` });
+  const onSendErrorToSentry = () => {
+    walletUtils.allowSentry();
+    walletUtils.sentryWithScope(error, info);
+    walletUtils.disallowSentry();
+    setSuccessMessage(t`Report sent to Hathor Team! Thanks for the support!`);
+
     // Hiding message after some time
     setTimeout(() => {
-      this.setState({ successMessage: '' });
+      setSuccessMessage('');
     }, 4000);
   }
 
-  render() {
-    const { message = null, stack = null } = this.props.error || {}
-    const { renderError } = this.props
-    const readableError = t`Error Message: ${message}\nStack trace: ${stack}`
-    return (
-      <div className="modal fade" id={UNHANDLED_ERROR_MODAL_ID} tabIndex="-1" role="dialog" aria-labelledby="unhandledErrorModal" aria-hidden="true">
-        <div className="modal-dialog" role="document">
-          <div className="modal-content">
-            <div className="modal-header">
-              <h5 className="modal-title" id="errorModalLabel">{t`Ooops... Something went wrong...`}</h5>
-            </div>
-            <div className="modal-body">
-              <p>{t`An unhandled exception occurred in your wallet.`}</p>
-              <p>{t`If you'd like to help us improve it, please click in the button bellow to copy the error details to your clipboard.`}</p>
-              <div className="d-flex flex-row justify-content-between">
-                <div className="copy-error">
-                  <CopyToClipboard text={readableError}>
-                    <button className="btn send-tokens btn-hathor">{t`Copy Error`}</button>
-                  </CopyToClipboard>
-                </div>
-                {!wallet.isSentryAllowed() && <div><button className="btn send-tokens btn-hathor" onClick={this.onSendErrorToSentry}>{t`Send error report to help the developers`}</button></div>}
+  const { message = null, stack = null } = error || {}
+  const readableError = t`Error Message: ${message}\nStack trace: ${stack}`
+  return (
+    <div className="modal fade" id={UNHANDLED_ERROR_MODAL_ID} tabIndex="-1" role="dialog" aria-labelledby="unhandledErrorModal" aria-hidden="true">
+      <div className="modal-dialog" role="document">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title" id="errorModalLabel">{t`Ooops... Something went wrong...`}</h5>
+          </div>
+          <div className="modal-body">
+            <p>{t`An unhandled exception occurred in your wallet.`}</p>
+            <p>{t`If you'd like to help us improve it, please click in the button bellow to copy the error details to your clipboard.`}</p>
+            <div className="d-flex flex-row justify-content-between">
+              <div className="copy-error">
+                <CopyToClipboard text={readableError}>
+                  <button className="btn send-tokens btn-hathor">{t`Copy Error`}</button>
+                </CopyToClipboard>
               </div>
-              <p>{t`Send it to us with all relevant information about the issues you are experiencing.`}</p>
-              <p>{t`If you are facing recurrent issues, resetting your wallet may solve your problem. Please, double-check your backup before doing it.`}</p>
+              {!walletUtils.isSentryAllowed() && <div><button className="btn send-tokens btn-hathor" onClick={onSendErrorToSentry}>{t`Send error report to help the developers`}</button></div>}
             </div>
-            <div className="modal-footer">
-              <div className="d-flex flex-row align-items-center justify-content-between w-100">
-                <span className="text-success">{this.state.successMessage}</span>
-                <div>
-                  {renderError
-                    ? <button onClick={this.handleGoToHome} type="button" className="btn btn-secondary mr-2" data-dismiss="modal">{t`Home`}</button>
-                    : <button onClick={this.copyError} type="button" className="btn btn-secondary mr-2" data-dismiss="modal">{t`Dismiss`}</button>}
-                  <button onClick={this.handleConfirm} type="button" className="btn btn-hathor" data-dismiss="modal">{t`Reset wallet`}</button>
-                </div>
+            <p>{t`Send it to us with all relevant information about the issues you are experiencing.`}</p>
+            <p>{t`If you are facing recurrent issues, resetting your wallet may solve your problem. Please, double-check your backup before doing it.`}</p>
+          </div>
+          <div className="modal-footer">
+            <div className="d-flex flex-row align-items-center justify-content-between w-100">
+              <span className="text-success">{successMessage}</span>
+              <div>
+                {renderError
+                  ? <button onClick={handleGoToHome} type="button" className="btn btn-secondary mr-2" data-dismiss="modal">{t`Home`}</button>
+                  : <button type="button" className="btn btn-secondary mr-2" data-dismiss="modal">{t`Dismiss`}</button>}
+                <button onClick={handleConfirm} type="button" className="btn btn-hathor" data-dismiss="modal">{t`Reset wallet`}</button>
               </div>
             </div>
           </div>
         </div>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
-export default connect(null, mapDispatchToProps)(ModalUnhandledError);
+export default ModalUnhandledError;
diff --git a/src/components/TxData.js b/src/components/TxData.js
index 972eb644..66c81b4f 100644
--- a/src/components/TxData.js
+++ b/src/components/TxData.js
@@ -12,7 +12,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Link } from 'react-router-dom'
 import HathorAlert from './HathorAlert';
 import SpanFmt from './SpanFmt';
-import { selectToken } from '../actions/index';
+import { selectToken, setNavigateTo } from '../actions/index';
 import { connect } from "react-redux";
 import { get } from 'lodash';
 import Viz from 'viz.js';
@@ -35,6 +35,7 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = dispatch => {
   return {
     selectToken: data => dispatch(selectToken(data)),
+    setNavigateTo: (route, replace) => dispatch(setNavigateTo(route, replace)),
   };
 };
 
@@ -410,7 +411,7 @@ class TxData extends React.Component {
    */
   tokenRegistered = (token) => {
     this.props.selectToken(token.uid);
-    this.props.history.push('/wallet/');
+    this.props.setNavigateTo('/wallet/');
   }
 
   isAddressMine = (address) => {