mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Refactoring confirm-transaction-base component (#17484)
This commit is contained in:
Jyoti Puri
GitHub
parent
80fb59f0a0
commit
26222a9b27
@ -28,6 +28,9 @@ import DepositPopover from '../deposit-popover/deposit-popover';
|
|||||||
import { fetchTokenBalance } from '../../../pages/swaps/swaps.util';
|
import { fetchTokenBalance } from '../../../pages/swaps/swaps.util';
|
||||||
import SetApproveForAllWarning from '../set-approval-for-all-warning';
|
import SetApproveForAllWarning from '../set-approval-for-all-warning';
|
||||||
import { useI18nContext } from '../../../hooks/useI18nContext';
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||||
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||||
|
import useTransactionInsights from '../../../hooks/useTransactionInsights';
|
||||||
|
///: END:ONLY_INCLUDE_IN(flask)
|
||||||
import {
|
import {
|
||||||
getAccountName,
|
getAccountName,
|
||||||
getAddressBookEntry,
|
getAddressBookEntry,
|
||||||
@ -84,8 +87,8 @@ const ConfirmPageContainer = (props) => {
|
|||||||
supportsEIP1559,
|
supportsEIP1559,
|
||||||
nativeCurrency,
|
nativeCurrency,
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||||
insightComponent,
|
txData,
|
||||||
///: END:ONLY_INCLUDE_IN
|
///: END:ONLY_INCLUDE_IN(flask)
|
||||||
assetStandard,
|
assetStandard,
|
||||||
isApprovalOrRejection,
|
isApprovalOrRejection,
|
||||||
} = props;
|
} = props;
|
||||||
@ -127,6 +130,14 @@ const ConfirmPageContainer = (props) => {
|
|||||||
setCollectionBalance(tokenBalance?.balance?.words?.[0] || 0);
|
setCollectionBalance(tokenBalance?.balance?.words?.[0] || 0);
|
||||||
}, [fromAddress, tokenAddress]);
|
}, [fromAddress, tokenAddress]);
|
||||||
|
|
||||||
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||||
|
// As confirm-transction-base is converted to functional component
|
||||||
|
// this code can bemoved to it.
|
||||||
|
const insightComponent = useTransactionInsights({
|
||||||
|
txData,
|
||||||
|
});
|
||||||
|
///: END:ONLY_INCLUDE_IN
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isSetApproveForAll && assetStandard === TokenStandard.ERC721) {
|
if (isSetApproveForAll && assetStandard === TokenStandard.ERC721) {
|
||||||
fetchCollectionBalance();
|
fetchCollectionBalance();
|
||||||
@ -336,8 +347,8 @@ ConfirmPageContainer.propTypes = {
|
|||||||
dataHexComponent: PropTypes.node,
|
dataHexComponent: PropTypes.node,
|
||||||
detailsComponent: PropTypes.node,
|
detailsComponent: PropTypes.node,
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||||
insightComponent: PropTypes.node,
|
txData: PropTypes.object,
|
||||||
///: END:ONLY_INCLUDE_IN
|
///: END:ONLY_INCLUDE_IN(flask)
|
||||||
tokenAddress: PropTypes.string,
|
tokenAddress: PropTypes.string,
|
||||||
nonce: PropTypes.string,
|
nonce: PropTypes.string,
|
||||||
warning: PropTypes.string,
|
warning: PropTypes.string,
|
||||||
|
|||||||
@ -66,6 +66,6 @@ CurrencyDisplay.propTypes = {
|
|||||||
prefix: PropTypes.string,
|
prefix: PropTypes.string,
|
||||||
prefixComponent: PropTypes.node,
|
prefixComponent: PropTypes.node,
|
||||||
style: PropTypes.object,
|
style: PropTypes.object,
|
||||||
suffix: PropTypes.string,
|
suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
||||||
value: PropTypes.string,
|
value: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|||||||
85
ui/hooks/useTransactionInsights.js
Normal file
85
ui/hooks/useTransactionInsights.js
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
|
||||||
|
import { CHAIN_ID_TO_NETWORK_ID_MAP } from '../../shared/constants/network';
|
||||||
|
import { stripHexPrefix } from '../../shared/modules/hexstring-utils';
|
||||||
|
import { TransactionType } from '../../shared/constants/transaction';
|
||||||
|
import { getInsightSnaps } from '../selectors';
|
||||||
|
import { DropdownTab, Tab } from '../components/ui/tabs';
|
||||||
|
import { SnapInsight } from '../components/app/confirm-page-container/flask/snap-insight';
|
||||||
|
|
||||||
|
const isAllowedTransactionTypes = (transactionType) =>
|
||||||
|
transactionType === TransactionType.contractInteraction ||
|
||||||
|
transactionType === TransactionType.simpleSend ||
|
||||||
|
transactionType === TransactionType.tokenMethodSafeTransferFrom ||
|
||||||
|
transactionType === TransactionType.tokenMethodTransferFrom ||
|
||||||
|
transactionType === TransactionType.tokenMethodTransfer;
|
||||||
|
|
||||||
|
// A hook was needed to return JSX here as the way Tabs work JSX has to be included in
|
||||||
|
// https://github.com/MetaMask/metamask-extension/blob/develop/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js#L129
|
||||||
|
// Thus it is not possible to use React Component here
|
||||||
|
const useTransactionInsights = ({ txData }) => {
|
||||||
|
const insightSnaps = useSelector(getInsightSnaps);
|
||||||
|
const [selectedInsightSnapId, setSelectedInsightSnapId] = useState(
|
||||||
|
insightSnaps[0]?.id,
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (insightSnaps.length && !selectedInsightSnapId) {
|
||||||
|
setSelectedInsightSnapId(insightSnaps[0]?.id);
|
||||||
|
}
|
||||||
|
}, [insightSnaps, selectedInsightSnapId, setSelectedInsightSnapId]);
|
||||||
|
|
||||||
|
if (!isAllowedTransactionTypes(txData.type) || !insightSnaps.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedSnap = insightSnaps.find(
|
||||||
|
({ id }) => id === selectedInsightSnapId,
|
||||||
|
);
|
||||||
|
|
||||||
|
const { txParams, chainId, origin } = txData;
|
||||||
|
const networkId = CHAIN_ID_TO_NETWORK_ID_MAP[chainId];
|
||||||
|
const caip2ChainId = `eip155:${networkId ?? stripHexPrefix(chainId)}`;
|
||||||
|
|
||||||
|
if (insightSnaps.length === 1) {
|
||||||
|
return (
|
||||||
|
<Tab
|
||||||
|
className="confirm-page-container-content__tab"
|
||||||
|
name={selectedSnap.manifest.proposedName}
|
||||||
|
>
|
||||||
|
<SnapInsight
|
||||||
|
transaction={txParams}
|
||||||
|
origin={origin}
|
||||||
|
chainId={caip2ChainId}
|
||||||
|
selectedSnap={selectedSnap}
|
||||||
|
/>
|
||||||
|
</Tab>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const dropdownOptions = insightSnaps?.map(
|
||||||
|
({ id, manifest: { proposedName } }) => ({
|
||||||
|
value: id,
|
||||||
|
name: proposedName,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownTab
|
||||||
|
className="confirm-page-container-content__tab"
|
||||||
|
options={dropdownOptions}
|
||||||
|
selectedOption={selectedInsightSnapId}
|
||||||
|
onChange={(snapId) => setSelectedInsightSnapId(snapId)}
|
||||||
|
>
|
||||||
|
<SnapInsight
|
||||||
|
transaction={txParams}
|
||||||
|
origin={origin}
|
||||||
|
chainId={caip2ChainId}
|
||||||
|
selectedSnap={selectedSnap}
|
||||||
|
/>
|
||||||
|
</DropdownTab>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useTransactionInsights;
|
||||||
@ -0,0 +1,542 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Confirm Transaction Base should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="page-container"
|
||||||
|
data-testid="page-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-navigation"
|
||||||
|
style="display: none;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-navigation__container"
|
||||||
|
data-testid="navigation-container"
|
||||||
|
style="visibility: hidden;"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="confirm-page-container-navigation__arrow"
|
||||||
|
data-testid="first-page"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa fa-angle-double-left fa-2x"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="confirm-page-container-navigation__arrow"
|
||||||
|
data-testid="previous-page"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa fa-angle-left fa-2x"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-navigation__textcontainer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-navigation__navtext"
|
||||||
|
>
|
||||||
|
0
|
||||||
|
|
||||||
|
of
|
||||||
|
|
||||||
|
0
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-navigation__longtext"
|
||||||
|
>
|
||||||
|
requests waiting to be acknowledged
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-navigation__container"
|
||||||
|
style="visibility: hidden;"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="confirm-page-container-navigation__arrow"
|
||||||
|
data-testid="next-page"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa fa-angle-right fa-2x"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="confirm-page-container-navigation__arrow"
|
||||||
|
data-testid="last-page"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa fa-angle-double-right fa-2x"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient sender-to-recipient--default"
|
||||||
|
data-testid="sender-to-recipient"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient__party sender-to-recipient__party--sender"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient__sender-icon"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="identicon"
|
||||||
|
style="height: 24px; width: 24px; border-radius: 12px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 24px; height: 24px; display: inline-block; background: rgb(24, 151, 242);"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
height="24"
|
||||||
|
width="24"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="#2362E1"
|
||||||
|
height="24"
|
||||||
|
transform="translate(2.6919976385943882 -4.000732967425142) rotate(458.4 12 12)"
|
||||||
|
width="24"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
fill="#F94301"
|
||||||
|
height="24"
|
||||||
|
transform="translate(-11.522594467237658 5.994263726614974) rotate(268.8 12 12)"
|
||||||
|
width="24"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
fill="#FA7900"
|
||||||
|
height="24"
|
||||||
|
transform="translate(-6.8071905594760675 22.110011910512533) rotate(117.3 12 12)"
|
||||||
|
width="24"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient__tooltip-wrapper"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-describedby="tippy-tooltip-1"
|
||||||
|
class="sender-to-recipient__tooltip-container"
|
||||||
|
data-original-title="null"
|
||||||
|
data-tooltipped=""
|
||||||
|
style="display: inline;"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient__name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient__arrow-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient__arrow-circle"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa fa-arrow-right sender-to-recipient__arrow-circle__icon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient__sender-icon"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="identicon"
|
||||||
|
style="height: 24px; width: 24px; border-radius: 12px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 24px; height: 24px; display: inline-block; background: rgb(249, 108, 1);"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
height="24"
|
||||||
|
width="24"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="#2343E1"
|
||||||
|
height="24"
|
||||||
|
transform="translate(1.995636908144359 -2.9078959833795546) rotate(391.8 12 12)"
|
||||||
|
width="24"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
fill="#F2CA02"
|
||||||
|
height="24"
|
||||||
|
transform="translate(-10.28190700465709 0.16715759851871784) rotate(278.6 12 12)"
|
||||||
|
width="24"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
fill="#C8142C"
|
||||||
|
height="24"
|
||||||
|
transform="translate(16.427173764273576 -13.297284285395893) rotate(345.3 12 12)"
|
||||||
|
width="24"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient__tooltip-wrapper"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient__tooltip-container"
|
||||||
|
style="display: inline;"
|
||||||
|
tabindex="0"
|
||||||
|
title=""
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="sender-to-recipient__name"
|
||||||
|
data-testid="sender-to-recipient__name"
|
||||||
|
>
|
||||||
|
0x85c...D65e
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-content"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-summary"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-summary__action-row"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-summary__action"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="confirm-page-container-summary__action__name"
|
||||||
|
>
|
||||||
|
Sending ETH
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-summary__nonce"
|
||||||
|
>
|
||||||
|
#undefined
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-summary__title"
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography confirm-page-container-summary__title-text typography--h3 typography--weight-normal typography--style-normal typography--color-text-default"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="currency-display-component"
|
||||||
|
title="0.0001"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="currency-display-component__prefix"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fab fa-ethereum"
|
||||||
|
style="font-size: 24px;"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="currency-display-component__text"
|
||||||
|
>
|
||||||
|
0.0001
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="tabs"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="tabs__list"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="tab confirm-page-container-content__tab tab--active"
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
Details
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="tab confirm-page-container-content__tab"
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
Data
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="tab confirm-page-container-content__tab"
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
Hex
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
class="tabs__content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-content__details"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-alerts"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="transaction-detail"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-detail-edit"
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-detail-rows"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-detail-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-detail-item__row"
|
||||||
|
>
|
||||||
|
<h6
|
||||||
|
class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||||
|
>
|
||||||
|
Estimated gas fee
|
||||||
|
<div
|
||||||
|
class="info-tooltip"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
aria-describedby="tippy-tooltip-2"
|
||||||
|
class="info-tooltip__tooltip-container"
|
||||||
|
data-original-title="null"
|
||||||
|
data-tooltipped=""
|
||||||
|
style="display: inline;"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 10 10"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
|
||||||
|
fill="var(--color-icon-alternative)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</h6>
|
||||||
|
<div
|
||||||
|
class="transaction-detail-item__detail-values"
|
||||||
|
>
|
||||||
|
<h6
|
||||||
|
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-content__currency-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="currency-display-component"
|
||||||
|
title="0.000021"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="currency-display-component__prefix"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="currency-display-component__text"
|
||||||
|
>
|
||||||
|
0.000021
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-detail-item__row"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<h6
|
||||||
|
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
|
||||||
|
>
|
||||||
|
<strong>
|
||||||
|
Max fee:
|
||||||
|
</strong>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-content__currency-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="currency-display-component"
|
||||||
|
title="0.000021"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="currency-display-component__prefix"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="currency-display-component__text"
|
||||||
|
>
|
||||||
|
0.000021
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-detail-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-detail-item__row"
|
||||||
|
>
|
||||||
|
<h6
|
||||||
|
class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||||
|
>
|
||||||
|
Total
|
||||||
|
</h6>
|
||||||
|
<div
|
||||||
|
class="transaction-detail-item__detail-values"
|
||||||
|
>
|
||||||
|
<h6
|
||||||
|
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-content__total-value"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="currency-display-component"
|
||||||
|
title="0.000121"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="currency-display-component__prefix"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="currency-display-component__text"
|
||||||
|
>
|
||||||
|
0.000121
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-detail-item__row"
|
||||||
|
>
|
||||||
|
<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-text-alternative"
|
||||||
|
>
|
||||||
|
Amount + gas fee
|
||||||
|
</h6>
|
||||||
|
<h6
|
||||||
|
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-content__total-amount"
|
||||||
|
>
|
||||||
|
<strong>
|
||||||
|
Max amount:
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="currency-display-component"
|
||||||
|
title="0.000121"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="currency-display-component__prefix"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="currency-display-component__text"
|
||||||
|
>
|
||||||
|
0.000121
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="confirm-page-container-content__error-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="error-message"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa fa-exclamation-circle error-message__icon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="error-message__text"
|
||||||
|
>
|
||||||
|
Insufficient funds.
|
||||||
|
</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"
|
||||||
|
disabled=""
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,8 +1,5 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
||||||
import { stripHexPrefix } from 'ethereumjs-util';
|
|
||||||
///: END:ONLY_INCLUDE_IN
|
|
||||||
import ConfirmPageContainer from '../../components/app/confirm-page-container';
|
import ConfirmPageContainer from '../../components/app/confirm-page-container';
|
||||||
import TransactionDecoding from '../../components/app/transaction-decoding';
|
import TransactionDecoding from '../../components/app/transaction-decoding';
|
||||||
import { isBalanceSufficient } from '../send/send.utils';
|
import { isBalanceSufficient } from '../send/send.utils';
|
||||||
@ -56,17 +53,7 @@ import {
|
|||||||
|
|
||||||
import { MIN_GAS_LIMIT_DEC } from '../send/send.constants';
|
import { MIN_GAS_LIMIT_DEC } from '../send/send.constants';
|
||||||
|
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
|
||||||
import { SnapInsight } from '../../components/app/confirm-page-container/flask/snap-insight';
|
|
||||||
import { DropdownTab, Tab } from '../../components/ui/tabs';
|
|
||||||
///: END:ONLY_INCLUDE_IN
|
|
||||||
|
|
||||||
import {
|
|
||||||
NETWORK_TO_NAME_MAP,
|
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
||||||
CHAIN_ID_TO_NETWORK_ID_MAP,
|
|
||||||
///: END:ONLY_INCLUDE_IN
|
|
||||||
} from '../../../shared/constants/network';
|
|
||||||
import {
|
import {
|
||||||
addHexes,
|
addHexes,
|
||||||
hexToDecimal,
|
hexToDecimal,
|
||||||
@ -158,9 +145,6 @@ export default class ConfirmTransactionBase extends Component {
|
|||||||
isMultiLayerFeeNetwork: PropTypes.bool,
|
isMultiLayerFeeNetwork: PropTypes.bool,
|
||||||
isBuyableChain: PropTypes.bool,
|
isBuyableChain: PropTypes.bool,
|
||||||
isApprovalOrRejection: PropTypes.bool,
|
isApprovalOrRejection: PropTypes.bool,
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
||||||
insightSnaps: PropTypes.arrayOf(PropTypes.object),
|
|
||||||
///: END:ONLY_INCLUDE_IN
|
|
||||||
assetStandard: PropTypes.string,
|
assetStandard: PropTypes.string,
|
||||||
useCurrencyRateCheck: PropTypes.bool,
|
useCurrencyRateCheck: PropTypes.bool,
|
||||||
};
|
};
|
||||||
@ -173,9 +157,6 @@ export default class ConfirmTransactionBase extends Component {
|
|||||||
editingGas: false,
|
editingGas: false,
|
||||||
userAcknowledgedGasMissing: false,
|
userAcknowledgedGasMissing: false,
|
||||||
showWarningModal: false,
|
showWarningModal: false,
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
||||||
selectedInsightSnapId: this.props.insightSnaps[0]?.id,
|
|
||||||
///: END:ONLY_INCLUDE_IN
|
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
componentDidUpdate(prevProps) {
|
||||||
@ -319,12 +300,6 @@ export default class ConfirmTransactionBase extends Component {
|
|||||||
this.setState({ editingGas: false });
|
this.setState({ editingGas: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
||||||
handleSnapSelected(snapId) {
|
|
||||||
this.setState({ selectedInsightSnapId: snapId });
|
|
||||||
}
|
|
||||||
///: END:ONLY_INCLUDE_IN
|
|
||||||
|
|
||||||
setUserAcknowledgedGasMissing() {
|
setUserAcknowledgedGasMissing() {
|
||||||
this.setState({ userAcknowledgedGasMissing: true });
|
this.setState({ userAcknowledgedGasMissing: true });
|
||||||
}
|
}
|
||||||
@ -753,67 +728,6 @@ export default class ConfirmTransactionBase extends Component {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
||||||
renderInsight() {
|
|
||||||
const { txData, insightSnaps } = this.props;
|
|
||||||
const { selectedInsightSnapId } = this.state;
|
|
||||||
const { txParams, chainId, origin } = txData;
|
|
||||||
|
|
||||||
const selectedSnap = insightSnaps.find(
|
|
||||||
({ id }) => id === selectedInsightSnapId,
|
|
||||||
);
|
|
||||||
|
|
||||||
const allowedTransactionTypes =
|
|
||||||
txData.type === TransactionType.contractInteraction ||
|
|
||||||
txData.type === TransactionType.simpleSend ||
|
|
||||||
txData.type === TransactionType.tokenMethodSafeTransferFrom ||
|
|
||||||
txData.type === TransactionType.tokenMethodTransferFrom ||
|
|
||||||
txData.type === TransactionType.tokenMethodTransfer;
|
|
||||||
|
|
||||||
const networkId = CHAIN_ID_TO_NETWORK_ID_MAP[chainId];
|
|
||||||
const caip2ChainId = `eip155:${networkId ?? stripHexPrefix(chainId)}`;
|
|
||||||
|
|
||||||
if (!allowedTransactionTypes || !insightSnaps.length) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const dropdownOptions = insightSnaps.map(
|
|
||||||
({ id, manifest: { proposedName } }) => ({
|
|
||||||
value: id,
|
|
||||||
name: proposedName,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
return insightSnaps.length > 1 ? (
|
|
||||||
<DropdownTab
|
|
||||||
className="confirm-page-container-content__tab"
|
|
||||||
options={dropdownOptions}
|
|
||||||
selectedOption={selectedInsightSnapId}
|
|
||||||
onChange={(snapId) => this.handleSnapSelected(snapId)}
|
|
||||||
>
|
|
||||||
<SnapInsight
|
|
||||||
transaction={txParams}
|
|
||||||
origin={origin}
|
|
||||||
chainId={caip2ChainId}
|
|
||||||
selectedSnap={selectedSnap}
|
|
||||||
/>
|
|
||||||
</DropdownTab>
|
|
||||||
) : (
|
|
||||||
<Tab
|
|
||||||
className="confirm-page-container-content__tab"
|
|
||||||
name={selectedSnap.manifest.proposedName}
|
|
||||||
>
|
|
||||||
<SnapInsight
|
|
||||||
transaction={txParams}
|
|
||||||
origin={origin}
|
|
||||||
chainId={caip2ChainId}
|
|
||||||
selectedSnap={selectedSnap}
|
|
||||||
/>
|
|
||||||
</Tab>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
///: END:ONLY_INCLUDE_IN
|
|
||||||
|
|
||||||
handleEdit() {
|
handleEdit() {
|
||||||
const {
|
const {
|
||||||
txData,
|
txData,
|
||||||
@ -1175,9 +1089,6 @@ export default class ConfirmTransactionBase extends Component {
|
|||||||
detailsComponent={this.renderDetails()}
|
detailsComponent={this.renderDetails()}
|
||||||
dataComponent={this.renderData(functionType)}
|
dataComponent={this.renderData(functionType)}
|
||||||
dataHexComponent={this.renderDataHex(functionType)}
|
dataHexComponent={this.renderDataHex(functionType)}
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
||||||
insightComponent={this.renderInsight()}
|
|
||||||
///: END:ONLY_INCLUDE_IN
|
|
||||||
contentComponent={contentComponent}
|
contentComponent={contentComponent}
|
||||||
nonce={customNonceValue || nonce}
|
nonce={customNonceValue || nonce}
|
||||||
unapprovedTxCount={unapprovedTxCount}
|
unapprovedTxCount={unapprovedTxCount}
|
||||||
|
|||||||
@ -37,9 +37,6 @@ import {
|
|||||||
getUnapprovedTransaction,
|
getUnapprovedTransaction,
|
||||||
getFullTxData,
|
getFullTxData,
|
||||||
getUseCurrencyRateCheck,
|
getUseCurrencyRateCheck,
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
||||||
getInsightSnaps,
|
|
||||||
///: END:ONLY_INCLUDE_IN
|
|
||||||
} from '../../selectors';
|
} from '../../selectors';
|
||||||
import { getMostRecentOverviewPage } from '../../ducks/history/history';
|
import { getMostRecentOverviewPage } from '../../ducks/history/history';
|
||||||
import {
|
import {
|
||||||
@ -195,10 +192,6 @@ const mapStateToProps = (state, ownProps) => {
|
|||||||
|
|
||||||
const isMultiLayerFeeNetwork = getIsMultiLayerFeeNetwork(state);
|
const isMultiLayerFeeNetwork = getIsMultiLayerFeeNetwork(state);
|
||||||
|
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
||||||
const insightSnaps = getInsightSnaps(state);
|
|
||||||
///: END:ONLY_INCLUDE_IN
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
balance,
|
balance,
|
||||||
fromAddress,
|
fromAddress,
|
||||||
@ -249,9 +242,6 @@ const mapStateToProps = (state, ownProps) => {
|
|||||||
isMultiLayerFeeNetwork,
|
isMultiLayerFeeNetwork,
|
||||||
chainId,
|
chainId,
|
||||||
isBuyableChain,
|
isBuyableChain,
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
||||||
insightSnaps,
|
|
||||||
///: END:ONLY_INCLUDE_IN
|
|
||||||
useCurrencyRateCheck: getUseCurrencyRateCheck(state),
|
useCurrencyRateCheck: getUseCurrencyRateCheck(state),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@ -0,0 +1,151 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import configureMockStore from 'redux-mock-store';
|
||||||
|
import thunk from 'redux-thunk';
|
||||||
|
|
||||||
|
import { renderWithProvider } from '../../../test/lib/render-helpers';
|
||||||
|
import { setBackgroundConnection } from '../../../test/jest';
|
||||||
|
import { INITIAL_SEND_STATE_FOR_EXISTING_DRAFT } from '../../../test/jest/mocks';
|
||||||
|
import { GasEstimateTypes } from '../../../shared/constants/gas';
|
||||||
|
import { HardwareKeyringTypes } from '../../../shared/constants/hardware-wallets';
|
||||||
|
import { CHAIN_IDS } from '../../../shared/constants/network';
|
||||||
|
import { domainInitialState } from '../../ducks/domains';
|
||||||
|
|
||||||
|
import ConfirmTransactionBase from './confirm-transaction-base.container';
|
||||||
|
|
||||||
|
const middleware = [thunk];
|
||||||
|
|
||||||
|
setBackgroundConnection({
|
||||||
|
getGasFeeTimeEstimate: jest.fn(),
|
||||||
|
getGasFeeEstimatesAndStartPolling: jest.fn(),
|
||||||
|
promisifiedBackground: jest.fn(),
|
||||||
|
tryReverseResolveAddress: jest.fn(),
|
||||||
|
getNextNonce: jest.fn(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const baseStore = {
|
||||||
|
send: INITIAL_SEND_STATE_FOR_EXISTING_DRAFT,
|
||||||
|
DNS: domainInitialState,
|
||||||
|
gas: {
|
||||||
|
customData: { limit: null, price: null },
|
||||||
|
},
|
||||||
|
history: { mostRecentOverviewPage: '/' },
|
||||||
|
metamask: {
|
||||||
|
unapprovedTxs: {
|
||||||
|
1: {
|
||||||
|
id: 1,
|
||||||
|
txParams: {
|
||||||
|
from: '0x0',
|
||||||
|
to: '0x85c1685cfceaa5c0bdb1609fc536e9a8387dd65e',
|
||||||
|
value: '0x5af3107a4000',
|
||||||
|
gas: '0x5208',
|
||||||
|
maxFeePerGas: '0x59682f16',
|
||||||
|
maxPriorityFeePerGas: '0x59682f00',
|
||||||
|
type: '0x2',
|
||||||
|
data: 'data',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
gasEstimateType: GasEstimateTypes.legacy,
|
||||||
|
gasFeeEstimates: {
|
||||||
|
low: '0',
|
||||||
|
medium: '1',
|
||||||
|
fast: '2',
|
||||||
|
},
|
||||||
|
selectedAddress: '0x0',
|
||||||
|
keyrings: [
|
||||||
|
{
|
||||||
|
type: HardwareKeyringTypes.hdKeyTree,
|
||||||
|
accounts: ['0x0'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
networkDetails: {
|
||||||
|
EIPS: {},
|
||||||
|
},
|
||||||
|
tokens: [],
|
||||||
|
preferences: {
|
||||||
|
useNativeCurrencyAsPrimaryCurrency: false,
|
||||||
|
},
|
||||||
|
currentCurrency: 'USD',
|
||||||
|
provider: {
|
||||||
|
chainId: CHAIN_IDS.GOERLI,
|
||||||
|
},
|
||||||
|
nativeCurrency: 'ETH',
|
||||||
|
featureFlags: {
|
||||||
|
sendHexData: false,
|
||||||
|
},
|
||||||
|
addressBook: {
|
||||||
|
[CHAIN_IDS.GOERLI]: [],
|
||||||
|
},
|
||||||
|
cachedBalances: {
|
||||||
|
[CHAIN_IDS.GOERLI]: {},
|
||||||
|
},
|
||||||
|
accounts: {
|
||||||
|
'0x0': { balance: '0x0', address: '0x0' },
|
||||||
|
},
|
||||||
|
identities: { '0x0': { address: '0x0' } },
|
||||||
|
tokenAddress: '0x32e6c34cd57087abbd59b5a4aecc4cb495924356',
|
||||||
|
tokenList: {},
|
||||||
|
ensResolutionsByAddress: {},
|
||||||
|
snaps: {},
|
||||||
|
},
|
||||||
|
confirmTransaction: {
|
||||||
|
txData: {
|
||||||
|
id: 1,
|
||||||
|
time: 1675012496170,
|
||||||
|
status: 'unapproved',
|
||||||
|
metamaskNetworkId: '5',
|
||||||
|
originalGasEstimate: '0x5208',
|
||||||
|
userEditedGasLimit: false,
|
||||||
|
chainId: '0x5',
|
||||||
|
loadingDefaults: false,
|
||||||
|
dappSuggestedGasFees: null,
|
||||||
|
sendFlowHistory: [],
|
||||||
|
txParams: {
|
||||||
|
from: '0x0',
|
||||||
|
to: '0x85c1685cfceaa5c0bdb1609fc536e9a8387dd65e',
|
||||||
|
value: '0x5af3107a4000',
|
||||||
|
gas: '0x5208',
|
||||||
|
maxFeePerGas: '0x59682f16',
|
||||||
|
maxPriorityFeePerGas: '0x59682f00',
|
||||||
|
type: '0x2',
|
||||||
|
},
|
||||||
|
origin: 'metamask',
|
||||||
|
actionId: 1675012496153.2039,
|
||||||
|
type: 'simpleSend',
|
||||||
|
history: [],
|
||||||
|
userFeeLevel: 'medium',
|
||||||
|
defaultGasEstimates: {
|
||||||
|
estimateType: 'medium',
|
||||||
|
gas: '0x5208',
|
||||||
|
maxFeePerGas: '0x59682f16',
|
||||||
|
maxPriorityFeePerGas: '0x59682f00',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tokenData: {},
|
||||||
|
tokenProps: {},
|
||||||
|
fiatTransactionAmount: '0.16',
|
||||||
|
fiatTransactionFee: '0',
|
||||||
|
fiatTransactionTotal: '0.16',
|
||||||
|
ethTransactionAmount: '0.0001',
|
||||||
|
ethTransactionFee: '0',
|
||||||
|
ethTransactionTotal: '0.0001',
|
||||||
|
hexTransactionAmount: '0x5af3107a4000',
|
||||||
|
hexTransactionFee: '0x0',
|
||||||
|
hexTransactionTotal: '0x5af3107a4000',
|
||||||
|
nonce: '',
|
||||||
|
},
|
||||||
|
appState: {
|
||||||
|
sendInputCurrencySwitched: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('Confirm Transaction Base', () => {
|
||||||
|
const store = configureMockStore(middleware)(baseStore);
|
||||||
|
it('should match snapshot', () => {
|
||||||
|
const { container } = renderWithProvider(
|
||||||
|
<ConfirmTransactionBase actionKey="confirm" />,
|
||||||
|
store,
|
||||||
|
);
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user