mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
107 lines
2.9 KiB
JavaScript
107 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { toBuffer } from '../../../../shared/modules/buffer-utils';
|
|
import { getKnownMethodData } from '../../../selectors';
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
import { useTransactionFunctionType } from '../../../hooks/useTransactionFunctionType';
|
|
import {
|
|
Color,
|
|
OVERFLOW_WRAP,
|
|
TextVariant,
|
|
TEXT_TRANSFORM,
|
|
} from '../../../helpers/constants/design-system';
|
|
import Box from '../../ui/box';
|
|
import { Text } from '../../component-library';
|
|
import CopyRawData from '../transaction-decoding/components/ui/copy-raw-data';
|
|
|
|
const ConfirmHexData = ({ txData, dataHexComponent }) => {
|
|
const t = useI18nContext();
|
|
const { txParams = {} } = txData;
|
|
const methodData = useSelector(
|
|
(state) => getKnownMethodData(state, txParams.data) || {},
|
|
);
|
|
const { functionType } = useTransactionFunctionType(txData);
|
|
|
|
if (dataHexComponent) {
|
|
return dataHexComponent;
|
|
}
|
|
|
|
if (!txParams.data || !txParams.to) {
|
|
return null;
|
|
}
|
|
|
|
const { params } = methodData;
|
|
const functionParams = params?.length
|
|
? `(${params.map(({ type }) => type).join(', ')})`
|
|
: '';
|
|
|
|
return (
|
|
<Box padding={4}>
|
|
<Box paddingBottom={3} paddingTop={2}>
|
|
<Text
|
|
as="span"
|
|
textTransform={TEXT_TRANSFORM.UPPERCASE}
|
|
variant={TextVariant.bodySm}
|
|
>
|
|
{`${t('functionType')}:`}
|
|
</Text>
|
|
<Text
|
|
as="span"
|
|
color={Color.textDefault}
|
|
paddingLeft={1}
|
|
textTransform={TEXT_TRANSFORM.CAPITALIZE}
|
|
variant={TextVariant.bodySmBold}
|
|
>
|
|
{`${functionType} ${functionParams}`}
|
|
</Text>
|
|
</Box>
|
|
{params && (
|
|
<Box backgroundColor={Color.backgroundAlternative} padding={4}>
|
|
<Text
|
|
as="h3"
|
|
paddingBottom={3}
|
|
paddingTop={2}
|
|
textTransform={TEXT_TRANSFORM.UPPERCASE}
|
|
variant={TextVariant.bodySm}
|
|
>
|
|
{`${t('parameters')}:`}
|
|
</Text>
|
|
<Text
|
|
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
|
|
variant={TextVariant.bodySm}
|
|
>
|
|
<pre>{JSON.stringify(params, null, 2)}</pre>
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
<Text
|
|
as="h3"
|
|
paddingBottom={3}
|
|
paddingTop={2}
|
|
textTransform={TEXT_TRANSFORM.UPPERCASE}
|
|
variant={TextVariant.bodySm}
|
|
>
|
|
{`${t('hexData')}: ${toBuffer(txParams?.data).length} bytes`}
|
|
</Text>
|
|
<Text
|
|
backgroundColor={Color.backgroundAlternative}
|
|
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
|
|
padding={4}
|
|
variant={TextVariant.bodySm}
|
|
>
|
|
{txParams?.data}
|
|
</Text>
|
|
<CopyRawData data={txParams?.data} />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
ConfirmHexData.propTypes = {
|
|
txData: PropTypes.object,
|
|
dataHexComponent: PropTypes.element,
|
|
};
|
|
|
|
export default ConfirmHexData;
|