import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { ObjectInspector } from 'react-inspector'; import LedgerInstructionField from '../ledger-instruction-field'; import { MESSAGE_TYPE } from '../../../../shared/constants/app'; import { getURLHostName } from '../../../helpers/utils/util'; import { conversionUtil } from '../../../../shared/modules/conversion.utils'; import { stripHexPrefix } from '../../../../shared/modules/hexstring-utils'; import Button from '../../ui/button'; import SiteOrigin from '../../ui/site-origin'; import NetworkAccountBalanceHeader from '../network-account-balance-header'; import Typography from '../../ui/typography/typography'; import { TYPOGRAPHY, FONT_WEIGHT, COLORS, TEXT_ALIGN, } from '../../../helpers/constants/design-system'; import { NETWORK_TYPES } from '../../../../shared/constants/network'; import SignatureRequestOriginalWarning from './signature-request-original-warning'; export default class SignatureRequestOriginal extends Component { static contextTypes = { t: PropTypes.func.isRequired, }; static propTypes = { fromAccount: PropTypes.shape({ address: PropTypes.string.isRequired, balance: PropTypes.string, name: PropTypes.string, }).isRequired, cancel: PropTypes.func.isRequired, clearConfirmTransaction: PropTypes.func.isRequired, conversionRate: PropTypes.number, history: PropTypes.object.isRequired, mostRecentOverviewPage: PropTypes.string.isRequired, sign: PropTypes.func.isRequired, txData: PropTypes.object.isRequired, subjectMetadata: PropTypes.object, hardwareWalletRequiresConnection: PropTypes.bool, isLedgerWallet: PropTypes.bool, nativeCurrency: PropTypes.string.isRequired, messagesCount: PropTypes.number, showRejectTransactionsConfirmationModal: PropTypes.func.isRequired, cancelAll: PropTypes.func.isRequired, provider: PropTypes.object, }; state = { fromAccount: this.props.fromAccount, showSignatureRequestWarning: false, }; getNetworkName() { const { provider } = this.props; const providerName = provider.type; const { t } = this.context; switch (providerName) { case NETWORK_TYPES.MAINNET: return t('mainnet'); case NETWORK_TYPES.GOERLI: return t('goerli'); case NETWORK_TYPES.SEPOLIA: return t('sepolia'); case NETWORK_TYPES.LOCALHOST: return t('localhost'); default: return provider.nickname || t('unknownNetwork'); } } msgHexToText = (hex) => { try { const stripped = stripHexPrefix(hex); const buff = Buffer.from(stripped, 'hex'); return buff.length === 32 ? hex : buff.toString('utf8'); } catch (e) { return hex; } }; renderTypedData = (data) => { const { t } = this.context; const { domain, message } = JSON.parse(data); return (
{domain ? (

{t('domain')}

) : ( '' )} {message ? (

{t('message')}

) : ( '' )}
); }; renderBody = () => { let rows; const notice = `${this.context.t('youSign')}:`; const { txData, subjectMetadata } = this.props; const { type, msgParams: { data }, } = txData; if (type === MESSAGE_TYPE.PERSONAL_SIGN) { rows = [ { name: this.context.t('message'), value: this.msgHexToText(data) }, ]; } else if (type === MESSAGE_TYPE.ETH_SIGN_TYPED_DATA) { rows = data; } else if (type === MESSAGE_TYPE.ETH_SIGN) { rows = [{ name: this.context.t('message'), value: data }]; } const targetSubjectMetadata = txData.msgParams.origin ? subjectMetadata?.[txData.msgParams.origin] : null; return (
{this.context.t('sigRequest')} {this.context.t('signatureRequestGuidance')}
{notice}
{rows.map(({ name, value }, index) => { if (typeof value === 'boolean') { // eslint-disable-next-line no-param-reassign value = value.toString(); } return (
{`${name}:`}
{value}
); })}
); }; onSubmit = async (event) => { const { clearConfirmTransaction, history, mostRecentOverviewPage, sign } = this.props; await sign(event); clearConfirmTransaction(); history.push(mostRecentOverviewPage); }; onCancel = async (event) => { const { clearConfirmTransaction, history, mostRecentOverviewPage, cancel } = this.props; await cancel(event); clearConfirmTransaction(); history.push(mostRecentOverviewPage); }; renderFooter = () => { const { cancel, sign, clearConfirmTransaction, history, mostRecentOverviewPage, txData: { type }, hardwareWalletRequiresConnection, } = this.props; const { t } = this.context; return (
); }; handleCancelAll = () => { const { cancelAll, clearConfirmTransaction, history, mostRecentOverviewPage, showRejectTransactionsConfirmationModal, messagesCount, } = this.props; const unapprovedTxCount = messagesCount; showRejectTransactionsConfirmationModal({ unapprovedTxCount, onSubmit: async () => { await cancelAll(); clearConfirmTransaction(); history.push(mostRecentOverviewPage); }, }); }; render = () => { const { messagesCount, conversionRate, nativeCurrency } = this.props; const { fromAccount: { address, balance, name }, showSignatureRequestWarning, } = this.state; const { t } = this.context; const rejectNText = t('rejectRequestsN', [messagesCount]); const currentNetwork = this.getNetworkName(); const balanceInBaseAsset = conversionUtil(balance, { fromNumericBase: 'hex', toNumericBase: 'dec', fromDenomination: 'WEI', numberOfDecimals: 6, conversionRate, }); return (
{this.renderBody()} {this.props.isLedgerWallet ? (
) : null} {showSignatureRequestWarning && ( await this.onSubmit(event)} onCancel={async (event) => await this.onCancel(event)} /> )} {this.renderFooter()} {messagesCount > 1 ? ( ) : null}
); }; }