1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/signature-request/signature-request-message/signature-request-message.js

104 lines
3.0 KiB
JavaScript
Raw Normal View History

import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import { debounce } from 'lodash';
import { I18nContext } from '../../../../contexts/i18n';
import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import {
DISPLAY,
FONT_WEIGHT,
FLEX_DIRECTION,
AlignItems,
JustifyContent,
Color,
BackgroundColor,
BorderColor,
BorderRadius,
TextColor,
} from '../../../../helpers/constants/design-system';
import SignatureRequestData from '../signature-request-data';
export default function SignatureRequestMessage({
data,
onMessageScrolled,
setMessageRootRef,
messageRootRef,
messageIsScrollable,
primaryType,
}) {
const t = useContext(I18nContext);
const [messageIsScrolled, setMessageIsScrolled] = useState(false);
const setMessageIsScrolledAtBottom = () => {
if (!messageRootRef || messageIsScrolled) {
return;
}
const { scrollTop, offsetHeight, scrollHeight } = messageRootRef;
const isAtBottom = Math.round(scrollTop) + offsetHeight >= scrollHeight;
if (isAtBottom) {
setMessageIsScrolled(true);
onMessageScrolled();
}
};
return (
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
onScroll={debounce(setMessageIsScrolledAtBottom, 25)}
className="signature-request-message"
>
{messageIsScrollable ? (
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
borderColor={BorderColor.borderDefault}
backgroundColor={BackgroundColor.backgroundDefault}
color={Color.iconDefault}
onClick={() => {
setMessageIsScrolled(true);
onMessageScrolled();
messageRootRef?.scrollTo(0, messageRootRef?.scrollHeight);
}}
className="signature-request-message__scroll-button"
data-testid="signature-request-scroll-button"
>
<i className="fa fa-arrow-down" aria-label={t('scrollDown')} />
</Box>
) : null}
<Box
backgroundColor={BackgroundColor.backgroundDefault}
paddingBottom={3}
paddingTop={3}
paddingRight={3}
margin={2}
borderRadius={BorderRadius.XL}
borderColor={BorderColor.borderMuted}
className="signature-request-message__root"
ref={setMessageRootRef}
>
<Typography
fontWeight={FONT_WEIGHT.BOLD}
color={TextColor.textDefault}
marginLeft={4}
className="signature-request-message__title"
>
{primaryType}
</Typography>
<SignatureRequestData data={data.value} />
</Box>
</Box>
);
}
SignatureRequestMessage.propTypes = {
data: PropTypes.object.isRequired,
onMessageScrolled: PropTypes.func,
setMessageRootRef: PropTypes.func,
messageRootRef: PropTypes.object,
messageIsScrollable: PropTypes.bool,
primaryType: PropTypes.string,
};