From c462fb89958593cff2f2748ebbcab12774aa8e43 Mon Sep 17 00:00:00 2001
From: Prithpal Sooriya
Date: Tue, 17 Sep 2024 20:17:38 +0100
Subject: [PATCH 01/61] feat: upgrade notification controllers (#27224)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## **Description**
Bumps:
- `@metamask/profile-sync-controller` from `^0.7.0` to `^0.8.0`
- `@metamask/notification-services-controller` from `^0.6.0` to `^0.7.0`
This fixes a critical issue where we were not using the same UserStorage
hashed entry. See release library changelog
https://github.com/MetaMask/core/blob/main/packages/profile-sync-controller/CHANGELOG.md#fixed
[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27224?quickstart=1)
## **Related issues**
Fixes: https://consensyssoftware.atlassian.net/browse/NOTIFY-1118
## **Manual testing steps**
Test notifications flow:
- Enable/Disable Notifications
## **Screenshots/Recordings**
### **Before**
### **After**
## **Pre-merge author checklist**
- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
package.json | 4 ++--
yarn.lock | 54 ++++++++++++++++++++++++++--------------------------
2 files changed, 29 insertions(+), 29 deletions(-)
diff --git a/package.json b/package.json
index b3b5b22f7e86..70195f5ae650 100644
--- a/package.json
+++ b/package.json
@@ -336,7 +336,7 @@
"@metamask/name-controller": "^8.0.0",
"@metamask/network-controller": "patch:@metamask/network-controller@npm%3A20.2.0#~/.yarn/patches/@metamask-network-controller-npm-20.2.0-98b1a5ae59.patch",
"@metamask/notification-controller": "^6.0.0",
- "@metamask/notification-services-controller": "^0.5.0",
+ "@metamask/notification-services-controller": "^0.7.0",
"@metamask/object-multiplex": "^2.0.0",
"@metamask/obs-store": "^9.0.0",
"@metamask/permission-controller": "^10.0.0",
@@ -344,7 +344,7 @@
"@metamask/phishing-controller": "^12.0.1",
"@metamask/post-message-stream": "^8.0.0",
"@metamask/ppom-validator": "0.34.0",
- "@metamask/profile-sync-controller": "^0.5.0",
+ "@metamask/profile-sync-controller": "^0.8.0",
"@metamask/providers": "^14.0.2",
"@metamask/queued-request-controller": "^2.0.0",
"@metamask/rate-limit-controller": "^6.0.0",
diff --git a/yarn.lock b/yarn.lock
index e6bf174ada48..2149a6bd2404 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5784,21 +5784,21 @@ __metadata:
languageName: node
linkType: hard
-"@metamask/notification-services-controller@npm:^0.5.0":
- version: 0.5.0
- resolution: "@metamask/notification-services-controller@npm:0.5.0"
+"@metamask/notification-services-controller@npm:^0.7.0":
+ version: 0.7.0
+ resolution: "@metamask/notification-services-controller@npm:0.7.0"
dependencies:
"@contentful/rich-text-html-renderer": "npm:^16.5.2"
- "@metamask/base-controller": "npm:^7.0.0"
- "@metamask/controller-utils": "npm:^11.2.0"
+ "@metamask/base-controller": "npm:^7.0.1"
+ "@metamask/controller-utils": "npm:^11.3.0"
bignumber.js: "npm:^4.1.0"
firebase: "npm:^10.11.0"
loglevel: "npm:^1.8.1"
uuid: "npm:^8.3.2"
peerDependencies:
"@metamask/keyring-controller": ^17.0.0
- "@metamask/profile-sync-controller": ^0.5.0
- checksum: 10/e945cbf0b7138d22f1078844575dc89c990ddc6669724d1ce0db5ad43c74a86da1c5e1ab12614afbcc5c49125b09365689de2a2c9548af426932f4c1397a66bd
+ "@metamask/profile-sync-controller": ^0.0.0
+ checksum: 10/1fc72086686aeef4c72d9eb7726d086a147a4079c178a6de23269fa39a3d861c54fe6dfe79bd9b5c8bf9afa278371408092bd37f3e8f814e65c7aca3573655f5
languageName: node
linkType: hard
@@ -6010,13 +6010,13 @@ __metadata:
languageName: node
linkType: hard
-"@metamask/profile-sync-controller@npm:^0.5.0":
- version: 0.5.0
- resolution: "@metamask/profile-sync-controller@npm:0.5.0"
+"@metamask/profile-sync-controller@npm:^0.8.0":
+ version: 0.8.0
+ resolution: "@metamask/profile-sync-controller@npm:0.8.0"
dependencies:
- "@metamask/base-controller": "npm:^7.0.0"
- "@metamask/snaps-sdk": "npm:^6.1.1"
- "@metamask/snaps-utils": "npm:^7.8.1"
+ "@metamask/base-controller": "npm:^7.0.1"
+ "@metamask/snaps-sdk": "npm:^6.5.0"
+ "@metamask/snaps-utils": "npm:^8.1.1"
"@noble/ciphers": "npm:^0.5.2"
"@noble/hashes": "npm:^1.4.0"
immer: "npm:^9.0.6"
@@ -6025,8 +6025,8 @@ __metadata:
peerDependencies:
"@metamask/accounts-controller": ^18.1.1
"@metamask/keyring-controller": ^17.2.0
- "@metamask/snaps-controllers": ^9.3.0
- checksum: 10/96a31ca2692af85100bd690aa290d6c954378aa14be0dd507afda46c37d761c5e398da4e93ed0f6f7f97267a82def7f4b12b45805cd7673381a6404f810511ff
+ "@metamask/snaps-controllers": ^9.7.0
+ checksum: 10/613e2e87615f1db4a1a4559895a74c2b89c15720e831440eec0916aa96305f3db9b3e0926ac4a5d7532c462baaa18a117e2b9aa107949777163488c203cfea05
languageName: node
linkType: hard
@@ -6389,9 +6389,9 @@ __metadata:
languageName: node
linkType: hard
-"@metamask/snaps-utils@npm:^8.0.0, @metamask/snaps-utils@npm:^8.0.1":
- version: 8.0.1
- resolution: "@metamask/snaps-utils@npm:8.0.1"
+"@metamask/snaps-utils@npm:^8.0.0, @metamask/snaps-utils@npm:^8.0.1, @metamask/snaps-utils@npm:^8.1.1":
+ version: 8.1.1
+ resolution: "@metamask/snaps-utils@npm:8.1.1"
dependencies:
"@babel/core": "npm:^7.23.2"
"@babel/types": "npm:^7.23.0"
@@ -6401,9 +6401,9 @@ __metadata:
"@metamask/rpc-errors": "npm:^6.3.1"
"@metamask/slip44": "npm:^4.0.0"
"@metamask/snaps-registry": "npm:^3.2.1"
- "@metamask/snaps-sdk": "npm:^6.2.1"
+ "@metamask/snaps-sdk": "npm:^6.5.0"
"@metamask/superstruct": "npm:^3.1.0"
- "@metamask/utils": "npm:^9.1.0"
+ "@metamask/utils": "npm:^9.2.1"
"@noble/hashes": "npm:^1.3.1"
"@scure/base": "npm:^1.1.1"
chalk: "npm:^4.1.2"
@@ -6416,7 +6416,7 @@ __metadata:
semver: "npm:^7.5.4"
ses: "npm:^1.1.0"
validate-npm-package-name: "npm:^5.0.0"
- checksum: 10/4c0d58ad04f1e4c625dd01aaf171de0f538afc2003ac928159deee5ebed6d490ccd50575ad585b4f6846aa8d00bccd8f1ea4b32f124e6427873fb985cae8513f
+ checksum: 10/f4ceb52a1f9578993c88c82a67f4f041309af51c83ff5caa3fed080f36b54d14ea7da807ce1cf19a13600dd0e77c51af70398e8c7bb78f0ba99a037f4d22610f
languageName: node
linkType: hard
@@ -6581,9 +6581,9 @@ __metadata:
languageName: node
linkType: hard
-"@metamask/utils@npm:^9.0.0, @metamask/utils@npm:^9.1.0":
- version: 9.1.0
- resolution: "@metamask/utils@npm:9.1.0"
+"@metamask/utils@npm:^9.0.0, @metamask/utils@npm:^9.1.0, @metamask/utils@npm:^9.2.1":
+ version: 9.2.1
+ resolution: "@metamask/utils@npm:9.2.1"
dependencies:
"@ethereumjs/tx": "npm:^4.2.0"
"@metamask/superstruct": "npm:^3.1.0"
@@ -6594,7 +6594,7 @@ __metadata:
pony-cause: "npm:^2.1.10"
semver: "npm:^7.5.4"
uuid: "npm:^9.0.1"
- checksum: 10/7335e151a51be92e86868dc48b3ee78c376d4edd5d758d334176027247637ab22839d8f663bd02542c0a19b05ecec456bedab5f36436689cf3d953ca36d91781
+ checksum: 10/2192797afd91af19898e107afeaf63e89b61dc7285e0a75d0cc814b5b288e4cdfc856781b01904034c4d2c1efd9bdab512af24c7e4dfe7b77a03f1f3d9dec7e8
languageName: node
linkType: hard
@@ -26036,7 +26036,7 @@ __metadata:
"@metamask/name-controller": "npm:^8.0.0"
"@metamask/network-controller": "patch:@metamask/network-controller@npm%3A20.2.0#~/.yarn/patches/@metamask-network-controller-npm-20.2.0-98b1a5ae59.patch"
"@metamask/notification-controller": "npm:^6.0.0"
- "@metamask/notification-services-controller": "npm:^0.5.0"
+ "@metamask/notification-services-controller": "npm:^0.7.0"
"@metamask/object-multiplex": "npm:^2.0.0"
"@metamask/obs-store": "npm:^9.0.0"
"@metamask/permission-controller": "npm:^10.0.0"
@@ -26045,7 +26045,7 @@ __metadata:
"@metamask/phishing-warning": "npm:^4.0.0"
"@metamask/post-message-stream": "npm:^8.0.0"
"@metamask/ppom-validator": "npm:0.34.0"
- "@metamask/profile-sync-controller": "npm:^0.5.0"
+ "@metamask/profile-sync-controller": "npm:^0.8.0"
"@metamask/providers": "npm:^14.0.2"
"@metamask/queued-request-controller": "npm:^2.0.0"
"@metamask/rate-limit-controller": "npm:^6.0.0"
From bc7929b1c96f09e5ae3c3b76d4ef2c649b0dd78a Mon Sep 17 00:00:00 2001
From: Nick Gambino <35090461+gambinish@users.noreply.github.com>
Date: Tue, 17 Sep 2024 15:09:17 -0700
Subject: [PATCH 02/61] chore: Add currency conversion telemetry (#26876)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## **Description**
In order to figure out which currencies we should support 24hr % change,
we need to know which currencies are the most popular.
Adds currency change dropdown event to telemetry events.
[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26876?quickstart=1)
## **Related issues**
Fixes: https://consensyssoftware.atlassian.net/browse/MMASSETS-344
## **Screenshots/Recordings**
## **Pre-merge author checklist**
- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
app/scripts/controllers/metametrics.js | 1 +
shared/constants/metametrics.ts | 5 +++++
.../settings/settings-tab/settings-tab.component.js | 11 ++++++++++-
3 files changed, 16 insertions(+), 1 deletion(-)
diff --git a/app/scripts/controllers/metametrics.js b/app/scripts/controllers/metametrics.js
index d815607d27e8..d799249bb71b 100644
--- a/app/scripts/controllers/metametrics.js
+++ b/app/scripts/controllers/metametrics.js
@@ -837,6 +837,7 @@ export default class MetaMetricsController {
metamaskState.useTokenDetection,
[MetaMetricsUserTrait.UseNativeCurrencyAsPrimaryCurrency]:
metamaskState.useNativeCurrencyAsPrimaryCurrency,
+ [MetaMetricsUserTrait.CurrentCurrency]: metamaskState.currentCurrency,
///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
[MetaMetricsUserTrait.MmiExtensionId]: this.extension?.runtime?.id,
[MetaMetricsUserTrait.MmiAccountAddress]: mmiAccountAddress,
diff --git a/shared/constants/metametrics.ts b/shared/constants/metametrics.ts
index daec305bfb11..0ad1bc9e1deb 100644
--- a/shared/constants/metametrics.ts
+++ b/shared/constants/metametrics.ts
@@ -468,6 +468,10 @@ export enum MetaMetricsUserTrait {
MmiIsCustodian = 'mmi_is_custodian',
///: END:ONLY_INCLUDE_IF
PetnameAddressCount = 'petname_addresses_count',
+ /**
+ * Identified when the user selects a currency from settings
+ */
+ CurrentCurrency = 'current_currency',
}
/**
@@ -514,6 +518,7 @@ export enum MetaMetricsEventName {
BridgeLinkClicked = 'Bridge Link Clicked',
BitcoinSupportToggled = 'Bitcoin Support Toggled',
BitcoinTestnetSupportToggled = 'Bitcoin Testnet Support Toggled',
+ CurrentCurrency = 'Current Currency',
DappViewed = 'Dapp Viewed',
DecryptionApproved = 'Decryption Approved',
DecryptionRejected = 'Decryption Rejected',
diff --git a/ui/pages/settings/settings-tab/settings-tab.component.js b/ui/pages/settings/settings-tab/settings-tab.component.js
index 45407ece008d..d798b62f77ba 100644
--- a/ui/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/pages/settings/settings-tab/settings-tab.component.js
@@ -119,7 +119,16 @@ export default class SettingsTab extends PureComponent {
id="select-currency"
options={currencyOptions}
selectedOption={currentCurrency}
- onChange={(newCurrency) => setCurrentCurrency(newCurrency)}
+ onChange={(newCurrency) => {
+ setCurrentCurrency(newCurrency);
+ this.context.trackEvent({
+ category: MetaMetricsEventCategory.Settings,
+ event: MetaMetricsEventName.CurrentCurrency,
+ properties: {
+ current_currency: newCurrency,
+ },
+ });
+ }}
/>
From eadc7075731ad95662b9a4f07b0cddd0328d9695 Mon Sep 17 00:00:00 2001
From: Matteo Scurati
Date: Wed, 18 Sep 2024 08:37:17 +0200
Subject: [PATCH 03/61] fix: :pencil2: fix event property typo (#27228)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## **Description**
This PR fixes a typo for a property used by the event emitted by the
toggle to turn basic functionality on or off.
[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27228?quickstart=1)
## **Related issues**
N/A
## **Manual testing steps**
N/A
## **Screenshots/Recordings**
N/A
### **Before**
N/A
### **After**
N/A
## **Pre-merge author checklist**
- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
.../basic-configuration-modal/basic-configuration-modal.tsx | 2 +-
ui/pages/onboarding-flow/privacy-settings/privacy-settings.js | 3 ++-
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/ui/components/app/basic-configuration-modal/basic-configuration-modal.tsx b/ui/components/app/basic-configuration-modal/basic-configuration-modal.tsx
index d9699c9ebc8a..a6b083eccc16 100644
--- a/ui/components/app/basic-configuration-modal/basic-configuration-modal.tsx
+++ b/ui/components/app/basic-configuration-modal/basic-configuration-modal.tsx
@@ -150,7 +150,7 @@ export function BasicConfigurationModal() {
category: MetaMetricsEventCategory.Onboarding,
event: MetaMetricsEventName.SettingsUpdated,
properties: {
- settings_group: 'advanced',
+ settings_group: 'onboarding_advanced_configuration',
settings_type: 'basic_functionality',
old_value: true,
new_value: false,
diff --git a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js
index 3012fe9808f2..9f1bb0dcf8c3 100644
--- a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js
+++ b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js
@@ -277,10 +277,11 @@ export default function PrivacySettings() {
category: MetaMetricsEventCategory.Onboarding,
event: MetaMetricsEventName.SettingsUpdated,
properties: {
- settings_group: 'advanced',
+ settings_group: 'onboarding_advanced_configuration',
settings_type: 'basic_functionality',
old_value: false,
new_value: true,
+ was_profile_syncing_on: false,
},
});
}
From 8d3e6ad21258bd98fe72fe0b78972352f7b1cc41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Tavares?=
Date: Wed, 18 Sep 2024 10:48:43 +0100
Subject: [PATCH 04/61] fix: UI transaction integration tests (#27130)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## **Description**
* Fixes warnings to redesigned transactions existing UI integration
tests.
* Adds new UI integration tests to erc20 approve confirmation.
** Some of those tests required interaction with tooltips, so added a
way to automatically include a tooltip data-testid whenever the Confirm
row has a data-testid set (in case there is a tooltip obviously).
[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27130?quickstart=1)
## **Related issues**
Fixes: None
## **Screenshots/Recordings**
No visual changes. This is PR mainly adds/updates tests.
## **Pre-merge author checklist**
- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
shared/lib/four-byte.ts | 1 -
.../confirmations/signatures/permit.test.tsx | 4 +-
.../signatures/personalSign.test.tsx | 4 +-
.../transactions/alerts.test.tsx | 148 +++++----
.../contract-interaction.test.tsx | 125 +++++---
.../transactions/erc20-approve.test.tsx | 300 +++++++++++++++---
.../transactions/erc721-approve.test.tsx | 63 ++--
.../transactions/transactionDataHelpers.tsx | 2 +-
.../data/integration-init-state.json | 94 +++---
test/integration/helpers.tsx | 4 +-
ui/components/app/confirm/info/row/row.tsx | 3 +
.../__snapshots__/approve.test.tsx.snap | 12 +
.../approve-details.test.tsx.snap | 1 +
.../approve-details/approve-details.tsx | 8 +-
.../__snapshots__/spending-cap.test.tsx.snap | 3 +
.../approve/spending-cap/spending-cap.tsx | 3 +-
.../base-transaction-info.test.tsx.snap | 9 +
.../edit-gas-fees-row.test.tsx.snap | 1 +
.../gas-fees-details.test.tsx.snap | 1 +
.../gas-fees-section.test.tsx.snap | 1 +
.../transaction-data.test.tsx.snap | 38 +++
.../transaction-details.test.tsx.snap | 2 +
22 files changed, 596 insertions(+), 231 deletions(-)
diff --git a/shared/lib/four-byte.ts b/shared/lib/four-byte.ts
index 167dfc563b73..c8d67af7b1f4 100644
--- a/shared/lib/four-byte.ts
+++ b/shared/lib/four-byte.ts
@@ -57,7 +57,6 @@ export async function getMethodDataAsync(
console.error(e);
return null;
});
- console.log('fourByteSig = ', fourByteSig);
}
if (!registry) {
diff --git a/test/integration/confirmations/signatures/permit.test.tsx b/test/integration/confirmations/signatures/permit.test.tsx
index 3670b654502d..809ac988962f 100644
--- a/test/integration/confirmations/signatures/permit.test.tsx
+++ b/test/integration/confirmations/signatures/permit.test.tsx
@@ -105,7 +105,7 @@ describe('Permit Confirmation', () => {
accountName,
);
expect(screen.getByTestId('header-network-display-name')).toHaveTextContent(
- 'Chain 5',
+ 'Sepolia',
);
fireEvent.click(screen.getByTestId('header-info__account-details-button'));
@@ -120,7 +120,7 @@ describe('Permit Confirmation', () => {
);
expect(
screen.getByTestId('confirmation-account-details-modal__account-balance'),
- ).toHaveTextContent('1.58271596ETH');
+ ).toHaveTextContent('1.582717SepoliaETH');
let confirmAccountDetailsModalMetricsEvent;
diff --git a/test/integration/confirmations/signatures/personalSign.test.tsx b/test/integration/confirmations/signatures/personalSign.test.tsx
index 528655924dbe..9737a3e30ad9 100644
--- a/test/integration/confirmations/signatures/personalSign.test.tsx
+++ b/test/integration/confirmations/signatures/personalSign.test.tsx
@@ -87,7 +87,7 @@ describe('PersonalSign Confirmation', () => {
expect(getByTestId('header-account-name')).toHaveTextContent(accountName);
expect(getByTestId('header-network-display-name')).toHaveTextContent(
- 'Chain 5',
+ 'Sepolia',
);
fireEvent.click(getByTestId('header-info__account-details-button'));
@@ -106,7 +106,7 @@ describe('PersonalSign Confirmation', () => {
);
expect(
getByTestId('confirmation-account-details-modal__account-balance'),
- ).toHaveTextContent('1.58271596ETH');
+ ).toHaveTextContent('1.582717SepoliaETH');
let confirmAccountDetailsModalMetricsEvent;
diff --git a/test/integration/confirmations/transactions/alerts.test.tsx b/test/integration/confirmations/transactions/alerts.test.tsx
index 1e07ddcdd68d..74d37c858b0f 100644
--- a/test/integration/confirmations/transactions/alerts.test.tsx
+++ b/test/integration/confirmations/transactions/alerts.test.tsx
@@ -6,6 +6,7 @@ import mockMetaMaskState from '../../data/integration-init-state.json';
import { integrationTestRender } from '../../../lib/render-helpers';
import * as backgroundConnection from '../../../../ui/store/background-connection';
import { createMockImplementation, mock4byte } from '../../helpers';
+import { createTestProviderTools } from '../../../stub/provider';
import { getUnapprovedApproveTransaction } from './transactionDataHelpers';
jest.mock('../../../../ui/store/background-connection', () => ({
@@ -75,7 +76,17 @@ const setupSubmitRequestToBackgroundMocks = (
);
};
-describe('Contract Interaction Confirmation', () => {
+describe('Contract Interaction Confirmation Alerts', () => {
+ beforeAll(() => {
+ const { provider } = createTestProviderTools({
+ networkId: 'sepolia',
+ chainId: '0xaa36a7',
+ });
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ global.ethereumProvider = provider as any;
+ });
+
beforeEach(() => {
jest.resetAllMocks();
setupSubmitRequestToBackgroundMocks();
@@ -87,6 +98,11 @@ describe('Contract Interaction Confirmation', () => {
nock.cleanAll();
});
+ afterAll(() => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ delete (global as any).ethereumProvider;
+ });
+
it('displays the alert when network is busy', async () => {
const account =
mockMetaMaskState.internalAccounts.accounts[
@@ -97,12 +113,12 @@ describe('Contract Interaction Confirmation', () => {
const mockedMetaMaskState =
getMetaMaskStateWithUnapprovedApproveTransaction(account.address);
- const { findByTestId, getByTestId, queryByTestId } =
+ await act(async () => {
await integrationTestRender({
preloadedState: {
...mockedMetaMaskState,
gasFeeEstimatesByChainId: {
- '0x5': {
+ '0xaa36a7': {
gasFeeEstimates: {
networkCongestion: 1.0005,
},
@@ -111,29 +127,28 @@ describe('Contract Interaction Confirmation', () => {
},
backgroundConnection: backgroundConnectionMocked,
});
-
- act(() => {
- fireEvent.click(getByTestId('inline-alert'));
});
- expect(await findByTestId('alert-modal')).toBeInTheDocument();
+ fireEvent.click(screen.getByTestId('inline-alert'));
+
+ expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();
expect(
- await findByTestId('alert-modal__selected-alert'),
+ await screen.findByTestId('alert-modal__selected-alert'),
).toBeInTheDocument();
- expect(await findByTestId('alert-modal__selected-alert')).toHaveTextContent(
- 'Gas prices are high and estimates are less accurate.',
- );
+ expect(
+ await screen.findByTestId('alert-modal__selected-alert'),
+ ).toHaveTextContent('Gas prices are high and estimates are less accurate.');
- expect(await findByTestId('alert-modal-button')).toBeInTheDocument();
- const alertModalConfirmButton = await findByTestId('alert-modal-button');
+ expect(await screen.findByTestId('alert-modal-button')).toBeInTheDocument();
+ const alertModalConfirmButton = await screen.findByTestId(
+ 'alert-modal-button',
+ );
- act(() => {
- fireEvent.click(alertModalConfirmButton);
- });
+ fireEvent.click(alertModalConfirmButton);
- expect(queryByTestId('alert-modal')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('alert-modal')).not.toBeInTheDocument();
});
it('displays the alert when gas estimate fails', async () => {
@@ -157,7 +172,7 @@ describe('Contract Interaction Confirmation', () => {
},
};
- const { findByTestId, getByTestId, queryByTestId } =
+ await act(async () => {
await integrationTestRender({
preloadedState: {
...mockedMetaMaskState,
@@ -165,29 +180,30 @@ describe('Contract Interaction Confirmation', () => {
},
backgroundConnection: backgroundConnectionMocked,
});
-
- act(() => {
- fireEvent.click(getByTestId('inline-alert'));
});
- expect(await findByTestId('alert-modal')).toBeInTheDocument();
+ fireEvent.click(screen.getByTestId('inline-alert'));
+
+ expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();
expect(
- await findByTestId('alert-modal__selected-alert'),
+ await screen.findByTestId('alert-modal__selected-alert'),
).toBeInTheDocument();
- expect(await findByTestId('alert-modal__selected-alert')).toHaveTextContent(
+ expect(
+ await screen.findByTestId('alert-modal__selected-alert'),
+ ).toHaveTextContent(
'We’re unable to provide an accurate fee and this estimate might be high. We suggest you to input a custom gas limit, but there’s a risk the transaction will still fail.',
);
- expect(await findByTestId('alert-modal-button')).toBeInTheDocument();
- const alertModalConfirmButton = await findByTestId('alert-modal-button');
+ expect(await screen.findByTestId('alert-modal-button')).toBeInTheDocument();
+ const alertModalConfirmButton = await screen.findByTestId(
+ 'alert-modal-button',
+ );
- act(() => {
- fireEvent.click(alertModalConfirmButton);
- });
+ fireEvent.click(alertModalConfirmButton);
- expect(queryByTestId('alert-modal')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('alert-modal')).not.toBeInTheDocument();
});
it('displays the alert for insufficient gas', async () => {
@@ -202,33 +218,35 @@ describe('Contract Interaction Confirmation', () => {
const transaction = mockedMetaMaskState.transactions[0];
transaction.txParams.gas = '0x0';
- const { findByTestId, getByTestId } = await integrationTestRender({
- preloadedState: {
- ...mockedMetaMaskState,
- transactions: [transaction],
- },
- backgroundConnection: backgroundConnectionMocked,
+ await act(async () => {
+ await integrationTestRender({
+ preloadedState: {
+ ...mockedMetaMaskState,
+ transactions: [transaction],
+ },
+ backgroundConnection: backgroundConnectionMocked,
+ });
});
- act(() => {
- fireEvent.click(getByTestId('inline-alert'));
- });
+ fireEvent.click(screen.getByTestId('inline-alert'));
- expect(await findByTestId('alert-modal')).toBeInTheDocument();
+ expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();
expect(
- await findByTestId('alert-modal__selected-alert'),
+ await screen.findByTestId('alert-modal__selected-alert'),
).toBeInTheDocument();
- expect(await findByTestId('alert-modal__selected-alert')).toHaveTextContent(
+ expect(
+ await screen.findByTestId('alert-modal__selected-alert'),
+ ).toHaveTextContent(
'To continue with this transaction, you’ll need to increase the gas limit to 21000 or higher.',
);
expect(
- await findByTestId('alert-modal-action-showAdvancedGasModal'),
+ await screen.findByTestId('alert-modal-action-showAdvancedGasModal'),
).toBeInTheDocument();
expect(
- await findByTestId('alert-modal-action-showAdvancedGasModal'),
+ await screen.findByTestId('alert-modal-action-showAdvancedGasModal'),
).toHaveTextContent('Update gas limit');
});
@@ -245,34 +263,36 @@ describe('Contract Interaction Confirmation', () => {
const transaction = mockedMetaMaskState.transactions[0];
transaction.gasFeeEstimates.type = 'none';
- const { findByTestId, getByTestId } = await integrationTestRender({
- preloadedState: {
- ...mockedMetaMaskState,
- gasEstimateType: 'none',
- transactions: [transaction],
- },
- backgroundConnection: backgroundConnectionMocked,
+ await act(async () => {
+ await integrationTestRender({
+ preloadedState: {
+ ...mockedMetaMaskState,
+ gasEstimateType: 'none',
+ transactions: [transaction],
+ },
+ backgroundConnection: backgroundConnectionMocked,
+ });
});
- act(() => {
- fireEvent.click(getByTestId('inline-alert'));
- });
+ fireEvent.click(screen.getByTestId('inline-alert'));
- expect(await findByTestId('alert-modal')).toBeInTheDocument();
+ expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();
expect(
- await findByTestId('alert-modal__selected-alert'),
+ await screen.findByTestId('alert-modal__selected-alert'),
).toBeInTheDocument();
- expect(await findByTestId('alert-modal__selected-alert')).toHaveTextContent(
+ expect(
+ await screen.findByTestId('alert-modal__selected-alert'),
+ ).toHaveTextContent(
'We can’t move forward with this transaction until you manually update the fee.',
);
expect(
- await findByTestId('alert-modal-action-showAdvancedGasModal'),
+ await screen.findByTestId('alert-modal-action-showAdvancedGasModal'),
).toBeInTheDocument();
expect(
- await findByTestId('alert-modal-action-showAdvancedGasModal'),
+ await screen.findByTestId('alert-modal-action-showAdvancedGasModal'),
).toHaveTextContent('Update fee');
});
@@ -331,9 +351,7 @@ describe('Contract Interaction Confirmation', () => {
expect(await screen.getByTestId('inline-alert')).toBeInTheDocument();
- act(() => {
- fireEvent.click(screen.getByTestId('inline-alert'));
- });
+ fireEvent.click(screen.getByTestId('inline-alert'));
expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();
@@ -348,7 +366,7 @@ describe('Contract Interaction Confirmation', () => {
);
});
- it('displays the alert for gas fees too', async () => {
+ it('displays the alert for gas fees too low', async () => {
const account =
mockMetaMaskState.internalAccounts.accounts[
mockMetaMaskState.internalAccounts
@@ -372,9 +390,7 @@ describe('Contract Interaction Confirmation', () => {
});
});
- act(() => {
- fireEvent.click(screen.getByTestId('inline-alert'));
- });
+ fireEvent.click(screen.getByTestId('inline-alert'));
expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();
diff --git a/test/integration/confirmations/transactions/contract-interaction.test.tsx b/test/integration/confirmations/transactions/contract-interaction.test.tsx
index 7d07dc31e7db..cea1ed6f54bc 100644
--- a/test/integration/confirmations/transactions/contract-interaction.test.tsx
+++ b/test/integration/confirmations/transactions/contract-interaction.test.tsx
@@ -1,4 +1,10 @@
-import { fireEvent, waitFor, within } from '@testing-library/react';
+import {
+ fireEvent,
+ waitFor,
+ within,
+ screen,
+ act,
+} from '@testing-library/react';
import { ApprovalType } from '@metamask/controller-utils';
import nock from 'nock';
import { TransactionType } from '@metamask/transaction-controller';
@@ -46,12 +52,12 @@ const getMetaMaskStateWithUnapprovedContractInteraction = ({
},
nextNonce: '8',
currencyRates: {
- ETH: {
+ SepoliaETH: {
conversionDate: 1721392020.645,
conversionRate: 3404.13,
usdConversionRate: 3404.13,
},
- SepoliaETH: {
+ ETH: {
conversionDate: 1721393858.083,
conversionRate: 3414.67,
usdConversionRate: 3414.67,
@@ -166,36 +172,44 @@ describe('Contract Interaction Confirmation', () => {
accountAddress: account.address,
});
- const { getByTestId, queryByTestId, findByTestId } =
+ await act(async () => {
await integrationTestRender({
preloadedState: mockedMetaMaskState,
backgroundConnection: backgroundConnectionMocked,
});
+ });
- expect(getByTestId('header-account-name')).toHaveTextContent(accountName);
- expect(getByTestId('header-network-display-name')).toHaveTextContent(
- 'Chain 5',
+ expect(screen.getByTestId('header-account-name')).toHaveTextContent(
+ accountName,
+ );
+ expect(screen.getByTestId('header-network-display-name')).toHaveTextContent(
+ 'Sepolia',
);
- fireEvent.click(getByTestId('header-info__account-details-button'));
+ fireEvent.click(screen.getByTestId('header-info__account-details-button'));
expect(
- await findByTestId('confirmation-account-details-modal__account-name'),
+ await screen.findByTestId(
+ 'confirmation-account-details-modal__account-name',
+ ),
).toHaveTextContent(accountName);
- expect(getByTestId('address-copy-button-text')).toHaveTextContent(
+ expect(screen.getByTestId('address-copy-button-text')).toHaveTextContent(
'0x0DCD5...3E7bc',
);
expect(
- getByTestId('confirmation-account-details-modal__account-balance'),
- ).toHaveTextContent('1.5827157ETH');
+ screen.getByTestId('confirmation-account-details-modal__account-balance'),
+ ).toHaveTextContent('1.582717SepoliaETH');
let confirmAccountDetailsModalMetricsEvent;
await waitFor(() => {
confirmAccountDetailsModalMetricsEvent =
mockedBackgroundConnection.submitRequestToBackground.mock.calls?.find(
- (call) => call[0] === 'trackMetaMetricsEvent',
+ (call) =>
+ call[0] === 'trackMetaMetricsEvent' &&
+ call[1]?.[0].category === MetaMetricsEventCategory.Confirmations,
);
+
expect(confirmAccountDetailsModalMetricsEvent?.[0]).toBe(
'trackMetaMetricsEvent',
);
@@ -216,12 +230,14 @@ describe('Contract Interaction Confirmation', () => {
);
fireEvent.click(
- getByTestId('confirmation-account-details-modal__close-button'),
+ screen.getByTestId('confirmation-account-details-modal__close-button'),
);
await waitFor(() => {
expect(
- queryByTestId('confirmation-account-details-modal__account-name'),
+ screen.queryByTestId(
+ 'confirmation-account-details-modal__account-name',
+ ),
).not.toBeInTheDocument();
});
});
@@ -238,35 +254,38 @@ describe('Contract Interaction Confirmation', () => {
accountAddress: account.address,
});
- const { getByTestId, getByText, findByTestId } =
+ await act(async () => {
await integrationTestRender({
preloadedState: mockedMetaMaskState,
backgroundConnection: backgroundConnectionMocked,
});
+ });
- expect(getByText('Transaction request')).toBeInTheDocument();
+ expect(screen.getByText('Transaction request')).toBeInTheDocument();
- const simulationSection = getByTestId('simulation-details-layout');
+ const simulationSection = screen.getByTestId('simulation-details-layout');
expect(simulationSection).toBeInTheDocument();
expect(simulationSection).toHaveTextContent('Estimated changes');
- const simulationDetailsRow = await findByTestId('simulation-rows-incoming');
+ const simulationDetailsRow = await screen.findByTestId(
+ 'simulation-rows-incoming',
+ );
expect(simulationSection).toContainElement(simulationDetailsRow);
expect(simulationDetailsRow).toHaveTextContent('You receive');
expect(simulationDetailsRow).toContainElement(
- getByTestId('simulation-details-asset-pill'),
+ screen.getByTestId('simulation-details-asset-pill'),
);
expect(simulationDetailsRow).toContainElement(
- getByTestId('simulation-details-amount-pill'),
+ screen.getByTestId('simulation-details-amount-pill'),
);
- const transactionDetailsSection = getByTestId(
+ const transactionDetailsSection = screen.getByTestId(
'transaction-details-section',
);
expect(transactionDetailsSection).toBeInTheDocument();
expect(transactionDetailsSection).toHaveTextContent('Request from');
expect(transactionDetailsSection).toHaveTextContent('Interacting with');
- const gasFeesSection = getByTestId('gas-fee-section');
+ const gasFeesSection = screen.getByTestId('gas-fee-section');
expect(gasFeesSection).toBeInTheDocument();
const editGasFeesRow =
@@ -278,7 +297,9 @@ describe('Contract Interaction Confirmation', () => {
const editGasFeeNativeCurrency =
within(editGasFeesRow).getByTestId('native-currency');
expect(editGasFeeNativeCurrency).toHaveTextContent('$28.50');
- expect(editGasFeesRow).toContainElement(getByTestId('edit-gas-fee-icon'));
+ expect(editGasFeesRow).toContainElement(
+ screen.getByTestId('edit-gas-fee-icon'),
+ );
const gasFeeSpeed = within(gasFeesSection).getByTestId(
'gas-fee-details-speed',
@@ -306,12 +327,14 @@ describe('Contract Interaction Confirmation', () => {
showConfirmationAdvancedDetails: false,
});
- const { getByTestId } = await integrationTestRender({
- preloadedState: mockedMetaMaskState,
- backgroundConnection: backgroundConnectionMocked,
+ await act(async () => {
+ await integrationTestRender({
+ preloadedState: mockedMetaMaskState,
+ backgroundConnection: backgroundConnectionMocked,
+ });
});
- fireEvent.click(getByTestId('header-advanced-details-button'));
+ fireEvent.click(screen.getByTestId('header-advanced-details-button'));
await waitFor(() => {
expect(
@@ -341,9 +364,11 @@ describe('Contract Interaction Confirmation', () => {
showConfirmationAdvancedDetails: true,
});
- const { getByTestId } = await integrationTestRender({
- preloadedState: mockedMetaMaskState,
- backgroundConnection: backgroundConnectionMocked,
+ await act(async () => {
+ await integrationTestRender({
+ preloadedState: mockedMetaMaskState,
+ backgroundConnection: backgroundConnectionMocked,
+ });
});
await waitFor(() => {
@@ -360,37 +385,41 @@ describe('Contract Interaction Confirmation', () => {
transactionData:
'0x3b4b13810000000000000000000000000000000000000000000000000000000000000001',
contractAddress: '0x076146c765189d51be3160a2140cf80bfc73ad68',
- chainId: '0x5',
+ chainId: '0xaa36a7',
},
]);
});
- const gasFeesSection = getByTestId('gas-fee-section');
- const maxFee = getByTestId('gas-fee-details-max-fee');
+ const gasFeesSection = screen.getByTestId('gas-fee-section');
+ const maxFee = screen.getByTestId('gas-fee-details-max-fee');
expect(gasFeesSection).toContainElement(maxFee);
expect(maxFee).toHaveTextContent('Max fee');
expect(maxFee).toHaveTextContent('0.2313 ETH');
expect(maxFee).toHaveTextContent('$787.37');
- const nonceSection = getByTestId('advanced-details-nonce-section');
+ const nonceSection = screen.getByTestId('advanced-details-nonce-section');
expect(nonceSection).toBeInTheDocument();
expect(nonceSection).toHaveTextContent('Nonce');
expect(nonceSection).toContainElement(
- getByTestId('advanced-details-displayed-nonce'),
- );
- expect(getByTestId('advanced-details-displayed-nonce')).toHaveTextContent(
- '9',
+ screen.getByTestId('advanced-details-displayed-nonce'),
);
+ expect(
+ screen.getByTestId('advanced-details-displayed-nonce'),
+ ).toHaveTextContent('9');
- const dataSection = getByTestId('advanced-details-data-section');
+ const dataSection = screen.getByTestId('advanced-details-data-section');
expect(dataSection).toBeInTheDocument();
- const dataSectionFunction = getByTestId('advanced-details-data-function');
+ const dataSectionFunction = screen.getByTestId(
+ 'advanced-details-data-function',
+ );
expect(dataSection).toContainElement(dataSectionFunction);
expect(dataSectionFunction).toHaveTextContent('Function');
expect(dataSectionFunction).toHaveTextContent('mintNFTs');
- const transactionDataParams = getByTestId('advanced-details-data-param-0');
+ const transactionDataParams = screen.getByTestId(
+ 'advanced-details-data-param-0',
+ );
expect(dataSection).toContainElement(transactionDataParams);
expect(transactionDataParams).toHaveTextContent('Number Of Tokens');
expect(transactionDataParams).toHaveTextContent('1');
@@ -408,15 +437,17 @@ describe('Contract Interaction Confirmation', () => {
account.address,
);
- const { getByText } = await integrationTestRender({
- preloadedState: mockedMetaMaskState,
- backgroundConnection: backgroundConnectionMocked,
+ await act(async () => {
+ await integrationTestRender({
+ preloadedState: mockedMetaMaskState,
+ backgroundConnection: backgroundConnectionMocked,
+ });
});
const headingText = 'This is a deceptive request';
const bodyText =
'If you approve this request, a third party known for scams will take all your assets.';
- expect(getByText(headingText)).toBeInTheDocument();
- expect(getByText(bodyText)).toBeInTheDocument();
+ expect(screen.getByText(headingText)).toBeInTheDocument();
+ expect(screen.getByText(bodyText)).toBeInTheDocument();
});
});
diff --git a/test/integration/confirmations/transactions/erc20-approve.test.tsx b/test/integration/confirmations/transactions/erc20-approve.test.tsx
index 824ca80e0b84..e2466ad8f596 100644
--- a/test/integration/confirmations/transactions/erc20-approve.test.tsx
+++ b/test/integration/confirmations/transactions/erc20-approve.test.tsx
@@ -1,28 +1,21 @@
import { ApprovalType } from '@metamask/controller-utils';
-import { waitFor } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import nock from 'nock';
-import { useIsNFT } from '../../../../ui/pages/confirmations/components/confirm/info/approve/hooks/use-is-nft';
import * as backgroundConnection from '../../../../ui/store/background-connection';
import { integrationTestRender } from '../../../lib/render-helpers';
import mockMetaMaskState from '../../data/integration-init-state.json';
import { createMockImplementation, mock4byte } from '../../helpers';
+import { TokenStandard } from '../../../../shared/constants/transaction';
+import { createTestProviderTools } from '../../../stub/provider';
import { getUnapprovedApproveTransaction } from './transactionDataHelpers';
jest.mock('../../../../ui/store/background-connection', () => ({
...jest.requireActual('../../../../ui/store/background-connection'),
submitRequestToBackground: jest.fn(),
+ callBackgroundMethod: jest.fn(),
}));
-jest.mock(
- '../../../../ui/pages/confirmations/components/confirm/info/approve/hooks/use-is-nft',
- () => ({
- ...jest.requireActual(
- '../../../../ui/pages/confirmations/components/confirm/info/approve/hooks/use-is-nft',
- ),
- useIsNFT: jest.fn(),
- }),
-);
-
const mockedBackgroundConnection = jest.mocked(backgroundConnection);
const backgroundConnectionMocked = {
@@ -31,14 +24,21 @@ const backgroundConnectionMocked = {
export const pendingTransactionId = '48a75190-45ca-11ef-9001-f3886ec2397c';
export const pendingTransactionTime = new Date().getTime();
-const getMetaMaskStateWithUnapprovedApproveTransaction = (
- accountAddress: string,
-) => {
+const getMetaMaskStateWithUnapprovedApproveTransaction = (opts?: {
+ showAdvanceDetails: boolean;
+}) => {
+ const account =
+ mockMetaMaskState.internalAccounts.accounts[
+ mockMetaMaskState.internalAccounts
+ .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+ ];
+
return {
...mockMetaMaskState,
preferences: {
...mockMetaMaskState.preferences,
redesignedConfirmationsEnabled: true,
+ showConfirmationAdvancedDetails: opts?.showAdvanceDetails ?? false,
},
pendingApprovals: {
[pendingTransactionId]: {
@@ -55,9 +55,12 @@ const getMetaMaskStateWithUnapprovedApproveTransaction = (
},
pendingApprovalCount: 1,
knownMethodData: {
- '0x3b4b1381': {
- name: 'Mint NFTs',
+ '0x095ea7b3': {
+ name: 'Approve',
params: [
+ {
+ type: 'address',
+ },
{
type: 'uint256',
},
@@ -66,7 +69,7 @@ const getMetaMaskStateWithUnapprovedApproveTransaction = (
},
transactions: [
getUnapprovedApproveTransaction(
- accountAddress,
+ account.address,
pendingTransactionId,
pendingTransactionTime,
),
@@ -83,7 +86,7 @@ const advancedDetailsMockedRequests = {
decodeTransactionData: {
data: [
{
- name: 'approve',
+ name: 'Approve',
params: [
{
type: 'address',
@@ -109,46 +112,261 @@ const setupSubmitRequestToBackgroundMocks = (
...(mockRequests ?? {}),
}),
);
+
+ mockedBackgroundConnection.callBackgroundMethod.mockImplementation(
+ createMockImplementation({ addKnownMethodData: {} }),
+ );
};
-describe('ERC721 Approve Confirmation', () => {
- let useIsNFTMock;
+describe('ERC20 Approve Confirmation', () => {
+ beforeAll(() => {
+ const { provider } = createTestProviderTools({
+ networkId: 'sepolia',
+ chainId: '0xaa36a7',
+ });
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ global.ethereumProvider = provider as any;
+ });
+
beforeEach(() => {
jest.resetAllMocks();
- setupSubmitRequestToBackgroundMocks();
- const APPROVE_NFT_HEX_SIG = '0x095ea7b3';
- mock4byte(APPROVE_NFT_HEX_SIG);
- useIsNFTMock = jest
- .fn()
- .mockImplementation(() => ({ isNFT: false, decimals: '18' }));
- (useIsNFT as jest.Mock).mockImplementation(useIsNFTMock);
+ setupSubmitRequestToBackgroundMocks({
+ getTokenStandardAndDetails: {
+ standard: TokenStandard.ERC20,
+ },
+ });
+ const APPROVE_ERC20_HEX_SIG = '0x095ea7b3';
+ const APPROVE_ERC20_TEXT_SIG = 'approve(address,uint256)';
+ mock4byte(APPROVE_ERC20_HEX_SIG, APPROVE_ERC20_TEXT_SIG);
});
afterEach(() => {
nock.cleanAll();
});
+ afterAll(() => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ delete (global as any).ethereumProvider;
+ });
+
+ it('displays spending cap request title', async () => {
+ const mockedMetaMaskState =
+ getMetaMaskStateWithUnapprovedApproveTransaction();
+
+ await act(async () => {
+ await integrationTestRender({
+ preloadedState: mockedMetaMaskState,
+ backgroundConnection: backgroundConnectionMocked,
+ });
+ });
+
+ expect(screen.getByText('Spending cap request')).toBeInTheDocument();
+ expect(
+ screen.getByText('This site wants permission to withdraw your tokens'),
+ ).toBeInTheDocument();
+ });
+
+ it('displays approve simulation section', async () => {
+ const mockedMetaMaskState =
+ getMetaMaskStateWithUnapprovedApproveTransaction();
+
+ await act(async () => {
+ await integrationTestRender({
+ preloadedState: mockedMetaMaskState,
+ backgroundConnection: backgroundConnectionMocked,
+ });
+ });
+
+ const simulationSection = screen.getByTestId(
+ 'confirmation__simulation_section',
+ );
+ expect(simulationSection).toBeInTheDocument();
+
+ // TODO - fix this copy
+ expect(simulationSection).toHaveTextContent(
+ "You're giving someone else permission to withdraw NFTs from your account",
+ );
+ expect(simulationSection).toHaveTextContent('Spending cap');
+ const spendingCapValue = screen.getByTestId('simulation-token-value');
+ expect(simulationSection).toContainElement(spendingCapValue);
+ expect(spendingCapValue).toHaveTextContent('1');
+ expect(simulationSection).toHaveTextContent('0x07614...3ad68');
+ });
+
it('displays approve details with correct data', async () => {
- const account =
- mockMetaMaskState.internalAccounts.accounts[
- mockMetaMaskState.internalAccounts
- .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
- ];
+ const testUser = userEvent.setup();
const mockedMetaMaskState =
- getMetaMaskStateWithUnapprovedApproveTransaction(account.address);
+ getMetaMaskStateWithUnapprovedApproveTransaction();
- const { getByText } = await integrationTestRender({
- preloadedState: mockedMetaMaskState,
- backgroundConnection: backgroundConnectionMocked,
+ await act(async () => {
+ await integrationTestRender({
+ preloadedState: mockedMetaMaskState,
+ backgroundConnection: backgroundConnectionMocked,
+ });
});
- await waitFor(() => {
- expect(getByText('Spending cap request')).toBeInTheDocument();
+ const approveDetails = screen.getByTestId('confirmation__approve-details');
+ expect(approveDetails).toBeInTheDocument();
+ const approveDetailsSpender = screen.getByTestId(
+ 'confirmation__approve-spender',
+ );
+
+ expect(approveDetails).toContainElement(approveDetailsSpender);
+ expect(approveDetailsSpender).toHaveTextContent('Spender');
+ expect(approveDetailsSpender).toHaveTextContent('0x2e0D7...5d09B');
+ const spenderTooltip = screen.getByTestId(
+ 'confirmation__approve-spender-tooltip',
+ );
+ expect(approveDetailsSpender).toContainElement(spenderTooltip);
+ await testUser.hover(spenderTooltip);
+ // TODO - fix this copy
+ const spenderTooltipContent = await screen.findByText(
+ 'This is the address that will be able to withdraw your NFTs.',
+ );
+ expect(spenderTooltipContent).toBeInTheDocument();
+
+ const approveDetailsRequestFrom = screen.getByTestId(
+ 'transaction-details-origin-row',
+ );
+ expect(approveDetails).toContainElement(approveDetailsRequestFrom);
+ expect(approveDetailsRequestFrom).toHaveTextContent('Request from');
+ expect(approveDetailsRequestFrom).toHaveTextContent(
+ 'http://localhost:8086/',
+ );
+
+ const approveDetailsRequestFromTooltip = screen.getByTestId(
+ 'transaction-details-origin-row-tooltip',
+ );
+ expect(approveDetailsRequestFrom).toContainElement(
+ approveDetailsRequestFromTooltip,
+ );
+ await testUser.hover(approveDetailsRequestFromTooltip);
+ const requestFromTooltipContent = await screen.findByText(
+ 'This is the site asking for your confirmation.',
+ );
+ expect(requestFromTooltipContent).toBeInTheDocument();
+ });
+
+ it('displays spending cap section with correct data', async () => {
+ const testUser = userEvent.setup();
+
+ const mockedMetaMaskState =
+ getMetaMaskStateWithUnapprovedApproveTransaction();
+
+ await act(async () => {
+ await integrationTestRender({
+ preloadedState: mockedMetaMaskState,
+ backgroundConnection: backgroundConnectionMocked,
+ });
});
- await waitFor(() => {
- expect(getByText('Request from')).toBeInTheDocument();
+ const spendingCapSection = screen.getByTestId(
+ 'confirmation__approve-spending-cap-section',
+ );
+ expect(spendingCapSection).toBeInTheDocument();
+
+ expect(spendingCapSection).toHaveTextContent('Account balance');
+ expect(spendingCapSection).toHaveTextContent('0');
+ const spendingCapGroup = screen.getByTestId(
+ 'confirmation__approve-spending-cap-group',
+ );
+ expect(spendingCapSection).toContainElement(spendingCapGroup);
+ expect(spendingCapGroup).toHaveTextContent('Spending cap');
+ expect(spendingCapGroup).toHaveTextContent('1');
+
+ const spendingCapGroupTooltip = screen.getByTestId(
+ 'confirmation__approve-spending-cap-group-tooltip',
+ );
+ expect(spendingCapGroup).toContainElement(spendingCapGroupTooltip);
+ await testUser.hover(spendingCapGroupTooltip);
+ const requestFromTooltipContent = await screen.findByText(
+ 'This is the amount of tokens the spender will be able to access on your behalf.',
+ );
+ expect(requestFromTooltipContent).toBeInTheDocument();
+ });
+
+ it('displays the advanced transaction details section', async () => {
+ const testUser = userEvent.setup();
+
+ const mockedMetaMaskState =
+ getMetaMaskStateWithUnapprovedApproveTransaction({
+ showAdvanceDetails: true,
+ });
+
+ await act(async () => {
+ await integrationTestRender({
+ preloadedState: mockedMetaMaskState,
+ backgroundConnection: backgroundConnectionMocked,
+ });
});
+
+ const approveDetails = screen.getByTestId('confirmation__approve-details');
+ expect(approveDetails).toBeInTheDocument();
+
+ const approveDetailsRecipient = screen.getByTestId(
+ 'transaction-details-recipient-row',
+ );
+ expect(approveDetails).toContainElement(approveDetailsRecipient);
+ expect(approveDetailsRecipient).toHaveTextContent('Interacting with');
+ expect(approveDetailsRecipient).toHaveTextContent('0x07614...3ad68');
+
+ const approveDetailsRecipientTooltip = screen.getByTestId(
+ 'transaction-details-recipient-row-tooltip',
+ );
+ expect(approveDetailsRecipient).toContainElement(
+ approveDetailsRecipientTooltip,
+ );
+ await testUser.hover(approveDetailsRecipientTooltip);
+ const recipientTooltipContent = await screen.findByText(
+ "This is the contract you're interacting with. Protect yourself from scammers by verifying the details.",
+ );
+ expect(recipientTooltipContent).toBeInTheDocument();
+
+ const approveMethodData = await screen.findByTestId(
+ 'transaction-details-method-data-row',
+ );
+ expect(approveDetails).toContainElement(approveMethodData);
+ expect(approveMethodData).toHaveTextContent('Method');
+ expect(approveMethodData).toHaveTextContent('Approve');
+ const approveMethodDataTooltip = screen.getByTestId(
+ 'transaction-details-method-data-row-tooltip',
+ );
+ expect(approveMethodData).toContainElement(approveMethodDataTooltip);
+ await testUser.hover(approveMethodDataTooltip);
+ const approveMethodDataTooltipContent = await screen.findByText(
+ 'Function executed based on decoded input data.',
+ );
+ expect(approveMethodDataTooltipContent).toBeInTheDocument();
+
+ const approveDetailsNonce = screen.getByTestId(
+ 'advanced-details-nonce-section',
+ );
+ expect(approveDetailsNonce).toBeInTheDocument();
+
+ const dataSection = screen.getByTestId('advanced-details-data-section');
+ expect(dataSection).toBeInTheDocument();
+
+ const dataSectionFunction = screen.getByTestId(
+ 'advanced-details-data-function',
+ );
+ expect(dataSection).toContainElement(dataSectionFunction);
+ expect(dataSectionFunction).toHaveTextContent('Function');
+ expect(dataSectionFunction).toHaveTextContent('Approve');
+
+ const approveDataParams1 = screen.getByTestId(
+ 'advanced-details-data-param-0',
+ );
+ expect(dataSection).toContainElement(approveDataParams1);
+ expect(approveDataParams1).toHaveTextContent('Param #1');
+ expect(approveDataParams1).toHaveTextContent('0x2e0D7...5d09B');
+
+ const approveDataParams2 = screen.getByTestId(
+ 'advanced-details-data-param-1',
+ );
+ expect(dataSection).toContainElement(approveDataParams2);
+ expect(approveDataParams2).toHaveTextContent('Param #2');
+ expect(approveDataParams2).toHaveTextContent('1');
});
});
diff --git a/test/integration/confirmations/transactions/erc721-approve.test.tsx b/test/integration/confirmations/transactions/erc721-approve.test.tsx
index 47f0e2121eb8..8a836dbd7568 100644
--- a/test/integration/confirmations/transactions/erc721-approve.test.tsx
+++ b/test/integration/confirmations/transactions/erc721-approve.test.tsx
@@ -1,28 +1,20 @@
import { ApprovalType } from '@metamask/controller-utils';
-import { waitFor } from '@testing-library/react';
+import { act, screen, waitFor } from '@testing-library/react';
import nock from 'nock';
-import { useIsNFT } from '../../../../ui/pages/confirmations/components/confirm/info/approve/hooks/use-is-nft';
import * as backgroundConnection from '../../../../ui/store/background-connection';
import { integrationTestRender } from '../../../lib/render-helpers';
import mockMetaMaskState from '../../data/integration-init-state.json';
import { createMockImplementation, mock4byte } from '../../helpers';
+import { TokenStandard } from '../../../../shared/constants/transaction';
+import { createTestProviderTools } from '../../../stub/provider';
import { getUnapprovedApproveTransaction } from './transactionDataHelpers';
jest.mock('../../../../ui/store/background-connection', () => ({
...jest.requireActual('../../../../ui/store/background-connection'),
submitRequestToBackground: jest.fn(),
+ callBackgroundMethod: jest.fn(),
}));
-jest.mock(
- '../../../../ui/pages/confirmations/components/confirm/info/approve/hooks/use-is-nft',
- () => ({
- ...jest.requireActual(
- '../../../../ui/pages/confirmations/components/confirm/info/approve/hooks/use-is-nft',
- ),
- useIsNFT: jest.fn(),
- }),
-);
-
const mockedBackgroundConnection = jest.mocked(backgroundConnection);
const backgroundConnectionMocked = {
@@ -55,9 +47,12 @@ const getMetaMaskStateWithUnapprovedApproveTransaction = (
},
pendingApprovalCount: 1,
knownMethodData: {
- '0x3b4b1381': {
- name: 'Mint NFTs',
+ '0x095ea7b3': {
+ name: 'Approve',
params: [
+ {
+ type: 'address',
+ },
{
type: 'uint256',
},
@@ -109,23 +104,43 @@ const setupSubmitRequestToBackgroundMocks = (
...(mockRequests ?? {}),
}),
);
+
+ mockedBackgroundConnection.callBackgroundMethod.mockImplementation(
+ createMockImplementation({ addKnownMethodData: {} }),
+ );
};
describe('ERC721 Approve Confirmation', () => {
- let useIsNFTMock;
+ beforeAll(() => {
+ const { provider } = createTestProviderTools({
+ networkId: 'sepolia',
+ chainId: '0xaa36a7',
+ });
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ global.ethereumProvider = provider as any;
+ });
+
beforeEach(() => {
jest.resetAllMocks();
- setupSubmitRequestToBackgroundMocks();
+ setupSubmitRequestToBackgroundMocks({
+ getTokenStandardAndDetails: {
+ standard: TokenStandard.ERC721,
+ },
+ });
const APPROVE_NFT_HEX_SIG = '0x095ea7b3';
mock4byte(APPROVE_NFT_HEX_SIG);
- useIsNFTMock = jest.fn().mockImplementation(() => ({ isNFT: true }));
- (useIsNFT as jest.Mock).mockImplementation(useIsNFTMock);
});
afterEach(() => {
nock.cleanAll();
});
+ afterAll(() => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ delete (global as any).ethereumProvider;
+ });
+
it('displays approve details with correct data', async () => {
const account =
mockMetaMaskState.internalAccounts.accounts[
@@ -136,17 +151,19 @@ describe('ERC721 Approve Confirmation', () => {
const mockedMetaMaskState =
getMetaMaskStateWithUnapprovedApproveTransaction(account.address);
- const { getByText } = await integrationTestRender({
- preloadedState: mockedMetaMaskState,
- backgroundConnection: backgroundConnectionMocked,
+ await act(async () => {
+ await integrationTestRender({
+ preloadedState: mockedMetaMaskState,
+ backgroundConnection: backgroundConnectionMocked,
+ });
});
await waitFor(() => {
- expect(getByText('Allowance request')).toBeInTheDocument();
+ expect(screen.getByText('Allowance request')).toBeInTheDocument();
});
await waitFor(() => {
- expect(getByText('Request from')).toBeInTheDocument();
+ expect(screen.getByText('Request from')).toBeInTheDocument();
});
});
});
diff --git a/test/integration/confirmations/transactions/transactionDataHelpers.tsx b/test/integration/confirmations/transactions/transactionDataHelpers.tsx
index 72fc0d2289f3..12550ea5e563 100644
--- a/test/integration/confirmations/transactions/transactionDataHelpers.tsx
+++ b/test/integration/confirmations/transactions/transactionDataHelpers.tsx
@@ -7,7 +7,7 @@ export const getUnapprovedTransaction = (
) => {
return {
actionId: 4256525906,
- chainId: '0x5',
+ chainId: '0xaa36a7',
dappSuggestedGasFees: {
gas: '0x16a92',
},
diff --git a/test/integration/data/integration-init-state.json b/test/integration/data/integration-init-state.json
index 27cd1dcfd83a..212ea5702868 100644
--- a/test/integration/data/integration-init-state.json
+++ b/test/integration/data/integration-init-state.json
@@ -26,18 +26,19 @@
}
},
"accountsByChainId": {
- "0x5": {
+ "0xaa36a7": {
"0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
+ "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
"balance": "0x15f6f0b9d4f8d000"
}
}
},
"addSnapAccountEnabled": false,
"addressBook": {
- "0x5": {
+ "0xaa36a7": {
"0xc42edfcc21ed14dda456aa0756c153f7985d8813": {
"address": "0xc42edfcc21ed14dda456aa0756c153f7985d8813",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"isEns": false,
"memo": "",
"name": "Address Book Account 1"
@@ -45,7 +46,7 @@
}
},
"advancedGasFee": {
- "0x5": {
+ "0xaa36a7": {
"maxBaseFee": "75",
"priorityFee": "2"
}
@@ -92,6 +93,17 @@
"createdDate": null,
"schemaName": "ERC721",
"externalLink": null
+ },
+ {
+ "address": "0x495f947276749Ce646f68AC8c248420045cb7b5e",
+ "description": null,
+ "name": "Punk Generator",
+ "logo": null,
+ "symbol": "PUNK",
+ "assetContractType": "non-fungible",
+ "createdDate": null,
+ "schemaName": "ERC1155",
+ "externalLink": null
}
],
"0x5": [
@@ -105,17 +117,6 @@
"createdDate": null,
"schemaName": "ERC721",
"externalLink": null
- },
- {
- "address": "0x495f947276749Ce646f68AC8c248420045cb7b5e",
- "description": null,
- "name": "Punk Generator",
- "logo": null,
- "symbol": "PUNK",
- "assetContractType": "non-fungible",
- "createdDate": null,
- "schemaName": "ERC1155",
- "externalLink": null
}
],
"0x99": [
@@ -155,7 +156,7 @@
"standard": "ERC721"
}
],
- "0xaa36a7": [
+ "0x5": [
{
"address": "0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414",
"tokenId": "1",
@@ -165,7 +166,7 @@
"standard": "ERC721"
}
],
- "0x5": [
+ "0xaa36a7": [
{
"address": "0x495f947276749Ce646f68AC8c248420045cb7b5e",
"tokenId": "58076532811975507823669075598676816378162417803895263482849101575514658701313",
@@ -395,7 +396,7 @@
"networkCongestion": 0.10625
},
"gasFeeEstimatesByChainId": {
- "0x5": {
+ "0xaa36a7": {
"estimatedGasFeeTimeBounds": {
"lowerTimeBound": 15000,
"upperTimeBound": 60000
@@ -462,7 +463,7 @@
"0xe708": false,
"0xfa": true,
"0x5": false,
- "0xaa36a7": true,
+ "0xaa36a7": false,
"0xe704": true
},
"internalAccounts": {
@@ -669,6 +670,13 @@
"nickname": "Chain 5",
"ticker": "ETH",
"type": "rpc"
+ },
+ "sepolia": {
+ "type": "rpc",
+ "chainId": "0xaa36a7",
+ "ticker": "ETH",
+ "nickname": "Sepolia",
+ "id": "sepolia"
}
},
"networksMetadata": {
@@ -693,7 +701,7 @@
},
"nftsDropdownState": {
"0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
- "0x5": {
+ "0xaa36a7": {
"0x495f947276749Ce646f68AC8c248420045cb7b5e": false
}
}
@@ -756,16 +764,16 @@
"previousAppVersion": "11.14.4",
"previousMigrationVersion": 112,
"providerConfig": {
- "type": "rpc",
- "nickname": "goerli",
- "chainId": "0x5",
+ "type": "sepolia",
+ "nickname": "sepolia",
+ "chainId": "0xaa36a7",
"ticker": "ETH",
- "id": "chain5"
+ "id": "sepolia"
},
"securityAlertsEnabled": true,
"seedPhraseBackedUp": true,
"selectedAddress": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
- "selectedNetworkClientId": "goerli-network-id",
+ "selectedNetworkClientId": "sepolia",
"showAccountBanner": false,
"showBetaHeader": false,
"showNetworkBanner": true,
@@ -778,7 +786,7 @@
"liveness": true,
"smartTransactions": {
"0x1": [],
- "0x5": []
+ "0xaa36a7": []
},
"userOptInV2": true
},
@@ -1271,7 +1279,7 @@
"id": 3387511061307736,
"time": 1528133130531,
"status": "confirmed",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": false,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -1286,7 +1294,7 @@
"id": 3387511061307736,
"time": 1528133130531,
"status": "unapproved",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": true,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -1403,7 +1411,7 @@
"id": 3387511061307737,
"time": 1528133149983,
"status": "confirmed",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": false,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -1418,7 +1426,7 @@
"id": 3387511061307737,
"time": 1528133149983,
"status": "unapproved",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": true,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -1535,7 +1543,7 @@
"id": 3387511061307738,
"time": 1528133180635,
"status": "confirmed",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": false,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -1550,7 +1558,7 @@
"id": 3387511061307738,
"time": 1528133180635,
"status": "unapproved",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": true,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -1667,7 +1675,7 @@
"id": 3387511061307739,
"time": 1528133223918,
"status": "confirmed",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": false,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -1683,7 +1691,7 @@
"id": 3387511061307739,
"time": 1528133223918,
"status": "unapproved",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": true,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -1804,7 +1812,7 @@
"id": 3387511061307740,
"time": 1528133291381,
"status": "confirmed",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": false,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -1820,7 +1828,7 @@
"id": 3387511061307740,
"time": 1528133291381,
"status": "unapproved",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": true,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -1938,7 +1946,7 @@
"id": 3387511061307741,
"time": 1528133318440,
"status": "rejected",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": false,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -1952,7 +1960,7 @@
"id": 3387511061307741,
"time": 1528133318440,
"status": "unapproved",
- "chainId": "0x5",
+ "chainId": "0xaa36a7",
"loadingDefaults": true,
"txParams": {
"from": "0x3b222de3aaba8ec9771ca9e9af5d8ed757fb7f62",
@@ -2029,12 +2037,12 @@
"useTokenDetection": false,
"useTransactionSimulations": true,
"usedNetworks": {
- "0x5": {
- "rpcUrl": "https://goerli.infura.io/v3/8f8f7f9f6f4c4f3e8f8f7f9f6f4c4f3e",
- "chainId": "0x5",
- "nickname": "Goerli Test Network",
+ "0xaa36a7": {
+ "rpcUrl": "https://sepolia.infura.io/v3/8f8f7f9f6f4c4f3e8f8f7f9f6f4c4f3e",
+ "chainId": "0xaa36a7",
+ "nickname": "Sepolia Test Network",
"ticker": "ETH",
- "blockExplorerUrl": "https://goerli.etherscan.io"
+ "blockExplorerUrl": "https://sepolia.etherscan.io"
}
},
"userOperations": {},
diff --git a/test/integration/helpers.tsx b/test/integration/helpers.tsx
index d975c5adc594..2576d282a341 100644
--- a/test/integration/helpers.tsx
+++ b/test/integration/helpers.tsx
@@ -9,7 +9,7 @@ export const createMockImplementation = (requests: Record) => {
};
};
-export function mock4byte(hexSignature: string) {
+export function mock4byte(hexSignature: string, textSignature?: string) {
const mockEndpoint = nock('https://www.4byte.directory:443', {
encodedQueryParams: true,
})
@@ -21,7 +21,7 @@ export function mock4byte(hexSignature: string) {
{
id: 235447,
created_at: '2021-09-14T02:07:09.805000Z',
- text_signature: 'mintNFTs(uint256)',
+ text_signature: textSignature ?? 'mintNFTs(uint256)',
hex_signature: hexSignature,
bytes_signature: ';K\u0013 ',
},
diff --git a/ui/components/app/confirm/info/row/row.tsx b/ui/components/app/confirm/info/row/row.tsx
index 6b6470c98017..0dd0b9b110b8 100644
--- a/ui/components/app/confirm/info/row/row.tsx
+++ b/ui/components/app/confirm/info/row/row.tsx
@@ -128,6 +128,9 @@ export const ConfirmInfoRow: React.FC = ({
marginLeft={1}
color={TOOLTIP_ICON_COLORS[variant] as unknown as IconColor}
size={IconSize.Sm}
+ {...(dataTestId
+ ? { 'data-testid': `${dataTestId}-tooltip` }
+ : {})}
/>
)}
diff --git a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
index 6f09eea933f4..ee8bff7a53dd 100644
--- a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
@@ -98,9 +98,11 @@ exports[` renders component for approve request 1`] = `
renders component for approve request 1`] = `
>
@@ -214,6 +217,7 @@ exports[`
renders component for approve request 1`] = `
>
@@ -254,6 +258,7 @@ exports[` renders component for approve request 1`] = `
>
@@ -320,6 +325,7 @@ exports[` renders component for approve request 1`] = `
renders component for approve request 1`] = `
/>
renders component for approve request 1`] = `
>
@@ -430,6 +438,7 @@ exports[`
renders component for approve request 1`] = `
>
@@ -529,6 +538,7 @@ exports[` renders component for approve request 1`] = `
>
@@ -674,6 +684,7 @@ exports[` renders component for approve request 1`] = `
>
@@ -762,6 +773,7 @@ exports[` renders component for approve request 1`] = `
>
diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve-details/__snapshots__/approve-details.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/approve/approve-details/__snapshots__/approve-details.test.tsx.snap
index c31eb7dcfbd0..5491908cdffd 100644
--- a/ui/pages/confirmations/components/confirm/info/approve/approve-details/__snapshots__/approve-details.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/approve/approve-details/__snapshots__/approve-details.test.tsx.snap
@@ -4,6 +4,7 @@ exports[` renders component for approve details 1`] = `
{
return (
<>
-
+
@@ -50,7 +54,7 @@ export const ApproveDetails = () => {
);
return (
-
+
{showAdvancedDetails && (
diff --git a/ui/pages/confirmations/components/confirm/info/approve/spending-cap/__snapshots__/spending-cap.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/approve/spending-cap/__snapshots__/spending-cap.test.tsx.snap
index d249b4ba843b..dafe44df8e70 100644
--- a/ui/pages/confirmations/components/confirm/info/approve/spending-cap/__snapshots__/spending-cap.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/approve/spending-cap/__snapshots__/spending-cap.test.tsx.snap
@@ -4,6 +4,7 @@ exports[` renders component 1`] = `
renders component 1`] = `
/>
renders component 1`] = `
>
diff --git a/ui/pages/confirmations/components/confirm/info/approve/spending-cap/spending-cap.tsx b/ui/pages/confirmations/components/confirm/info/approve/spending-cap/spending-cap.tsx
index 73f0ef773fa0..2ebd9d8e7e4e 100644
--- a/ui/pages/confirmations/components/confirm/info/approve/spending-cap/spending-cap.tsx
+++ b/ui/pages/confirmations/components/confirm/info/approve/spending-cap/spending-cap.tsx
@@ -62,6 +62,7 @@ const SpendingCapGroup = ({
{spendingCap === SPENDING_CAP_UNLIMITED_MSG ? (
{SpendingCapElement}
@@ -105,7 +106,7 @@ export const SpendingCap = ({
}
return (
-
+
diff --git a/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap
index de72d2c1cfac..5a5e4583cf3d 100644
--- a/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap
@@ -113,6 +113,7 @@ exports[` renders component for contract interaction requ
>
@@ -153,6 +154,7 @@ exports[`
renders component for contract interaction requ
>
@@ -246,6 +248,7 @@ exports[` renders component for contract interaction requ
>
@@ -473,6 +476,7 @@ exports[`
renders component for contract interaction requ
>
@@ -513,6 +517,7 @@ exports[`
renders component for contract interaction requ
>
@@ -606,6 +611,7 @@ exports[` renders component for contract interaction requ
>
@@ -830,6 +836,7 @@ exports[` renders component for contract interaction requ
>
@@ -870,6 +877,7 @@ exports[` renders component for contract interaction requ
>
@@ -963,6 +971,7 @@ exports[` renders component for contract interaction requ
>
diff --git a/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/__snapshots__/edit-gas-fees-row.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/__snapshots__/edit-gas-fees-row.test.tsx.snap
index f0702978aa6c..0508381f9fbb 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/__snapshots__/edit-gas-fees-row.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/__snapshots__/edit-gas-fees-row.test.tsx.snap
@@ -27,6 +27,7 @@ exports[` renders component 1`] = `
>
diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap
index f797ffdb66c8..9b01388f94f3 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap
@@ -27,6 +27,7 @@ exports[` renders component for gas fees section 1`] = `
>
diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap
index 42bb2073ffcf..6a3e7cb058d9 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap
@@ -33,6 +33,7 @@ exports[` renders component for gas fees section 1`] = `
>
diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/__snapshots__/transaction-data.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/__snapshots__/transaction-data.test.tsx.snap
index 02da6945d64a..22bd56481f11 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/__snapshots__/transaction-data.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/__snapshots__/transaction-data.test.tsx.snap
@@ -102,6 +102,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -154,6 +155,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -250,6 +252,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -302,6 +305,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -343,6 +347,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -384,6 +389,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -502,6 +508,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -598,6 +605,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -650,6 +658,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -702,6 +711,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -798,6 +808,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -850,6 +861,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -902,6 +914,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
>
@@ -1007,6 +1020,7 @@ exports[`TransactionData renders decoded data with no names 1`] = `
>
@@ -1048,6 +1062,7 @@ exports[`TransactionData renders decoded data with no names 1`] = `
>
@@ -1100,6 +1115,7 @@ exports[`TransactionData renders decoded data with no names 1`] = `
>
@@ -1174,6 +1190,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1218,6 +1235,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1270,6 +1288,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1304,6 +1323,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1338,6 +1358,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1372,6 +1393,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1424,6 +1446,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1465,6 +1488,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1506,6 +1530,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1548,6 +1573,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1582,6 +1608,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1634,6 +1661,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1675,6 +1703,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1716,6 +1745,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1758,6 +1788,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1792,6 +1823,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1844,6 +1876,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1885,6 +1918,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1926,6 +1960,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -1969,6 +2004,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -2021,6 +2057,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
@@ -2063,6 +2100,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
>
diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-details/__snapshots__/transaction-details.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/transaction-details/__snapshots__/transaction-details.test.tsx.snap
index b65f3e74f8b8..8652c8f67128 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/transaction-details/__snapshots__/transaction-details.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-details/__snapshots__/transaction-details.test.tsx.snap
@@ -40,6 +40,7 @@ exports[` renders component for transaction details 1`] =
>
@@ -80,6 +81,7 @@ exports[` renders component for transaction details 1`] =
>
From 1a6f212e57203438f0daff970e03a42483ecfdb6 Mon Sep 17 00:00:00 2001
From: Derek Brans
Date: Wed, 18 Sep 2024 08:39:05 -0400
Subject: [PATCH 05/61] chore: smart-transactions code domain (#26948)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## **Description**
This PR establishes the `ui/pages/smart-transactions` code domain,
following the guidance in [this
proposal](https://docs.google.com/document/d/1dzgWc1LCkYz2lZZ6X8SOaj23iaGYVQ2zJ1FVpOxsU-o/edit).
Moved | To ui/pages/smart-transactions/
-- | --
ui/components/app/smart-transactions/smart-transactions-opt-in-modal.tsx
| components/smart-transactions-opt-in-modal.tsx
The following files will be left in place.
| Left in place | Reason |
|---------------------------------------------------------------------------------------|-------------------------------------------------------------------------------|
app/scripts/lib/transaction/smart-transactions.ts | background code
shared/constants/smartTransactions.ts | shared with background
|
`ui/components/app/transaction-list-item/smart-transaction-list-item.component.js`
| Specific to the transaction list. |
|
`ui/pages/confirmations/confirmation/templates/smart-transaction-status-page.js`
| Belongs with other confirmation templates. |
| `ui/pages/swaps/smart-transaction-status/smart-transaction-status.js`
| Swaps-focused. Will be replaced by regular STX status screen once
swaps moves to regular STX. |
### STX-related code in other files
The following files contain stx-related code, which may be extracted and
moved into the smart-transactions code domain at a later time.
| Path | STX-Related Code |
|------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
| `app/scripts/metamask-controller.js` | We use the STX controller there
`new SmartTransactionsController`. `*// Smart Transactions` section* |
| `ui/ducks/swaps/swaps.js` | A few functions related to STX:
`fetchSmartTransactionsLiveness`, `signAndSendSmartTransaction`,
`setSmartTransactionsRefreshInterval`, etc. |
| `ui/store/actions.ts` | `fetchSmartTransactionsLiveness` and other STX
functions |
|
`ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js`
| STX is used from this component |
| `ui/pages/settings/advanced-tab/advanced-tab.component.js` | Advanced
Settings that include STX option |
| `ui/pages/swaps/swaps.util.ts` | `getFeeForSmartTransaction` |
| `ui/pages/swaps/prepare-swap-page/review-quote.js` | Uses STX in Swaps
|
| `ui/selectors/transactions.js` |
`allowedSwapsSmartTransactionStatusesForActivityList` |
[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26948?quickstart=1)
## **Related issues**
Fixes:
## **Manual testing steps**
1. Installed extension
2. Added account with crypto
3. Verify STX opt-in-modal
4. Send a smart transaction
## **Screenshots/Recordings**
### **Before**
### **After**
![image](https://github.com/user-attachments/assets/6d610e0d-48b8-43e5-9dff-774481966e77)
![image](https://github.com/user-attachments/assets/4a8f5c17-4e2e-402b-84ca-61c95ed08948)
![image](https://github.com/user-attachments/assets/0eae012c-4cfe-4272-94c2-12b7519af1cb)
![image](https://github.com/user-attachments/assets/2cd232e6-d279-4894-b2df-5fcee0a8a0c9)
## **Pre-merge author checklist**
- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
ui/components/app/app-components.scss | 1 -
ui/pages/home/home.component.js | 2 +-
ui/pages/pages.scss | 2 +-
.../__snapshots__/smart-transactions-opt-in-modal.test.tsx.snap | 0
.../smart-transactions/components}/index.scss | 0
.../components}/smart-transactions-opt-in-modal.test.tsx | 0
.../components}/smart-transactions-opt-in-modal.tsx | 2 +-
ui/pages/smart-transactions/index.scss | 2 ++
8 files changed, 5 insertions(+), 4 deletions(-)
rename ui/{components/app/smart-transactions => pages/smart-transactions/components}/__snapshots__/smart-transactions-opt-in-modal.test.tsx.snap (100%)
rename ui/{components/app/smart-transactions => pages/smart-transactions/components}/index.scss (100%)
rename ui/{components/app/smart-transactions => pages/smart-transactions/components}/smart-transactions-opt-in-modal.test.tsx (100%)
rename ui/{components/app/smart-transactions => pages/smart-transactions/components}/smart-transactions-opt-in-modal.tsx (99%)
create mode 100644 ui/pages/smart-transactions/index.scss
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index cc9a08a53f1d..c5083af45104 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -51,7 +51,6 @@
@import 'recovery-phrase-reminder/index';
@import 'step-progress-bar/index.scss';
@import 'selected-account/index';
-@import 'smart-transactions/index';
@import 'srp-input/srp-input';
@import 'snaps/snap-privacy-warning/index';
@import 'tab-bar/index';
diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js
index 1c746869ad10..19b76a881c6c 100644
--- a/ui/pages/home/home.component.js
+++ b/ui/pages/home/home.component.js
@@ -13,7 +13,7 @@ import TermsOfUsePopup from '../../components/app/terms-of-use-popup';
import RecoveryPhraseReminder from '../../components/app/recovery-phrase-reminder';
import WhatsNewPopup from '../../components/app/whats-new-popup';
import { FirstTimeFlowType } from '../../../shared/constants/onboarding';
-import SmartTransactionsOptInModal from '../../components/app/smart-transactions/smart-transactions-opt-in-modal';
+import SmartTransactionsOptInModal from '../smart-transactions/components/smart-transactions-opt-in-modal';
///: END:ONLY_INCLUDE_IF
import HomeNotification from '../../components/app/home-notification';
import MultipleNotifications from '../../components/app/multiple-notifications';
diff --git a/ui/pages/pages.scss b/ui/pages/pages.scss
index 01641f29774a..2578286032d2 100644
--- a/ui/pages/pages.scss
+++ b/ui/pages/pages.scss
@@ -22,10 +22,10 @@
@import 'onboarding-flow/index';
@import 'permissions-connect/index';
@import 'settings/index';
+@import 'smart-transactions/index';
@import 'snaps/snaps-list/index';
@import 'snaps/snap-view/index';
@import 'create-snap-account/index';
-@import 'smart-transactions/smart-transaction-status-page/index';
@import 'remove-snap-account/index';
@import 'swaps/index';
@import 'token-details/index';
diff --git a/ui/components/app/smart-transactions/__snapshots__/smart-transactions-opt-in-modal.test.tsx.snap b/ui/pages/smart-transactions/components/__snapshots__/smart-transactions-opt-in-modal.test.tsx.snap
similarity index 100%
rename from ui/components/app/smart-transactions/__snapshots__/smart-transactions-opt-in-modal.test.tsx.snap
rename to ui/pages/smart-transactions/components/__snapshots__/smart-transactions-opt-in-modal.test.tsx.snap
diff --git a/ui/components/app/smart-transactions/index.scss b/ui/pages/smart-transactions/components/index.scss
similarity index 100%
rename from ui/components/app/smart-transactions/index.scss
rename to ui/pages/smart-transactions/components/index.scss
diff --git a/ui/components/app/smart-transactions/smart-transactions-opt-in-modal.test.tsx b/ui/pages/smart-transactions/components/smart-transactions-opt-in-modal.test.tsx
similarity index 100%
rename from ui/components/app/smart-transactions/smart-transactions-opt-in-modal.test.tsx
rename to ui/pages/smart-transactions/components/smart-transactions-opt-in-modal.test.tsx
diff --git a/ui/components/app/smart-transactions/smart-transactions-opt-in-modal.tsx b/ui/pages/smart-transactions/components/smart-transactions-opt-in-modal.tsx
similarity index 99%
rename from ui/components/app/smart-transactions/smart-transactions-opt-in-modal.tsx
rename to ui/pages/smart-transactions/components/smart-transactions-opt-in-modal.tsx
index 5b8ff09f9237..78055de42831 100644
--- a/ui/components/app/smart-transactions/smart-transactions-opt-in-modal.tsx
+++ b/ui/pages/smart-transactions/components/smart-transactions-opt-in-modal.tsx
@@ -27,7 +27,7 @@ import {
ButtonLinkSize,
Icon,
IconName,
-} from '../../component-library';
+} from '../../../components/component-library';
import { setSmartTransactionsOptInStatus } from '../../../store/actions';
import { SMART_TRANSACTIONS_LEARN_MORE_URL } from '../../../../shared/constants/smartTransactions';
diff --git a/ui/pages/smart-transactions/index.scss b/ui/pages/smart-transactions/index.scss
new file mode 100644
index 000000000000..8ef1b35cd611
--- /dev/null
+++ b/ui/pages/smart-transactions/index.scss
@@ -0,0 +1,2 @@
+@import './smart-transaction-status-page/index';
+@import './components/index';
From 313adea121a00259203d22e19f9d5b7a6efde8b8 Mon Sep 17 00:00:00 2001
From: Pedro Figueiredo
Date: Wed, 18 Sep 2024 14:56:23 +0100
Subject: [PATCH 06/61] fix: Estimated fee in redesigned screens (#27247)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## **Description**
`maxFeePerGas`, `maxPriorityFeePerGas` and `estimatedBaseFee` are
decimal values that should be converted before being used inside
`multiplyHexes` and `addHexes`. `estimatedBaseFee` also needs to be
converted to wei.
[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27247?quickstart=1)
## **Related issues**
Fixes:
## **Manual testing steps**
1. Go to this page...
2.
3.
## **Screenshots/Recordings**
### **Before**
#### Old Flow
#### Redesigned Flow
### **After**
#### Redesigned Flow
## **Pre-merge author checklist**
- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
shared/modules/conversion.utils.ts | 2 +-
.../transactions/contract-interaction.test.tsx | 8 ++++----
.../info/approve/__snapshots__/approve.test.tsx.snap | 8 ++++----
.../base-transaction-info.test.tsx.snap | 12 ++++++------
.../confirm/info/hooks/useFeeCalculations.test.ts | 12 ++++++------
.../confirm/info/hooks/useFeeCalculations.ts | 10 ++++++----
.../__snapshots__/gas-fees-details.test.tsx.snap | 4 ++--
.../__snapshots__/gas-fees-section.test.tsx.snap | 4 ++--
8 files changed, 31 insertions(+), 29 deletions(-)
diff --git a/shared/modules/conversion.utils.ts b/shared/modules/conversion.utils.ts
index d9fd2262f843..75da336eb8e6 100644
--- a/shared/modules/conversion.utils.ts
+++ b/shared/modules/conversion.utils.ts
@@ -4,7 +4,7 @@ import { addHexPrefix, BN } from 'ethereumjs-util';
import { EtherDenomination } from '../constants/common';
import { Numeric, NumericValue } from './Numeric';
-export function decGWEIToHexWEI(decGWEI: number) {
+export function decGWEIToHexWEI(decGWEI: NumericValue) {
return new Numeric(decGWEI, 10, EtherDenomination.GWEI)
.toBase(16)
.toDenomination(EtherDenomination.WEI)
diff --git a/test/integration/confirmations/transactions/contract-interaction.test.tsx b/test/integration/confirmations/transactions/contract-interaction.test.tsx
index cea1ed6f54bc..cd5953db50b8 100644
--- a/test/integration/confirmations/transactions/contract-interaction.test.tsx
+++ b/test/integration/confirmations/transactions/contract-interaction.test.tsx
@@ -293,10 +293,10 @@ describe('Contract Interaction Confirmation', () => {
expect(editGasFeesRow).toHaveTextContent('Network fee');
const firstGasField = within(editGasFeesRow).getByTestId('first-gas-field');
- expect(firstGasField).toHaveTextContent('0.0084 ETH');
+ expect(firstGasField).toHaveTextContent('0.0001 ETH');
const editGasFeeNativeCurrency =
within(editGasFeesRow).getByTestId('native-currency');
- expect(editGasFeeNativeCurrency).toHaveTextContent('$28.50');
+ expect(editGasFeeNativeCurrency).toHaveTextContent('$0.47');
expect(editGasFeesRow).toContainElement(
screen.getByTestId('edit-gas-fee-icon'),
);
@@ -394,8 +394,8 @@ describe('Contract Interaction Confirmation', () => {
const maxFee = screen.getByTestId('gas-fee-details-max-fee');
expect(gasFeesSection).toContainElement(maxFee);
expect(maxFee).toHaveTextContent('Max fee');
- expect(maxFee).toHaveTextContent('0.2313 ETH');
- expect(maxFee).toHaveTextContent('$787.37');
+ expect(maxFee).toHaveTextContent('0.0023 ETH');
+ expect(maxFee).toHaveTextContent('$7.72');
const nonceSection = screen.getByTestId('advanced-details-nonce-section');
expect(nonceSection).toBeInTheDocument();
diff --git a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
index ee8bff7a53dd..34fd469e0571 100644
--- a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
@@ -451,13 +451,13 @@ exports[` renders component for approve request 1`] = `
class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
data-testid="first-gas-field"
>
- 0.004 ETH
+ 0.0001 ETH
- $2.20
+ $0.04
renders component for approve request 1`] = `
- 0.1094 ETH
+ 0.0011 ETH
- $60.83
+ $0.60
diff --git a/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap
index 5a5e4583cf3d..127e5a8311f7 100644
--- a/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap
@@ -261,13 +261,13 @@ exports[` renders component for contract interaction requ
class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
data-testid="first-gas-field"
>
- 0.004 ETH
+ 0.0001 ETH
- $2.20
+ $0.04
renders component for contract interaction requ
class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
data-testid="first-gas-field"
>
- 0.004 ETH
+ 0.0001 ETH
- $2.20
+ $0.04
renders component for contract interaction requ
class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
data-testid="first-gas-field"
>
- 0.004 ETH
+ 0.0001 ETH
- $2.20
+ $0.04