text: import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  import ConfirmTransactionBase from '../confirm-transaction-base'
  import ConfirmApproveContent from './confirm-approve-content'
  import { getCustomTxParamsData } from './confirm-approve.util'
  import {
    calcTokenAmount,
  } from '../../helpers/utils/token-util'
  
  export default class ConfirmApprove extends Component {
    static contextTypes = {
      t: PropTypes.func,
    }
  
    static propTypes = {
      tokenAddress: PropTypes.string,
      toAddress: PropTypes.string,
      tokenAmount: PropTypes.number,
      tokenSymbol: PropTypes.string,
      fiatTransactionTotal: PropTypes.string,
      ethTransactionTotal: PropTypes.string,
      contractExchangeRate: PropTypes.number,
      conversionRate: PropTypes.number,
      currentCurrency: PropTypes.string,
      showCustomizeGasModal: PropTypes.func,
      showEditApprovalPermissionModal: PropTypes.func,
      origin: PropTypes.string,
      siteImage: PropTypes.string,
      tokenTrackerBalance: PropTypes.string,
      data: PropTypes.string,
      decimals: PropTypes.number,
      txData: PropTypes.object,
    }
  
    static defaultProps = {
      tokenAmount: 0,
    }
  
    state = {
      customPermissionAmount: '',
    }
  
    componentDidUpdate (prevProps) {
      const { tokenAmount } = this.props
  
      if (tokenAmount !== prevProps.tokenAmount) {
        this.setState({ customPermissionAmount: tokenAmount })
      }
    }
  
    render () {
      const {
        toAddress,
        tokenAddress,
        tokenSymbol,
        tokenAmount,
        showCustomizeGasModal,
        showEditApprovalPermissionModal,
        origin,
        siteImage,
        tokenTrackerBalance,
        data,
        decimals,
        txData,
        ethTransactionTotal,
        fiatTransactionTotal,
        ...restProps
      } = this.props
      const { customPermissionAmount } = this.state
  
      const tokensText = `${tokenAmount} ${tokenSymbol}`
  
      const tokenBalance = tokenTrackerBalance
        ? Number(calcTokenAmount(tokenTrackerBalance, decimals)).toPrecision(9)
        : ''
  
      return (
        <ConfirmTransactionBase
          toAddress={toAddress}
          identiconAddress={tokenAddress}
          showAccountInHeader={true}
          title={tokensText}
          contentComponent={<ConfirmApproveContent
            siteImage={siteImage}
            tokenAddress={tokenAddress}
            setCustomAmount={(newAmount) => {
              this.setState({ customPermissionAmount: newAmount })
            }}
            customTokenAmount={String(customPermissionAmount)}
            tokenAmount={String(tokenAmount)}
            origin={origin}
            tokenSymbol={tokenSymbol}
            tokenBalance={tokenBalance}
            showCustomizeGasModal={() => showCustomizeGasModal(txData)}
            showEditApprovalPermissionModal={showEditApprovalPermissionModal}
            data={data}
            toAddress={toAddress}
            ethTransactionTotal={ethTransactionTotal}
            fiatTransactionTotal={fiatTransactionTotal}
          />}
          hideSenderToRecipient={true}
          customTxParamsData={customPermissionAmount
            ? getCustomTxParamsData(data, { customPermissionAmount, tokenAmount, decimals })
            : null
          }
          {...restProps}
        />
      )
    }
  }
  