1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-30 08:09:15 +01:00
metamask-extension/ui/components/app/signature-request/signature-request-data/signature-request-data.js
Harsh Shukla a01e4fa00a
Updating SignatureRequestData components (#19994)
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
2023-07-24 13:40:41 -07:00

92 lines
2.8 KiB
JavaScript

import React, { memo } from 'react';
import { useSelector } from 'react-redux';
import { isEqual } from 'lodash';
import PropTypes from 'prop-types';
import {
getMemoizedMetaMaskIdentities,
getAccountName,
} from '../../../../selectors';
import Address from '../../transaction-decoding/components/decoding/address';
import {
isValidHexAddress,
toChecksumHexAddress,
} from '../../../../../shared/modules/hexstring-utils';
import {
Display,
FontWeight,
TextVariant,
TextColor,
} from '../../../../helpers/constants/design-system';
import { sanitizeString } from '../../../../helpers/utils/util';
import { Box, Text } from '../../../component-library';
function SignatureRequestData({ data }) {
const identities = useSelector(getMemoizedMetaMaskIdentities);
return (
<Box as="ul" className="signature-request-data__node">
{Object.entries(data).map(([label, { value, type }], i) => (
<Box
as="li"
className="signature-request-data__node"
marginBottom={2}
key={`${label}-${i}`}
paddingLeft={2}
display={
typeof value !== 'object' || value === null ? Display.Flex : null
}
>
<Text
as="div"
color={TextColor.textDefault}
marginLeft={4}
fontWeight={
typeof value === 'object' ? FontWeight.Bold : FontWeight.Normal
}
>
{sanitizeString(label.charAt(0).toUpperCase() + label.slice(1))}:{' '}
</Text>
{typeof value === 'object' && value !== null ? (
<SignatureRequestData data={value} />
) : (
<Text
as="div"
color={TextColor.textDefault}
marginLeft={4}
className="signature-request-data__node__value"
>
{type === 'address' &&
isValidHexAddress(value, {
mixedCaseUseChecksum: true,
}) ? (
<Text
variant={TextVariant.bodySm}
as="div"
color={TextColor.infoDefault}
className="signature-request-data__node__value__address"
>
<Address
addressOnly
checksummedRecipientAddress={toChecksumHexAddress(value)}
recipientName={getAccountName(identities, value)}
/>
</Text>
) : (
sanitizeString(`${value}`)
)}
</Text>
)}
</Box>
))}
</Box>
);
}
SignatureRequestData.propTypes = {
data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
};
export default memo(SignatureRequestData, (prevProps, nextProps) => {
return isEqual(prevProps.data, nextProps.data);
});