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 60912159a..35905c940 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
@@ -3,7 +3,12 @@ import PropTypes from 'prop-types';
import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
import { GasFeeContextProvider } from '../../../contexts/gasFee';
-import { TRANSACTION_TYPES } from '../../../../shared/constants/transaction';
+import {
+ ERC1155,
+ ERC20,
+ ERC721,
+ TRANSACTION_TYPES,
+} from '../../../../shared/constants/transaction';
import { NETWORK_TO_NAME_MAP } from '../../../../shared/constants/network';
import { PageContainerFooter } from '../../ui/page-container';
@@ -22,6 +27,7 @@ import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-k
import Typography from '../../ui/typography';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
+import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header';
import EnableEIP1559V2Notice from './enableEIP1559V2-notice';
import {
ConfirmPageContainerHeader,
@@ -50,6 +56,8 @@ export default class ConfirmPageContainer extends Component {
titleComponent: PropTypes.node,
hideSenderToRecipient: PropTypes.bool,
showAccountInHeader: PropTypes.bool,
+ accountBalance: PropTypes.string,
+ assetStandard: PropTypes.string,
// Sender to Recipient
fromAddress: PropTypes.string,
fromName: PropTypes.string,
@@ -161,6 +169,8 @@ export default class ConfirmPageContainer extends Component {
///: BEGIN:ONLY_INCLUDE_IN(flask)
insightComponent,
///: END:ONLY_INCLUDE_IN
+ accountBalance,
+ assetStandard,
} = this.props;
const showAddToAddressDialog =
@@ -198,23 +208,35 @@ export default class ConfirmPageContainer extends Component {
ofText={ofText}
requestsWaitingText={requestsWaitingText}
/>
- onEdit()}
- showAccountInHeader={showAccountInHeader}
- accountAddress={fromAddress}
- >
- {hideSenderToRecipient ? null : (
-
- )}
-
+ {assetStandard === ERC20 ||
+ assetStandard === ERC721 ||
+ assetStandard === ERC1155 ? (
+
+ ) : (
+ onEdit()}
+ showAccountInHeader={showAccountInHeader}
+ accountAddress={fromAddress}
+ >
+ {hideSenderToRecipient ? null : (
+
+ )}
+
+ )}
{showAddToAddressDialog && (
<>
diff --git a/ui/components/app/confirm-page-container/confirm-page-container.container.js b/ui/components/app/confirm-page-container/confirm-page-container.container.js
index 31b7d5cd9..567192cb1 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container.container.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container.container.js
@@ -4,6 +4,7 @@ import {
getAddressBookEntry,
getIsBuyableChain,
getNetworkIdentifier,
+ getSwapsDefaultToken,
} from '../../../selectors';
import { showModal } from '../../../store/actions';
import ConfirmPageContainer from './confirm-page-container.component';
@@ -13,6 +14,9 @@ function mapStateToProps(state, ownProps) {
const isBuyableChain = getIsBuyableChain(state);
const contact = getAddressBookEntry(state, to);
const networkIdentifier = getNetworkIdentifier(state);
+ const defaultToken = getSwapsDefaultToken(state);
+ const accountBalance = defaultToken.string;
+
return {
isBuyableChain,
contact,
@@ -22,6 +26,7 @@ function mapStateToProps(state, ownProps) {
.includes(to),
to,
networkIdentifier,
+ accountBalance,
};
}
diff --git a/ui/components/app/network-account-balance-header/index.scss b/ui/components/app/network-account-balance-header/index.scss
index b76730904..fc28883b8 100644
--- a/ui/components/app/network-account-balance-header/index.scss
+++ b/ui/components/app/network-account-balance-header/index.scss
@@ -6,6 +6,7 @@
&__ident-icon-ethereum {
margin-inline-start: -10px;
margin-top: -20px;
+ border: none !important;
}
}
}
diff --git a/ui/components/app/network-account-balance-header/network-account-balance-header.js b/ui/components/app/network-account-balance-header/network-account-balance-header.js
index 80be85448..a688c9d69 100644
--- a/ui/components/app/network-account-balance-header/network-account-balance-header.js
+++ b/ui/components/app/network-account-balance-header/network-account-balance-header.js
@@ -9,6 +9,7 @@ import {
FONT_WEIGHT,
ALIGN_ITEMS,
JUSTIFY_CONTENT,
+ TEXT_ALIGN,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { I18nContext } from '../../../contexts/i18n';
@@ -37,7 +38,6 @@ export default function NetworkAccountBalanceHeader({
flexDirection={FLEX_DIRECTION.ROW}
alignItems={ALIGN_ITEMS.CENTER}
gap={2}
- marginRight={5}
>
@@ -82,7 +82,7 @@ export default function NetworkAccountBalanceHeader({
flexDirection={FLEX_DIRECTION.COLUMN}
>
@@ -94,6 +94,7 @@ export default function NetworkAccountBalanceHeader({
color={COLORS.TEXT_DEFAULT}
fontWeight={FONT_WEIGHT.BOLD}
marginTop={0}
+ align={TEXT_ALIGN.END}
>
{accountBalance} {tokenName}
@@ -105,7 +106,7 @@ export default function NetworkAccountBalanceHeader({
NetworkAccountBalanceHeader.propTypes = {
networkName: PropTypes.string,
accountName: PropTypes.string,
- accountBalance: PropTypes.number,
+ accountBalance: PropTypes.string,
tokenName: PropTypes.string,
accountAddress: PropTypes.string,
};
diff --git a/ui/components/app/network-account-balance-header/network-account-balance-header.stories.js b/ui/components/app/network-account-balance-header/network-account-balance-header.stories.js
index 367559161..6694e52a5 100644
--- a/ui/components/app/network-account-balance-header/network-account-balance-header.stories.js
+++ b/ui/components/app/network-account-balance-header/network-account-balance-header.stories.js
@@ -12,7 +12,7 @@ export default {
control: { type: 'text' },
},
accountBalance: {
- control: { type: 'number' },
+ control: { type: 'text' },
},
tokenName: {
control: { type: 'text' },
@@ -24,7 +24,7 @@ export default {
args: {
networkName: 'Ethereum Network',
accountName: 'Account 1',
- accountBalance: 200.12,
+ accountBalance: '200.12',
tokenName: 'DAI',
accountAddress: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
},
diff --git a/ui/pages/confirm-approve/confirm-approve.js b/ui/pages/confirm-approve/confirm-approve.js
index af2c694fe..d785d473d 100644
--- a/ui/pages/confirm-approve/confirm-approve.js
+++ b/ui/pages/confirm-approve/confirm-approve.js
@@ -277,6 +277,7 @@ export default function ConfirmApprove({
}
hideSenderToRecipient
customTxParamsData={customData}
+ assetStandard={assetStandard}
/>
)
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index b1f081ff1..3dd5be699 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -165,6 +165,7 @@ export default class ConfirmTransactionBase extends Component {
///: BEGIN:ONLY_INCLUDE_IN(flask)
insightSnaps: PropTypes.arrayOf(PropTypes.object),
///: END:ONLY_INCLUDE_IN
+ assetStandard: PropTypes.string,
};
state = {
@@ -1127,6 +1128,7 @@ export default class ConfirmTransactionBase extends Component {
hardwareWalletRequiresConnection,
image,
setApproveForAllArg,
+ assetStandard,
} = this.props;
const {
submitting,
@@ -1231,6 +1233,7 @@ export default class ConfirmTransactionBase extends Component {
supportsEIP1559V2={this.supportsEIP1559V2}
nativeCurrency={nativeCurrency}
setApproveForAllArg={setApproveForAllArg}
+ assetStandard={assetStandard}
/>
);