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 ( -