From b231b091b9c4be16e833e291ff6c4701bd217fa8 Mon Sep 17 00:00:00 2001 From: Danica Shen Date: Wed, 8 Mar 2023 16:05:55 +0000 Subject: [PATCH] fix(17542): fix fiat currency display in few txn actions (#18011) * fix(17542): fix fiat currency display in few txn actions * fix(17542): refactor e2e tests to change to fia via fixture builder --- test/e2e/tests/encrypt-decrypt.spec.js | 87 +- .../signature-request-original.component.js | 32 +- .../signature-request-original.container.js | 9 +- .../signature-request.component.test.js.snap | 1552 +++++++++-------- .../signature-request.component.js | 42 +- .../signature-request.component.test.js | 151 +- .../signature-request.container.js | 9 +- .../signature-request.container.test.js | 296 ++-- ...irm-decrypt-message.component.test.js.snap | 531 ++++++ .../confirm-decrypt-message.component.js | 42 +- .../confirm-decrypt-message.component.test.js | 130 ++ .../confirm-decrypt-message.container.js | 9 + ...cryption-public-key.component.test.js.snap | 499 ++++++ ...confirm-encryption-public-key.component.js | 35 +- ...rm-encryption-public-key.component.test.js | 79 + ...confirm-encryption-public-key.container.js | 9 + .../confirm-encryption-public-key.stories.js | 7 + .../__snapshots__/index.test.js.snap | 1 + 18 files changed, 2467 insertions(+), 1053 deletions(-) create mode 100644 ui/pages/confirm-decrypt-message/__snapshots__/confirm-decrypt-message.component.test.js.snap create mode 100644 ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.test.js create mode 100644 ui/pages/confirm-encryption-public-key/__snapshots__/confirm-encryption-public-key.component.test.js.snap create mode 100644 ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.test.js diff --git a/test/e2e/tests/encrypt-decrypt.spec.js b/test/e2e/tests/encrypt-decrypt.spec.js index 0507bf527..d9216ccd0 100644 --- a/test/e2e/tests/encrypt-decrypt.spec.js +++ b/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'); + }, + ); + }); }); 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 99ad1d596..de68e4773 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 @@ -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,7 +284,9 @@ 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; @@ -288,11 +294,23 @@ export default class SignatureRequestOriginal extends Component { 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 (
@@ -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} />
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 3d7c9aa65..13437bb74 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 @@ -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), diff --git a/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap b/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap index df3631f5b..8a8ddd8a5 100644 --- a/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap +++ b/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`] = `
-
-
- Balance -
-
- 0 - - DEF -
-
-
-
-
-
-
-
-
-
- - T - -
-
- - test - -
-
-
-

- Signature request -

-
- Only sign this message if you fully understand the content and trust the requesting site. -
-
- -
- Verify contract details -
- -
-
-
-
-

- Mail -

-
-
- - Contents - : - - - - Hello, Bob! - -
-
- - From - : - - -
-
- - Name - : - - - - Cow - -
-
- - Wallets - : - - -
-
- - 0 - : - - - -
-
-
-
-
-
- - - - - -
-
-
-
-
- 0xCD2...D826 -
-
-
- -
-
- - 1 - : - - - -
-
-
-
-
-
- - - - - -
-
-
-
-
- 0xDea...beeF -
-
-
- -
-
-
-
-
-
- - To - : - - -
-
- - 0 - : - - -
-
- - Name - : - - - - Bob - -
-
- - Wallets - : - - -
-
- - 0 - : - - - -
-
-
-
-
-
- - - - - -
-
-
-
-
- 0xbBb...BBbB -
-
-
- -
-
- - 1 - : - - - -
-
-
-
-
-
- - - - - -
-
-
-
-
- 0xB0B...Ea57 -
-
-
- -
-
- - 2 - : - - - -
-
-
-
-
-
- - - - - -
-
-
-
-
- 0xB0B...0000 -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -`; - -exports[`Signature Request Component render should match snapshot when useNativeCurrencyAsPrimaryCurrency is true 1`] = ` -
-
- -