mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 15:35:46 +01:00
42be5a07d7
* Replaced addresses by the address component on SignTypedData v4 signatures * Fixing signature-request e2e tests * Modified scss file for signature-request message * Using address component for rendering the addresses and bold label where hex address is not valid * Modify the address component * Added proper BEM syntax for class names and used Box and Typography * FIxing e2e tests * Commited requested changes from George and added storybook * Review requested changes * Created new component for rendering data in signature-request-message.js * Fixing proper usage for getAccountName and getMetadataContractName selectors * Fixing e2e tests
99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
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,
|
|
ALIGN_ITEMS,
|
|
JUSTIFY_CONTENT,
|
|
COLORS,
|
|
FONT_WEIGHT,
|
|
FLEX_DIRECTION,
|
|
SIZES,
|
|
} from '../../../../helpers/constants/design-system';
|
|
import SignatureRequestData from '../signature-request-data';
|
|
|
|
export default function SignatureRequestMessage({
|
|
data,
|
|
onMessageScrolled,
|
|
setMessageRootRef,
|
|
messageRootRef,
|
|
messageIsScrollable,
|
|
}) {
|
|
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={ALIGN_ITEMS.CENTER}
|
|
justifyContent={JUSTIFY_CONTENT.CENTER}
|
|
borderColor={COLORS.BORDER_DEFAULT}
|
|
backgroundColor={COLORS.BACKGROUND_DEFAULT}
|
|
color={COLORS.ICON_DEFAULT}
|
|
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={COLORS.BACKGROUND_DEFAULT}
|
|
paddingBottom={3}
|
|
paddingTop={3}
|
|
paddingRight={3}
|
|
margin={2}
|
|
borderRadius={SIZES.XL}
|
|
borderColor={COLORS.BORDER_MUTED}
|
|
className="signature-request-message__root"
|
|
ref={setMessageRootRef}
|
|
>
|
|
<Typography
|
|
fontWeight={FONT_WEIGHT.BOLD}
|
|
color={COLORS.TEXT_DEFAULT}
|
|
marginLeft={4}
|
|
className="signature-request-message__title"
|
|
>
|
|
{t('signatureRequest1')}
|
|
</Typography>
|
|
<SignatureRequestData data={data} />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
SignatureRequestMessage.propTypes = {
|
|
data: PropTypes.object.isRequired,
|
|
onMessageScrolled: PropTypes.func,
|
|
setMessageRootRef: PropTypes.func,
|
|
messageRootRef: PropTypes.object,
|
|
messageIsScrollable: PropTypes.bool,
|
|
};
|