Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Missing navigation calls #594

Merged
merged 3 commits into from
Apr 30, 2024
Merged

Fix: Missing navigation calls #594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8b06ceb
fix: navigate ModalUnhandledError
tuliomir Apr 24, 2024
ae9597e
fix: navigate TxData
tuliomir Apr 29, 2024
df99f15
style: better import syntax
tuliomir Apr 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 55 additions & 58 deletions src/components/ModalUnhandledError.js
View file
Open in desktop
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
Open in desktop
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
Loading