mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-28 23:06:37 +01:00
07abc53cce
* BannerBase to TS * snapshot updates * more snapshot updates * addressing type definition error * updating eth-sign-modal snapshot * Updates to stories, types and adding data-testid * Updating snapshots * updating snapshot of blockaid-banner-alert and adding unit test for childrenWrapperProps * BannerBase updates to stories, adding locale for close button, removing static data-testid in favor of using it at the instance, updating snapshots associated with those changes * Removing incorrect arg from storybook file * Updating html element in security provider e2e test to match BannerBase. Also updating snapshot of ConfirmTransaction page * Fixing e2e tests --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
536 lines
18 KiB
Plaintext
536 lines
18 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="mm-box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
|
|
>
|
|
<div
|
|
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
|
|
title="0.0001"
|
|
>
|
|
<div
|
|
class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
|
|
variant="inherit"
|
|
>
|
|
<i
|
|
class="fab fa-ethereum"
|
|
style="font-size: 24px;"
|
|
/>
|
|
</div>
|
|
<span
|
|
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
|
|
>
|
|
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="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--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="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
|
|
>
|
|
<div>
|
|
<div
|
|
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
|
|
title="0.000021"
|
|
>
|
|
<span
|
|
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
|
|
>
|
|
0.000021
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="transaction-detail-item__row"
|
|
>
|
|
<div />
|
|
<h6
|
|
class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
|
|
>
|
|
<strong>
|
|
Max fee:
|
|
</strong>
|
|
<div>
|
|
<div
|
|
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
|
|
title="0.000021"
|
|
>
|
|
<span
|
|
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
|
|
>
|
|
0.000021
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="transaction-detail-item"
|
|
>
|
|
<div
|
|
class="transaction-detail-item__row"
|
|
>
|
|
<h6
|
|
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
|
|
>
|
|
Total
|
|
</h6>
|
|
<div
|
|
class="transaction-detail-item__detail-values"
|
|
>
|
|
<h6
|
|
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
|
|
>
|
|
<div
|
|
class="confirm-page-container-content__total-value"
|
|
>
|
|
<div
|
|
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
|
|
title="0.000121"
|
|
>
|
|
<span
|
|
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
|
|
>
|
|
0.000121
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="transaction-detail-item__row"
|
|
>
|
|
<h6
|
|
class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
|
|
>
|
|
Amount + gas fee
|
|
</h6>
|
|
<h6
|
|
class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
|
|
>
|
|
<div
|
|
class="confirm-page-container-content__total-amount"
|
|
>
|
|
<strong>
|
|
Max amount:
|
|
</strong>
|
|
|
|
<div
|
|
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
|
|
title="0.000121"
|
|
>
|
|
<span
|
|
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
|
|
>
|
|
0.000121
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger mm-box--margin-right-4 mm-box--margin-bottom-4 mm-box--margin-left-4 mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-error-muted mm-box--rounded-sm"
|
|
>
|
|
<span
|
|
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
|
|
style="mask-image: url('./images/icons/danger.svg');"
|
|
/>
|
|
<div>
|
|
<p
|
|
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
|
|
>
|
|
You do not have enough in your account to pay for transaction fees on Goerli network. Deposit from another account.
|
|
</p>
|
|
<p
|
|
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
|
|
/>
|
|
</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>
|
|
`;
|