m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Updating SignatureRequestData components (#19994)

Browse Source 
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Harsh Shukla 2023-07-25 02:10:41 +05:30 committed by GitHub
parent ab1b4c3a31
commit a01e4fa00a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 424 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

540
ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap
View File

@ -234,82 +234,82 @@ exports[`Signature Request Component render should match snapshot when we are us
>
Mail
</p>
<div
class="box signature-request-data__node box--flex-direction-row"
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
>
Hello, Bob!
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
From
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
>
Cow
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
Wallets
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -368,24 +368,24 @@ exports[`Signature Request Component render should match snapshot when we are us
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"
</div>
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -444,83 +444,83 @@ exports[`Signature Request Component render should match snapshot when we are us
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"
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
To
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
0
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
>
Bob
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
Wallets
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -579,24 +579,24 @@ exports[`Signature Request Component render should match snapshot when we are us
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"
</div>
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -655,24 +655,24 @@ exports[`Signature Request Component render should match snapshot when we are us
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"
</div>
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -731,16 +731,16 @@ exports[`Signature Request Component render should match snapshot when we are us
0xB0B...0000
</div>
</div>
</h6>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div
@ -1009,82 +1009,82 @@ exports[`Signature Request Component render should match snapshot when we want t
>
Mail
</p>
<div
class="box signature-request-data__node box--flex-direction-row"
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
>
Hello, Bob!
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
From
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
>
Cow
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
Wallets
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -1143,24 +1143,24 @@ exports[`Signature Request Component render should match snapshot when we want t
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"
</div>
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -1219,83 +1219,83 @@ exports[`Signature Request Component render should match snapshot when we want t
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"
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
To
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
0
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
>
Bob
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
Wallets
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -1354,24 +1354,24 @@ exports[`Signature Request Component render should match snapshot when we want t
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"
</div>
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -1430,24 +1430,24 @@ exports[`Signature Request Component render should match snapshot when we want t
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"
</div>
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -1506,16 +1506,16 @@ exports[`Signature Request Component render should match snapshot when we want t
0xB0B...0000
</div>
</div>
</h6>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div

36
ui/components/app/signature-request/signature-request-data/signature-request-data.js
View File

@ -11,45 +11,46 @@ import {
isValidHexAddress,
toChecksumHexAddress,
} from '../../../../../shared/modules/hexstring-utils';
import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import {
DISPLAY,
FONT_WEIGHT,
TypographyVariant,
Display,
FontWeight,
TextVariant,
TextColor,
} from '../../../../helpers/constants/design-system';
import { sanitizeString } from '../../../../helpers/utils/util';
import { Box, Text } from '../../../component-library';
function SignatureRequestData({ data }) {
const identities = useSelector(getMemoizedMetaMaskIdentities);
return (
<Box className="signature-request-data__node">
<Box as="ul" className="signature-request-data__node">
{Object.entries(data).map(([label, { value, type }], i) => (
<Box
as="li"
className="signature-request-data__node"
marginBottom={2}
key={`${label}-${i}`}
paddingLeft={2}
display={
typeof value !== 'object' || value === null ? DISPLAY.FLEX : null
typeof value !== 'object' || value === null ? Display.Flex : null
}
>
<Typography
as="span"
<Text
as="div"
color={TextColor.textDefault}
marginLeft={4}
fontWeight={
typeof value === 'object' ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL
typeof value === 'object' ? FontWeight.Bold : FontWeight.Normal
}
>
{sanitizeString(label.charAt(0).toUpperCase() + label.slice(1))}:{' '}
</Typography>
</Text>
{typeof value === 'object' && value !== null ? (
<SignatureRequestData data={value} />
) : (
<Typography
as="span"
<Text
as="div"
color={TextColor.textDefault}
marginLeft={4}
className="signature-request-data__node__value"
@ -58,8 +59,9 @@ function SignatureRequestData({ data }) {
isValidHexAddress(value, {
mixedCaseUseChecksum: true,
}) ? (
<Typography
variant={TypographyVariant.H7}
<Text
variant={TextVariant.bodySm}
as="div"
color={TextColor.infoDefault}
className="signature-request-data__node__value__address"
>
@ -68,11 +70,11 @@ function SignatureRequestData({ data }) {
checksummedRecipientAddress={toChecksumHexAddress(value)}
recipientName={getAccountName(identities, value)}
/>
</Typography>
</Text>
) : (
sanitizeString(`${value}`)
)}
</Typography>
</Text>
)}
</Box>
))}

270
ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
View File

@ -233,82 +233,82 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
>
Mail
</p>
<div
class="box signature-request-data__node box--flex-direction-row"
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
>
Hello, Bob!
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
From
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
>
Cow
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
Wallets
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -367,24 +367,24 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
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"
</div>
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -443,83 +443,83 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
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"
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
To
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
0
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--color-text-default"
>
Bob
</span>
</div>
<div
class="box signature-request-data__node box--padding-left-2 box--flex-direction-row"
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--margin-left-4 mm-box--color-text-default"
>
Wallets
:
</span>
<div
class="box signature-request-data__node box--flex-direction-row"
</div>
<ul
class="mm-box signature-request-data__node"
>
<div
class="box signature-request-data__node box--padding-left-2 box--display-flex box--flex-direction-row"
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -578,24 +578,24 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
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"
</div>
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -654,24 +654,24 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
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"
</div>
</div>
</li>
<li
class="mm-box signature-request-data__node mm-box--margin-bottom-2 mm-box--padding-left-2 mm-box--display-flex"
>
<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"
<div
class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-box--margin-left-4 mm-box--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"
</div>
<div
class="mm-box mm-text signature-request-data__node__value mm-text--body-md mm-box--margin-left-4 mm-box--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="mm-box mm-text signature-request-data__node__value__address mm-text--body-sm mm-box--color-info-default"
>
<div
class="tx-insight tx-insight-component tx-insight-component-address"
@ -730,16 +730,16 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
0xB0B...0000
</div>
</div>
</h6>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div