1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 20:39:08 +01:00
metamask-extension/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap
Ujwal Kumar 04839a250d
Issue 17670 replace typography with text (#19433)
* Replace Typograph with Text component in numeric-input-component.js

* Replace Typography with Text component in signature-request-message.js

* Replace Typography with Text component in signature-request.component.js

* Replacing deprecating constants and fixing some signature story warnings

* Updating snapshot

* Fixing import

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
Co-authored-by: Garrett Bear <gwhisten@gmail.com>
2023-06-26 15:50:08 -07:00

1556 lines
70 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Signature Request Component render should match snapshot when we are using eth 1`] = `
<div>
<div
class="signature-request"
>
<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="request-signature__account"
data-testid="request-signature-account"
>
<div
class="box network-account-balance-header box--padding-4 box--display-flex box--flex-direction-row box--justify-content-space-between box--align-items-center"
>
<div
class="box box--display-flex box--gap-2 box--flex-direction-row box--align-items-center"
>
<div
class="box box--display-flex box--flex-direction-row box--align-items-center"
>
<div
class=""
>
<div
class="identicon"
style="height: 32px; width: 32px; border-radius: 16px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(245, 228, 0);"
>
<svg
height="32"
width="32"
x="0"
y="0"
>
<rect
fill="#F2BE02"
height="32"
transform="translate(5.482725134273373 -5.1953603353074) rotate(387.1 16 16)"
width="32"
x="0"
y="0"
/>
<rect
fill="#01778E"
height="32"
transform="translate(-2.6054559418209475 16.704606255523125) rotate(227.4 16 16)"
width="32"
x="0"
y="0"
/>
<rect
fill="#C81435"
height="32"
transform="translate(17.969690840904306 -12.592649051897114) rotate(422.3 16 16)"
width="32"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
<div
class="network-account-balance-header__network-account__ident-icon-ethereum--gray"
>
<span
class="icon-with-fallback__fallback"
>
U
</span>
</div>
</div>
<div
class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
>
<h6
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Unknown private network
</h6>
<h6
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
Antonio
</h6>
</div>
</div>
<div
class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
>
<h6
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Balance
</h6>
<h6
align="end"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
966.987986
ABC
</h6>
</div>
</div>
</div>
<div
class="signature-request-content"
>
<div
class="signature-request__origin"
>
<div
class="site-origin"
>
<div
class="chip chip--with-left-icon chip--border-color-border-muted chip--background-color-undefined"
>
<div
class="chip__left-icon"
>
<div
class=""
>
<span
class="icon-with-fallback__fallback"
>
T
</span>
</div>
</div>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography chip__label typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
>
test
</span>
</div>
</div>
</div>
<h3
class="box mm-text signature-request__content__title mm-text--heading-md box--margin-top-4 box--flex-direction-row box--color-text-default"
>
Signature request
</h3>
<h6
align="center"
class="box mm-text request-signature__content__subtitle mm-text--body-sm box--margin-12 box--margin-top-3 box--flex-direction-row box--color-text-alternative"
>
Only sign this message if you fully understand the content and trust the requesting site.
</h6>
<div>
<a
class="button btn-link signature-request-content__verify-contract-details"
data-testid="verify-contract-details"
role="button"
tabindex="0"
>
<h6
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
>
Verify third-party details
</h6>
</a>
</div>
</div>
<div
class="box signature-request-message box--display-flex box--flex-direction-column"
>
<div
class="box signature-request-message__root box--margin-2 box--padding-top-3 box--padding-right-3 box--padding-bottom-3 box--flex-direction-row box--background-color-background-default box--rounded-xl box--border-color-border-muted box--border-style-solid box--border-width-1"
>
<p
class="box mm-text mm-text--body-md mm-text--font-weight-bold box--margin-left-4 box--flex-direction-row box--color-text-default"
>
Mail
</p>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Contents
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Hello, Bob!
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
>
From
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Name
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Cow
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
>
Wallets
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
0
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
>
<div
class="tx-insight-component-address__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 18px; width: 18px; border-radius: 9px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(35, 98, 225);"
>
<svg
height="18"
width="18"
x="0"
y="0"
>
<rect
fill="#FA7900"
height="18"
transform="translate(-0.14083532437501936 -0.20904741369718938) rotate(237.8 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#034F5E"
height="18"
transform="translate(6.169600998273832 -6.532671139783782) rotate(321.2 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#FB185C"
height="18"
transform="translate(4.879852199205555 12.185539790934872) rotate(190.8 9 9)"
width="18"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="tx-insight-component-address__name"
>
0xCD2...D826
</div>
</div>
</h6>
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
1
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
>
<div
class="tx-insight-component-address__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 18px; width: 18px; border-radius: 9px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(24, 183, 242);"
>
<svg
height="18"
width="18"
x="0"
y="0"
>
<rect
fill="#F91E01"
height="18"
transform="translate(-3.4105516295169465 1.6271792765749349) rotate(179.5 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#FA5300"
height="18"
transform="translate(0.0011267744354920284 -8.541150536104556) rotate(370.7 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#F5A300"
height="18"
transform="translate(-10.876212949280989 11.550571889611607) rotate(298.9 9 9)"
width="18"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="tx-insight-component-address__name"
>
0xDea...beeF
</div>
</div>
</h6>
</span>
</div>
</div>
</div>
</div>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
>
To
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
>
0
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Name
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Bob
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
>
Wallets
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
0
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
>
<div
class="tx-insight-component-address__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 18px; width: 18px; border-radius: 9px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(242, 162, 2);"
>
<svg
height="18"
width="18"
x="0"
y="0"
>
<rect
fill="#C8144A"
height="18"
transform="translate(3.793157784878341 -1.7274880587885135) rotate(359.3 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#01878E"
height="18"
transform="translate(-5.130298485812891 -4.633613065334895) rotate(335.8 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#1897F2"
height="18"
transform="translate(-14.252066920284053 2.4659095087310536) rotate(275.0 9 9)"
width="18"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="tx-insight-component-address__name"
>
0xbBb...BBbB
</div>
</div>
</h6>
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
1
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
>
<div
class="tx-insight-component-address__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 18px; width: 18px; border-radius: 9px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(250, 54, 0);"
>
<svg
height="18"
width="18"
x="0"
y="0"
>
<rect
fill="#2395E1"
height="18"
transform="translate(-1.952228683702902 0.5755351329028624) rotate(191.9 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#F90101"
height="18"
transform="translate(1.931538686012753 -10.436305366725303) rotate(319.8 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#F58700"
height="18"
transform="translate(11.15341577077021 5.782185845756665) rotate(180.7 9 9)"
width="18"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="tx-insight-component-address__name"
>
0xB0B...Ea57
</div>
</div>
</h6>
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
2
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
>
<div
class="tx-insight-component-address__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 18px; width: 18px; border-radius: 9px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(200, 20, 86);"
>
<svg
height="18"
width="18"
x="0"
y="0"
>
<rect
fill="#018E8C"
height="18"
transform="translate(4.486584319523849 0.3999308067724887) rotate(177.8 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#F29202"
height="18"
transform="translate(-8.123544749536274 -2.791525003061714) rotate(334.6 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#236FE1"
height="18"
transform="translate(16.44948962669253 -7.0677741181270815) rotate(456.1 9 9)"
width="18"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="tx-insight-component-address__name"
>
0xB0B...0000
</div>
</div>
</h6>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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"
role="button"
tabindex="0"
>
Sign
</button>
</footer>
</div>
</div>
</div>
`;
exports[`Signature Request Component render should match snapshot when we want to switch to fiat 1`] = `
<div>
<div
class="signature-request"
>
<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="request-signature__account"
data-testid="request-signature-account"
>
<div
class="box network-account-balance-header box--padding-4 box--display-flex box--flex-direction-row box--justify-content-space-between box--align-items-center"
>
<div
class="box box--display-flex box--gap-2 box--flex-direction-row box--align-items-center"
>
<div
class="box box--display-flex box--flex-direction-row box--align-items-center"
>
<div
class=""
>
<div
class="identicon"
style="height: 32px; width: 32px; border-radius: 16px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(245, 228, 0);"
>
<svg
height="32"
width="32"
x="0"
y="0"
>
<rect
fill="#F2BE02"
height="32"
transform="translate(5.482725134273373 -5.1953603353074) rotate(387.1 16 16)"
width="32"
x="0"
y="0"
/>
<rect
fill="#01778E"
height="32"
transform="translate(-2.6054559418209475 16.704606255523125) rotate(227.4 16 16)"
width="32"
x="0"
y="0"
/>
<rect
fill="#C81435"
height="32"
transform="translate(17.969690840904306 -12.592649051897114) rotate(422.3 16 16)"
width="32"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
<div
class="network-account-balance-header__network-account__ident-icon-ethereum--gray"
>
<span
class="icon-with-fallback__fallback"
>
U
</span>
</div>
</div>
<div
class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
>
<h6
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Unknown private network
</h6>
<h6
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
Antonio
</h6>
</div>
</div>
<div
class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
>
<h6
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Balance
</h6>
<h6
align="end"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
1515270.174798
DEF
</h6>
</div>
</div>
</div>
<div
class="signature-request-content"
>
<div
class="signature-request__origin"
>
<div
class="site-origin"
>
<div
class="chip chip--with-left-icon chip--border-color-border-muted chip--background-color-undefined"
>
<div
class="chip__left-icon"
>
<div
class=""
>
<span
class="icon-with-fallback__fallback"
>
T
</span>
</div>
</div>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography chip__label typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
>
test
</span>
</div>
</div>
</div>
<h3
class="box mm-text signature-request__content__title mm-text--heading-md box--margin-top-4 box--flex-direction-row box--color-text-default"
>
Signature request
</h3>
<h6
align="center"
class="box mm-text request-signature__content__subtitle mm-text--body-sm box--margin-12 box--margin-top-3 box--flex-direction-row box--color-text-alternative"
>
Only sign this message if you fully understand the content and trust the requesting site.
</h6>
<div>
<a
class="button btn-link signature-request-content__verify-contract-details"
data-testid="verify-contract-details"
role="button"
tabindex="0"
>
<h6
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
>
Verify third-party details
</h6>
</a>
</div>
</div>
<div
class="box signature-request-message box--display-flex box--flex-direction-column"
>
<div
class="box signature-request-message__root box--margin-2 box--padding-top-3 box--padding-right-3 box--padding-bottom-3 box--flex-direction-row box--background-color-background-default box--rounded-xl box--border-color-border-muted box--border-style-solid box--border-width-1"
>
<p
class="box mm-text mm-text--body-md mm-text--font-weight-bold box--margin-left-4 box--flex-direction-row box--color-text-default"
>
Mail
</p>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Contents
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Hello, Bob!
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
>
From
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Name
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Cow
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
>
Wallets
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
0
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
>
<div
class="tx-insight-component-address__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 18px; width: 18px; border-radius: 9px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(35, 98, 225);"
>
<svg
height="18"
width="18"
x="0"
y="0"
>
<rect
fill="#FA7900"
height="18"
transform="translate(-0.14083532437501936 -0.20904741369718938) rotate(237.8 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#034F5E"
height="18"
transform="translate(6.169600998273832 -6.532671139783782) rotate(321.2 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#FB185C"
height="18"
transform="translate(4.879852199205555 12.185539790934872) rotate(190.8 9 9)"
width="18"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="tx-insight-component-address__name"
>
0xCD2...D826
</div>
</div>
</h6>
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
1
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
>
<div
class="tx-insight-component-address__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 18px; width: 18px; border-radius: 9px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(24, 183, 242);"
>
<svg
height="18"
width="18"
x="0"
y="0"
>
<rect
fill="#F91E01"
height="18"
transform="translate(-3.4105516295169465 1.6271792765749349) rotate(179.5 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#FA5300"
height="18"
transform="translate(0.0011267744354920284 -8.541150536104556) rotate(370.7 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#F5A300"
height="18"
transform="translate(-10.876212949280989 11.550571889611607) rotate(298.9 9 9)"
width="18"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="tx-insight-component-address__name"
>
0xDea...beeF
</div>
</div>
</h6>
</span>
</div>
</div>
</div>
</div>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
>
To
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
>
0
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Name
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
Bob
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-bold typography--style-normal typography--color-text-default"
>
Wallets
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
0
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
>
<div
class="tx-insight-component-address__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 18px; width: 18px; border-radius: 9px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(242, 162, 2);"
>
<svg
height="18"
width="18"
x="0"
y="0"
>
<rect
fill="#C8144A"
height="18"
transform="translate(3.793157784878341 -1.7274880587885135) rotate(359.3 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#01878E"
height="18"
transform="translate(-5.130298485812891 -4.633613065334895) rotate(335.8 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#1897F2"
height="18"
transform="translate(-14.252066920284053 2.4659095087310536) rotate(275.0 9 9)"
width="18"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="tx-insight-component-address__name"
>
0xbBb...BBbB
</div>
</div>
</h6>
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
1
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
>
<div
class="tx-insight-component-address__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 18px; width: 18px; border-radius: 9px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(250, 54, 0);"
>
<svg
height="18"
width="18"
x="0"
y="0"
>
<rect
fill="#2395E1"
height="18"
transform="translate(-1.952228683702902 0.5755351329028624) rotate(191.9 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#F90101"
height="18"
transform="translate(1.931538686012753 -10.436305366725303) rotate(319.8 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#F58700"
height="18"
transform="translate(11.15341577077021 5.782185845756665) rotate(180.7 9 9)"
width="18"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="tx-insight-component-address__name"
>
0xB0B...Ea57
</div>
</div>
</h6>
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
2
:
</span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-data__node__value typography--p typography--weight-normal typography--style-normal typography--color-text-default"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography signature-request-data__node__value__address typography--h7 typography--weight-normal typography--style-normal typography--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
>
<div
class="tx-insight-component-address__sender-icon"
>
<div
class=""
>
<div
class="identicon"
style="height: 18px; width: 18px; border-radius: 9px;"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(200, 20, 86);"
>
<svg
height="18"
width="18"
x="0"
y="0"
>
<rect
fill="#018E8C"
height="18"
transform="translate(4.486584319523849 0.3999308067724887) rotate(177.8 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#F29202"
height="18"
transform="translate(-8.123544749536274 -2.791525003061714) rotate(334.6 9 9)"
width="18"
x="0"
y="0"
/>
<rect
fill="#236FE1"
height="18"
transform="translate(16.44948962669253 -7.0677741181270815) rotate(456.1 9 9)"
width="18"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
</div>
<div
class="tx-insight-component-address__name"
>
0xB0B...0000
</div>
</div>
</h6>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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"
role="button"
tabindex="0"
>
Sign
</button>
</footer>
</div>
</div>
</div>
`;