mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +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 SetApproveForAllWarning from '../set-approval-for-all-warning';
|
||||
import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
import useTransactionInsights from '../../../hooks/useTransactionInsights';
|
||||
///: END:ONLY_INCLUDE_IN(flask)
|
||||
import {
|
||||
getAccountName,
|
||||
getAddressBookEntry,
|
||||
@ -84,8 +87,8 @@ const ConfirmPageContainer = (props) => {
|
||||
supportsEIP1559,
|
||||
nativeCurrency,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
insightComponent,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
txData,
|
||||
///: END:ONLY_INCLUDE_IN(flask)
|
||||
assetStandard,
|
||||
isApprovalOrRejection,
|
||||
} = props;
|
||||
@ -127,6 +130,14 @@ const ConfirmPageContainer = (props) => {
|
||||
setCollectionBalance(tokenBalance?.balance?.words?.[0] || 0);
|
||||
}, [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(() => {
|
||||
if (isSetApproveForAll && assetStandard === TokenStandard.ERC721) {
|
||||
fetchCollectionBalance();
|
||||
@ -336,8 +347,8 @@ ConfirmPageContainer.propTypes = {
|
||||
dataHexComponent: PropTypes.node,
|
||||
detailsComponent: PropTypes.node,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
insightComponent: PropTypes.node,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
txData: PropTypes.object,
|
||||
///: END:ONLY_INCLUDE_IN(flask)
|
||||
tokenAddress: PropTypes.string,
|
||||
nonce: PropTypes.string,
|
||||
warning: PropTypes.string,
|
||||
|
||||
@ -66,6 +66,6 @@ CurrencyDisplay.propTypes = {
|
||||
prefix: PropTypes.string,
|
||||
prefixComponent: PropTypes.node,
|
||||
style: PropTypes.object,
|
||||
suffix: PropTypes.string,
|
||||
suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
||||
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 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 TransactionDecoding from '../../components/app/transaction-decoding';
|
||||
import { isBalanceSufficient } from '../send/send.utils';
|
||||
@ -56,17 +53,7 @@ import {
|
||||
|
||||
import { MIN_GAS_LIMIT_DEC } from '../send/send.constants';
|
||||
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
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 { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
|
||||
import {
|
||||
addHexes,
|
||||
hexToDecimal,
|
||||
@ -158,9 +145,6 @@ export default class ConfirmTransactionBase extends Component {
|
||||
isMultiLayerFeeNetwork: PropTypes.bool,
|
||||
isBuyableChain: PropTypes.bool,
|
||||
isApprovalOrRejection: PropTypes.bool,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
insightSnaps: PropTypes.arrayOf(PropTypes.object),
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
assetStandard: PropTypes.string,
|
||||
useCurrencyRateCheck: PropTypes.bool,
|
||||
};
|
||||
@ -173,9 +157,6 @@ export default class ConfirmTransactionBase extends Component {
|
||||
editingGas: false,
|
||||
userAcknowledgedGasMissing: false,
|
||||
showWarningModal: false,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
selectedInsightSnapId: this.props.insightSnaps[0]?.id,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
};
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
@ -319,12 +300,6 @@ export default class ConfirmTransactionBase extends Component {
|
||||
this.setState({ editingGas: false });
|
||||
}
|
||||
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
handleSnapSelected(snapId) {
|
||||
this.setState({ selectedInsightSnapId: snapId });
|
||||
}
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
|
||||
setUserAcknowledgedGasMissing() {
|
||||
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() {
|
||||
const {
|
||||
txData,
|
||||
@ -1175,9 +1089,6 @@ export default class ConfirmTransactionBase extends Component {
|
||||
detailsComponent={this.renderDetails()}
|
||||
dataComponent={this.renderData(functionType)}
|
||||
dataHexComponent={this.renderDataHex(functionType)}
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
insightComponent={this.renderInsight()}
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
contentComponent={contentComponent}
|
||||
nonce={customNonceValue || nonce}
|
||||
unapprovedTxCount={unapprovedTxCount}
|
||||
|
||||
@ -37,9 +37,6 @@ import {
|
||||
getUnapprovedTransaction,
|
||||
getFullTxData,
|
||||
getUseCurrencyRateCheck,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
getInsightSnaps,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
} from '../../selectors';
|
||||
import { getMostRecentOverviewPage } from '../../ducks/history/history';
|
||||
import {
|
||||
@ -195,10 +192,6 @@ const mapStateToProps = (state, ownProps) => {
|
||||
|
||||
const isMultiLayerFeeNetwork = getIsMultiLayerFeeNetwork(state);
|
||||
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
const insightSnaps = getInsightSnaps(state);
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
|
||||
return {
|
||||
balance,
|
||||
fromAddress,
|
||||
@ -249,9 +242,6 @@ const mapStateToProps = (state, ownProps) => {
|
||||
isMultiLayerFeeNetwork,
|
||||
chainId,
|
||||
isBuyableChain,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
insightSnaps,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
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