From 2ba6e68c8b49473930d7566f3730eed8a198116c Mon Sep 17 00:00:00 2001 From: Filip Sekulic Date: Wed, 21 Sep 2022 16:15:34 +0200 Subject: [PATCH] NFT Approval and SetApprovalForAll confirmation screens header updated (#15727) * Updated header for NFT approval and Set approval for all screens --- .../confirm-page-container.component.js | 58 +++++++++++++------ .../confirm-page-container.container.js | 5 ++ .../network-account-balance-header/index.scss | 1 + .../network-account-balance-header.js | 9 +-- .../network-account-balance-header.stories.js | 4 +- ui/pages/confirm-approve/confirm-approve.js | 1 + .../confirm-transaction-base.component.js | 3 + 7 files changed, 57 insertions(+), 24 deletions(-) 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} /> );