Merge branch 'develop' into hm/migrate-snap-permissions-to-caveats

test/e2e/tests/encrypt-decrypt.spec.js

@@ -42,11 +42,6 @@ describe('Encrypt Decrypt', function () {
           css: '.request-encryption-public-key__header__text',
           text: 'Request encryption public key',
         });
-        // Account balance is converted properly
-        const accountBalanceLabel = await driver.findElement(
-          '.request-encryption-public-key__balance-value',
-        );
-        assert.equal(await accountBalanceLabel.getText(), '25 ETH');
         await driver.clickElement({ text: 'Provide', tag: 'button' });
         await driver.waitUntilXWindowHandles(2);
         windowHandles = await driver.getAllWindowHandles();
@@ -99,4 +94,86 @@ describe('Encrypt Decrypt', function () {
       },
     );
   });
+
+  it('should show balance correctly as ETH', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPermissionControllerConnectedToTestDapp()
+          .build(),
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+        await driver.openNewPage('http://127.0.0.1:8080');
+
+        // ------ Get Encryption key and display ETH ------
+        await driver.clickElement('#getEncryptionKeyButton');
+        await driver.waitUntilXWindowHandles(3);
+        const windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.waitForSelector({
+          css: '.request-encryption-public-key__header__text',
+          text: 'Request encryption public key',
+        });
+        // Account balance is converted properly
+        const accountBalanceLabel = await driver.findElement(
+          '.request-encryption-public-key__balance-value',
+        );
+        assert.equal(await accountBalanceLabel.getText(), '25 ETH');
+      },
+    );
+  });
+
+  it('should show balance correctly as Fiat', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPermissionControllerConnectedToTestDapp()
+          .withPreferencesController({
+            preferences: {
+              useNativeCurrencyAsPrimaryCurrency: false,
+            },
+          })
+          .build(),
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        await driver.clickElement('.account-menu__icon');
+        await driver.openNewPage('http://127.0.0.1:8080');
+
+        // ------ Get Encryption key and display ETH ------
+        await driver.clickElement('#getEncryptionKeyButton');
+        await driver.waitUntilXWindowHandles(3);
+        const windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.waitForSelector({
+          css: '.request-encryption-public-key__header__text',
+          text: 'Request encryption public key',
+        });
+
+        // Account balance is converted properly
+        const accountBalanceLabel = await driver.findElement(
+          '.request-encryption-public-key__balance-value',
+        );
+        assert.equal(await accountBalanceLabel.getText(), '$42,500.00 USD');
+      },
+    );
+  });
 });

ui/components/app/signature-request-original/signature-request-original.component.js

@@ -24,6 +24,8 @@ 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';
 import SignatureRequestOriginalWarning from './signature-request-original-warning';
 
 export default class SignatureRequestOriginal extends Component {
@@ -47,6 +49,8 @@ export default class SignatureRequestOriginal extends Component {
     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,
@@ -280,19 +284,33 @@ export default class SignatureRequestOriginal extends Component {
     const {
       messagesCount,
       nativeCurrency,
+      currentCurrency,
       fromAccount: { address, balance, name },
+      conversionRate,
     } = this.props;
     const { showSignatureRequestWarning } = this.state;
     const { t } = this.context;
 
     const rejectNText = t('rejectRequestsN', [messagesCount]);
     const currentNetwork = this.getNetworkName();
 
-    const balanceInBaseAsset = new Numeric(balance, 16, EtherDenomination.WEI)
-      .toDenomination(EtherDenomination.ETH)
-      .toBase(10)
-      .round(6)
-      .toString();
+    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">
@@ -304,7 +322,9 @@ export default class SignatureRequestOriginal extends Component {
             networkName={currentNetwork}
             accountName={name}
             accountBalance={balanceInBaseAsset}
-            tokenName={nativeCurrency}
+            tokenName={
+              conversionRate ? currentCurrency?.toUpperCase() : nativeCurrency
+            }
             accountAddress={address}
           />
         </div>

ui/components/app/signature-request-original/signature-request-original.container.js

@@ -11,6 +11,8 @@ import {
   doesAddressRequireLedgerHidConnection,
   unconfirmedMessagesHashSelector,
   getTotalUnapprovedMessagesCount,
+  getPreferences,
+  getCurrentCurrency,
 } from '../../../selectors';
 import { getAccountByAddress, valuesFor } from '../../../helpers/utils/util';
 import { clearConfirmTransaction } from '../../../ducks/confirm-transaction/confirm-transaction.duck';
@@ -32,14 +34,19 @@ function mapStateToProps(state, ownProps) {
   const isLedgerWallet = isAddressLedger(state, from);
   const messagesList = unconfirmedMessagesHashSelector(state);
   const messagesCount = getTotalUnapprovedMessagesCount(state);
+  const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state);
+
   return {
     requester: null,
     requesterAddress: null,
-    conversionRate: conversionRateSelector(state),
     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),

ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Signature Request Component render should match snapshot when useNativeCurrencyAsPrimaryCurrency is false 1`] = `
+exports[`Signature Request Component render should match snapshot when we are using eth 1`] = `
 <div>
   <div
     class="signature-request"
@@ -73,6 +73,7 @@ exports[`Signature Request Component render should match snapshot when useNative
     </div>
     <div
       class="request-signature__account"
+      data-testid="request-signature-account"
     >
       <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"
@@ -147,7 +148,9 @@ exports[`Signature Request Component render should match snapshot when useNative
             </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"
-            />
+            >
+              Antonio
+            </h6>
           </div>
         </div>
         <div
@@ -161,9 +164,9 @@ exports[`Signature Request Component render should match snapshot when useNative
           <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
+            966.987986
              
-            DEF
+            ABC
           </h6>
         </div>
       </div>
@@ -772,7 +775,7 @@ exports[`Signature Request Component render should match snapshot when useNative
 </div>
 `;
 
-exports[`Signature Request Component render should match snapshot when useNativeCurrencyAsPrimaryCurrency is true 1`] = `
+exports[`Signature Request Component render should match snapshot when we want to switch to fiat 1`] = `
 <div>
   <div
     class="signature-request"
@@ -845,6 +848,7 @@ exports[`Signature Request Component render should match snapshot when useNative
     </div>
     <div
       class="request-signature__account"
+      data-testid="request-signature-account"
     >
       <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"
@@ -919,7 +923,9 @@ exports[`Signature Request Component render should match snapshot when useNative
             </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"
-            />
+            >
+              Antonio
+            </h6>
           </div>
         </div>
         <div
@@ -933,9 +939,9 @@ exports[`Signature Request Component render should match snapshot when useNative
           <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
+            1515270.174798
              
-            ABC
+            DEF
           </h6>
         </div>
       </div>

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

@@ -21,6 +21,8 @@ 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';
 import Footer from './signature-request-footer';
 import Message from './signature-request-message';
 
@@ -64,7 +66,7 @@ export default class SignatureRequest extends PureComponent {
     rpcPrefs: PropTypes.object,
     nativeCurrency: PropTypes.string,
     currentCurrency: PropTypes.string.isRequired,
-    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool.isRequired,
+    conversionRate: PropTypes.number,
     provider: PropTypes.object,
     subjectMetadata: PropTypes.object,
     unapprovedMessagesCount: PropTypes.number,
@@ -158,9 +160,10 @@ export default class SignatureRequest extends PureComponent {
       subjectMetadata,
       nativeCurrency,
       currentCurrency,
-      useNativeCurrencyAsPrimaryCurrency,
+      conversionRate,
       unapprovedMessagesCount,
     } = this.props;
+
     const { t, trackEvent } = this.context;
     const {
       sanitizedMessage,
@@ -169,15 +172,25 @@ export default class SignatureRequest extends PureComponent {
     } = this.memoizedParseMessage(data);
     const rejectNText = t('rejectRequestsN', [unapprovedMessagesCount]);
     const currentNetwork = this.getNetworkName();
-    const tokenName = useNativeCurrencyAsPrimaryCurrency
-      ? nativeCurrency
-      : currentCurrency?.toUpperCase();
 
-    const balanceInBaseAsset = new Numeric(balance, 16, EtherDenomination.WEI)
-      .toDenomination(EtherDenomination.ETH)
-      .round(6)
-      .toBase(10)
-      .toString();
+    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();
+
     const onSign = (event) => {
       sign(event);
       trackEvent({
@@ -216,12 +229,17 @@ export default class SignatureRequest extends PureComponent {
     return (
       <div className="signature-request">
         <ConfirmPageContainerNavigation />
-        <div className="request-signature__account">
+        <div
+          className="request-signature__account"
+          data-testid="request-signature-account"
+        >
           <NetworkAccountBalanceHeader
             networkName={currentNetwork}
             accountName={name}
             accountBalance={balanceInBaseAsset}
-            tokenName={tokenName}
+            tokenName={
+              conversionRate ? currentCurrency?.toUpperCase() : nativeCurrency
+            }
             accountAddress={address}
           />
         </div>