m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +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

24
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 { 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,6 +208,17 @@ export default class ConfirmPageContainer extends Component {
ofText={ofText}
requestsWaitingText={requestsWaitingText}
/>
{assetStandard === ERC20 ||
assetStandard === ERC721 ||
assetStandard === ERC1155 ? (
<NetworkAccountBalanceHeader
accountName={fromName}
accountBalance={accountBalance}
tokenName={nativeCurrency}
accountAddress={fromAddress}
networkName={networkName}
/>
) : (
<ConfirmPageContainerHeader
showEdit={showEdit}
onEdit={() => onEdit()}
@ -215,6 +236,7 @@ export default class ConfirmPageContainer extends Component {
/>
)}
</ConfirmPageContainerHeader>
)}
<div>
{showAddToAddressDialog && (
<>

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

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

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

@ -6,6 +6,7 @@
&__ident-icon-ethereum {
margin-inline-start: -10px;
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,
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,
};

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

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

@ -277,6 +277,7 @@ export default function ConfirmApprove({
}
hideSenderToRecipient
customTxParamsData={customData}
assetStandard={assetStandard}
/>
</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)
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>
);