mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Convert signature request component to tlr. (#17268)
This commit is contained in:
Thomas Huang
GitHub
parent
fae2a02d1c
commit
d99854baac
@ -0,0 +1,704 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Signature Request Component render should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="signature-request"
|
||||
>
|
||||
<div
|
||||
class="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 box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
|
||||
>
|
||||
Unknown private network
|
||||
</h6>
|
||||
<h6
|
||||
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
|
||||
>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
|
||||
>
|
||||
Balance
|
||||
</h6>
|
||||
<h6
|
||||
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default"
|
||||
>
|
||||
0
|
||||
|
||||
</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 box--margin-top-4 box--margin-bottom-1 box--flex-direction-row typography signature-request__content__title typography--h3 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||
>
|
||||
Signature request
|
||||
</h3>
|
||||
<h6
|
||||
class="box box--margin-12 box--margin-top-3 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__subtitle typography--h7 typography--weight-normal typography--style-normal typography--align-center typography--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 box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
|
||||
>
|
||||
Verify contract 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 box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-message__title typography--p typography--weight-bold typography--style-normal typography--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="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="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="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="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="address__name"
|
||||
>
|
||||
0xB0B...0000
|
||||
</div>
|
||||
</div>
|
||||
</h6>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="signature-request-footer"
|
||||
>
|
||||
<button
|
||||
class="button btn--rounded btn-secondary"
|
||||
data-testid="signature-cancel-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
<button
|
||||
class="button btn--rounded btn-primary"
|
||||
data-testid="signature-sign-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Sign
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,9 +1,12 @@
|
||||
import React from 'react';
|
||||
import { shallowWithContext } from '../../../../test/lib/render-helpers';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import mockState from '../../../../test/data/mock-state.json';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import SignatureRequest from './signature-request.component';
|
||||
import Message from './signature-request-message';
|
||||
|
||||
describe('Signature Request Component', () => {
|
||||
const store = configureMockStore()(mockState);
|
||||
|
||||
describe('render', () => {
|
||||
let fromAddress;
|
||||
let messageData;
|
||||
@ -58,13 +61,13 @@ describe('Signature Request Component', () => {
|
||||
};
|
||||
});
|
||||
|
||||
it('should render a div message parsed', () => {
|
||||
it('should match snapshot', () => {
|
||||
const msgParams = {
|
||||
data: JSON.stringify(messageData),
|
||||
version: 'V4',
|
||||
origin: 'test',
|
||||
};
|
||||
const wrapper = shallowWithContext(
|
||||
const { container } = renderWithProvider(
|
||||
<SignatureRequest
|
||||
hardwareWalletRequiresConnection={false}
|
||||
clearConfirmTransaction={() => undefined}
|
||||
@ -76,23 +79,10 @@ describe('Signature Request Component', () => {
|
||||
fromAccount={{ address: fromAddress }}
|
||||
provider={{ type: 'rpc' }}
|
||||
/>,
|
||||
store,
|
||||
);
|
||||
|
||||
expect(wrapper.is('div')).toStrictEqual(true);
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper.hasClass('signature-request')).toStrictEqual(true);
|
||||
const messageWrapper = wrapper.find(Message);
|
||||
expect(messageWrapper).toHaveLength(1);
|
||||
const { data, primaryType } = messageWrapper.props();
|
||||
expect(primaryType).toStrictEqual('Mail');
|
||||
expect(data.contents).toStrictEqual('Hello, Bob!');
|
||||
expect(data.from.name).toStrictEqual('Cow');
|
||||
expect(data.from.wallets).toBeDefined();
|
||||
expect(data.from.wallets).toHaveLength(2);
|
||||
expect(data.to).toBeDefined();
|
||||
const dataTo = data.to;
|
||||
expect(dataTo[0].name).toStrictEqual('Bob');
|
||||
expect(dataTo[0].wallets).toHaveLength(3);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render a div message parsed without typeless data', () => {
|
||||
@ -105,7 +95,7 @@ describe('Signature Request Component', () => {
|
||||
version: 'V4',
|
||||
origin: 'test',
|
||||
};
|
||||
const wrapper = shallowWithContext(
|
||||
const { queryByText } = renderWithProvider(
|
||||
<SignatureRequest
|
||||
hardwareWalletRequiresConnection={false}
|
||||
clearConfirmTransaction={() => undefined}
|
||||
@ -117,25 +107,13 @@ describe('Signature Request Component', () => {
|
||||
fromAccount={{ address: fromAddress }}
|
||||
provider={{ type: 'rpc' }}
|
||||
/>,
|
||||
store,
|
||||
);
|
||||
|
||||
expect(wrapper.is('div')).toStrictEqual(true);
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper.hasClass('signature-request')).toStrictEqual(true);
|
||||
const messageWrapper = wrapper.find(Message);
|
||||
expect(messageWrapper).toHaveLength(1);
|
||||
const { data } = messageWrapper.props();
|
||||
expect(data.contents).toStrictEqual('Hello, Bob!');
|
||||
expect(data.from.name).toStrictEqual('Cow');
|
||||
expect(data.from.wallets).toBeDefined();
|
||||
expect(data.from.wallets).toHaveLength(2);
|
||||
expect(data.to).toBeDefined();
|
||||
const dataTo = data.to;
|
||||
expect(dataTo[0].name).toStrictEqual('Bob');
|
||||
expect(dataTo[0].wallets).toHaveLength(3);
|
||||
|
||||
expect(data.do_not_display).toBeUndefined();
|
||||
expect(data.do_not_display2).toBeUndefined();
|
||||
expect(queryByText('do_not_display')).not.toBeInTheDocument();
|
||||
expect(queryByText('one')).not.toBeInTheDocument();
|
||||
expect(queryByText('do_not_display_2')).not.toBeInTheDocument();
|
||||
expect(queryByText('two')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user