1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/signature-request/signature-request-data/signature-request-data.js
Vladimir Saric 42be5a07d7
Replaced addresses by the address component on SignTypedData v4 signatures (#16018)
* Replaced addresses by the address component on SignTypedData v4 signatures

* Fixing signature-request e2e tests

* Modified scss file for signature-request message

* Using address component for rendering the addresses and bold label where hex address is not valid

* Modify the address component

* Added proper BEM syntax for class names and used Box and Typography

* FIxing e2e tests

* Commited requested changes from George and added storybook

* Review requested changes

* Created new component for rendering data in signature-request-message.js

* Fixing proper usage for getAccountName and getMetadataContractName selectors

* Fixing e2e tests
2022-11-10 06:58:34 -03:30

80 lines
2.5 KiB
JavaScript

import React from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import { getMetaMaskIdentities, getAccountName } from '../../../../selectors';
import Address from '../../transaction-decoding/components/decoding/address';
import {
isValidHexAddress,
toChecksumHexAddress,
} from '../../../../../shared/modules/hexstring-utils';
import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import {
DISPLAY,
COLORS,
FONT_WEIGHT,
TYPOGRAPHY,
} from '../../../../helpers/constants/design-system';
export default function SignatureRequestData({ data }) {
const identities = useSelector(getMetaMaskIdentities);
return (
<Box className="signature-request-data__node">
{Object.entries(data).map(([label, value], i) => (
<Box
className="signature-request-data__node"
key={i}
paddingLeft={2}
display={
typeof value !== 'object' || value === null ? DISPLAY.FLEX : null
}
>
<Typography
as="span"
color={COLORS.TEXT_DEFAULT}
marginLeft={4}
fontWeight={
typeof value === 'object' ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL
}
>
{label.charAt(0).toUpperCase() + label.slice(1)}:{' '}
</Typography>
{typeof value === 'object' && value !== null ? (
<SignatureRequestData data={value} />
) : (
<Typography
as="span"
color={COLORS.TEXT_DEFAULT}
marginLeft={4}
className="signature-request-data__node__value"
>
{isValidHexAddress(value, {
mixedCaseUseChecksum: true,
}) ? (
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.INFO_DEFAULT}
className="signature-request-data__node__value__address"
>
<Address
addressOnly
checksummedRecipientAddress={toChecksumHexAddress(value)}
recipientName={getAccountName(identities, value)}
/>
</Typography>
) : (
`${value}`
)}
</Typography>
)}
</Box>
))}
</Box>
);
}
SignatureRequestData.propTypes = {
data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
};