mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 15:35:46 +01:00
42be5a07d7
* 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
80 lines
2.5 KiB
JavaScript
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,
|
|
};
|