diff --git a/ui/components/app/signature-request-original/index.scss b/ui/components/app/signature-request-original/index.scss
index f342759b7..26ee4c81a 100644
--- a/ui/components/app/signature-request-original/index.scss
+++ b/ui/components/app/signature-request-original/index.scss
@@ -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,
diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js
index 6470cec08..e02b29b81 100644
--- a/ui/components/app/signature-request-original/signature-request-original.component.js
+++ b/ui/components/app/signature-request-original/signature-request-original.component.js
@@ -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 (
-
-
-
-
- {this.context.t('sigRequest')}
-
-
-
-
- );
- };
-
- renderAccount = () => {
- const { fromAccount } = this.state;
-
- return (
-
-
- {`${this.context.t('account')}:`}
-
-
-
-
- );
- };
-
- 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 (
-
-
- {`${this.context.t('balance')}:`}
-
-
- {`${balanceInBaseAsset} ${nativeCurrency}`}
-
-
- );
- };
-
- renderRequestIcon = () => {
- const { requesterAddress } = this.props;
-
- return (
-
-
-
- );
- };
-
- renderAccountInfo = () => {
- return (
-
- {this.renderAccount()}
- {this.renderRequestIcon()}
- {this.renderBalance()}
-
- );
- };
-
- 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 (
-
-
- {`${t('origin')}:`}
-
- {targetSubjectMetadata?.iconUrl ? (
-
- ) : null}
-
-
- );
- };
+ 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 {
@@ -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 (
- {this.renderAccountInfo()}
- {this.renderOriginInfo()}
+
+
+
+
+
+ {this.context.t('sigRequest')}
+
+
{notice}
{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 (
- {this.renderHeader()}
+
+
+
{this.renderBody()}
{this.props.isLedgerWallet ? (
diff --git a/ui/components/app/signature-request-original/signature-request-original.container.js b/ui/components/app/signature-request-original/signature-request-original.container.js
index 90b1db753..3d7c9aa65 100644
--- a/ui/components/app/signature-request-original/signature-request-original.container.js
+++ b/ui/components/app/signature-request-original/signature-request-original.container.js
@@ -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,
};
}
diff --git a/ui/components/app/signature-request/index.scss b/ui/components/app/signature-request/index.scss
index 389b6a354..0e5c891a7 100644
--- a/ui/components/app/signature-request/index.scss
+++ b/ui/components/app/signature-request/index.scss
@@ -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;
diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js
index 6d140ccac..18c3f487e 100644
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@@ -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 (
-
-
-
- {this.context.t('sigRequest')}
-
-
-
- {domain.name && domain.name[0]}
-
-
-
-
-
- {domain.name}
-
-
+
+
+
+
+
+
+
+
+ {this.context.t('sigRequest')}
+
+