mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
|
import React from 'react';
|
||
|
import PropTypes from 'prop-types';
|
||
|
import { useSelector } from 'react-redux';
|
||
|
|
||
|
import {
|
||
|
Color,
|
||
|
TextVariant,
|
||
|
TEXT_TRANSFORM,
|
||
|
} from '../../../helpers/constants/design-system';
|
||
|
import { getKnownMethodData } from '../../../selectors';
|
||
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
||
|
import { useTransactionFunctionType } from '../../../hooks/useTransactionFunctionType';
|
||
|
|
||
|
import Box from '../../ui/box/box';
|
||
|
import Disclosure from '../../ui/disclosure';
|
||
|
import TransactionDecoding from '../transaction-decoding';
|
||
|
import { Text } from '../../component-library';
|
||
|
|
||
|
const ConfirmData = ({ txData, dataComponent }) => {
|
||
|
const t = useI18nContext();
|
||
|
const { txParams = {} } = txData;
|
||
|
const methodData = useSelector(
|
||
|
(state) => getKnownMethodData(state, txParams.data) || {},
|
||
|
);
|
||
|
const { functionType } = useTransactionFunctionType(txData);
|
||
|
|
||
|
if (dataComponent) {
|
||
|
return dataComponent;
|
||
|
}
|
||
|
|
||
|
if (!txParams.data) {
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
const { params } = methodData;
|
||
|
const functionParams = params?.length
|
||
|
? `(${params.map(({ type }) => type).join(', ')})`
|
||
|
: '';
|
||
|
|
||
|
return (
|
||
|
<Box color={Color.textAlternative} className="confirm-data" 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>
|
||
|
<Disclosure>
|
||
|
<TransactionDecoding to={txParams?.to} inputData={txParams?.data} />
|
||
|
</Disclosure>
|
||
|
</Box>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
ConfirmData.propTypes = {
|
||
|
txData: PropTypes.object,
|
||
|
dataComponent: PropTypes.element,
|
||
|
};
|
||
|
|
||
|
export default ConfirmData;
|