1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js
Sam Gbafa 5802805597
Add Sign-In with Ethereum (#14438)
Co-authored-by: Gregório Granado Magalhães <greg.magalhaes@gmail.com>
Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>
Co-authored-by: brad-decker <bhdecker84@gmail.com>
2022-08-03 09:56:11 -05:00

54 lines
1.4 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import {
FLEX_DIRECTION,
TYPOGRAPHY,
} 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={TYPOGRAPHY.H4} marginTop={2} marginBottom={2}>
{label}
</Typography>
<Typography
className="signature-request-siwe-message__sub-text"
variant={TYPOGRAPHY.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);