1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
Mark Stacey ec7e7fdf6d
Fix fallback gas estimation (#19746)
* Fix fallback gas estimation

Our fallback gas estimation was failing due to a bug in the
`@metamask/controller-utils` package. This was causing gas estimation
to fail completely on certain networks (those not supported by our gas
estimation APIs and non EIP-1559 compatibile), and it was causing the
fallback gas estimation operation (in case our API was down) to fail
across all networks.

Fixes https://github.com/MetaMask/metamask-extension/issues/19735

* Add e2e tests

E2E tests have been added to capture gas estimation. Cases are added
for our API, for the fallback estimate, and for non-EIP-1559 estimates.

As part of this work, the legacy gas API had to be disabled. This was
being used in e2e tests but was dead code in production. It needed to
be disabled to ensure the code under test was reachable.

* Fix gas API referenced in e2e test

* Update unit test snapshots
2023-06-26 16:13:16 -02:30

556 lines
19 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Confirm Transaction Base should match snapshot 1`] = `
<div>
<div
class="page-container"
data-testid="page-container"
>
<div
class="confirm-page-container-navigation"
style="display: none;"
>
<div
class="confirm-page-container-navigation__container"
data-testid="navigation-container"
style="visibility: hidden;"
>
<button
class="confirm-page-container-navigation__arrow"
data-testid="first-page"
>
<i
class="fa fa-angle-double-left fa-2x"
/>
</button>
<button
class="confirm-page-container-navigation__arrow"
data-testid="previous-page"
>
<i
class="fa fa-angle-left fa-2x"
/>
</button>
</div>
<div
class="confirm-page-container-navigation__textcontainer"
>
<div
class="confirm-page-container-navigation__navtext"
>
0
of
1
</div>
<div
class="confirm-page-container-navigation__longtext"
>
requests waiting to be acknowledged
</div>
</div>
<div
class="confirm-page-container-navigation__container"
style="visibility: initial;"
>
<button
class="confirm-page-container-navigation__arrow"
data-testid="next-page"
>
<i
class="fa fa-angle-right fa-2x"
/>
</button>
<button
class="confirm-page-container-navigation__arrow"
data-testid="last-page"
>
<i
class="fa fa-angle-double-right fa-2x"
/>
</button>
</div>
</div>
<div
class="sender-to-recipient sender-to-recipient--default"
data-testid="sender-to-recipient"
>
<div
class="sender-to-recipient__party sender-to-recipient__party--sender"
>
<div
class="sender-to-recipient__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 24px; width: 24px; border-radius: 12px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 24px; height: 24px; display: inline-block; background: rgb(245, 228, 0);"
>
<svg
height="24"
width="24"
x="0"
y="0"
>
<rect
fill="#F2BE02"
height="24"
transform="translate(4.11204385070503 -3.89652025148055) rotate(387.1 12 12)"
width="24"
x="0"
y="0"
/>
<rect
fill="#01778E"
height="24"
transform="translate(-1.9540919563657109 12.528454691642345) rotate(227.4 12 12)"
width="24"
x="0"
y="0"
/>
<rect
fill="#C81435"
height="24"
transform="translate(13.477268130678231 -9.444486788922836) rotate(422.3 12 12)"
width="24"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="sender-to-recipient__tooltip-wrapper"
>
<div
aria-describedby="tippy-tooltip-1"
class="sender-to-recipient__tooltip-container"
data-original-title="null"
data-tooltipped=""
style="display: inline;"
tabindex="0"
>
<div
class="sender-to-recipient__name"
/>
</div>
</div>
</div>
<div
class="sender-to-recipient__arrow-container"
>
<div
class="sender-to-recipient__arrow-circle"
>
<i
class="fa fa-arrow-right sender-to-recipient__arrow-circle__icon"
/>
</div>
</div>
<div
class="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
>
<div
class="sender-to-recipient__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 24px; width: 24px; border-radius: 12px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 24px; height: 24px; display: inline-block; background: rgb(249, 108, 1);"
>
<svg
height="24"
width="24"
x="0"
y="0"
>
<rect
fill="#2343E1"
height="24"
transform="translate(1.995636908144359 -2.9078959833795546) rotate(391.8 12 12)"
width="24"
x="0"
y="0"
/>
<rect
fill="#F2CA02"
height="24"
transform="translate(-10.28190700465709 0.16715759851871784) rotate(278.6 12 12)"
width="24"
x="0"
y="0"
/>
<rect
fill="#C8142C"
height="24"
transform="translate(16.427173764273576 -13.297284285395893) rotate(345.3 12 12)"
width="24"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="sender-to-recipient__tooltip-wrapper"
>
<div
class="sender-to-recipient__tooltip-container"
style="display: inline;"
tabindex="0"
title=""
>
<div
class="sender-to-recipient__name"
data-testid="sender-to-recipient__name"
>
0x85c...D65e
</div>
</div>
</div>
</div>
</div>
<div
class="confirm-page-container-content"
>
<div
class="confirm-page-container-summary"
>
<div
class="confirm-page-container-summary__action-row"
>
<div
class="confirm-page-container-summary__action"
>
<span
class="confirm-page-container-summary__action__name"
>
Sending ETH
</span>
</div>
<div
class="confirm-page-container-summary__nonce"
>
#undefined
</div>
</div>
<div
class="confirm-page-container-summary__title"
>
<h3
class="box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis box--flex-direction-row box--color-text-default"
>
<div
class="currency-display-component"
title="0.0001"
>
<span
class="currency-display-component__prefix"
>
<i
class="fab fa-ethereum"
style="font-size: 24px;"
/>
</span>
<span
class="currency-display-component__text"
>
0.0001
</span>
</div>
</h3>
</div>
</div>
<div
class="box tabs box--flex-direction-row"
>
<ul
class="box tabs__list box--display-flex box--gap-1 box--flex-direction-row box--justify-content-flex-start box--background-color-background-default"
>
<li
class="box tab confirm-page-container-content__tab tab--active box--flex-direction-row"
>
<button
class="box box--padding-2 box--display-block box--flex-direction-row box--text-align-center box--width-full"
>
Details
</button>
</li>
<li
class="box tab confirm-page-container-content__tab box--flex-direction-row"
>
<button
class="box box--padding-2 box--display-block box--flex-direction-row box--text-align-center box--width-full"
>
Data
</button>
</li>
<li
class="box tab confirm-page-container-content__tab box--flex-direction-row"
>
<button
class="box box--padding-2 box--display-block box--flex-direction-row box--text-align-center box--width-full"
>
Hex
</button>
</li>
</ul>
<div
class="box tabs__content box--flex-direction-row"
>
<div
class="confirm-page-container-content__details"
>
<div
class="transaction-alerts"
/>
<div
class="transaction-detail"
>
<div
class="transaction-detail-edit"
>
<button>
Edit
</button>
</div>
<div
class="transaction-detail-rows"
>
<div
class="transaction-detail-item"
data-testid="confirm-gas-display"
>
<div
class="transaction-detail-item__row"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
>
Estimated gas fee
<div
class="info-tooltip"
data-testid="info-tooltip"
>
<div>
<div
aria-describedby="tippy-tooltip-2"
class="info-tooltip__tooltip-container"
data-original-title="null"
data-tooltipped=""
style="display: inline;"
tabindex="0"
>
<svg
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
fill="var(--color-icon-alternative)"
/>
</svg>
</div>
</div>
</div>
</h6>
<div
class="transaction-detail-item__detail-values"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
>
<div>
<div
class="currency-display-component"
title="0.000021"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
>
0.000021
</span>
</div>
</div>
</h6>
</div>
</div>
<div
class="transaction-detail-item__row"
>
<div />
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
>
<strong>
Max fee:
</strong>
<div>
<div
class="currency-display-component"
title="0.000021"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
>
0.000021
</span>
</div>
</div>
</h6>
</div>
</div>
<div
class="transaction-detail-item"
>
<div
class="transaction-detail-item__row"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
>
Total
</h6>
<div
class="transaction-detail-item__detail-values"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
>
<div
class="confirm-page-container-content__total-value"
>
<div
class="currency-display-component"
title="0.000121"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
>
0.000121
</span>
</div>
</div>
</h6>
</div>
</div>
<div
class="transaction-detail-item__row"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
>
Amount + gas fee
</h6>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
>
<div
class="confirm-page-container-content__total-amount"
>
<strong>
Max amount:
</strong>
<div
class="currency-display-component"
title="0.000121"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
>
0.000121
</span>
</div>
</div>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="confirm-page-container-content__error-container"
>
<div
class="actionable-message actionable-message--danger actionable-message--warning actionable-message--with-icon"
>
<svg
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
fill="var(--color-error-default)"
/>
</svg>
<div
class="actionable-message__message"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--align-left typography--color-text-default"
>
You do not have enough in your account to pay for transaction fees on Goerli network. Deposit from another account.
</h6>
</div>
</div>
</div>
<div
class="page-container__footer"
>
<footer>
<button
class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
data-testid="page-container-footer-cancel"
role="button"
tabindex="0"
>
Reject
</button>
<button
class="button btn--rounded btn-primary page-container__footer-button"
data-testid="page-container-footer-next"
disabled=""
role="button"
tabindex="0"
>
Confirm
</button>
</footer>
</div>
</div>
</div>
</div>
`;