2021-02-04 19:15:23 +01:00
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2021-10-21 21:17:03 +02:00
|
|
|
import LedgerInstructionField from '../ledger-instruction-field';
|
2022-11-30 19:11:36 +01:00
|
|
|
import { sanitizeMessage, getURLHostName } from '../../../helpers/utils/util';
|
2022-04-22 18:09:10 +02:00
|
|
|
import { EVENT } from '../../../../shared/constants/metametrics';
|
2022-11-30 19:11:36 +01:00
|
|
|
import { conversionUtil } from '../../../../shared/modules/conversion.utils';
|
2022-05-20 16:35:18 +02:00
|
|
|
import SiteOrigin from '../../ui/site-origin';
|
2022-11-21 18:19:49 +01:00
|
|
|
import Button from '../../ui/button';
|
|
|
|
import Typography from '../../ui/typography/typography';
|
|
|
|
import ContractDetailsModal from '../modals/contract-details-modal/contract-details-modal';
|
2022-11-30 19:11:36 +01:00
|
|
|
import {
|
|
|
|
TYPOGRAPHY,
|
|
|
|
FONT_WEIGHT,
|
|
|
|
COLORS,
|
2022-12-02 15:12:43 +01:00
|
|
|
TEXT_ALIGN,
|
2022-11-30 19:11:36 +01:00
|
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
import NetworkAccountBalanceHeader from '../network-account-balance-header';
|
|
|
|
import { NETWORK_TYPES } from '../../../../shared/constants/network';
|
2022-11-21 18:19:49 +01:00
|
|
|
import Footer from './signature-request-footer';
|
2022-11-30 19:11:36 +01:00
|
|
|
import Message from './signature-request-message';
|
2019-11-04 13:40:46 +01:00
|
|
|
|
|
|
|
export default class SignatureRequest extends PureComponent {
|
|
|
|
static propTypes = {
|
2021-12-08 21:32:59 +01:00
|
|
|
/**
|
|
|
|
* The display content of transaction data
|
|
|
|
*/
|
2019-11-04 13:40:46 +01:00
|
|
|
txData: PropTypes.object.isRequired,
|
2021-12-08 21:32:59 +01:00
|
|
|
/**
|
|
|
|
* The display content of sender account
|
|
|
|
*/
|
2020-03-06 22:34:56 +01:00
|
|
|
fromAccount: PropTypes.shape({
|
|
|
|
address: PropTypes.string.isRequired,
|
2019-11-04 13:40:46 +01:00
|
|
|
balance: PropTypes.string,
|
|
|
|
name: PropTypes.string,
|
2020-03-06 22:34:56 +01:00
|
|
|
}).isRequired,
|
2021-12-08 21:32:59 +01:00
|
|
|
/**
|
|
|
|
* Check if the wallet is ledget wallet or not
|
|
|
|
*/
|
2021-10-21 21:17:03 +02:00
|
|
|
isLedgerWallet: PropTypes.bool,
|
2021-12-08 21:32:59 +01:00
|
|
|
/**
|
|
|
|
* Handler for cancel button
|
|
|
|
*/
|
2019-11-04 13:40:46 +01:00
|
|
|
cancel: PropTypes.func.isRequired,
|
2021-12-08 21:32:59 +01:00
|
|
|
/**
|
|
|
|
* Handler for sign button
|
|
|
|
*/
|
2019-11-04 13:40:46 +01:00
|
|
|
sign: PropTypes.func.isRequired,
|
2021-12-08 21:32:59 +01:00
|
|
|
/**
|
|
|
|
* Whether the hardware wallet requires a connection disables the sign button if true.
|
|
|
|
*/
|
2021-12-02 19:09:18 +01:00
|
|
|
hardwareWalletRequiresConnection: PropTypes.bool.isRequired,
|
2022-11-21 18:19:49 +01:00
|
|
|
/**
|
|
|
|
* Current network chainId
|
|
|
|
*/
|
|
|
|
chainId: PropTypes.string,
|
|
|
|
/**
|
|
|
|
* RPC prefs of the current network
|
|
|
|
*/
|
|
|
|
rpcPrefs: PropTypes.object,
|
|
|
|
/**
|
|
|
|
* Dapp image
|
|
|
|
*/
|
|
|
|
siteImage: PropTypes.string,
|
2022-11-30 19:11:36 +01:00
|
|
|
conversionRate: PropTypes.number,
|
|
|
|
nativeCurrency: PropTypes.string,
|
|
|
|
provider: PropTypes.object,
|
|
|
|
subjectMetadata: PropTypes.object,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-11-04 13:40:46 +01:00
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
t: PropTypes.func,
|
2022-03-29 15:46:24 +02:00
|
|
|
trackEvent: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-11-04 13:40:46 +01:00
|
|
|
|
2022-02-15 19:39:57 +01:00
|
|
|
state = {
|
|
|
|
hasScrolledMessage: false,
|
2022-11-21 18:19:49 +01:00
|
|
|
showContractDetails: false,
|
2022-02-15 19:39:57 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
setMessageRootRef(ref) {
|
|
|
|
this.messageRootRef = ref;
|
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
formatWallet(wallet) {
|
|
|
|
return `${wallet.slice(0, 8)}...${wallet.slice(
|
|
|
|
wallet.length - 8,
|
|
|
|
wallet.length,
|
2021-02-04 19:15:23 +01:00
|
|
|
)}`;
|
2019-11-04 13:40:46 +01:00
|
|
|
}
|
|
|
|
|
2022-11-30 19:11:36 +01:00
|
|
|
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');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
render() {
|
2019-11-04 13:40:46 +01:00
|
|
|
const {
|
2020-11-03 00:41:28 +01:00
|
|
|
txData: {
|
2021-10-12 18:40:41 +02:00
|
|
|
msgParams: { data, origin, version },
|
|
|
|
type,
|
2020-11-03 00:41:28 +01:00
|
|
|
},
|
2022-11-30 19:11:36 +01:00
|
|
|
fromAccount: { address, balance, name },
|
2019-11-04 13:40:46 +01:00
|
|
|
cancel,
|
|
|
|
sign,
|
2021-10-21 21:17:03 +02:00
|
|
|
isLedgerWallet,
|
|
|
|
hardwareWalletRequiresConnection,
|
2022-11-21 18:19:49 +01:00
|
|
|
chainId,
|
|
|
|
rpcPrefs,
|
|
|
|
siteImage,
|
2022-11-30 19:11:36 +01:00
|
|
|
txData,
|
|
|
|
subjectMetadata,
|
|
|
|
conversionRate,
|
|
|
|
nativeCurrency,
|
2021-02-04 19:15:23 +01:00
|
|
|
} = this.props;
|
2021-12-08 21:56:09 +01:00
|
|
|
const { message, domain = {}, primaryType, types } = JSON.parse(data);
|
2022-03-29 15:46:24 +02:00
|
|
|
const { trackEvent } = this.context;
|
2019-11-04 13:40:46 +01:00
|
|
|
|
2022-11-30 19:11:36 +01:00
|
|
|
const currentNetwork = this.getNetworkName();
|
|
|
|
|
|
|
|
const balanceInBaseAsset = conversionUtil(balance, {
|
|
|
|
fromNumericBase: 'hex',
|
|
|
|
toNumericBase: 'dec',
|
|
|
|
fromDenomination: 'WEI',
|
|
|
|
numberOfDecimals: 6,
|
|
|
|
conversionRate,
|
|
|
|
});
|
|
|
|
|
2021-05-07 22:54:20 +02:00
|
|
|
const onSign = (event) => {
|
|
|
|
sign(event);
|
2022-03-29 15:46:24 +02:00
|
|
|
trackEvent({
|
2022-04-22 18:09:10 +02:00
|
|
|
category: EVENT.CATEGORIES.TRANSACTIONS,
|
2022-03-29 15:46:24 +02:00
|
|
|
event: 'Confirm',
|
|
|
|
properties: {
|
2021-10-12 18:40:41 +02:00
|
|
|
action: 'Sign Request',
|
2022-03-29 15:46:24 +02:00
|
|
|
legacy_event: true,
|
2021-10-12 18:40:41 +02:00
|
|
|
type,
|
|
|
|
version,
|
|
|
|
},
|
|
|
|
});
|
2021-05-07 22:54:20 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const onCancel = (event) => {
|
|
|
|
cancel(event);
|
2022-03-29 15:46:24 +02:00
|
|
|
trackEvent({
|
2022-04-22 18:09:10 +02:00
|
|
|
category: EVENT.CATEGORIES.TRANSACTIONS,
|
2022-03-29 15:46:24 +02:00
|
|
|
event: 'Cancel',
|
|
|
|
properties: {
|
2021-10-12 18:40:41 +02:00
|
|
|
action: 'Sign Request',
|
2022-03-29 15:46:24 +02:00
|
|
|
legacy_event: true,
|
2021-10-12 18:40:41 +02:00
|
|
|
type,
|
|
|
|
version,
|
|
|
|
},
|
|
|
|
});
|
2021-05-07 22:54:20 +02:00
|
|
|
};
|
|
|
|
|
2022-02-15 19:39:57 +01:00
|
|
|
const messageIsScrollable =
|
|
|
|
this.messageRootRef?.scrollHeight > this.messageRootRef?.clientHeight;
|
|
|
|
|
2022-11-30 19:11:36 +01:00
|
|
|
const targetSubjectMetadata = txData.msgParams.origin
|
|
|
|
? subjectMetadata?.[txData.msgParams.origin]
|
|
|
|
: null;
|
|
|
|
|
2019-11-04 13:40:46 +01:00
|
|
|
return (
|
2022-12-02 15:12:43 +01:00
|
|
|
<div className="signature-request">
|
2022-11-30 19:11:36 +01:00
|
|
|
<div className="request-signature__account">
|
|
|
|
<NetworkAccountBalanceHeader
|
|
|
|
networkName={currentNetwork}
|
|
|
|
accountName={name}
|
|
|
|
accountBalance={balanceInBaseAsset}
|
|
|
|
tokenName={nativeCurrency}
|
|
|
|
accountAddress={address}
|
|
|
|
/>
|
|
|
|
</div>
|
2019-11-04 13:40:46 +01:00
|
|
|
<div className="signature-request-content">
|
2022-11-30 19:11:36 +01:00
|
|
|
<div className="signature-request__origin">
|
|
|
|
<SiteOrigin
|
|
|
|
siteOrigin={origin}
|
|
|
|
iconSrc={targetSubjectMetadata?.iconUrl}
|
|
|
|
iconName={getURLHostName(origin) || origin}
|
|
|
|
chip
|
|
|
|
/>
|
2019-11-04 13:40:46 +01:00
|
|
|
</div>
|
2022-11-30 19:11:36 +01:00
|
|
|
|
|
|
|
<Typography
|
|
|
|
className="signature-request__content__title"
|
|
|
|
variant={TYPOGRAPHY.H3}
|
|
|
|
fontWeight={FONT_WEIGHT.BOLD}
|
|
|
|
boxProps={{
|
|
|
|
marginTop: 4,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{this.context.t('sigRequest')}
|
|
|
|
</Typography>
|
2022-12-02 15:12:43 +01:00
|
|
|
<Typography
|
|
|
|
className="request-signature__content__subtitle"
|
|
|
|
variant={TYPOGRAPHY.H7}
|
|
|
|
color={COLORS.TEXT_ALTERNATIVE}
|
|
|
|
align={TEXT_ALIGN.CENTER}
|
|
|
|
margin={12}
|
|
|
|
marginTop={3}
|
|
|
|
>
|
|
|
|
{this.context.t('signatureRequestGuidance')}
|
|
|
|
</Typography>
|
2022-11-21 18:19:49 +01:00
|
|
|
<div>
|
|
|
|
<Button
|
|
|
|
type="link"
|
|
|
|
onClick={() => this.setState({ showContractDetails: true })}
|
|
|
|
className="signature-request-content__verify-contract-details"
|
|
|
|
>
|
|
|
|
<Typography
|
|
|
|
variant={TYPOGRAPHY.H7}
|
|
|
|
color={COLORS.PRIMARY_DEFAULT}
|
|
|
|
>
|
|
|
|
{this.context.t('verifyContractDetails')}
|
|
|
|
</Typography>
|
|
|
|
</Button>
|
2020-11-03 00:41:28 +01:00
|
|
|
</div>
|
2019-11-04 13:40:46 +01:00
|
|
|
</div>
|
2021-10-21 21:17:03 +02:00
|
|
|
{isLedgerWallet ? (
|
|
|
|
<div className="confirm-approve-content__ledger-instruction-wrapper">
|
|
|
|
<LedgerInstructionField showDataInstruction />
|
|
|
|
</div>
|
|
|
|
) : null}
|
2022-02-15 19:39:57 +01:00
|
|
|
<Message
|
|
|
|
data={sanitizeMessage(message, primaryType, types)}
|
|
|
|
onMessageScrolled={() => this.setState({ hasScrolledMessage: true })}
|
|
|
|
setMessageRootRef={this.setMessageRootRef.bind(this)}
|
2022-02-16 00:59:59 +01:00
|
|
|
messageRootRef={this.messageRootRef}
|
|
|
|
messageIsScrollable={messageIsScrollable}
|
2022-02-15 19:39:57 +01:00
|
|
|
/>
|
2021-10-21 21:17:03 +02:00
|
|
|
<Footer
|
|
|
|
cancelAction={onCancel}
|
|
|
|
signAction={onSign}
|
2022-02-15 19:39:57 +01:00
|
|
|
disabled={
|
|
|
|
hardwareWalletRequiresConnection ||
|
|
|
|
(messageIsScrollable && !this.state.hasScrolledMessage)
|
|
|
|
}
|
2021-10-21 21:17:03 +02:00
|
|
|
/>
|
2022-11-21 18:19:49 +01:00
|
|
|
{this.state.showContractDetails && (
|
|
|
|
<ContractDetailsModal
|
|
|
|
toAddress={domain.verifyingContract}
|
|
|
|
chainId={chainId}
|
|
|
|
rpcPrefs={rpcPrefs}
|
|
|
|
origin={origin}
|
|
|
|
siteImage={siteImage}
|
|
|
|
onClose={() => this.setState({ showContractDetails: false })}
|
|
|
|
isContractRequestingSignature
|
|
|
|
/>
|
|
|
|
)}
|
2019-11-04 13:40:46 +01:00
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-11-04 13:40:46 +01:00
|
|
|
}
|
|
|
|
}
|