NFT Approval and SetApprovalForAll confirmation screens header updated (#15727)

* Updated header for NFT approval and Set approval for all screens

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}
           />
-          <ConfirmPageContainerHeader
+          {assetStandard === ERC20 ||
-            showEdit={showEdit}
+          assetStandard === ERC721 ||
-            onEdit={() => onEdit()}
+          assetStandard === ERC1155 ? (
-            showAccountInHeader={showAccountInHeader}
+            <NetworkAccountBalanceHeader
-            accountAddress={fromAddress}
+              accountName={fromName}
-          >
+              accountBalance={accountBalance}
-            {hideSenderToRecipient ? null : (
+              tokenName={nativeCurrency}
-              <SenderToRecipient
+              accountAddress={fromAddress}
-                senderName={fromName}
+              networkName={networkName}
-                senderAddress={fromAddress}
+            />
-                recipientName={toName}
+          ) : (
-                recipientAddress={toAddress}
+            <ConfirmPageContainerHeader
-                recipientEns={toEns}
+              showEdit={showEdit}
-                recipientNickname={toNickname}
+              onEdit={() => onEdit()}
-              />
+              showAccountInHeader={showAccountInHeader}
-            )}
+              accountAddress={fromAddress}
-          </ConfirmPageContainerHeader>
+            >
+              {hideSenderToRecipient ? null : (
+                <SenderToRecipient
+                  senderName={fromName}
+                  senderAddress={fromAddress}
+                  recipientName={toName}
+                  recipientAddress={toAddress}
+                  recipientEns={toEns}
+                  recipientNickname={toNickname}
+                />
+              )}
+            </ConfirmPageContainerHeader>
+          )}
           <div>
             {showAddToAddressDialog && (
               <>

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

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

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}
       >
         <Box
           display={DISPLAY.FLEX}
@@ -59,7 +59,7 @@ export default function NetworkAccountBalanceHeader({
           flexDirection={FLEX_DIRECTION.COLUMN}
         >
           <Typography
-            variant={TYPOGRAPHY.H7}
+            variant={TYPOGRAPHY.H6}
             color={COLORS.TEXT_ALTERNATIVE}
             marginBottom={0}
           >
@@ -82,7 +82,7 @@ export default function NetworkAccountBalanceHeader({
         flexDirection={FLEX_DIRECTION.COLUMN}
       >
         <Typography
-          variant={TYPOGRAPHY.H7}
+          variant={TYPOGRAPHY.H6}
           color={COLORS.TEXT_ALTERNATIVE}
           marginBottom={0}
         >
@@ -94,6 +94,7 @@ export default function NetworkAccountBalanceHeader({
           color={COLORS.TEXT_DEFAULT}
           fontWeight={FONT_WEIGHT.BOLD}
           marginTop={0}
+          align={TEXT_ALIGN.END}
         >
           {accountBalance} {tokenName}
         </Typography>
@@ -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,
 };

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',
   },

ui/pages/confirm-approve/confirm-approve.js

@@ -277,6 +277,7 @@ export default function ConfirmApprove({
           }
           hideSenderToRecipient
           customTxParamsData={customData}
+          assetStandard={assetStandard}
         />
       </GasFeeContextProvider>
     )

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}
         />
       </TransactionModalContextProvider>
     );