Skip to content

Commit

Permalink
Fix: Missing navigation calls (#594)
Browse files Browse the repository at this point in the history 
* fix: navigate ModalUnhandledError

* fix: navigate TxData

* style: better import syntax
  • Loading branch information
@tuliomir
tuliomir authored Apr 30, 2024
1 parent 73f64ea commit a968e67
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 60 deletions.
113 changes: 55 additions & 58 deletions src/components/ModalUnhandledError.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
5 changes: 3 additions & 2 deletions src/components/TxData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -35,6 +35,7 @@ const mapStateToProps = (state) => {
const mapDispatchToProps = dispatch => {
return {
selectToken: data => dispatch(selectToken(data)),
setNavigateTo: (route, replace) => dispatch(setNavigateTo(route, replace)),
};
};

Expand Down Expand Up @@ -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) => {
Expand Down

0 comments on commit a968e67

Please sign in to comment.