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

Refactoring confirm-transaction-base component (#17484)

Browse Source
This commit is contained in:
Jyoti Puri 2023-02-01 11:24:41 +05:30 committed by GitHub
parent 80fb59f0a0
commit 26222a9b27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 795 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/components/app/confirm-page-container/confirm-page-container.component.js
View File

@ -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,

2
ui/components/ui/currency-display/currency-display.component.js
View File

@ -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
View 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;

542
ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap Normal file
View File

@ -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>
`;

91
ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -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}

10
ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
View File

@ -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),
};
};

151
ui/pages/confirm-transaction-base/confirm-transaction-base.test.js Normal file
View File

@ -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();
});
});