mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-12 04:37:13 +01:00
904dad256f
* Connect ledger via webhid if that option is available * Explicitly setting preference for webhid * Use ledgerTransportType enum instead of booleans for ledger live and webhid preferences * Use single setLEdgerTransport preference methods and property * Temp * Lint fix * Unit test fix * Remove async keyword from setLedgerTransportPreference function definition in preferences controller * Fix ledgelive setting toggle logic * Migrate useLedgerLive preference property to ledgerTransportType * Use shared constants for ledger transport type enums * Use constant for ledger usb vendor id * Use correct property to check if ledgerLive preference is set when deciding whether to ask for webhid connection * Update eth-ledger-bridge-keyring to v0.9.0 * Only show ledger live transaction helper messages if using ledger live * Only show ledger live part of tutorial if ledger live setting is on * Fix ledger related prop type errors * Explicitly use u2f enum instead of empty string as a transport type; default transport type to webhid if available; use constants for u2f and webhid * Cleanup * Wrap ledger webhid device request in try/catch * Clean up * Lint fix * Ensure user can easily connect their ledger wallet when they need to. * Fix locales * Fix/improve locales changes * Remove unused isFirefox property from confirm-transaction-base.container.js * Disable transaction and message signing confirmation if ledger webhid requires connection * Ensure translation keys for ledger connection options in settings dropdown can be properly detected by verify-locales * Drop .component from ledger-instruction-field file name * Move renderLedgerLiveStep to module scope * Remove ledgerLive from function and message names in ledger-instruction-field * Wrap ledger connection logic in ledger-instruction-field in try catch * Clean up signature-request.component.js * Check whether the signing address, and not the selected address, is a ledger account in singature-request.container * Ensure ledger instructions and webhid connection button are shown on signature-request-original signatures * Improve webhid selection handling in select-ledger-transport-type onChange handler * Move metamask redux focused ledger selectors to metamask duck * Lint fix * Use async await in checkWebHidStatusRef.current * Remove unnecessary use of ref in ledger-instruction-field.js * Lint fix * Remove unnecessary try/catch in ledger-instruction-field.js * Check if from address, not selected address, is from a ledger account in confirm-approve * Move findKeyringForAddress to metamask duck * Fix typo in function name * Ensure isEqualCaseInsensitive handles possible differences in address casing * Fix Learn More link size in advanced settings tab * Update app/scripts/migrations/066.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Update ui/pages/settings/advanced-tab/advanced-tab.component.test.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Add jsdoc comments for new selectors * Use jest.spyOn for mocking navigator in ledger webhid migration tests * Use LEDGER_TRANSPORT_TYPES values to set proptype of ledgerTransportType * Use LEDGER_TRANSPORT_TYPES values to set proptype of ledgerTransportType * Fix font size of link in ledger connection description in advanced settings * Fix return type in setLedgerTransportPreference comment * Clean up connectHardware code for webhid connection in actions.js * Update app/scripts/migrations/066.test.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Update ui/ducks/metamask/metamask.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Add migration test for when useLedgerLive is true in a browser that supports webhid * Lint fix * Fix inline-link size Co-authored-by: Mark Stacey <markjstacey@gmail.com>
365 lines
9.9 KiB
JavaScript
365 lines
9.9 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { stripHexPrefix } from 'ethereumjs-util';
|
|
import classnames from 'classnames';
|
|
import { ObjectInspector } from 'react-inspector';
|
|
import LedgerInstructionField from '../ledger-instruction-field';
|
|
|
|
import {
|
|
ENVIRONMENT_TYPE_NOTIFICATION,
|
|
MESSAGE_TYPE,
|
|
} from '../../../../shared/constants/app';
|
|
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
|
|
import Identicon from '../../ui/identicon';
|
|
import AccountListItem from '../account-list-item';
|
|
import { conversionUtil } from '../../../../shared/modules/conversion.utils';
|
|
import Button from '../../ui/button';
|
|
import SiteIcon from '../../ui/site-icon';
|
|
|
|
export default class SignatureRequestOriginal extends Component {
|
|
static contextTypes = {
|
|
t: PropTypes.func.isRequired,
|
|
metricsEvent: 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,
|
|
requesterAddress: PropTypes.string,
|
|
sign: PropTypes.func.isRequired,
|
|
txData: PropTypes.object.isRequired,
|
|
domainMetadata: PropTypes.object,
|
|
hardwareWalletRequiresConnection: PropTypes.bool,
|
|
isLedgerWallet: PropTypes.bool,
|
|
};
|
|
|
|
state = {
|
|
fromAccount: this.props.fromAccount,
|
|
};
|
|
|
|
componentDidMount = () => {
|
|
if (getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) {
|
|
window.addEventListener('beforeunload', this._beforeUnload);
|
|
}
|
|
};
|
|
|
|
componentWillUnmount = () => {
|
|
this._removeBeforeUnload();
|
|
};
|
|
|
|
_beforeUnload = (event) => {
|
|
const { clearConfirmTransaction, cancel } = this.props;
|
|
const { metricsEvent } = this.context;
|
|
metricsEvent({
|
|
eventOpts: {
|
|
category: 'Transactions',
|
|
action: 'Sign Request',
|
|
name: 'Cancel Sig Request Via Notification Close',
|
|
},
|
|
});
|
|
clearConfirmTransaction();
|
|
cancel(event);
|
|
};
|
|
|
|
_removeBeforeUnload = () => {
|
|
if (getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) {
|
|
window.removeEventListener('beforeunload', this._beforeUnload);
|
|
}
|
|
};
|
|
|
|
renderHeader = () => {
|
|
return (
|
|
<div className="request-signature__header">
|
|
<div className="request-signature__header-background" />
|
|
|
|
<div className="request-signature__header__text">
|
|
{this.context.t('sigRequest')}
|
|
</div>
|
|
|
|
<div className="request-signature__header__tip-container">
|
|
<div className="request-signature__header__tip" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
renderAccount = () => {
|
|
const { fromAccount } = this.state;
|
|
|
|
return (
|
|
<div className="request-signature__account">
|
|
<div className="request-signature__account-text">
|
|
{`${this.context.t('account')}:`}
|
|
</div>
|
|
|
|
<div className="request-signature__account-item">
|
|
<AccountListItem account={fromAccount} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
renderBalance = () => {
|
|
const { conversionRate } = this.props;
|
|
const {
|
|
fromAccount: { balance },
|
|
} = this.state;
|
|
|
|
const balanceInEther = conversionUtil(balance, {
|
|
fromNumericBase: 'hex',
|
|
toNumericBase: 'dec',
|
|
fromDenomination: 'WEI',
|
|
numberOfDecimals: 6,
|
|
conversionRate,
|
|
});
|
|
|
|
return (
|
|
<div className="request-signature__balance">
|
|
<div className="request-signature__balance-text">
|
|
{`${this.context.t('balance')}:`}
|
|
</div>
|
|
<div className="request-signature__balance-value">
|
|
{`${balanceInEther} ETH`}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
renderRequestIcon = () => {
|
|
const { requesterAddress } = this.props;
|
|
|
|
return (
|
|
<div className="request-signature__request-icon">
|
|
<Identicon diameter={40} address={requesterAddress} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
renderAccountInfo = () => {
|
|
return (
|
|
<div className="request-signature__account-info">
|
|
{this.renderAccount()}
|
|
{this.renderRequestIcon()}
|
|
{this.renderBalance()}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
renderOriginInfo = () => {
|
|
const { txData, domainMetadata } = this.props;
|
|
const { t } = this.context;
|
|
|
|
const originMetadata = txData.msgParams.origin
|
|
? domainMetadata?.[txData.msgParams.origin]
|
|
: null;
|
|
|
|
return (
|
|
<div className="request-signature__origin-row">
|
|
<div className="request-signature__origin-label">
|
|
{`${t('origin')}:`}
|
|
</div>
|
|
{originMetadata?.icon ? (
|
|
<SiteIcon
|
|
icon={originMetadata.icon}
|
|
name={originMetadata.hostname}
|
|
size={24}
|
|
/>
|
|
) : null}
|
|
<div className="request-signature__origin">
|
|
{txData.msgParams.origin}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
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 (
|
|
<div className="request-signature__typed-container">
|
|
{domain ? (
|
|
<div>
|
|
<h1>{t('domain')}</h1>
|
|
<ObjectInspector data={domain} expandLevel={1} name="domain" />
|
|
</div>
|
|
) : (
|
|
''
|
|
)}
|
|
{message ? (
|
|
<div>
|
|
<h1>{t('message')}</h1>
|
|
<ObjectInspector data={message} expandLevel={1} name="message" />
|
|
</div>
|
|
) : (
|
|
''
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
renderBody = () => {
|
|
let rows;
|
|
let notice = `${this.context.t('youSign')}:`;
|
|
|
|
const { txData } = 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 }];
|
|
notice = this.context.t('signNotice');
|
|
}
|
|
|
|
return (
|
|
<div className="request-signature__body">
|
|
{this.renderAccountInfo()}
|
|
{this.renderOriginInfo()}
|
|
<div
|
|
className={classnames('request-signature__notice', {
|
|
'request-signature__warning': type === MESSAGE_TYPE.ETH_SIGN,
|
|
})}
|
|
>
|
|
{notice}
|
|
{type === MESSAGE_TYPE.ETH_SIGN ? (
|
|
<span
|
|
className="request-signature__help-link"
|
|
onClick={() => {
|
|
global.platform.openTab({
|
|
url:
|
|
'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
|
|
});
|
|
}}
|
|
>
|
|
{this.context.t('learnMore')}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div className="request-signature__rows">
|
|
{rows.map(({ name, value }, index) => {
|
|
if (typeof value === 'boolean') {
|
|
// eslint-disable-next-line no-param-reassign
|
|
value = value.toString();
|
|
}
|
|
return (
|
|
<div
|
|
className="request-signature__row"
|
|
key={`request-signature-row-${index}`}
|
|
>
|
|
<div className="request-signature__row-title">{`${name}:`}</div>
|
|
<div className="request-signature__row-value">{value}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
renderFooter = () => {
|
|
const {
|
|
cancel,
|
|
clearConfirmTransaction,
|
|
history,
|
|
mostRecentOverviewPage,
|
|
sign,
|
|
txData: { type },
|
|
hardwareWalletRequiresConnection,
|
|
} = this.props;
|
|
const { metricsEvent, t } = this.context;
|
|
|
|
return (
|
|
<div className="request-signature__footer">
|
|
<Button
|
|
type="secondary"
|
|
large
|
|
className="request-signature__footer__cancel-button"
|
|
onClick={async (event) => {
|
|
this._removeBeforeUnload();
|
|
await cancel(event);
|
|
metricsEvent({
|
|
eventOpts: {
|
|
category: 'Transactions',
|
|
action: 'Sign Request',
|
|
name: 'Cancel',
|
|
},
|
|
customVariables: {
|
|
type,
|
|
},
|
|
});
|
|
clearConfirmTransaction();
|
|
history.push(mostRecentOverviewPage);
|
|
}}
|
|
>
|
|
{t('cancel')}
|
|
</Button>
|
|
<Button
|
|
data-testid="request-signature__sign"
|
|
type="primary"
|
|
large
|
|
className="request-signature__footer__sign-button"
|
|
disabled={hardwareWalletRequiresConnection}
|
|
onClick={async (event) => {
|
|
this._removeBeforeUnload();
|
|
await sign(event);
|
|
metricsEvent({
|
|
eventOpts: {
|
|
category: 'Transactions',
|
|
action: 'Sign Request',
|
|
name: 'Confirm',
|
|
},
|
|
customVariables: {
|
|
type,
|
|
},
|
|
});
|
|
clearConfirmTransaction();
|
|
history.push(mostRecentOverviewPage);
|
|
}}
|
|
>
|
|
{t('sign')}
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
render = () => {
|
|
return (
|
|
<div className="request-signature__container">
|
|
{this.renderHeader()}
|
|
{this.renderBody()}
|
|
{this.props.isLedgerWallet ? (
|
|
<div className="confirm-approve-content__ledger-instruction-wrapper">
|
|
<LedgerInstructionField showDataInstruction />
|
|
</div>
|
|
) : null}
|
|
{this.renderFooter()}
|
|
</div>
|
|
);
|
|
};
|
|
}
|