From b5b3f67b4bb8ec3bbcbf435dccd546d8c8f72482 Mon Sep 17 00:00:00 2001
From: Niranjana Binoy <43930900+NiranjanaBinoy@users.noreply.github.com>
Date: Tue, 6 Jun 2023 09:53:28 -0400
Subject: [PATCH] Using NetworkAccountBalanceHeader component on SIWE screen
(#19361)
---
.../signature-request-header.test.js.snap | 102 ++++++++++++++++++
.../app/signature-request-header/index.js | 1 +
.../signature-request-header.js | 91 ++++++++++++++++
.../signature-request-header.stories.js | 54 ++++++++++
.../signature-request-header.test.js | 27 +++++
.../signature-request-original.component.js | 52 +--------
.../signature-request-original.container.js | 17 +--
.../signature-request-original.stories.js | 4 +
.../signature-request-siwe.test.js.snap | 96 +++++++++++++++++
.../signature-request-siwe.js | 8 +-
10 files changed, 386 insertions(+), 66 deletions(-)
create mode 100644 ui/components/app/signature-request-header/__snapshots__/signature-request-header.test.js.snap
create mode 100644 ui/components/app/signature-request-header/index.js
create mode 100644 ui/components/app/signature-request-header/signature-request-header.js
create mode 100644 ui/components/app/signature-request-header/signature-request-header.stories.js
create mode 100644 ui/components/app/signature-request-header/signature-request-header.test.js
diff --git a/ui/components/app/signature-request-header/__snapshots__/signature-request-header.test.js.snap b/ui/components/app/signature-request-header/__snapshots__/signature-request-header.test.js.snap
new file mode 100644
index 000000000..58642cc3e
--- /dev/null
+++ b/ui/components/app/signature-request-header/__snapshots__/signature-request-header.test.js.snap
@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SignatureRequestHeader should match snapshot 1`] = `
+
+
+
+`;
diff --git a/ui/components/app/signature-request-header/index.js b/ui/components/app/signature-request-header/index.js
new file mode 100644
index 000000000..e154c42e9
--- /dev/null
+++ b/ui/components/app/signature-request-header/index.js
@@ -0,0 +1 @@
+export { default } from './signature-request-header';
diff --git a/ui/components/app/signature-request-header/signature-request-header.js b/ui/components/app/signature-request-header/signature-request-header.js
new file mode 100644
index 000000000..6fb3149dc
--- /dev/null
+++ b/ui/components/app/signature-request-header/signature-request-header.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+
+import {
+ getNativeCurrency,
+ getProviderConfig,
+} from '../../../ducks/metamask/metamask';
+import {
+ accountsWithSendEtherInfoSelector,
+ conversionRateSelector,
+ getCurrentChainId,
+ getCurrentCurrency,
+ getPreferences,
+} from '../../../selectors';
+import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
+import {
+ getAccountByAddress,
+ getNetworkNameFromProviderType,
+} from '../../../helpers/utils/util';
+import { EtherDenomination } from '../../../../shared/constants/common';
+import { getValueFromWeiHex } from '../../../../shared/modules/conversion.utils';
+import { Numeric } from '../../../../shared/modules/Numeric';
+
+import NetworkAccountBalanceHeader from '../network-account-balance-header';
+
+const SignatureRequestHeader = ({ txData }) => {
+ const t = useI18nContext();
+ const {
+ msgParams: { from },
+ } = txData;
+ const allAccounts = useSelector(accountsWithSendEtherInfoSelector);
+ const fromAccount = getAccountByAddress(allAccounts, from);
+ const nativeCurrency = useSelector(getNativeCurrency);
+ const currentCurrency = useSelector(getCurrentCurrency);
+ const currentChainId = useSelector(getCurrentChainId);
+
+ const providerConfig = useSelector(getProviderConfig);
+ const networkName = getNetworkNameFromProviderType(providerConfig.type);
+ const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
+ const conversionRateFromSelector = useSelector(conversionRateSelector);
+ const conversionRate = useNativeCurrencyAsPrimaryCurrency
+ ? null
+ : conversionRateFromSelector;
+
+ const currentNetwork =
+ networkName === ''
+ ? providerConfig.nickname || t('unknownNetwork')
+ : t(networkName);
+
+ const balanceInBaseAsset = conversionRate
+ ? formatCurrency(
+ getValueFromWeiHex({
+ value: fromAccount.balance,
+ fromCurrency: nativeCurrency,
+ toCurrency: currentCurrency,
+ conversionRate,
+ numberOfDecimals: 6,
+ toDenomination: EtherDenomination.ETH,
+ }),
+ currentCurrency,
+ )
+ : new Numeric(fromAccount.balance, 16, EtherDenomination.WEI)
+ .toDenomination(EtherDenomination.ETH)
+ .round(6)
+ .toBase(10)
+ .toString();
+
+ return (
+
+ );
+};
+
+SignatureRequestHeader.propTypes = {
+ /**
+ * The display content of transaction data
+ */
+ txData: PropTypes.object.isRequired,
+};
+
+export default SignatureRequestHeader;
diff --git a/ui/components/app/signature-request-header/signature-request-header.stories.js b/ui/components/app/signature-request-header/signature-request-header.stories.js
new file mode 100644
index 000000000..129ef31ab
--- /dev/null
+++ b/ui/components/app/signature-request-header/signature-request-header.stories.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import SignatureRequestHeader from './signature-request-header';
+
+export default {
+ title: 'Components/App/SignatureRequestHeader',
+ argTypes: {
+ txData: { control: 'object' },
+ },
+ args: {
+ txData: {
+ msgParams: {
+ from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
+ data: JSON.stringify({
+ domain: {
+ name: 'happydapp.website',
+ },
+ message: {
+ string: 'haay wuurl',
+ number: 42,
+ },
+ primaryType: 'Mail',
+ types: {
+ EIP712Domain: [
+ { name: 'name', type: 'string' },
+ { name: 'version', type: 'string' },
+ { name: 'chainId', type: 'uint256' },
+ { name: 'verifyingContract', type: 'address' },
+ ],
+ Group: [
+ { name: 'name', type: 'string' },
+ { name: 'members', type: 'Person[]' },
+ ],
+ Mail: [
+ { name: 'from', type: 'Person' },
+ { name: 'to', type: 'Person[]' },
+ { name: 'contents', type: 'string' },
+ ],
+ Person: [
+ { name: 'name', type: 'string' },
+ { name: 'wallets', type: 'address[]' },
+ ],
+ },
+ }),
+ origin: 'https://happydapp.website/',
+ },
+ },
+ },
+};
+
+export const DefaultStory = (args) => {
+ return ;
+};
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/app/signature-request-header/signature-request-header.test.js b/ui/components/app/signature-request-header/signature-request-header.test.js
new file mode 100644
index 000000000..a8956273c
--- /dev/null
+++ b/ui/components/app/signature-request-header/signature-request-header.test.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import mockState from '../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+
+import SignatureRequestHeader from '.';
+
+const props = {
+ txData: {
+ msgParams: {
+ from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+ },
+ },
+};
+
+describe('SignatureRequestHeader', () => {
+ const store = configureMockStore()(mockState);
+
+ it('should match snapshot', () => {
+ const { container } = renderWithProvider(
+ ,
+ store,
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+});
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 fe20b8adb..b9a130c19 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
@@ -5,7 +5,6 @@ import { ObjectInspector } from 'react-inspector';
import LedgerInstructionField from '../ledger-instruction-field';
import { MESSAGE_TYPE } from '../../../../shared/constants/app';
import {
- getNetworkNameFromProviderType,
getURLHostName,
sanitizeString,
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
@@ -15,7 +14,6 @@ import {
import { stripHexPrefix } from '../../../../shared/modules/hexstring-utils';
import Button from '../../ui/button';
import SiteOrigin from '../../ui/site-origin';
-import NetworkAccountBalanceHeader from '../network-account-balance-header';
import Typography from '../../ui/typography/typography';
import { PageContainerFooter } from '../../ui/page-container';
import {
@@ -31,17 +29,14 @@ import {
BackgroundColor,
///: END:ONLY_INCLUDE_IN
} from '../../../helpers/constants/design-system';
-import { Numeric } from '../../../../shared/modules/Numeric';
-import { EtherDenomination } from '../../../../shared/constants/common';
import ConfirmPageContainerNavigation from '../confirm-page-container/confirm-page-container-navigation';
import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message';
import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../security-provider-banner-message/security-provider-banner-message.constants';
-import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
-import { getValueFromWeiHex } from '../../../../shared/modules/conversion.utils';
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
import { Icon, IconName, Text } from '../../component-library';
import Box from '../../ui/box/box';
///: END:ONLY_INCLUDE_IN
+import SignatureRequestHeader from '../signature-request-header';
import SignatureRequestOriginalWarning from './signature-request-original-warning';
export default class SignatureRequestOriginal extends Component {
@@ -52,7 +47,6 @@ export default class SignatureRequestOriginal extends Component {
static propTypes = {
fromAccount: PropTypes.shape({
address: PropTypes.string.isRequired,
- balance: PropTypes.string,
name: PropTypes.string,
}).isRequired,
cancel: PropTypes.func.isRequired,
@@ -64,13 +58,9 @@ export default class SignatureRequestOriginal extends Component {
subjectMetadata: PropTypes.object,
hardwareWalletRequiresConnection: PropTypes.bool,
isLedgerWallet: PropTypes.bool,
- nativeCurrency: PropTypes.string.isRequired,
- currentCurrency: PropTypes.string.isRequired,
- conversionRate: PropTypes.number,
messagesCount: PropTypes.number,
showRejectTransactionsConfirmationModal: PropTypes.func.isRequired,
cancelAll: PropTypes.func.isRequired,
- providerConfig: PropTypes.object,
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
selectedAccount: PropTypes.object,
///: END:ONLY_INCLUDE_IN
@@ -316,40 +306,14 @@ export default class SignatureRequestOriginal extends Component {
render = () => {
const {
- providerConfig,
messagesCount,
- nativeCurrency,
- currentCurrency,
- fromAccount: { address, balance, name },
- conversionRate,
+ fromAccount: { address, name },
+ txData,
} = this.props;
const { showSignatureRequestWarning } = this.state;
const { t } = this.context;
const rejectNText = t('rejectRequestsN', [messagesCount]);
- const networkName = getNetworkNameFromProviderType(providerConfig.type);
- const currentNetwork =
- networkName === ''
- ? providerConfig.nickname || t('unknownNetwork')
- : t(networkName);
-
- const balanceInBaseAsset = conversionRate
- ? formatCurrency(
- getValueFromWeiHex({
- value: balance,
- fromCurrency: nativeCurrency,
- toCurrency: currentCurrency,
- conversionRate,
- numberOfDecimals: 6,
- toDenomination: EtherDenomination.ETH,
- }),
- currentCurrency,
- )
- : new Numeric(balance, 16, EtherDenomination.WEI)
- .toDenomination(EtherDenomination.ETH)
- .round(6)
- .toBase(10)
- .toString();
return (
@@ -357,15 +321,7 @@ export default class SignatureRequestOriginal extends Component {
-
+
{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 7ab93113a..a9b9c9096 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
@@ -6,13 +6,10 @@ import { MESSAGE_TYPE } from '../../../../shared/constants/app';
import { goHome, cancelMsgs, showModal } from '../../../store/actions';
import {
accountsWithSendEtherInfoSelector,
- conversionRateSelector,
getSubjectMetadata,
doesAddressRequireLedgerHidConnection,
unconfirmedMessagesHashSelector,
getTotalUnapprovedMessagesCount,
- getPreferences,
- getCurrentCurrency,
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
getSelectedAccount,
///: END:ONLY_INCLUDE_IN
@@ -20,25 +17,19 @@ import {
import { getAccountByAddress, valuesFor } from '../../../helpers/utils/util';
import { clearConfirmTransaction } from '../../../ducks/confirm-transaction/confirm-transaction.duck';
import { getMostRecentOverviewPage } from '../../../ducks/history/history';
-import {
- isAddressLedger,
- getNativeCurrency,
- getProviderConfig,
-} from '../../../ducks/metamask/metamask';
+import { isAddressLedger } from '../../../ducks/metamask/metamask';
import SignatureRequestOriginal from './signature-request-original.component';
function mapStateToProps(state, ownProps) {
const {
msgParams: { from },
} = ownProps.txData;
- const providerConfig = getProviderConfig(state);
const hardwareWalletRequiresConnection =
doesAddressRequireLedgerHidConnection(state, from);
const isLedgerWallet = isAddressLedger(state, from);
const messagesList = unconfirmedMessagesHashSelector(state);
const messagesCount = getTotalUnapprovedMessagesCount(state);
- const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state);
return {
requester: null,
@@ -46,17 +37,11 @@ function mapStateToProps(state, ownProps) {
mostRecentOverviewPage: getMostRecentOverviewPage(state),
hardwareWalletRequiresConnection,
isLedgerWallet,
- nativeCurrency: getNativeCurrency(state),
- currentCurrency: getCurrentCurrency(state),
- conversionRate: useNativeCurrencyAsPrimaryCurrency
- ? null
- : conversionRateSelector(state),
// not passed to component
allAccounts: accountsWithSendEtherInfoSelector(state),
subjectMetadata: getSubjectMetadata(state),
messagesList,
messagesCount,
- providerConfig,
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
selectedAccount: getSelectedAccount(state),
///: END:ONLY_INCLUDE_IN
diff --git a/ui/components/app/signature-request-original/signature-request-original.stories.js b/ui/components/app/signature-request-original/signature-request-original.stories.js
index df8d450cc..3e1346d34 100644
--- a/ui/components/app/signature-request-original/signature-request-original.stories.js
+++ b/ui/components/app/signature-request-original/signature-request-original.stories.js
@@ -89,6 +89,7 @@ DefaultStory.storyName = 'personal_sign Type';
DefaultStory.args = {
txData: {
msgParams: {
+ from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
data: MOCK_SIGN_DATA,
origin: 'https://happydapp.website/governance?futarchy=true',
},
@@ -103,6 +104,7 @@ ETHSignStory.storyName = 'eth_sign Type';
ETHSignStory.args = {
txData: {
msgParams: {
+ from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
data: MOCK_SIGN_DATA,
origin: 'https://happydapp.website/governance?futarchy=true',
},
@@ -117,6 +119,7 @@ ETHSignTypedStory.storyName = 'eth_signTypedData Type';
ETHSignTypedStory.args = {
txData: {
msgParams: {
+ from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
data: [
{
type: 'string',
@@ -142,6 +145,7 @@ AccountMismatchStory.storyName = 'Account Mismatch warning';
AccountMismatchStory.args = {
txData: {
msgParams: {
+ from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
data: MOCK_SIGN_DATA,
origin: 'https://happydapp.website/governance?futarchy=true',
},
diff --git a/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap b/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap
index d7106d17d..5fe93e511 100644
--- a/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap
+++ b/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap
@@ -5,6 +5,102 @@ exports[`SignatureRequestSIWE (Sign in with Ethereum) should match snapshot 1`]
+