1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js
2023-02-02 20:15:26 +00:00

58 lines
1.5 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import {
FLEX_DIRECTION,
TypographyVariant,
} from '../../../../helpers/constants/design-system';
const SignatureRequestSIWEMessage = ({ data }) => {
return (
<Box className="signature-request-siwe-message">
<Box flexDirection={FLEX_DIRECTION.COLUMN}>
{data.map(({ label, value }, i) => (
<Box key={i.toString()} marginTop={2} marginBottom={2}>
<Typography
variant={TypographyVariant.H4}
marginTop={2}
marginBottom={2}
>
{label}
</Typography>
<Typography
className="signature-request-siwe-message__sub-text"
variant={TypographyVariant.H6}
marginTop={2}
marginBottom={2}
>
{value}
</Typography>
</Box>
))}
</Box>
</Box>
);
};
SignatureRequestSIWEMessage.propTypes = {
/**
* The data array that contains objects of data about the message
*/
data: PropTypes.arrayOf(
PropTypes.shape({
/**
* The label or title of the value data
*/
label: PropTypes.string,
/**
* The value of the data
*/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
}),
),
};
export default React.memo(SignatureRequestSIWEMessage);