m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

Browse Source 
* Updated header for NFT approval and Set approval for all screens
This commit is contained in:
Filip Sekulic 2022-09-21 16:15:34 +02:00 committed by GitHub
parent 6d9355c6bd
commit 2ba6e68c8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 57 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
ui/components/app/confirm-page-container/confirm-page-container.component.js
View File

@ -3,7 +3,12 @@ import PropTypes from 'prop-types';
import { EDIT_GAS_MODES } from '../../../../shared/constants/gas'; import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
import { GasFeeContextProvider } from '../../../contexts/gasFee'; 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 { NETWORK_TO_NAME_MAP } from '../../../../shared/constants/network';
import { PageContainerFooter } from '../../ui/page-container'; 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 '../../ui/typography';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system'; import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header';
import EnableEIP1559V2Notice from './enableEIP1559V2-notice'; import EnableEIP1559V2Notice from './enableEIP1559V2-notice';
import { import {
ConfirmPageContainerHeader, ConfirmPageContainerHeader,
@ -50,6 +56,8 @@ export default class ConfirmPageContainer extends Component {
titleComponent: PropTypes.node, titleComponent: PropTypes.node,
hideSenderToRecipient: PropTypes.bool, hideSenderToRecipient: PropTypes.bool,
showAccountInHeader: PropTypes.bool, showAccountInHeader: PropTypes.bool,
accountBalance: PropTypes.string,
assetStandard: PropTypes.string,
// Sender to Recipient // Sender to Recipient
fromAddress: PropTypes.string, fromAddress: PropTypes.string,
fromName: PropTypes.string, fromName: PropTypes.string,
@ -161,6 +169,8 @@ export default class ConfirmPageContainer extends Component {
///: BEGIN:ONLY_INCLUDE_IN(flask) ///: BEGIN:ONLY_INCLUDE_IN(flask)
insightComponent, insightComponent,
///: END:ONLY_INCLUDE_IN ///: END:ONLY_INCLUDE_IN
accountBalance,
assetStandard,
} = this.props; } = this.props;
const showAddToAddressDialog = const showAddToAddressDialog =
@ -198,23 +208,35 @@ export default class ConfirmPageContainer extends Component {
ofText={ofText} ofText={ofText}
requestsWaitingText={requestsWaitingText} 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> <div>
{showAddToAddressDialog && ( {showAddToAddressDialog && (
<> <>

5
ui/components/app/confirm-page-container/confirm-page-container.container.js
View File

@ -4,6 +4,7 @@ import {
getAddressBookEntry, getAddressBookEntry,
getIsBuyableChain, getIsBuyableChain,
getNetworkIdentifier, getNetworkIdentifier,
getSwapsDefaultToken,
} from '../../../selectors'; } from '../../../selectors';
import { showModal } from '../../../store/actions'; import { showModal } from '../../../store/actions';
import ConfirmPageContainer from './confirm-page-container.component'; import ConfirmPageContainer from './confirm-page-container.component';
@ -13,6 +14,9 @@ function mapStateToProps(state, ownProps) {
const isBuyableChain = getIsBuyableChain(state); const isBuyableChain = getIsBuyableChain(state);
const contact = getAddressBookEntry(state, to); const contact = getAddressBookEntry(state, to);
const networkIdentifier = getNetworkIdentifier(state); const networkIdentifier = getNetworkIdentifier(state);
const defaultToken = getSwapsDefaultToken(state);
const accountBalance = defaultToken.string;
return { return {
isBuyableChain, isBuyableChain,
contact, contact,
@ -22,6 +26,7 @@ function mapStateToProps(state, ownProps) {
.includes(to), .includes(to),
to, to,
networkIdentifier, networkIdentifier,
accountBalance,
}; };
} }

1
ui/components/app/network-account-balance-header/index.scss
View File

@ -6,6 +6,7 @@
&__ident-icon-ethereum { &__ident-icon-ethereum {
margin-inline-start: -10px; margin-inline-start: -10px;
margin-top: -20px; margin-top: -20px;
border: none !important;
} }
} }
} }

9
ui/components/app/network-account-balance-header/network-account-balance-header.js
View File

@ -9,6 +9,7 @@ import {
FONT_WEIGHT, FONT_WEIGHT,
ALIGN_ITEMS, ALIGN_ITEMS,
JUSTIFY_CONTENT, JUSTIFY_CONTENT,
TEXT_ALIGN,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
@ -37,7 +38,6 @@ export default function NetworkAccountBalanceHeader({
flexDirection={FLEX_DIRECTION.ROW} flexDirection={FLEX_DIRECTION.ROW}
alignItems={ALIGN_ITEMS.CENTER} alignItems={ALIGN_ITEMS.CENTER}
gap={2} gap={2}
marginRight={5}
> >
<Box <Box
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
@ -59,7 +59,7 @@ export default function NetworkAccountBalanceHeader({
flexDirection={FLEX_DIRECTION.COLUMN} flexDirection={FLEX_DIRECTION.COLUMN}
> >
<Typography <Typography
variant={TYPOGRAPHY.H7} variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_ALTERNATIVE} color={COLORS.TEXT_ALTERNATIVE}
marginBottom={0} marginBottom={0}
> >
@ -82,7 +82,7 @@ export default function NetworkAccountBalanceHeader({
flexDirection={FLEX_DIRECTION.COLUMN} flexDirection={FLEX_DIRECTION.COLUMN}
> >
<Typography <Typography
variant={TYPOGRAPHY.H7} variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_ALTERNATIVE} color={COLORS.TEXT_ALTERNATIVE}
marginBottom={0} marginBottom={0}
> >
@ -94,6 +94,7 @@ export default function NetworkAccountBalanceHeader({
color={COLORS.TEXT_DEFAULT} color={COLORS.TEXT_DEFAULT}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FONT_WEIGHT.BOLD}
marginTop={0} marginTop={0}
align={TEXT_ALIGN.END}
> >
{accountBalance} {tokenName} {accountBalance} {tokenName}
</Typography> </Typography>
@ -105,7 +106,7 @@ export default function NetworkAccountBalanceHeader({
NetworkAccountBalanceHeader.propTypes = { NetworkAccountBalanceHeader.propTypes = {
networkName: PropTypes.string, networkName: PropTypes.string,
accountName: PropTypes.string, accountName: PropTypes.string,
accountBalance: PropTypes.number, accountBalance: PropTypes.string,
tokenName: PropTypes.string, tokenName: PropTypes.string,
accountAddress: PropTypes.string, accountAddress: PropTypes.string,
}; };

4
ui/components/app/network-account-balance-header/network-account-balance-header.stories.js
View File

@ -12,7 +12,7 @@ export default {
control: { type: 'text' }, control: { type: 'text' },
}, },
accountBalance: { accountBalance: {
control: { type: 'number' }, control: { type: 'text' },
}, },
tokenName: { tokenName: {
control: { type: 'text' }, control: { type: 'text' },
@ -24,7 +24,7 @@ export default {
args: { args: {
networkName: 'Ethereum Network', networkName: 'Ethereum Network',
accountName: 'Account 1', accountName: 'Account 1',
accountBalance: 200.12, accountBalance: '200.12',
tokenName: 'DAI', tokenName: 'DAI',
accountAddress: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1', accountAddress: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
}, },

1
ui/pages/confirm-approve/confirm-approve.js
View File

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

3
ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -165,6 +165,7 @@ export default class ConfirmTransactionBase extends Component {
///: BEGIN:ONLY_INCLUDE_IN(flask) ///: BEGIN:ONLY_INCLUDE_IN(flask)
insightSnaps: PropTypes.arrayOf(PropTypes.object), insightSnaps: PropTypes.arrayOf(PropTypes.object),
///: END:ONLY_INCLUDE_IN ///: END:ONLY_INCLUDE_IN
assetStandard: PropTypes.string,
}; };
state = { state = {
@ -1127,6 +1128,7 @@ export default class ConfirmTransactionBase extends Component {
hardwareWalletRequiresConnection, hardwareWalletRequiresConnection,
image, image,
setApproveForAllArg, setApproveForAllArg,
assetStandard,
} = this.props; } = this.props;
const { const {
submitting, submitting,
@ -1231,6 +1233,7 @@ export default class ConfirmTransactionBase extends Component {
supportsEIP1559V2={this.supportsEIP1559V2} supportsEIP1559V2={this.supportsEIP1559V2}
nativeCurrency={nativeCurrency} nativeCurrency={nativeCurrency}
setApproveForAllArg={setApproveForAllArg} setApproveForAllArg={setApproveForAllArg}
assetStandard={assetStandard}
/> />
</TransactionModalContextProvider> </TransactionModalContextProvider>
); );