fix(17857): show correctly converted account balance in sign&encrypt windows (#17973)

Co-authored-by: Dan J Miller <danjm.com@gmail.com>

test/data/mock-state.json

@@ -193,7 +193,7 @@
     "selectedAddress": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
     "accounts": {
       "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
-        "balance": "0x0",
+        "balance": "0x346ba7725f412cbfdb",
         "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
       },
       "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b": {

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

@@ -30,7 +30,7 @@ describe('Encrypt Decrypt', function () {
         await driver.press('#password', driver.Key.ENTER);
         await driver.openNewPage('http://127.0.0.1:8080');
 
-        // Get Encryption key
+        // ------ Get Encryption key ------
         await driver.clickElement('#getEncryptionKeyButton');
         await driver.waitUntilXWindowHandles(3);
         let windowHandles = await driver.getAllWindowHandles();
@@ -42,6 +42,11 @@ 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();
@@ -51,7 +56,7 @@ describe('Encrypt Decrypt', function () {
         );
         assert.equal(await encryptionKeyLabel.getText(), encryptionKey);
 
-        // Encrypt
+        // ------ Encrypt ------
         await driver.fill('#encryptMessageInput', message);
         await driver.clickElement('#encryptButton');
         await driver.waitForSelector({
@@ -59,7 +64,7 @@ describe('Encrypt Decrypt', function () {
           text: '0x',
         });
 
-        // Decrypt
+        // ------ Decrypt ------
         await driver.clickElement('#decryptButton');
         await driver.waitUntilXWindowHandles(3);
         windowHandles = await driver.getAllWindowHandles();
@@ -71,7 +76,11 @@ describe('Encrypt Decrypt', function () {
           css: '.request-decrypt-message__header__text',
           text: 'Decrypt request',
         });
-
+        // Account balance is converted properly
+        const decryptAccountBalanceLabel = await driver.findElement(
+          '.request-decrypt-message__balance-value',
+        );
+        assert.equal(await decryptAccountBalanceLabel.getText(), '25 ETH');
         // Verify message in MetaMask Notification
         await driver.clickElement({ text: 'Decrypt message', tag: 'div' });
         const notificationMessage = await driver.isElementPresent({

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

@@ -167,7 +167,7 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
           <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
              
             ETH
           </h6>

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

@@ -62,7 +62,6 @@ export default class SignatureRequest extends PureComponent {
      * RPC prefs of the current network
      */
     rpcPrefs: PropTypes.object,
-    conversionRate: PropTypes.number,
     nativeCurrency: PropTypes.string,
     currentCurrency: PropTypes.string.isRequired,
     useNativeCurrencyAsPrimaryCurrency: PropTypes.bool.isRequired,
@@ -157,7 +156,6 @@ export default class SignatureRequest extends PureComponent {
       rpcPrefs,
       txData,
       subjectMetadata,
-      conversionRate,
       nativeCurrency,
       currentCurrency,
       useNativeCurrencyAsPrimaryCurrency,
@@ -177,7 +175,6 @@ export default class SignatureRequest extends PureComponent {
 
     const balanceInBaseAsset = new Numeric(balance, 16, EtherDenomination.WEI)
       .toDenomination(EtherDenomination.ETH)
-      .applyConversionRate(conversionRate)
       .round(6)
       .toBase(10)
       .toString();

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

@@ -4,7 +4,6 @@ import {
   doesAddressRequireLedgerHidConnection,
   getCurrentChainId,
   getRpcPrefsForCurrentProvider,
-  conversionRateSelector,
   getSubjectMetadata,
   unconfirmedMessagesHashSelector,
   getTotalUnapprovedMessagesCount,
@@ -47,7 +46,6 @@ function mapStateToProps(state, ownProps) {
     unconfirmedMessagesList,
     unapprovedMessagesCount,
     mostRecentOverviewPage: getMostRecentOverviewPage(state),
-    conversionRate: conversionRateSelector(state),
     nativeCurrency: getNativeCurrency(state),
     currentCurrency: getCurrentCurrency(state),
     useNativeCurrencyAsPrimaryCurrency,
@@ -85,7 +83,6 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
     hardwareWalletRequiresConnection,
     chainId,
     rpcPrefs,
-    conversionRate,
     nativeCurrency,
     currentCurrency,
     useNativeCurrencyAsPrimaryCurrency,
@@ -139,7 +136,6 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
     hardwareWalletRequiresConnection,
     chainId,
     rpcPrefs,
-    conversionRate,
     nativeCurrency,
     currentCurrency,
     useNativeCurrencyAsPrimaryCurrency,

ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js

@@ -32,7 +32,6 @@ export default class ConfirmDecryptMessage extends Component {
     cancelDecryptMessage: PropTypes.func.isRequired,
     decryptMessage: PropTypes.func.isRequired,
     decryptMessageInline: PropTypes.func.isRequired,
-    conversionRate: PropTypes.number,
     history: PropTypes.object.isRequired,
     mostRecentOverviewPage: PropTypes.string.isRequired,
     requesterAddress: PropTypes.string,
@@ -95,7 +94,7 @@ export default class ConfirmDecryptMessage extends Component {
   };
 
   renderBalance = () => {
-    const { conversionRate, nativeCurrency } = this.props;
+    const { nativeCurrency } = this.props;
     const {
       fromAccount: { balance },
     } = this.state;
@@ -106,7 +105,7 @@ export default class ConfirmDecryptMessage extends Component {
       16,
       EtherDenomination.WEI,
     )
-      .applyConversionRate(conversionRate)
+      .toDenomination(EtherDenomination.ETH)
       .round(6)
       .toBase(10);
 

ui/pages/confirm-decrypt-message/confirm-decrypt-message.container.js

@@ -12,7 +12,6 @@ import {
 import {
   getTargetAccountWithSendEtherInfo,
   unconfirmedTransactionsListSelector,
-  conversionRateSelector,
 } from '../../selectors';
 import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
@@ -39,7 +38,6 @@ function mapStateToProps(state) {
     fromAccount,
     requester: null,
     requesterAddress: null,
-    conversionRate: conversionRateSelector(state),
     mostRecentOverviewPage: getMostRecentOverviewPage(state),
     nativeCurrency: getNativeCurrency(state),
   };

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js

@@ -26,7 +26,6 @@ export default class ConfirmEncryptionPublicKey extends Component {
     clearConfirmTransaction: PropTypes.func.isRequired,
     cancelEncryptionPublicKey: PropTypes.func.isRequired,
     encryptionPublicKey: PropTypes.func.isRequired,
-    conversionRate: PropTypes.number,
     history: PropTypes.object.isRequired,
     requesterAddress: PropTypes.string,
     txData: PropTypes.object,
@@ -70,7 +69,6 @@ export default class ConfirmEncryptionPublicKey extends Component {
 
   renderBalance = () => {
     const {
-      conversionRate,
       nativeCurrency,
       fromAccount: { balance },
     } = this.props;
@@ -81,7 +79,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
       16,
       EtherDenomination.WEI,
     )
-      .applyConversionRate(conversionRate)
+      .toDenomination(EtherDenomination.ETH)
       .round(6)
       .toBase(10);
 

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.container.js

@@ -9,7 +9,6 @@ import {
 } from '../../store/actions';
 
 import {
-  conversionRateSelector,
   unconfirmedTransactionsListSelector,
   getTargetAccountWithSendEtherInfo,
 } from '../../selectors';
@@ -39,7 +38,6 @@ function mapStateToProps(state) {
     fromAccount,
     requester: null,
     requesterAddress: null,
-    conversionRate: conversionRateSelector(state),
     mostRecentOverviewPage: getMostRecentOverviewPage(state),
     nativeCurrency: getNativeCurrency(state),
   };

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js

@@ -28,11 +28,6 @@ export default {
     encryptionPublicKey: {
       action: 'encryptionPublicKey',
     },
-    conversionRate: {
-      control: {
-        type: 'number',
-      },
-    },
     history: {
       control: {
         type: 'object',
@@ -66,7 +61,6 @@ export default {
   },
   args: {
     fromAccount: metamask.accountArray[0],
-    conversionRate: metamask.conversionRate,
     history: {
       push: action('history.push()'),
     },

ui/selectors/selectors.test.js

@@ -63,7 +63,7 @@ describe('Selectors', () => {
 
   it('returns selected account', () => {
     const account = selectors.getSelectedAccount(mockState);
-    expect(account.balance).toStrictEqual('0x0');
+    expect(account.balance).toStrictEqual('0x346ba7725f412cbfdb');
     expect(account.address).toStrictEqual(
       '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
     );
@@ -138,7 +138,9 @@ describe('Selectors', () => {
     const accountsWithSendEther =
       selectors.accountsWithSendEtherInfoSelector(mockState);
     expect(accountsWithSendEther).toHaveLength(4);
-    expect(accountsWithSendEther[0].balance).toStrictEqual('0x0');
+    expect(accountsWithSendEther[0].balance).toStrictEqual(
+      '0x346ba7725f412cbfdb',
+    );
     expect(accountsWithSendEther[0].address).toStrictEqual(
       '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
     );
@@ -148,7 +150,9 @@ describe('Selectors', () => {
   it('returns selected account with balance, address, and name from accountsWithSendEtherInfoSelector', () => {
     const currentAccountwithSendEther =
       selectors.getCurrentAccountWithSendEtherInfo(mockState);
-    expect(currentAccountwithSendEther.balance).toStrictEqual('0x0');
+    expect(currentAccountwithSendEther.balance).toStrictEqual(
+      '0x346ba7725f412cbfdb',
+    );
     expect(currentAccountwithSendEther.address).toStrictEqual(
       '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
     );