1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/components/app/signature-request-original/signature-request-original.component.js
Dan J Miller 904dad256f Connect Ledger via WebHID (#12411)
* 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>
2021-11-04 11:48:52 -07:00

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