You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.6 KiB
52 lines
1.6 KiB
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,
|
|
}) {
|
|
const t = useI18nContext();
|
|
const { supportsEIP1559V2 } = useGasFeeContext();
|
|
|
|
return (
|
|
<div className="transaction-detail">
|
|
{supportsEIP1559V2 && (
|
|
<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,
|
|
/**
|
|
* If there is a error in getting correct estimates we show a message to the user
|
|
* which they can acknowledge and proceed with their transaction
|
|
*/
|
|
userAcknowledgedGasMissing: PropTypes.bool.isRequired,
|
|
};
|
|
|