Error states for new Tx overview: contract & network fees

[rachelhamlin]

Problem

We redesigned the transaction overview screen in #8026, but error states have not been updated to match.

There are two key error states we need to cover:
(1) When the user does not have enough ETH to pay for network fees (gas).
(2) Contract-related errors that are special cases arising from an inability of the contract to accurately calculate gas.

Initially we spec'd out these error states in #8026 and #8691, respectively—but as there is overlap between them, this issue merges them into one.

Implementation

Figma screens for insufficient network fee

Figma screens for contract errors

Acceptance Criteria

The terminology to be used in app is now network fee rather than gas.

There is a loading state utilizing spinner animation as the network fee is being calculated.

For the network fee error

When the user is initiating the transaction (from wallet, or in future, chat):

• They will not make it past this screen if they have an insufficient number of tokens for the transaction. They will never see both errors at once on the final overview.
• They can, however, bump into the insufficient network fee error, if they are low on ETH.

When a DApp initiates the transaction:

• Either or BOTH errors can occur at once:
• The user may have enough tokens, but not enough ETH for gas;
• Or the user may have enough ETH for gas, but not enough tokens;
• Or the user may be lacking in both.

The error states should accurately reflect this.

Note that if both error states are displayed, tapping on either info bubble should display the Not enough [token] (do not hard code ETH!) or Not enough ETH tool tip. If one is open already and the other is tapped, the first tool tip is minimized, and the second is opened.

For the contract error

The user is gated from signing the Tx unless they manually Set custom fee. Then they may continue with an additional warning about the likelihood of failure.

[rachelhamlin]

cc @andmironov for your review and also @flexsurfer - do you know if this bottom sheet is implemented yet? If not, I will create a separate issue for it.

EDIT: the old version of the screen exists. We can continue to use that for this PR, with added error state for insufficient network fee. To be updated on Figma, please, Andrei 🙏

I will create a separate issue for this future version, post v1 -

[3esmit]

Please, don't totally hide 'data' field from contract calls.

[flexsurfer]

WIP #9236

[rachelhamlin]

Reviewing this issue again and I'm no longer thinking that it's strictly required for v1. I'm happy to finish the WIP PR, but want to comment that some of the open issues in keycard are probably more urgent to fix for launch.

[flexsurfer]

moved to P0 because currently users think there is an error with gas and set gas manually and spent their funds but tx fails

[rachelhamlin]

@flexsurfer you mean when they don't have any tokens for an ENS name?

[flexsurfer]

it can be any contract interaction but ens name as well yes