-
Notifications
You must be signed in to change notification settings - Fork 5.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Display a warning and gas fee component for token allowance and NFT f…
…low when transaction is expected to fail (#17437) Co-authored-by: Pedro Figueiredo <pedro.figueiredo@consensys.net> Co-authored-by: Dan J Miller <danjm.com@gmail.com> Co-authored-by: Brad Decker <bhdecker84@gmail.com>
- Loading branch information
4 people
authored
Feb 1, 2023
1 parent
fd81945
commit 308151c
Showing
12 changed files
with
369 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './simulation-error-message'; |
33 changes: 33 additions & 0 deletions
33
ui/components/ui/simulation-error-message/simulation-error-message.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import React, { useContext } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import ActionableMessage from '../actionable-message'; | ||
| import { I18nContext } from '../../../../.storybook/i18n'; | ||
|
|
||
| export default function SimulationErrorMessage({ | ||
| userAcknowledgedGasMissing = false, | ||
| setUserAcknowledgedGasMissing, | ||
| }) { | ||
| const t = useContext(I18nContext); | ||
|
|
||
| return ( | ||
| <ActionableMessage | ||
| message={t('simulationErrorMessageV2')} | ||
| useIcon | ||
| iconFillColor="var(--color-error-default)" | ||
| type="danger" | ||
| primaryActionV2={ | ||
| userAcknowledgedGasMissing === true | ||
| ? undefined | ||
| : { | ||
| label: t('proceedWithTransaction'), | ||
| onClick: setUserAcknowledgedGasMissing, | ||
| } | ||
| } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| SimulationErrorMessage.propTypes = { | ||
| userAcknowledgedGasMissing: PropTypes.bool, | ||
| setUserAcknowledgedGasMissing: PropTypes.func, | ||
| }; |
65 changes: 65 additions & 0 deletions
65
ui/components/ui/simulation-error-message/simulation-error-message.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import React from 'react'; | ||
| import configureMockStore from 'redux-mock-store'; | ||
| import { fireEvent } from '@testing-library/react'; | ||
| import { renderWithProvider } from '../../../../test/lib/render-helpers'; | ||
| import SimulationErrorMessage from './simulation-error-message'; | ||
|
|
||
| describe('Simulation Error Message', () => { | ||
| const store = configureMockStore()({}); | ||
| let props = {}; | ||
|
|
||
| beforeEach(() => { | ||
| props = { | ||
| userAcknowledgedGasMissing: false, | ||
| setUserAcknowledgedGasMissing: jest.fn(), | ||
| }; | ||
| }); | ||
|
|
||
| it('should render SimulationErrorMessage component with I want to procced anyway link', () => { | ||
| const { queryByText } = renderWithProvider( | ||
| <SimulationErrorMessage {...props} />, | ||
| store, | ||
| ); | ||
|
|
||
| expect( | ||
| queryByText( | ||
| 'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.', | ||
| ), | ||
| ).toBeInTheDocument(); | ||
| expect(queryByText('I want to proceed anyway')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render SimulationErrorMessage component without I want to procced anyway link', () => { | ||
| props.userAcknowledgedGasMissing = true; | ||
| const { queryByText } = renderWithProvider( | ||
| <SimulationErrorMessage {...props} />, | ||
| store, | ||
| ); | ||
|
|
||
| expect( | ||
| queryByText( | ||
| 'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.', | ||
| ), | ||
| ).toBeInTheDocument(); | ||
| expect(queryByText('I want to proceed anyway')).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render SimulationErrorMessage component with I want to proceed anyway and fire that event', () => { | ||
| props.userAcknowledgedGasMissing = false; | ||
| const { queryByText, getByText } = renderWithProvider( | ||
| <SimulationErrorMessage {...props} />, | ||
| store, | ||
| ); | ||
|
|
||
| expect( | ||
| queryByText( | ||
| 'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.', | ||
| ), | ||
| ).toBeInTheDocument(); | ||
| expect(queryByText('I want to proceed anyway')).toBeInTheDocument(); | ||
|
|
||
| const proceedAnywayLink = getByText('I want to proceed anyway'); | ||
| fireEvent.click(proceedAnywayLink); | ||
| expect(props.setUserAcknowledgedGasMissing).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { useSelector } from 'react-redux'; | ||
| import { txDataSelector } from '../selectors'; | ||
|
|
||
| /** | ||
| * Returns the simulation failure warning if a simulaiton error | ||
| * is present and user didn't acknowledge gas missing | ||
| * | ||
| * @param {boolean} userAcknowledgedGasMissing - Whether the user acknowledge gas missing | ||
| * @returns {boolean} simulation failure warning | ||
| */ | ||
|
|
||
| export function useSimulationFailureWarning(userAcknowledgedGasMissing) { | ||
| const txData = useSelector(txDataSelector) || {}; | ||
| const hasSimulationError = Boolean(txData.simulationFails); | ||
| const renderSimulationFailureWarning = | ||
| hasSimulationError && !userAcknowledgedGasMissing; | ||
| return renderSimulationFailureWarning; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.