mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Refactor conf-tx.js (#17380)
This commit is contained in:
Jyoti Puri
GitHub
parent
83a3ce1aa0
commit
80fb59f0a0
19
ui/hooks/useRouting.js
Normal file
19
ui/hooks/useRouting.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { useCallback } from 'react';
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
|
||||||
|
import { getMostRecentOverviewPage } from '../ducks/history/history';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* useRouting - hook for re-uable reoting related code.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function useRouting() {
|
||||||
|
const history = useHistory();
|
||||||
|
const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage);
|
||||||
|
|
||||||
|
const navigateToMostRecentOverviewPage = useCallback(() => {
|
||||||
|
history.push(mostRecentOverviewPage);
|
||||||
|
}, [history, mostRecentOverviewPage]);
|
||||||
|
return { navigateToMostRecentOverviewPage };
|
||||||
|
}
|
||||||
708
ui/pages/confirm-transaction/__snapshots__/conf-tx.test.js.snap
Normal file
708
ui/pages/confirm-transaction/__snapshots__/conf-tx.test.js.snap
Normal file
@ -0,0 +1,708 @@
|
|||||||
|
// 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(3, 73, 94);"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
height="32"
|
||||||
|
width="32"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="#FB184D"
|
||||||
|
height="32"
|
||||||
|
transform="translate(-0.010232866814926739 -2.467961361206475) rotate(274.3 16 16)"
|
||||||
|
width="32"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
fill="#1888F2"
|
||||||
|
height="32"
|
||||||
|
transform="translate(0.7019171336752298 13.759175028660584) rotate(203.5 16 16)"
|
||||||
|
width="32"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
fill="#FA8900"
|
||||||
|
height="32"
|
||||||
|
transform="translate(28.820219003567207 11.830135279564011) rotate(192.7 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"
|
||||||
|
>
|
||||||
|
G
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
Goerli test 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"
|
||||||
|
>
|
||||||
|
Account 1
|
||||||
|
</h6>
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
9.107408
|
||||||
|
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
M
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
https://metamask.github.io
|
||||||
|
</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="page-container__footer"
|
||||||
|
>
|
||||||
|
<footer>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-secondary page-container__footer-button"
|
||||||
|
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>
|
||||||
|
`;
|
||||||
@ -1,8 +1,7 @@
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import { withRouter } from 'react-router-dom';
|
import { withRouter } from 'react-router-dom';
|
||||||
import { compose } from 'redux';
|
|
||||||
import log from 'loglevel';
|
import log from 'loglevel';
|
||||||
import * as actions from '../../store/actions';
|
import * as actions from '../../store/actions';
|
||||||
import txHelper from '../../helpers/utils/tx-helper';
|
import txHelper from '../../helpers/utils/tx-helper';
|
||||||
@ -10,218 +9,93 @@ import SignatureRequest from '../../components/app/signature-request';
|
|||||||
import SignatureRequestSIWE from '../../components/app/signature-request-siwe';
|
import SignatureRequestSIWE from '../../components/app/signature-request-siwe';
|
||||||
import SignatureRequestOriginal from '../../components/app/signature-request-original';
|
import SignatureRequestOriginal from '../../components/app/signature-request-original';
|
||||||
import Loading from '../../components/ui/loading-screen';
|
import Loading from '../../components/ui/loading-screen';
|
||||||
import { getMostRecentOverviewPage } from '../../ducks/history/history';
|
import { useRouting } from '../../hooks/useRouting';
|
||||||
|
import { getTotalUnapprovedSignatureRequestCount } from '../../selectors';
|
||||||
import { MESSAGE_TYPE } from '../../../shared/constants/app';
|
import { MESSAGE_TYPE } from '../../../shared/constants/app';
|
||||||
import { TransactionStatus } from '../../../shared/constants/transaction';
|
import { TransactionStatus } from '../../../shared/constants/transaction';
|
||||||
import { getSendTo } from '../../ducks/send';
|
import { getSendTo } from '../../ducks/send';
|
||||||
|
|
||||||
function mapStateToProps(state) {
|
const SIGN_MESSAGE_TYPE = {
|
||||||
const { metamask, appState } = state;
|
MESSAGE: 'message',
|
||||||
|
PERSONAL: 'personal',
|
||||||
|
TYPED: 'typed',
|
||||||
|
};
|
||||||
|
|
||||||
|
const signatureSelect = (txData) => {
|
||||||
const {
|
const {
|
||||||
unapprovedMsgCount,
|
type,
|
||||||
unapprovedPersonalMsgCount,
|
msgParams: { version, siwe },
|
||||||
unapprovedTypedMessagesCount,
|
} = txData;
|
||||||
} = metamask;
|
|
||||||
const { txId } = appState;
|
|
||||||
|
|
||||||
return {
|
// Temporarily direct only v3 and v4 requests to new code.
|
||||||
identities: state.metamask.identities,
|
if (
|
||||||
mostRecentOverviewPage: getMostRecentOverviewPage(state),
|
type === MESSAGE_TYPE.ETH_SIGN_TYPED_DATA &&
|
||||||
unapprovedTxs: state.metamask.unapprovedTxs,
|
(version === 'V3' || version === 'V4')
|
||||||
unapprovedMsgs: state.metamask.unapprovedMsgs,
|
) {
|
||||||
unapprovedPersonalMsgs: state.metamask.unapprovedPersonalMsgs,
|
return SignatureRequest;
|
||||||
unapprovedTypedMessages: state.metamask.unapprovedTypedMessages,
|
|
||||||
index: txId,
|
|
||||||
warning: state.appState.warning,
|
|
||||||
network: state.metamask.network,
|
|
||||||
chainId: state.metamask.provider.chainId,
|
|
||||||
currentCurrency: state.metamask.currentCurrency,
|
|
||||||
blockGasLimit: state.metamask.currentBlockGasLimit,
|
|
||||||
unapprovedMsgCount,
|
|
||||||
unapprovedPersonalMsgCount,
|
|
||||||
unapprovedTypedMessagesCount,
|
|
||||||
sendTo: getSendTo(state),
|
|
||||||
currentNetworkTxList: state.metamask.currentNetworkTxList,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
class ConfirmTxScreen extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
mostRecentOverviewPage: PropTypes.string.isRequired,
|
|
||||||
unapprovedMsgCount: PropTypes.number,
|
|
||||||
unapprovedPersonalMsgCount: PropTypes.number,
|
|
||||||
unapprovedTypedMessagesCount: PropTypes.number,
|
|
||||||
network: PropTypes.string,
|
|
||||||
chainId: PropTypes.string,
|
|
||||||
index: PropTypes.number,
|
|
||||||
unapprovedTxs: PropTypes.object,
|
|
||||||
unapprovedMsgs: PropTypes.object,
|
|
||||||
unapprovedPersonalMsgs: PropTypes.object,
|
|
||||||
unapprovedTypedMessages: PropTypes.object,
|
|
||||||
match: PropTypes.shape({
|
|
||||||
params: PropTypes.shape({
|
|
||||||
id: PropTypes.string,
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
|
|
||||||
currentNetworkTxList: PropTypes.array,
|
|
||||||
currentCurrency: PropTypes.string,
|
|
||||||
blockGasLimit: PropTypes.string,
|
|
||||||
history: PropTypes.object,
|
|
||||||
identities: PropTypes.object,
|
|
||||||
dispatch: PropTypes.func.isRequired,
|
|
||||||
sendTo: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
getUnapprovedMessagesTotal() {
|
|
||||||
const {
|
|
||||||
unapprovedMsgCount = 0,
|
|
||||||
unapprovedPersonalMsgCount = 0,
|
|
||||||
unapprovedTypedMessagesCount = 0,
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
unapprovedTypedMessagesCount +
|
|
||||||
unapprovedMsgCount +
|
|
||||||
unapprovedPersonalMsgCount
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getTxData() {
|
if (process.env.SIWE_V1 && siwe?.isSIWEMessage) {
|
||||||
const {
|
return SignatureRequestSIWE;
|
||||||
network,
|
}
|
||||||
index,
|
|
||||||
unapprovedTxs,
|
|
||||||
unapprovedMsgs,
|
|
||||||
unapprovedPersonalMsgs,
|
|
||||||
unapprovedTypedMessages,
|
|
||||||
match: { params: { id: transactionId } = {} },
|
|
||||||
chainId,
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
|
return SignatureRequestOriginal;
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopPropagation = (event) => {
|
||||||
|
if (event?.stopPropagation) {
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const ConfirmTxScreen = ({ match }) => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const { navigateToMostRecentOverviewPage } = useRouting();
|
||||||
|
const unapprovedMessagesTotal = useSelector(
|
||||||
|
getTotalUnapprovedSignatureRequestCount,
|
||||||
|
);
|
||||||
|
const sendTo = useSelector(getSendTo);
|
||||||
|
const {
|
||||||
|
unapprovedTxs,
|
||||||
|
identities,
|
||||||
|
currentNetworkTxList,
|
||||||
|
currentCurrency,
|
||||||
|
unapprovedMsgs,
|
||||||
|
unapprovedPersonalMsgs,
|
||||||
|
unapprovedTypedMessages,
|
||||||
|
network,
|
||||||
|
blockGasLimit,
|
||||||
|
provider: { chainId },
|
||||||
|
} = useSelector((state) => state.metamask);
|
||||||
|
const { txId: index } = useSelector((state) => state.appState);
|
||||||
|
const [prevValue, setPrevValues] = useState();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
const unconfTxList = txHelper(
|
const unconfTxList = txHelper(
|
||||||
unapprovedTxs,
|
unapprovedTxs || {},
|
||||||
unapprovedMsgs,
|
{},
|
||||||
unapprovedPersonalMsgs,
|
{},
|
||||||
unapprovedTypedMessages,
|
{},
|
||||||
network,
|
network,
|
||||||
chainId,
|
chainId,
|
||||||
);
|
);
|
||||||
|
if (unconfTxList.length === 0 && !sendTo && unapprovedMessagesTotal === 0) {
|
||||||
log.info(`rendering a combined ${unconfTxList.length} unconf msgs & txs`);
|
navigateToMostRecentOverviewPage();
|
||||||
|
|
||||||
return transactionId
|
|
||||||
? unconfTxList.find(({ id }) => `${id}` === transactionId)
|
|
||||||
: unconfTxList[index];
|
|
||||||
}
|
|
||||||
|
|
||||||
signatureSelect(txData) {
|
|
||||||
const {
|
|
||||||
type,
|
|
||||||
msgParams: { version, siwe },
|
|
||||||
} = txData;
|
|
||||||
|
|
||||||
// Temporarily direct only v3 and v4 requests to new code.
|
|
||||||
if (
|
|
||||||
type === MESSAGE_TYPE.ETH_SIGN_TYPED_DATA &&
|
|
||||||
(version === 'V3' || version === 'V4')
|
|
||||||
) {
|
|
||||||
return SignatureRequest;
|
|
||||||
}
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
if (process.env.SIWE_V1 && siwe?.isSIWEMessage) {
|
useEffect(() => {
|
||||||
return SignatureRequestSIWE;
|
if (!prevValue) {
|
||||||
|
setPrevValues({ index, unapprovedTxs });
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
return SignatureRequestOriginal;
|
|
||||||
}
|
|
||||||
|
|
||||||
signMessage(msgData, event) {
|
|
||||||
log.info('conf-tx.js: signing message');
|
|
||||||
const params = msgData.msgParams;
|
|
||||||
params.metamaskId = msgData.id;
|
|
||||||
this.stopPropagation(event);
|
|
||||||
return this.props.dispatch(actions.signMsg(params));
|
|
||||||
}
|
|
||||||
|
|
||||||
stopPropagation(event) {
|
|
||||||
if (event?.stopPropagation) {
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
signPersonalMessage(msgData, event) {
|
|
||||||
log.info('conf-tx.js: signing personal message');
|
|
||||||
const params = msgData.msgParams;
|
|
||||||
params.metamaskId = msgData.id;
|
|
||||||
this.stopPropagation(event);
|
|
||||||
return this.props.dispatch(actions.signPersonalMsg(params));
|
|
||||||
}
|
|
||||||
|
|
||||||
signTypedMessage(msgData, event) {
|
|
||||||
log.info('conf-tx.js: signing typed message');
|
|
||||||
const params = msgData.msgParams;
|
|
||||||
params.metamaskId = msgData.id;
|
|
||||||
this.stopPropagation(event);
|
|
||||||
return this.props.dispatch(actions.signTypedMsg(params));
|
|
||||||
}
|
|
||||||
|
|
||||||
cancelMessage(msgData, event) {
|
|
||||||
log.info('canceling message');
|
|
||||||
this.stopPropagation(event);
|
|
||||||
return this.props.dispatch(actions.cancelMsg(msgData));
|
|
||||||
}
|
|
||||||
|
|
||||||
cancelPersonalMessage(msgData, event) {
|
|
||||||
log.info('canceling personal message');
|
|
||||||
this.stopPropagation(event);
|
|
||||||
return this.props.dispatch(actions.cancelPersonalMsg(msgData));
|
|
||||||
}
|
|
||||||
|
|
||||||
cancelTypedMessage(msgData, event) {
|
|
||||||
log.info('canceling typed message');
|
|
||||||
this.stopPropagation(event);
|
|
||||||
return this.props.dispatch(actions.cancelTypedMsg(msgData));
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const {
|
|
||||||
unapprovedTxs = {},
|
|
||||||
history,
|
|
||||||
mostRecentOverviewPage,
|
|
||||||
network,
|
|
||||||
chainId,
|
|
||||||
sendTo,
|
|
||||||
} = this.props;
|
|
||||||
const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network, chainId);
|
|
||||||
|
|
||||||
if (
|
|
||||||
unconfTxList.length === 0 &&
|
|
||||||
!sendTo &&
|
|
||||||
this.getUnapprovedMessagesTotal() === 0
|
|
||||||
) {
|
|
||||||
history.push(mostRecentOverviewPage);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
const {
|
|
||||||
unapprovedTxs = {},
|
|
||||||
network,
|
|
||||||
chainId,
|
|
||||||
currentNetworkTxList,
|
|
||||||
sendTo,
|
|
||||||
history,
|
|
||||||
match: { params: { id: transactionId } = {} },
|
|
||||||
mostRecentOverviewPage,
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
let prevTx;
|
let prevTx;
|
||||||
|
const { params: { id: transactionId } = {} } = match;
|
||||||
if (transactionId) {
|
if (transactionId) {
|
||||||
prevTx = currentNetworkTxList.find(({ id }) => `${id}` === transactionId);
|
prevTx = currentNetworkTxList.find(({ id }) => `${id}` === transactionId);
|
||||||
} else {
|
} else {
|
||||||
const { index: prevIndex, unapprovedTxs: prevUnapprovedTxs } = prevProps;
|
const { index: prevIndex, unapprovedTxs: prevUnapprovedTxs } = prevValue;
|
||||||
const prevUnconfTxList = txHelper(
|
const prevUnconfTxList = txHelper(
|
||||||
prevUnapprovedTxs,
|
prevUnapprovedTxs,
|
||||||
{},
|
{},
|
||||||
@ -235,57 +109,119 @@ class ConfirmTxScreen extends Component {
|
|||||||
currentNetworkTxList.find(({ id }) => id === prevTxData.id) || {};
|
currentNetworkTxList.find(({ id }) => id === prevTxData.id) || {};
|
||||||
}
|
}
|
||||||
|
|
||||||
const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network, chainId);
|
const unconfTxList = txHelper(
|
||||||
|
unapprovedTxs || {},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
network,
|
||||||
|
chainId,
|
||||||
|
);
|
||||||
|
|
||||||
if (prevTx && prevTx.status === TransactionStatus.dropped) {
|
if (prevTx && prevTx.status === TransactionStatus.dropped) {
|
||||||
this.props.dispatch(
|
dispatch(
|
||||||
actions.showModal({
|
actions.showModal({
|
||||||
name: 'TRANSACTION_CONFIRMED',
|
name: 'TRANSACTION_CONFIRMED',
|
||||||
onSubmit: () => history.push(mostRecentOverviewPage),
|
onSubmit: () => navigateToMostRecentOverviewPage(),
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (unconfTxList.length === 0 && !sendTo && unapprovedMessagesTotal === 0) {
|
||||||
unconfTxList.length === 0 &&
|
navigateToMostRecentOverviewPage();
|
||||||
!sendTo &&
|
|
||||||
this.getUnapprovedMessagesTotal() === 0
|
|
||||||
) {
|
|
||||||
this.props.history.push(mostRecentOverviewPage);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { currentCurrency, blockGasLimit } = this.props;
|
|
||||||
|
|
||||||
const txData = this.getTxData() || {};
|
|
||||||
const { msgParams } = txData;
|
|
||||||
|
|
||||||
log.debug('msgParams detected, rendering pending msg');
|
|
||||||
|
|
||||||
if (!msgParams) {
|
|
||||||
return <Loading />;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const SigComponent = this.signatureSelect(txData);
|
setPrevValues({ index, unapprovedTxs });
|
||||||
return (
|
}, [
|
||||||
<SigComponent
|
chainId,
|
||||||
txData={txData}
|
currentNetworkTxList,
|
||||||
key={txData.id}
|
match,
|
||||||
identities={this.props.identities}
|
network,
|
||||||
currentCurrency={currentCurrency}
|
sendTo,
|
||||||
blockGasLimit={blockGasLimit}
|
unapprovedMessagesTotal,
|
||||||
signMessage={this.signMessage.bind(this, txData)}
|
unapprovedTxs,
|
||||||
signPersonalMessage={this.signPersonalMessage.bind(this, txData)}
|
]);
|
||||||
signTypedMessage={this.signTypedMessage.bind(this, txData)}
|
|
||||||
cancelMessage={this.cancelMessage.bind(this, txData)}
|
const getTxData = () => {
|
||||||
cancelPersonalMessage={this.cancelPersonalMessage.bind(this, txData)}
|
const { params: { id: transactionId } = {} } = match;
|
||||||
cancelTypedMessage={this.cancelTypedMessage.bind(this, txData)}
|
|
||||||
/>
|
const unconfTxList = txHelper(
|
||||||
|
unapprovedTxs || {},
|
||||||
|
unapprovedMsgs,
|
||||||
|
unapprovedPersonalMsgs,
|
||||||
|
unapprovedTypedMessages,
|
||||||
|
network,
|
||||||
|
chainId,
|
||||||
);
|
);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default compose(withRouter, connect(mapStateToProps))(ConfirmTxScreen);
|
log.info(`rendering a combined ${unconfTxList.length} unconf msgs & txs`);
|
||||||
|
|
||||||
|
return transactionId
|
||||||
|
? unconfTxList.find(({ id }) => `${id}` === transactionId)
|
||||||
|
: unconfTxList[index];
|
||||||
|
};
|
||||||
|
|
||||||
|
const txData = getTxData() || {};
|
||||||
|
|
||||||
|
const { msgParams } = txData;
|
||||||
|
if (!msgParams) {
|
||||||
|
return <Loading />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const signMessage = (type) => (event) => {
|
||||||
|
stopPropagation(event);
|
||||||
|
const params = txData.msgParams;
|
||||||
|
params.metamaskId = txData.id;
|
||||||
|
let action;
|
||||||
|
if (type === SIGN_MESSAGE_TYPE.MESSAGE) {
|
||||||
|
action = actions.signMsg;
|
||||||
|
} else if (type === SIGN_MESSAGE_TYPE.PERSONAL) {
|
||||||
|
action = actions.signPersonalMsg;
|
||||||
|
} else {
|
||||||
|
action = actions.signTypedMsg;
|
||||||
|
}
|
||||||
|
return dispatch(action?.(params));
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancelMessage = (type) => (event) => {
|
||||||
|
stopPropagation(event);
|
||||||
|
let action;
|
||||||
|
if (type === SIGN_MESSAGE_TYPE.MESSAGE) {
|
||||||
|
action = actions.cancelMsg;
|
||||||
|
} else if (type === SIGN_MESSAGE_TYPE.PERSONAL) {
|
||||||
|
action = actions.cancelPersonalMsg;
|
||||||
|
} else {
|
||||||
|
action = actions.cancelTypedMsg;
|
||||||
|
}
|
||||||
|
return dispatch(action(txData));
|
||||||
|
};
|
||||||
|
|
||||||
|
const SigComponent = signatureSelect(txData);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SigComponent
|
||||||
|
txData={txData}
|
||||||
|
key={txData.id}
|
||||||
|
identities={identities}
|
||||||
|
currentCurrency={currentCurrency}
|
||||||
|
blockGasLimit={blockGasLimit}
|
||||||
|
signMessage={signMessage(SIGN_MESSAGE_TYPE.MESSAGE)}
|
||||||
|
signPersonalMessage={signMessage(SIGN_MESSAGE_TYPE.PERSONAL)}
|
||||||
|
signTypedMessage={signMessage(SIGN_MESSAGE_TYPE.TYPED)}
|
||||||
|
cancelMessage={cancelMessage(SIGN_MESSAGE_TYPE.MESSAGE)}
|
||||||
|
cancelPersonalMessage={cancelMessage(SIGN_MESSAGE_TYPE.PERSONAL)}
|
||||||
|
cancelTypedMessage={cancelMessage(SIGN_MESSAGE_TYPE.TYPED)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ConfirmTxScreen.propTypes = {
|
||||||
|
match: PropTypes.shape({
|
||||||
|
params: PropTypes.shape({
|
||||||
|
id: PropTypes.string,
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
export default withRouter(ConfirmTxScreen);
|
||||||
|
|||||||
68
ui/pages/confirm-transaction/conf-tx.test.js
Normal file
68
ui/pages/confirm-transaction/conf-tx.test.js
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import configureMockStore from 'redux-mock-store';
|
||||||
|
import { renderWithProvider } from '../../../test/lib/render-helpers';
|
||||||
|
import ConfTx from './conf-tx';
|
||||||
|
|
||||||
|
const mockState = {
|
||||||
|
metamask: {
|
||||||
|
identities: {
|
||||||
|
'0x8eeee1781fd885ff5ddef7789486676961873d12': {
|
||||||
|
address: '0x8eeee1781fd885ff5ddef7789486676961873d12',
|
||||||
|
lastSelected: 1673587189888,
|
||||||
|
name: 'Account 1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
unapprovedMsgs: {},
|
||||||
|
unapprovedMsgCount: 0,
|
||||||
|
unapprovedPersonalMsgs: {},
|
||||||
|
unapprovedPersonalMsgCount: 0,
|
||||||
|
unapprovedTypedMessages: {
|
||||||
|
267460284130106: {
|
||||||
|
id: 267460284130106,
|
||||||
|
msgParams: {
|
||||||
|
data: '{"domain":{"chainId":"5","name":"Ether Mail","verifyingContract":"0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC","version":"1"},"message":{"contents":"Hello, Bob!","from":{"name":"Cow","wallets":["0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826","0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF"]},"to":[{"name":"Bob","wallets":["0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB","0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57","0xB0B0b0b0b0b0B000000000000000000000000000"]}]},"primaryType":"Mail","types":{"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}],"Group":[{"name":"name","type":"string"},{"name":"members","type":"Person[]"}],"Mail":[{"name":"from","type":"Person"},{"name":"to","type":"Person[]"},{"name":"contents","type":"string"}],"Person":[{"name":"name","type":"string"},{"name":"wallets","type":"address[]"}]}}',
|
||||||
|
from: '0x8eeee1781fd885ff5ddef7789486676961873d12',
|
||||||
|
version: 'V4',
|
||||||
|
origin: 'https://metamask.github.io',
|
||||||
|
},
|
||||||
|
time: 1674533844299,
|
||||||
|
status: 'unapproved',
|
||||||
|
type: 'eth_signTypedData',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
unapprovedTypedMessagesCount: 1,
|
||||||
|
provider: { chainId: '0x5', type: 'goerli' },
|
||||||
|
keyrings: [],
|
||||||
|
frequentRpcListDetail: [],
|
||||||
|
subjectMetadata: {},
|
||||||
|
cachedBalances: {
|
||||||
|
'0x5': {},
|
||||||
|
},
|
||||||
|
accounts: {
|
||||||
|
'0x8eeee1781fd885ff5ddef7789486676961873d12': {
|
||||||
|
address: '0x8eeee1781fd885ff5ddef7789486676961873d12',
|
||||||
|
balance: '0x7e64033f2fdb0436',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
selectedAddress: '0x8eeee1781fd885ff5ddef7789486676961873d12',
|
||||||
|
addressBook: {},
|
||||||
|
tokenList: {},
|
||||||
|
},
|
||||||
|
appState: {
|
||||||
|
warning: null,
|
||||||
|
txId: 0,
|
||||||
|
},
|
||||||
|
history: { mostRecentOverviewPage: '/' },
|
||||||
|
send: { draftTransactions: {} },
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('Signature Request Component', () => {
|
||||||
|
const store = configureMockStore()(mockState);
|
||||||
|
|
||||||
|
describe('render', () => {
|
||||||
|
it('should match snapshot', () => {
|
||||||
|
const { container } = renderWithProvider(<ConfTx />, store);
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -532,6 +532,20 @@ export function getTotalUnapprovedMessagesCount(state) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getTotalUnapprovedSignatureRequestCount(state) {
|
||||||
|
const {
|
||||||
|
unapprovedMsgCount = 0,
|
||||||
|
unapprovedPersonalMsgCount = 0,
|
||||||
|
unapprovedTypedMessagesCount = 0,
|
||||||
|
} = state.metamask;
|
||||||
|
|
||||||
|
return (
|
||||||
|
unapprovedMsgCount +
|
||||||
|
unapprovedPersonalMsgCount +
|
||||||
|
unapprovedTypedMessagesCount
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function getUnapprovedTxCount(state) {
|
export function getUnapprovedTxCount(state) {
|
||||||
const { unapprovedTxs = {} } = state.metamask;
|
const { unapprovedTxs = {} } = state.metamask;
|
||||||
return Object.keys(unapprovedTxs).length;
|
return Object.keys(unapprovedTxs).length;
|
||||||
@ -841,7 +855,7 @@ export const getMemoizedMetadataContractName = createDeepEqualSelector(
|
|||||||
export const getUnapprovedTransactions = (state) =>
|
export const getUnapprovedTransactions = (state) =>
|
||||||
state.metamask.unapprovedTxs;
|
state.metamask.unapprovedTxs;
|
||||||
|
|
||||||
const getCurrentNetworkTransactionList = (state) =>
|
export const getCurrentNetworkTransactionList = (state) =>
|
||||||
state.metamask.currentNetworkTxList;
|
state.metamask.currentNetworkTxList;
|
||||||
|
|
||||||
export const getTxData = (state) => state.confirmTransaction.txData;
|
export const getTxData = (state) => state.confirmTransaction.txData;
|
||||||
|
|||||||
@ -268,4 +268,10 @@ describe('Selectors', () => {
|
|||||||
const useCurrencyRateCheck = selectors.getUseCurrencyRateCheck(mockState);
|
const useCurrencyRateCheck = selectors.getUseCurrencyRateCheck(mockState);
|
||||||
expect(useCurrencyRateCheck).toStrictEqual(true);
|
expect(useCurrencyRateCheck).toStrictEqual(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('#getTotalUnapprovedSignatureRequestCount', () => {
|
||||||
|
const totalUnapprovedSignatureRequestCount =
|
||||||
|
selectors.getTotalUnapprovedSignatureRequestCount(mockState);
|
||||||
|
expect(totalUnapprovedSignatureRequestCount).toStrictEqual(0);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user