mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-25 11:28:51 +01:00
Update signature request screens (#15776)
Fix e2e test Update siteicon for v4 signature type Code refactor Code refactor Remove origin and address in signatrue request Update e2e tests Use getNetworkName function Move header component inline jsx Update snaps
This commit is contained in:
amerkadicE
GitHub
parent
b3895b6840
commit
80e4a1fef4
@ -42,7 +42,7 @@ describe('Eth sign', function () {
|
||||
);
|
||||
|
||||
const title = await driver.findElement(
|
||||
'.request-signature__header__text',
|
||||
'.request-signature__content__title',
|
||||
);
|
||||
const origin = await driver.findElement('.request-signature__origin');
|
||||
assert.equal(await title.getText(), 'Signature request');
|
||||
|
||||
@ -45,23 +45,17 @@ describe('Sign Typed Data V4 Signature Request', function () {
|
||||
);
|
||||
|
||||
const title = await driver.findElement(
|
||||
'.signature-request-content__title',
|
||||
);
|
||||
const name = await driver.findElement(
|
||||
'.signature-request-content__info--bolded',
|
||||
);
|
||||
const content = await driver.findElements(
|
||||
'.signature-request-content__info',
|
||||
'.signature-request__content__title',
|
||||
);
|
||||
const origin = await driver.findElement('.signature-request__origin');
|
||||
const verifyContractDetailsButton = await driver.findElement(
|
||||
'.signature-request-content__verify-contract-details',
|
||||
);
|
||||
const origin = content[0];
|
||||
const message = await driver.findElement(
|
||||
'.signature-request-data__node__value',
|
||||
);
|
||||
|
||||
assert.equal(await title.getText(), 'Signature request');
|
||||
assert.equal(await name.getText(), 'Ether Mail');
|
||||
assert.equal(await origin.getText(), 'http://127.0.0.1:8080');
|
||||
|
||||
verifyContractDetailsButton.click();
|
||||
@ -131,23 +125,18 @@ describe('Sign Typed Data V3 Signature Request', function () {
|
||||
);
|
||||
|
||||
const title = await driver.findElement(
|
||||
'.signature-request-content__title',
|
||||
);
|
||||
const name = await driver.findElement(
|
||||
'.signature-request-content__info--bolded',
|
||||
);
|
||||
const content = await driver.findElements(
|
||||
'.signature-request-content__info',
|
||||
'.signature-request__content__title',
|
||||
);
|
||||
const origin = await driver.findElement('.signature-request__origin');
|
||||
const verifyContractDetailsButton = await driver.findElement(
|
||||
'.signature-request-content__verify-contract-details',
|
||||
);
|
||||
const origin = content[0];
|
||||
|
||||
const messages = await driver.findElements(
|
||||
'.signature-request-data__node__value',
|
||||
);
|
||||
|
||||
assert.equal(await title.getText(), 'Signature request');
|
||||
assert.equal(await name.getText(), 'Ether Mail');
|
||||
assert.equal(await origin.getText(), 'http://127.0.0.1:8080');
|
||||
|
||||
verifyContractDetailsButton.click();
|
||||
@ -217,7 +206,7 @@ describe('Sign Typed Data Signature Request', function () {
|
||||
);
|
||||
|
||||
const title = await driver.findElement(
|
||||
'.request-signature__header__text',
|
||||
'.request-signature__content__title',
|
||||
);
|
||||
const origin = await driver.findElement('.request-signature__origin');
|
||||
const message = await driver.findElements(
|
||||
|
||||
@ -4,87 +4,56 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="request-signature__container"
|
||||
>
|
||||
<div
|
||||
class="request-signature__header"
|
||||
>
|
||||
<div
|
||||
class="request-signature__header-background"
|
||||
/>
|
||||
<div
|
||||
class="request-signature__header__text"
|
||||
>
|
||||
Signature request
|
||||
</div>
|
||||
<div
|
||||
class="request-signature__header__tip-container"
|
||||
>
|
||||
<div
|
||||
class="request-signature__header__tip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="request-signature__body"
|
||||
>
|
||||
<div
|
||||
class="request-signature__account-info"
|
||||
>
|
||||
<div
|
||||
class="request-signature__account"
|
||||
>
|
||||
<div
|
||||
class="request-signature__account-text"
|
||||
>
|
||||
Account:
|
||||
</div>
|
||||
<div
|
||||
class="request-signature__account-item"
|
||||
class="box network-account-balance-header box--padding-4 box--display-flex box--flex-direction-row box--justify-content-space-between box--align-items-center"
|
||||
>
|
||||
<div
|
||||
class="account-list-item undefined"
|
||||
data-testid="account-list-item"
|
||||
class="box box--display-flex box--gap-2 box--flex-direction-row box--align-items-center"
|
||||
>
|
||||
<div
|
||||
class="account-list-item__top-row"
|
||||
class="box box--display-flex box--flex-direction-row box--align-items-center"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="identicon account-list-item__identicon"
|
||||
style="height: 18px; width: 18px; border-radius: 9px;"
|
||||
class="identicon"
|
||||
style="height: 32px; width: 32px; border-radius: 16px;"
|
||||
>
|
||||
<div
|
||||
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(250, 58, 0);"
|
||||
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
|
||||
>
|
||||
<svg
|
||||
height="18"
|
||||
width="18"
|
||||
height="32"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<rect
|
||||
fill="#18CDF2"
|
||||
height="18"
|
||||
transform="translate(-0.5897213458840913 -1.8586597890715306) rotate(328.9 9 9)"
|
||||
width="18"
|
||||
height="32"
|
||||
transform="translate(-1.04839350379394 -3.3042840694604987) rotate(328.9 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#035E56"
|
||||
height="18"
|
||||
transform="translate(-10.292884711218024 5.9582598028585885) rotate(176.2 9 9)"
|
||||
width="18"
|
||||
height="32"
|
||||
transform="translate(-18.298461708832043 10.5924618717486) rotate(176.2 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#F26602"
|
||||
height="18"
|
||||
transform="translate(9.375661135250958 -7.990391094185859) rotate(468.9 9 9)"
|
||||
width="18"
|
||||
height="32"
|
||||
transform="translate(16.667842018223922 -14.205139722997082) rotate(468.9 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
@ -93,55 +62,84 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="account-list-item__account-name"
|
||||
class="network-account-balance-header__network-account__ident-icon-ethereum--gray"
|
||||
>
|
||||
<span
|
||||
class="icon-with-fallback__fallback"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
|
||||
>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
|
||||
>
|
||||
Unknown private network
|
||||
</h6>
|
||||
<h6
|
||||
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||
>
|
||||
Test Account
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
|
||||
>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
|
||||
>
|
||||
Balance
|
||||
</h6>
|
||||
<h6
|
||||
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default"
|
||||
>
|
||||
0
|
||||
|
||||
ETH
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="request-signature__request-icon"
|
||||
class="request-signature__body"
|
||||
>
|
||||
<div
|
||||
class="identicon__image-border"
|
||||
style="height: 40px; width: 40px; border-radius: 20px;"
|
||||
class="request-signature__origin"
|
||||
>
|
||||
<div
|
||||
class="site-origin"
|
||||
>
|
||||
<div
|
||||
class="chip chip--with-left-icon chip--border-color-border-muted chip--background-color-undefined"
|
||||
>
|
||||
<div
|
||||
class="chip__left-icon"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="icon-with-fallback__fallback"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="request-signature__balance"
|
||||
>
|
||||
<div
|
||||
class="request-signature__balance-text"
|
||||
>
|
||||
Balance:
|
||||
</div>
|
||||
<div
|
||||
class="request-signature__balance-value"
|
||||
>
|
||||
0 ETH
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="request-signature__origin-row"
|
||||
>
|
||||
<div
|
||||
class="request-signature__origin-label"
|
||||
>
|
||||
Origin:
|
||||
</div>
|
||||
<div
|
||||
class="site-origin request-signature__origin"
|
||||
>
|
||||
<bdi
|
||||
dir="ltr"
|
||||
<span
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography chip__label typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
|
||||
>
|
||||
https://happydapp.website/governance?futarchy=true
|
||||
</bdi>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__title typography--h3 typography--weight-bold typography--style-normal typography--color-text-default"
|
||||
>
|
||||
Signature request
|
||||
</h3>
|
||||
<div
|
||||
class="request-signature__notice"
|
||||
>
|
||||
|
||||
@ -45,106 +45,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__header-background {
|
||||
position: absolute;
|
||||
background-color: var(--color-background-alternative);
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__header__text {
|
||||
&__content__title {
|
||||
@include H3;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: var(--color-default-text);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&__header__tip-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__header__tip {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: var(--color-background-alternative);
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__account-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&__account {
|
||||
color: var(--color-text-alternative);
|
||||
margin-left: 17px;
|
||||
}
|
||||
|
||||
&__account-text {
|
||||
@include H6;
|
||||
}
|
||||
|
||||
&__account-item {
|
||||
@include H7;
|
||||
|
||||
height: 22px;
|
||||
background-color: var(--color-background-default);
|
||||
width: 124px;
|
||||
|
||||
.account-list-item {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.account-list-item__account-name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.account-list-item__top-row {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__balance {
|
||||
color: var(--color-text-alternative);
|
||||
margin-right: 17px;
|
||||
width: 124px;
|
||||
}
|
||||
|
||||
&__balance-text {
|
||||
@include H6;
|
||||
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__balance-value {
|
||||
text-align: right;
|
||||
margin-top: 2.5px;
|
||||
}
|
||||
|
||||
&__request-icon {
|
||||
margin-top: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__body {
|
||||
@ -155,24 +66,11 @@
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__origin-row {
|
||||
@include Paragraph;
|
||||
|
||||
display: flex;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
&__origin-label {
|
||||
flex-grow: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&__origin-icon {
|
||||
flex: 0 0 24px;
|
||||
}
|
||||
|
||||
&__origin {
|
||||
margin-left: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&__notice,
|
||||
|
||||
@ -7,13 +7,17 @@ import LedgerInstructionField from '../ledger-instruction-field';
|
||||
import { MESSAGE_TYPE } from '../../../../shared/constants/app';
|
||||
import { EVENT } from '../../../../shared/constants/metametrics';
|
||||
import { getURLHostName } from '../../../helpers/utils/util';
|
||||
import Identicon from '../../ui/identicon';
|
||||
import AccountListItem from '../account-list-item';
|
||||
import { conversionUtil } from '../../../../shared/modules/conversion.utils';
|
||||
import { stripHexPrefix } from '../../../../shared/modules/hexstring-utils';
|
||||
import Button from '../../ui/button';
|
||||
import SiteIcon from '../../ui/site-icon';
|
||||
import SiteOrigin from '../../ui/site-origin';
|
||||
import NetworkAccountBalanceHeader from '../network-account-balance-header';
|
||||
import Typography from '../../ui/typography/typography';
|
||||
import {
|
||||
TYPOGRAPHY,
|
||||
FONT_WEIGHT,
|
||||
} 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 {
|
||||
@ -33,7 +37,6 @@ export default class SignatureRequestOriginal extends Component {
|
||||
conversionRate: PropTypes.number,
|
||||
history: PropTypes.object.isRequired,
|
||||
mostRecentOverviewPage: PropTypes.string.isRequired,
|
||||
requesterAddress: PropTypes.string,
|
||||
sign: PropTypes.func.isRequired,
|
||||
txData: PropTypes.object.isRequired,
|
||||
subjectMetadata: PropTypes.object,
|
||||
@ -43,6 +46,7 @@ export default class SignatureRequestOriginal extends Component {
|
||||
messagesCount: PropTypes.number,
|
||||
showRejectTransactionsConfirmationModal: PropTypes.func.isRequired,
|
||||
cancelAll: PropTypes.func.isRequired,
|
||||
provider: PropTypes.object,
|
||||
};
|
||||
|
||||
state = {
|
||||
@ -50,115 +54,24 @@ export default class SignatureRequestOriginal extends Component {
|
||||
showSignatureRequestWarning: false,
|
||||
};
|
||||
|
||||
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, nativeCurrency } = this.props;
|
||||
const {
|
||||
fromAccount: { balance },
|
||||
} = this.state;
|
||||
|
||||
const balanceInBaseAsset = 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">
|
||||
{`${balanceInBaseAsset} ${nativeCurrency}`}
|
||||
</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, subjectMetadata } = this.props;
|
||||
getNetworkName() {
|
||||
const { provider } = this.props;
|
||||
const providerName = provider.type;
|
||||
const { t } = this.context;
|
||||
|
||||
const targetSubjectMetadata = txData.msgParams.origin
|
||||
? subjectMetadata?.[txData.msgParams.origin]
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="request-signature__origin-row">
|
||||
<div className="request-signature__origin-label">
|
||||
{`${t('origin')}:`}
|
||||
</div>
|
||||
{targetSubjectMetadata?.iconUrl ? (
|
||||
<SiteIcon
|
||||
className="request-signature__origin-icon"
|
||||
icon={targetSubjectMetadata.iconUrl}
|
||||
name={
|
||||
getURLHostName(targetSubjectMetadata.origin) ||
|
||||
targetSubjectMetadata.origin
|
||||
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');
|
||||
}
|
||||
}
|
||||
size={24}
|
||||
/>
|
||||
) : null}
|
||||
<SiteOrigin
|
||||
className="request-signature__origin"
|
||||
siteOrigin={txData.msgParams.origin}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
msgHexToText = (hex) => {
|
||||
try {
|
||||
@ -199,7 +112,7 @@ export default class SignatureRequestOriginal extends Component {
|
||||
let rows;
|
||||
const notice = `${this.context.t('youSign')}:`;
|
||||
|
||||
const { txData } = this.props;
|
||||
const { txData, subjectMetadata } = this.props;
|
||||
const {
|
||||
type,
|
||||
msgParams: { data },
|
||||
@ -215,10 +128,32 @@ export default class SignatureRequestOriginal extends Component {
|
||||
rows = [{ name: this.context.t('message'), value: data }];
|
||||
}
|
||||
|
||||
const targetSubjectMetadata = txData.msgParams.origin
|
||||
? subjectMetadata?.[txData.msgParams.origin]
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="request-signature__body">
|
||||
{this.renderAccountInfo()}
|
||||
{this.renderOriginInfo()}
|
||||
<div className="request-signature__origin">
|
||||
<SiteOrigin
|
||||
siteOrigin={txData.msgParams.origin}
|
||||
iconSrc={targetSubjectMetadata?.iconUrl}
|
||||
iconName={
|
||||
getURLHostName(targetSubjectMetadata?.origin) ||
|
||||
targetSubjectMetadata?.origin
|
||||
}
|
||||
chip
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Typography
|
||||
className="request-signature__content__title"
|
||||
variant={TYPOGRAPHY.H3}
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
>
|
||||
{this.context.t('sigRequest')}
|
||||
</Typography>
|
||||
|
||||
<div className={classnames('request-signature__notice')}>{notice}</div>
|
||||
<div className="request-signature__rows">
|
||||
{rows.map(({ name, value }, index) => {
|
||||
@ -367,13 +302,32 @@ export default class SignatureRequestOriginal extends Component {
|
||||
};
|
||||
|
||||
render = () => {
|
||||
const { messagesCount } = this.props;
|
||||
const { showSignatureRequestWarning, fromAccount } = this.state;
|
||||
const { messagesCount, conversionRate, nativeCurrency } = this.props;
|
||||
const { fromAccount, showSignatureRequestWarning } = this.state;
|
||||
const { t } = this.context;
|
||||
|
||||
const rejectNText = t('rejectRequestsN', [messagesCount]);
|
||||
const currentNetwork = this.getNetworkName();
|
||||
|
||||
const balanceInBaseAsset = conversionUtil(fromAccount.balance, {
|
||||
fromNumericBase: 'hex',
|
||||
toNumericBase: 'dec',
|
||||
fromDenomination: 'WEI',
|
||||
numberOfDecimals: 6,
|
||||
conversionRate,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="request-signature__container">
|
||||
{this.renderHeader()}
|
||||
<div className="request-signature__account">
|
||||
<NetworkAccountBalanceHeader
|
||||
networkName={currentNetwork}
|
||||
accountName={fromAccount.name}
|
||||
accountBalance={balanceInBaseAsset}
|
||||
tokenName={nativeCurrency}
|
||||
accountAddress={fromAccount.address}
|
||||
/>
|
||||
</div>
|
||||
{this.renderBody()}
|
||||
{this.props.isLedgerWallet ? (
|
||||
<div className="confirm-approve-content__ledger-instruction-wrapper">
|
||||
|
||||
@ -25,13 +25,13 @@ function mapStateToProps(state, ownProps) {
|
||||
const {
|
||||
msgParams: { from },
|
||||
} = ownProps.txData;
|
||||
const { provider } = state.metamask;
|
||||
|
||||
const hardwareWalletRequiresConnection =
|
||||
doesAddressRequireLedgerHidConnection(state, from);
|
||||
const isLedgerWallet = isAddressLedger(state, from);
|
||||
const messagesList = unconfirmedMessagesHashSelector(state);
|
||||
const messagesCount = getTotalUnapprovedMessagesCount(state);
|
||||
|
||||
return {
|
||||
requester: null,
|
||||
requesterAddress: null,
|
||||
@ -45,6 +45,7 @@ function mapStateToProps(state, ownProps) {
|
||||
subjectMetadata: getSubjectMetadata(state),
|
||||
messagesList,
|
||||
messagesCount,
|
||||
provider,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -38,34 +38,6 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__identicon-container {
|
||||
padding: 1rem;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__identicon-border {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--color-background-default);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&__identicon-initial {
|
||||
position: absolute;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 60px;
|
||||
color: var(--color-background-default);
|
||||
z-index: 1;
|
||||
text-shadow: var(--shadow-size-xs) var(--color-shadow-default);
|
||||
}
|
||||
|
||||
&__info {
|
||||
@include H7;
|
||||
|
||||
|
||||
@ -1,17 +1,22 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Identicon from '../../ui/identicon';
|
||||
import LedgerInstructionField from '../ledger-instruction-field';
|
||||
import { sanitizeMessage } from '../../../helpers/utils/util';
|
||||
import { sanitizeMessage, getURLHostName } from '../../../helpers/utils/util';
|
||||
import { EVENT } from '../../../../shared/constants/metametrics';
|
||||
import { conversionUtil } from '../../../../shared/modules/conversion.utils';
|
||||
import SiteOrigin from '../../ui/site-origin';
|
||||
import Button from '../../ui/button';
|
||||
import Typography from '../../ui/typography/typography';
|
||||
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
|
||||
import ContractDetailsModal from '../modals/contract-details-modal/contract-details-modal';
|
||||
import Message from './signature-request-message';
|
||||
import {
|
||||
TYPOGRAPHY,
|
||||
FONT_WEIGHT,
|
||||
COLORS,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import NetworkAccountBalanceHeader from '../network-account-balance-header';
|
||||
import { NETWORK_TYPES } from '../../../../shared/constants/network';
|
||||
import Footer from './signature-request-footer';
|
||||
import Header from './signature-request-header';
|
||||
import Message from './signature-request-message';
|
||||
|
||||
export default class SignatureRequest extends PureComponent {
|
||||
static propTypes = {
|
||||
@ -55,6 +60,10 @@ export default class SignatureRequest extends PureComponent {
|
||||
* Dapp image
|
||||
*/
|
||||
siteImage: PropTypes.string,
|
||||
conversionRate: PropTypes.number,
|
||||
nativeCurrency: PropTypes.string,
|
||||
provider: PropTypes.object,
|
||||
subjectMetadata: PropTypes.object,
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
@ -78,13 +87,32 @@ export default class SignatureRequest extends PureComponent {
|
||||
)}`;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
fromAccount,
|
||||
txData: {
|
||||
msgParams: { data, origin, version },
|
||||
type,
|
||||
},
|
||||
fromAccount: { address, balance, name },
|
||||
cancel,
|
||||
sign,
|
||||
isLedgerWallet,
|
||||
@ -92,11 +120,24 @@ export default class SignatureRequest extends PureComponent {
|
||||
chainId,
|
||||
rpcPrefs,
|
||||
siteImage,
|
||||
txData,
|
||||
subjectMetadata,
|
||||
conversionRate,
|
||||
nativeCurrency,
|
||||
} = this.props;
|
||||
const { address: fromAddress } = fromAccount;
|
||||
const { message, domain = {}, primaryType, types } = JSON.parse(data);
|
||||
const { trackEvent } = this.context;
|
||||
|
||||
const currentNetwork = this.getNetworkName();
|
||||
|
||||
const balanceInBaseAsset = conversionUtil(balance, {
|
||||
fromNumericBase: 'hex',
|
||||
toNumericBase: 'dec',
|
||||
fromDenomination: 'WEI',
|
||||
numberOfDecimals: 6,
|
||||
conversionRate,
|
||||
});
|
||||
|
||||
const onSign = (event) => {
|
||||
sign(event);
|
||||
trackEvent({
|
||||
@ -128,27 +169,42 @@ export default class SignatureRequest extends PureComponent {
|
||||
const messageIsScrollable =
|
||||
this.messageRootRef?.scrollHeight > this.messageRootRef?.clientHeight;
|
||||
|
||||
const targetSubjectMetadata = txData.msgParams.origin
|
||||
? subjectMetadata?.[txData.msgParams.origin]
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="signature-request page-container">
|
||||
<Header fromAccount={fromAccount} />
|
||||
<div className="signature-request-content">
|
||||
<div className="signature-request-content__title">
|
||||
{this.context.t('sigRequest')}
|
||||
</div>
|
||||
<div className="signature-request-content__identicon-container">
|
||||
<div className="signature-request-content__identicon-initial">
|
||||
{domain.name && domain.name[0]}
|
||||
</div>
|
||||
<div className="signature-request-content__identicon-border" />
|
||||
<Identicon address={fromAddress} diameter={70} />
|
||||
</div>
|
||||
<div className="signature-request-content__info--bolded">
|
||||
{domain.name}
|
||||
</div>
|
||||
<SiteOrigin
|
||||
className="signature-request-content__info"
|
||||
siteOrigin={origin}
|
||||
<div className="request-signature__account">
|
||||
<NetworkAccountBalanceHeader
|
||||
networkName={currentNetwork}
|
||||
accountName={name}
|
||||
accountBalance={balanceInBaseAsset}
|
||||
tokenName={nativeCurrency}
|
||||
accountAddress={address}
|
||||
/>
|
||||
</div>
|
||||
<div className="signature-request-content">
|
||||
<div className="signature-request__origin">
|
||||
<SiteOrigin
|
||||
siteOrigin={origin}
|
||||
iconSrc={targetSubjectMetadata?.iconUrl}
|
||||
iconName={getURLHostName(origin) || origin}
|
||||
chip
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Typography
|
||||
className="signature-request__content__title"
|
||||
variant={TYPOGRAPHY.H3}
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
boxProps={{
|
||||
marginTop: 4,
|
||||
}}
|
||||
>
|
||||
{this.context.t('sigRequest')}
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
type="link"
|
||||
|
||||
@ -74,6 +74,7 @@ describe('Signature Request Component', () => {
|
||||
msgParams,
|
||||
}}
|
||||
fromAccount={{ address: fromAddress }}
|
||||
provider={{ type: 'rpc' }}
|
||||
/>,
|
||||
);
|
||||
|
||||
@ -113,6 +114,7 @@ describe('Signature Request Component', () => {
|
||||
msgParams,
|
||||
}}
|
||||
fromAccount={{ address: fromAddress }}
|
||||
provider={{ type: 'rpc' }}
|
||||
/>,
|
||||
);
|
||||
|
||||
|
||||
@ -4,9 +4,13 @@ import {
|
||||
doesAddressRequireLedgerHidConnection,
|
||||
getCurrentChainId,
|
||||
getRpcPrefsForCurrentProvider,
|
||||
conversionRateSelector,
|
||||
getSubjectMetadata,
|
||||
} from '../../../selectors';
|
||||
import { isAddressLedger } from '../../../ducks/metamask/metamask';
|
||||
import {
|
||||
isAddressLedger,
|
||||
getNativeCurrency,
|
||||
} from '../../../ducks/metamask/metamask';
|
||||
import { getAccountByAddress } from '../../../helpers/utils/util';
|
||||
import { MESSAGE_TYPE } from '../../../../shared/constants/app';
|
||||
import SignatureRequest from './signature-request.component';
|
||||
@ -16,6 +20,8 @@ function mapStateToProps(state, ownProps) {
|
||||
const {
|
||||
msgParams: { from },
|
||||
} = txData;
|
||||
const { provider } = state.metamask;
|
||||
|
||||
const hardwareWalletRequiresConnection =
|
||||
doesAddressRequireLedgerHidConnection(state, from);
|
||||
const isLedgerWallet = isAddressLedger(state, from);
|
||||
@ -27,11 +33,15 @@ function mapStateToProps(state, ownProps) {
|
||||
subjectMetadata[txData.msgParams.origin] || {};
|
||||
|
||||
return {
|
||||
provider,
|
||||
isLedgerWallet,
|
||||
hardwareWalletRequiresConnection,
|
||||
chainId,
|
||||
rpcPrefs,
|
||||
siteImage,
|
||||
conversionRate: conversionRateSelector(state),
|
||||
nativeCurrency: getNativeCurrency(state),
|
||||
subjectMetadata: getSubjectMetadata(state),
|
||||
// not forwarded to component
|
||||
allAccounts: accountsWithSendEtherInfoSelector(state),
|
||||
};
|
||||
@ -45,6 +55,10 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
|
||||
chainId,
|
||||
rpcPrefs,
|
||||
siteImage,
|
||||
conversionRate,
|
||||
nativeCurrency,
|
||||
provider,
|
||||
subjectMetadata,
|
||||
} = stateProps;
|
||||
const {
|
||||
signPersonalMessage,
|
||||
@ -89,6 +103,10 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
|
||||
chainId,
|
||||
rpcPrefs,
|
||||
siteImage,
|
||||
conversionRate,
|
||||
nativeCurrency,
|
||||
provider,
|
||||
subjectMetadata,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -74,6 +74,9 @@ describe('Signature Request', () => {
|
||||
clearConfirmTransaction: sinon.spy(),
|
||||
cancelMessage: sinon.spy(),
|
||||
cancel: sinon.stub().resolves(),
|
||||
provider: {
|
||||
type: 'rpc',
|
||||
},
|
||||
sign: sinon.stub().resolves(),
|
||||
txData: {
|
||||
msgParams: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user