import React, { Component } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import Identicon from '../../../components/ui/identicon' import { addressSummary } from '../../../helpers/utils/util' import { formatCurrency } from '../../../helpers/utils/confirm-tx.util' export default class ConfirmApproveContent extends Component { static contextTypes = { t: PropTypes.func, } static propTypes = { decimals: PropTypes.number, tokenAmount: PropTypes.string, customTokenAmount: PropTypes.string, tokenSymbol: PropTypes.string, siteImage: PropTypes.string, showCustomizeGasModal: PropTypes.func, showEditApprovalPermissionModal: PropTypes.func, origin: PropTypes.string, setCustomAmount: PropTypes.func, tokenBalance: PropTypes.string, data: PropTypes.string, toAddress: PropTypes.string, currentCurrency: PropTypes.string, fiatTransactionTotal: PropTypes.string, ethTransactionTotal: PropTypes.string, } state = { showFullTxDetails: false, } renderApproveContentCard({ symbol, title, showEdit, onEditClick, content, footer, noBorder, }) { return (
{symbol}
{title}
{showEdit && (
onEditClick()} > Edit
)}
{content}
{footer}
) } // TODO: Add "Learn Why" with link to the feeAssociatedRequest text renderTransactionDetailsContent() { const { t } = this.context const { currentCurrency, ethTransactionTotal, fiatTransactionTotal, } = this.props return (
{t('feeAssociatedRequest')}
{formatCurrency(fiatTransactionTotal, currentCurrency)}
{`${ethTransactionTotal} ETH`}
) } renderPermissionContent() { const { t } = this.context const { customTokenAmount, tokenAmount, tokenSymbol, origin, toAddress, } = this.props return (
{t('accessAndSpendNotice', [origin])}
{t('amountWithColon')}
{`${Number(customTokenAmount || tokenAmount)} ${tokenSymbol}`}
{t('toWithColon')}
{addressSummary(toAddress)}
) } renderDataContent() { const { t } = this.context const { data } = this.props return (
{t('functionApprove')}
{data}
) } render() { const { t } = this.context const { decimals, siteImage, tokenAmount, customTokenAmount, origin, tokenSymbol, showCustomizeGasModal, showEditApprovalPermissionModal, setCustomAmount, tokenBalance, } = this.props const { showFullTxDetails } = this.state return (
{t('allowOriginSpendToken', [origin, tokenSymbol])}
{t('trustSiteApprovePermission', [origin, tokenSymbol])}
showEditApprovalPermissionModal({ customTokenAmount, decimals, origin, setCustomAmount, tokenAmount, tokenSymbol, tokenBalance, }) } > {t('editPermission')}
{this.renderApproveContentCard({ symbol: , title: 'Transaction Fee', showEdit: true, onEditClick: showCustomizeGasModal, content: this.renderTransactionDetailsContent(), noBorder: !showFullTxDetails, footer: (
this.setState({ showFullTxDetails: !this.state.showFullTxDetails, }) } >
View full transaction details
), })}
{showFullTxDetails ? (
{this.renderApproveContentCard({ symbol: , title: 'Permission', content: this.renderPermissionContent(), showEdit: true, onEditClick: () => showEditApprovalPermissionModal({ customTokenAmount, decimals, origin, setCustomAmount, tokenAmount, tokenSymbol, tokenBalance, }), })}
{this.renderApproveContentCard({ symbol: , title: 'Data', content: this.renderDataContent(), noBorder: true, })}
) : null}
) } }