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/signature-request-message/signature-request-message.js
Vladimir Saric 42be5a07d7
Replaced addresses by the address component on SignTypedData v4 signatures (#16018)
* 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
2022-11-10 06:58:34 -03:30

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,
};