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

* Updated header for NFT approval and Set approval for all screens
2024-11-22 01:47:00 +01:00 · 2022-09-21 16:15:34 +02:00 · 2022-09-21 16:15:34 +02:00 · 2ba6e68c8b
commit 2ba6e68c8b
parent 6d9355c6bd
7 changed files with 57 additions and 24 deletions
--- 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}
          />
-          <ConfirmPageContainerHeader
-            showEdit={showEdit}
-            onEdit={() => onEdit()}
-            showAccountInHeader={showAccountInHeader}
-            accountAddress={fromAddress}
-          >
-            {hideSenderToRecipient ? null : (
-              <SenderToRecipient
-                senderName={fromName}
-                senderAddress={fromAddress}
-                recipientName={toName}
-                recipientAddress={toAddress}
-                recipientEns={toEns}
-                recipientNickname={toNickname}
-              />
-            )}
-          </ConfirmPageContainerHeader>
+          {assetStandard === ERC20 ||
+          assetStandard === ERC721 ||
+          assetStandard === ERC1155 ? (
+            <NetworkAccountBalanceHeader
+              accountName={fromName}
+              accountBalance={accountBalance}
+              tokenName={nativeCurrency}
+              accountAddress={fromAddress}
+              networkName={networkName}
+            />
+          ) : (
+            <ConfirmPageContainerHeader
+              showEdit={showEdit}
+              onEdit={() => onEdit()}
+              showAccountInHeader={showAccountInHeader}
+              accountAddress={fromAddress}
+            >
+              {hideSenderToRecipient ? null : (
+                <SenderToRecipient
+                  senderName={fromName}
+                  senderAddress={fromAddress}
+                  recipientName={toName}
+                  recipientAddress={toAddress}
+                  recipientEns={toEns}
+                  recipientNickname={toNickname}
+                />
+              )}
+            </ConfirmPageContainerHeader>
+          )}
          <div>
            {showAddToAddressDialog && (
              <>
--- 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,
  };
 }

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