diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index c1fa2a4a1..6f3754bd8 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -313,11 +313,10 @@ describe('MetaMask', function () { text: 'Transfer', }); - const tokenAmount = await driver.findElement( - '.confirm-page-container-summary__title-text', - ); - const tokenAmountText = await tokenAmount.getText(); - assert.equal(tokenAmountText, '1 TST'); + await driver.findElement({ + tag: 'h1', + text: '1 TST', + }); await driver.waitForSelector({ tag: 'p', @@ -419,11 +418,10 @@ describe('MetaMask', function () { }); it('submits the transaction', async function () { - const tokenAmount = await driver.findElement( - '.confirm-page-container-summary__title-text', - ); - const tokenAmountText = await tokenAmount.getText(); - assert.equal(tokenAmountText, '1.5 TST'); + await driver.findElement({ + tag: 'h1', + text: '1.5 TST', + }); await driver.clickElement({ text: 'Confirm', tag: 'button' }); await driver.delay(regularDelayMs); diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js index 9ac822f59..c10bb8c06 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js @@ -29,11 +29,9 @@ export default class ConfirmPageContainerContent extends Component { ///: END:ONLY_INCLUDE_IN errorKey: PropTypes.string, errorMessage: PropTypes.string, - hideSubtitle: PropTypes.bool, tokenAddress: PropTypes.string, nonce: PropTypes.string, subtitleComponent: PropTypes.node, - title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), image: PropTypes.string, titleComponent: PropTypes.node, warning: PropTypes.string, @@ -48,7 +46,6 @@ export default class ConfirmPageContainerContent extends Component { disabled: PropTypes.bool, unapprovedTxCount: PropTypes.number, rejectNText: PropTypes.string, - hideTitle: PropTypes.bool, supportsEIP1559: PropTypes.bool, hasTopBorder: PropTypes.bool, nativeCurrency: PropTypes.string, @@ -136,11 +133,9 @@ export default class ConfirmPageContainerContent extends Component { action, errorKey, errorMessage, - title, image, titleComponent, subtitleComponent, - hideSubtitle, tokenAddress, nonce, detailsComponent, @@ -156,7 +151,6 @@ export default class ConfirmPageContainerContent extends Component { rejectNText, origin, ethGasPriceWarning, - hideTitle, supportsEIP1559, hasTopBorder, nativeCurrency, @@ -199,15 +193,12 @@ export default class ConfirmPageContainerContent extends Component { !detailsComponent || !dataComponent, })} action={action} - title={title} image={image} titleComponent={titleComponent} subtitleComponent={subtitleComponent} - hideSubtitle={hideSubtitle} tokenAddress={tokenAddress} nonce={nonce} origin={origin} - hideTitle={hideTitle} toAddress={toAddress} transactionType={transactionType} /> diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js index d58fe0280..46a3f068f 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js @@ -14,8 +14,6 @@ import { getIpfsGateway } from '../../../../../selectors'; import Identicon from '../../../../ui/identicon'; import InfoTooltip from '../../../../ui/info-tooltip'; import NicknamePopovers from '../../../modals/nickname-popovers'; -import Typography from '../../../../ui/typography'; -import { TypographyVariant } from '../../../../../helpers/constants/design-system'; import { ORIGIN_METAMASK } from '../../../../../../shared/constants/app'; import SiteOrigin from '../../../../ui/site-origin'; import { getAssetImageURL } from '../../../../../helpers/utils/util'; @@ -23,16 +21,13 @@ import { getAssetImageURL } from '../../../../../helpers/utils/util'; const ConfirmPageContainerSummary = (props) => { const { action, - title, titleComponent, subtitleComponent, - hideSubtitle, className, tokenAddress, toAddress, nonce, origin, - hideTitle, image, transactionType, } = props; @@ -130,25 +125,9 @@ const ConfirmPageContainerSummary = (props) => { <>
{renderImage()} - {!hideTitle ? ( - - {titleComponent || title} - - ) : null} + {titleComponent}
- {hideSubtitle ? null : ( -
- {subtitleComponent} -
- )} + {subtitleComponent} {showNicknamePopovers && ( { ConfirmPageContainerSummary.propTypes = { action: PropTypes.string, - title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), image: PropTypes.string, titleComponent: PropTypes.node, subtitleComponent: PropTypes.node, - hideSubtitle: PropTypes.bool, className: PropTypes.string, tokenAddress: PropTypes.string, toAddress: PropTypes.string, nonce: PropTypes.string, origin: PropTypes.string.isRequired, - hideTitle: PropTypes.bool, transactionType: PropTypes.string, }; diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss index 05e7132e4..9514cbef2 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss +++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss @@ -69,31 +69,6 @@ margin-right: 8px; } - &__title-text { - @include H1; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &__title-text-long { - @include H3; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &__subtitle { - @include H5; - - color: var(--color-text-alternative); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - &--border { border-bottom: 1px solid var(--color-border-muted); } diff --git a/ui/components/app/confirm-page-container/confirm-page-container.component.js b/ui/components/app/confirm-page-container/confirm-page-container.component.js index 4c31366c7..1943c964b 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js @@ -66,7 +66,6 @@ const ConfirmPageContainer = (props) => { image, titleComponent, subtitleComponent, - hideSubtitle, detailsComponent, dataComponent, dataHexComponent, @@ -123,11 +122,6 @@ const ConfirmPageContainer = (props) => { const shouldDisplayWarning = contentComponent && disabled && (errorKey || errorMessage); - const hideTitle = - (currentTransaction.type === TransactionType.contractInteraction || - currentTransaction.type === TransactionType.deployContract) && - currentTransaction.txParams?.value === '0x0'; - const networkName = NETWORK_TO_NAME_MAP[currentTransaction.chainId] || networkIdentifier; @@ -203,7 +197,6 @@ const ConfirmPageContainer = (props) => { image={image} titleComponent={titleComponent} subtitleComponent={subtitleComponent} - hideSubtitle={hideSubtitle} detailsComponent={detailsComponent} dataComponent={dataComponent} dataHexComponent={dataHexComponent} @@ -225,7 +218,6 @@ const ConfirmPageContainer = (props) => { rejectNText={t('rejectTxsN', [unapprovedTxCount])} origin={origin} ethGasPriceWarning={ethGasPriceWarning} - hideTitle={hideTitle} supportsEIP1559={supportsEIP1559} currentTransaction={currentTransaction} nativeCurrency={nativeCurrency} @@ -341,7 +333,6 @@ const ConfirmPageContainer = (props) => { ConfirmPageContainer.propTypes = { // Header action: PropTypes.string, - hideSubtitle: PropTypes.bool, onEdit: PropTypes.func, showEdit: PropTypes.bool, subtitleComponent: PropTypes.node, diff --git a/ui/components/app/confirm-subtitle/README.mdx b/ui/components/app/confirm-subtitle/README.mdx new file mode 100644 index 000000000..8c5da7bec --- /dev/null +++ b/ui/components/app/confirm-subtitle/README.mdx @@ -0,0 +1,10 @@ +import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; +import { ConfirmSubTitle } from '.'; + +# Confirm Sub Title + +Confirm Sub Title is used on confirmation screen to display transaction amoutn in header. + + + + diff --git a/ui/components/app/confirm-subtitle/confirm-subtitle.js b/ui/components/app/confirm-subtitle/confirm-subtitle.js new file mode 100644 index 000000000..fd4366d87 --- /dev/null +++ b/ui/components/app/confirm-subtitle/confirm-subtitle.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { useSelector } from 'react-redux'; + +import { SECONDARY } from '../../../helpers/constants/common'; +import { Text } from '../../component-library'; +import { + Color, + FONT_WEIGHT, + TextVariant, +} from '../../../helpers/constants/design-system'; +import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'; +import { getShouldShowFiat } from '../../../selectors'; +import { useTransactionInfo } from '../../../hooks/useTransactionInfo'; + +const ConfirmSubTitle = ({ + txData, + hexTransactionAmount, + subtitleComponent, +}) => { + const shouldShowFiat = useSelector(getShouldShowFiat); + const { isNftTransfer } = useTransactionInfo(txData); + + if (!shouldShowFiat && !isNftTransfer) { + return null; + } + + if (subtitleComponent) { + return subtitleComponent; + } + + return ( + + + + ); +}; + +ConfirmSubTitle.propTypes = { + hexTransactionAmount: PropTypes.string, + subtitleComponent: PropTypes.element, + txData: PropTypes.object.isRequired, +}; + +export default ConfirmSubTitle; diff --git a/ui/components/app/confirm-subtitle/confirm-subtitle.stories.js b/ui/components/app/confirm-subtitle/confirm-subtitle.stories.js new file mode 100644 index 000000000..9a05e509c --- /dev/null +++ b/ui/components/app/confirm-subtitle/confirm-subtitle.stories.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { Provider } from 'react-redux'; + +import mockState from '../../../../test/data/mock-state.json'; +import configureStore from '../../../store/store'; + +import README from './README.mdx'; +import ConfirmSubTitle from './confirm-subtitle'; + +mockState.metamask.preferences.showFiatInTestnets = true; +const store = configureStore(mockState); + +export default { + title: 'Components/App/ConfirmSubTitle', + + component: ConfirmSubTitle, + decorators: [(story) => {story()}], + parameters: { + docs: { + page: README, + }, + }, + argTypes: { + txData: 'object', + hexTransactionAmount: 'number', + title: 'string', + }, + args: { + txData: { + txParams: {}, + type: 'transfer', + }, + hexTransactionAmount: '0x9184e72a000', + subtitleComponent: undefined, + }, +}; + +export const DefaultStory = (args) => { + return ; +}; + +DefaultStory.storyName = 'Default'; + +export const CustomSubTitleStory = (args) => { + return ; +}; + +CustomSubTitleStory.storyName = 'CustomSubTitle'; +CustomSubTitleStory.args = { + subtitleComponent: 'Any custom sub title passed', +}; diff --git a/ui/components/app/confirm-subtitle/confirm-subtitle.test.js b/ui/components/app/confirm-subtitle/confirm-subtitle.test.js new file mode 100644 index 000000000..ac2662a39 --- /dev/null +++ b/ui/components/app/confirm-subtitle/confirm-subtitle.test.js @@ -0,0 +1,80 @@ +import React from 'react'; + +import mockState from '../../../../test/data/mock-state.json'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; +import configureStore from '../../../store/store'; +import ConfirmSubTitle from './confirm-subtitle'; + +describe('ConfirmSubTitle', () => { + let store; + beforeEach(() => { + mockState.metamask.preferences.showFiatInTestnets = true; + store = configureStore(mockState); + }); + + it('should render subtitle correctly', async () => { + const { findByText } = renderWithProvider( + , + store, + ); + expect(await findByText('$0.01')).toBeInTheDocument(); + }); + + it('should return null if showFiatInTestnets preference if false', () => { + mockState.metamask.preferences.showFiatInTestnets = false; + store = configureStore(mockState); + + const { container } = renderWithProvider( + , + store, + ); + expect(container.firstChild).toStrictEqual(null); + }); + + it('should not null if showFiatInTestnets preference if false but it is NFT Transfer', async () => { + mockState.metamask.preferences.showFiatInTestnets = false; + mockState.metamask.allNftContracts = { + [mockState.metamask.selectedAddress]: { + [mockState.metamask.provider.chainId]: [{ address: '0x9' }], + }, + }; + store = configureStore(mockState); + + const { findByText } = renderWithProvider( + , + store, + ); + expect(await findByText('0.00001')).toBeInTheDocument(); + }); + + it('should render subtitleComponent if passed', () => { + const { getByText } = renderWithProvider( + dummy_sub_title_passed} + />, + store, + ); + expect(getByText('dummy_sub_title_passed')).toBeInTheDocument(); + }); +}); diff --git a/ui/components/app/confirm-subtitle/index.js b/ui/components/app/confirm-subtitle/index.js new file mode 100644 index 000000000..ecb696931 --- /dev/null +++ b/ui/components/app/confirm-subtitle/index.js @@ -0,0 +1 @@ +export { default as ConfirmSubTitle } from './confirm-subtitle'; diff --git a/ui/components/app/confirm-title/README.mdx b/ui/components/app/confirm-title/README.mdx new file mode 100644 index 000000000..d68f7d30c --- /dev/null +++ b/ui/components/app/confirm-title/README.mdx @@ -0,0 +1,10 @@ +import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; +import { ConfirmTitle } from '.'; + +# Confirm Title + +Confirm Title is used on the confirmation screen to display the transaction amount in the header. + + + + diff --git a/ui/components/app/confirm-title/confirm-title.js b/ui/components/app/confirm-title/confirm-title.js new file mode 100644 index 000000000..125d8d8a3 --- /dev/null +++ b/ui/components/app/confirm-title/confirm-title.js @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { TransactionType } from '../../../../shared/constants/transaction'; +import { PRIMARY } from '../../../helpers/constants/common'; +import { Text } from '../../component-library'; +import { + FONT_WEIGHT, + TextVariant, +} from '../../../helpers/constants/design-system'; +import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'; + +const ConfirmTitle = ({ title, hexTransactionAmount, txData }) => { + const isContractInteraction = + txData.type === TransactionType.contractInteraction; + + const hideTitle = + (isContractInteraction || txData.type === TransactionType.deployContract) && + txData.txParams?.value === '0x0'; + + if (hideTitle) { + return null; + } + + if (title) { + return ( + + {title} + + ); + } + + return ( + + + + ); +}; + +ConfirmTitle.propTypes = { + txData: PropTypes.object.isRequired, + title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + hexTransactionAmount: PropTypes.string, +}; + +export default ConfirmTitle; diff --git a/ui/components/app/confirm-title/confirm-title.stories.js b/ui/components/app/confirm-title/confirm-title.stories.js new file mode 100644 index 000000000..60037daa1 --- /dev/null +++ b/ui/components/app/confirm-title/confirm-title.stories.js @@ -0,0 +1,54 @@ +import React from 'react'; +import README from './README.mdx'; +import ConfirmTitle from './confirm-title'; + +export default { + title: 'Components/App/ConfirmTitle', + + component: ConfirmTitle, + parameters: { + docs: { + page: README, + }, + }, + argTypes: { + txData: 'object', + hexTransactionAmount: 'string', + title: 'string', + }, + args: { + txData: { + txParams: {}, + type: 'transfer', + }, + hexTransactionAmount: '0x9184e72a000', + title: undefined, + }, +}; + +export const DefaultStory = (args) => { + return ; +}; + +DefaultStory.storyName = 'Default'; + +export const ContractInteractionStory = (args) => { + return ; +}; + +ContractInteractionStory.storyName = 'ContractInteraction'; +ContractInteractionStory.args = { + txData: { + txParams: {}, + type: 'contractInteraction', + }, +}; + +export const CustomTitleStory = (args) => { + return ; +}; + +CustomTitleStory.storyName = 'CustomTitle'; +CustomTitleStory.args = { + title: 'Any custom title passed', +}; diff --git a/ui/components/app/confirm-title/confirm-title.test.js b/ui/components/app/confirm-title/confirm-title.test.js new file mode 100644 index 000000000..e6098dd04 --- /dev/null +++ b/ui/components/app/confirm-title/confirm-title.test.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { TransactionType } from '../../../../shared/constants/transaction'; + +import mockState from '../../../../test/data/mock-state.json'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; + +import configureStore from '../../../store/store'; +import ConfirmTitle from './confirm-title'; + +describe('ConfirmTitle', () => { + const store = configureStore(mockState); + + it('should render title correctly', async () => { + const { findByText } = renderWithProvider( + , + store, + ); + expect(await findByText('0.00001')).toBeInTheDocument(); + }); + + it('should return null if transaction is contract interation with 0 value', () => { + const { container } = renderWithProvider( + , + store, + ); + expect(container.firstChild).toStrictEqual(null); + }); + + it('should render title if passed', () => { + const { getByText } = renderWithProvider( + , + store, + ); + expect(getByText('dummy_title_passed')).toBeInTheDocument(); + }); +}); diff --git a/ui/components/app/confirm-title/index.js b/ui/components/app/confirm-title/index.js new file mode 100644 index 000000000..11db0d32c --- /dev/null +++ b/ui/components/app/confirm-title/index.js @@ -0,0 +1 @@ +export { default as ConfirmTitle } from './confirm-title'; diff --git a/ui/hooks/useTransactionInfo.js b/ui/hooks/useTransactionInfo.js new file mode 100644 index 000000000..245a24734 --- /dev/null +++ b/ui/hooks/useTransactionInfo.js @@ -0,0 +1,19 @@ +import { useSelector } from 'react-redux'; + +import { isEqualCaseInsensitive } from '../../shared/modules/string-utils'; + +export const useTransactionInfo = (txData = {}) => { + const { + allNftContracts, + selectedAddress, + provider: { chainId }, + } = useSelector((state) => state.metamask); + + const isNftTransfer = Boolean( + allNftContracts?.[selectedAddress]?.[chainId]?.find((contract) => { + return isEqualCaseInsensitive(contract.address, txData.txParams.to); + }), + ); + + return { isNftTransfer }; +}; diff --git a/ui/hooks/useTransactionInfo.test.js b/ui/hooks/useTransactionInfo.test.js new file mode 100644 index 000000000..e7fa5f40a --- /dev/null +++ b/ui/hooks/useTransactionInfo.test.js @@ -0,0 +1,36 @@ +import { renderHookWithProvider } from '../../test/lib/render-helpers'; +import mockState from '../../test/data/mock-state.json'; +import { useTransactionInfo } from './useTransactionInfo'; + +describe('useTransactionInfo', () => { + describe('isNftTransfer', () => { + it('should return false if transaction is not NFT transfer', () => { + const { result } = renderHookWithProvider( + () => + useTransactionInfo({ + txParams: {}, + }), + mockState, + ); + expect(result.current.isNftTransfer).toStrictEqual(false); + }); + it('should return true if transaction is NFT transfer', () => { + mockState.metamask.allNftContracts = { + [mockState.metamask.selectedAddress]: { + [mockState.metamask.provider.chainId]: [{ address: '0x9' }], + }, + }; + + const { result } = renderHookWithProvider( + () => + useTransactionInfo({ + txParams: { + to: '0x9', + }, + }), + mockState, + ); + expect(result.current.isNftTransfer).toStrictEqual(true); + }); + }); +}); diff --git a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap index c6dba019d..c48acbbe6 100644 --- a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap +++ b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap @@ -254,7 +254,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = ` class="confirm-page-container-summary__title" >

process.env.IN_TEST ? null : ; @@ -108,7 +110,6 @@ export default class ConfirmTransactionBase extends Component { contentComponent: PropTypes.node, dataComponent: PropTypes.node, dataHexComponent: PropTypes.node, - hideSubtitle: PropTypes.bool, tokenAddress: PropTypes.string, customTokenAmount: PropTypes.string, dappProposedTokenAmount: PropTypes.string, @@ -837,38 +838,24 @@ export default class ConfirmTransactionBase extends Component { renderTitleComponent() { const { title, hexTransactionAmount, txData } = this.props; - // Title string passed in by props takes priority - if (title) { - return null; - } - - const isContractInteraction = - txData.type === TransactionType.contractInteraction; - return ( - ); } renderSubtitleComponent() { - const { subtitleComponent, hexTransactionAmount } = this.props; + const { subtitleComponent, hexTransactionAmount, txData } = this.props; return ( - subtitleComponent || ( - - ) + ); } @@ -946,8 +933,6 @@ export default class ConfirmTransactionBase extends Component { toEns, toNickname, methodData, - title, - hideSubtitle, tokenAddress, contentComponent, onEdit, @@ -1024,11 +1009,9 @@ export default class ConfirmTransactionBase extends Component { toNickname={toNickname} showEdit={!isContractInteractionFromDapp && Boolean(onEdit)} action={functionType} - title={title} image={image} titleComponent={this.renderTitleComponent()} subtitleComponent={this.renderSubtitleComponent()} - hideSubtitle={hideSubtitle} detailsComponent={this.renderDetails()} dataComponent={this.renderData(functionType)} dataHexComponent={this.renderDataHex(functionType)} diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js index 12078cc87..9abc1ee22 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js @@ -63,7 +63,6 @@ import { TransactionStatus, TransactionType, } from '../../../shared/constants/transaction'; -import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils'; import { getTokenAddressParam } from '../../helpers/utils/token-util'; import { calcGasTotal } from '../../../shared/lib/transactions-controller-utils'; import ConfirmTransactionBase from './confirm-transaction-base.component'; @@ -105,8 +104,6 @@ const mapStateToProps = (state, ownProps) => { network, unapprovedTxs, nextNonce, - allNftContracts, - selectedAddress, provider: { chainId }, } = metamask; const { tokenData, txData, tokenProps, nonce } = confirmTransaction; @@ -184,12 +181,6 @@ const mapStateToProps = (state, ownProps) => { customTxParamsData, ); - const isNftTransfer = Boolean( - allNftContracts?.[selectedAddress]?.[chainId]?.find((contract) => { - return isEqualCaseInsensitive(contract.address, fullTxData.txParams.to); - }), - ); - customNonceValue = getCustomNonceValue(state); const isEthGasPrice = getIsEthGasPriceFetched(state); const noGasPrice = !supportsEIP1559 && getNoGasPriceFetched(state); @@ -235,7 +226,6 @@ const mapStateToProps = (state, ownProps) => { useNonceField: getUseNonceField(state), customNonceValue, insufficientBalance, - hideSubtitle: !getShouldShowFiat(state) && !isNftTransfer, hideFiatConversion: !getShouldShowFiat(state), type, nextNonce,