2022-08-03 16:56:11 +02:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import Box from '../../../ui/box';
|
2023-04-21 21:36:27 +02:00
|
|
|
import { Text } from '../../../component-library';
|
2022-08-03 16:56:11 +02:00
|
|
|
|
|
|
|
import {
|
|
|
|
FLEX_DIRECTION,
|
2023-04-21 21:36:27 +02:00
|
|
|
OVERFLOW_WRAP,
|
|
|
|
TextVariant,
|
2022-08-03 16:56:11 +02:00
|
|
|
} 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}>
|
2023-04-21 21:36:27 +02:00
|
|
|
<Text
|
|
|
|
as="h4"
|
|
|
|
variant={TextVariant.bodyLgMedium}
|
2023-02-02 21:15:26 +01:00
|
|
|
marginTop={2}
|
|
|
|
marginBottom={2}
|
|
|
|
>
|
2022-08-03 16:56:11 +02:00
|
|
|
{label}
|
2023-04-21 21:36:27 +02:00
|
|
|
</Text>
|
|
|
|
<Text
|
2022-08-03 16:56:11 +02:00
|
|
|
className="signature-request-siwe-message__sub-text"
|
2023-04-21 21:36:27 +02:00
|
|
|
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
|
2022-08-03 16:56:11 +02:00
|
|
|
marginTop={2}
|
|
|
|
marginBottom={2}
|
|
|
|
>
|
|
|
|
{value}
|
2023-04-21 21:36:27 +02:00
|
|
|
</Text>
|
2022-08-03 16:56:11 +02:00
|
|
|
</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);
|