1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/app/transaction-detail/transaction-detail.component.js

51 lines
1.5 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { useGasFeeContext } from '../../../contexts/gasFee';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Box from '../../ui/box';
import EditGasFeeButton from '../edit-gas-fee-button';
import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
export default function TransactionDetail({
rows = [],
onEdit,
userAcknowledgedGasMissing = false,
disableEditGasFeeButton = false,
}) {
const t = useI18nContext();
const { supportsEIP1559V2 } = useGasFeeContext();
return (
<div className="transaction-detail">
{supportsEIP1559V2 && !disableEditGasFeeButton && (
<Box display="flex" justifyContent="flex-end" paddingTop={5}>
<EditGasFeeButton
userAcknowledgedGasMissing={userAcknowledgedGasMissing}
/>
</Box>
)}
{!supportsEIP1559V2 && onEdit && (
<div className="transaction-detail-edit">
<button onClick={onEdit}>{t('edit')}</button>
</div>
)}
<div className="transaction-detail-rows">{rows}</div>
</div>
);
}
TransactionDetail.propTypes = {
/**
* Show item content for transaction detail. Array of TransactionDetailItem components
*/
rows: PropTypes.arrayOf(TransactionDetailItem).isRequired,
/**
* onClick handler for the Edit link
*/
onEdit: PropTypes.func,
userAcknowledgedGasMissing: PropTypes.bool,
disableEditGasFeeButton: PropTypes.bool,
};