Using NetworkAccountBalanceHeader component on SIWE screen (#19361)

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`] = `
+<div>
+  <div
+    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="box box--display-flex box--gap-2 box--flex-direction-row box--align-items-center"
+    >
+      <div
+        class="box box--display-flex box--flex-direction-row box--align-items-center"
+      >
+        <div
+          class=""
+        >
+          <div
+            class="identicon"
+            style="height: 32px; width: 32px; border-radius: 16px;"
+          >
+            <div
+              style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
+            >
+              <svg
+                height="32"
+                width="32"
+                x="0"
+                y="0"
+              >
+                <rect
+                  fill="#18CDF2"
+                  height="32"
+                  transform="translate(-1.04839350379394 -3.3042840694604987) rotate(328.9 16 16)"
+                  width="32"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#035E56"
+                  height="32"
+                  transform="translate(-18.298461708832043 10.5924618717486) rotate(176.2 16 16)"
+                  width="32"
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="#F26602"
+                  height="32"
+                  transform="translate(16.667842018223922 -14.205139722997082) rotate(468.9 16 16)"
+                  width="32"
+                  x="0"
+                  y="0"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          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 mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+        >
+          Unknown private network
+        </h6>
+        <h6
+          class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--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 mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+      >
+        Balance
+      </h6>
+      <h6
+        align="end"
+        class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
+      >
+        966.987986
+         
+        ETH
+      </h6>
+    </div>
+  </div>
+</div>
+`;

ui/components/app/signature-request-header/index.js

@@ -0,0 +1 @@
+export { default } from './signature-request-header';

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 (
+    <NetworkAccountBalanceHeader
+      networkName={currentNetwork}
+      accountName={fromAccount.name}
+      accountBalance={balanceInBaseAsset}
+      tokenName={
+        conversionRate ? currentCurrency?.toUpperCase() : nativeCurrency
+      }
+      accountAddress={fromAccount.address}
+      chainId={currentChainId}
+    />
+  );
+};
+
+SignatureRequestHeader.propTypes = {
+  /**
+   * The display content of transaction data
+   */
+  txData: PropTypes.object.isRequired,
+};
+
+export default SignatureRequestHeader;

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 <SignatureRequestHeader {...args} />;
+};
+
+DefaultStory.storyName = 'Default';

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(
+      <SignatureRequestHeader {...props} />,
+      store,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

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,
+      fromAccount: { address, name },
-      currentCurrency,
+      txData,
-      fromAccount: { address, balance, name },
-      conversionRate,
     } = 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 (
       <div className="request-signature__container">
@@ -357,15 +321,7 @@ export default class SignatureRequestOriginal extends Component {
           <ConfirmPageContainerNavigation />
         </div>
         <div className="request-signature__account">
-          <NetworkAccountBalanceHeader
+          <SignatureRequestHeader txData={txData} />
-            networkName={currentNetwork}
-            accountName={name}
-            accountBalance={balanceInBaseAsset}
-            tokenName={
-              conversionRate ? currentCurrency?.toUpperCase() : nativeCurrency
-            }
-            accountAddress={address}
-          />
         </div>
         {this.renderBody()}
         {this.props.isLedgerWallet ? (

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 {
+import { isAddressLedger } from '../../../ducks/metamask/metamask';
-  isAddressLedger,
-  getNativeCurrency,
-  getProviderConfig,
-} 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

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',
     },

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`]
   <div
     class="signature-request-siwe"
   >
+    <div
+      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="box box--display-flex box--gap-2 box--flex-direction-row box--align-items-center"
+      >
+        <div
+          class="box box--display-flex box--flex-direction-row box--align-items-center"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 32px; width: 32px; border-radius: 16px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
+              >
+                <svg
+                  height="32"
+                  width="32"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#18CDF2"
+                    height="32"
+                    transform="translate(-1.04839350379394 -3.3042840694604987) rotate(328.9 16 16)"
+                    width="32"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#035E56"
+                    height="32"
+                    transform="translate(-18.298461708832043 10.5924618717486) rotate(176.2 16 16)"
+                    width="32"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F26602"
+                    height="32"
+                    transform="translate(16.667842018223922 -14.205139722997082) rotate(468.9 16 16)"
+                    width="32"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            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 mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+          >
+            Unknown private network
+          </h6>
+          <h6
+            class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--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 mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+        >
+          Balance
+        </h6>
+        <h6
+          align="end"
+          class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
+        >
+          966.987986
+           
+          ETH
+        </h6>
+      </div>
+    </div>
     <div
       class="signature-request-siwe-header"
     >

ui/components/app/signature-request-siwe/signature-request-siwe.js

@@ -15,6 +15,7 @@ import {
 } from '../../../selectors';
 import { getAccountByAddress } from '../../../helpers/utils/util';
 import { formatMessageParams } from '../../../../shared/modules/siwe';
+
 import {
   SEVERITIES,
   TextVariant,
@@ -23,6 +24,8 @@ import {
 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 LedgerInstructionField from '../ledger-instruction-field';
+
+import SignatureRequestHeader from '../signature-request-header';
 import Header from './signature-request-siwe-header';
 import Message from './signature-request-siwe-message';
 
@@ -31,6 +34,8 @@ export default function SignatureRequestSIWE({
   cancelPersonalMessage,
   signPersonalMessage,
 }) {
+  const t = useContext(I18nContext);
+
   const allAccounts = useSelector(accountsWithSendEtherInfoSelector);
   const subjectMetadata = useSelector(getSubjectMetadata);
 
@@ -47,8 +52,6 @@ export default function SignatureRequestSIWE({
   const fromAccount = getAccountByAddress(allAccounts, from);
   const targetSubjectMetadata = subjectMetadata[origin];
 
-  const t = useContext(I18nContext);
-
   const isMatchingAddress =
     from.toLowerCase() === parsedMessage.address.toLowerCase();
 
@@ -89,6 +92,7 @@ export default function SignatureRequestSIWE({
 
   return (
     <div className="signature-request-siwe">
+      <SignatureRequestHeader txData={txData} />
       <Header
         fromAccount={fromAccount}
         domain={origin}