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 (
);
})}
);
};
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}
);
};
}