From 2968d94ed6003506df7daddf63d73b97a892feb0 Mon Sep 17 00:00:00 2001 From: Hassan Malik Date: Thu, 12 Sep 2024 09:00:52 -0400 Subject: [PATCH 01/71] make adjustments to show notification call --- app/scripts/metamask-controller.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 479fe748c609..f79712b993f6 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -2654,14 +2654,19 @@ export default class MetamaskController extends EventEmitter { origin, args.message, ), - showInAppNotification: (origin, args) => + showInAppNotification: (origin, args) => { + const notificationArgs = { ...args }; + notificationArgs.interfaceId = notificationArgs.content; + delete notificationArgs.content; + delete notificationArgs.type; this.controllerMessenger.call( 'RateLimitController:call', origin, 'showInAppNotification', origin, - args.message, - ), + notificationArgs, + ); + }, updateSnapState: this.controllerMessenger.call.bind( this.controllerMessenger, 'SnapController:updateSnapState', From 39f7d1b1060ed319a652caf9a97949e25efc2326 Mon Sep 17 00:00:00 2001 From: Maarten Zuidhoorn Date: Tue, 24 Sep 2024 20:48:44 +0200 Subject: [PATCH 02/71] Bump Snaps packages --- builds.yml | 8 ++--- package.json | 12 ++++---- test/e2e/snaps/enums.js | 2 +- yarn.lock | 68 ++++++++++++++++++++--------------------- 4 files changed, 45 insertions(+), 45 deletions(-) diff --git a/builds.yml b/builds.yml index acee49063822..06abc43a5b72 100644 --- a/builds.yml +++ b/builds.yml @@ -26,7 +26,7 @@ buildTypes: - SEGMENT_WRITE_KEY_REF: SEGMENT_PROD_WRITE_KEY - ALLOW_LOCAL_SNAPS: false - REQUIRE_SNAPS_ALLOWLIST: true - - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.7.0/index.html + - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.8.0/index.html - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management # Main build uses the default browser manifest manifestOverrides: false @@ -46,7 +46,7 @@ buildTypes: - SEGMENT_WRITE_KEY_REF: SEGMENT_BETA_WRITE_KEY - ALLOW_LOCAL_SNAPS: false - REQUIRE_SNAPS_ALLOWLIST: true - - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.7.0/index.html + - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.8.0/index.html - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management # Modifies how the version is displayed. # eg. instead of 10.25.0 -> 10.25.0-beta.2 @@ -67,7 +67,7 @@ buildTypes: - SEGMENT_FLASK_WRITE_KEY - ALLOW_LOCAL_SNAPS: true - REQUIRE_SNAPS_ALLOWLIST: false - - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.7.0/index.html + - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.8.0/index.html - SUPPORT_LINK: https://support.metamask.io/ - SUPPORT_REQUEST_LINK: https://support.metamask.io/ - INFURA_ENV_KEY_REF: INFURA_FLASK_PROJECT_ID @@ -90,7 +90,7 @@ buildTypes: - SEGMENT_WRITE_KEY_REF: SEGMENT_MMI_WRITE_KEY - ALLOW_LOCAL_SNAPS: false - REQUIRE_SNAPS_ALLOWLIST: true - - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.7.0/index.html + - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.8.0/index.html - MMI_CONFIGURATION_SERVICE_URL: https://configuration.metamask-institutional.io/v2/configuration/default - SUPPORT_LINK: https://support.metamask-institutional.io - SUPPORT_REQUEST_LINK: https://support.metamask-institutional.io diff --git a/package.json b/package.json index 12d1cd30d956..bf7f87121abd 100644 --- a/package.json +++ b/package.json @@ -229,7 +229,7 @@ "semver@7.3.8": "^7.5.4", "@trezor/schema-utils@npm:1.0.2": "patch:@trezor/schema-utils@npm%3A1.0.2#~/.yarn/patches/@trezor-schema-utils-npm-1.0.2-7dd48689b2.patch", "lavamoat-core@npm:^15.1.1": "patch:lavamoat-core@npm%3A15.1.1#~/.yarn/patches/lavamoat-core-npm-15.1.1-51fbe39988.patch", - "@metamask/snaps-sdk": "^6.5.1", + "@metamask/snaps-sdk": "^6.6.0", "@swc/types@0.1.5": "^0.1.6", "@babel/runtime@npm:^7.7.6": "patch:@babel/runtime@npm%3A7.24.0#~/.yarn/patches/@babel-runtime-npm-7.24.0-7eb1dd11a2.patch", "@babel/runtime@npm:^7.9.2": "patch:@babel/runtime@npm%3A7.24.0#~/.yarn/patches/@babel-runtime-npm-7.24.0-7eb1dd11a2.patch", @@ -354,11 +354,11 @@ "@metamask/selected-network-controller": "^18.0.1", "@metamask/signature-controller": "^19.0.0", "@metamask/smart-transactions-controller": "^13.0.0", - "@metamask/snaps-controllers": "^9.7.0", - "@metamask/snaps-execution-environments": "^6.7.2", - "@metamask/snaps-rpc-methods": "^11.1.1", - "@metamask/snaps-sdk": "^6.5.1", - "@metamask/snaps-utils": "^8.1.1", + "@metamask/snaps-controllers": "^9.9.0", + "@metamask/snaps-execution-environments": "^6.8.0", + "@metamask/snaps-rpc-methods": "^11.2.0", + "@metamask/snaps-sdk": "^6.6.0", + "@metamask/snaps-utils": "^8.2.0", "@metamask/transaction-controller": "^37.0.0", "@metamask/user-operation-controller": "^13.0.0", "@metamask/utils": "^9.1.0", diff --git a/test/e2e/snaps/enums.js b/test/e2e/snaps/enums.js index 2b1a6bc6532d..a0a0e856095e 100644 --- a/test/e2e/snaps/enums.js +++ b/test/e2e/snaps/enums.js @@ -1,3 +1,3 @@ module.exports = { - TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/snaps/test-snaps/2.13.1/', + TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/snaps/test-snaps/2.15.0', }; diff --git a/yarn.lock b/yarn.lock index e6329f1b9a03..2d8aacff3198 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6265,9 +6265,9 @@ __metadata: languageName: node linkType: hard -"@metamask/snaps-controllers@npm:^9.6.0, @metamask/snaps-controllers@npm:^9.7.0": - version: 9.7.0 - resolution: "@metamask/snaps-controllers@npm:9.7.0" +"@metamask/snaps-controllers@npm:^9.6.0, @metamask/snaps-controllers@npm:^9.9.0": + version: 9.9.0 + resolution: "@metamask/snaps-controllers@npm:9.9.0" dependencies: "@metamask/approval-controller": "npm:^7.0.2" "@metamask/base-controller": "npm:^6.0.2" @@ -6279,9 +6279,9 @@ __metadata: "@metamask/post-message-stream": "npm:^8.1.1" "@metamask/rpc-errors": "npm:^6.3.1" "@metamask/snaps-registry": "npm:^3.2.1" - "@metamask/snaps-rpc-methods": "npm:^11.1.1" - "@metamask/snaps-sdk": "npm:^6.5.0" - "@metamask/snaps-utils": "npm:^8.1.1" + "@metamask/snaps-rpc-methods": "npm:^11.2.0" + "@metamask/snaps-sdk": "npm:^6.6.0" + "@metamask/snaps-utils": "npm:^8.2.0" "@metamask/utils": "npm:^9.2.1" "@xstate/fsm": "npm:^2.0.0" browserify-zlib: "npm:^0.2.0" @@ -6294,30 +6294,30 @@ __metadata: readable-web-to-node-stream: "npm:^3.0.2" tar-stream: "npm:^3.1.7" peerDependencies: - "@metamask/snaps-execution-environments": ^6.7.1 + "@metamask/snaps-execution-environments": ^6.8.0 peerDependenciesMeta: "@metamask/snaps-execution-environments": optional: true - checksum: 10/8a353819e60330ef3e338a40b1115d4c830b92b1cc0c92afb2b34bf46fbc906e6da5f905654e1d486cacd40b7025ec74d3cd01cb935090035ce9f1021ce5469f + checksum: 10/c13bfa077f6e3b378b03634f7bea8ece4297985239505ba1791c0e18eb55e74d3db43a5c8d2da7a9d6bdde93db969746d7aba3742436d76f1b21fd4e480b2b19 languageName: node linkType: hard -"@metamask/snaps-execution-environments@npm:^6.7.2": - version: 6.7.2 - resolution: "@metamask/snaps-execution-environments@npm:6.7.2" +"@metamask/snaps-execution-environments@npm:^6.8.0": + version: 6.8.0 + resolution: "@metamask/snaps-execution-environments@npm:6.8.0" dependencies: "@metamask/json-rpc-engine": "npm:^9.0.2" "@metamask/object-multiplex": "npm:^2.0.0" "@metamask/post-message-stream": "npm:^8.1.1" "@metamask/providers": "npm:^17.1.2" "@metamask/rpc-errors": "npm:^6.3.1" - "@metamask/snaps-sdk": "npm:^6.5.0" - "@metamask/snaps-utils": "npm:^8.1.1" + "@metamask/snaps-sdk": "npm:^6.6.0" + "@metamask/snaps-utils": "npm:^8.2.0" "@metamask/superstruct": "npm:^3.1.0" "@metamask/utils": "npm:^9.2.1" nanoid: "npm:^3.1.31" readable-stream: "npm:^3.6.2" - checksum: 10/4b8ec4c0f6e628feeffd92fe4378fd204d2ed78012a1ed5282b24b00c78cebc3b6d7cb1306903b045a2ca887ecc0adafb2c96da4a19f2730a268f4912b36bec3 + checksum: 10/579c51e37efa4efa9820d663cadd9e146084cf2eadfcae35a61c574f1e54a6ac2a86d7145d1bc9764da31920aabfd81beea47178be0d2226d42ad636e3513780 languageName: node linkType: hard @@ -6333,32 +6333,32 @@ __metadata: languageName: node linkType: hard -"@metamask/snaps-rpc-methods@npm:^11.1.1": - version: 11.1.1 - resolution: "@metamask/snaps-rpc-methods@npm:11.1.1" +"@metamask/snaps-rpc-methods@npm:^11.2.0": + version: 11.2.0 + resolution: "@metamask/snaps-rpc-methods@npm:11.2.0" dependencies: "@metamask/key-tree": "npm:^9.1.2" "@metamask/permission-controller": "npm:^11.0.0" "@metamask/rpc-errors": "npm:^6.3.1" - "@metamask/snaps-sdk": "npm:^6.5.0" - "@metamask/snaps-utils": "npm:^8.1.1" + "@metamask/snaps-sdk": "npm:^6.6.0" + "@metamask/snaps-utils": "npm:^8.2.0" "@metamask/superstruct": "npm:^3.1.0" "@metamask/utils": "npm:^9.2.1" "@noble/hashes": "npm:^1.3.1" - checksum: 10/e23279dabc6f4ffe2c6c4a7003a624cd5e79b558d7981ec12c23e54a5da25cb7be9bc7bddfa8b2ce84af28a89b42076a2c14ab004b7a976a4426bf1e1de71b5b + checksum: 10/95aee0edf9295dabd16446192b0e24144bc1637dee78c54adfb5d5fb4dea8d7101ff8a614627d8ff0b08be437afb30656906aabfe59a4c27697d959beb14cd9c languageName: node linkType: hard -"@metamask/snaps-sdk@npm:^6.5.1": - version: 6.5.1 - resolution: "@metamask/snaps-sdk@npm:6.5.1" +"@metamask/snaps-sdk@npm:^6.6.0": + version: 6.6.0 + resolution: "@metamask/snaps-sdk@npm:6.6.0" dependencies: "@metamask/key-tree": "npm:^9.1.2" "@metamask/providers": "npm:^17.1.2" "@metamask/rpc-errors": "npm:^6.3.1" "@metamask/superstruct": "npm:^3.1.0" "@metamask/utils": "npm:^9.2.1" - checksum: 10/7831fb2ca61a32ad43e971de9307b221f6bd2f65c84a3286f350cfdd2396166c58db6cd2fac9711654a211c8dc2049e591a79ab720b3f5ad562e434f75e95d32 + checksum: 10/509b5f695a9fe183061f001298985ac6fd3c54c55aecc9cbddfbdea9ff2e93dd9b601e5f3ad002e50f0a155dad81e52e796dec8645da1a7bb313e24f2107cdda languageName: node linkType: hard @@ -6393,9 +6393,9 @@ __metadata: languageName: node linkType: hard -"@metamask/snaps-utils@npm:^8.1.1": - version: 8.1.1 - resolution: "@metamask/snaps-utils@npm:8.1.1" +"@metamask/snaps-utils@npm:^8.1.1, @metamask/snaps-utils@npm:^8.2.0": + version: 8.2.0 + resolution: "@metamask/snaps-utils@npm:8.2.0" dependencies: "@babel/core": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" @@ -6405,7 +6405,7 @@ __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.5.0" + "@metamask/snaps-sdk": "npm:^6.6.0" "@metamask/superstruct": "npm:^3.1.0" "@metamask/utils": "npm:^9.2.1" "@noble/hashes": "npm:^1.3.1" @@ -6420,7 +6420,7 @@ __metadata: semver: "npm:^7.5.4" ses: "npm:^1.1.0" validate-npm-package-name: "npm:^5.0.0" - checksum: 10/f4ceb52a1f9578993c88c82a67f4f041309af51c83ff5caa3fed080f36b54d14ea7da807ce1cf19a13600dd0e77c51af70398e8c7bb78f0ba99a037f4d22610f + checksum: 10/6f38bf39c4c2561f13347859fdd8c0f319027f6819e17c899f5e6fa7a2d8b0ceb8eaadcb3f104cae68341e0cc20044688b815563e38dfa0cf60d4a2c77143d1b languageName: node linkType: hard @@ -26146,11 +26146,11 @@ __metadata: "@metamask/selected-network-controller": "npm:^18.0.1" "@metamask/signature-controller": "npm:^19.0.0" "@metamask/smart-transactions-controller": "npm:^13.0.0" - "@metamask/snaps-controllers": "npm:^9.7.0" - "@metamask/snaps-execution-environments": "npm:^6.7.2" - "@metamask/snaps-rpc-methods": "npm:^11.1.1" - "@metamask/snaps-sdk": "npm:^6.5.1" - "@metamask/snaps-utils": "npm:^8.1.1" + "@metamask/snaps-controllers": "npm:^9.9.0" + "@metamask/snaps-execution-environments": "npm:^6.8.0" + "@metamask/snaps-rpc-methods": "npm:^11.2.0" + "@metamask/snaps-sdk": "npm:^6.6.0" + "@metamask/snaps-utils": "npm:^8.2.0" "@metamask/test-bundler": "npm:^1.0.0" "@metamask/test-dapp": "npm:^8.4.0" "@metamask/transaction-controller": "npm:^37.0.0" From bdd1935623c34fc1d7edd67f4bdc93a53e126a90 Mon Sep 17 00:00:00 2001 From: Maarten Zuidhoorn Date: Fri, 27 Sep 2024 17:16:48 +0200 Subject: [PATCH 03/71] Bump dependencies again --- builds.yml | 8 ++--- package.json | 12 ++++---- test/e2e/snaps/enums.js | 2 +- yarn.lock | 68 ++++++++++++++++++++--------------------- 4 files changed, 45 insertions(+), 45 deletions(-) diff --git a/builds.yml b/builds.yml index 06abc43a5b72..6a968119d6da 100644 --- a/builds.yml +++ b/builds.yml @@ -26,7 +26,7 @@ buildTypes: - SEGMENT_WRITE_KEY_REF: SEGMENT_PROD_WRITE_KEY - ALLOW_LOCAL_SNAPS: false - REQUIRE_SNAPS_ALLOWLIST: true - - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.8.0/index.html + - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.9.0/index.html - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management # Main build uses the default browser manifest manifestOverrides: false @@ -46,7 +46,7 @@ buildTypes: - SEGMENT_WRITE_KEY_REF: SEGMENT_BETA_WRITE_KEY - ALLOW_LOCAL_SNAPS: false - REQUIRE_SNAPS_ALLOWLIST: true - - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.8.0/index.html + - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.9.0/index.html - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management # Modifies how the version is displayed. # eg. instead of 10.25.0 -> 10.25.0-beta.2 @@ -67,7 +67,7 @@ buildTypes: - SEGMENT_FLASK_WRITE_KEY - ALLOW_LOCAL_SNAPS: true - REQUIRE_SNAPS_ALLOWLIST: false - - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.8.0/index.html + - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.9.0/index.html - SUPPORT_LINK: https://support.metamask.io/ - SUPPORT_REQUEST_LINK: https://support.metamask.io/ - INFURA_ENV_KEY_REF: INFURA_FLASK_PROJECT_ID @@ -90,7 +90,7 @@ buildTypes: - SEGMENT_WRITE_KEY_REF: SEGMENT_MMI_WRITE_KEY - ALLOW_LOCAL_SNAPS: false - REQUIRE_SNAPS_ALLOWLIST: true - - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.8.0/index.html + - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/6.9.0/index.html - MMI_CONFIGURATION_SERVICE_URL: https://configuration.metamask-institutional.io/v2/configuration/default - SUPPORT_LINK: https://support.metamask-institutional.io - SUPPORT_REQUEST_LINK: https://support.metamask-institutional.io diff --git a/package.json b/package.json index bf7f87121abd..82fd140a8427 100644 --- a/package.json +++ b/package.json @@ -229,7 +229,7 @@ "semver@7.3.8": "^7.5.4", "@trezor/schema-utils@npm:1.0.2": "patch:@trezor/schema-utils@npm%3A1.0.2#~/.yarn/patches/@trezor-schema-utils-npm-1.0.2-7dd48689b2.patch", "lavamoat-core@npm:^15.1.1": "patch:lavamoat-core@npm%3A15.1.1#~/.yarn/patches/lavamoat-core-npm-15.1.1-51fbe39988.patch", - "@metamask/snaps-sdk": "^6.6.0", + "@metamask/snaps-sdk": "^6.7.0", "@swc/types@0.1.5": "^0.1.6", "@babel/runtime@npm:^7.7.6": "patch:@babel/runtime@npm%3A7.24.0#~/.yarn/patches/@babel-runtime-npm-7.24.0-7eb1dd11a2.patch", "@babel/runtime@npm:^7.9.2": "patch:@babel/runtime@npm%3A7.24.0#~/.yarn/patches/@babel-runtime-npm-7.24.0-7eb1dd11a2.patch", @@ -354,11 +354,11 @@ "@metamask/selected-network-controller": "^18.0.1", "@metamask/signature-controller": "^19.0.0", "@metamask/smart-transactions-controller": "^13.0.0", - "@metamask/snaps-controllers": "^9.9.0", - "@metamask/snaps-execution-environments": "^6.8.0", - "@metamask/snaps-rpc-methods": "^11.2.0", - "@metamask/snaps-sdk": "^6.6.0", - "@metamask/snaps-utils": "^8.2.0", + "@metamask/snaps-controllers": "^9.10.0", + "@metamask/snaps-execution-environments": "^6.9.0", + "@metamask/snaps-rpc-methods": "^11.3.0", + "@metamask/snaps-sdk": "^6.7.0", + "@metamask/snaps-utils": "^8.3.0", "@metamask/transaction-controller": "^37.0.0", "@metamask/user-operation-controller": "^13.0.0", "@metamask/utils": "^9.1.0", diff --git a/test/e2e/snaps/enums.js b/test/e2e/snaps/enums.js index a0a0e856095e..ea806d4c80d6 100644 --- a/test/e2e/snaps/enums.js +++ b/test/e2e/snaps/enums.js @@ -1,3 +1,3 @@ module.exports = { - TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/snaps/test-snaps/2.15.0', + TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/snaps/test-snaps/2.15.1', }; diff --git a/yarn.lock b/yarn.lock index 2d8aacff3198..e7a8482fe85c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6265,9 +6265,9 @@ __metadata: languageName: node linkType: hard -"@metamask/snaps-controllers@npm:^9.6.0, @metamask/snaps-controllers@npm:^9.9.0": - version: 9.9.0 - resolution: "@metamask/snaps-controllers@npm:9.9.0" +"@metamask/snaps-controllers@npm:^9.10.0, @metamask/snaps-controllers@npm:^9.6.0": + version: 9.10.0 + resolution: "@metamask/snaps-controllers@npm:9.10.0" dependencies: "@metamask/approval-controller": "npm:^7.0.2" "@metamask/base-controller": "npm:^6.0.2" @@ -6279,9 +6279,9 @@ __metadata: "@metamask/post-message-stream": "npm:^8.1.1" "@metamask/rpc-errors": "npm:^6.3.1" "@metamask/snaps-registry": "npm:^3.2.1" - "@metamask/snaps-rpc-methods": "npm:^11.2.0" - "@metamask/snaps-sdk": "npm:^6.6.0" - "@metamask/snaps-utils": "npm:^8.2.0" + "@metamask/snaps-rpc-methods": "npm:^11.3.0" + "@metamask/snaps-sdk": "npm:^6.7.0" + "@metamask/snaps-utils": "npm:^8.3.0" "@metamask/utils": "npm:^9.2.1" "@xstate/fsm": "npm:^2.0.0" browserify-zlib: "npm:^0.2.0" @@ -6294,30 +6294,30 @@ __metadata: readable-web-to-node-stream: "npm:^3.0.2" tar-stream: "npm:^3.1.7" peerDependencies: - "@metamask/snaps-execution-environments": ^6.8.0 + "@metamask/snaps-execution-environments": ^6.9.0 peerDependenciesMeta: "@metamask/snaps-execution-environments": optional: true - checksum: 10/c13bfa077f6e3b378b03634f7bea8ece4297985239505ba1791c0e18eb55e74d3db43a5c8d2da7a9d6bdde93db969746d7aba3742436d76f1b21fd4e480b2b19 + checksum: 10/330af13da1bfd276dd6eaf9629b00fdcbd221d52fd7920c615104afe30e75aba0b347035d65db7675ee1805b6e1fa00cde76026a2e8f430550a656ed6947c570 languageName: node linkType: hard -"@metamask/snaps-execution-environments@npm:^6.8.0": - version: 6.8.0 - resolution: "@metamask/snaps-execution-environments@npm:6.8.0" +"@metamask/snaps-execution-environments@npm:^6.9.0": + version: 6.9.0 + resolution: "@metamask/snaps-execution-environments@npm:6.9.0" dependencies: "@metamask/json-rpc-engine": "npm:^9.0.2" "@metamask/object-multiplex": "npm:^2.0.0" "@metamask/post-message-stream": "npm:^8.1.1" "@metamask/providers": "npm:^17.1.2" "@metamask/rpc-errors": "npm:^6.3.1" - "@metamask/snaps-sdk": "npm:^6.6.0" - "@metamask/snaps-utils": "npm:^8.2.0" + "@metamask/snaps-sdk": "npm:^6.7.0" + "@metamask/snaps-utils": "npm:^8.3.0" "@metamask/superstruct": "npm:^3.1.0" "@metamask/utils": "npm:^9.2.1" nanoid: "npm:^3.1.31" readable-stream: "npm:^3.6.2" - checksum: 10/579c51e37efa4efa9820d663cadd9e146084cf2eadfcae35a61c574f1e54a6ac2a86d7145d1bc9764da31920aabfd81beea47178be0d2226d42ad636e3513780 + checksum: 10/07aa1b10ac945c18d40b379a1665b20c1b55d6fa53fe9cdfe206b61c4a3bc6a19c4e2d68add62b662651600688a052af81d86326888b98e4bcaaed7576c0c999 languageName: node linkType: hard @@ -6333,32 +6333,32 @@ __metadata: languageName: node linkType: hard -"@metamask/snaps-rpc-methods@npm:^11.2.0": - version: 11.2.0 - resolution: "@metamask/snaps-rpc-methods@npm:11.2.0" +"@metamask/snaps-rpc-methods@npm:^11.3.0": + version: 11.3.0 + resolution: "@metamask/snaps-rpc-methods@npm:11.3.0" dependencies: "@metamask/key-tree": "npm:^9.1.2" "@metamask/permission-controller": "npm:^11.0.0" "@metamask/rpc-errors": "npm:^6.3.1" - "@metamask/snaps-sdk": "npm:^6.6.0" - "@metamask/snaps-utils": "npm:^8.2.0" + "@metamask/snaps-sdk": "npm:^6.7.0" + "@metamask/snaps-utils": "npm:^8.3.0" "@metamask/superstruct": "npm:^3.1.0" "@metamask/utils": "npm:^9.2.1" "@noble/hashes": "npm:^1.3.1" - checksum: 10/95aee0edf9295dabd16446192b0e24144bc1637dee78c54adfb5d5fb4dea8d7101ff8a614627d8ff0b08be437afb30656906aabfe59a4c27697d959beb14cd9c + checksum: 10/be00cf6688755bd51ff6936c6e0a7ca65df4b19794355ba9f6cec5ee6f115298854f16444d52c53d3b72c7a7a192565fbc92a44a29315d5adec66ef043c62157 languageName: node linkType: hard -"@metamask/snaps-sdk@npm:^6.6.0": - version: 6.6.0 - resolution: "@metamask/snaps-sdk@npm:6.6.0" +"@metamask/snaps-sdk@npm:^6.7.0": + version: 6.7.0 + resolution: "@metamask/snaps-sdk@npm:6.7.0" dependencies: "@metamask/key-tree": "npm:^9.1.2" "@metamask/providers": "npm:^17.1.2" "@metamask/rpc-errors": "npm:^6.3.1" "@metamask/superstruct": "npm:^3.1.0" "@metamask/utils": "npm:^9.2.1" - checksum: 10/509b5f695a9fe183061f001298985ac6fd3c54c55aecc9cbddfbdea9ff2e93dd9b601e5f3ad002e50f0a155dad81e52e796dec8645da1a7bb313e24f2107cdda + checksum: 10/1f3148f509e7212e40b615f9050dbb5a5085ae17cd2301f471b828b90a61902a3ae21f9ac520b3a2ffa291585823dd063486a314a2738cd86479b4358e39cfac languageName: node linkType: hard @@ -6393,9 +6393,9 @@ __metadata: languageName: node linkType: hard -"@metamask/snaps-utils@npm:^8.1.1, @metamask/snaps-utils@npm:^8.2.0": - version: 8.2.0 - resolution: "@metamask/snaps-utils@npm:8.2.0" +"@metamask/snaps-utils@npm:^8.1.1, @metamask/snaps-utils@npm:^8.3.0": + version: 8.3.0 + resolution: "@metamask/snaps-utils@npm:8.3.0" dependencies: "@babel/core": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" @@ -6405,7 +6405,7 @@ __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.6.0" + "@metamask/snaps-sdk": "npm:^6.7.0" "@metamask/superstruct": "npm:^3.1.0" "@metamask/utils": "npm:^9.2.1" "@noble/hashes": "npm:^1.3.1" @@ -6420,7 +6420,7 @@ __metadata: semver: "npm:^7.5.4" ses: "npm:^1.1.0" validate-npm-package-name: "npm:^5.0.0" - checksum: 10/6f38bf39c4c2561f13347859fdd8c0f319027f6819e17c899f5e6fa7a2d8b0ceb8eaadcb3f104cae68341e0cc20044688b815563e38dfa0cf60d4a2c77143d1b + checksum: 10/43844f4057d698088f03c30937e59bfeed86bfe05ec82a5c25248a0d0f4019994611060913d61751a692bf7791a374459b88f6c1a6f119f5f883069307e8278c languageName: node linkType: hard @@ -26146,11 +26146,11 @@ __metadata: "@metamask/selected-network-controller": "npm:^18.0.1" "@metamask/signature-controller": "npm:^19.0.0" "@metamask/smart-transactions-controller": "npm:^13.0.0" - "@metamask/snaps-controllers": "npm:^9.9.0" - "@metamask/snaps-execution-environments": "npm:^6.8.0" - "@metamask/snaps-rpc-methods": "npm:^11.2.0" - "@metamask/snaps-sdk": "npm:^6.6.0" - "@metamask/snaps-utils": "npm:^8.2.0" + "@metamask/snaps-controllers": "npm:^9.10.0" + "@metamask/snaps-execution-environments": "npm:^6.9.0" + "@metamask/snaps-rpc-methods": "npm:^11.3.0" + "@metamask/snaps-sdk": "npm:^6.7.0" + "@metamask/snaps-utils": "npm:^8.3.0" "@metamask/test-bundler": "npm:^1.0.0" "@metamask/test-dapp": "npm:^8.4.0" "@metamask/transaction-controller": "npm:^37.0.0" From 0e30d3a17e8aa639a45ca62e7fecfc1198e7f851 Mon Sep 17 00:00:00 2001 From: Hassan Malik Date: Mon, 30 Sep 2024 09:11:25 -0400 Subject: [PATCH 04/71] update notification controller, update raw snap notification type --- app/scripts/metamask-controller.js | 4 ++-- package.json | 2 +- ui/pages/notifications/snap/types/types.ts | 7 +++++++ 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 01d6e2d62a09..afe295a7a951 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -1397,11 +1397,11 @@ export default class MetamaskController extends EventEmitter { rateLimitTimeout: 300000, }, showInAppNotification: { - method: (origin, message) => { + method: (origin, notificationData) => { this.controllerMessenger.call( 'NotificationController:show', origin, - message, + notificationData, ); return null; diff --git a/package.json b/package.json index d54962b53b24..5867cb3c26ed 100644 --- a/package.json +++ b/package.json @@ -334,7 +334,7 @@ "@metamask/metamask-eth-abis": "^3.1.1", "@metamask/name-controller": "^8.0.0", "@metamask/network-controller": "patch:@metamask/network-controller@npm%3A21.0.0#~/.yarn/patches/@metamask-network-controller-npm-21.0.0-559aa8e395.patch", - "@metamask/notification-controller": "^6.0.0", + "@metamask/notification-controller": "^7.0.0", "@metamask/notification-services-controller": "^0.7.0", "@metamask/object-multiplex": "^2.0.0", "@metamask/obs-store": "^9.0.0", diff --git a/ui/pages/notifications/snap/types/types.ts b/ui/pages/notifications/snap/types/types.ts index 20a675b1e6d7..b4fee20411e9 100644 --- a/ui/pages/notifications/snap/types/types.ts +++ b/ui/pages/notifications/snap/types/types.ts @@ -1,8 +1,15 @@ export const SNAP = 'SNAP' as const; +export type SnapNotificationExpandedView = { + title: string; + interfaceId: string; + footerLink?: { href: string; text: string }; +}; + export type RawSnapNotification = { id: string; message: string; + expandedView?: SnapNotificationExpandedView; origin: string; createdDate: number; readDate?: number; From 3d5a9c4b8ba4abe9797b5b64159e09a0862d10da Mon Sep 17 00:00:00 2001 From: Hassan Malik Date: Mon, 30 Sep 2024 16:32:34 -0400 Subject: [PATCH 05/71] add snap notification modal --- .../snaps/snap-notification-modal/index.ts | 1 + .../snap-notification-modal.tsx | 103 ++++++++++++++++++ .../notification-components/snap/snap.tsx | 55 +++++++--- 3 files changed, 142 insertions(+), 17 deletions(-) create mode 100644 ui/components/app/snaps/snap-notification-modal/index.ts create mode 100644 ui/components/app/snaps/snap-notification-modal/snap-notification-modal.tsx diff --git a/ui/components/app/snaps/snap-notification-modal/index.ts b/ui/components/app/snaps/snap-notification-modal/index.ts new file mode 100644 index 000000000000..2b6e4d856ed4 --- /dev/null +++ b/ui/components/app/snaps/snap-notification-modal/index.ts @@ -0,0 +1 @@ +export { default } from './snap-notification-modal'; \ No newline at end of file diff --git a/ui/components/app/snaps/snap-notification-modal/snap-notification-modal.tsx b/ui/components/app/snaps/snap-notification-modal/snap-notification-modal.tsx new file mode 100644 index 000000000000..cb8650d0f605 --- /dev/null +++ b/ui/components/app/snaps/snap-notification-modal/snap-notification-modal.tsx @@ -0,0 +1,103 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import { Box, ButtonLink, Icon, IconName, IconSize, Modal, ModalContent, ModalHeader, ModalOverlay, Text } from '../../../component-library'; +import { AlignItems, BackgroundColor, BorderRadius, Display, FlexDirection, TextAlign, TextColor, TextVariant } from '../../../../helpers/constants/design-system'; +import { RawSnapNotification } from '../../../../pages/notifications/snap/types/types'; +import { hasProperty } from '@metamask/utils'; +import { SnapIcon } from '../snap-icon'; +import { getSnapMetadata } from '../../../../selectors'; +import { SnapUIMarkdown } from '../snap-ui-markdown'; +import { SnapUIRenderer } from '../snap-ui-renderer'; + +type SnapNotificationModalProps = { + handleClose: () => void; + isOpen: boolean; + data: RawSnapNotification; +} + +const SnapNotificationModal = ({ handleClose, isOpen, data }: SnapNotificationModalProps) => { + const { expandedView } = data; + const hasFooter = hasProperty(expandedView, 'footerLink'); + const { name: snapName } = useSelector((state) => + // @ts-expect-error incorrectly typed + getSnapMetadata(state, data.origin), + ); + + const SnapNotificationModalFooter = () => { + const { footerLink: { href, text } } = expandedView; + return ( + + {text} + + + ) + } + + const SnapNotificationContentHeader = () => { + return ( + + + + {snapName} + + + {data.message} + + + ) + } + + const SnapNotificationContent = () => { + return ( + + + + ) + } + + return ( + + + + + + {data.expandedView.title} + + + + + + + {hasFooter && } + + + ); +} + +export default SnapNotificationModal; \ No newline at end of file diff --git a/ui/pages/notifications/notification-components/snap/snap.tsx b/ui/pages/notifications/notification-components/snap/snap.tsx index 95ccb16e416f..7726cf32d3ed 100644 --- a/ui/pages/notifications/notification-components/snap/snap.tsx +++ b/ui/pages/notifications/notification-components/snap/snap.tsx @@ -1,6 +1,7 @@ -import React, { useContext } from 'react'; +import React, { useContext, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { useHistory } from 'react-router-dom'; +import { hasProperty } from '@metamask/utils'; import { MetaMetricsEventCategory, MetaMetricsEventName, @@ -11,6 +12,7 @@ import type { SnapNotification } from '../../snap/types/types'; import { getSnapsMetadata } from '../../../../selectors'; import { markNotificationsAsRead } from '../../../../store/actions'; import { getSnapRoute, getSnapName } from '../../../../helpers/utils/util'; +import SnapNotificationModal from '../../../../components/app/snaps/snap-notification-modal/snap-notification-modal'; type SnapComponentProps = { snapNotification: SnapNotification; @@ -20,11 +22,18 @@ export const SnapComponent = ({ snapNotification }: SnapComponentProps) => { const dispatch = useDispatch(); const history = useHistory(); const trackEvent = useContext(MetaMetricsContext); + const [isOpen, setIsOpen] = useState(false); const snapsMetadata = useSelector(getSnapsMetadata); const snapsNameGetter = getSnapName(snapsMetadata); + const hasExpandedView = hasProperty(snapNotification.data, 'expandedView'); + + const handleClose = () => { + setIsOpen(false); + }; + const handleSnapClick = () => { dispatch(markNotificationsAsRead([snapNotification.id])); trackEvent({ @@ -36,6 +45,9 @@ export const SnapComponent = ({ snapNotification }: SnapComponentProps) => { previously_read: snapNotification.isRead, }, }); + if (hasExpandedView) { + setIsOpen(true); + } }; const handleSnapButton = () => { @@ -53,21 +65,30 @@ export const SnapComponent = ({ snapNotification }: SnapComponentProps) => { }; return ( - + <> + {hasExpandedView && ( + + )} + + ); }; From 306d898aa0f1e9f9512493d2457c35f34d57ea5c Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Wed, 2 Oct 2024 10:14:07 +0200 Subject: [PATCH 06/71] feat(snaps): Connect `getCurrencyRate` hook to `multichainRateController` (#27489) --- app/scripts/metamask-controller.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 30112ee61a3c..3ccab3a3cd69 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -5928,6 +5928,19 @@ export default class MetamaskController extends EventEmitter { this.controllerMessenger, 'SnapController:getAll', ), + getCurrencyRate: (currency) => { + const rate = this.multichainRatesController.state.rates[currency]; + const { fiatCurrency } = this.multichainRatesController.state; + + if (!rate) { + return undefined; + } + + return { + ...rate, + currency: fiatCurrency, + }; + }, ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) hasPermission: this.permissionController.hasPermission.bind( this.permissionController, From f375215a52a79e261fe8b9791459798a7528bbdb Mon Sep 17 00:00:00 2001 From: Hassan Malik <41640681+hmalik88@users.noreply.github.com> Date: Fri, 4 Oct 2024 12:44:47 -0400 Subject: [PATCH 07/71] feat: Integrate MetaMask links into Snaps `Link` component (#27377) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? Previously, developers couldn't navigate to parts of the extension with the existing functionality provided to them through snaps UI 2. What is the improvement/solution? The Snaps `Link` component now checks for if the url is a MetaMask url and navigates to the proper path accordingly. ## **Screenshots/Recordings** ### **After** ## **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. --- app/scripts/metamask-controller.js | 1 + .../app/snaps/snap-ui-link/snap-ui-link.js | 23 ++++++++++++++++++- ui/hooks/snaps/useSnapNavigation.js | 22 ++++++++++++++++++ 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 ui/hooks/snaps/useSnapNavigation.js diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 3ccab3a3cd69..ffcd750a2f2e 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -1462,6 +1462,7 @@ export default class MetamaskController extends EventEmitter { `${this.phishingController.name}:testOrigin`, `${this.approvalController.name}:hasRequest`, `${this.approvalController.name}:acceptRequest`, + `${this.snapController.name}:get`, ], }); diff --git a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js index 46439c523a68..a1289543fd45 100644 --- a/ui/components/app/snaps/snap-ui-link/snap-ui-link.js +++ b/ui/components/app/snaps/snap-ui-link/snap-ui-link.js @@ -9,18 +9,39 @@ import { IconSize, } from '../../../component-library'; import SnapLinkWarning from '../snap-link-warning'; +import useSnapNavigation from '../../../../hooks/snaps/useSnapNavigation'; export const SnapUILink = ({ href, children }) => { const [isOpen, setIsOpen] = useState(false); + const isMetaMaskUrl = href.startsWith('metamask:'); + const { navigate } = useSnapNavigation(); + const handleLinkClick = () => { - setIsOpen(true); + if (isMetaMaskUrl) { + navigate(href); + } else { + setIsOpen(true); + } }; const handleModalClose = () => { setIsOpen(false); }; + if (isMetaMaskUrl) { + return ( + + {children} + + ); + } + return ( <> diff --git a/ui/hooks/snaps/useSnapNavigation.js b/ui/hooks/snaps/useSnapNavigation.js new file mode 100644 index 000000000000..00c49dc94d27 --- /dev/null +++ b/ui/hooks/snaps/useSnapNavigation.js @@ -0,0 +1,22 @@ +import { useHistory } from 'react-router-dom'; +import { parseMetaMaskUrl } from '@metamask/snaps-utils'; +import { getSnapRoute } from '../../helpers/utils/util'; + +const useSnapNavigation = () => { + const history = useHistory(); + const navigate = (url) => { + let path; + const linkData = parseMetaMaskUrl(url); + if (linkData.snapId) { + path = getSnapRoute(linkData.snapId); + } else { + path = linkData.path; + } + history.push(path); + }; + return { + navigate, + }; +}; + +export default useSnapNavigation; From aad36dbd0e44d63e3ad9d621e783cba3f6dc6148 Mon Sep 17 00:00:00 2001 From: Hassan Malik Date: Mon, 7 Oct 2024 23:51:50 -0400 Subject: [PATCH 08/71] integrate snaps expanded view into notification system --- .../snaps/snap-notification-modal/index.ts | 1 - .../snap-notification-modal.tsx | 103 ------------ .../notification-detail-button.tsx | 36 +++-- .../useNotifications.ts | 13 +- .../notification-details-body.tsx | 8 +- .../notification-details-footer.tsx | 5 + .../notification-components/index.ts | 16 +- .../notification-components/node-guard.ts | 5 +- .../notification-components/snap/snap.tsx | 148 +++++++++--------- .../types/notifications/notifications.ts | 25 ++- .../notifications/notifications-list-item.tsx | 22 ++- ui/pages/notifications/notifications-list.tsx | 5 - ui/pages/notifications/notifications.tsx | 7 +- ui/pages/notifications/snap/types/types.ts | 4 +- ui/pages/notifications/snap/utils/utils.ts | 4 +- ui/store/actions.ts | 3 +- 16 files changed, 192 insertions(+), 213 deletions(-) delete mode 100644 ui/components/app/snaps/snap-notification-modal/index.ts delete mode 100644 ui/components/app/snaps/snap-notification-modal/snap-notification-modal.tsx diff --git a/ui/components/app/snaps/snap-notification-modal/index.ts b/ui/components/app/snaps/snap-notification-modal/index.ts deleted file mode 100644 index 2b6e4d856ed4..000000000000 --- a/ui/components/app/snaps/snap-notification-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './snap-notification-modal'; \ No newline at end of file diff --git a/ui/components/app/snaps/snap-notification-modal/snap-notification-modal.tsx b/ui/components/app/snaps/snap-notification-modal/snap-notification-modal.tsx deleted file mode 100644 index cb8650d0f605..000000000000 --- a/ui/components/app/snaps/snap-notification-modal/snap-notification-modal.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import { Box, ButtonLink, Icon, IconName, IconSize, Modal, ModalContent, ModalHeader, ModalOverlay, Text } from '../../../component-library'; -import { AlignItems, BackgroundColor, BorderRadius, Display, FlexDirection, TextAlign, TextColor, TextVariant } from '../../../../helpers/constants/design-system'; -import { RawSnapNotification } from '../../../../pages/notifications/snap/types/types'; -import { hasProperty } from '@metamask/utils'; -import { SnapIcon } from '../snap-icon'; -import { getSnapMetadata } from '../../../../selectors'; -import { SnapUIMarkdown } from '../snap-ui-markdown'; -import { SnapUIRenderer } from '../snap-ui-renderer'; - -type SnapNotificationModalProps = { - handleClose: () => void; - isOpen: boolean; - data: RawSnapNotification; -} - -const SnapNotificationModal = ({ handleClose, isOpen, data }: SnapNotificationModalProps) => { - const { expandedView } = data; - const hasFooter = hasProperty(expandedView, 'footerLink'); - const { name: snapName } = useSelector((state) => - // @ts-expect-error incorrectly typed - getSnapMetadata(state, data.origin), - ); - - const SnapNotificationModalFooter = () => { - const { footerLink: { href, text } } = expandedView; - return ( - - {text} - - - ) - } - - const SnapNotificationContentHeader = () => { - return ( - - - - {snapName} - - - {data.message} - - - ) - } - - const SnapNotificationContent = () => { - return ( - - - - ) - } - - return ( - - - - - - {data.expandedView.title} - - - - - - - {hasFooter && } - - - ); -} - -export default SnapNotificationModal; \ No newline at end of file diff --git a/ui/components/multichain/notification-detail-button/notification-detail-button.tsx b/ui/components/multichain/notification-detail-button/notification-detail-button.tsx index e9b2f8d21903..034fda825692 100644 --- a/ui/components/multichain/notification-detail-button/notification-detail-button.tsx +++ b/ui/components/multichain/notification-detail-button/notification-detail-button.tsx @@ -12,10 +12,13 @@ import { IconName, } from '../../component-library'; import { BlockSize } from '../../../helpers/constants/design-system'; +import { SnapNotification } from '../../../pages/notifications/snap/types/types'; +import { TRIGGER_TYPES } from '../../../pages/notifications/notification-components'; +import useSnapNavigation from '../../../hooks/snaps/useSnapNavigation'; -type Notification = NotificationServicesController.Types.INotification; - -const { TRIGGER_TYPES } = NotificationServicesController.Constants; +type Notification = + | NotificationServicesController.Types.INotification + | SnapNotification; type NotificationDetailButtonProps = { notification: Notification; @@ -37,6 +40,16 @@ export const NotificationDetailButton = ({ endIconName = true, }: NotificationDetailButtonProps) => { const trackEvent = useContext(MetaMetricsContext); + const { navigate } = useSnapNavigation(); + const isMetaMaskUrl = href.startsWith('metamask:'); + + // this logic can be expanded once this detail button is used outside of the current use cases + const getClickedItem = () => { + if (notification.type === TRIGGER_TYPES.FEATURES_ANNOUNCEMENT) { + return 'block_explorer'; + } + return isExternal ? 'external_link' : 'internal_link'; + }; const onClick = () => { trackEvent({ @@ -45,20 +58,25 @@ export const NotificationDetailButton = ({ properties: { notification_id: notification.id, notification_type: notification.type, - ...(notification.type !== TRIGGER_TYPES.FEATURES_ANNOUNCEMENT && { - chain_id: notification?.chain_id, - }), - clicked_item: 'block_explorer', + ...(notification.type !== TRIGGER_TYPES.FEATURES_ANNOUNCEMENT && + notification.type !== TRIGGER_TYPES.SNAP && { + chain_id: notification?.chain_id, + }), + clicked_item: getClickedItem(), }, }); + + if (notification.type === TRIGGER_TYPES.SNAP && isMetaMaskUrl) { + navigate(href); + } }; return ( + `; diff --git a/ui/components/app/confirm/info/row/__snapshots__/currency.test.tsx.snap b/ui/components/app/confirm/info/row/__snapshots__/currency.test.tsx.snap index 9f7014dea03e..e98ec1921081 100644 --- a/ui/components/app/confirm/info/row/__snapshots__/currency.test.tsx.snap +++ b/ui/components/app/confirm/info/row/__snapshots__/currency.test.tsx.snap @@ -12,7 +12,6 @@ exports[`ConfirmInfoRowCurrency should display in currency passed 1`] = ` > $82.65 @@ -38,7 +37,6 @@ exports[`ConfirmInfoRowCurrency should display value in user preferred currency > 0.14861879 diff --git a/ui/components/app/confirm/info/row/__snapshots__/expandable-row.test.tsx.snap b/ui/components/app/confirm/info/row/__snapshots__/expandable-row.test.tsx.snap index 3559558bc2cb..c3958d886710 100644 --- a/ui/components/app/confirm/info/row/__snapshots__/expandable-row.test.tsx.snap +++ b/ui/components/app/confirm/info/row/__snapshots__/expandable-row.test.tsx.snap @@ -22,16 +22,16 @@ exports[`ConfirmInfoExpandableRow should match snapshot 1`] = `
+ Expandable Value - Expandable Value
- +
diff --git a/ui/components/app/confirm/info/row/constants.ts b/ui/components/app/confirm/info/row/constants.ts index 415358aa5252..f260f9bce282 100644 --- a/ui/components/app/confirm/info/row/constants.ts +++ b/ui/components/app/confirm/info/row/constants.ts @@ -3,9 +3,8 @@ export const TEST_ADDRESS = '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1'; export enum RowAlertKey { EstimatedFee = 'estimatedFee', SigningInWith = 'signingInWith', - RequestFrom = 'requestFrom', - Resimulation = 'resimulation', Speed = 'speed', + RequestFrom = 'requestFrom', } export enum AlertActionKey { diff --git a/ui/components/app/confirm/info/row/copy-icon.tsx b/ui/components/app/confirm/info/row/copy-icon.tsx index 16f6604a53d4..ce349089dac3 100644 --- a/ui/components/app/confirm/info/row/copy-icon.tsx +++ b/ui/components/app/confirm/info/row/copy-icon.tsx @@ -1,20 +1,12 @@ -import React, { CSSProperties, useCallback } from 'react'; +import React, { useCallback } from 'react'; import { useCopyToClipboard } from '../../../../../hooks/useCopyToClipboard'; import { IconColor } from '../../../../../helpers/constants/design-system'; -import { - ButtonIcon, - ButtonIconSize, - IconName, -} from '../../../../component-library'; +import { Icon, IconName, IconSize } from '../../../../component-library'; type CopyCallback = (text: string) => void; -export const CopyIcon: React.FC<{ - copyText: string; - color?: IconColor; - style?: CSSProperties; -}> = ({ copyText, color, style = {} }) => { +export const CopyIcon: React.FC<{ copyText: string }> = ({ copyText }) => { const [copied, handleCopy] = useCopyToClipboard(); const handleClick = useCallback(async () => { @@ -22,19 +14,12 @@ export const CopyIcon: React.FC<{ }, [copyText]); return ( - ); }; diff --git a/ui/components/app/confirm/info/row/expandable-row.tsx b/ui/components/app/confirm/info/row/expandable-row.tsx index a6e88fc17a81..23fa7f7d5fd0 100644 --- a/ui/components/app/confirm/info/row/expandable-row.tsx +++ b/ui/components/app/confirm/info/row/expandable-row.tsx @@ -40,19 +40,19 @@ export const ConfirmInfoExpandableRow = ( <> + {children} - {children} { ); expect(container).toMatchSnapshot(); }); - - it('should be expandable when collapsed is true', () => { - render( - - Some text - , - ); - expect(screen.queryByText('Some text')).not.toBeInTheDocument(); - fireEvent.click(screen.getByTestId('sectionCollapseButton')); - expect(screen.queryByText('Some text')).toBeInTheDocument(); - }); }); diff --git a/ui/components/app/confirm/info/row/row.tsx b/ui/components/app/confirm/info/row/row.tsx index 63d2242461ea..7616ccae5f21 100644 --- a/ui/components/app/confirm/info/row/row.tsx +++ b/ui/components/app/confirm/info/row/row.tsx @@ -1,9 +1,7 @@ -import React, { createContext, useState } from 'react'; +import React, { createContext } from 'react'; import Tooltip from '../../../../ui/tooltip/tooltip'; import { Box, - ButtonIcon, - ButtonIconSize, Icon, IconName, IconSize, @@ -42,7 +40,6 @@ export type ConfirmInfoRowProps = { copyEnabled?: boolean; copyText?: string; 'data-testid'?: string; - collapsed?: boolean; }; const BACKGROUND_COLORS = { @@ -82,101 +79,71 @@ export const ConfirmInfoRow: React.FC = ({ labelChildren, color, copyEnabled = false, - copyText, + copyText = undefined, 'data-testid': dataTestId, - collapsed, -}) => { - const [expanded, setExpanded] = useState(!collapsed); - - const isCollapsible = collapsed !== undefined; - - return ( - +}) => ( + + + {copyEnabled && } - {copyEnabled && ( - - )} - {isCollapsible && ( - setExpanded(!expanded)} - data-testid="sectionCollapseButton" - ariaLabel="collapse-button" - /> - )} - - - - {label} - - {labelChildren} - {!labelChildren && tooltip?.length && ( - - - - )} - + + + {label} + + {labelChildren} + {!labelChildren && tooltip?.length && ( + + + + )} - {expanded && - (typeof children === 'string' ? ( - - {children} - - ) : ( - children - ))} - - ); -}; + {typeof children === 'string' ? ( + + {children} + + ) : ( + children + )} + + +); diff --git a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap index 2482a916a5a9..f9823b5af9ac 100644 --- a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap +++ b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap @@ -36,7 +36,6 @@ exports[`CurrencyInput Component rendering should disable unit input 1`] = ` > $0.00 @@ -90,7 +89,6 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va > 0.004327880204275946 @@ -185,7 +183,6 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va > $231.06 @@ -240,7 +237,6 @@ exports[`CurrencyInput Component rendering should render properly without a suff > $0.00 diff --git a/ui/components/app/detected-token/detected-token-details/detected-token-details.js b/ui/components/app/detected-token/detected-token-details/detected-token-details.js index fe8f12618305..3fb3219630a1 100644 --- a/ui/components/app/detected-token/detected-token-details/detected-token-details.js +++ b/ui/components/app/detected-token/detected-token-details/detected-token-details.js @@ -1,23 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; -import { - AvatarNetwork, - AvatarNetworkSize, - AvatarToken, - AvatarTokenSize, - BadgeWrapper, - Box, -} from '../../../component-library'; + +import { Box } from '../../../component-library'; +import Identicon from '../../../ui/identicon'; import DetectedTokenValues from '../detected-token-values/detected-token-values'; import DetectedTokenAddress from '../detected-token-address/detected-token-address'; import DetectedTokenAggregators from '../detected-token-aggregators/detected-token-aggregators'; import { Display } from '../../../../helpers/constants/design-system'; -import { - getCurrentNetwork, - getTestNetworkBackgroundColor, - getTokenList, -} from '../../../../selectors'; +import { getTokenList } from '../../../../selectors'; const DetectedTokenDetails = ({ token, @@ -26,8 +17,6 @@ const DetectedTokenDetails = ({ }) => { const tokenList = useSelector(getTokenList); const tokenData = tokenList[token.address?.toLowerCase()]; - const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor); - const currentNetwork = useSelector(getCurrentNetwork); return ( - - } - marginRight={2} + - - - + address={token.address} + diameter={40} + /> <0.000001 @@ -27,7 +26,6 @@ exports[`CancelTransactionGasFee Component should render 1`] = ` > <0.000001 diff --git a/ui/components/app/name/name-details/__snapshots__/name-details.test.tsx.snap b/ui/components/app/name/name-details/__snapshots__/name-details.test.tsx.snap index da6f598dfa5e..cfa08b3eee01 100644 --- a/ui/components/app/name/name-details/__snapshots__/name-details.test.tsx.snap +++ b/ui/components/app/name/name-details/__snapshots__/name-details.test.tsx.snap @@ -706,50 +706,12 @@ exports[`NameDetails renders with recognized name 1`] = `
-
-
-
- - - - - -
-
-
+

diff --git a/ui/components/app/name/name-details/name-details.test.tsx b/ui/components/app/name/name-details/name-details.test.tsx index 8043d432d526..0f0df9f5b5f6 100644 --- a/ui/components/app/name/name-details/name-details.test.tsx +++ b/ui/components/app/name/name-details/name-details.test.tsx @@ -1,21 +1,18 @@ +import React from 'react'; import { NameType } from '@metamask/name-controller'; +import configureStore from 'redux-mock-store'; import { fireEvent } from '@testing-library/react'; -import React from 'react'; import { act } from 'react-dom/test-utils'; -import { useDispatch, useSelector } from 'react-redux'; -import configureStore from 'redux-mock-store'; +import { useDispatch } from 'react-redux'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import { setName, updateProposedNames } from '../../../../store/actions'; +import { MetaMetricsContext } from '../../../../contexts/metametrics'; import { MetaMetricsEventCategory, MetaMetricsEventName, } from '../../../../../shared/constants/metametrics'; import { CHAIN_IDS } from '../../../../../shared/constants/network'; -import { renderWithProvider } from '../../../../../test/lib/render-helpers'; import { mockNetworkState } from '../../../../../test/stub/networks'; -import { MetaMetricsContext } from '../../../../contexts/metametrics'; -import { getDomainResolutions } from '../../../../ducks/domains'; -import { getNames, getNameSources } from '../../../../selectors'; -import { getNftContractsByAddressByChain } from '../../../../selectors/nft'; -import { setName, updateProposedNames } from '../../../../store/actions'; import NameDetails from './name-details'; jest.mock('../../../../store/actions', () => ({ @@ -26,7 +23,6 @@ jest.mock('../../../../store/actions', () => ({ jest.mock('react-redux', () => ({ ...jest.requireActual('react-redux'), useDispatch: jest.fn(), - useSelector: jest.fn(), })); jest.useFakeTimers(); @@ -154,74 +150,10 @@ describe('NameDetails', () => { const setNameMock = jest.mocked(setName); const updateProposedNamesMock = jest.mocked(updateProposedNames); const useDispatchMock = jest.mocked(useDispatch); - const useSelectorMock = jest.mocked(useSelector); beforeEach(() => { jest.resetAllMocks(); useDispatchMock.mockReturnValue(jest.fn()); - - useSelectorMock.mockImplementation((selector) => { - if (selector === getNames) { - return { - [NameType.ETHEREUM_ADDRESS]: { - [ADDRESS_SAVED_NAME_MOCK]: { - [VARIATION_MOCK]: { - name: SAVED_NAME_MOCK, - proposedNames: { - [SOURCE_ID_MOCK]: { - proposedNames: [PROPOSED_NAME_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - [SOURCE_ID_2_MOCK]: { - proposedNames: [PROPOSED_NAME_2_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - }, - }, - }, - [ADDRESS_NO_NAME_MOCK]: { - [VARIATION_MOCK]: { - name: SAVED_NAME_MOCK, - proposedNames: { - [SOURCE_ID_MOCK]: { - proposedNames: [PROPOSED_NAME_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - [SOURCE_ID_2_MOCK]: { - proposedNames: [PROPOSED_NAME_2_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - }, - }, - }, - }, - }; - } else if (selector === getNftContractsByAddressByChain) { - return { - [VARIATION_MOCK]: { - [ADDRESS_RECOGNIZED_MOCK]: { - name: 'iZUMi Bond USD', - }, - }, - }; - } else if (selector === getDomainResolutions) { - return [ - { - resolvedAddress: ADDRESS_SAVED_NAME_MOCK, - domainName: 'Domain name', - }, - ]; - } else if (selector === getNameSources) { - return { - [SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' }, - }; - } - return undefined; - }); }); it('renders when no address value is passed', () => { @@ -239,33 +171,6 @@ describe('NameDetails', () => { }); it('renders with no saved name', () => { - useSelectorMock.mockImplementation((selector) => { - if (selector === getNames) { - return { - [NameType.ETHEREUM_ADDRESS]: {}, - }; - } else if (selector === getNftContractsByAddressByChain) { - return { - [VARIATION_MOCK]: { - [ADDRESS_RECOGNIZED_MOCK]: { - name: 'iZUMi Bond USD', - }, - }, - }; - } else if (selector === getDomainResolutions) { - return [ - { - resolvedAddress: ADDRESS_SAVED_NAME_MOCK, - }, - ]; - } else if (selector === getNameSources) { - return { - [SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' }, - }; - } - return undefined; - }); - const { baseElement } = renderWithProvider( { }); it('sends created event', async () => { - useSelectorMock.mockImplementation((selector) => { - if (selector === getNames) { - return { - [NameType.ETHEREUM_ADDRESS]: { - [ADDRESS_NO_NAME_MOCK]: { - [VARIATION_MOCK]: { - proposedNames: { - [SOURCE_ID_MOCK]: { - proposedNames: [PROPOSED_NAME_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - [SOURCE_ID_2_MOCK]: { - proposedNames: [PROPOSED_NAME_2_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - }, - }, - }, - }, - }; - } else if (selector === getNftContractsByAddressByChain) { - return { - [VARIATION_MOCK]: { - [ADDRESS_RECOGNIZED_MOCK]: { - name: 'iZUMi Bond USD', - }, - }, - }; - } else if (selector === getDomainResolutions) { - return [ - { - resolvedAddress: ADDRESS_SAVED_NAME_MOCK, - }, - ]; - } else if (selector === getNameSources) { - return { - [SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' }, - }; - } - return undefined; - }); - const trackEventMock = jest.fn(); const component = renderWithProvider( @@ -563,7 +424,7 @@ describe('NameDetails', () => { await saveNameUsingDropdown(component, PROPOSED_NAME_MOCK); - expect(trackEventMock).toHaveBeenNthCalledWith(2, { + expect(trackEventMock).toHaveBeenCalledWith({ event: MetaMetricsEventName.PetnameCreated, category: MetaMetricsEventCategory.Petnames, properties: { @@ -575,69 +436,6 @@ describe('NameDetails', () => { }); it('sends updated event', async () => { - useSelectorMock.mockImplementation((selector) => { - if (selector === getNames) { - return { - [NameType.ETHEREUM_ADDRESS]: { - [ADDRESS_SAVED_NAME_MOCK]: { - [CHAIN_ID_MOCK]: { - proposedNames: { - [SOURCE_ID_MOCK]: { - proposedNames: [PROPOSED_NAME_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - [SOURCE_ID_2_MOCK]: { - proposedNames: [PROPOSED_NAME_2_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - }, - name: SAVED_NAME_MOCK, - sourceId: SOURCE_ID_MOCK, - }, - }, - [ADDRESS_NO_NAME_MOCK]: { - [CHAIN_ID_MOCK]: { - proposedNames: { - [SOURCE_ID_MOCK]: { - proposedNames: [PROPOSED_NAME_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - [SOURCE_ID_2_MOCK]: { - proposedNames: [PROPOSED_NAME_2_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - }, - name: null, - }, - }, - }, - }; - } else if (selector === getNftContractsByAddressByChain) { - return { - [VARIATION_MOCK]: { - [ADDRESS_RECOGNIZED_MOCK]: { - name: 'iZUMi Bond USD', - }, - }, - }; - } else if (selector === getDomainResolutions) { - return [ - { - resolvedAddress: ADDRESS_SAVED_NAME_MOCK, - }, - ]; - } else if (selector === getNameSources) { - return { - [SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' }, - }; - } - return undefined; - }); - const trackEventMock = jest.fn(); const component = renderWithProvider( @@ -654,7 +452,7 @@ describe('NameDetails', () => { await saveNameUsingDropdown(component, PROPOSED_NAME_2_MOCK); - expect(trackEventMock).toHaveBeenNthCalledWith(2, { + expect(trackEventMock).toHaveBeenCalledWith({ event: MetaMetricsEventName.PetnameUpdated, category: MetaMetricsEventCategory.Petnames, properties: { @@ -667,69 +465,6 @@ describe('NameDetails', () => { }); it('sends deleted event', async () => { - useSelectorMock.mockImplementation((selector) => { - if (selector === getNames) { - return { - [NameType.ETHEREUM_ADDRESS]: { - [ADDRESS_SAVED_NAME_MOCK]: { - [CHAIN_ID_MOCK]: { - proposedNames: { - [SOURCE_ID_MOCK]: { - proposedNames: [PROPOSED_NAME_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - [SOURCE_ID_2_MOCK]: { - proposedNames: [PROPOSED_NAME_2_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - }, - name: SAVED_NAME_MOCK, - sourceId: SOURCE_ID_MOCK, - }, - }, - [ADDRESS_NO_NAME_MOCK]: { - [CHAIN_ID_MOCK]: { - proposedNames: { - [SOURCE_ID_MOCK]: { - proposedNames: [PROPOSED_NAME_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - [SOURCE_ID_2_MOCK]: { - proposedNames: [PROPOSED_NAME_2_MOCK], - lastRequestTime: null, - retryDelay: null, - }, - }, - name: null, - }, - }, - }, - }; - } else if (selector === getNftContractsByAddressByChain) { - return { - [VARIATION_MOCK]: { - [ADDRESS_RECOGNIZED_MOCK]: { - name: 'iZUMi Bond USD', - }, - }, - }; - } else if (selector === getDomainResolutions) { - return [ - { - resolvedAddress: ADDRESS_SAVED_NAME_MOCK, - }, - ]; - } else if (selector === getNameSources) { - return { - [SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' }, - }; - } - return undefined; - }); - const trackEventMock = jest.fn(); const component = renderWithProvider( @@ -746,7 +481,7 @@ describe('NameDetails', () => { await saveNameUsingTextField(component, ''); - expect(trackEventMock).toHaveBeenNthCalledWith(2, { + expect(trackEventMock).toHaveBeenCalledWith({ event: MetaMetricsEventName.PetnameDeleted, category: MetaMetricsEventCategory.Petnames, properties: { diff --git a/ui/components/app/name/name.stories.tsx b/ui/components/app/name/name.stories.tsx index 732c9059b530..fb23334a8776 100644 --- a/ui/components/app/name/name.stories.tsx +++ b/ui/components/app/name/name.stories.tsx @@ -3,75 +3,108 @@ import React from 'react'; import { NameType } from '@metamask/name-controller'; import { Provider } from 'react-redux'; import configureStore from '../../../store/store'; -import Name, { NameProps } from './name'; -import mockState from '../../../../test/data/mock-state.json'; -import { - EXPERIENCES_TYPE, - FIRST_PARTY_CONTRACT_NAMES, -} from '../../../../shared/constants/first-party-contracts'; -import { cloneDeep } from 'lodash'; +import Name from './name'; +import { mockNetworkState } from '../../../../test/stub/networks'; -const ADDRESS_MOCK = '0xc0ffee254729296a45a3885639ac7e10f9d54978'; -const ADDRESS_NFT_MOCK = '0xc0ffee254729296a45a3885639ac7e10f9d54979'; -const VARIATION_MOCK = '0x1'; -const NAME_MOCK = 'Saved Name'; +const addressNoSavedNameMock = '0xc0ffee254729296a45a3885639ac7e10f9d54978'; +const addressSavedNameMock = '0xc0ffee254729296a45a3885639ac7e10f9d54977'; +const addressSavedTokenMock = '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d'; +const addressUnsavedTokenMock = '0x0a5e677a6a24b2f1a2bf4f3bffc443231d2fdec8'; +const chainIdMock = '0x1'; -const ADDRESS_FIRST_PARTY_MOCK = - FIRST_PARTY_CONTRACT_NAMES[EXPERIENCES_TYPE.METAMASK_BRIDGE][ - VARIATION_MOCK - ].toLowerCase(); - -const PROPOSED_NAMES_MOCK = { - ens: { - proposedNames: ['test.eth'], - lastRequestTime: 123, - retryDelay: null, - }, - etherscan: { - proposedNames: ['TestContract'], - lastRequestTime: 123, - retryDelay: null, - }, - token: { - proposedNames: ['Test Token'], - lastRequestTime: 123, - retryDelay: null, - }, - lens: { - proposedNames: ['test.lens'], - lastRequestTime: 123, - retryDelay: null, - }, -}; - -const STATE_MOCK = { - ...mockState, +const storeMock = configureStore({ metamask: { - ...mockState.metamask, + ...mockNetworkState({chainId: chainIdMock}), useTokenDetection: true, - tokensChainsCache: {}, + tokenList: { + '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d': { + address: '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d', + symbol: 'IUSD', + name: 'iZUMi Bond USD', + iconUrl: + 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d.png', + }, + '0x0a5e677a6a24b2f1a2bf4f3bffc443231d2fdec8': { + address: '0x0a5e677a6a24b2f1a2bf4f3bffc443231d2fdec8', + symbol: 'USX', + name: 'dForce USD', + iconUrl: + 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x0a5e677a6a24b2f1a2bf4f3bffc443231d2fdec8.png', + }, + }, names: { [NameType.ETHEREUM_ADDRESS]: { - [ADDRESS_MOCK]: { - [VARIATION_MOCK]: { - proposedNames: PROPOSED_NAMES_MOCK, + [addressNoSavedNameMock]: { + [chainIdMock]: { + proposedNames: { + ens: { + proposedNames: ['test.eth'], + lastRequestTime: 123, + retryDelay: null, + }, + etherscan: { + proposedNames: ['TestContract'], + lastRequestTime: 123, + retryDelay: null, + }, + token: { + proposedNames: ['Test Token'], + lastRequestTime: 123, + retryDelay: null, + }, + lens: { + proposedNames: ['test.lens'], + lastRequestTime: 123, + retryDelay: null, + }, + }, }, }, - [ADDRESS_NFT_MOCK]: { - [VARIATION_MOCK]: { - proposedNames: PROPOSED_NAMES_MOCK, + [addressSavedNameMock]: { + [chainIdMock]: { + proposedNames: { + ens: { + proposedNames: ['test.eth'], + lastRequestTime: 123, + retryDelay: null, + }, + etherscan: { + proposedNames: ['TestContract'], + lastRequestTime: 123, + retryDelay: null, + }, + token: { + proposedNames: ['Test Token'], + lastRequestTime: 123, + retryDelay: null, + }, + lens: { + proposedNames: ['test.lens'], + lastRequestTime: 123, + retryDelay: null, + }, + }, + name: 'Test Token', + sourceId: 'token', }, }, - [ADDRESS_FIRST_PARTY_MOCK]: { - [VARIATION_MOCK]: { - proposedNames: PROPOSED_NAMES_MOCK, + [addressSavedTokenMock]: { + [chainIdMock]: { + proposedNames: {}, + name: 'Saved Token Name', + sourceId: 'token', }, }, }, }, - nameSources: {}, + nameSources: { + ens: { label: 'Ethereum Name Service (ENS)' }, + etherscan: { label: 'Etherscan (Verified Contract Name)' }, + token: { label: 'Blockchain (Token Name)' }, + lens: { label: 'Lens Protocol' }, + }, }, -}; +}); /** * Displays the saved name for a raw value such as an Ethereum address.

@@ -92,10 +125,6 @@ export default { description: `The type of value.

Limited to the values in the \`NameType\` enum.`, }, - variation: { - control: 'text', - description: `The variation of the value.

For example, the chain ID if the type is Ethereum address.`, - }, disableEdit: { control: 'boolean', description: `Whether to prevent the modal from opening when the component is clicked.`, @@ -105,141 +134,68 @@ export default { }, }, args: { - value: ADDRESS_MOCK, + value: addressNoSavedNameMock, type: NameType.ETHEREUM_ADDRESS, - variation: VARIATION_MOCK, disableEdit: false, }, - render: ({ state, ...args }) => { - const finalState = cloneDeep(STATE_MOCK); - state?.(finalState); - - return ( - - - - ); - }, + decorators: [(story) => {story()}], }; +// eslint-disable-next-line jsdoc/require-param /** * No name has been saved for the value and type. */ -export const NoSavedName = { - name: 'No Saved Name', - args: { - value: ADDRESS_MOCK, - type: NameType.ETHEREUM_ADDRESS, - variation: VARIATION_MOCK, - }, +export const DefaultStory = (args) => { + return ; }; +DefaultStory.storyName = 'No Saved Name'; + /** * A name was previously saved for this value and type.

* The component will still display a modal when clicked to edit the name. */ -export const SavedNameStory = { - name: 'Saved Name', - args: { - value: ADDRESS_MOCK, - type: NameType.ETHEREUM_ADDRESS, - variation: VARIATION_MOCK, - state: (state) => { - state.metamask.names[NameType.ETHEREUM_ADDRESS][ADDRESS_MOCK][ - VARIATION_MOCK - ].name = NAME_MOCK; - }, - }, +export const SavedNameStory = () => { + return ; }; +SavedNameStory.storyName = 'Saved Name'; + /** * No name was previously saved for this recognized token.

* The component will still display a modal when clicked to edit the name. */ -export const DefaultTokenNameStory = { - name: 'Default ERC-20 Token Name', - args: { - value: ADDRESS_MOCK, - type: NameType.ETHEREUM_ADDRESS, - variation: VARIATION_MOCK, - state: (state) => { - state.metamask.tokensChainsCache = { - [VARIATION_MOCK]: { - data: { - [ADDRESS_MOCK]: { - address: ADDRESS_MOCK, - symbol: 'IUSD', - name: 'iZUMi Bond USD', - iconUrl: - 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d.png', - }, - }, - }, - }; - }, - }, +export const UnsavedTokenNameStory = () => { + return ( + + ); }; -/** - * No name was previously saved for this watched NFT.

- * The component will still display a modal when clicked to edit the name. - */ -export const DefaultWatchedNFTNameStory = { - name: 'Default Watched NFT Name', - args: { - value: ADDRESS_MOCK, - type: NameType.ETHEREUM_ADDRESS, - variation: VARIATION_MOCK, - state: (state) => { - state.metamask.allNftContracts = { - '0x123': { - [VARIATION_MOCK]: [ - { - address: ADDRESS_MOCK, - name: 'Everything I Own', - }, - ], - }, - }; - }, - }, -}; +UnsavedTokenNameStory.storyName = 'Unsaved Token Name'; /** - * No name was previously saved for this recognized NFT.

+ * A name was previously saved for this recognized token.

* The component will still display a modal when clicked to edit the name. */ -export const DefaultNFTNameStory = { - name: 'Default NFT Name', - args: { - value: ADDRESS_NFT_MOCK, - type: NameType.ETHEREUM_ADDRESS, - variation: VARIATION_MOCK, - }, +export const SavedTokenNameStory = () => { + return ( + + ); }; -/** - * No name was previously saved for this first-party contract.

- * The component will still display a modal when clicked to edit the name. - */ -export const DefaultFirstPartyNameStory = { - name: 'Default First-Party Name', - args: { - value: ADDRESS_FIRST_PARTY_MOCK, - type: NameType.ETHEREUM_ADDRESS, - variation: VARIATION_MOCK, - }, -}; +SavedTokenNameStory.storyName = 'Saved Token Name'; /** * Clicking the component will not display a modal to edit the name. */ -export const EditDisabledStory = { - name: 'Edit Disabled', - args: { - value: ADDRESS_MOCK, - type: NameType.ETHEREUM_ADDRESS, - variation: VARIATION_MOCK, - disableEdit: true, - }, +export const EditDisabledStory = () => { + return ( + + ); }; + +EditDisabledStory.storyName = 'Edit Disabled'; diff --git a/ui/components/app/selected-account/selected-account-component.test.js b/ui/components/app/selected-account/selected-account-component.test.js index 9545580bebbb..290e737c0808 100644 --- a/ui/components/app/selected-account/selected-account-component.test.js +++ b/ui/components/app/selected-account/selected-account-component.test.js @@ -111,7 +111,7 @@ describe('SelectedAccount Component', () => { const tooltipTitle = await waitFor(() => container.querySelector( - '[data-original-title="This account is not set up for use with Goerli"]', + '[data-original-title="This account is not set up for use with goerli"]', ), ); diff --git a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap index deb95bd48555..7dd3749a6e5f 100644 --- a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap +++ b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap @@ -46,7 +46,6 @@ exports[`SnapUIAddress renders Bitcoin address 1`] = `

128Lkh3...Mp8p6

@@ -68,7 +67,6 @@ exports[`SnapUIAddress renders Bitcoin address with blockie 1`] = ` />

128Lkh3...Mp8p6

@@ -122,7 +120,6 @@ exports[`SnapUIAddress renders Cosmos address 1`] = `

cosmos1...6hdc0

@@ -144,7 +141,6 @@ exports[`SnapUIAddress renders Cosmos address with blockie 1`] = ` />

cosmos1...6hdc0

@@ -198,7 +194,6 @@ exports[`SnapUIAddress renders Ethereum address 1`] = `

0xab16a...Bfcdb

@@ -220,7 +215,6 @@ exports[`SnapUIAddress renders Ethereum address with blockie 1`] = ` />

0xab16a...Bfcdb

@@ -274,7 +268,6 @@ exports[`SnapUIAddress renders Hedera address 1`] = `

0.0.123...zbhlt

@@ -296,7 +289,6 @@ exports[`SnapUIAddress renders Hedera address with blockie 1`] = ` />

0.0.123...zbhlt

@@ -350,7 +342,6 @@ exports[`SnapUIAddress renders Polkadot address 1`] = `

5hmuyxw...egmfy

@@ -372,7 +363,6 @@ exports[`SnapUIAddress renders Polkadot address with blockie 1`] = ` />

5hmuyxw...egmfy

@@ -426,7 +416,6 @@ exports[`SnapUIAddress renders Starknet address 1`] = `

0x02dd1...0ab57

@@ -448,7 +437,6 @@ exports[`SnapUIAddress renders Starknet address with blockie 1`] = ` />

0x02dd1...0ab57

@@ -502,7 +490,6 @@ exports[`SnapUIAddress renders legacy Ethereum address 1`] = `

0xab16a...Bfcdb

diff --git a/ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx b/ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx index d39cb5adf321..35f1af2ad414 100644 --- a/ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx +++ b/ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx @@ -9,29 +9,21 @@ import { AlignItems, Display, TextColor, - TextVariant, } from '../../../../helpers/constants/design-system'; import { shortenAddress } from '../../../../helpers/utils/util'; import { toChecksumHexAddress } from '../../../../../shared/modules/hexstring-utils'; import { SnapUIAvatar } from '../snap-ui-avatar'; -import { useDisplayName } from '../../../../hooks/snaps/useDisplayName'; export type SnapUIAddressProps = { // The address must be a CAIP-10 string. address: string; // This is not currently exposed to Snaps. avatarSize?: 'xs' | 'sm' | 'md' | 'lg'; - truncate?: boolean; - displayName?: boolean; - avatar?: boolean; }; export const SnapUIAddress: React.FunctionComponent = ({ address, avatarSize = 'md', - truncate = true, - displayName = false, - avatar = true, }) => { const caipIdentifier = useMemo(() => { if (isHexString(address)) { @@ -48,17 +40,12 @@ export const SnapUIAddress: React.FunctionComponent = ({ [caipIdentifier], ); - const name = useDisplayName(parsed); - // For EVM addresses, we make sure they are checksummed. const transformedAddress = parsed.chain.namespace === 'eip155' ? toChecksumHexAddress(parsed.address) : parsed.address; - - const formattedAddress = truncate - ? shortenAddress(transformedAddress) - : address; + const shortenedAddress = shortenAddress(transformedAddress); return ( = ({ alignItems={AlignItems.center} gap={2} > - {avatar && } - - {displayName && name ? name : formattedAddress} - + + {shortenedAddress} ); }; diff --git a/ui/components/app/snaps/snap-ui-renderer/components/address.ts b/ui/components/app/snaps/snap-ui-renderer/components/address.ts index 908890ecef9f..1e39966df760 100644 --- a/ui/components/app/snaps/snap-ui-renderer/components/address.ts +++ b/ui/components/app/snaps/snap-ui-renderer/components/address.ts @@ -6,8 +6,5 @@ export const address: UIComponentFactory = ({ element }) => ({ props: { address: element.props.address, avatarSize: 'xs', - truncate: element.props.truncate, - displayName: element.props.displayName, - avatar: element.props.avatar, }, }); diff --git a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap index 4a9fc4d3cf7a..b29efce542e3 100644 --- a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap +++ b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap @@ -8,7 +8,6 @@ exports[`UserPreferencedCurrencyDisplay Component rendering should match snapsho > 0 diff --git a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.d.ts b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.d.ts index 779309858a18..4db61d568f4a 100644 --- a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.d.ts +++ b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.d.ts @@ -16,7 +16,6 @@ export type UserPrefrencedCurrencyDisplayProps = OverridingUnion< showCurrencySuffix?: boolean; shouldCheckShowNativeToken?: boolean; isAggregatedFiatOverviewBalance?: boolean; - privacyMode?: boolean; } >; diff --git a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js index a466f7813672..613b731d0a16 100644 --- a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js +++ b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js @@ -28,7 +28,6 @@ export default function UserPreferencedCurrencyDisplay({ showNative, showCurrencySuffix, shouldCheckShowNativeToken, - privacyMode = false, ...restProps }) { // NOTE: When displaying currencies, we need the actual account to detect whether we're in a @@ -84,7 +83,6 @@ export default function UserPreferencedCurrencyDisplay({ numberOfDecimals={numberOfDecimals} prefixComponent={prefixComponent} suffix={showCurrencySuffix && !showEthLogo && currency} - privacyMode={privacyMode} /> ); } @@ -128,7 +126,6 @@ const UserPreferencedCurrencyDisplayPropTypes = { textProps: PropTypes.object, suffixProps: PropTypes.object, shouldCheckShowNativeToken: PropTypes.bool, - privacyMode: PropTypes.bool, }; UserPreferencedCurrencyDisplay.propTypes = diff --git a/ui/components/app/wallet-overview/aggregated-percentage-overview.test.tsx b/ui/components/app/wallet-overview/aggregated-percentage-overview.test.tsx index 8da096151908..95e0d92fa2b8 100644 --- a/ui/components/app/wallet-overview/aggregated-percentage-overview.test.tsx +++ b/ui/components/app/wallet-overview/aggregated-percentage-overview.test.tsx @@ -7,7 +7,6 @@ import { getSelectedAccount, getShouldHideZeroBalanceTokens, getTokensMarketData, - getPreferences, } from '../../../selectors'; import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance'; import { AggregatedPercentageOverview } from './aggregated-percentage-overview'; @@ -23,7 +22,6 @@ jest.mock('../../../ducks/locale/locale', () => ({ jest.mock('../../../selectors', () => ({ getCurrentCurrency: jest.fn(), getSelectedAccount: jest.fn(), - getPreferences: jest.fn(), getShouldHideZeroBalanceTokens: jest.fn(), getTokensMarketData: jest.fn(), })); @@ -34,7 +32,6 @@ jest.mock('../../../hooks/useAccountTotalFiatBalance', () => ({ const mockGetIntlLocale = getIntlLocale as unknown as jest.Mock; const mockGetCurrentCurrency = getCurrentCurrency as jest.Mock; -const mockGetPreferences = getPreferences as jest.Mock; const mockGetSelectedAccount = getSelectedAccount as unknown as jest.Mock; const mockGetShouldHideZeroBalanceTokens = getShouldHideZeroBalanceTokens as jest.Mock; @@ -162,7 +159,6 @@ describe('AggregatedPercentageOverview', () => { beforeEach(() => { mockGetIntlLocale.mockReturnValue('en-US'); mockGetCurrentCurrency.mockReturnValue('USD'); - mockGetPreferences.mockReturnValue({ privacyMode: false }); mockGetSelectedAccount.mockReturnValue(selectedAccountMock); mockGetShouldHideZeroBalanceTokens.mockReturnValue(false); mockGetTokensMarketData.mockReturnValue(marketDataMock); diff --git a/ui/components/app/wallet-overview/aggregated-percentage-overview.tsx b/ui/components/app/wallet-overview/aggregated-percentage-overview.tsx index 8c609610daa1..94555d3bc0cd 100644 --- a/ui/components/app/wallet-overview/aggregated-percentage-overview.tsx +++ b/ui/components/app/wallet-overview/aggregated-percentage-overview.tsx @@ -7,7 +7,6 @@ import { getSelectedAccount, getShouldHideZeroBalanceTokens, getTokensMarketData, - getPreferences, } from '../../../selectors'; import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance'; @@ -20,7 +19,7 @@ import { TextColor, TextVariant, } from '../../../helpers/constants/design-system'; -import { Box, SensitiveText } from '../../component-library'; +import { Box, Text } from '../../component-library'; import { getCalculatedTokenAmount1dAgo } from '../../../helpers/utils/util'; // core already has this exported type but its not yet available in this version @@ -35,7 +34,6 @@ export const AggregatedPercentageOverview = () => { useSelector(getTokensMarketData); const locale = useSelector(getIntlLocale); const fiatCurrency = useSelector(getCurrentCurrency); - const { privacyMode } = useSelector(getPreferences); const selectedAccount = useSelector(getSelectedAccount); const shouldHideZeroBalanceTokens = useSelector( getShouldHideZeroBalanceTokens, @@ -112,7 +110,7 @@ export const AggregatedPercentageOverview = () => { let color = TextColor.textDefault; - if (!privacyMode && isValidAmount(amountChange)) { + if (isValidAmount(amountChange)) { if ((amountChange as number) === 0) { color = TextColor.textDefault; } else if ((amountChange as number) > 0) { @@ -120,33 +118,26 @@ export const AggregatedPercentageOverview = () => { } else { color = TextColor.errorDefault; } - } else { - color = TextColor.textAlternative; } - return ( - {formattedAmountChange} - - + {formattedPercentChange} - + ); }; diff --git a/ui/components/app/wallet-overview/btc-overview.test.tsx b/ui/components/app/wallet-overview/btc-overview.test.tsx index 62e6f5ff82b3..abff2cb2b239 100644 --- a/ui/components/app/wallet-overview/btc-overview.test.tsx +++ b/ui/components/app/wallet-overview/btc-overview.test.tsx @@ -11,33 +11,14 @@ import { MultichainNetworks } from '../../../../shared/constants/multichain/netw import { RampsMetaMaskEntry } from '../../../hooks/ramps/useRamps/useRamps'; import { defaultBuyableChains } from '../../../ducks/ramps/constants'; import { setBackgroundConnection } from '../../../store/background-connection'; -import { MetaMetricsContext } from '../../../contexts/metametrics'; -import { - MetaMetricsEventCategory, - MetaMetricsEventName, -} from '../../../../shared/constants/metametrics'; import BtcOverview from './btc-overview'; -// We need to mock `dispatch` since we use it for `setDefaultHomeActiveTabName`. -const mockDispatch = jest.fn().mockReturnValue(() => jest.fn()); -jest.mock('react-redux', () => ({ - ...jest.requireActual('react-redux'), - useDispatch: () => mockDispatch, -})); - -jest.mock('../../../store/actions', () => ({ - handleSnapRequest: jest.fn(), - sendMultichainTransaction: jest.fn(), - setDefaultHomeActiveTabName: jest.fn(), -})); - const PORTOFOLIO_URL = 'https://portfolio.test'; const BTC_OVERVIEW_BUY = 'coin-overview-buy'; const BTC_OVERVIEW_BRIDGE = 'coin-overview-bridge'; const BTC_OVERVIEW_RECEIVE = 'coin-overview-receive'; const BTC_OVERVIEW_SWAP = 'token-overview-button-swap'; -const BTC_OVERVIEW_SEND = 'coin-overview-send'; const BTC_OVERVIEW_PRIMARY_CURRENCY = 'coin-overview__primary-currency'; const mockMetaMetricsId = 'deadbeef'; @@ -247,110 +228,9 @@ describe('BtcOverview', () => { }); }); - it('sends an event when clicking the Buy button', () => { - const storeWithBtcBuyable = getStore({ - ramps: { - buyableChains: mockBuyableChainsWithBtc, - }, - }); - - const mockTrackEvent = jest.fn(); - const { queryByTestId } = renderWithProvider( - - - , - storeWithBtcBuyable, - ); - - const buyButton = queryByTestId(BTC_OVERVIEW_BUY); - expect(buyButton).toBeInTheDocument(); - expect(buyButton).not.toBeDisabled(); - fireEvent.click(buyButton as HTMLElement); - - expect(mockTrackEvent).toHaveBeenCalledWith({ - event: MetaMetricsEventName.NavBuyButtonClicked, - category: MetaMetricsEventCategory.Navigation, - properties: { - account_type: mockNonEvmAccount.type, - chain_id: MultichainNetworks.BITCOIN, - location: 'Home', - snap_id: mockNonEvmAccount.metadata.snap.id, - text: 'Buy', - }, - }); - }); - it('always show the Receive button', () => { const { queryByTestId } = renderWithProvider(, getStore()); const receiveButton = queryByTestId(BTC_OVERVIEW_RECEIVE); expect(receiveButton).toBeInTheDocument(); }); - - it('"Buy & Sell" button is disabled for testnet accounts', () => { - const storeWithBtcBuyable = getStore({ - metamask: { - ...mockMetamaskStore, - internalAccounts: { - ...mockMetamaskStore.internalAccounts, - accounts: { - [mockNonEvmAccount.id]: { - ...mockNonEvmAccount, - address: 'tb1q9lakrt5sw0w0twnc6ww4vxs7hm0q23e03286k8', - }, - }, - }, - }, - ramps: { - buyableChains: mockBuyableChainsWithBtc, - }, - }); - - const { queryByTestId } = renderWithProvider( - , - storeWithBtcBuyable, - ); - - const buyButton = queryByTestId(BTC_OVERVIEW_BUY); - - expect(buyButton).toBeInTheDocument(); - expect(buyButton).toBeDisabled(); - }); - - it('always show the Send button', () => { - const { queryByTestId } = renderWithProvider(, getStore()); - const sendButton = queryByTestId(BTC_OVERVIEW_SEND); - expect(sendButton).toBeInTheDocument(); - expect(sendButton).not.toBeDisabled(); - }); - - it('sends an event when clicking the Send button', () => { - const mockTrackEvent = jest.fn(); - const { queryByTestId } = renderWithProvider( - - - , - getStore(), - ); - - const sendButton = queryByTestId(BTC_OVERVIEW_SEND); - expect(sendButton).toBeInTheDocument(); - expect(sendButton).not.toBeDisabled(); - fireEvent.click(sendButton as HTMLElement); - - expect(mockTrackEvent).toHaveBeenCalledWith( - { - event: MetaMetricsEventName.NavSendButtonClicked, - category: MetaMetricsEventCategory.Navigation, - properties: { - account_type: mockNonEvmAccount.type, - chain_id: MultichainNetworks.BITCOIN, - location: 'Home', - snap_id: mockNonEvmAccount.metadata.snap.id, - text: 'Send', - token_symbol: 'BTC', - }, - }, - expect.any(Object), - ); - }); }); diff --git a/ui/components/app/wallet-overview/btc-overview.tsx b/ui/components/app/wallet-overview/btc-overview.tsx index fb315d3ab3b0..dc47df7567b5 100644 --- a/ui/components/app/wallet-overview/btc-overview.tsx +++ b/ui/components/app/wallet-overview/btc-overview.tsx @@ -1,17 +1,12 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { - ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) - getMultichainIsMainnet, - ///: END:ONLY_INCLUDE_IF getMultichainProviderConfig, getMultichainSelectedAccountCachedBalance, } from '../../../selectors/multichain'; ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) import { getIsBitcoinBuyable } from '../../../ducks/ramps'; -import { useMultichainSelector } from '../../../hooks/useMultichainSelector'; ///: END:ONLY_INCLUDE_IF -import { getSelectedInternalAccount } from '../../../selectors'; import { CoinOverview } from './coin-overview'; type BtcOverviewProps = { @@ -21,18 +16,12 @@ type BtcOverviewProps = { const BtcOverview = ({ className }: BtcOverviewProps) => { const { chainId } = useSelector(getMultichainProviderConfig); const balance = useSelector(getMultichainSelectedAccountCachedBalance); - const account = useSelector(getSelectedInternalAccount); ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) - const isBtcMainnetAccount = useMultichainSelector( - getMultichainIsMainnet, - account, - ); const isBtcBuyable = useSelector(getIsBitcoinBuyable); ///: END:ONLY_INCLUDE_IF return ( { isSwapsChain={false} ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) isBridgeChain={false} - isBuyableChain={isBtcBuyable && isBtcMainnetAccount} + isBuyableChain={isBtcBuyable} ///: END:ONLY_INCLUDE_IF /> ); diff --git a/ui/components/app/wallet-overview/coin-buttons.stories.js b/ui/components/app/wallet-overview/coin-buttons.stories.js index 028ebeee5b40..40a6879673a8 100644 --- a/ui/components/app/wallet-overview/coin-buttons.stories.js +++ b/ui/components/app/wallet-overview/coin-buttons.stories.js @@ -1,13 +1,9 @@ import React from 'react'; -import testData from '../../../../.storybook/test-data'; import CoinButtons from './coin-buttons'; -const { accounts, selectedAccount } = testData.metamask.internalAccounts; - export default { title: 'Components/App/WalletOverview/CoinButtons', args: { - account: accounts[selectedAccount], chainId: '1', trackingLocation: 'home', isSwapsChain: true, diff --git a/ui/components/app/wallet-overview/coin-buttons.tsx b/ui/components/app/wallet-overview/coin-buttons.tsx index 3a499aa44dbf..bac7872c79e3 100644 --- a/ui/components/app/wallet-overview/coin-buttons.tsx +++ b/ui/components/app/wallet-overview/coin-buttons.tsx @@ -24,7 +24,7 @@ import { } from '@metamask/utils'; ///: BEGIN:ONLY_INCLUDE_IF(build-flask) -import { BtcAccountType, InternalAccount } from '@metamask/keyring-api'; +import { BtcAccountType } from '@metamask/keyring-api'; ///: END:ONLY_INCLUDE_IF ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) import { ChainId } from '../../../../shared/constants/network'; @@ -51,6 +51,7 @@ import { getCurrentKeyring, ///: END:ONLY_INCLUDE_IF getUseExternalServices, + getSelectedAccount, ///: BEGIN:ONLY_INCLUDE_IF(build-flask) getMemoizedUnapprovedTemplatedConfirmations, ///: END:ONLY_INCLUDE_IF @@ -89,29 +90,8 @@ import { } from '../../../store/actions'; import { BITCOIN_WALLET_SNAP_ID } from '../../../../shared/lib/accounts/bitcoin-wallet-snap'; ///: END:ONLY_INCLUDE_IF -import { - getMultichainIsEvm, - getMultichainNativeCurrency, -} from '../../../selectors/multichain'; -import { useMultichainSelector } from '../../../hooks/useMultichainSelector'; - -type CoinButtonsProps = { - account: InternalAccount; - chainId: `0x${string}` | CaipChainId | number; - trackingLocation: string; - isSwapsChain: boolean; - isSigningEnabled: boolean; - ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) - isBridgeChain: boolean; - isBuyableChain: boolean; - defaultSwapsToken?: SwapsEthToken; - ///: END:ONLY_INCLUDE_IF - classPrefix?: string; - iconButtonClassName?: string; -}; const CoinButtons = ({ - account, chainId, trackingLocation, isSwapsChain, @@ -123,13 +103,26 @@ const CoinButtons = ({ ///: END:ONLY_INCLUDE_IF classPrefix = 'coin', iconButtonClassName = '', -}: CoinButtonsProps) => { +}: { + chainId: `0x${string}` | CaipChainId | number; + trackingLocation: string; + isSwapsChain: boolean; + isSigningEnabled: boolean; + ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) + isBridgeChain: boolean; + isBuyableChain: boolean; + defaultSwapsToken?: SwapsEthToken; + ///: END:ONLY_INCLUDE_IF + classPrefix?: string; + iconButtonClassName?: string; +}) => { const t = useContext(I18nContext); const dispatch = useDispatch(); const trackEvent = useContext(MetaMetricsContext); const [showReceiveModal, setShowReceiveModal] = useState(false); + const account = useSelector(getSelectedAccount); const { address: selectedAddress } = account; const history = useHistory(); ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) @@ -138,16 +131,6 @@ const CoinButtons = ({ const usingHardwareWallet = isHardwareKeyring(keyring?.type); ///: END:ONLY_INCLUDE_IF - // Initially, those events were using a "ETH" as `token_symbol`, so we keep this behavior - // for EVM, no matter the currently selected native token (e.g. SepoliaETH if you are on Sepolia - // network). - const isEvm = useMultichainSelector(getMultichainIsEvm, account); - const multichainNativeToken = useMultichainSelector( - getMultichainNativeCurrency, - account, - ); - const nativeToken = isEvm ? 'ETH' : multichainNativeToken; - const isExternalServicesEnabled = useSelector(getUseExternalServices); const buttonTooltips = { @@ -197,23 +180,6 @@ const CoinButtons = ({ }; ///: END:ONLY_INCLUDE_IF - const getSnapAccountMetaMetricsPropertiesIfAny = ( - internalAccount: InternalAccount, - ): { snap_id?: string } => { - // Some accounts might be Snap accounts, in this case we add some extra properties - // to the metrics: - const snapId = internalAccount.metadata.snap?.id; - if (snapId) { - return { - snap_id: snapId, - }; - } - - // If the account is not a Snap account or that we could not get the Snap ID for - // some reason, we don't add any extra property. - return {}; - }; - ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) const mmiPortfolioEnabled = useSelector(getMmiPortfolioEnabled); const mmiPortfolioUrl = useSelector(getMmiPortfolioUrl); @@ -310,21 +276,6 @@ const CoinButtons = ({ ///: END:ONLY_INCLUDE_IF const handleSendOnClick = useCallback(async () => { - trackEvent( - { - event: MetaMetricsEventName.NavSendButtonClicked, - category: MetaMetricsEventCategory.Navigation, - properties: { - account_type: account.type, - token_symbol: nativeToken, - location: 'Home', - text: 'Send', - chain_id: chainId, - ...getSnapAccountMetaMetricsPropertiesIfAny(account), - }, - }, - { excludeMetaMetricsId: false }, - ); switch (account.type) { ///: BEGIN:ONLY_INCLUDE_IF(build-flask) case BtcAccountType.P2wpkh: { @@ -340,6 +291,19 @@ const CoinButtons = ({ } ///: END:ONLY_INCLUDE_IF default: { + trackEvent( + { + event: MetaMetricsEventName.NavSendButtonClicked, + category: MetaMetricsEventCategory.Navigation, + properties: { + token_symbol: 'ETH', + location: 'Home', + text: 'Send', + chain_id: chainId, + }, + }, + { excludeMetaMetricsId: false }, + ); await dispatch(startNewDraftTransaction({ type: AssetType.native })); history.push(SEND_ROUTE); } @@ -394,12 +358,10 @@ const CoinButtons = ({ event: MetaMetricsEventName.NavBuyButtonClicked, category: MetaMetricsEventCategory.Navigation, properties: { - account_type: account.type, location: 'Home', text: 'Buy', chain_id: chainId, token_symbol: defaultSwapsToken, - ...getSnapAccountMetaMetricsPropertiesIfAny(account), }, }); }, [chainId, defaultSwapsToken]); diff --git a/ui/components/app/wallet-overview/coin-overview.tsx b/ui/components/app/wallet-overview/coin-overview.tsx index 2244f3b33e82..2de787ef23c0 100644 --- a/ui/components/app/wallet-overview/coin-overview.tsx +++ b/ui/components/app/wallet-overview/coin-overview.tsx @@ -11,7 +11,6 @@ import { zeroAddress } from 'ethereumjs-util'; import { CaipChainId } from '@metamask/utils'; import type { Hex } from '@metamask/utils'; -import { InternalAccount } from '@metamask/keyring-api'; import { Box, ButtonIcon, @@ -29,7 +28,6 @@ import { JustifyContent, TextAlign, TextVariant, - IconColor, } from '../../../helpers/constants/design-system'; ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) import { getPortfolioUrl } from '../../../helpers/utils/portfolio'; @@ -46,6 +44,7 @@ import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display import { PRIMARY } from '../../../helpers/constants/common'; import { getPreferences, + getSelectedAccount, getShouldHideZeroBalanceTokens, getTokensMarketData, getIsTestnet, @@ -62,10 +61,7 @@ import Spinner from '../../ui/spinner'; import { PercentageAndAmountChange } from '../../multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change'; import { getMultichainIsEvm } from '../../../selectors/multichain'; import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance'; -import { - setAggregatedBalancePopoverShown, - setPrivacyMode, -} from '../../../store/actions'; +import { setAggregatedBalancePopoverShown } from '../../../store/actions'; import { useTheme } from '../../../hooks/useTheme'; import { getSpecificSettingsRoute } from '../../../helpers/utils/settings-search'; import { useI18nContext } from '../../../hooks/useI18nContext'; @@ -74,7 +70,6 @@ import CoinButtons from './coin-buttons'; import { AggregatedPercentageOverview } from './aggregated-percentage-overview'; export type CoinOverviewProps = { - account: InternalAccount; balance: string; balanceIsCached: boolean; className?: string; @@ -91,7 +86,6 @@ export type CoinOverviewProps = { }; export const CoinOverview = ({ - account, balance, balanceIsCached, className, @@ -123,6 +117,7 @@ export const CoinOverview = ({ ///: END:ONLY_INCLUDE_IF + const account = useSelector(getSelectedAccount); const showNativeTokenAsMainBalanceRoute = getSpecificSettingsRoute( t, t('general'), @@ -133,17 +128,19 @@ export const CoinOverview = ({ const shouldShowPopover = useSelector(getShouldShowAggregatedBalancePopover); const isTestnet = useSelector(getIsTestnet); - const { showFiatInTestnets, privacyMode, showNativeTokenAsMainBalance } = - useSelector(getPreferences); + const { showFiatInTestnets } = useSelector(getPreferences); + const selectedAccount = useSelector(getSelectedAccount); const shouldHideZeroBalanceTokens = useSelector( getShouldHideZeroBalanceTokens, ); const { totalFiatBalance, loading } = useAccountTotalFiatBalance( - account, + selectedAccount, shouldHideZeroBalanceTokens, ); + const { showNativeTokenAsMainBalance } = useSelector(getPreferences); + const isEvm = useSelector(getMultichainIsEvm); const isNotAggregatedFiatBalance = showNativeTokenAsMainBalance || isTestnet || !isEvm; @@ -166,10 +163,6 @@ export const CoinOverview = ({ dispatch(setAggregatedBalancePopoverShown()); }; - const handleSensitiveToggle = () => { - dispatch(setPrivacyMode(!privacyMode)); - }; - const [referenceElement, setReferenceElement] = useState(null); const setBoxRef = (ref: HTMLSpanElement | null) => { @@ -260,39 +253,26 @@ export const CoinOverview = ({ ref={setBoxRef} > {balanceToDisplay ? ( - <> - - - + ) : ( )} @@ -368,7 +348,6 @@ export const CoinOverview = ({ buttons={ { return ( jest.fn()); -jest.mock('react-redux', () => ({ - ...jest.requireActual('react-redux'), - useDispatch: () => mockDispatch, -})); - jest.mock('../../../hooks/useIsOriginalNativeTokenSymbol', () => { return { useIsOriginalNativeTokenSymbol: jest.fn(), @@ -36,10 +24,6 @@ jest.mock('../../../ducks/locale/locale', () => ({ getIntlLocale: jest.fn(), })); -jest.mock('../../../store/actions', () => ({ - startNewDraftTransaction: jest.fn(), -})); - const mockGetIntlLocale = getIntlLocale; let openTabSpy; @@ -48,46 +32,18 @@ describe('EthOverview', () => { useIsOriginalNativeTokenSymbol.mockReturnValue(true); mockGetIntlLocale.mockReturnValue('en-US'); - const mockEvmAccount1 = { - address: '0x1', - id: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3', - metadata: { - name: 'Account 1', - keyring: { - type: KeyringType.imported, - }, - }, - options: {}, - methods: ETH_EOA_METHODS, - type: EthAccountType.Eoa, - }; - - const mockEvmAccount2 = { - address: '0x2', - id: 'e9b992f9-e151-4317-b8b7-c771bb73dd02', - metadata: { - name: 'Account 2', - keyring: { - type: KeyringType.imported, - }, - }, - options: {}, - methods: ETH_EOA_METHODS, - type: EthAccountType.Eoa, - }; - const mockStore = { metamask: { ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }), accountsByChainId: { [CHAIN_IDS.MAINNET]: { - '0x1': { address: mockEvmAccount1.address, balance: '0x1F4' }, + '0x1': { address: '0x1', balance: '0x1F4' }, }, }, tokenList: [], cachedBalances: { '0x1': { - [mockEvmAccount1.address]: '0x1F4', + '0x1': '0x1F4', }, }, preferences: { @@ -102,22 +58,46 @@ describe('EthOverview', () => { }, }, accounts: { - [mockEvmAccount1.address]: { - address: mockEvmAccount1.address, + '0x1': { + address: '0x1', balance: '0x1F4', }, }, internalAccounts: { accounts: { - [mockEvmAccount1.id]: mockEvmAccount1, - [mockEvmAccount2.id]: mockEvmAccount2, + 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': { + address: '0x1', + id: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3', + metadata: { + name: 'Account 1', + keyring: { + type: KeyringType.imported, + }, + }, + options: {}, + methods: ETH_EOA_METHODS, + type: EthAccountType.Eoa, + }, + 'e9b992f9-e151-4317-b8b7-c771bb73dd02': { + address: '0x2', + id: 'e9b992f9-e151-4317-b8b7-c771bb73dd02', + metadata: { + name: 'Account 2', + keyring: { + type: KeyringType.imported, + }, + }, + options: {}, + methods: ETH_EOA_METHODS, + type: EthAccountType.Eoa, + }, }, - selectedAccount: mockEvmAccount1.id, + selectedAccount: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3', }, keyrings: [ { type: KeyringType.imported, - accounts: [mockEvmAccount1.address, mockEvmAccount2.address], + accounts: ['0x1', '0x2'], }, { type: KeyringType.ledger, @@ -401,36 +381,6 @@ describe('EthOverview', () => { }); }); - it('sends an event when clicking the Buy button: %s', () => { - const mockTrackEvent = jest.fn(); - - const mockedStore = configureMockStore([thunk])(mockStore); - const { queryByTestId } = renderWithProvider( - - - , - mockedStore, - ); - - const buyButton = queryByTestId(ETH_OVERVIEW_BUY); - expect(buyButton).toBeInTheDocument(); - expect(buyButton).not.toBeDisabled(); - fireEvent.click(buyButton); - - expect(mockTrackEvent).toHaveBeenCalledWith({ - event: MetaMetricsEventName.NavBuyButtonClicked, - category: MetaMetricsEventCategory.Navigation, - properties: { - account_type: mockEvmAccount1.type, - chain_id: CHAIN_IDS.MAINNET, - location: 'Home', - text: 'Buy', - // We use a `SwapsEthToken` in this case, so we're expecting an entire object here. - token_symbol: expect.any(Object), - }, - }); - }); - describe('Disabled buttons when an account cannot sign transactions', () => { const buttonTestCases = [ { testId: ETH_OVERVIEW_SEND, buttonText: 'Send' }, @@ -441,30 +391,15 @@ describe('EthOverview', () => { it.each(buttonTestCases)( 'should have the $buttonText button disabled when an account cannot sign transactions or user operations', ({ testId, buttonText }) => { - const mockedStoreWithoutSigningMethods = { - ...mockStore, - metamask: { - ...mockStore.metamask, - internalAccounts: { - ...mockStore.metamask.internalAccounts, - accounts: { - [mockEvmAccount1.id]: { - ...mockEvmAccount1, - // Filter out all methods used for signing transactions. - methods: Object.values(EthMethod).filter( - (method) => - method !== EthMethod.SignTransaction && - method !== EthMethod.SignUserOperation, - ), - }, - }, - }, - }, - }; - - const mockedStore = configureMockStore([thunk])( - mockedStoreWithoutSigningMethods, + mockStore.metamask.internalAccounts.accounts[ + 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3' + ].methods = Object.values(EthMethod).filter( + (method) => + method !== EthMethod.SignTransaction && + method !== EthMethod.SignUserOperation, ); + + const mockedStore = configureMockStore([thunk])(mockStore); const { queryByTestId, queryByText } = renderWithProvider( , mockedStore, @@ -480,50 +415,4 @@ describe('EthOverview', () => { }, ); }); - - it.each([ - CHAIN_IDS.MAINNET, - // We want to test with a different chain ID than mainnet to make sure the events are still using - // the right `token_symbol`. - CHAIN_IDS.SEPOLIA, - ])('sends an event when clicking the Send button: %s', (chainId) => { - const mockTrackEvent = jest.fn(); - const mockedStoreWithSpecificChainId = { - ...mockStore, - metamask: { - ...mockStore.metamask, - ...mockNetworkState({ chainId }), - }, - }; - - const mockedStore = configureMockStore([thunk])( - mockedStoreWithSpecificChainId, - ); - const { queryByTestId } = renderWithProvider( - - - , - mockedStore, - ); - - const sendButton = queryByTestId(ETH_OVERVIEW_SEND); - expect(sendButton).toBeInTheDocument(); - expect(sendButton).not.toBeDisabled(); - fireEvent.click(sendButton); - - expect(mockTrackEvent).toHaveBeenCalledWith( - { - event: MetaMetricsEventName.NavSendButtonClicked, - category: MetaMetricsEventCategory.Navigation, - properties: { - account_type: mockEvmAccount1.type, - chain_id: chainId, - location: 'Home', - text: 'Send', - token_symbol: 'ETH', - }, - }, - expect.any(Object), - ); - }); }); diff --git a/ui/components/app/wallet-overview/index.scss b/ui/components/app/wallet-overview/index.scss index 47dc40200e69..4759af1ffa8c 100644 --- a/ui/components/app/wallet-overview/index.scss +++ b/ui/components/app/wallet-overview/index.scss @@ -9,10 +9,6 @@ flex-direction: column; width: 100%; - &-fullscreen { - align-items: center; - } - &__balance { flex: 1; display: flex; @@ -20,10 +16,6 @@ flex-direction: column; align-items: start; width: 100%; - - .wallet-overview-fullscreen > & { - align-items: center; - } } &__icon_button { @@ -78,8 +70,7 @@ display: flex; max-width: inherit; justify-content: center; - align-items: center; - flex-wrap: nowrap; + flex-wrap: wrap; } &__primary-balance { @@ -143,8 +134,7 @@ display: flex; max-width: inherit; justify-content: center; - align-items: center; - flex-wrap: nowrap; + flex-wrap: wrap; } &__primary-balance { diff --git a/ui/components/app/wallet-overview/wallet-overview.js b/ui/components/app/wallet-overview/wallet-overview.js index 04127276acaf..213a7b2f2317 100644 --- a/ui/components/app/wallet-overview/wallet-overview.js +++ b/ui/components/app/wallet-overview/wallet-overview.js @@ -2,23 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -// TODO: Move this function to shared -// eslint-disable-next-line import/no-restricted-paths -import { getEnvironmentType } from '../../../../app/scripts/lib/util'; -import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app'; - const WalletOverview = ({ balance, buttons, className }) => { return ( -
+
{balance}
{buttons}
diff --git a/ui/components/component-library/README.md b/ui/components/component-library/README.md index a1f865bfe95a..ec5006d3491f 100644 --- a/ui/components/component-library/README.md +++ b/ui/components/component-library/README.md @@ -4,7 +4,7 @@ This folder contains design system components that are built 1:1 with the Figma ## Architecture -All components are built on top of the `Box` component and accept all `Box` component props. +All components are built on top of the `Box` component and accept all `Box` [component props](/docs/components-componentlibrary-box--docs#props). ### Layout diff --git a/ui/components/component-library/icon/icon.types.ts b/ui/components/component-library/icon/icon.types.ts index 3afd17ef983b..9c87851d0b65 100644 --- a/ui/components/component-library/icon/icon.types.ts +++ b/ui/components/component-library/icon/icon.types.ts @@ -44,7 +44,6 @@ export enum IconName { Book = 'book', Bookmark = 'bookmark', Bridge = 'bridge', - Collapse = 'collapse', Calculator = 'calculator', CardPos = 'card-pos', CardToken = 'card-token', diff --git a/ui/components/component-library/index.ts b/ui/components/component-library/index.ts index 634af093a41b..861fb80bcf2c 100644 --- a/ui/components/component-library/index.ts +++ b/ui/components/component-library/index.ts @@ -69,8 +69,6 @@ export { TagUrl } from './tag-url'; export type { TagUrlProps } from './tag-url'; export { Text, ValidTag, TextDirection, InvisibleCharacter } from './text'; export type { TextProps } from './text'; -export { SensitiveText, SensitiveTextLength } from './sensitive-text'; -export type { SensitiveTextProps } from './sensitive-text'; export { Input, InputType } from './input'; export type { InputProps } from './input'; export { TextField, TextFieldType, TextFieldSize } from './text-field'; diff --git a/ui/components/component-library/sensitive-text/README.mdx b/ui/components/component-library/sensitive-text/README.mdx deleted file mode 100644 index 9e950381e6f3..000000000000 --- a/ui/components/component-library/sensitive-text/README.mdx +++ /dev/null @@ -1,81 +0,0 @@ -import { Controls, Canvas } from '@storybook/blocks'; - -import * as SensitiveTextStories from './sensitive-text.stories'; - -# SensitiveText - -SensitiveText is a component that extends the Text component to handle sensitive information. It provides the ability to hide or show the text content, replacing it with dots when hidden. - - - -## Props - -The `SensitiveText` component extends the `Text` component. See the `Text` component for an extended list of props. - - - -### Children - -The text content to be displayed or hidden. - - - -```jsx -import { SensitiveText } from '../../component-library'; - - - Sensitive Information - -``` - - -### IsHidden - -Use the `isHidden` prop to determine whether the text should be hidden or visible. When `isHidden` is `true`, the component will display dots instead of the actual text. - - - -```jsx -import { SensitiveText } from '../../component-library'; - - - Sensitive Information - -``` - -### Length - -Use the `length` prop to determine the length of the hidden text (number of dots). Can be a predefined `SensitiveTextLength` or a custom string number. - -The following predefined length options are available: - -- `SensitiveTextLength.Short`: `6` -- `SensitiveTextLength.Medium`: `9` -- `SensitiveTextLength.Long`: `12` -- `SensitiveTextLength.ExtraLong`: `20` - -- The number of dots displayed is determined by the `length` prop. -- If an invalid `length` is provided, the component will fall back to `SensitiveTextLength.Short` and log a warning. -- Custom length values can be provided as strings, e.g. `15`. - - - -```jsx -import { SensitiveText, SensitiveTextLength } from '../../component-library'; - - - Length "short" (6 characters) - - - Length "medium" (9 characters) - - - Length "long" (12 characters) - - - Length "extra long" (20 characters) - - - Length "15" (15 characters) - -``` diff --git a/ui/components/component-library/sensitive-text/__snapshots__/sensitive-text.test.tsx.snap b/ui/components/component-library/sensitive-text/__snapshots__/sensitive-text.test.tsx.snap deleted file mode 100644 index 6844feb1783e..000000000000 --- a/ui/components/component-library/sensitive-text/__snapshots__/sensitive-text.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SensitiveText should render correctly 1`] = ` -
-

- Sensitive Information -

-
-`; diff --git a/ui/components/component-library/sensitive-text/index.ts b/ui/components/component-library/sensitive-text/index.ts deleted file mode 100644 index ff89896fd03b..000000000000 --- a/ui/components/component-library/sensitive-text/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { SensitiveText } from './sensitive-text'; -export { SensitiveTextLength } from './sensitive-text.types'; -export type { SensitiveTextProps } from './sensitive-text.types'; diff --git a/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx b/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx deleted file mode 100644 index 142def9118b5..000000000000 --- a/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; -import { SensitiveText } from '.'; -import { SensitiveTextLength } from './sensitive-text.types'; -import README from './README.mdx'; -import { Box } from '../box'; -import { - Display, - FlexDirection, -} from '../../../helpers/constants/design-system'; - -const meta: Meta = { - title: 'Components/ComponentLibrary/SensitiveText', - component: SensitiveText, - parameters: { - docs: { - page: README, - }, - }, - args: { - children: 'Sensitive information', - isHidden: false, - length: SensitiveTextLength.Short, - }, -} as Meta; - -export default meta; -type Story = StoryObj; - -export const DefaultStory: Story = {}; -DefaultStory.storyName = 'Default'; - -export const Children: Story = { - args: { - children: 'Sensitive information', - }, - render: (args) => ( - - ), -}; - -export const IsHidden: Story = { - args: { - isHidden: true, - }, - render: (args) => ( - - ), -}; - -export const Length: Story = { - args: { - isHidden: true, - }, - render: (args) => ( - - - Length "short" (6 characters) - - - Length "medium" (9 characters) - - - Length "long" (12 characters) - - - Length "extra long" (20 characters) - - - Length "15" (15 characters) - - - ), -}; diff --git a/ui/components/component-library/sensitive-text/sensitive-text.test.tsx b/ui/components/component-library/sensitive-text/sensitive-text.test.tsx deleted file mode 100644 index a4be911ea78d..000000000000 --- a/ui/components/component-library/sensitive-text/sensitive-text.test.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import { SensitiveText } from './sensitive-text'; -import { SensitiveTextLength } from './sensitive-text.types'; - -describe('SensitiveText', () => { - const testProps = { - isHidden: false, - length: SensitiveTextLength.Short, - children: 'Sensitive Information', - }; - - it('should render correctly', () => { - const { container } = render(); - expect(container).toMatchSnapshot(); - }); - - it('should display the text when isHidden is false', () => { - render(); - expect(screen.getByText('Sensitive Information')).toBeInTheDocument(); - }); - - it('should hide the text when isHidden is true', () => { - render(); - expect(screen.queryByText('Sensitive Information')).not.toBeInTheDocument(); - expect(screen.getByText('••••••')).toBeInTheDocument(); - }); - - it('should render the correct number of bullets for different lengths', () => { - const lengths = [ - SensitiveTextLength.Short, - SensitiveTextLength.Medium, - SensitiveTextLength.Long, - SensitiveTextLength.ExtraLong, - ]; - - lengths.forEach((length) => { - render(); - expect(screen.getByText('•'.repeat(Number(length)))).toBeInTheDocument(); - }); - }); - - it('should handle all predefined SensitiveTextLength values', () => { - Object.entries(SensitiveTextLength).forEach(([_, value]) => { - render(); - expect(screen.getByText('•'.repeat(Number(value)))).toBeInTheDocument(); - }); - }); - - it('should handle custom length as a string', () => { - render(); - expect(screen.getByText('•'.repeat(15))).toBeInTheDocument(); - }); - - it('should fall back to Short length for invalid custom length', () => { - render(); - expect( - screen.getByText('•'.repeat(Number(SensitiveTextLength.Short))), - ).toBeInTheDocument(); - }); - - it('should log a warning for invalid custom length', () => { - const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(); - render(); - expect(consoleSpy).toHaveBeenCalledWith( - 'Invalid length provided: abc. Falling back to Short.', - ); - consoleSpy.mockRestore(); - }); - - it('should apply additional props to the Text component', () => { - render(); - expect(screen.getByTestId('sensitive-text')).toBeInTheDocument(); - }); - - it('should forward ref to the Text component', () => { - const ref = React.createRef(); - render(); - expect(ref.current).toBeInstanceOf(HTMLParagraphElement); - }); -}); diff --git a/ui/components/component-library/sensitive-text/sensitive-text.tsx b/ui/components/component-library/sensitive-text/sensitive-text.tsx deleted file mode 100644 index ddabda784fe1..000000000000 --- a/ui/components/component-library/sensitive-text/sensitive-text.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React, { useMemo } from 'react'; -import { Text } from '../text'; -import { - SensitiveTextProps, - SensitiveTextLength, -} from './sensitive-text.types'; - -export const SensitiveText = React.forwardRef< - HTMLParagraphElement, - SensitiveTextProps ->((props, ref) => { - const { - isHidden = false, - length = SensitiveTextLength.Short, - children = '', - ...restProps - } = props; - - const getFallbackLength = useMemo( - () => (len: string) => { - const numLength = Number(len); - return Number.isNaN(numLength) ? 0 : numLength; - }, - [], - ); - - const isValidCustomLength = (value: string): boolean => { - const num = Number(value); - return !Number.isNaN(num) && num > 0; - }; - - let adjustedLength = length; - if (!(length in SensitiveTextLength) && !isValidCustomLength(length)) { - console.warn(`Invalid length provided: ${length}. Falling back to Short.`); - adjustedLength = SensitiveTextLength.Short; - } - - const fallback = useMemo( - () => '•'.repeat(getFallbackLength(adjustedLength)), - [length, getFallbackLength], - ); - - return ( - - {isHidden ? fallback : children} - - ); -}); diff --git a/ui/components/component-library/sensitive-text/sensitive-text.types.ts b/ui/components/component-library/sensitive-text/sensitive-text.types.ts deleted file mode 100644 index 1ea8270d377f..000000000000 --- a/ui/components/component-library/sensitive-text/sensitive-text.types.ts +++ /dev/null @@ -1,44 +0,0 @@ -import type { TextProps } from '../text/text.types'; - -/** - * SensitiveText length options. - */ -export const SensitiveTextLength = { - Short: '6', - Medium: '9', - Long: '12', - ExtraLong: '20', -} as const; - -/** - * Type for SensitiveTextLength values. - */ -export type SensitiveTextLengthType = - (typeof SensitiveTextLength)[keyof typeof SensitiveTextLength]; -/** - * Type for custom length values. - */ -export type CustomLength = string; - -export type SensitiveTextProps = Omit< - TextProps, - 'children' -> & { - /** - * Boolean to determine whether the text should be hidden or visible. - * - * @default false - */ - isHidden?: boolean; - /** - * Determines the length of the hidden text (number of asterisks). - * Can be a predefined SensitiveTextLength or a custom string number. - * - * @default SensitiveTextLength.Short - */ - length?: SensitiveTextLengthType | CustomLength; - /** - * The text content to be displayed or hidden. - */ - children?: React.ReactNode; -}; diff --git a/ui/components/component-library/text/README.mdx b/ui/components/component-library/text/README.mdx index 183fcbbca9f8..5b275aa48e23 100644 --- a/ui/components/component-library/text/README.mdx +++ b/ui/components/component-library/text/README.mdx @@ -580,7 +580,7 @@ Values using the `TextAlign` object from `./ui/helpers/constants/design-system.j ### Box Props -Box props are now integrated with the `Text` component. +Box props are now integrated with the `Text` component. Valid Box props: [Box](/docs/components-componentlibrary-box--docs#props) You no longer need to pass these props as an object through `boxProps` diff --git a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.tsx b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.tsx index e76dabc7add7..06fe1336ca7e 100644 --- a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.tsx +++ b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.tsx @@ -4,7 +4,7 @@ import { ICustodianType } from '@metamask-institutional/types'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { hideModal } from '../../../store/actions'; -import { getSelectedInternalAccount } from '../../../selectors/accounts'; +import { getSelectedInternalAccount } from '../../../selectors/selectors'; import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils'; import { Box, diff --git a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.tsx b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.tsx index 7c1d0f60488f..10dc049b8678 100644 --- a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.tsx +++ b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.tsx @@ -56,7 +56,6 @@ const InteractiveReplacementTokenNotification: React.FC< interactiveReplacementToken && Boolean(Object.keys(interactiveReplacementToken).length); - // @ts-expect-error keyring type is wrong maybe? if (!/^Custody/u.test(keyring.type) || !hasInteractiveReplacementToken) { setShowNotification(false); return; @@ -67,7 +66,6 @@ const InteractiveReplacementTokenNotification: React.FC< )) as unknown as string; const custodyAccountDetails = await dispatch( mmiActions.getAllCustodianAccountsWithToken( - // @ts-expect-error keyring type is wrong maybe? keyring.type.split(' - ')[1], token, ), @@ -107,7 +105,6 @@ const InteractiveReplacementTokenNotification: React.FC< interactiveReplacementToken?.oldRefreshToken, isUnlocked, dispatch, - // @ts-expect-error keyring type is wrong maybe? keyring.type, interactiveReplacementToken, mmiActions, diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap index e320bd1de0e3..51f6f2e905f9 100644 --- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap +++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap @@ -242,7 +242,6 @@ exports[`AccountListItem renders AccountListItem component and shows account nam > $100,000.00 @@ -539,7 +538,6 @@ exports[`AccountListItem renders AccountListItem component and shows account nam > 0.006 @@ -583,7 +581,6 @@ exports[`AccountListItem renders AccountListItem component and shows account nam > 0.006 diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js index bfc8f24369e1..df1c4ed455d5 100644 --- a/ui/components/multichain/account-list-item/account-list-item.js +++ b/ui/components/multichain/account-list-item/account-list-item.js @@ -88,7 +88,6 @@ const AccountListItem = ({ startAccessory, onActionClick, shouldScrollToWhenSelected = true, - privacyMode = false, }) => { const t = useI18nContext(); const [accountOptionsMenuOpen, setAccountOptionsMenuOpen] = useState(false); @@ -315,7 +314,6 @@ const AccountListItem = ({ type={PRIMARY} showFiat={showFiat} data-testid="first-currency-display" - privacyMode={privacyMode} /> @@ -363,7 +361,6 @@ const AccountListItem = ({ type={SECONDARY} showNative data-testid="second-currency-display" - privacyMode={privacyMode} /> @@ -511,10 +508,6 @@ AccountListItem.propTypes = { * Determines if list item should be scrolled to when selected */ shouldScrollToWhenSelected: PropTypes.bool, - /** - * Determines if list balance should be obfuscated - */ - privacyMode: PropTypes.bool, }; AccountListItem.displayName = 'AccountListItem'; diff --git a/ui/components/multichain/account-list-menu/account-list-menu.tsx b/ui/components/multichain/account-list-menu/account-list-menu.tsx index 718d86cf40b5..b9166eb8c85e 100644 --- a/ui/components/multichain/account-list-menu/account-list-menu.tsx +++ b/ui/components/multichain/account-list-menu/account-list-menu.tsx @@ -65,9 +65,6 @@ import { getOriginOfCurrentTab, getSelectedInternalAccount, getUpdatedAndSortedAccounts, - ///: BEGIN:ONLY_INCLUDE_IF(solana) - getIsSolanaSupportEnabled, - ///: END:ONLY_INCLUDE_IF } from '../../../selectors'; import { setSelectedAccount } from '../../../store/actions'; import { @@ -97,14 +94,8 @@ import { hasCreatedBtcMainnetAccount, hasCreatedBtcTestnetAccount, } from '../../../selectors/accounts'; -///: END:ONLY_INCLUDE_IF - -///: BEGIN:ONLY_INCLUDE_IF(build-flask,solana) import { MultichainNetworks } from '../../../../shared/constants/multichain/networks'; -import { - WalletClientType, - useMultichainWalletSnapClient, -} from '../../../hooks/accounts/useMultichainWalletSnapClient'; +import { useBitcoinWalletSnapClient } from '../../../hooks/accounts/useBitcoinWalletSnapClient'; ///: END:ONLY_INCLUDE_IF import { InternalAccountWithBalance, @@ -114,12 +105,6 @@ import { import { CreateEthAccount } from '../create-eth-account'; import { ImportAccount } from '../import-account'; import { endTrace, TraceName } from '../../../../shared/lib/trace'; -///: BEGIN:ONLY_INCLUDE_IF(solana) -import { - SOLANA_WALLET_NAME, - SOLANA_WALLET_SNAP_ID, -} from '../../../../shared/lib/accounts/solana-wallet-snap'; -///: END:ONLY_INCLUDE_IF import { HiddenAccountList } from './hidden-account-list'; const ACTION_MODES = { @@ -202,7 +187,6 @@ export const mergeAccounts = ( type AccountListMenuProps = { onClose: () => void; - privacyMode?: boolean; showAccountCreation?: boolean; accountListItemProps?: object; allowedAccountTypes?: KeyringAccountType[]; @@ -210,7 +194,6 @@ type AccountListMenuProps = { export const AccountListMenu = ({ onClose, - privacyMode = false, showAccountCreation = true, accountListItemProps, allowedAccountTypes = [ @@ -283,16 +266,7 @@ export const AccountListMenu = ({ hasCreatedBtcTestnetAccount, ); - const bitcoinWalletSnapClient = useMultichainWalletSnapClient( - WalletClientType.Bitcoin, - ); - ///: END:ONLY_INCLUDE_IF - - ///: BEGIN:ONLY_INCLUDE_IF(solana) - const solanaSupportEnabled = useSelector(getIsSolanaSupportEnabled); - const solanaWalletSnapClient = useMultichainWalletSnapClient( - WalletClientType.Solana, - ); + const bitcoinWalletSnapClient = useBitcoinWalletSnapClient(); ///: END:ONLY_INCLUDE_IF const [searchQuery, setSearchQuery] = useState(''); @@ -476,47 +450,10 @@ export const AccountListMenu = ({ ) : null ///: END:ONLY_INCLUDE_IF } - { - ///: BEGIN:ONLY_INCLUDE_IF(solana) - solanaSupportEnabled && ( - - { - trackEvent({ - category: MetaMetricsEventCategory.Navigation, - event: MetaMetricsEventName.AccountAddSelected, - properties: { - account_type: MetaMetricsEventAccountType.Snap, - snap_id: SOLANA_WALLET_SNAP_ID, - snap_name: SOLANA_WALLET_NAME, - location: 'Main Menu', - }, - }); - - // The account creation + renaming is handled by the - // Snap account bridge, so we need to close the current - // modal - onClose(); - - await solanaWalletSnapClient.createAccount( - MultichainNetworks.SOLANA, - ); - }} - data-testid="multichain-account-menu-popover-add-solana-account" - > - {t('addNewSolanaAccount')} - - - ) - ///: END:ONLY_INCLUDE_IF - } { trackEvent({ category: MetaMetricsEventCategory.Navigation, @@ -705,7 +642,6 @@ export const AccountListMenu = ({ isHidden={Boolean(account.hidden)} currentTabOrigin={currentTabOrigin} isActive={Boolean(account.active)} - privacyMode={privacyMode} {...accountListItemProps} /> diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap index 247f7aeb5c78..d22597edd89f 100644 --- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap +++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap @@ -616,7 +616,6 @@ exports[`App Header unlocked state matches snapshot: unlocked 1`] = ` >

1

diff --git a/ui/components/multichain/asset-picker-amount/asset-balance/__snapshots__/asset-balance-text.test.tsx.snap b/ui/components/multichain/asset-picker-amount/asset-balance/__snapshots__/asset-balance-text.test.tsx.snap index a0c808186082..9c0bd9c49482 100644 --- a/ui/components/multichain/asset-picker-amount/asset-balance/__snapshots__/asset-balance-text.test.tsx.snap +++ b/ui/components/multichain/asset-picker-amount/asset-balance/__snapshots__/asset-balance-text.test.tsx.snap @@ -8,7 +8,6 @@ exports[`AssetBalanceText matches snapshot 1`] = ` > prefix-fiat value diff --git a/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap b/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap index b4a4836db2d6..d53c8e7d8d8a 100644 --- a/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap +++ b/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap @@ -358,7 +358,6 @@ exports[`Connect More Accounts Modal should render correctly 1`] = ` > 0 @@ -402,7 +401,6 @@ exports[`Connect More Accounts Modal should render correctly 1`] = ` > 0 diff --git a/ui/components/multichain/funding-method-modal/funding-method-modal.test.tsx b/ui/components/multichain/funding-method-modal/funding-method-modal.test.tsx index 34ec98e671b9..509a4aa60a2a 100644 --- a/ui/components/multichain/funding-method-modal/funding-method-modal.test.tsx +++ b/ui/components/multichain/funding-method-modal/funding-method-modal.test.tsx @@ -57,7 +57,7 @@ describe('FundingMethodModal', () => { expect(queryByTestId('funding-method-modal')).toBeNull(); }); - it('should call openBuyCryptoInPdapp when the Token Marketplace item is clicked', () => { + it('should call openBuyCryptoInPdapp when the Buy Crypto item is clicked', () => { const { getByText } = renderWithProvider( { store, ); - fireEvent.click(getByText('Token marketplace')); + fireEvent.click(getByText('Buy crypto')); expect(openBuyCryptoInPdapp).toHaveBeenCalled(); }); diff --git a/ui/components/multichain/funding-method-modal/funding-method-modal.tsx b/ui/components/multichain/funding-method-modal/funding-method-modal.tsx index baa0e234a32a..47d6ed22c2e8 100644 --- a/ui/components/multichain/funding-method-modal/funding-method-modal.tsx +++ b/ui/components/multichain/funding-method-modal/funding-method-modal.tsx @@ -115,8 +115,8 @@ export const FundingMethodModal: React.FC = ({ { handleNotificationsClick()} - data-testid="notifications-menu-item" > {rpcEndpoint.name ?? new URL(rpcEndpoint.url).host} diff --git a/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx b/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx index ce68f05d0f14..066c95ab7c6d 100644 --- a/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx +++ b/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx @@ -48,7 +48,6 @@ export const NotificationsTagCounter = ({ color={TextColor.errorInverse} variant={TextVariant.bodyXs} className="notifications-tag-counter__unread-dot" - data-testid="notifications-tag-counter__unread-dot" textAlign={TextAlign.Center} > {notificationsUnreadCount > 10 ? '9+' : notificationsUnreadCount} diff --git a/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap b/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap index ad2dc490d7c0..afd02098086f 100644 --- a/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap +++ b/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap @@ -297,7 +297,6 @@ exports[`Connections Content should render correctly 1`] = ` > 966.988 @@ -341,7 +340,6 @@ exports[`Connections Content should render correctly 1`] = ` > 966.988 diff --git a/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx b/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx index d5ca0b816d48..9f77238bda9a 100644 --- a/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx +++ b/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx @@ -82,15 +82,6 @@ export const SiteCell: React.FC = ({ ]) : t('requestingFor'); - const networkMessageConnectedState = - selectedChainIdsLength === 1 - ? t('connectedWithNetworkName', [selectedNetworks[0].name]) - : t('connectedWithNetwork', [selectedChainIdsLength]); - const networkMessageNotConnectedState = - selectedChainIdsLength === 1 - ? t('requestingForNetwork', [selectedNetworks[0].name]) - : t('requestingFor'); - return ( <> = ({ { setShowEditNetworksModal(true); diff --git a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap index 7b0605b7ea60..814dc934fc9a 100644 --- a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap +++ b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap @@ -474,7 +474,6 @@ exports[`SendPage render and initialization should render correctly even when a > $0.00 @@ -518,7 +517,6 @@ exports[`SendPage render and initialization should render correctly even when a > 0 diff --git a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap index 71431a330f94..9fbf7e29879b 100644 --- a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap +++ b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap @@ -248,7 +248,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 966.988 @@ -292,7 +291,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 966.988 @@ -547,7 +545,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 0 @@ -591,7 +588,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 0 @@ -846,7 +842,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 0 @@ -890,7 +885,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 0 @@ -1154,7 +1148,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 0 @@ -1198,7 +1191,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 0 @@ -1453,7 +1445,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 0 @@ -1497,7 +1488,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 0 @@ -1765,7 +1755,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 0 @@ -1809,7 +1798,6 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` > 0 diff --git a/ui/components/multichain/ramps-card/ramps-card.js b/ui/components/multichain/ramps-card/ramps-card.js index 5fb91272ff83..ac72f4c5112f 100644 --- a/ui/components/multichain/ramps-card/ramps-card.js +++ b/ui/components/multichain/ramps-card/ramps-card.js @@ -30,6 +30,7 @@ const darkenGradient = export const RAMPS_CARD_VARIANT_TYPES = { TOKEN: 'token', + NFT: 'nft', ACTIVITY: 'activity', BTC: 'btc', }; @@ -40,8 +41,15 @@ export const RAMPS_CARD_VARIANTS = { gradient: // eslint-disable-next-line @metamask/design-tokens/color-no-hex 'linear-gradient(90deg, #0189EC 0%, #4B7AED 35%, #6774EE 58%, #706AF4 80.5%, #7C5BFC 100%)', - title: 'tipsForUsingAWallet', - body: 'tipsForUsingAWalletDescription', + title: 'fundYourWallet', + body: 'getStartedByFundingWallet', + }, + [RAMPS_CARD_VARIANT_TYPES.NFT]: { + illustrationSrc: './images/ramps-card-nft-illustration.png', + // eslint-disable-next-line @metamask/design-tokens/color-no-hex + gradient: 'linear-gradient(90deg, #F6822D 0%, #F894A7 52%, #ED94FB 92.5%)', + title: 'getStartedWithNFTs', + body: 'getStartedWithNFTsDescription', }, [RAMPS_CARD_VARIANT_TYPES.ACTIVITY]: { illustrationSrc: './images/ramps-card-activity-illustration.png', @@ -49,21 +57,22 @@ export const RAMPS_CARD_VARIANTS = { // eslint-disable-next-line @metamask/design-tokens/color-no-hex 'linear-gradient(90deg, #57C5DC 0%, #06BFDD 49.39%, #35A9C7 100%)', - title: 'tipsForUsingAWallet', - body: 'tipsForUsingAWalletDescription', + title: 'startYourJourney', + body: 'startYourJourneyDescription', }, [RAMPS_CARD_VARIANT_TYPES.BTC]: { illustrationSrc: './images/ramps-card-btc-illustration.png', gradient: // eslint-disable-next-line @metamask/design-tokens/color-no-hex 'linear-gradient(90deg, #017ED9 0%, #446FD9 35%, #5E6AD9 58%, #635ED9 80.5%, #6855D9 92.5%, #6A4FD9 100%)', - title: 'tipsForUsingAWallet', - body: 'tipsForUsingAWalletDescription', + title: 'fundYourWallet', + body: 'fundYourWalletDescription', }, }; const metamaskEntryMap = { [RAMPS_CARD_VARIANT_TYPES.TOKEN]: RampsMetaMaskEntry.TokensBanner, + [RAMPS_CARD_VARIANT_TYPES.NFT]: RampsMetaMaskEntry.NftBanner, [RAMPS_CARD_VARIANT_TYPES.ACTIVITY]: RampsMetaMaskEntry.ActivityBanner, [RAMPS_CARD_VARIANT_TYPES.BTC]: RampsMetaMaskEntry.BtcBanner, }; @@ -78,6 +87,8 @@ export const RampsCard = ({ variant, handleOnClick }) => { const { chainId, nickname } = useSelector(getMultichainCurrentNetwork); const { symbol } = useSelector(getMultichainDefaultToken); + const isTokenVariant = variant === RAMPS_CARD_VARIANT_TYPES.TOKEN; + useEffect(() => { trackEvent({ event: MetaMetricsEventName.EmptyBuyBannerDisplayed, @@ -99,7 +110,7 @@ export const RampsCard = ({ variant, handleOnClick }) => { category: MetaMetricsEventCategory.Navigation, properties: { location: `${variant} tab`, - text: `Token Marketplace`, + text: `Buy ${symbol}`, // FIXME: This might not be a number for non-EVM networks chain_id: chainId, token_symbol: symbol, @@ -121,14 +132,14 @@ export const RampsCard = ({ variant, handleOnClick }) => { }} > - {t(title)} + {t(title, [symbol])} - {t(body)} + {t(body, [symbol])} - {t('tokenMarketplace')} + {isTokenVariant ? t('getStarted') : t('buyToken', [symbol])} ); diff --git a/ui/components/multichain/ramps-card/ramps-card.stories.js b/ui/components/multichain/ramps-card/ramps-card.stories.js index 903ea3d27f9a..2a4dce444c7e 100644 --- a/ui/components/multichain/ramps-card/ramps-card.stories.js +++ b/ui/components/multichain/ramps-card/ramps-card.stories.js @@ -24,6 +24,12 @@ export const TokensStory = (args) => ( TokensStory.storyName = 'Tokens'; +export const NFTsStory = (args) => ( + +); + +NFTsStory.storyName = 'NFTs'; + export const ActivityStory = (args) => ( ); diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx index 265b334fdb57..0c3c46114541 100644 --- a/ui/components/multichain/token-list-item/token-list-item.tsx +++ b/ui/components/multichain/token-list-item/token-list-item.tsx @@ -34,8 +34,6 @@ import { ModalFooter, ModalHeader, ModalOverlay, - SensitiveText, - SensitiveTextLength, Text, } from '../../component-library'; import { @@ -84,7 +82,6 @@ type TokenListItemProps = { address?: string | null; showPercentage?: boolean; isPrimaryTokenSymbolHidden?: boolean; - privacyMode?: boolean; }; export const TokenListItem = ({ @@ -102,7 +99,6 @@ export const TokenListItem = ({ isStakeable = false, address = null, showPercentage = false, - privacyMode = false, }: TokenListItemProps) => { const t = useI18nContext(); const isEvm = useSelector(getMultichainIsEvm); @@ -302,7 +298,6 @@ export const TokenListItem = ({ as="span" fontWeight={FontWeight.Medium} variant={TextVariant.bodyMd} - display={Display.Block} ellipsis > {isStakeable ? ( @@ -380,19 +375,17 @@ export const TokenListItem = ({ ariaLabel={''} /> - {primary}{' '} {isNativeCurrency || isPrimaryTokenSymbolHidden ? '' : tokenSymbol} - + ) : ( - {secondary} - - + {primary}{' '} {isNativeCurrency || isPrimaryTokenSymbolHidden ? '' : tokenSymbol} - + )} diff --git a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap index eeb40144894b..44ba7be60b6f 100644 --- a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap +++ b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap @@ -8,7 +8,6 @@ exports[`CurrencyDisplay Component should match default snapshot 1`] = ` >
@@ -22,7 +21,6 @@ exports[`CurrencyDisplay Component should render text with a className 1`] = ` > $123.45 @@ -38,7 +36,6 @@ exports[`CurrencyDisplay Component should render text with a prefix 1`] = ` > - $123.45 diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js index 7e2569ffaee3..ca9322661d79 100644 --- a/ui/components/ui/currency-display/currency-display.component.js +++ b/ui/components/ui/currency-display/currency-display.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay'; import { EtherDenomination } from '../../../../shared/constants/common'; -import { SensitiveText, Box } from '../../component-library'; +import { Text, Box } from '../../component-library'; import { AlignItems, Display, @@ -33,7 +33,6 @@ export default function CurrencyDisplay({ textProps = {}, suffixProps = {}, isAggregatedFiatOverviewBalance = false, - privacyMode = false, ...props }) { const [title, parts] = useCurrencyDisplay(value, { @@ -69,33 +68,26 @@ export default function CurrencyDisplay({ {prefixComponent} ) : null} - {parts.prefix} {parts.value} - + {parts.suffix ? ( - {parts.suffix} - + ) : null} ); @@ -123,7 +115,6 @@ const CurrencyDisplayPropTypes = { textProps: PropTypes.object, suffixProps: PropTypes.object, isAggregatedFiatOverviewBalance: PropTypes.bool, - privacyMode: PropTypes.bool, }; CurrencyDisplay.propTypes = CurrencyDisplayPropTypes; diff --git a/ui/components/ui/token-currency-display/token-currency-display.stories.tsx b/ui/components/ui/token-currency-display/token-currency-display.stories.tsx index 932d54210b84..7cf850c42c84 100644 --- a/ui/components/ui/token-currency-display/token-currency-display.stories.tsx +++ b/ui/components/ui/token-currency-display/token-currency-display.stories.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; +import { Meta, Story } from '@storybook/react'; import TokenCurrencyDisplay from './token-currency-display.component'; +import { TokenCurrencyDisplayProps } from './token-currency-display.types'; -const meta: Meta = { +export default { title: 'Components/UI/TokenCurrencyDisplay', component: TokenCurrencyDisplay, argTypes: { @@ -11,15 +12,14 @@ const meta: Meta = { token: { control: 'object' }, prefix: { control: 'text' }, }, - args: { - className: '', - transactionData: '0x123', - token: { symbol: 'ETH' }, - prefix: '', - }, -}; +} as Meta; -export default meta; -type Story = StoryObj; +const Template: Story = (args) => ; -export const Default: Story = {}; +export const Default = Template.bind({}); +Default.args = { + className: '', + transactionData: '0x123', + token: { symbol: 'ETH' }, + prefix: '', +}; diff --git a/ui/contexts/assetPolling.tsx b/ui/contexts/assetPolling.tsx deleted file mode 100644 index 63cef9667fbd..000000000000 --- a/ui/contexts/assetPolling.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { ReactNode } from 'react'; -import useCurrencyRatePolling from '../hooks/useCurrencyRatePolling'; -import useTokenRatesPolling from '../hooks/useTokenRatesPolling'; - -// This provider is a step towards making controller polling fully UI based. -// Eventually, individual UI components will call the use*Polling hooks to -// poll and return particular data. This polls globally in the meantime. -export const AssetPollingProvider = ({ children }: { children: ReactNode }) => { - useCurrencyRatePolling(); - useTokenRatesPolling(); - - return <>{children}; -}; diff --git a/ui/contexts/currencyRate.js b/ui/contexts/currencyRate.js new file mode 100644 index 000000000000..6739b730a882 --- /dev/null +++ b/ui/contexts/currencyRate.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import useCurrencyRatePolling from '../hooks/useCurrencyRatePolling'; + +export const CurrencyRateProvider = ({ children }) => { + useCurrencyRatePolling(); + + return <>{children}; +}; + +CurrencyRateProvider.propTypes = { + children: PropTypes.node, +}; diff --git a/ui/contexts/metametrics.js b/ui/contexts/metametrics.js index b7870babfbb7..6445362f1f60 100644 --- a/ui/contexts/metametrics.js +++ b/ui/contexts/metametrics.js @@ -26,7 +26,7 @@ import { trackMetaMetricsEvent, trackMetaMetricsPage } from '../store/actions'; // type imports /** - * @typedef {import('../../shared/constants/metametrics').UnsanitizedMetaMetricsEventPayload} MetaMetricsEventPayload + * @typedef {import('../../shared/constants/metametrics').MetaMetricsEventPayload} MetaMetricsEventPayload * @typedef {import('../../shared/constants/metametrics').MetaMetricsEventOptions} MetaMetricsEventOptions * @typedef {import('../../shared/constants/metametrics').MetaMetricsPageObject} MetaMetricsPageObject * @typedef {import('../../shared/constants/metametrics').MetaMetricsReferrerObject} MetaMetricsReferrerObject diff --git a/ui/ducks/app/app.test.js b/ui/ducks/app/app.test.js index 27b20a5841b3..9a7a93ea958b 100644 --- a/ui/ducks/app/app.test.js +++ b/ui/ducks/app/app.test.js @@ -339,23 +339,4 @@ describe('App State', () => { expect(state.showDataDeletionErrorModal).toStrictEqual(false); }); - - it('displays error in settings', () => { - const state = reduceApp(metamaskState, { - type: actions.SHOW_SETTINGS_PAGE_ERROR, - payload: 'settings page error', - }); - - expect(state.errorInSettings).toStrictEqual('settings page error'); - }); - - it('hides error in settings', () => { - const displayErrorInSettings = { errorInSettings: 'settings page error' }; - const oldState = { ...metamaskState, ...displayErrorInSettings }; - const state = reduceApp(oldState, { - type: actions.HIDE_SETTINGS_PAGE_ERROR, - }); - - expect(state.errorInSettings).toBeNull(); - }); }); diff --git a/ui/ducks/app/app.ts b/ui/ducks/app/app.ts index 81f875446f1e..e6a7855ce7a5 100644 --- a/ui/ducks/app/app.ts +++ b/ui/ducks/app/app.ts @@ -105,7 +105,6 @@ type AppState = { snapsInstallPrivacyWarningShown: boolean; isAddingNewNetwork: boolean; isMultiRpcOnboarding: boolean; - errorInSettings: string | null; }; export type AppSliceState = { @@ -193,7 +192,6 @@ const initialState: AppState = { snapsInstallPrivacyWarningShown: false, isAddingNewNetwork: false, isMultiRpcOnboarding: false, - errorInSettings: null, }; export default function reduceApp( @@ -634,16 +632,6 @@ export default function reduceApp( ...appState, showDataDeletionErrorModal: false, }; - case actionConstants.SHOW_SETTINGS_PAGE_ERROR: - return { - ...appState, - errorInSettings: action.payload, - }; - case actionConstants.HIDE_SETTINGS_PAGE_ERROR: - return { - ...appState, - errorInSettings: null, - }; ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) case actionConstants.SHOW_KEYRING_SNAP_REMOVAL_RESULT: return { @@ -732,27 +720,6 @@ export function setCustomTokenAmount(payload: string): PayloadAction { return { type: actionConstants.SET_CUSTOM_TOKEN_AMOUNT, payload }; } -/** - * An action creator for display a error to the user in various places in the - * UI. It will not be cleared until a new warning replaces it or `hideWarning` - * is called. - * - * @param payload - The warning to show. - * @returns The action to display the warning. - */ -export function displayErrorInSettings(payload: string): PayloadAction { - return { - type: actionConstants.SHOW_SETTINGS_PAGE_ERROR, - payload, - }; -} - -export function hideErrorInSettings() { - return { - type: actionConstants.HIDE_SETTINGS_PAGE_ERROR, - }; -} - // Selectors export function getQrCodeData(state: AppSliceState): { type?: string | null; diff --git a/ui/ducks/bridge/actions.ts b/ui/ducks/bridge/actions.ts index f045c0dfbc12..5e50b004b774 100644 --- a/ui/ducks/bridge/actions.ts +++ b/ui/ducks/bridge/actions.ts @@ -11,31 +11,31 @@ import { import { forceUpdateMetamaskState } from '../../store/actions'; import { submitRequestToBackground } from '../../store/background-connection'; import { MetaMaskReduxDispatch } from '../../store/store'; -import { QuoteRequest } from '../../pages/bridge/types'; import { bridgeSlice } from './bridge'; const { - setToChainId, + setToChainId: setToChainId_, setFromToken, setToToken, setFromTokenInputValue, resetInputFields, + switchToAndFromTokens, } = bridgeSlice.actions; export { - setToChainId, - resetInputFields, - setToToken, setFromToken, + setToToken, setFromTokenInputValue, + switchToAndFromTokens, + resetInputFields, }; const callBridgeControllerMethod = ( bridgeAction: BridgeUserAction | BridgeBackgroundAction, - args?: T, + args?: T[], ) => { return async (dispatch: MetaMaskReduxDispatch) => { - await submitRequestToBackground(bridgeAction, [args]); + await submitRequestToBackground(bridgeAction, args); await forceUpdateMetamaskState(dispatch); }; }; @@ -49,40 +49,24 @@ export const setBridgeFeatureFlags = () => { }; }; -export const resetBridgeState = () => { - return async (dispatch: MetaMaskReduxDispatch) => { - dispatch(resetInputFields()); - dispatch(callBridgeControllerMethod(BridgeBackgroundAction.RESET_STATE)); - }; -}; - // User actions export const setFromChain = (chainId: Hex) => { return async (dispatch: MetaMaskReduxDispatch) => { dispatch( - callBridgeControllerMethod( - BridgeUserAction.SELECT_SRC_NETWORK, + callBridgeControllerMethod(BridgeUserAction.SELECT_SRC_NETWORK, [ chainId, - ), + ]), ); }; }; export const setToChain = (chainId: Hex) => { return async (dispatch: MetaMaskReduxDispatch) => { + dispatch(setToChainId_(chainId)); dispatch( - callBridgeControllerMethod( - BridgeUserAction.SELECT_DEST_NETWORK, + callBridgeControllerMethod(BridgeUserAction.SELECT_DEST_NETWORK, [ chainId, - ), - ); - }; -}; - -export const updateQuoteRequestParams = (params: Partial) => { - return async (dispatch: MetaMaskReduxDispatch) => { - await dispatch( - callBridgeControllerMethod(BridgeUserAction.UPDATE_QUOTE_PARAMS, params), + ]), ); }; }; diff --git a/ui/ducks/bridge/bridge.test.ts b/ui/ducks/bridge/bridge.test.ts index dc9596fcafba..f4a566c233b5 100644 --- a/ui/ducks/bridge/bridge.test.ts +++ b/ui/ducks/bridge/bridge.test.ts @@ -1,6 +1,5 @@ import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; -import { zeroAddress } from 'ethereumjs-util'; import { createBridgeMockStore } from '../../../test/jest/mock-store'; import { CHAIN_IDS } from '../../../shared/constants/network'; import { setBackgroundConnection } from '../../store/background-connection'; @@ -19,9 +18,7 @@ import { setToToken, setFromChain, resetInputFields, - setToChainId, - updateQuoteRequestParams, - resetBridgeState, + switchToAndFromTokens, } from './actions'; const middleware = [thunk]; @@ -34,23 +31,9 @@ describe('Ducks - Bridge', () => { store.clearActions(); }); - describe('setToChainId', () => { - it('calls the "bridge/setToChainId" action', () => { - const state = store.getState().bridge; - const actionPayload = CHAIN_IDS.OPTIMISM; - - store.dispatch(setToChainId(actionPayload as never) as never); - - // Check redux state - const actions = store.getActions(); - expect(actions[0].type).toStrictEqual('bridge/setToChainId'); - const newState = bridgeReducer(state, actions[0]); - expect(newState.toChainId).toStrictEqual(actionPayload); - }); - }); - describe('setToChain', () => { - it('calls the selectDestNetwork background action', () => { + it('calls the "bridge/setToChainId" action and the selectDestNetwork background action', () => { + const state = store.getState().bridge; const actionPayload = CHAIN_IDS.OPTIMISM; const mockSelectDestNetwork = jest.fn().mockReturnValue({}); @@ -60,6 +43,11 @@ describe('Ducks - Bridge', () => { store.dispatch(setToChain(actionPayload as never) as never); + // Check redux state + const actions = store.getActions(); + expect(actions[0].type).toStrictEqual('bridge/setToChainId'); + const newState = bridgeReducer(state, actions[0]); + expect(newState.toChainId).toStrictEqual(actionPayload); // Check background state expect(mockSelectDestNetwork).toHaveBeenCalledTimes(1); expect(mockSelectDestNetwork).toHaveBeenCalledWith( @@ -73,7 +61,7 @@ describe('Ducks - Bridge', () => { it('calls the "bridge/setFromToken" action', () => { const state = store.getState().bridge; const actionPayload = { symbol: 'SYMBOL', address: '0x13341432' }; - store.dispatch(setFromToken(actionPayload as never) as never); + store.dispatch(setFromToken(actionPayload)); const actions = store.getActions(); expect(actions[0].type).toStrictEqual('bridge/setFromToken'); const newState = bridgeReducer(state, actions[0]); @@ -85,8 +73,7 @@ describe('Ducks - Bridge', () => { it('calls the "bridge/setToToken" action', () => { const state = store.getState().bridge; const actionPayload = { symbol: 'SYMBOL', address: '0x13341431' }; - - store.dispatch(setToToken(actionPayload as never) as never); + store.dispatch(setToToken(actionPayload)); const actions = store.getActions(); expect(actions[0].type).toStrictEqual('bridge/setToToken'); const newState = bridgeReducer(state, actions[0]); @@ -98,8 +85,7 @@ describe('Ducks - Bridge', () => { it('calls the "bridge/setFromTokenInputValue" action', () => { const state = store.getState().bridge; const actionPayload = '10'; - - store.dispatch(setFromTokenInputValue(actionPayload as never) as never); + store.dispatch(setFromTokenInputValue(actionPayload)); const actions = store.getActions(); expect(actions[0].type).toStrictEqual('bridge/setFromTokenInputValue'); const newState = bridgeReducer(state, actions[0]); @@ -151,59 +137,29 @@ describe('Ducks - Bridge', () => { }); }); - describe('updateQuoteRequestParams', () => { - it('dispatches quote params to the bridge controller', () => { - const mockUpdateParams = jest.fn(); - setBackgroundConnection({ - [BridgeUserAction.UPDATE_QUOTE_PARAMS]: mockUpdateParams, - } as never); - - store.dispatch( - updateQuoteRequestParams({ - srcChainId: 1, - srcTokenAddress: zeroAddress(), - destTokenAddress: undefined, - }) as never, - ); - - expect(mockUpdateParams).toHaveBeenCalledTimes(1); - expect(mockUpdateParams).toHaveBeenCalledWith( - { - srcChainId: 1, - srcTokenAddress: zeroAddress(), - destTokenAddress: undefined, - }, - expect.anything(), - ); - }); - }); - - describe('resetBridgeState', () => { - it('dispatches action to the bridge controller', () => { + describe('switchToAndFromTokens', () => { + it('switches to and from input values', async () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any - const mockStore = configureMockStore(middleware)( - createBridgeMockStore({}, { fromTokenInputValue: '10' }), + const bridgeStore = configureMockStore(middleware)( + createBridgeMockStore( + {}, + { + toChainId: CHAIN_IDS.MAINNET, + fromToken: { symbol: 'WETH', address: '0x13341432' }, + toToken: { symbol: 'USDC', address: '0x13341431' }, + fromTokenInputValue: '10', + }, + ), ); - const state = mockStore.getState().bridge; - const mockResetBridgeState = jest.fn(); - setBackgroundConnection({ - [BridgeBackgroundAction.RESET_STATE]: mockResetBridgeState, - } as never); - - mockStore.dispatch(resetBridgeState() as never); - - expect(mockResetBridgeState).toHaveBeenCalledTimes(1); - expect(mockResetBridgeState).toHaveBeenCalledWith( - undefined, - expect.anything(), - ); - const actions = mockStore.getActions(); - expect(actions[0].type).toStrictEqual('bridge/resetInputFields'); + const state = bridgeStore.getState().bridge; + bridgeStore.dispatch(switchToAndFromTokens(CHAIN_IDS.POLYGON)); + const actions = bridgeStore.getActions(); + expect(actions[0].type).toStrictEqual('bridge/switchToAndFromTokens'); const newState = bridgeReducer(state, actions[0]); expect(newState).toStrictEqual({ - toChainId: null, - fromToken: null, - toToken: null, + toChainId: CHAIN_IDS.POLYGON, + fromToken: { symbol: 'USDC', address: '0x13341431' }, + toToken: { symbol: 'WETH', address: '0x13341432' }, fromTokenInputValue: null, }); }); diff --git a/ui/ducks/bridge/bridge.ts b/ui/ducks/bridge/bridge.ts index c75030c7591d..9ec744d9e953 100644 --- a/ui/ducks/bridge/bridge.ts +++ b/ui/ducks/bridge/bridge.ts @@ -39,6 +39,12 @@ const bridgeSlice = createSlice({ resetInputFields: () => ({ ...initialState, }), + switchToAndFromTokens: (state, { payload }) => ({ + toChainId: payload, + fromToken: state.toToken, + toToken: state.fromToken, + fromTokenInputValue: null, + }), }, }); diff --git a/ui/ducks/bridge/selectors.test.ts b/ui/ducks/bridge/selectors.test.ts index e39f73f2fa15..6be67515e6e4 100644 --- a/ui/ducks/bridge/selectors.test.ts +++ b/ui/ducks/bridge/selectors.test.ts @@ -6,10 +6,8 @@ import { } from '../../../shared/constants/network'; import { ALLOWED_BRIDGE_CHAIN_IDS } from '../../../shared/constants/bridge'; import { mockNetworkState } from '../../../test/stub/networks'; -import mockErc20Erc20Quotes from '../../../test/data/bridge/mock-quotes-erc20-erc20.json'; import { getAllBridgeableNetworks, - getBridgeQuotes, getFromAmount, getFromChain, getFromChains, @@ -397,7 +395,7 @@ describe('Bridge selectors', () => { const state = createBridgeMockStore(); const result = getToAmount(state as never); - expect(result).toStrictEqual(undefined); + expect(result).toStrictEqual('0'); }); }); @@ -493,81 +491,4 @@ describe('Bridge selectors', () => { expect(result).toStrictEqual([{ address: '0x00', symbol: 'TEST' }]); }); }); - - describe('getBridgeQuotes', () => { - it('returns quote list and fetch data, insufficientBal=false,quotesRefreshCount=5', () => { - const state = createBridgeMockStore( - { extensionConfig: { maxRefreshCount: 5 } }, - { toChainId: '0x1' }, - { - quoteRequest: { insufficientBal: false }, - quotes: mockErc20Erc20Quotes, - quotesFetchStatus: 1, - quotesRefreshCount: 5, - quotesLastFetched: 100, - srcTokens: { '0x00': { address: '0x00', symbol: 'TEST' } }, - srcTopAssets: [{ address: '0x00', symbol: 'TEST' }], - }, - ); - const result = getBridgeQuotes(state as never); - - expect(result).toStrictEqual({ - quotes: mockErc20Erc20Quotes, - quotesLastFetchedMs: 100, - isLoading: false, - quotesRefreshCount: 5, - isQuoteGoingToRefresh: false, - }); - }); - - it('returns quote list and fetch data, insufficientBal=false,quotesRefreshCount=2', () => { - const state = createBridgeMockStore( - { extensionConfig: { maxRefreshCount: 5 } }, - { toChainId: '0x1' }, - { - quoteRequest: { insufficientBal: false }, - quotes: mockErc20Erc20Quotes, - quotesFetchStatus: 1, - quotesRefreshCount: 2, - quotesLastFetched: 100, - srcTokens: { '0x00': { address: '0x00', symbol: 'TEST' } }, - srcTopAssets: [{ address: '0x00', symbol: 'TEST' }], - }, - ); - const result = getBridgeQuotes(state as never); - - expect(result).toStrictEqual({ - quotes: mockErc20Erc20Quotes, - quotesLastFetchedMs: 100, - isLoading: false, - quotesRefreshCount: 2, - isQuoteGoingToRefresh: true, - }); - }); - - it('returns quote list and fetch data, insufficientBal=true', () => { - const state = createBridgeMockStore( - { extensionConfig: { maxRefreshCount: 5 } }, - { toChainId: '0x1' }, - { - quoteRequest: { insufficientBal: true }, - quotes: mockErc20Erc20Quotes, - quotesFetchStatus: 1, - quotesRefreshCount: 1, - quotesLastFetched: 100, - srcTokens: { '0x00': { address: '0x00', symbol: 'TEST' } }, - srcTopAssets: [{ address: '0x00', symbol: 'TEST' }], - }, - ); - const result = getBridgeQuotes(state as never); - - expect(result).toStrictEqual({ - quotes: mockErc20Erc20Quotes, - quotesLastFetchedMs: 100, - isLoading: false, - quotesRefreshCount: 1, - isQuoteGoingToRefresh: false, - }); - }); - }); }); diff --git a/ui/ducks/bridge/selectors.ts b/ui/ducks/bridge/selectors.ts index 60704aa6f094..8cd56928fc66 100644 --- a/ui/ducks/bridge/selectors.ts +++ b/ui/ducks/bridge/selectors.ts @@ -3,13 +3,12 @@ import { NetworkState, } from '@metamask/network-controller'; import { uniqBy } from 'lodash'; -import { createSelector } from 'reselect'; import { getNetworkConfigurationsByChainId, getIsBridgeEnabled, getSwapsDefaultToken, SwapsEthToken, -} from '../../selectors/selectors'; +} from '../../selectors'; import { ALLOWED_BRIDGE_CHAIN_IDS } from '../../../shared/constants/bridge'; import { BridgeControllerState, @@ -20,10 +19,6 @@ import { import { createDeepEqualSelector } from '../../selectors/util'; import { getProviderConfig } from '../metamask/metamask'; import { SwapsTokenObject } from '../../../shared/constants/swaps'; -import { calcTokenAmount } from '../../../shared/lib/transactions-controller-utils'; -// TODO: Remove restricted import -// eslint-disable-next-line import/no-restricted-paths -import { RequestStatus } from '../../../app/scripts/controllers/bridge/constants'; import { BridgeState } from './bridge'; type BridgeAppState = { @@ -115,7 +110,7 @@ export const getToTokens = (state: BridgeAppState) => { export const getFromToken = ( state: BridgeAppState, -): SwapsTokenObject | SwapsEthToken | null => { +): SwapsTokenObject | SwapsEthToken => { return state.bridge.fromToken?.address ? state.bridge.fromToken : getSwapsDefaultToken(state); @@ -129,61 +124,10 @@ export const getToToken = ( export const getFromAmount = (state: BridgeAppState): string | null => state.bridge.fromTokenInputValue; - -export const getQuoteRequest = (state: BridgeAppState) => { - const { quoteRequest } = state.metamask.bridgeState; - return quoteRequest; +export const getToAmount = (_state: BridgeAppState) => { + return '0'; }; -export const getBridgeQuotesConfig = (state: BridgeAppState) => - state.metamask.bridgeState?.bridgeFeatureFlags[ - BridgeFeatureFlagsKey.EXTENSION_CONFIG - ] ?? {}; - -export const getBridgeQuotes = createSelector( - (state: BridgeAppState) => state.metamask.bridgeState.quotes, - (state: BridgeAppState) => state.metamask.bridgeState.quotesLastFetched, - (state: BridgeAppState) => - state.metamask.bridgeState.quotesLoadingStatus === RequestStatus.LOADING, - (state: BridgeAppState) => state.metamask.bridgeState.quotesRefreshCount, - getBridgeQuotesConfig, - getQuoteRequest, - ( - quotes, - quotesLastFetchedMs, - isLoading, - quotesRefreshCount, - { maxRefreshCount }, - { insufficientBal }, - ) => { - return { - quotes, - quotesLastFetchedMs, - isLoading, - quotesRefreshCount, - isQuoteGoingToRefresh: insufficientBal - ? false - : quotesRefreshCount < maxRefreshCount, - }; - }, -); - -export const getRecommendedQuote = createSelector( - getBridgeQuotes, - ({ quotes }) => { - return quotes[0]; - }, -); - -export const getToAmount = createSelector(getRecommendedQuote, (quote) => - quote - ? calcTokenAmount( - quote.quote.destTokenAmount, - quote.quote.destAsset.decimals, - ) - : undefined, -); - export const getIsBridgeTx = createDeepEqualSelector( getFromChain, getToChain, diff --git a/ui/ducks/locale/locale.js b/ui/ducks/locale/locale.js new file mode 100644 index 000000000000..5118a749ab58 --- /dev/null +++ b/ui/ducks/locale/locale.js @@ -0,0 +1,42 @@ +import { createSelector } from 'reselect'; +import * as actionConstants from '../../store/actionConstants'; + +export default function reduceLocaleMessages(state = {}, { type, payload }) { + switch (type) { + case actionConstants.SET_CURRENT_LOCALE: + return { + ...state, + current: payload.messages, + currentLocale: payload.locale, + }; + default: + return state; + } +} + +/** + * This selector returns a code from file://./../../../app/_locales/index.json. + * + * NOT SAFE FOR INTL API USE. Use getIntlLocale instead for that. + * + * @param state + * @returns {string} the user's selected locale. + * These codes are not safe to use with the Intl API. + */ +export const getCurrentLocale = (state) => state.localeMessages.currentLocale; + +/** + * This selector returns a + * [BCP 47 Language Tag](https://en.wikipedia.org/wiki/IETF_language_tag) + * for use with the Intl API. + * + * @returns {Intl.UnicodeBCP47LocaleIdentifier} the user's selected locale. + */ +export const getIntlLocale = createSelector( + getCurrentLocale, + (locale) => Intl.getCanonicalLocales(locale?.replace(/_/gu, '-'))[0], +); + +export const getCurrentLocaleMessages = (state) => state.localeMessages.current; + +export const getEnLocaleMessages = (state) => state.localeMessages.en; diff --git a/ui/ducks/locale/locale.test.ts b/ui/ducks/locale/locale.test.ts index 67627bb73423..37fc1f99e29a 100644 --- a/ui/ducks/locale/locale.test.ts +++ b/ui/ducks/locale/locale.test.ts @@ -1,80 +1,32 @@ // TODO: Remove restricted import // eslint-disable-next-line import/no-restricted-paths import locales from '../../../app/_locales/index.json'; -import testData from '../../../test/data/mock-state.json'; +import { getIntlLocale } from './locale'; -import { - getCurrentLocale, - getIntlLocale, - getCurrentLocaleMessages, - getEnLocaleMessages, -} from './locale'; - -// Mock state creation functions const createMockStateWithLocale = (locale: string) => ({ localeMessages: { currentLocale: locale }, }); -describe('Locale Selectors', () => { - describe('getCurrentLocale', () => { - it('returns the current locale from the state', () => { - expect(getCurrentLocale(testData)).toBe('en'); - }); +describe('getIntlLocale', () => { + it('returns the canonical BCP 47 language tag for the currently selected locale', () => { + const mockState = createMockStateWithLocale('ab-cd'); - it('returns undefined if no current locale is set', () => { - const newAppState = { - ...testData, - localeMessages: { - currentLocale: undefined, - }, - }; - expect(getCurrentLocale(newAppState)).toBeUndefined(); - }); + expect(getIntlLocale(mockState)).toBe('ab-CD'); }); - describe('getIntlLocale', () => { - it('returns the canonical BCP 47 language tag for the currently selected locale', () => { - const mockState = createMockStateWithLocale('en_US'); - expect(getIntlLocale(mockState)).toBe('en-US'); - }); + it('throws an error if locale cannot be made into BCP 47 language tag', () => { + const mockState = createMockStateWithLocale('xxxinvalid-locale'); - locales.forEach((locale: { code: string; name: string }) => { - it(`handles supported locale - "${locale.code}"`, () => { - const mockState = createMockStateWithLocale(locale.code); - expect(() => getIntlLocale(mockState)).not.toThrow(); - }); - }); + expect(() => getIntlLocale(mockState)).toThrow(); }); - describe('getCurrentLocaleMessages', () => { - it('returns the current locale messages from the state', () => { - expect(getCurrentLocaleMessages(testData)).toEqual({ user: 'user' }); - }); - - it('returns undefined if there are no current locale messages', () => { - const newAppState = { - ...testData, - localeMessages: { - current: undefined, - }, - }; - expect(getCurrentLocaleMessages(newAppState)).toEqual(undefined); - }); - }); + // @ts-expect-error This is missing from the Mocha type definitions + it.each(locales)( + 'handles all supported locales – "%s"', + (locale: { code: string; name: string }) => { + const mockState = createMockStateWithLocale(locale.code); - describe('getEnLocaleMessages', () => { - it('returns the English locale messages from the state', () => { - expect(getEnLocaleMessages(testData)).toEqual({ user: 'user' }); - }); - - it('returns undefined if there are no English locale messages', () => { - const newAppState = { - ...testData, - localeMessages: { - en: undefined, - }, - }; - expect(getEnLocaleMessages(newAppState)).toBeUndefined(); - }); - }); + expect(() => getIntlLocale(mockState)).not.toThrow(); + }, + ); }); diff --git a/ui/ducks/locale/locale.ts b/ui/ducks/locale/locale.ts deleted file mode 100644 index 2ca0cbaac4dc..000000000000 --- a/ui/ducks/locale/locale.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { createSelector } from 'reselect'; -import { Action } from 'redux'; // Import types for actions -import * as actionConstants from '../../store/actionConstants'; -import { FALLBACK_LOCALE } from '../../../shared/modules/i18n'; - -/** - * Type for the locale messages part of the state - */ -type LocaleMessagesState = { - current?: { [key: string]: string }; // Messages for the current locale - currentLocale?: string; // User's selected locale (unsafe for Intl API) - en?: { [key: string]: string }; // English locale messages -}; - -/** - * Payload for the SET_CURRENT_LOCALE action - */ -type SetCurrentLocaleAction = Action & { - type: typeof actionConstants.SET_CURRENT_LOCALE; - payload: { - messages: { [key: string]: string }; - locale: string; - }; -}; - -/** - * Type for actions that can be handled by reduceLocaleMessages - */ -type LocaleMessagesActions = SetCurrentLocaleAction; - -/** - * Initial state for localeMessages reducer - */ -const initialState: LocaleMessagesState = {}; - -/** - * Reducer for localeMessages - * - * @param state - The current state - * @param action - The action being dispatched - * @returns The updated locale messages state - */ -export default function reduceLocaleMessages( - // eslint-disable-next-line @typescript-eslint/default-param-last - state: LocaleMessagesState = initialState, - action: LocaleMessagesActions, -): LocaleMessagesState { - switch (action.type) { - case actionConstants.SET_CURRENT_LOCALE: - return { - ...state, - current: action.payload.messages, - currentLocale: action.payload.locale, - }; - default: - return state; - } -} - -/** - * Type for the overall Redux state - */ -type AppState = { - localeMessages: LocaleMessagesState; -}; - -/** - * This selector returns a code from file://./../../../app/_locales/index.json. - * NOT SAFE FOR INTL API USE. Use getIntlLocale instead for that. - * - * @param state - The overall state - * @returns The user's selected locale - */ -export const getCurrentLocale = (state: AppState): string | undefined => - state.localeMessages.currentLocale; - -/** - * This selector returns a BCP 47 Language Tag for use with the Intl API. - * - * @returns The user's selected locale in BCP 47 format - */ -export const getIntlLocale = createSelector( - getCurrentLocale, - (locale): string => - Intl.getCanonicalLocales( - locale ? locale.replace(/_/gu, '-') : FALLBACK_LOCALE, - )[0], -); - -/** - * This selector returns the current locale messages. - * - * @param state - The overall state - * @returns The current locale's messages - */ -export const getCurrentLocaleMessages = ( - state: AppState, -): Record | undefined => state.localeMessages.current; - -/** - * This selector returns the English locale messages. - * - * @param state - The overall state - * @returns The English locale's messages - */ -export const getEnLocaleMessages = ( - state: AppState, -): Record | undefined => state.localeMessages.en; diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js index 63ff92a11ccc..05cc6d46cb27 100644 --- a/ui/ducks/metamask/metamask.js +++ b/ui/ducks/metamask/metamask.js @@ -17,9 +17,9 @@ import { checkNetworkAndAccountSupports1559, getAddressBook, getSelectedNetworkClientId, + getSelectedInternalAccount, getNetworkConfigurationsByChainId, -} from '../../selectors/selectors'; -import { getSelectedInternalAccount } from '../../selectors/accounts'; +} from '../../selectors'; import * as actionConstants from '../../store/actionConstants'; import { updateTransactionGasFees } from '../../store/actions'; import { setCustomGasLimit, setCustomGasPrice } from '../gas/gas.duck'; @@ -47,10 +47,9 @@ const initialState = { showExtensionInFullSizeView: false, showFiatInTestnets: false, showTestNetworks: false, - smartTransactionsOptInStatus: true, + smartTransactionsOptInStatus: false, petnamesEnabled: true, featureNotificationsEnabled: false, - privacyMode: false, showMultiRpcModal: false, }, firstTimeFlowType: null, diff --git a/ui/ducks/ramps/ramps.test.ts b/ui/ducks/ramps/ramps.test.ts index 8bd6865295d8..3cd543a65219 100644 --- a/ui/ducks/ramps/ramps.test.ts +++ b/ui/ducks/ramps/ramps.test.ts @@ -205,7 +205,7 @@ describe('rampsSlice', () => { }); it('should return true when Bitcoin is buyable and current chain is Bitcoin', () => { - getCurrentChainIdMock.mockReturnValue(CHAIN_IDS.MAINNET); + getCurrentChainIdMock.mockReturnValue(MultichainNetworks.BITCOIN); getMultichainIsBitcoinMock.mockReturnValue(true); const mockBuyableChains = [ { chainId: MultichainNetworks.BITCOIN, active: true }, @@ -219,7 +219,7 @@ describe('rampsSlice', () => { }); it('should return false when Bitcoin is not buyable and current chain is Bitcoin', () => { - getCurrentChainIdMock.mockReturnValue(CHAIN_IDS.MAINNET); + getCurrentChainIdMock.mockReturnValue(MultichainNetworks.BITCOIN); getMultichainIsBitcoinMock.mockReturnValue(true); const mockBuyableChains = [ { chainId: MultichainNetworks.BITCOIN, active: false }, diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js index 30cbc6eeb5dd..700fd466004d 100644 --- a/ui/ducks/send/send.js +++ b/ui/ducks/send/send.js @@ -2615,12 +2615,7 @@ export function updateSendAsset( let missingProperty = STANDARD_TO_REQUIRED_PROPERTIES[ providedDetails.standard - ]?.find((property) => { - if (providedDetails.collection && property === 'symbol') { - return providedDetails.collection[property] === undefined; - } - return providedDetails[property] === undefined; - }); + ]?.find((property) => providedDetails[property] === undefined); let details; @@ -2657,9 +2652,10 @@ export function updateSendAsset( providedDetails.address, sendingAddress, providedDetails.tokenId, - ).catch(() => { + ).catch((error) => { // prevent infinite stuck loading state dispatch(hideLoadingIndication()); + throw error; })), }; } @@ -2674,7 +2670,7 @@ export function updateSendAsset( if (details.standard === TokenStandard.ERC20) { asset.balance = - details.balance && details.decimals !== undefined + details.balance && typeof details.decimals === 'number' ? addHexPrefix( calcTokenAmount(details.balance, details.decimals).toString(16), ) diff --git a/ui/ducks/swaps/swaps.js b/ui/ducks/swaps/swaps.js index d23c0ce69381..8dd7336d7a62 100644 --- a/ui/ducks/swaps/swaps.js +++ b/ui/ducks/swaps/swaps.js @@ -858,7 +858,6 @@ export const fetchQuotesAndSetQuoteState = ( stx_enabled: smartTransactionsEnabled, current_stx_enabled: currentSmartTransactionsEnabled, stx_user_opt_in: getSmartTransactionsOptInStatusForMetrics(state), - gas_included: newSelectedQuote.isGasIncludedTrade, anonymizedData: true, }, }); diff --git a/ui/helpers/constants/settings.js b/ui/helpers/constants/settings.js index 232bcdae5aff..c22b0cbcf183 100644 --- a/ui/helpers/constants/settings.js +++ b/ui/helpers/constants/settings.js @@ -1,8 +1,4 @@ /* eslint-disable @metamask/design-tokens/color-no-hex*/ -// TODO: Remove restricted import -// eslint-disable-next-line import/no-restricted-paths -import { getPlatform } from '../../../app/scripts/lib/util'; -import { PLATFORM_FIREFOX } from '../../../shared/constants/app'; import { IconName } from '../../components/component-library'; import { ADVANCED_ROUTE, @@ -23,7 +19,6 @@ import { * # @param {string} route tab route with appended arbitrary, unique anchor tag / hash route * # @param {string} iconName * # @param {string} featureFlag ENV variable name. If the ENV value exists, the route will be searchable; else, route will not be searchable. - * # @param {boolean} hidden If true, the route will not be searchable. */ /** @type {SettingRouteConfig[]} */ @@ -159,16 +154,6 @@ const SETTINGS_CONSTANTS = [ route: `${ADVANCED_ROUTE}#export-data`, icon: 'fas fa-download', }, - // advanced settingsRefs[11] - { - tabMessage: (t) => t('advanced'), - sectionMessage: (t) => t('overrideContentSecurityPolicyHeader'), - descriptionMessage: (t) => - t('overrideContentSecurityPolicyHeaderDescription'), - route: `${ADVANCED_ROUTE}#override-content-security-policy-header`, - icon: 'fas fa-sliders-h', - hidden: getPlatform() !== PLATFORM_FIREFOX, - }, { tabMessage: (t) => t('contacts'), sectionMessage: (t) => t('contacts'), diff --git a/ui/helpers/utils/notification.util.ts b/ui/helpers/utils/notification.util.ts index afbba2b88172..489f1ca2f272 100644 --- a/ui/helpers/utils/notification.util.ts +++ b/ui/helpers/utils/notification.util.ts @@ -420,11 +420,9 @@ export const getNetworkFees = async (notification: OnChainRawNotification) => { const rpcUrl = getRpcUrlByChainId(`0x${chainId}` as HexChainId); const connection = { url: rpcUrl, - headers: process.env.STORYBOOK - ? undefined - : { - 'Infura-Source': 'metamask/metamask', - }, + headers: { + 'Infura-Source': 'metamask/metamask', + }, }; const provider = new JsonRpcProvider(connection); diff --git a/ui/helpers/utils/settings-search.js b/ui/helpers/utils/settings-search.js index 8c11ad8fad52..07b4501c0208 100644 --- a/ui/helpers/utils/settings-search.js +++ b/ui/helpers/utils/settings-search.js @@ -8,10 +8,8 @@ export function getSettingsRoutes() { if (settingsRoutes) { return settingsRoutes; } - settingsRoutes = SETTINGS_CONSTANTS.filter( - (routeObject) => - (routeObject.featureFlag ? process.env[routeObject.featureFlag] : true) && - !routeObject.hidden, + settingsRoutes = SETTINGS_CONSTANTS.filter((routeObject) => + routeObject.featureFlag ? process.env[routeObject.featureFlag] : true, ); return settingsRoutes; } diff --git a/ui/helpers/utils/settings-search.test.js b/ui/helpers/utils/settings-search.test.js index 30af3ee6b9da..cc7b875d8c5e 100644 --- a/ui/helpers/utils/settings-search.test.js +++ b/ui/helpers/utils/settings-search.test.js @@ -68,10 +68,6 @@ const t = (key) => { return 'Dismiss Secret Recovery Phrase backup reminder'; case 'dismissReminderDescriptionField': return 'Turn this on to dismiss the Secret Recovery Phrase backup reminder message. We highly recommend that you back up your Secret Recovery Phrase to avoid loss of funds'; - case 'overrideContentSecurityPolicyHeader': - return 'Override Content-Security-Policy header'; - case 'overrideContentSecurityPolicyHeaderDescription': - return "This option is a workaround for a known issue in Firefox, where a dapp's Content-Security-Policy header may prevent the extension from loading properly. Disabling this option is not recommended unless required for specific web page compatibility."; case 'Contacts': return 'Contacts'; case 'securityAndPrivacy': @@ -151,12 +147,9 @@ describe('Settings Search Utils', () => { describe('getSettingsRoutes', () => { it('should be an array of settings routes objects', () => { const NUM_OF_ENV_FEATURE_FLAG_SETTINGS = 4; - const NUM_OF_HIDDEN_SETTINGS = 1; expect(getSettingsRoutes()).toHaveLength( - SETTINGS_CONSTANTS.length - - NUM_OF_ENV_FEATURE_FLAG_SETTINGS - - NUM_OF_HIDDEN_SETTINGS, + SETTINGS_CONSTANTS.length - NUM_OF_ENV_FEATURE_FLAG_SETTINGS, ); }); }); diff --git a/ui/hooks/accounts/useBitcoinWalletSnapClient.test.ts b/ui/hooks/accounts/useBitcoinWalletSnapClient.test.ts new file mode 100644 index 000000000000..6032a7636128 --- /dev/null +++ b/ui/hooks/accounts/useBitcoinWalletSnapClient.test.ts @@ -0,0 +1,57 @@ +import { renderHook } from '@testing-library/react-hooks'; +import { HandlerType } from '@metamask/snaps-utils'; +import { BtcAccountType, BtcMethod } from '@metamask/keyring-api'; +import { MultichainNetworks } from '../../../shared/constants/multichain/networks'; +import { BITCOIN_WALLET_SNAP_ID } from '../../../shared/lib/accounts/bitcoin-wallet-snap'; +import { + handleSnapRequest, + multichainUpdateBalance, +} from '../../store/actions'; +import { useBitcoinWalletSnapClient } from './useBitcoinWalletSnapClient'; + +jest.mock('../../store/actions', () => ({ + handleSnapRequest: jest.fn(), + multichainUpdateBalance: jest.fn(), +})); + +const mockHandleSnapRequest = handleSnapRequest as jest.Mock; +const mockMultichainUpdateBalance = multichainUpdateBalance as jest.Mock; + +describe('useBitcoinWalletSnapClient', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + const mockAccount = { + address: 'tb1q2hjrlnf8kmtt5dj6e49gqzy6jnpe0sj7ty50cl', + id: '11a33c6b-0d46-43f4-a401-01587d575fd0', + options: {}, + methods: [BtcMethod.SendMany], + type: BtcAccountType.P2wpkh, + }; + + it('dispatch a Snap keyring request to create a Bitcoin account', async () => { + const { result } = renderHook(() => useBitcoinWalletSnapClient()); + const bitcoinWalletSnapClient = result.current; + + mockHandleSnapRequest.mockResolvedValue(mockAccount); + + await bitcoinWalletSnapClient.createAccount(MultichainNetworks.BITCOIN); + expect(mockHandleSnapRequest).toHaveBeenCalledWith({ + origin: 'metamask', + snapId: BITCOIN_WALLET_SNAP_ID, + handler: HandlerType.OnKeyringRequest, + request: expect.any(Object), + }); + }); + + it('force fetches the balance after creating a Bitcoin account', async () => { + const { result } = renderHook(() => useBitcoinWalletSnapClient()); + const bitcoinWalletSnapClient = result.current; + + mockHandleSnapRequest.mockResolvedValue(mockAccount); + + await bitcoinWalletSnapClient.createAccount(MultichainNetworks.BITCOIN); + expect(mockMultichainUpdateBalance).toHaveBeenCalledWith(mockAccount.id); + }); +}); diff --git a/ui/hooks/accounts/useMultichainWalletSnapClient.ts b/ui/hooks/accounts/useBitcoinWalletSnapClient.ts similarity index 60% rename from ui/hooks/accounts/useMultichainWalletSnapClient.ts rename to ui/hooks/accounts/useBitcoinWalletSnapClient.ts index 98dfa9b429d3..debe911ac391 100644 --- a/ui/hooks/accounts/useMultichainWalletSnapClient.ts +++ b/ui/hooks/accounts/useBitcoinWalletSnapClient.ts @@ -1,54 +1,32 @@ import { KeyringClient, Sender } from '@metamask/keyring-api'; import { HandlerType } from '@metamask/snaps-utils'; import { CaipChainId, Json, JsonRpcRequest } from '@metamask/utils'; -import { SnapId } from '@metamask/snaps-sdk'; import { useMemo } from 'react'; import { handleSnapRequest, multichainUpdateBalance, } from '../../store/actions'; import { BITCOIN_WALLET_SNAP_ID } from '../../../shared/lib/accounts/bitcoin-wallet-snap'; -import { SOLANA_WALLET_SNAP_ID } from '../../../shared/lib/accounts/solana-wallet-snap'; - -export enum WalletClientType { - Bitcoin = 'bitcoin-wallet-snap', - Solana = 'solana-wallet-snap', -} - -const SNAP_ID_MAP: Record = { - [WalletClientType.Bitcoin]: BITCOIN_WALLET_SNAP_ID, - [WalletClientType.Solana]: SOLANA_WALLET_SNAP_ID, -}; - -export class MultichainWalletSnapSender implements Sender { - private snapId: SnapId; - - constructor(snapId: SnapId) { - this.snapId = snapId; - } +export class BitcoinWalletSnapSender implements Sender { send = async (request: JsonRpcRequest): Promise => { // We assume the caller of this module is aware of this. If we try to use this module // without having the pre-installed Snap, this will likely throw an error in // the `handleSnapRequest` action. return (await handleSnapRequest({ origin: 'metamask', - snapId: this.snapId, + snapId: BITCOIN_WALLET_SNAP_ID, handler: HandlerType.OnKeyringRequest, request, })) as Json; }; } -export class MultichainWalletSnapClient { +export class BitcoinWalletSnapClient { readonly #client: KeyringClient; - constructor(clientType: WalletClientType) { - const snapId = SNAP_ID_MAP[clientType]; - if (!snapId) { - throw new Error(`Unsupported client type: ${clientType}`); - } - this.#client = new KeyringClient(new MultichainWalletSnapSender(snapId)); + constructor() { + this.#client = new KeyringClient(new BitcoinWalletSnapSender()); } async createAccount(scope: CaipChainId) { @@ -65,10 +43,10 @@ export class MultichainWalletSnapClient { } } -export function useMultichainWalletSnapClient(clientType: WalletClientType) { +export function useBitcoinWalletSnapClient() { const client = useMemo(() => { - return new MultichainWalletSnapClient(clientType); - }, [clientType]); + return new BitcoinWalletSnapClient(); + }, []); return client; } diff --git a/ui/hooks/accounts/useMultichainWalletSnapClient.test.ts b/ui/hooks/accounts/useMultichainWalletSnapClient.test.ts deleted file mode 100644 index d177986fee44..000000000000 --- a/ui/hooks/accounts/useMultichainWalletSnapClient.test.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { renderHook } from '@testing-library/react-hooks'; -import { HandlerType } from '@metamask/snaps-utils'; -import { BtcAccountType, BtcMethod } from '@metamask/keyring-api'; -import { MultichainNetworks } from '../../../shared/constants/multichain/networks'; -import { BITCOIN_WALLET_SNAP_ID } from '../../../shared/lib/accounts/bitcoin-wallet-snap'; -import { SOLANA_WALLET_SNAP_ID } from '../../../shared/lib/accounts/solana-wallet-snap'; -import { - handleSnapRequest, - multichainUpdateBalance, -} from '../../store/actions'; -import { - useMultichainWalletSnapClient, - WalletClientType, -} from './useMultichainWalletSnapClient'; - -jest.mock('../../store/actions', () => ({ - handleSnapRequest: jest.fn(), - multichainUpdateBalance: jest.fn(), -})); - -const mockHandleSnapRequest = handleSnapRequest as jest.Mock; -const mockMultichainUpdateBalance = multichainUpdateBalance as jest.Mock; - -describe('useMultichainWalletSnapClient', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - - const testCases = [ - { - clientType: WalletClientType.Bitcoin, - network: MultichainNetworks.BITCOIN, - snapId: BITCOIN_WALLET_SNAP_ID, - mockAccount: { - address: 'tb1q2hjrlnf8kmtt5dj6e49gqzy6jnpe0sj7ty50cl', - id: '11a33c6b-0d46-43f4-a401-01587d575fd0', - options: {}, - methods: [BtcMethod.SendMany], - type: BtcAccountType.P2wpkh, - }, - }, - { - clientType: WalletClientType.Solana, - network: MultichainNetworks.SOLANA, - snapId: SOLANA_WALLET_SNAP_ID, - mockAccount: { - address: '4mip4tgbhxf8dpqvtb3zhzzapwfvznanhssqzgjyp7ha', - id: '22b44d7c-1e57-4b5b-8502-02698e686fd1', - options: {}, - methods: ['someMethod'], - // TODO: Update when keyring-api is published with Solana types - type: BtcAccountType.P2wpkh, - }, - }, - ]; - - testCases.forEach(({ clientType, network, snapId, mockAccount }) => { - it(`dispatches a Snap keyring request to create a ${clientType} account`, async () => { - const { result } = renderHook(() => - useMultichainWalletSnapClient(clientType), - ); - const multichainWalletSnapClient = result.current; - - mockHandleSnapRequest.mockResolvedValue(mockAccount); - - await multichainWalletSnapClient.createAccount(network); - expect(mockHandleSnapRequest).toHaveBeenCalledWith({ - origin: 'metamask', - snapId, - handler: HandlerType.OnKeyringRequest, - request: expect.any(Object), - }); - }); - - it(`force fetches the balance after creating a ${clientType} account`, async () => { - const { result } = renderHook(() => - useMultichainWalletSnapClient(clientType), - ); - const multichainWalletSnapClient = result.current; - - mockHandleSnapRequest.mockResolvedValue(mockAccount); - - await multichainWalletSnapClient.createAccount(network); - expect(mockMultichainUpdateBalance).toHaveBeenCalledWith(mockAccount.id); - }); - }); -}); diff --git a/ui/hooks/bridge/useBridging.ts b/ui/hooks/bridge/useBridging.ts index fe7a21e2206f..a68aeb361bdd 100644 --- a/ui/hooks/bridge/useBridging.ts +++ b/ui/hooks/bridge/useBridging.ts @@ -43,7 +43,6 @@ const useBridging = () => { const isMarketingEnabled = useSelector(getDataCollectionForMarketing); const providerConfig = useSelector(getProviderConfig); const keyring = useSelector(getCurrentKeyring); - // @ts-expect-error keyring type is wrong maybe? const usingHardwareWallet = isHardwareKeyring(keyring.type); const isBridgeSupported = useSelector(getIsBridgeEnabled); diff --git a/ui/hooks/bridge/useCountdownTimer.test.ts b/ui/hooks/bridge/useCountdownTimer.test.ts deleted file mode 100644 index f2cd1190b1ba..000000000000 --- a/ui/hooks/bridge/useCountdownTimer.test.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { renderHookWithProvider } from '../../../test/lib/render-helpers'; -import { createBridgeMockStore } from '../../../test/jest/mock-store'; -import { flushPromises } from '../../../test/lib/timer-helpers'; -import { useCountdownTimer } from './useCountdownTimer'; - -jest.useFakeTimers(); -const renderUseCountdownTimer = (mockStoreState: object) => - renderHookWithProvider(() => useCountdownTimer(), mockStoreState); - -describe('useCountdownTimer', () => { - beforeEach(() => { - jest.clearAllMocks(); - jest.clearAllTimers(); - }); - - it('returns time remaining', async () => { - const quotesLastFetched = Date.now(); - const { result } = renderUseCountdownTimer( - createBridgeMockStore( - {}, - {}, - { - quotesLastFetched, - quotesRefreshCount: 0, - bridgeFeatureFlags: { - extensionConfig: { maxRefreshCount: 5, refreshRate: 40000 }, - }, - }, - ), - ); - - let i = 0; - while (i <= 40) { - const secondsLeft = Math.min(41, 40 - i + 2); - expect(result.current).toStrictEqual( - `0:${secondsLeft < 10 ? '0' : ''}${secondsLeft}`, - ); - i += 10; - jest.advanceTimersByTime(10000); - await flushPromises(); - } - expect(result.current).toStrictEqual('0:00'); - }); -}); diff --git a/ui/hooks/bridge/useCountdownTimer.ts b/ui/hooks/bridge/useCountdownTimer.ts deleted file mode 100644 index 39e7ac9d2eca..000000000000 --- a/ui/hooks/bridge/useCountdownTimer.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Duration } from 'luxon'; -import { useEffect, useState } from 'react'; -import { useSelector } from 'react-redux'; -import { - getBridgeQuotes, - getBridgeQuotesConfig, -} from '../../ducks/bridge/selectors'; -import { SECOND } from '../../../shared/constants/time'; - -/** - * Custom hook that provides a countdown timer based on the last fetched quotes timestamp. - * - * This hook calculates the remaining time until the next refresh interval and updates every second. - * - * @returns The formatted remaining time in 'm:ss' format. - */ -export const useCountdownTimer = () => { - const { quotesLastFetchedMs } = useSelector(getBridgeQuotes); - const { refreshRate } = useSelector(getBridgeQuotesConfig); - - const [timeRemaining, setTimeRemaining] = useState(refreshRate); - - useEffect(() => { - if (quotesLastFetchedMs) { - setTimeRemaining( - refreshRate - (Date.now() - quotesLastFetchedMs) + SECOND, - ); - } - }, [quotesLastFetchedMs]); - - useEffect(() => { - const interval = setInterval(() => { - setTimeRemaining(Math.max(0, timeRemaining - SECOND)); - }, SECOND); - return () => clearInterval(interval); - }, [timeRemaining]); - - return Duration.fromMillis(timeRemaining).toFormat('m:ss'); -}; diff --git a/ui/hooks/bridge/useLatestBalance.test.ts b/ui/hooks/bridge/useLatestBalance.test.ts index 6d79672e4550..d1186c3eeb91 100644 --- a/ui/hooks/bridge/useLatestBalance.test.ts +++ b/ui/hooks/bridge/useLatestBalance.test.ts @@ -61,7 +61,7 @@ describe('useLatestBalance', () => { expect(mockGetBalance).toHaveBeenCalledTimes(1); expect(mockGetBalance).toHaveBeenCalledWith( - '0x0DCD5D886577d5081B0c52e242Ef29E70Be3E7bc', + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', ); expect(mockFetchTokenBalance).toHaveBeenCalledTimes(0); }); diff --git a/ui/hooks/bridge/useLatestBalance.ts b/ui/hooks/bridge/useLatestBalance.ts index 524d65503249..dfe868a04090 100644 --- a/ui/hooks/bridge/useLatestBalance.ts +++ b/ui/hooks/bridge/useLatestBalance.ts @@ -1,14 +1,17 @@ import { useSelector } from 'react-redux'; +import { zeroAddress } from 'ethereumjs-util'; +import { Web3Provider } from '@ethersproject/providers'; import { Hex } from '@metamask/utils'; +import { BigNumber } from 'ethers'; import { Numeric } from '../../../shared/modules/Numeric'; import { DEFAULT_PRECISION } from '../useCurrencyDisplay'; +import { fetchTokenBalance } from '../../../shared/lib/token-util'; import { getCurrentChainId, getSelectedInternalAccount, SwapsEthToken, } from '../../selectors'; import { SwapsTokenObject } from '../../../shared/constants/swaps'; -import { calcLatestSrcBalance } from '../../../shared/modules/bridge-utils/balance'; import { useAsyncResult } from '../useAsyncResult'; /** @@ -25,25 +28,21 @@ const useLatestBalance = ( const { address: selectedAddress } = useSelector(getSelectedInternalAccount); const currentChainId = useSelector(getCurrentChainId); - const { value: latestBalance } = useAsyncResult< - Numeric | undefined - >(async () => { - if (token?.address && chainId && currentChainId === chainId) { - return await calcLatestSrcBalance( - global.ethereumProvider, - selectedAddress, + const { value: latestBalance } = useAsyncResult(async () => { + if (token && chainId && currentChainId === chainId) { + if (!token.address || token.address === zeroAddress()) { + const ethersProvider = new Web3Provider(global.ethereumProvider); + return await ethersProvider.getBalance(selectedAddress); + } + return await fetchTokenBalance( token.address, - chainId, + selectedAddress, + global.ethereumProvider, ); } + return undefined; - }, [ - chainId, - currentChainId, - token, - selectedAddress, - global.ethereumProvider, - ]); + }, [token, selectedAddress, global.ethereumProvider]); if (token && !token.decimals) { throw new Error( @@ -56,7 +55,7 @@ const useLatestBalance = ( return { formattedBalance: token && latestBalance - ? latestBalance + ? Numeric.from(latestBalance.toString(), 10) .shiftedBy(tokenDecimals) .round(DEFAULT_PRECISION) .toString() diff --git a/ui/hooks/metamask-notifications/useProfileSyncing.test.tsx b/ui/hooks/metamask-notifications/useProfileSyncing.test.tsx new file mode 100644 index 000000000000..951cec333ade --- /dev/null +++ b/ui/hooks/metamask-notifications/useProfileSyncing.test.tsx @@ -0,0 +1,156 @@ +import React from 'react'; +import { Provider } from 'react-redux'; +import { renderHook, act } from '@testing-library/react-hooks'; +import configureStore from 'redux-mock-store'; +import thunk from 'redux-thunk'; +import { waitFor } from '@testing-library/react'; +import * as actions from '../../store/actions'; +import { + useEnableProfileSyncing, + useDisableProfileSyncing, + useAccountSyncingEffect, + useDeleteAccountSyncingDataFromUserStorage, +} from './useProfileSyncing'; + +const middlewares = [thunk]; +const mockStore = configureStore(middlewares); + +jest.mock('../../store/actions', () => ({ + performSignIn: jest.fn(), + performSignOut: jest.fn(), + enableProfileSyncing: jest.fn(), + disableProfileSyncing: jest.fn(), + showLoadingIndication: jest.fn(), + hideLoadingIndication: jest.fn(), + syncInternalAccountsWithUserStorage: jest.fn(), + deleteAccountSyncingDataFromUserStorage: jest.fn(), +})); + +type ArrangeMocksMetamaskStateOverrides = { + isSignedIn?: boolean; + isProfileSyncingEnabled?: boolean; + isUnlocked?: boolean; + useExternalServices?: boolean; + completedOnboarding?: boolean; +}; + +const initialMetamaskState: ArrangeMocksMetamaskStateOverrides = { + isSignedIn: false, + isProfileSyncingEnabled: false, + isUnlocked: true, + useExternalServices: true, + completedOnboarding: true, +}; + +const arrangeMocks = ( + metamaskStateOverrides?: ArrangeMocksMetamaskStateOverrides, +) => { + const store = mockStore({ + metamask: { + ...initialMetamaskState, + ...metamaskStateOverrides, + participateInMetaMetrics: false, + internalAccounts: { + accounts: { + '0x123': { + address: '0x123', + id: 'account1', + metadata: {}, + options: {}, + methods: [], + type: 'eip155:eoa', + }, + }, + }, + }, + }); + + store.dispatch = jest.fn().mockImplementation((action) => { + if (typeof action === 'function') { + return action(store.dispatch, store.getState); + } + return Promise.resolve(); + }); + + jest.clearAllMocks(); + + return { store }; +}; + +describe('useProfileSyncing', () => { + it('should enable profile syncing', async () => { + const { store } = arrangeMocks(); + + const { result } = renderHook(() => useEnableProfileSyncing(), { + wrapper: ({ children }) => {children}, + }); + + act(() => { + result.current.enableProfileSyncing(); + }); + + expect(actions.enableProfileSyncing).toHaveBeenCalled(); + }); + + it('should disable profile syncing', async () => { + const { store } = arrangeMocks(); + + const { result } = renderHook(() => useDisableProfileSyncing(), { + wrapper: ({ children }) => {children}, + }); + + act(() => { + result.current.disableProfileSyncing(); + }); + + expect(actions.disableProfileSyncing).toHaveBeenCalled(); + }); + + it('should dispatch account syncing when conditions are met', async () => { + const { store } = arrangeMocks({ + isSignedIn: true, + isProfileSyncingEnabled: true, + }); + + renderHook(() => useAccountSyncingEffect(), { + wrapper: ({ children }) => {children}, + }); + + await waitFor(() => { + expect(actions.syncInternalAccountsWithUserStorage).toHaveBeenCalled(); + }); + }); + + it('should not dispatch account syncing when conditions are not met', async () => { + const { store } = arrangeMocks(); + + renderHook(() => useAccountSyncingEffect(), { + wrapper: ({ children }) => {children}, + }); + + await waitFor(() => { + expect( + actions.syncInternalAccountsWithUserStorage, + ).not.toHaveBeenCalled(); + }); + }); + + it('should dispatch account sync data deletion', async () => { + const { store } = arrangeMocks(); + + const { result } = renderHook( + () => useDeleteAccountSyncingDataFromUserStorage(), + { + wrapper: ({ children }) => ( + {children} + ), + }, + ); + + act(() => { + result.current.dispatchDeleteAccountSyncingDataFromUserStorage(); + }); + + expect(actions.deleteAccountSyncingDataFromUserStorage).toHaveBeenCalled(); + }); +}); diff --git a/ui/hooks/metamask-notifications/useProfileSyncing/profileSyncing.ts b/ui/hooks/metamask-notifications/useProfileSyncing.ts similarity index 53% rename from ui/hooks/metamask-notifications/useProfileSyncing/profileSyncing.ts rename to ui/hooks/metamask-notifications/useProfileSyncing.ts index 5c073fdf6d94..67899aa73927 100644 --- a/ui/hooks/metamask-notifications/useProfileSyncing/profileSyncing.ts +++ b/ui/hooks/metamask-notifications/useProfileSyncing.ts @@ -1,21 +1,35 @@ -import { useState, useCallback } from 'react'; +import { useState, useCallback, useEffect, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import type { InternalAccount } from '@metamask/keyring-api'; import log from 'loglevel'; -import { useMetamaskNotificationsContext } from '../../../contexts/metamask-notifications/metamask-notifications'; import { disableProfileSyncing as disableProfileSyncingAction, enableProfileSyncing as enableProfileSyncingAction, setIsProfileSyncingEnabled as setIsProfileSyncingEnabledAction, hideLoadingIndication, -} from '../../../store/actions'; + syncInternalAccountsWithUserStorage, + deleteAccountSyncingDataFromUserStorage, +} from '../../store/actions'; -import { selectIsSignedIn } from '../../../selectors/metamask-notifications/authentication'; -import { selectIsProfileSyncingEnabled } from '../../../selectors/metamask-notifications/profile-syncing'; -import { getUseExternalServices } from '../../../selectors'; +import { selectIsSignedIn } from '../../selectors/metamask-notifications/authentication'; +import { selectIsProfileSyncingEnabled } from '../../selectors/metamask-notifications/profile-syncing'; +import { getUseExternalServices } from '../../selectors'; import { getIsUnlocked, getCompletedOnboarding, -} from '../../../ducks/metamask/metamask'; +} from '../../ducks/metamask/metamask'; + +// Define KeyringType interface +export type KeyringType = { + type: string; +}; + +// Define AccountType interface +export type AccountType = InternalAccount & { + balance: string; + keyring: KeyringType; + label: string; +}; /** * Custom hook to enable profile syncing. This hook handles the process of signing in @@ -60,7 +74,6 @@ export function useDisableProfileSyncing(): { error: string | null; } { const dispatch = useDispatch(); - const { listNotifications } = useMetamaskNotificationsContext(); const [error, setError] = useState(null); @@ -70,9 +83,6 @@ export function useDisableProfileSyncing(): { try { // disable profile syncing await dispatch(disableProfileSyncingAction()); - - // list notifications to update the counter - await listNotifications(); } catch (e) { const errorMessage = e instanceof Error ? e.message : JSON.stringify(e ?? ''); @@ -114,29 +124,92 @@ export function useSetIsProfileSyncingEnabled(): { } /** - * A utility used internally to decide if syncing features should be dispatched - * Considers factors like basic functionality; unlocked; finished onboarding, and is logged in + * Custom hook to dispatch account syncing. * - * @returns a boolean if internally we can perform syncing features or not. + * @returns An object containing the `dispatchAccountSyncing` function, boolean `shouldDispatchAccountSyncing`, + * and error state. */ -export const useShouldDispatchProfileSyncing = () => { +export const useAccountSyncing = () => { + const dispatch = useDispatch(); + + const [error, setError] = useState(null); + const isProfileSyncingEnabled = useSelector(selectIsProfileSyncingEnabled); - const basicFunctionality: boolean | undefined = useSelector( - getUseExternalServices, - ); - const isUnlocked: boolean | undefined = useSelector(getIsUnlocked); + const basicFunctionality = useSelector(getUseExternalServices); + const isUnlocked = useSelector(getIsUnlocked); const isSignedIn = useSelector(selectIsSignedIn); - const completedOnboarding: boolean | undefined = useSelector( - getCompletedOnboarding, - ); + const completedOnboarding = useSelector(getCompletedOnboarding); - const shouldDispatchProfileSyncing: boolean = Boolean( - basicFunctionality && + const shouldDispatchAccountSyncing = useMemo( + () => + basicFunctionality && isProfileSyncingEnabled && isUnlocked && isSignedIn && completedOnboarding, + [ + basicFunctionality, + isProfileSyncingEnabled, + isUnlocked, + isSignedIn, + completedOnboarding, + ], ); - return shouldDispatchProfileSyncing; + const dispatchAccountSyncing = useCallback(() => { + setError(null); + + try { + if (!shouldDispatchAccountSyncing) { + return; + } + dispatch(syncInternalAccountsWithUserStorage()); + } catch (e) { + log.error(e); + setError(e instanceof Error ? e.message : 'An unexpected error occurred'); + } + }, [dispatch, shouldDispatchAccountSyncing]); + + return { + dispatchAccountSyncing, + shouldDispatchAccountSyncing, + error, + }; +}; + +/** + * Custom hook to delete a user's account syncing data from user storage + */ + +export const useDeleteAccountSyncingDataFromUserStorage = () => { + const dispatch = useDispatch(); + + const [error, setError] = useState(null); + + const dispatchDeleteAccountSyncingDataFromUserStorage = useCallback(() => { + setError(null); + + try { + dispatch(deleteAccountSyncingDataFromUserStorage()); + } catch (e) { + log.error(e); + setError(e instanceof Error ? e.message : 'An unexpected error occurred'); + } + }, [dispatch]); + + return { + dispatchDeleteAccountSyncingDataFromUserStorage, + error, + }; +}; + +/** + * Custom hook to apply account syncing effect. + */ +export const useAccountSyncingEffect = () => { + const { dispatchAccountSyncing } = useAccountSyncing(); + + useEffect(() => { + dispatchAccountSyncing(); + }, [dispatchAccountSyncing]); }; diff --git a/ui/hooks/metamask-notifications/useProfileSyncing/accountSyncing.test.tsx b/ui/hooks/metamask-notifications/useProfileSyncing/accountSyncing.test.tsx deleted file mode 100644 index 604466b3a75c..000000000000 --- a/ui/hooks/metamask-notifications/useProfileSyncing/accountSyncing.test.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { waitFor } from '@testing-library/react'; -import { act } from '@testing-library/react-hooks'; -import { renderHookWithProviderTyped } from '../../../../test/lib/render-helpers'; -import * as actions from '../../../store/actions'; -import { - useAccountSyncingEffect, - useDeleteAccountSyncingDataFromUserStorage, -} from './accountSyncing'; -import * as ProfileSyncModule from './profileSyncing'; - -describe('useDeleteAccountSyncingDataFromUserStorage()', () => { - it('should dispatch account sync data deletion', async () => { - const mockDeleteAccountSyncAction = jest.spyOn( - actions, - 'deleteAccountSyncingDataFromUserStorage', - ); - - const { result } = renderHookWithProviderTyped( - () => useDeleteAccountSyncingDataFromUserStorage(), - {}, - ); - - await act(async () => { - await result.current.dispatchDeleteAccountData(); - }); - - expect(mockDeleteAccountSyncAction).toHaveBeenCalled(); - }); -}); - -describe('useAccountSyncingEffect', () => { - const arrangeMocks = () => { - const mockUseShouldProfileSync = jest.spyOn( - ProfileSyncModule, - 'useShouldDispatchProfileSyncing', - ); - const mockSyncAccountsAction = jest.spyOn( - actions, - 'syncInternalAccountsWithUserStorage', - ); - return { - mockUseShouldProfileSync, - mockSyncAccountsAction, - }; - }; - - const arrangeAndAct = (props: { profileSyncConditionsMet: boolean }) => { - const mocks = arrangeMocks(); - mocks.mockUseShouldProfileSync.mockReturnValue( - props.profileSyncConditionsMet, - ); - - renderHookWithProviderTyped(() => useAccountSyncingEffect(), {}); - return mocks; - }; - - it('should run effect if profile sync conditions are met', async () => { - const mocks = arrangeAndAct({ profileSyncConditionsMet: true }); - await waitFor(() => { - expect(mocks.mockSyncAccountsAction).toHaveBeenCalled(); - }); - }); - - it('should not run effect if profile sync conditions are not met', async () => { - const mocks = arrangeAndAct({ profileSyncConditionsMet: false }); - await waitFor(() => { - expect(mocks.mockSyncAccountsAction).not.toHaveBeenCalled(); - }); - }); -}); diff --git a/ui/hooks/metamask-notifications/useProfileSyncing/accountSyncing.ts b/ui/hooks/metamask-notifications/useProfileSyncing/accountSyncing.ts deleted file mode 100644 index cef4dc80fa75..000000000000 --- a/ui/hooks/metamask-notifications/useProfileSyncing/accountSyncing.ts +++ /dev/null @@ -1,66 +0,0 @@ -import log from 'loglevel'; -import { useCallback, useEffect } from 'react'; -import { useDispatch } from 'react-redux'; -import { - deleteAccountSyncingDataFromUserStorage, - syncInternalAccountsWithUserStorage, -} from '../../../store/actions'; -import { useShouldDispatchProfileSyncing } from './profileSyncing'; - -/** - * Custom hook to dispatch account syncing. - * - * @returns An object containing the `dispatchAccountSyncing` function, boolean `shouldDispatchAccountSyncing`, - * and error state. - */ -const useAccountSyncing = () => { - const dispatch = useDispatch(); - - const shouldDispatchAccountSyncing = useShouldDispatchProfileSyncing(); - - const dispatchAccountSyncing = useCallback(() => { - try { - if (!shouldDispatchAccountSyncing) { - return; - } - dispatch(syncInternalAccountsWithUserStorage()); - } catch (e) { - log.error(e); - } - }, [dispatch, shouldDispatchAccountSyncing]); - - return { - dispatchAccountSyncing, - shouldDispatchAccountSyncing, - }; -}; - -/** - * Custom hook to apply account syncing effect. - */ -export const useAccountSyncingEffect = () => { - const shouldSync = useShouldDispatchProfileSyncing(); - const { dispatchAccountSyncing } = useAccountSyncing(); - - useEffect(() => { - if (shouldSync) { - dispatchAccountSyncing(); - } - }, [shouldSync, dispatchAccountSyncing]); -}; - -/** - * Custom hook to delete a user's account syncing data from user storage - */ -export const useDeleteAccountSyncingDataFromUserStorage = () => { - const dispatch = useDispatch(); - const dispatchDeleteAccountData = useCallback(async () => { - try { - await dispatch(deleteAccountSyncingDataFromUserStorage()); - } catch { - // Do Nothing - } - }, []); - - return { dispatchDeleteAccountData }; -}; diff --git a/ui/hooks/metamask-notifications/useProfileSyncing/index.ts b/ui/hooks/metamask-notifications/useProfileSyncing/index.ts deleted file mode 100644 index 9a6cda8468fb..000000000000 --- a/ui/hooks/metamask-notifications/useProfileSyncing/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { - useDisableProfileSyncing, - useEnableProfileSyncing, - useSetIsProfileSyncingEnabled, -} from './profileSyncing'; -export { - useAccountSyncingEffect, - useDeleteAccountSyncingDataFromUserStorage, -} from './accountSyncing'; diff --git a/ui/hooks/metamask-notifications/useProfileSyncing/profileSyncing.test.tsx b/ui/hooks/metamask-notifications/useProfileSyncing/profileSyncing.test.tsx deleted file mode 100644 index 99d3064085ea..000000000000 --- a/ui/hooks/metamask-notifications/useProfileSyncing/profileSyncing.test.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { act } from '@testing-library/react-hooks'; -import { renderHookWithProviderTyped } from '../../../../test/lib/render-helpers'; -import { MetamaskNotificationsProvider } from '../../../contexts/metamask-notifications'; -import * as actions from '../../../store/actions'; -import { - useDisableProfileSyncing, - useEnableProfileSyncing, - useShouldDispatchProfileSyncing, -} from './profileSyncing'; - -type ArrangeMocksMetamaskStateOverrides = { - isSignedIn?: boolean; - isProfileSyncingEnabled?: boolean; - isUnlocked?: boolean; - useExternalServices?: boolean; - completedOnboarding?: boolean; -}; - -const initialMetamaskState: ArrangeMocksMetamaskStateOverrides = { - isSignedIn: false, - isProfileSyncingEnabled: false, - isUnlocked: true, - useExternalServices: true, - completedOnboarding: true, -}; - -const arrangeMockState = ( - metamaskStateOverrides?: ArrangeMocksMetamaskStateOverrides, -) => { - const state = { - metamask: { - ...initialMetamaskState, - ...metamaskStateOverrides, - }, - }; - - return { state }; -}; - -describe('useEnableProfileSyncing()', () => { - it('should enable profile syncing', async () => { - const mockEnableProfileSyncingAction = jest.spyOn( - actions, - 'enableProfileSyncing', - ); - - const { state } = arrangeMockState(); - const { result } = renderHookWithProviderTyped( - () => useEnableProfileSyncing(), - state, - ); - await act(async () => { - await result.current.enableProfileSyncing(); - }); - - expect(mockEnableProfileSyncingAction).toHaveBeenCalled(); - }); -}); - -describe('useDisableProfileSyncing()', () => { - it('should disable profile syncing', async () => { - const mockDisableProfileSyncingAction = jest.spyOn( - actions, - 'disableProfileSyncing', - ); - - const { state } = arrangeMockState(); - - const { result } = renderHookWithProviderTyped( - () => useDisableProfileSyncing(), - state, - undefined, - MetamaskNotificationsProvider, - ); - - await act(async () => { - await result.current.disableProfileSyncing(); - }); - - expect(mockDisableProfileSyncingAction).toHaveBeenCalled(); - }); -}); - -describe('useShouldDispatchProfileSyncing()', () => { - const testCases = (() => { - const properties = [ - 'isSignedIn', - 'isProfileSyncingEnabled', - 'isUnlocked', - 'useExternalServices', - 'completedOnboarding', - ] as const; - const baseState = { - isSignedIn: true, - isProfileSyncingEnabled: true, - isUnlocked: true, - useExternalServices: true, - completedOnboarding: true, - }; - - const failureStateCases: { - state: ArrangeMocksMetamaskStateOverrides; - failingField: string; - }[] = []; - - // Generate test cases by toggling each property - properties.forEach((property) => { - const state = { ...baseState, [property]: false }; - failureStateCases.push({ state, failingField: property }); - }); - - const successTestCase = { state: baseState }; - - return { successTestCase, failureStateCases }; - })(); - - it('should return true if all conditions are met', () => { - const { state } = arrangeMockState(testCases.successTestCase.state); - const hook = renderHookWithProviderTyped( - () => useShouldDispatchProfileSyncing(), - state, - ); - expect(hook.result.current).toBe(true); - }); - - testCases.failureStateCases.forEach(({ state, failingField }) => { - it(`should return false if not all conditions are met [${failingField} = false]`, () => { - const { state: newState } = arrangeMockState(state); - const hook = renderHookWithProviderTyped( - () => useShouldDispatchProfileSyncing(), - newState, - ); - expect(hook.result.current).toBe(false); - }); - }); -}); diff --git a/ui/hooks/snaps/useDisplayName.ts b/ui/hooks/snaps/useDisplayName.ts deleted file mode 100644 index 6a6d3d7e6b51..000000000000 --- a/ui/hooks/snaps/useDisplayName.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { NamespaceId } from '@metamask/snaps-utils'; -import { CaipChainId, KnownCaipNamespace } from '@metamask/utils'; -import { useSelector } from 'react-redux'; -import { - getMemoizedAccountName, - getAddressBookEntryByNetwork, - AddressBookMetaMaskState, - AccountsMetaMaskState, -} from '../../selectors/snaps'; -import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils'; -import { decimalToHex } from '../../../shared/modules/conversion.utils'; - -export type UseDisplayNameParams = { - chain: { - namespace: NamespaceId; - reference: string; - }; - chainId: CaipChainId; - address: string; -}; - -/** - * Get the display name for an address. - * This will look for an account name in the state, and if not found, it will look for an address book entry. - * - * @param params - The parsed CAIP-10 ID. - * @returns The display name for the address. - */ -export const useDisplayName = ( - params: UseDisplayNameParams, -): string | undefined => { - const { - address, - chain: { namespace, reference }, - } = params; - - const isEip155 = namespace === KnownCaipNamespace.Eip155; - - const parsedAddress = isEip155 ? toChecksumHexAddress(address) : address; - - const accountName = useSelector((state: AccountsMetaMaskState) => - getMemoizedAccountName(state, parsedAddress), - ); - - const addressBookEntry = useSelector((state: AddressBookMetaMaskState) => - getAddressBookEntryByNetwork( - state, - parsedAddress, - `0x${decimalToHex(isEip155 ? reference : `0`)}`, - ), - ); - - return accountName || (isEip155 && addressBookEntry?.name) || undefined; -}; diff --git a/ui/hooks/useAccountTotalFiatBalance.js b/ui/hooks/useAccountTotalFiatBalance.js index 7b4a4675225a..b0c9b293c906 100644 --- a/ui/hooks/useAccountTotalFiatBalance.js +++ b/ui/hooks/useAccountTotalFiatBalance.js @@ -51,6 +51,7 @@ export const useAccountTotalFiatBalance = ( const tokens = detectedTokens?.[currentChainId]?.[account?.address] ?? []; // This selector returns all the tokens, we need it to get the image of token const allTokenList = useSelector(getTokenList); + const allTokenListValues = Object.values(allTokenList); const primaryTokenImage = useSelector(getNativeCurrencyImage); const nativeCurrency = useSelector(getNativeCurrency); @@ -91,18 +92,20 @@ export const useAccountTotalFiatBalance = ( }; // To match the list of detected tokens with the entire token list to find the image for tokens - const findMatchingTokens = (tokenList, _tokensWithBalances) => { + const findMatchingTokens = (array1, array2) => { const result = []; - _tokensWithBalances.forEach((token) => { - const matchingToken = tokenList[token.address.toLowerCase()]; + array2.forEach((token2) => { + const matchingToken = array1.find( + (token1) => token1.symbol === token2.symbol, + ); if (matchingToken) { result.push({ ...matchingToken, - balance: token.balance, - string: token.string, - balanceError: token.balanceError, + balance: token2.balance, + string: token2.string, + balanceError: token2.balanceError, }); } }); @@ -110,7 +113,10 @@ export const useAccountTotalFiatBalance = ( return result; }; - const matchingTokens = findMatchingTokens(allTokenList, tokensWithBalances); + const matchingTokens = findMatchingTokens( + allTokenListValues, + tokensWithBalances, + ); // Combine native token, detected token with image in an array const allTokensWithFiatValues = [ diff --git a/ui/hooks/useCurrencyRatePolling.ts b/ui/hooks/useCurrencyRatePolling.ts index e7ad21adedf5..fb14b1c94797 100644 --- a/ui/hooks/useCurrencyRatePolling.ts +++ b/ui/hooks/useCurrencyRatePolling.ts @@ -1,30 +1,24 @@ import { useSelector } from 'react-redux'; import { - getNetworkConfigurationsByChainId, + getSelectedNetworkClientId, getUseCurrencyRateCheck, } from '../selectors'; import { - currencyRateStartPolling, + currencyRateStartPollingByNetworkClientId, currencyRateStopPollingByPollingToken, } from '../store/actions'; import { getCompletedOnboarding } from '../ducks/metamask/metamask'; import usePolling from './usePolling'; -const useCurrencyRatePolling = () => { +const useCurrencyRatePolling = (networkClientId?: string) => { const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck); const completedOnboarding = useSelector(getCompletedOnboarding); - const networkConfigurations = useSelector(getNetworkConfigurationsByChainId); - - const nativeCurrencies = [ - ...new Set( - Object.values(networkConfigurations).map((n) => n.nativeCurrency), - ), - ]; + const selectedNetworkClientId = useSelector(getSelectedNetworkClientId); usePolling({ - startPolling: currencyRateStartPolling, + startPollingByNetworkClientId: currencyRateStartPollingByNetworkClientId, stopPollingByPollingToken: currencyRateStopPollingByPollingToken, - input: nativeCurrencies, + networkClientId: networkClientId ?? selectedNetworkClientId, enabled: useCurrencyRateCheck && completedOnboarding, }); }; diff --git a/ui/hooks/useDisplayName.test.ts b/ui/hooks/useDisplayName.test.ts index 896e974c0025..5c36b0a97ed2 100644 --- a/ui/hooks/useDisplayName.test.ts +++ b/ui/hooks/useDisplayName.test.ts @@ -1,23 +1,19 @@ import { NameType } from '@metamask/name-controller'; import { CHAIN_IDS } from '@metamask/transaction-controller'; -import { Hex } from '@metamask/utils'; import { cloneDeep } from 'lodash'; +import { Hex } from '@metamask/utils'; +import { renderHookWithProvider } from '../../test/lib/render-helpers'; +import mockState from '../../test/data/mock-state.json'; import { EXPERIENCES_TYPE, FIRST_PARTY_CONTRACT_NAMES, } from '../../shared/constants/first-party-contracts'; -import mockState from '../../test/data/mock-state.json'; -import { renderHookWithProvider } from '../../test/lib/render-helpers'; -import { getDomainResolutions } from '../ducks/domains'; import { useDisplayName } from './useDisplayName'; -import { useNames } from './useName'; import { useNftCollectionsMetadata } from './useNftCollectionsMetadata'; +import { useNames } from './useName'; jest.mock('./useName'); jest.mock('./useNftCollectionsMetadata'); -jest.mock('../ducks/domains', () => ({ - getDomainResolutions: jest.fn(), -})); const VALUE_MOCK = 'testvalue'; const VARIATION_MOCK = CHAIN_IDS.GOERLI; @@ -26,7 +22,6 @@ const ERC20_TOKEN_NAME_MOCK = 'testName2'; const WATCHED_NFT_NAME_MOCK = 'testName3'; const NFT_NAME_MOCK = 'testName4'; const FIRST_PARTY_CONTRACT_NAME_MOCK = 'testName5'; -const ENS_NAME_MOCK = 'vitalik.eth'; const SYMBOL_MOCK = 'tes'; const NFT_IMAGE_MOCK = 'testNftImage'; const ERC20_IMAGE_MOCK = 'testImage'; @@ -35,7 +30,6 @@ const OTHER_NAME_TYPE = 'test' as NameType; describe('useDisplayName', () => { const useNamesMock = jest.mocked(useNames); const useNftCollectionsMetadataMock = jest.mocked(useNftCollectionsMetadata); - const domainResolutionsMock = jest.mocked(getDomainResolutions); // eslint-disable-next-line @typescript-eslint/no-explicit-any let state: any; @@ -93,18 +87,6 @@ describe('useDisplayName', () => { }); } - function mockDomainResolutions(address: string, ensName: string) { - domainResolutionsMock.mockReturnValue([ - { - addressBookEntryName: undefined, - domainName: ensName, - protocol: 'Ethereum Name Service', - resolvedAddress: address, - resolvingSnap: 'Ethereum Name Service resolver', - }, - ]); - } - function mockFirstPartyContractName( value: string, variation: string, @@ -421,50 +403,6 @@ describe('useDisplayName', () => { }); }); - describe('Domain Resolutions', () => { - it('returns ENS name if domain resolution for that address exists', () => { - mockDomainResolutions(VALUE_MOCK, ENS_NAME_MOCK); - - const { result } = renderHookWithProvider( - () => - useDisplayName({ - value: VALUE_MOCK, - type: NameType.ETHEREUM_ADDRESS, - variation: VARIATION_MOCK, - }), - mockState, - ); - - expect(result.current).toStrictEqual({ - contractDisplayName: undefined, - hasPetname: false, - image: undefined, - name: ENS_NAME_MOCK, - }); - }); - - it('returns no name if type not address', () => { - mockDomainResolutions(VALUE_MOCK, ENS_NAME_MOCK); - - const { result } = renderHookWithProvider( - () => - useDisplayName({ - value: VALUE_MOCK, - type: OTHER_NAME_TYPE, - variation: VARIATION_MOCK, - }), - mockState, - ); - - expect(result.current).toStrictEqual({ - contractDisplayName: undefined, - hasPetname: false, - image: undefined, - name: null, - }); - }); - }); - describe('Priority', () => { it('uses petname as first priority', () => { mockPetname(PETNAME_MOCK); diff --git a/ui/hooks/useDisplayName.ts b/ui/hooks/useDisplayName.ts index 66463b884338..7b7429c7a0d4 100644 --- a/ui/hooks/useDisplayName.ts +++ b/ui/hooks/useDisplayName.ts @@ -1,14 +1,12 @@ import { NameType } from '@metamask/name-controller'; -import { Hex } from '@metamask/utils'; import { useSelector } from 'react-redux'; +import { Hex } from '@metamask/utils'; +import { selectERC20TokensByChain } from '../selectors'; +import { getNftContractsByAddressByChain } from '../selectors/nft'; import { EXPERIENCES_TYPE, FIRST_PARTY_CONTRACT_NAMES, } from '../../shared/constants/first-party-contracts'; -import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils'; -import { getDomainResolutions } from '../ducks/domains'; -import { selectERC20TokensByChain } from '../selectors'; -import { getNftContractsByAddressByChain } from '../selectors/nft'; import { useNames } from './useName'; import { useNftCollectionsMetadata } from './useNftCollectionsMetadata'; @@ -31,11 +29,9 @@ export function useDisplayNames( ): UseDisplayNameResponse[] { const nameEntries = useNames(requests); const firstPartyContractNames = useFirstPartyContractNames(requests); - const erc20Tokens = useERC20Tokens(requests); const watchedNFTNames = useWatchedNFTNames(requests); const nfts = useNFTs(requests); - const ens = useDomainResolutions(requests); return requests.map((_request, index) => { const nameEntry = nameEntries[index]; @@ -43,7 +39,6 @@ export function useDisplayNames( const erc20Token = erc20Tokens[index]; const watchedNftName = watchedNFTNames[index]; const nft = nfts[index]; - const ensName = ens[index]; const name = nameEntry?.name || @@ -51,7 +46,6 @@ export function useDisplayNames( nft?.name || erc20Token?.name || watchedNftName || - ensName || null; const image = nft?.image || erc20Token?.image; @@ -113,7 +107,6 @@ function useWatchedNFTNames( const contractAddress = value.toLowerCase(); const watchedNftNamesByAddress = watchedNftNamesByAddressByChain[variation]; - return watchedNftNamesByAddress?.[contractAddress]?.name; }); } @@ -154,32 +147,6 @@ function useNFTs( ); } -function useDomainResolutions(nameRequests: UseDisplayNameRequest[]) { - const domainResolutions = useSelector(getDomainResolutions); - - return nameRequests.map(({ type, value }) => { - if (type !== NameType.ETHEREUM_ADDRESS) { - return undefined; - } - - const matchedResolution = domainResolutions?.find( - (resolution: { - addressBookEntryName: string; - domainName: string; - protocol: string; - resolvedAddress: string; - resolvingSnap: string; - }) => - toChecksumHexAddress(resolution.resolvedAddress) === - toChecksumHexAddress(value), - ); - - const ensName = matchedResolution?.domainName; - - return ensName; - }); -} - function useFirstPartyContractNames(nameRequests: UseDisplayNameRequest[]) { return nameRequests.map(({ type, value, variation }) => { if (type !== NameType.ETHEREUM_ADDRESS) { diff --git a/ui/hooks/useGasFeeEstimates.js b/ui/hooks/useGasFeeEstimates.js index abbaf0db0bb9..5ad37925054b 100644 --- a/ui/hooks/useGasFeeEstimates.js +++ b/ui/hooks/useGasFeeEstimates.js @@ -74,10 +74,9 @@ export function useGasFeeEstimates(_networkClientId) { }, [networkClientId]); usePolling({ - startPolling: (input) => - gasFeeStartPollingByNetworkClientId(input.networkClientId), + startPollingByNetworkClientId: gasFeeStartPollingByNetworkClientId, stopPollingByPollingToken: gasFeeStopPollingByPollingToken, - input: { networkClientId }, + networkClientId, }); return { diff --git a/ui/hooks/useGasFeeEstimates.test.js b/ui/hooks/useGasFeeEstimates.test.js index dd63e10581d0..0187ac793bbe 100644 --- a/ui/hooks/useGasFeeEstimates.test.js +++ b/ui/hooks/useGasFeeEstimates.test.js @@ -8,6 +8,7 @@ import { getIsNetworkBusyByChainId, } from '../ducks/metamask/metamask'; import { + gasFeeStartPollingByNetworkClientId, gasFeeStopPollingByPollingToken, getNetworkConfigurationByNetworkClientId, } from '../store/actions'; @@ -114,9 +115,9 @@ describe('useGasFeeEstimates', () => { renderHook(() => useGasFeeEstimates()); }); expect(usePolling).toHaveBeenCalledWith({ - startPolling: expect.any(Function), + startPollingByNetworkClientId: gasFeeStartPollingByNetworkClientId, stopPollingByPollingToken: gasFeeStopPollingByPollingToken, - input: { networkClientId: 'selectedNetworkClientId' }, + networkClientId: 'selectedNetworkClientId', }); }); @@ -126,9 +127,9 @@ describe('useGasFeeEstimates', () => { renderHook(() => useGasFeeEstimates('networkClientId1')); }); expect(usePolling).toHaveBeenCalledWith({ - startPolling: expect.any(Function), + startPollingByNetworkClientId: gasFeeStartPollingByNetworkClientId, stopPollingByPollingToken: gasFeeStopPollingByPollingToken, - input: { networkClientId: 'networkClientId1' }, + networkClientId: 'networkClientId1', }); }); diff --git a/ui/hooks/useMMICustodySendTransaction.ts b/ui/hooks/useMMICustodySendTransaction.ts index 49634fbf0174..0c05d9e16f96 100644 --- a/ui/hooks/useMMICustodySendTransaction.ts +++ b/ui/hooks/useMMICustodySendTransaction.ts @@ -34,9 +34,9 @@ export function useMMICustodySendTransaction() { const accountType = useSelector(getAccountType); const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage); - const { currentConfirmation } = useConfirmContext< - TransactionMeta | undefined - >(); + const { currentConfirmation } = useConfirmContext() as unknown as { + currentConfirmation: TransactionMeta | undefined; + }; const { from } = getConfirmationSender(currentConfirmation); const fromChecksumHexAddress = toChecksumHexAddress(from || ''); diff --git a/ui/hooks/useMultiPolling.test.ts b/ui/hooks/useMultiPolling.test.ts deleted file mode 100644 index a5621728c176..000000000000 --- a/ui/hooks/useMultiPolling.test.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { renderHook } from '@testing-library/react-hooks'; - -import useMultiPolling from './useMultiPolling'; - -describe('useMultiPolling', () => { - it('Should start/stop polling when inputs are added/removed, and stop on dismount', async () => { - const promises: Promise[] = []; - const mockStartPolling = jest.fn().mockImplementation((input) => { - const promise = Promise.resolve(`${input}_token`); - promises.push(promise); - return promise; - }); - - const mockStopPollingByPollingToken = jest.fn(); - const inputs = ['foo', 'bar']; - - const { unmount, rerender } = renderHook(() => - useMultiPolling({ - startPolling: mockStartPolling, - stopPollingByPollingToken: mockStopPollingByPollingToken, - input: inputs, - }), - ); - - // All inputs should start polling - await Promise.all(promises); - for (const input of inputs) { - expect(mockStartPolling).toHaveBeenCalledWith(input); - } - - // Remove one input, and add another - inputs[0] = 'baz'; - rerender({ input: inputs }); - expect(mockStopPollingByPollingToken).toHaveBeenCalledWith('foo_token'); - expect(mockStartPolling).toHaveBeenCalledWith('baz'); - - // All inputs should stop polling on dismount - await Promise.all(promises); - unmount(); - for (const input of inputs) { - expect(mockStopPollingByPollingToken).toHaveBeenCalledWith( - `${input}_token`, - ); - } - }); -}); diff --git a/ui/hooks/useMultiPolling.ts b/ui/hooks/useMultiPolling.ts deleted file mode 100644 index 0eff48267221..000000000000 --- a/ui/hooks/useMultiPolling.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { useEffect, useRef } from 'react'; - -type UseMultiPollingOptions = { - startPolling: (input: PollingInput) => Promise; - stopPollingByPollingToken: (pollingToken: string) => void; - input: PollingInput[]; -}; - -// A hook that manages multiple polling loops of a polling controller. -// Callers provide an array of inputs, and the hook manages starting -// and stopping polling loops for each input. -const useMultiPolling = ( - usePollingOptions: UseMultiPollingOptions, -) => { - const pollingTokens = useRef>(new Map()); - - useEffect(() => { - // start new polls - for (const input of usePollingOptions.input) { - const key = JSON.stringify(input); - if (!pollingTokens.current.has(key)) { - usePollingOptions - .startPolling(input) - .then((token) => pollingTokens.current.set(key, token)); - } - } - - // stop existing polls - for (const [inputKey, token] of pollingTokens.current.entries()) { - const exists = usePollingOptions.input.some( - (i) => inputKey === JSON.stringify(i), - ); - - if (!exists) { - usePollingOptions.stopPollingByPollingToken(token); - pollingTokens.current.delete(inputKey); - } - } - }, [usePollingOptions.input && JSON.stringify(usePollingOptions.input)]); - - // stop all polling on dismount - useEffect(() => { - return () => { - for (const token of pollingTokens.current.values()) { - usePollingOptions.stopPollingByPollingToken(token); - } - }; - }, []); -}; - -export default useMultiPolling; diff --git a/ui/hooks/useMultichainSelector.ts b/ui/hooks/useMultichainSelector.ts index 9bd979df7e7e..326ac79bf9cd 100644 --- a/ui/hooks/useMultichainSelector.ts +++ b/ui/hooks/useMultichainSelector.ts @@ -11,7 +11,6 @@ export function useMultichainSelector< ) { return useSelector((state: TState) => { // We either pass an account or fallback to the currently selected one - // @ts-expect-error state types don't match return selector(state, account || getSelectedInternalAccount(state)); }); } diff --git a/ui/hooks/useName.test.ts b/ui/hooks/useName.test.ts index b102e9dce7a0..f746c4bb6267 100644 --- a/ui/hooks/useName.test.ts +++ b/ui/hooks/useName.test.ts @@ -15,6 +15,7 @@ jest.mock('react-redux', () => ({ })); jest.mock('../selectors', () => ({ + getCurrentChainId: jest.fn(), getNames: jest.fn(), })); diff --git a/ui/hooks/useNftCollectionsMetadata.test.ts b/ui/hooks/useNftCollectionsMetadata.test.ts index cf7997cb518b..e1e2b6745ad1 100644 --- a/ui/hooks/useNftCollectionsMetadata.test.ts +++ b/ui/hooks/useNftCollectionsMetadata.test.ts @@ -16,6 +16,10 @@ jest.mock('react-redux', () => ({ useSelector: (selector: any) => selector(), })); +jest.mock('../selectors', () => ({ + getCurrentChainId: jest.fn(), +})); + jest.mock('../store/actions', () => ({ getNFTContractInfo: jest.fn(), getTokenStandardAndDetails: jest.fn(), diff --git a/ui/hooks/usePolling.test.js b/ui/hooks/usePolling.test.js index a556bb86be54..9250257d3cbc 100644 --- a/ui/hooks/usePolling.test.js +++ b/ui/hooks/usePolling.test.js @@ -4,12 +4,13 @@ import usePolling from './usePolling'; describe('usePolling', () => { // eslint-disable-next-line jest/no-done-callback - it('calls startPolling and calls back with polling token when component instantiating the hook mounts', (done) => { + it('calls startPollingByNetworkClientId and callback option args with polling token when component instantiating the hook mounts', (done) => { const mockStart = jest.fn().mockImplementation(() => { return Promise.resolve('pollingToken'); }); const mockStop = jest.fn(); const networkClientId = 'mainnet'; + const options = {}; const mockState = { metamask: {}, }; @@ -17,16 +18,17 @@ describe('usePolling', () => { renderHookWithProvider(() => { usePolling({ callback: (pollingToken) => { - expect(mockStart).toHaveBeenCalledWith({ networkClientId }); + expect(mockStart).toHaveBeenCalledWith(networkClientId, options); expect(pollingToken).toBeDefined(); done(); return (_pollingToken) => { // noop }; }, - startPolling: mockStart, + startPollingByNetworkClientId: mockStart, stopPollingByPollingToken: mockStop, - input: { networkClientId }, + networkClientId, + options, }); }, mockState); }); @@ -37,6 +39,7 @@ describe('usePolling', () => { }); const mockStop = jest.fn(); const networkClientId = 'mainnet'; + const options = {}; const mockState = { metamask: {}, }; @@ -51,9 +54,10 @@ describe('usePolling', () => { done(); }; }, - startPolling: mockStart, + startPollingByNetworkClientId: mockStart, stopPollingByPollingToken: mockStop, - input: { networkClientId }, + networkClientId, + options, }), mockState, ); diff --git a/ui/hooks/usePolling.ts b/ui/hooks/usePolling.ts index 613e70cf17b5..1a9d6b1f576e 100644 --- a/ui/hooks/usePolling.ts +++ b/ui/hooks/usePolling.ts @@ -1,16 +1,22 @@ import { useEffect, useRef } from 'react'; -type UsePollingOptions = { +type UsePollingOptions = { callback?: (pollingToken: string) => (pollingToken: string) => void; - startPolling: (input: PollingInput) => Promise; + startPollingByNetworkClientId: ( + networkClientId: string, + // TODO: Replace `any` with type + // eslint-disable-next-line @typescript-eslint/no-explicit-any + options: any, + ) => Promise; stopPollingByPollingToken: (pollingToken: string) => void; - input: PollingInput; + networkClientId: string; + // TODO: Replace `any` with type + // eslint-disable-next-line @typescript-eslint/no-explicit-any + options?: any; enabled?: boolean; }; -const usePolling = ( - usePollingOptions: UsePollingOptions, -) => { +const usePolling = (usePollingOptions: UsePollingOptions) => { const pollTokenRef = useRef(null); const cleanupRef = useRef void)>(null); let isMounted = false; @@ -32,7 +38,10 @@ const usePolling = ( // Start polling when the component mounts usePollingOptions - .startPolling(usePollingOptions.input) + .startPollingByNetworkClientId( + usePollingOptions.networkClientId, + usePollingOptions.options, + ) .then((pollToken) => { pollTokenRef.current = pollToken; cleanupRef.current = usePollingOptions.callback?.(pollToken) || null; @@ -47,7 +56,12 @@ const usePolling = ( cleanup(); }; }, [ - usePollingOptions.input && JSON.stringify(usePollingOptions.input), + usePollingOptions.networkClientId, + usePollingOptions.options && + JSON.stringify( + usePollingOptions.options, + Object.keys(usePollingOptions.options).sort(), + ), usePollingOptions.enabled, ]); }; diff --git a/ui/hooks/useTokenRatesPolling.ts b/ui/hooks/useTokenRatesPolling.ts deleted file mode 100644 index 41c1c8793b97..000000000000 --- a/ui/hooks/useTokenRatesPolling.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { useSelector } from 'react-redux'; -import { - getMarketData, - getNetworkConfigurationsByChainId, - getTokenExchangeRates, - getTokensMarketData, - getUseCurrencyRateCheck, -} from '../selectors'; -import { - tokenRatesStartPolling, - tokenRatesStopPollingByPollingToken, -} from '../store/actions'; -import useMultiPolling from './useMultiPolling'; - -const useTokenRatesPolling = ({ chainIds }: { chainIds?: string[] } = {}) => { - // Selectors to determine polling input - const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck); - const networkConfigurations = useSelector(getNetworkConfigurationsByChainId); - - // Selectors returning state updated by the polling - const tokenExchangeRates = useSelector(getTokenExchangeRates); - const tokensMarketData = useSelector(getTokensMarketData); - const marketData = useSelector(getMarketData); - - useMultiPolling({ - startPolling: tokenRatesStartPolling, - stopPollingByPollingToken: tokenRatesStopPollingByPollingToken, - input: useCurrencyRateCheck - ? chainIds ?? Object.keys(networkConfigurations) - : [], - }); - - return { - tokenExchangeRates, - tokensMarketData, - marketData, - }; -}; - -export default useTokenRatesPolling; diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap index b5ebc0a83eb6..95828e3e250e 100644 --- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap +++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap @@ -268,17 +268,17 @@ exports[`AssetPage should render a native asset 1`] = `

- Tips for using a wallet + Start your journey with ETH

- Adding tokens unlocks more ways to use web3. + Get started with web3 by adding some ETH to your wallet.

- Tips for using a wallet + Start your journey with ETH

- Adding tokens unlocks more ways to use web3. + Get started with web3 by adding some ETH to your wallet.

$1.00

@@ -777,7 +777,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = ` style="padding-right: 100%; direction: rtl;" >

$1.00

@@ -1136,17 +1136,17 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `

- Tips for using a wallet + Start your journey with ETH

- Adding tokens unlocks more ways to use web3. + Get started with web3 by adding some ETH to your wallet.

- Select token and amount + Select token
diff --git a/ui/pages/bridge/bridge.util.test.ts b/ui/pages/bridge/bridge.util.test.ts index 30514dbf7f96..07c35ae57749 100644 --- a/ui/pages/bridge/bridge.util.test.ts +++ b/ui/pages/bridge/bridge.util.test.ts @@ -1,28 +1,13 @@ import fetchWithCache from '../../../shared/lib/fetch-with-cache'; import { CHAIN_IDS } from '../../../shared/constants/network'; -import mockBridgeQuotesErc20Erc20 from '../../../test/data/bridge/mock-quotes-erc20-erc20.json'; -import mockBridgeQuotesNativeErc20 from '../../../test/data/bridge/mock-quotes-native-erc20.json'; -import { zeroAddress } from '../../__mocks__/ethereumjs-util'; -import { - fetchBridgeFeatureFlags, - fetchBridgeQuotes, - fetchBridgeTokens, -} from './bridge.util'; +import { fetchBridgeFeatureFlags, fetchBridgeTokens } from './bridge.util'; jest.mock('../../../shared/lib/fetch-with-cache'); describe('Bridge utils', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - describe('fetchBridgeFeatureFlags', () => { it('should fetch bridge feature flags successfully', async () => { const mockResponse = { - 'extension-config': { - refreshRate: 3, - maxRefreshCount: 1, - }, 'extension-support': true, 'src-network-allowlist': [1, 10, 59144, 120], 'dest-network-allowlist': [1, 137, 59144, 11111], @@ -43,10 +28,6 @@ describe('Bridge utils', () => { }); expect(result).toStrictEqual({ - extensionConfig: { - maxRefreshCount: 1, - refreshRate: 3, - }, extensionSupport: true, srcNetworkAllowlist: [ CHAIN_IDS.MAINNET, @@ -65,10 +46,8 @@ describe('Bridge utils', () => { it('should use fallback bridge feature flags if response is unexpected', async () => { const mockResponse = { - 'extension-support': 25, - 'src-network-allowlist': ['a', 'b', 1], - a: 'b', - 'dest-network-allowlist': [1, 137, 59144, 11111], + flag1: true, + flag2: false, }; (fetchWithCache as jest.Mock).mockResolvedValue(mockResponse); @@ -86,10 +65,6 @@ describe('Bridge utils', () => { }); expect(result).toStrictEqual({ - extensionConfig: { - maxRefreshCount: 5, - refreshRate: 30000, - }, extensionSupport: false, srcNetworkAllowlist: [], destNetworkAllowlist: [], @@ -166,128 +141,4 @@ describe('Bridge utils', () => { await expect(fetchBridgeTokens('0xa')).rejects.toThrowError(mockError); }); }); - - describe('fetchBridgeQuotes', () => { - it('should fetch bridge quotes successfully, no approvals', async () => { - (fetchWithCache as jest.Mock).mockResolvedValue( - mockBridgeQuotesNativeErc20, - ); - const { signal } = new AbortController(); - - const result = await fetchBridgeQuotes( - { - walletAddress: '0x123', - srcChainId: 1, - destChainId: 10, - srcTokenAddress: zeroAddress(), - destTokenAddress: zeroAddress(), - srcTokenAmount: '20000', - slippage: 0.5, - }, - signal, - ); - - expect(fetchWithCache).toHaveBeenCalledWith({ - url: 'https://bridge.api.cx.metamask.io/getQuote?walletAddress=0x123&srcChainId=1&destChainId=10&srcTokenAddress=0x0000000000000000000000000000000000000000&destTokenAddress=0x0000000000000000000000000000000000000000&srcTokenAmount=20000&slippage=0.5&insufficientBal=false&resetApproval=false', - fetchOptions: { - method: 'GET', - headers: { 'X-Client-Id': 'extension' }, - signal, - }, - cacheOptions: { cacheRefreshTime: 0 }, - functionName: 'fetchBridgeQuotes', - }); - - expect(result).toStrictEqual(mockBridgeQuotesNativeErc20); - }); - - it('should fetch bridge quotes successfully, with approvals', async () => { - (fetchWithCache as jest.Mock).mockResolvedValue([ - ...mockBridgeQuotesErc20Erc20, - { ...mockBridgeQuotesErc20Erc20[0], approval: null }, - { ...mockBridgeQuotesErc20Erc20[0], trade: null }, - ]); - const { signal } = new AbortController(); - - const result = await fetchBridgeQuotes( - { - walletAddress: '0x123', - srcChainId: 1, - destChainId: 10, - srcTokenAddress: zeroAddress(), - destTokenAddress: zeroAddress(), - srcTokenAmount: '20000', - slippage: 0.5, - }, - signal, - ); - - expect(fetchWithCache).toHaveBeenCalledWith({ - url: 'https://bridge.api.cx.metamask.io/getQuote?walletAddress=0x123&srcChainId=1&destChainId=10&srcTokenAddress=0x0000000000000000000000000000000000000000&destTokenAddress=0x0000000000000000000000000000000000000000&srcTokenAmount=20000&slippage=0.5&insufficientBal=false&resetApproval=false', - fetchOptions: { - method: 'GET', - headers: { 'X-Client-Id': 'extension' }, - signal, - }, - cacheOptions: { cacheRefreshTime: 0 }, - functionName: 'fetchBridgeQuotes', - }); - - expect(result).toStrictEqual(mockBridgeQuotesErc20Erc20); - }); - - it('should filter out malformed bridge quotes', async () => { - (fetchWithCache as jest.Mock).mockResolvedValue([ - ...mockBridgeQuotesErc20Erc20, - ...mockBridgeQuotesErc20Erc20.map( - ({ quote, ...restOfQuote }) => restOfQuote, - ), - { - ...mockBridgeQuotesErc20Erc20[0], - quote: { - srcAsset: { - ...mockBridgeQuotesErc20Erc20[0].quote.srcAsset, - decimals: undefined, - }, - }, - }, - { - ...mockBridgeQuotesErc20Erc20[1], - quote: { - srcAsset: { - ...mockBridgeQuotesErc20Erc20[1].quote.destAsset, - address: undefined, - }, - }, - }, - ]); - const { signal } = new AbortController(); - - const result = await fetchBridgeQuotes( - { - walletAddress: '0x123', - srcChainId: 1, - destChainId: 10, - srcTokenAddress: zeroAddress(), - destTokenAddress: zeroAddress(), - srcTokenAmount: '20000', - slippage: 0.5, - }, - signal, - ); - - expect(fetchWithCache).toHaveBeenCalledWith({ - url: 'https://bridge.api.cx.metamask.io/getQuote?walletAddress=0x123&srcChainId=1&destChainId=10&srcTokenAddress=0x0000000000000000000000000000000000000000&destTokenAddress=0x0000000000000000000000000000000000000000&srcTokenAmount=20000&slippage=0.5&insufficientBal=false&resetApproval=false', - fetchOptions: { - method: 'GET', - headers: { 'X-Client-Id': 'extension' }, - signal, - }, - cacheOptions: { cacheRefreshTime: 0 }, - functionName: 'fetchBridgeQuotes', - }); - - expect(result).toStrictEqual(mockBridgeQuotesErc20Erc20); - }); - }); }); diff --git a/ui/pages/bridge/bridge.util.ts b/ui/pages/bridge/bridge.util.ts index bbdddab53658..915a933e7c02 100644 --- a/ui/pages/bridge/bridge.util.ts +++ b/ui/pages/bridge/bridge.util.ts @@ -11,6 +11,7 @@ import { } from '../../../shared/constants/bridge'; import { MINUTE } from '../../../shared/constants/time'; import fetchWithCache from '../../../shared/lib/fetch-with-cache'; +import { validateData } from '../../../shared/lib/swaps-utils'; import { decimalToHex, hexToDecimal, @@ -19,37 +20,43 @@ import { SWAPS_CHAINID_DEFAULT_TOKEN_MAP, SwapsTokenObject, } from '../../../shared/constants/swaps'; +import { TOKEN_VALIDATORS } from '../swaps/swaps.util'; import { isSwapsDefaultTokenAddress, isSwapsDefaultTokenSymbol, } from '../../../shared/modules/swaps.utils'; -// TODO: Remove restricted import -// eslint-disable-next-line import/no-restricted-paths -import { REFRESH_INTERVAL_MS } from '../../../app/scripts/controllers/bridge/constants'; -import { - BridgeAsset, - BridgeFlag, - FeatureFlagResponse, - FeeData, - FeeType, - Quote, - QuoteRequest, - QuoteResponse, - TxData, -} from './types'; -import { - FEATURE_FLAG_VALIDATORS, - QUOTE_VALIDATORS, - TX_DATA_VALIDATORS, - TOKEN_VALIDATORS, - validateResponse, - QUOTE_RESPONSE_VALIDATORS, - FEE_DATA_VALIDATORS, -} from './utils/validators'; const CLIENT_ID_HEADER = { 'X-Client-Id': BRIDGE_CLIENT_ID }; const CACHE_REFRESH_TEN_MINUTES = 10 * MINUTE; +// Types copied from Metabridge API +enum BridgeFlag { + EXTENSION_SUPPORT = 'extension-support', + NETWORK_SRC_ALLOWLIST = 'src-network-allowlist', + NETWORK_DEST_ALLOWLIST = 'dest-network-allowlist', +} + +export type FeatureFlagResponse = { + [BridgeFlag.EXTENSION_SUPPORT]: boolean; + [BridgeFlag.NETWORK_SRC_ALLOWLIST]: number[]; + [BridgeFlag.NETWORK_DEST_ALLOWLIST]: number[]; +}; +// End of copied types + +type Validator = { + property: keyof ExpectedResponse | string; + type: string; + validator: (value: DataToValidate) => boolean; +}; + +const validateResponse = ( + validators: Validator[], + data: unknown, + urlUsed: string, +): data is ExpectedResponse => { + return validateData(validators, data, urlUsed); +}; + export async function fetchBridgeFeatureFlags(): Promise { const url = `${BRIDGE_API_BASE_URL}/getAllFeatureFlags`; const rawFeatureFlags = await fetchWithCache({ @@ -60,15 +67,35 @@ export async function fetchBridgeFeatureFlags(): Promise { }); if ( - validateResponse( - FEATURE_FLAG_VALIDATORS, + validateResponse( + [ + { + property: BridgeFlag.EXTENSION_SUPPORT, + type: 'boolean', + validator: (v) => typeof v === 'boolean', + }, + { + property: BridgeFlag.NETWORK_SRC_ALLOWLIST, + type: 'object', + validator: (v): v is number[] => + Object.values(v as { [s: string]: unknown }).every( + (i) => typeof i === 'number', + ), + }, + { + property: BridgeFlag.NETWORK_DEST_ALLOWLIST, + type: 'object', + validator: (v): v is number[] => + Object.values(v as { [s: string]: unknown }).every( + (i) => typeof i === 'number', + ), + }, + ], rawFeatureFlags, url, ) ) { return { - [BridgeFeatureFlagsKey.EXTENSION_CONFIG]: - rawFeatureFlags[BridgeFlag.EXTENSION_CONFIG], [BridgeFeatureFlagsKey.EXTENSION_SUPPORT]: rawFeatureFlags[BridgeFlag.EXTENSION_SUPPORT], [BridgeFeatureFlagsKey.NETWORK_SRC_ALLOWLIST]: rawFeatureFlags[ @@ -81,10 +108,6 @@ export async function fetchBridgeFeatureFlags(): Promise { } return { - [BridgeFeatureFlagsKey.EXTENSION_CONFIG]: { - refreshRate: REFRESH_INTERVAL_MS, - maxRefreshCount: 5, - }, // TODO set default to true once bridging is live [BridgeFeatureFlagsKey.EXTENSION_SUPPORT]: false, // TODO set default to ALLOWED_BRIDGE_CHAIN_IDS once bridging is live @@ -119,9 +142,13 @@ export async function fetchBridgeTokens( transformedTokens[nativeToken.address] = nativeToken; } - tokens.forEach((token: unknown) => { + tokens.forEach((token: SwapsTokenObject) => { if ( - validateResponse(TOKEN_VALIDATORS, token, url) && + validateResponse( + TOKEN_VALIDATORS, + token, + url, + ) && !( isSwapsDefaultTokenSymbol(token.symbol, chainId) || isSwapsDefaultTokenAddress(token.address, chainId) @@ -132,56 +159,3 @@ export async function fetchBridgeTokens( }); return transformedTokens; } - -// Returns a list of bridge tx quotes -export async function fetchBridgeQuotes( - request: QuoteRequest, - signal: AbortSignal, -): Promise { - const queryParams = new URLSearchParams({ - walletAddress: request.walletAddress, - srcChainId: request.srcChainId.toString(), - destChainId: request.destChainId.toString(), - srcTokenAddress: request.srcTokenAddress, - destTokenAddress: request.destTokenAddress, - srcTokenAmount: request.srcTokenAmount, - slippage: request.slippage.toString(), - insufficientBal: request.insufficientBal ? 'true' : 'false', - resetApproval: request.resetApproval ? 'true' : 'false', - }); - const url = `${BRIDGE_API_BASE_URL}/getQuote?${queryParams}`; - const quotes = await fetchWithCache({ - url, - fetchOptions: { - method: 'GET', - headers: CLIENT_ID_HEADER, - signal, - }, - cacheOptions: { cacheRefreshTime: 0 }, - functionName: 'fetchBridgeQuotes', - }); - - const filteredQuotes = quotes.filter((quoteResponse: QuoteResponse) => { - const { quote, approval, trade } = quoteResponse; - return ( - validateResponse( - QUOTE_RESPONSE_VALIDATORS, - quoteResponse, - url, - ) && - validateResponse(QUOTE_VALIDATORS, quote, url) && - validateResponse(TOKEN_VALIDATORS, quote.srcAsset, url) && - validateResponse(TOKEN_VALIDATORS, quote.destAsset, url) && - validateResponse(TX_DATA_VALIDATORS, trade, url) && - validateResponse( - FEE_DATA_VALIDATORS, - quote.feeData[FeeType.METABRIDGE], - url, - ) && - (approval - ? validateResponse(TX_DATA_VALIDATORS, approval, url) - : true) - ); - }); - return filteredQuotes; -} diff --git a/ui/pages/bridge/index.scss b/ui/pages/bridge/index.scss index bc96dfbbe825..98a3a3ee5c34 100644 --- a/ui/pages/bridge/index.scss +++ b/ui/pages/bridge/index.scss @@ -1,8 +1,6 @@ @use "design-system"; @import 'prepare/index'; -@import 'quotes/index'; - .bridge { max-height: 100vh; diff --git a/ui/pages/bridge/index.test.tsx b/ui/pages/bridge/index.test.tsx index 7d5f813513c5..0d0d4c21c71f 100644 --- a/ui/pages/bridge/index.test.tsx +++ b/ui/pages/bridge/index.test.tsx @@ -8,7 +8,6 @@ import { renderWithProvider, MOCKS, CONSTANTS } from '../../../test/jest'; import { createBridgeMockStore } from '../../../test/jest/mock-store'; import CrossChainSwap from '.'; -const mockResetBridgeState = jest.fn(); const middleware = [thunk]; setBackgroundConnection({ resetPostFetchState: jest.fn(), @@ -25,7 +24,6 @@ setBackgroundConnection({ .mockResolvedValue({ chainId: '0x1' }), setBridgeFeatureFlags: jest.fn(), selectSrcNetwork: jest.fn(), - resetState: () => mockResetBridgeState(), // eslint-disable-next-line @typescript-eslint/no-explicit-any } as any); @@ -75,6 +73,5 @@ describe('Bridge', () => { expect(getByText('Bridge')).toBeInTheDocument(); expect(container).toMatchSnapshot(); - expect(mockResetBridgeState).toHaveBeenCalledTimes(1); }); }); diff --git a/ui/pages/bridge/index.tsx b/ui/pages/bridge/index.tsx index 62244e5793e5..e81b20670011 100644 --- a/ui/pages/bridge/index.tsx +++ b/ui/pages/bridge/index.tsx @@ -24,7 +24,7 @@ import { Header, } from '../../components/multichain/pages/page'; import { getProviderConfig } from '../../ducks/metamask/metamask'; -import { resetBridgeState, setFromChain } from '../../ducks/bridge/actions'; +import { resetInputFields, setFromChain } from '../../ducks/bridge/actions'; import PrepareBridgePage from './prepare/prepare-bridge-page'; import { BridgeCTAButton } from './prepare/bridge-cta-button'; @@ -45,23 +45,11 @@ const CrossChainSwap = () => { isBridgeEnabled && providerConfig && dispatch(setFromChain(providerConfig.chainId)); - }, [isBridgeChain, isBridgeEnabled, providerConfig]); - - const resetControllerAndInputStates = async () => { - await dispatch(resetBridgeState()); - }; - - useEffect(() => { - // Reset controller and inputs before unloading the page - resetControllerAndInputStates(); - - window.addEventListener('beforeunload', resetControllerAndInputStates); return () => { - window.removeEventListener('beforeunload', resetControllerAndInputStates); - resetControllerAndInputStates(); + dispatch(resetInputFields()); }; - }, []); + }, [isBridgeChain, isBridgeEnabled, providerConfig]); const redirectToDefaultRoute = async () => { history.push({ @@ -70,7 +58,6 @@ const CrossChainSwap = () => { }); dispatch(clearSwapsState()); await dispatch(resetBackgroundSwapsState()); - await resetControllerAndInputStates(); }; return ( diff --git a/ui/pages/bridge/prepare/__snapshots__/prepare-bridge-page.test.tsx.snap b/ui/pages/bridge/prepare/__snapshots__/prepare-bridge-page.test.tsx.snap index 26e25b8bd4cd..b406cafe0941 100644 --- a/ui/pages/bridge/prepare/__snapshots__/prepare-bridge-page.test.tsx.snap +++ b/ui/pages/bridge/prepare/__snapshots__/prepare-bridge-page.test.tsx.snap @@ -9,7 +9,7 @@ exports[`PrepareBridgePage should render the component, with initial state 1`] = class="mm-box prepare-bridge-page__content" >
$0.00 @@ -130,7 +129,7 @@ exports[`PrepareBridgePage should render the component, with initial state 1`] =
$0.00 @@ -213,7 +211,7 @@ exports[`PrepareBridgePage should render the component, with inputs set 1`] = ` class="mm-box prepare-bridge-page__content" >
$0.00 @@ -340,7 +337,7 @@ exports[`PrepareBridgePage should render the component, with inputs set 1`] = `
$0.00 diff --git a/ui/pages/bridge/prepare/bridge-cta-button.test.tsx b/ui/pages/bridge/prepare/bridge-cta-button.test.tsx index 91adb422e22b..5e42823c885b 100644 --- a/ui/pages/bridge/prepare/bridge-cta-button.test.tsx +++ b/ui/pages/bridge/prepare/bridge-cta-button.test.tsx @@ -3,10 +3,6 @@ import { renderWithProvider } from '../../../../test/jest'; import configureStore from '../../../store/store'; import { createBridgeMockStore } from '../../../../test/jest/mock-store'; import { CHAIN_IDS } from '../../../../shared/constants/network'; -import mockBridgeQuotesNativeErc20 from '../../../../test/data/bridge/mock-quotes-native-erc20.json'; -// TODO: Remove restricted import -// eslint-disable-next-line import/no-restricted-paths -import { RequestStatus } from '../../../../app/scripts/controllers/bridge/constants'; import { BridgeCTAButton } from './bridge-cta-button'; describe('BridgeCTAButton', () => { @@ -29,52 +25,6 @@ describe('BridgeCTAButton', () => { expect(getByRole('button')).toBeDisabled(); }); - it('should render the component when amount is missing', () => { - const mockStore = createBridgeMockStore( - { - srcNetworkAllowlist: [CHAIN_IDS.MAINNET, CHAIN_IDS.OPTIMISM], - destNetworkAllowlist: [CHAIN_IDS.LINEA_MAINNET], - }, - { - fromTokenInputValue: null, - fromToken: 'ETH', - toToken: 'ETH', - toChainId: CHAIN_IDS.LINEA_MAINNET, - }, - {}, - ); - const { getByText, getByRole } = renderWithProvider( - , - configureStore(mockStore), - ); - - expect(getByText('Enter amount')).toBeInTheDocument(); - expect(getByRole('button')).toBeDisabled(); - }); - - it('should render the component when amount and dest token is missing', () => { - const mockStore = createBridgeMockStore( - { - srcNetworkAllowlist: [CHAIN_IDS.MAINNET, CHAIN_IDS.OPTIMISM], - destNetworkAllowlist: [CHAIN_IDS.LINEA_MAINNET], - }, - { - fromTokenInputValue: null, - fromToken: 'ETH', - toToken: null, - toChainId: CHAIN_IDS.LINEA_MAINNET, - }, - {}, - ); - const { getByText, getByRole } = renderWithProvider( - , - configureStore(mockStore), - ); - - expect(getByText('Select token and amount')).toBeInTheDocument(); - expect(getByRole('button')).toBeDisabled(); - }); - it('should render the component when tx is submittable', () => { const mockStore = createBridgeMockStore( { @@ -87,72 +37,14 @@ describe('BridgeCTAButton', () => { toToken: 'ETH', toChainId: CHAIN_IDS.LINEA_MAINNET, }, - { - quotes: mockBridgeQuotesNativeErc20, - quotesLastFetched: Date.now(), - quotesLoadingStatus: RequestStatus.FETCHED, - }, - ); - const { getByText, getByRole } = renderWithProvider( - , - configureStore(mockStore), - ); - - expect(getByText('Confirm')).toBeInTheDocument(); - expect(getByRole('button')).not.toBeDisabled(); - }); - - it('should disable the component when quotes are loading and there are no existing quotes', () => { - const mockStore = createBridgeMockStore( - { - srcNetworkAllowlist: [CHAIN_IDS.MAINNET, CHAIN_IDS.OPTIMISM], - destNetworkAllowlist: [CHAIN_IDS.LINEA_MAINNET], - }, - { - fromTokenInputValue: 1, - fromToken: 'ETH', - toToken: 'ETH', - toChainId: CHAIN_IDS.LINEA_MAINNET, - }, - { - quotes: [], - quotesLastFetched: Date.now(), - quotesLoadingStatus: RequestStatus.LOADING, - }, - ); - const { getByText, getByRole } = renderWithProvider( - , - configureStore(mockStore), - ); - - expect(getByText('Fetching quotes...')).toBeInTheDocument(); - expect(getByRole('button')).toBeDisabled(); - }); - - it('should enable the component when quotes are loading and there are existing quotes', () => { - const mockStore = createBridgeMockStore( - { - srcNetworkAllowlist: [CHAIN_IDS.MAINNET, CHAIN_IDS.OPTIMISM], - destNetworkAllowlist: [CHAIN_IDS.LINEA_MAINNET], - }, - { - fromTokenInputValue: 1, - fromToken: 'ETH', - toToken: 'ETH', - toChainId: CHAIN_IDS.LINEA_MAINNET, - }, - { - quotes: mockBridgeQuotesNativeErc20, - quotesLastFetched: Date.now(), - quotesLoadingStatus: RequestStatus.LOADING, - }, + {}, ); const { getByText, getByRole } = renderWithProvider( , configureStore(mockStore), ); - expect(getByText('Confirm')).toBeInTheDocument(); + expect(getByText('Bridge')).toBeInTheDocument(); expect(getByRole('button')).not.toBeDisabled(); }); }); diff --git a/ui/pages/bridge/prepare/bridge-cta-button.tsx b/ui/pages/bridge/prepare/bridge-cta-button.tsx index 28a1a2c1fbd6..fedcf4d4606a 100644 --- a/ui/pages/bridge/prepare/bridge-cta-button.tsx +++ b/ui/pages/bridge/prepare/bridge-cta-button.tsx @@ -2,7 +2,6 @@ import React, { useMemo } from 'react'; import { useSelector } from 'react-redux'; import { Button } from '../../../components/component-library'; import { - getBridgeQuotes, getFromAmount, getFromChain, getFromToken, @@ -23,29 +22,16 @@ export const BridgeCTAButton = () => { const fromAmount = useSelector(getFromAmount); const toAmount = useSelector(getToAmount); - const { isLoading } = useSelector(getBridgeQuotes); - const isTxSubmittable = fromToken && toToken && fromChain && toChain && fromAmount && toAmount; const label = useMemo(() => { - if (isLoading && !isTxSubmittable) { - return t('swapFetchingQuotes'); - } - - if (!fromAmount) { - if (!toToken) { - return t('bridgeSelectTokenAndAmount'); - } - return t('bridgeEnterAmount'); - } - if (isTxSubmittable) { - return t('confirm'); + return t('bridge'); } return t('swapSelectToken'); - }, [isLoading, fromAmount, toToken, isTxSubmittable]); + }, [isTxSubmittable]); return ( - - -
-
-
-`; - -exports[`BridgeQuoteCard should render the recommended quote while loading new quotes 1`] = ` -
-
-
-
-
-
-

- Estimated time -

-
-
- -
-
-
-
-
-

-

-

- 1 minutes -

-
-
-
-
-

- Quote rate -

-
-
-
-

-

-

- 1 ETH = 2465.4630 USDC -

-
-
-
-
-

- Total fees -

-
-
- -
-
-
-
-
-

- 0.01 ETH -

-
-

- $0.01 -

-
-
-
-
- -

- Includes a 0.875% MetaMask fee. -

- - - -
-
-
-`; diff --git a/ui/pages/bridge/quotes/__snapshots__/bridge-quotes-modal.test.tsx.snap b/ui/pages/bridge/quotes/__snapshots__/bridge-quotes-modal.test.tsx.snap deleted file mode 100644 index 41d8a03d1ac1..000000000000 --- a/ui/pages/bridge/quotes/__snapshots__/bridge-quotes-modal.test.tsx.snap +++ /dev/null @@ -1,139 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BridgeQuotesModal should render the modal 1`] = ` - -
-
-
- -
-
- Balance: -
-
- 966.987986 ETH -
-
-
-
-
- - T - -
- test would like to read this message to complete your action -
-
-
-
-
-
- {"domain":{"chainId":97,"name":"Ether Mail","verifyingContract":"0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC","version":"1"}} - -
-
-
-
- -
- Decrypt message -
-
-
-
-
-
-
-
-
- - -
-
-
-
-`; - -exports[`ConfirmDecryptMessage Component matches snapshot if no unapproved decrypt messages 1`] = `
`; - -exports[`ConfirmDecryptMessage Component shows error on decrypt inline error 1`] = ` -
-
-
-
-
- Decrypt request -
-
-
-
-
-
-
+ {"domain":{"chainId":97,"name":"Ether Mail","verifyingContract":"0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC","version":"1"},"message":{"contents":"Hello, Bob!","from":{"name":"Cow","wallets":["0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826","0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF"]},"to":[{"name":"Bob","wallets":["0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB","0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57","0xB0B0b0b0b0b0B000000000000000000000000000"]}]},"primaryType":"Mail","types":{"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}],"Mail":[{"name":"from","type":"Person"},{"name":"to","type":"Person[]"},{"name":"contents","type":"string"}],"Person":[{"name":"name","type":"string"},{"name":"wallets","type":"address[]"}]}} + +
+
+
- - This message cannot be decrypted due to error: Decrypt inline error -
-
-
+
- -
- Decrypt message -
+ Decrypt message
-
+
`; -exports[`ConfirmDecryptMessage Component shows the correct message data 1`] = ` +exports[`ConfirmDecryptMessage Component should match snapshot when preference is Fiat currency 1`] = `
+ +
+
+
+
+
+
+
+
+ + + + +
@@ -494,7 +451,7 @@ exports[`ConfirmDecryptMessage Component shows the correct message data 1`] = `
- 966.987986 ETH + 1520956.064158 DEF
@@ -515,66 +472,35 @@ exports[`ConfirmDecryptMessage Component shows the correct message data 1`] = `
-
- raw message - -
-
-
-
- -
- Decrypt message -
-
-
+ {"domain":{"chainId":97,"name":"Ether Mail","verifyingContract":"0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC","version":"1"},"message":{"contents":"Hello, Bob!","from":{"name":"Cow","wallets":["0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826","0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF"]},"to":[{"name":"Bob","wallets":["0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB","0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57","0xB0B0b0b0b0b0B000000000000000000000000000"]}]},"primaryType":"Mail","types":{"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}],"Mail":[{"name":"from","type":"Person"},{"name":"to","type":"Person[]"},{"name":"contents","type":"string"}],"Person":[{"name":"name","type":"string"},{"name":"wallets","type":"address[]"}]}} +
+
+
-
- Copy encrypted message -
- + Decrypt message
+
{ - const t = useI18nContext(); - return ( -
-
-
- {t('decryptRequest')} -
-
-
-
-
- ); -}; +export default class ConfirmDecryptMessage extends Component { + static contextTypes = { + t: PropTypes.func.isRequired, + trackEvent: PropTypes.func.isRequired, + }; + + static propTypes = { + fromAccount: PropTypes.shape({ + address: PropTypes.string.isRequired, + balance: PropTypes.string, + name: PropTypes.string, + }).isRequired, + clearConfirmTransaction: PropTypes.func.isRequired, + cancelDecryptMessage: PropTypes.func.isRequired, + decryptMessage: PropTypes.func.isRequired, + decryptMessageInline: PropTypes.func.isRequired, + history: PropTypes.object.isRequired, + mostRecentOverviewPage: PropTypes.string.isRequired, + requesterAddress: PropTypes.string, + txData: PropTypes.object, + subjectMetadata: PropTypes.object, + nativeCurrency: PropTypes.string.isRequired, + currentCurrency: PropTypes.string.isRequired, + conversionRate: PropTypes.number, + }; + + state = { + copyToClipboardPressed: false, + hasCopied: false, + }; + + copyMessage = () => { + copyToClipboard(this.state.rawMessage, COPY_OPTIONS); + this.context.trackEvent({ + category: MetaMetricsEventCategory.Messages, + event: 'Copy', + properties: { + action: 'Decrypt Message Copy', + legacy_event: true, + }, + }); + this.setState({ hasCopied: true }); + setTimeout(() => this.setState({ hasCopied: false }), SECOND * 3); + }; -const Account = ({ fromAccount, nativeCurrency }) => { - const t = useI18nContext(); + renderHeader = () => { + return ( +
+
+ +
+ {this.context.t('decryptRequest')} +
+ +
+
+
+
+ ); + }; - const nativeCurrencyBalance = new Numeric( - fromAccount.balance, - 16, - EtherDenomination.WEI, - ) - .toDenomination(EtherDenomination.ETH) - .round(6) - .toBase(10) - .toString(); + renderAccount = () => { + const { fromAccount } = this.props; + const { t } = this.context; - return ( -
+ return (
{`${t('account')}:`}
+
+ ); + }; + + renderBalance = () => { + const { + conversionRate, + nativeCurrency, + currentCurrency, + fromAccount: { balance }, + } = this.props; + const { t } = this.context; + + const nativeCurrencyBalance = conversionRate + ? formatCurrency( + getValueFromWeiHex({ + value: balance, + fromCurrency: nativeCurrency, + toCurrency: currentCurrency, + conversionRate, + numberOfDecimals: 6, + toDenomination: EtherDenomination.ETH, + }), + currentCurrency, + ) + : new Numeric(balance, 16, EtherDenomination.WEI) + .toDenomination(EtherDenomination.ETH) + .round(6) + .toBase(10) + .toString(); + + return (
{`${t('balance')}:`}
- {`${nativeCurrencyBalance} ${nativeCurrency}`} + {`${nativeCurrencyBalance} ${ + conversionRate ? currentCurrency?.toUpperCase() : nativeCurrency + }`}
-
- ); -}; - -Account.propTypes = { - fromAccount: PropTypes.shape({ - balance: PropTypes.string.isRequired, - }).isRequired, - nativeCurrency: PropTypes.string.isRequired, -}; - -const VisualSection = ({ name, notice, targetSubjectMetadata }) => ( -
-
- {targetSubjectMetadata?.iconUrl ? ( - - ) : ( - - {name.charAt(0).toUpperCase()} - - )} -
{notice}
-
-
-); - -VisualSection.propTypes = { - name: PropTypes.string.isRequired, - notice: PropTypes.string.isRequired, - targetSubjectMetadata: PropTypes.shape({ - iconUrl: PropTypes.string, - }), -}; + ); + }; -const ScrollToBottomButton = ({ - isScrollable, - isScrolledToBottom, - hasDecrypted, - hasError, - scrollToBottom, -}) => { - const t = useI18nContext(); + renderRequestIcon = () => { + const { requesterAddress } = this.props; - const isScrollToBottomVisible = - hasDecrypted && !hasError && isScrollable && !isScrolledToBottom; + return ( +
+ +
+ ); + }; - if (!isScrollToBottomVisible) { - return null; - } + renderAccountInfo = () => { + return ( +
+ {this.renderAccount()} + {this.renderRequestIcon()} + {this.renderBalance()} +
+ ); + }; - return ( - - ); -}; + renderBody = () => { + const { decryptMessageInline, subjectMetadata, txData } = this.props; + const { t } = this.context; -ScrollToBottomButton.propTypes = { - isScrollable: PropTypes.bool.isRequired, - isScrolledToBottom: PropTypes.bool.isRequired, - hasDecrypted: PropTypes.bool.isRequired, - hasError: PropTypes.bool.isRequired, - scrollToBottom: PropTypes.func.isRequired, -}; + const targetSubjectMetadata = subjectMetadata[txData.msgParams.origin]; + const name = targetSubjectMetadata?.name || txData.msgParams.origin; + const notice = t('decryptMessageNotice', [txData.msgParams.origin]); -const MessageBody = forwardRef( - ( - { - isScrollable, - isScrolledToBottom, - onScroll, + const { + hasCopied, + hasDecrypted, + hasError, rawMessage, - scrollToBottom, - setRawMessage, - messageData, - }, - ref, - ) => { - const dispatch = useDispatch(); - const trackEvent = useContext(MetaMetricsContext); - const t = useI18nContext(); - - const [copyToClipboardPressed, setCopyToClipboardPressed] = useState(false); - const [hasCopied, setHasCopied] = useState(false); - const [hasDecrypted, setHasDecrypted] = useState(false); - const [hasError, setHasError] = useState(false); - const [errorMessage, setErrorMessage] = useState(''); - - const copyMessage = () => { - copyToClipboard(rawMessage, COPY_OPTIONS); - trackEvent({ - category: MetaMetricsEventCategory.Messages, - event: 'Copy', - properties: { - action: 'Decrypt Message Copy', - legacy_event: true, - }, - }); - setHasCopied(true); - setTimeout(() => setHasCopied(false), SECOND * 3); - }; - - const onDecryptMessage = async (event) => { - event.stopPropagation(event); - - const params = messageData.msgParams; - params.metamaskId = messageData.id; - - const result = await dispatch(decryptMsgInline(params)); - if (result.error) { - setHasError(true); - setErrorMessage(t('decryptInlineError', [result.error])); - } else { - setHasDecrypted(true); - setRawMessage(result.rawSig); - } - }; + errorMessage, + copyToClipboardPressed, + } = this.state; return ( -
+
+ {this.renderAccountInfo()} +
+
+ {targetSubjectMetadata?.iconUrl ? ( + + ) : ( + + {name.charAt(0).toUpperCase()} + + )} +
{notice}
+
+
-
- {!hasDecrypted && !hasError - ? messageData.msgParams.data - : rawMessage} +
+ {!hasDecrypted && !hasError ? txData.msgParams.data : rawMessage} {hasError ? errorMessage : ''}
{ + decryptMessageInline(txData, event).then((result) => { + if (result.error) { + this.setState({ + hasError: true, + errorMessage: this.context.t('decryptInlineError', [ + result.error, + ]), + }); + } else { + this.setState({ + hasDecrypted: true, + rawMessage: result.rawSig, + }); + } + }); + }} >
@@ -256,13 +236,6 @@ const MessageBody = forwardRef(
- {hasDecrypted ? (
setCopyToClipboardPressed(true)} - onMouseUp={() => setCopyToClipboardPressed(false)} - data-testid="message-copy" + onClick={() => this.copyMessage()} + onMouseDown={() => this.setState({ copyToClipboardPressed: true })} + onMouseUp={() => this.setState({ copyToClipboardPressed: false })} > ); - }, -); -MessageBody.displayName = 'MessageBody'; - -MessageBody.propTypes = { - isScrollable: PropTypes.bool.isRequired, - isScrolledToBottom: PropTypes.bool.isRequired, - onScroll: PropTypes.func.isRequired, - rawMessage: PropTypes.string.isRequired, - scrollToBottom: PropTypes.func.isRequired, - setRawMessage: PropTypes.func.isRequired, - messageData: PropTypes.shape({ - msgParams: PropTypes.shape({ - data: PropTypes.string.isRequired, - from: PropTypes.string.isRequired, - origin: PropTypes.string.isRequired, - }).isRequired, - id: PropTypes.string.isRequired, - }).isRequired, -}; - -const Footer = ({ - hasScrolledToBottom, - isScrollable, - mostRecentOverviewPage, - messageData, -}) => { - const dispatch = useDispatch(); - const history = useHistory(); - const t = useI18nContext(); - const trackEvent = useContext(MetaMetricsContext); - - const onCancelClick = async (event) => { - event.stopPropagation(event); - - await dispatch(cancelDecryptMsg(messageData)); - trackEvent({ - category: MetaMetricsEventCategory.Messages, - event: 'Cancel', - properties: { - action: 'Decrypt Message Request', - legacy_event: true, - }, - }); - dispatch(clearConfirmTransaction()); - history.push(mostRecentOverviewPage); }; - const onSubmitClick = async (event) => { - event.stopPropagation(event); - const params = messageData.msgParams; - params.metamaskId = messageData.id; + renderFooter = () => { + const { + cancelDecryptMessage, + clearConfirmTransaction, + decryptMessage, + history, + mostRecentOverviewPage, + txData, + } = this.props; + const { trackEvent, t } = this.context; - await dispatch(decryptMsg(params)); - trackEvent({ - category: MetaMetricsEventCategory.Messages, - event: 'Confirm', - properties: { - action: 'Decrypt Message Request', - legacy_event: true, - }, - }); - dispatch(clearConfirmTransaction()); - history.push(mostRecentOverviewPage); + return ( + { + await cancelDecryptMessage(txData, event); + trackEvent({ + category: MetaMetricsEventCategory.Messages, + event: 'Cancel', + properties: { + action: 'Decrypt Message Request', + legacy_event: true, + }, + }); + clearConfirmTransaction(); + history.push(mostRecentOverviewPage); + }} + onSubmit={async (event) => { + await decryptMessage(txData, event); + trackEvent({ + category: MetaMetricsEventCategory.Messages, + event: 'Confirm', + properties: { + action: 'Decrypt Message Request', + legacy_event: true, + }, + }); + clearConfirmTransaction(); + history.push(mostRecentOverviewPage); + }} + /> + ); }; - return ( - - ); -}; - -Footer.propTypes = { - hasScrolledToBottom: PropTypes.bool.isRequired, - isScrollable: PropTypes.bool.isRequired, - mostRecentOverviewPage: PropTypes.string.isRequired, - messageData: PropTypes.shape({ - msgParams: PropTypes.shape({ - data: PropTypes.string.isRequired, - from: PropTypes.string.isRequired, - origin: PropTypes.string.isRequired, - }).isRequired, - id: PropTypes.string.isRequired, - }).isRequired, -}; - -const ConfirmDecryptMessage = () => { - const t = useI18nContext(); - const [rawMessage, setRawMessage] = useState(''); - const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage); - const nativeCurrency = useSelector(getNativeCurrency); - - const unconfirmedTransactions = useSelector( - unconfirmedTransactionsListSelector, - ); - const messageData = cloneDeep(unconfirmedTransactions[0]); - - const fromAccount = useSelector((state) => - getTargetAccountWithSendEtherInfo(state, messageData?.msgParams?.from), - ); + render = () => { + if (!this.props.txData) { + log.warn('ConfirmDecryptMessage Page: Missing txData prop.'); + return null; + } - const subjectMetadata = useSelector( - (state) => state.metamask.subjectMetadata || {}, - ); - - const { - hasScrolledToBottom, - isScrollable, - isScrolledToBottom, - onScroll, - scrollToBottom, - ref, - } = useScrollRequired([rawMessage], { - offsetPxFromBottom: 0, - }); - - if (!messageData) { - log.warn('ConfirmDecryptMessage Page: Missing messageData prop.'); - return null; - } - - const targetSubjectMetadata = subjectMetadata[messageData.msgParams.origin]; - const name = targetSubjectMetadata?.name || messageData.msgParams.origin; - const notice = t('decryptMessageNotice', [messageData.msgParams.origin]); - - return ( -
-
-
- - - + return ( +
+ {this.renderHeader()} + {this.renderBody()} + {this.renderFooter()}
-
-
- ); -}; - -export default ConfirmDecryptMessage; + ); + }; +} diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.test.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.test.js index 7884cb22e4bb..e073474d79fe 100644 --- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.test.js +++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.test.js @@ -1,17 +1,9 @@ import React from 'react'; import configureMockStore from 'redux-mock-store'; -import { merge } from 'lodash'; -import copyToClipboard from 'copy-to-clipboard'; +import { EthAccountType } from '@metamask/keyring-api'; import mockState from '../../../test/data/mock-state.json'; import { renderWithProvider } from '../../../test/lib/render-helpers'; -import { flushPromises } from '../../../test/lib/timer-helpers'; -import { - decryptMsg, - decryptMsgInline, - cancelDecryptMsg, -} from '../../store/actions'; -import { useScrollRequired } from '../../hooks/useScrollRequired'; -import { MetaMetricsContext } from '../../contexts/metametrics'; +import { ETH_EOA_METHODS } from '../../../shared/constants/eth-methods'; import ConfirmDecryptMessage from './confirm-decrypt-message.component'; const messageData = { @@ -21,245 +13,129 @@ const messageData = { verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC', version: '1', }, -}; -const messageIdMock = '12345'; -const messageMock = { - id: messageIdMock, - time: 123, - status: 'unapproved', - type: 'testType', - rawSig: undefined, - data: JSON.stringify(messageData), - chainId: '0x5', - msgParams: { - data: JSON.stringify(messageData), - from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', - version: 'V4', - origin: 'test', + message: { + contents: 'Hello, Bob!', + from: { + name: 'Cow', + wallets: [ + '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826', + '0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF', + ], + }, + to: [ + { + name: 'Bob', + wallets: [ + '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB', + '0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57', + '0xB0B0b0b0b0b0B000000000000000000000000000', + ], + }, + ], }, -}; -const mockRawSignatureMessage = 'raw message'; -const mockRawSignatureLongMessage = 'raw message '.repeat(100); -const mockUseScrollRequiredResult = { - hasScrolledToBottom: false, - isScrollable: false, - isScrolledToBottom: false, - onScroll: jest.fn(), - scrollToBottom: jest.fn(), - setHasScrolledToBottom: jest.fn(), - ref: { - current: {}, + primaryType: 'Mail', + types: { + EIP712Domain: [ + { name: 'name', type: 'string' }, + { name: 'version', type: 'string' }, + { name: 'chainId', type: 'uint256' }, + { name: 'verifyingContract', type: 'address' }, + ], + Mail: [ + { name: 'from', type: 'Person' }, + { name: 'to', type: 'Person[]' }, + { name: 'contents', type: 'string' }, + ], + Person: [ + { name: 'name', type: 'string' }, + { name: 'wallets', type: 'address[]' }, + ], }, }; - -jest.mock('../../hooks/useScrollRequired', () => ({ - useScrollRequired: jest.fn(), -})); - -jest.mock('../../store/actions', () => ({ - cancelDecryptMsg: jest.fn(), - decryptMsg: jest.fn(), - decryptMsgInline: jest.fn(), -})); - -jest.mock('copy-to-clipboard', () => ({ - __esModule: true, - default: jest.fn(), -})); - -const state = merge({}, mockState, { - history: { - mostRecentOverviewPage: '/', +const baseProps = { + clearConfirmTransaction: () => undefined, + cancelDecryptMessage: () => undefined, + decryptMessage: () => undefined, + decryptMessageInline: () => undefined, + mostRecentOverviewPage: '/', + history: { push: '/' }, + requesterAddress: '0x123456789abcdef', + txData: { + msgParams: { + data: JSON.stringify(messageData), + version: 'V4', + origin: 'test', + }, }, - metamask: { - unapprovedDecryptMsgs: [messageMock], + subjectMetadata: { + 'peepeth.com': { + iconUrl: 'https://peepeth.com/favicon-32x32.png', + name: 'Peepeth', + }, + 'https://remix.ethereum.org': { + iconUrl: 'https://remix.ethereum.org/icon.png', + name: 'Remix - Ethereum IDE', + }, }, -}); + nativeCurrency: 'ABC', + currentCurrency: 'def', + fromAccount: { + address: '0x123456789abcdef', + balance: '0x346ba7725f412cbfdb', + id: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3', + metadata: { + name: 'Antonio', + keyring: { + type: 'HD Key Tree', + }, + }, + options: {}, + methods: ETH_EOA_METHODS, + type: EthAccountType.Eoa, + }, +}; describe('ConfirmDecryptMessage Component', () => { - const mockCopyToClipboard = jest.mocked(copyToClipboard); - const mockCancelDecryptMsg = jest.mocked(cancelDecryptMsg); - const mockDecryptMsgInline = jest.mocked(decryptMsgInline); - const mockDecryptMsg = jest.mocked(decryptMsg); - const mockUseScrollRequired = jest.mocked(useScrollRequired); - const mockTrackEvent = jest.fn(); - - let store; - - beforeEach(() => { - jest.clearAllMocks(); - store = configureMockStore()(state); - - mockDecryptMsgInline.mockReturnValue({ - rawSig: mockRawSignatureMessage, - type: 'DECRYPT_MESSAGE_INLINE', - }); - mockDecryptMsg.mockReturnValue({ - type: 'DECRYPT_MESSAGE', - }); - mockCancelDecryptMsg.mockReturnValue({ - type: 'CANCEL_DECRYPT_MESSAGE', - }); - - mockUseScrollRequired.mockReturnValue(mockUseScrollRequiredResult); - }); + const store = configureMockStore()(mockState); - const renderAndUnlockMessage = async () => { - const result = renderWithProvider( - - - , + it('should match snapshot when preference is ETH currency', () => { + const { container } = renderWithProvider( + , store, ); - const unlockButton = result.getByTestId('message-lock'); - unlockButton.click(); - await flushPromises(); - return result; - }; - - it('matches snapshot', () => { - const { container } = renderWithProvider(, store); expect(container).toMatchSnapshot(); + expect( + container.querySelector('.request-decrypt-message__balance-value') + .textContent, + ).toMatchInlineSnapshot(`"966.987986 ABC"`); }); - it('matches snapshot if no unapproved decrypt messages', () => { - const stateWithoutUnapprovedDecryptMsgs = merge({}, mockState); - stateWithoutUnapprovedDecryptMsgs.metamask.unapprovedDecryptMsgs = []; - stateWithoutUnapprovedDecryptMsgs.metamask.transactions = []; - - const storeWithoutUnapprovedDecryptMsgs = configureMockStore()( - stateWithoutUnapprovedDecryptMsgs, - ); - + it('should match snapshot when preference is Fiat currency', () => { const { container } = renderWithProvider( - , - storeWithoutUnapprovedDecryptMsgs, - ); - expect(container).toMatchSnapshot(); - }); - - it('shows error on decrypt inline error', async () => { - mockDecryptMsgInline.mockReturnValue({ - error: 'Decrypt inline error', - type: 'DECRYPT_MESSAGE_INLINE', - }); - - const { container } = await renderAndUnlockMessage(); - - expect(container).toMatchSnapshot(); - }); - - it('decrypt button calls decrypt action and calls metric event', async () => { - const { getByText } = renderWithProvider( - - - , + , store, ); - const confirmButton = getByText('Decrypt'); - confirmButton.click(); - await flushPromises(); - - expect(mockDecryptMsg).toHaveBeenCalled(); - expect(mockTrackEvent).toHaveBeenCalled(); + expect(container).toMatchSnapshot(); + expect( + container.querySelector('.request-decrypt-message__balance-value') + .textContent, + ).toMatchInlineSnapshot(`"1520956.064158 DEF"`); }); - it('cancel button calls cancel action and calls metric event', async () => { - const { getByText } = renderWithProvider( - - - , + it('should match snapshot when there is no txData', () => { + const newProps = { + ...baseProps, + txData: null, + }; + const { container } = renderWithProvider( + , store, ); - const confirmButton = getByText('Cancel'); - confirmButton.click(); - await flushPromises(); - - expect(mockCancelDecryptMsg).toHaveBeenCalled(); - expect(mockTrackEvent).toHaveBeenCalled(); - }); - - it('shows the correct message data', async () => { - const { container, getByText } = await renderAndUnlockMessage(); - - expect(container).toMatchSnapshot(); - expect(getByText(mockRawSignatureMessage)).toBeInTheDocument(); - }); - - it('shows the copy button after decrypting inline and calls copy to clipboard on click', async () => { - const { getByTestId } = await renderAndUnlockMessage(); - - const copyButton = getByTestId('message-copy'); - expect(copyButton).toBeInTheDocument(); - - copyButton.click(); - expect(mockCopyToClipboard).toHaveBeenCalled(); - expect(mockTrackEvent).toHaveBeenCalled(); - }); - - describe('on long message', () => { - beforeEach(() => { - mockDecryptMsgInline.mockReturnValue({ - rawSig: mockRawSignatureLongMessage, - type: 'DECRYPT_MESSAGE_INLINE', - }); - }); - - it('shows scroll to bottom button', async () => { - mockUseScrollRequired.mockReturnValue( - merge({}, mockUseScrollRequiredResult, { isScrollable: true }), - ); - - const { getByTestId } = await renderAndUnlockMessage(); - - const scrollToBottomButton = getByTestId('scroll-to-bottom'); - expect(scrollToBottomButton).toBeInTheDocument(); - }); - - it('confirm action is disabled if scroll not finished', async () => { - mockUseScrollRequired.mockReturnValue( - merge({}, mockUseScrollRequiredResult, { isScrollable: true }), - ); - - const { getByText } = await renderAndUnlockMessage(); - - const confirmButton = getByText('Decrypt'); - expect(confirmButton).toBeDisabled(); - }); - - it('scroll to bottom button click calls scroll to bottom action', async () => { - const spyScrollToBottomAction = jest.fn(); - mockUseScrollRequired.mockReturnValue( - merge({}, mockUseScrollRequiredResult, { - isScrollable: true, - scrollToBottom: spyScrollToBottomAction, - }), - ); - - const { getByTestId } = await renderAndUnlockMessage(); - - const scrollToBottomButton = getByTestId('scroll-to-bottom'); - scrollToBottomButton.click(); - - expect(spyScrollToBottomAction).toHaveBeenCalled(); - }); - - it('enables confirm action if scrolled to bottom', async () => { - mockUseScrollRequired.mockReturnValue( - merge({}, mockUseScrollRequiredResult, { - isScrollable: true, - hasScrolledToBottom: true, - isScrolledToBottom: true, - }), - ); - - const { getByText } = await renderAndUnlockMessage(); - - const confirmButton = getByText('Decrypt'); - expect(confirmButton).not.toBeDisabled(); - }); + expect( + container.querySelector('.request-decrypt-message__container'), + ).toBeNull(); }); }); diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.container.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.container.js new file mode 100644 index 000000000000..88d7c8deb40b --- /dev/null +++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.container.js @@ -0,0 +1,76 @@ +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import { withRouter } from 'react-router-dom'; +import { cloneDeep } from 'lodash'; + +import { + goHome, + decryptMsg, + cancelDecryptMsg, + decryptMsgInline, +} from '../../store/actions'; +import { + getCurrentCurrency, + getTargetAccountWithSendEtherInfo, + unconfirmedTransactionsListSelector, +} from '../../selectors'; +import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck'; +import { getMostRecentOverviewPage } from '../../ducks/history/history'; +import { getNativeCurrency } from '../../ducks/metamask/metamask'; +import ConfirmDecryptMessage from './confirm-decrypt-message.component'; + +// ConfirmDecryptMessage component is not used in codebase, removing usage of useNativeCurrencyAsPrimaryCurrency +function mapStateToProps(state) { + const { + metamask: { subjectMetadata = {} }, + } = state; + + const unconfirmedTransactions = unconfirmedTransactionsListSelector(state); + + const txData = cloneDeep(unconfirmedTransactions[0]); + + const fromAccount = getTargetAccountWithSendEtherInfo( + state, + txData?.msgParams?.from, + ); + + return { + txData, + subjectMetadata, + fromAccount, + requester: null, + requesterAddress: null, + conversionRate: null, + mostRecentOverviewPage: getMostRecentOverviewPage(state), + nativeCurrency: getNativeCurrency(state), + currentCurrency: getCurrentCurrency(state), + }; +} + +function mapDispatchToProps(dispatch) { + return { + goHome: () => dispatch(goHome()), + clearConfirmTransaction: () => dispatch(clearConfirmTransaction()), + decryptMessage: (msgData, event) => { + const params = msgData.msgParams; + params.metamaskId = msgData.id; + event.stopPropagation(event); + return dispatch(decryptMsg(params)); + }, + cancelDecryptMessage: (msgData, event) => { + event.stopPropagation(event); + return dispatch(cancelDecryptMsg(msgData)); + }, + decryptMessageInline: (msgData, event) => { + const params = msgData.msgParams; + params.metamaskId = msgData.id; + event.stopPropagation(event); + return dispatch(decryptMsgInline(params)); + }, + }; +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps), +)(ConfirmDecryptMessage); diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss index ac33ae6afc8c..b1d74b6be9cb 100644 --- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss +++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss @@ -1,4 +1,4 @@ -@use 'design-system'; +@use "design-system"; .request-decrypt-message { &__container { @@ -164,37 +164,19 @@ width: 100%; } - &__message-container { - position: relative; - - .scroll-to-bottom__button { - position: absolute; - margin-left: auto; - margin-right: auto; - left: 0; - right: 0; - bottom: 28px; - - &:hover { - background-color: var(--color-primary-default); - } - } - } - &__message { overflow-wrap: break-word; margin: 20px; overflow: hidden; + border: 1px solid var(--color-border-alternative); + padding: 5px; border-radius: 5px; position: relative; - border: 1px solid var(--color-border-muted); - padding: 13px 16px; &-text { @include design-system.H7; height: 115px; - overflow-y: scroll; } &-cover { @@ -211,7 +193,6 @@ height: 100%; width: 100%; top: 0; - left: 0; cursor: pointer; &__container { @@ -227,6 +208,7 @@ align-items: center; justify-content: center; + &__icon { color: var(--color-icon-default); display: flex; @@ -249,7 +231,6 @@ justify-content: space-evenly; margin-left: 20px; margin-right: 20px; - margin-top: 24px; display: flex; cursor: pointer; } @@ -257,7 +238,6 @@ &-copy-text { margin-right: 10px; display: inline; - color: var(--color-primary-default); } &-copy-tooltip { diff --git a/ui/pages/confirm-decrypt-message/index.js b/ui/pages/confirm-decrypt-message/index.js index 3fbb921b8dce..c375f08a6fb5 100644 --- a/ui/pages/confirm-decrypt-message/index.js +++ b/ui/pages/confirm-decrypt-message/index.js @@ -1 +1 @@ -export { default } from './confirm-decrypt-message.component'; +export { default } from './confirm-decrypt-message.container'; diff --git a/ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js b/ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js index 106984363699..a52b4c16f893 100644 --- a/ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js +++ b/ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js @@ -11,7 +11,8 @@ import { } from '../../../../../helpers/constants/design-system'; import { getAdvancedGasFeeValues, - selectNetworkIdentifierByChainId, + getCurrentChainId, + getNetworkIdentifier, } from '../../../../../selectors'; import { setAdvancedGasFee } from '../../../../../store/actions'; import { useGasFeeContext } from '../../../../../contexts/gasFee'; @@ -34,14 +35,11 @@ const AdvancedGasFeeDefaults = () => { 10, ).toString(); const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues); + // This will need to use a different chainId in multinetwork + const chainId = useSelector(getCurrentChainId); + const networkIdentifier = useSelector(getNetworkIdentifier); const { updateTransactionEventFragment } = useTransactionEventFragment(); - const { editGasMode, transaction } = useGasFeeContext(); - const { chainId } = transaction; - - const networkIdentifier = useSelector((state) => - selectNetworkIdentifierByChainId(state, chainId), - ); - + const { editGasMode } = useGasFeeContext(); const [isDefaultSettingsSelected, setDefaultSettingsSelected] = useState( Boolean(advancedGasFeeValues) && advancedGasFeeValues.maxBaseFee === maxBaseFee && diff --git a/ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.test.js b/ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.test.js index 07c7fc8faaab..5e330a8b90c7 100644 --- a/ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.test.js +++ b/ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.test.js @@ -21,7 +21,6 @@ import { mockNetworkState } from '../../../../../../test/stub/networks'; import AdvancedGasFeeDefaults from './advanced-gas-fee-defaults'; const TEXT_SELECTOR = 'Save these values as my default for the Goerli network.'; -const CHAIN_ID_MOCK = CHAIN_IDS.GOERLI; jest.mock('../../../../../store/actions', () => ({ gasFeeStartPollingByNetworkClientId: jest @@ -44,7 +43,7 @@ const render = async (defaultGasParams, contextParams) => { metamask: { ...mockState.metamask, ...defaultGasParams, - ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), + ...mockNetworkState({ chainId: CHAIN_IDS.GOERLI }), accounts: { [mockSelectedInternalAccount.address]: { address: mockSelectedInternalAccount.address, @@ -72,7 +71,6 @@ const render = async (defaultGasParams, contextParams) => { (result = renderWithProvider( 0.001197 @@ -93,10 +92,10 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = ` class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative" >

0.00147 diff --git a/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap b/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap index db005f8c02e0..f6e40da8118c 100644 --- a/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap +++ b/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap @@ -51,7 +51,6 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = ` > 0.000021 @@ -68,7 +67,6 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = ` > 0.000021 @@ -102,7 +100,6 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = ` > 0.000021 diff --git a/ui/pages/confirmations/components/confirm-hexdata/confirm-hexdata.test.js b/ui/pages/confirmations/components/confirm-hexdata/confirm-hexdata.test.js index 949b3ed92a86..d31478775ba2 100644 --- a/ui/pages/confirmations/components/confirm-hexdata/confirm-hexdata.test.js +++ b/ui/pages/confirmations/components/confirm-hexdata/confirm-hexdata.test.js @@ -1,33 +1,20 @@ import React from 'react'; -import { CHAIN_IDS } from '@metamask/transaction-controller'; import mockState from '../../../../../test/data/mock-state.json'; import { renderWithProvider } from '../../../../../test/jest'; import configureStore from '../../../../store/store'; -import { mockNetworkState } from '../../../../../test/stub/networks'; import ConfirmHexData from './confirm-hexdata'; jest.mock('../../../../../shared/lib/fetch-with-cache'); -const CHAIN_ID_MOCK = CHAIN_IDS.GOERLI; - -const STATE_MOCK = { - ...mockState, - metamask: { - ...mockState.metamask, - ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), - }, -}; - describe('ConfirmHexData', () => { - const store = configureStore(STATE_MOCK); + const store = configureStore(mockState); it('should render function type', async () => { const { findByText } = renderWithProvider( { const { container } = renderWithProvider( { const { container } = renderWithProvider( { const { getByText } = renderWithProvider( 0 @@ -48,7 +47,6 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
0 diff --git a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container.component.js b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container.component.js index 725c85f71a60..c61a4193ccd0 100644 --- a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container.component.js +++ b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container.component.js @@ -44,8 +44,8 @@ import { getAddressBookEntry, getInternalAccounts, getMetadataContractName, + getNetworkIdentifier, getSwapsDefaultToken, - selectNetworkIdentifierByChainId, } from '../../../../selectors'; import useRamps from '../../../../hooks/ramps/useRamps/useRamps'; ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) @@ -120,6 +120,7 @@ const ConfirmPageContainer = (props) => { useState(false); const isBuyableChain = useSelector(getIsNativeTokenBuyable); const contact = useSelector((state) => getAddressBookEntry(state, toAddress)); + const networkIdentifier = useSelector(getNetworkIdentifier); const defaultToken = useSelector(getSwapsDefaultToken); const accountBalance = defaultToken.string; const internalAccounts = useSelector(getInternalAccounts); @@ -138,13 +139,8 @@ const ConfirmPageContainer = (props) => { const shouldDisplayWarning = contentComponent && disabled && (errorKey || errorMessage); - const { chainId } = currentTransaction; - - const networkIdentifier = useSelector((state) => - selectNetworkIdentifierByChainId(state, chainId), - ); - - const networkName = NETWORK_TO_NAME_MAP[chainId] || networkIdentifier; + const networkName = + NETWORK_TO_NAME_MAP[currentTransaction.chainId] || networkIdentifier; const fetchCollectionBalance = useCallback(async () => { const tokenBalance = await fetchTokenBalance( diff --git a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container.container.js b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container.container.js index 23eaa43d44ab..db07ad4117e7 100644 --- a/ui/pages/confirmations/components/confirm-page-container/confirm-page-container.container.js +++ b/ui/pages/confirmations/components/confirm-page-container/confirm-page-container.container.js @@ -1,6 +1,7 @@ import { connect } from 'react-redux'; import { getAddressBookEntry, + getNetworkIdentifier, getSwapsDefaultToken, getMetadataContractName, getAccountName, @@ -11,6 +12,7 @@ import ConfirmPageContainer from './confirm-page-container.component'; function mapStateToProps(state, ownProps) { const to = ownProps.toAddress; const contact = getAddressBookEntry(state, to); + const networkIdentifier = getNetworkIdentifier(state); const defaultToken = getSwapsDefaultToken(state); const accountBalance = defaultToken.string; const internalAccounts = getInternalAccounts(state); @@ -24,6 +26,7 @@ function mapStateToProps(state, ownProps) { toMetadataName, recipientIsOwnedAccount: Boolean(ownedAccountName), to, + networkIdentifier, accountBalance, }; } diff --git a/ui/pages/confirmations/components/confirm-subtitle/confirm-subtitle.test.js b/ui/pages/confirmations/components/confirm-subtitle/confirm-subtitle.test.js index fa00f0275350..baa2d112b671 100644 --- a/ui/pages/confirmations/components/confirm-subtitle/confirm-subtitle.test.js +++ b/ui/pages/confirmations/components/confirm-subtitle/confirm-subtitle.test.js @@ -1,11 +1,11 @@ import React from 'react'; import { ERC1155, ERC721 } from '@metamask/controller-utils'; -import { CHAIN_IDS } from '@metamask/transaction-controller'; import mockState from '../../../../../test/data/mock-state.json'; import { renderWithProvider } from '../../../../../test/lib/render-helpers'; import configureStore from '../../../../store/store'; import { getSelectedInternalAccountFromMockState } from '../../../../../test/jest/mocks'; +import { getProviderConfig } from '../../../../ducks/metamask/metamask'; import ConfirmSubTitle from './confirm-subtitle'; const mockSelectedInternalAccount = @@ -51,7 +51,7 @@ describe('ConfirmSubTitle', () => { mockState.metamask.preferences.showFiatInTestnets = false; mockState.metamask.allNftContracts = { [mockSelectedInternalAccount.address]: { - [CHAIN_IDS.GOERLI]: [{ address: '0x9' }], + [getProviderConfig(mockState).chainId]: [{ address: '0x9' }], }, }; store = configureStore(mockState); @@ -59,7 +59,6 @@ describe('ConfirmSubTitle', () => { const { findByText } = renderWithProvider( { const { networkImageUrl, networkDisplayName } = useConfirmationNetworkInfo(); const { senderAddress: fromAddress, senderName: fromName } = @@ -41,7 +33,17 @@ const Header = () => { const { currentConfirmation } = useConfirmContext(); - const DefaultHeader = ( + if (currentConfirmation?.type === TransactionType.tokenMethodTransfer) { + const isWalletInitiated = + (currentConfirmation as TransactionMeta).origin === 'metamask'; + + if (isWalletInitiated) { + return ; + } + return ; + } + + return ( { ); - - // The new header includes only a heading, the advanced details toggle, and a - // back button if it's a wallet initiated confirmation. The default header is - // the original header for the redesigns and includes the sender and recipient - // addresses as well. - const isConfirmationWithNewHeader = - currentConfirmation?.type && - CONFIRMATIONS_WITH_NEW_HEADER.includes(currentConfirmation.type); - const isWalletInitiated = - (currentConfirmation as TransactionMeta)?.origin === ORIGIN_METAMASK; - if (isConfirmationWithNewHeader && isWalletInitiated) { - return ; - } else if (isConfirmationWithNewHeader && !isWalletInitiated) { - return ; - } - return DefaultHeader; }; export default Header; diff --git a/ui/pages/confirmations/components/confirm/header/wallet-initiated-header.tsx b/ui/pages/confirmations/components/confirm/header/wallet-initiated-header.tsx index 523e0206167d..ffc8e7549faf 100644 --- a/ui/pages/confirmations/components/confirm/header/wallet-initiated-header.tsx +++ b/ui/pages/confirmations/components/confirm/header/wallet-initiated-header.tsx @@ -1,7 +1,4 @@ -import { - TransactionMeta, - TransactionType, -} from '@metamask/transaction-controller'; +import { TransactionMeta } from '@metamask/transaction-controller'; import React, { useCallback } from 'react'; import { useDispatch } from 'react-redux'; import { useHistory } from 'react-router-dom'; @@ -41,26 +38,7 @@ export const WalletInitiatedHeader = () => { const handleBackButtonClick = useCallback(async () => { const { id } = currentConfirmation; - const isNativeSend = - currentConfirmation.type === TransactionType.simpleSend; - const isERC20TokenSend = - currentConfirmation.type === TransactionType.tokenMethodTransfer; - const isNFTTokenSend = - currentConfirmation.type === TransactionType.tokenMethodTransferFrom || - currentConfirmation.type === TransactionType.tokenMethodSafeTransferFrom; - - let assetType: AssetType; - if (isNativeSend) { - assetType = AssetType.native; - } else if (isERC20TokenSend) { - assetType = AssetType.token; - } else if (isNFTTokenSend) { - assetType = AssetType.NFT; - } else { - assetType = AssetType.unknown; - } - - await dispatch(editExistingTransaction(assetType, id.toString())); + await dispatch(editExistingTransaction(AssetType.token, id.toString())); dispatch(clearConfirmTransaction()); dispatch(showSendTokenPage()); diff --git a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap index 38219749e987..669dc0d5302d 100644 --- a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap @@ -178,35 +178,26 @@ exports[`Info renders info section for contract interaction request 1`] = ` class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center" >
-
+ Estimated changes +

+
-

- Estimated changes -

-
-
- -
-
+
@@ -563,30 +554,9 @@ exports[`Info renders info section for personal sign request 1`] = ` class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md" >
- -
@@ -1009,30 +979,9 @@ exports[`Info renders info section for typed sign request 1`] = ` class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md" >
- -
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 8b5e0c683b51..83af517bcbf2 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 @@ -649,16 +649,10 @@ exports[` renders component for approve request 1`] = ` class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center mm-box--color-text-default mm-box--rounded-lg" style="overflow-wrap: anywhere; min-height: 24px; position: relative;" > - +
diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve-static-simulation/approve-static-simulation.tsx b/ui/pages/confirmations/components/confirm/info/approve/approve-static-simulation/approve-static-simulation.tsx index c860556a359a..f1117e2a22b2 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/approve-static-simulation/approve-static-simulation.tsx +++ b/ui/pages/confirmations/components/confirm/info/approve/approve-static-simulation/approve-static-simulation.tsx @@ -25,14 +25,14 @@ import { useIsNFT } from '../hooks/use-is-nft'; export const ApproveStaticSimulation = () => { const t = useI18nContext(); - const { currentConfirmation: transactionMeta } = - useConfirmContext(); + const { currentConfirmation: transactionMeta } = useConfirmContext() as { + currentConfirmation: TransactionMeta; + }; const { decimals: initialDecimals } = useAssetDetails( transactionMeta?.txParams?.to, transactionMeta?.txParams?.from, transactionMeta?.txParams?.data, - transactionMeta?.chainId, ); const decimals = initialDecimals || '0'; diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve.tsx b/ui/pages/confirmations/components/confirm/info/approve/approve.tsx index d1d9fbc08364..fed03a75e17e 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/approve.tsx +++ b/ui/pages/confirmations/components/confirm/info/approve/approve.tsx @@ -18,8 +18,9 @@ import { RevokeStaticSimulation } from './revoke-static-simulation/revoke-static import { SpendingCap } from './spending-cap/spending-cap'; const ApproveInfo = () => { - const { currentConfirmation: transactionMeta } = - useConfirmContext(); + const { currentConfirmation: transactionMeta } = useConfirmContext() as { + currentConfirmation: TransactionMeta; + }; const { isNFT } = useIsNFT(transactionMeta); @@ -30,7 +31,6 @@ const ApproveInfo = () => { transactionMeta.txParams.to, transactionMeta.txParams.from, transactionMeta.txParams.data, - transactionMeta.chainId, ); const { spendingCap, pending } = useApproveTokenSimulation( diff --git a/ui/pages/confirmations/components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.tsx b/ui/pages/confirmations/components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.tsx index 1eb0ac2cde05..2762e99652a5 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.tsx +++ b/ui/pages/confirmations/components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.tsx @@ -47,14 +47,14 @@ export const EditSpendingCapModal = ({ const dispatch = useDispatch(); - const { currentConfirmation: transactionMeta } = - useConfirmContext(); + const { currentConfirmation: transactionMeta } = useConfirmContext() as { + currentConfirmation: TransactionMeta; + }; const { userBalance, tokenSymbol, decimals } = useAssetDetails( transactionMeta.txParams.to, transactionMeta.txParams.from, transactionMeta.txParams.data, - transactionMeta.chainId, ); const accountBalance = calcTokenAmount( @@ -124,8 +124,6 @@ export const EditSpendingCapModal = ({ decimals && parseInt(decimals, 10) < countDecimalDigits(customSpendingCapInputValue); - const showSpecialCharacterError = /[-+e]/u.test(customSpendingCapInputValue); - return ( )} - {showSpecialCharacterError && ( - - {t('editSpendingCapSpecialCharError')} - - )} diff --git a/ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.test.ts b/ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.test.ts index 0178e2ffff62..4173d21910c5 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.test.ts +++ b/ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.test.ts @@ -65,7 +65,7 @@ describe('useApproveTokenSimulation', () => { expect(result.current).toMatchInlineSnapshot(` { - "formattedSpendingCap": "7", + "formattedSpendingCap": 7, "pending": undefined, "spendingCap": "#7", "value": { @@ -155,70 +155,4 @@ describe('useApproveTokenSimulation', () => { } `); }); - - it('returns correct small decimal number token amount for fungible tokens', async () => { - const useIsNFTMock = jest.fn().mockImplementation(() => ({ isNFT: false })); - - const useDecodedTransactionDataMock = jest.fn().mockImplementation(() => ({ - pending: false, - value: { - data: [ - { - name: 'approve', - params: [ - { - type: 'address', - value: '0x9bc5baF874d2DA8D216aE9f137804184EE5AfEF4', - }, - { - type: 'uint256', - value: 10 ** 5, - }, - ], - }, - ], - source: 'FourByte', - }, - })); - - (useIsNFT as jest.Mock).mockImplementation(useIsNFTMock); - (useDecodedTransactionData as jest.Mock).mockImplementation( - useDecodedTransactionDataMock, - ); - - const transactionMeta = genUnapprovedContractInteractionConfirmation({ - address: CONTRACT_INTERACTION_SENDER_ADDRESS, - }) as TransactionMeta; - - const { result } = renderHookWithProvider( - () => useApproveTokenSimulation(transactionMeta, '18'), - mockState, - ); - - expect(result.current).toMatchInlineSnapshot(` - { - "formattedSpendingCap": "0.0000000000001", - "pending": undefined, - "spendingCap": "0.0000000000001", - "value": { - "data": [ - { - "name": "approve", - "params": [ - { - "type": "address", - "value": "0x9bc5baF874d2DA8D216aE9f137804184EE5AfEF4", - }, - { - "type": "uint256", - "value": 100000, - }, - ], - }, - ], - "source": "FourByte", - }, - } - `); - }); }); diff --git a/ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.ts b/ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.ts index ce264285bc13..19f26c9c9300 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.ts +++ b/ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.ts @@ -6,7 +6,6 @@ import { useMemo } from 'react'; import { useSelector } from 'react-redux'; import { getIntlLocale } from '../../../../../../../ducks/locale/locale'; import { SPENDING_CAP_UNLIMITED_MSG } from '../../../../../constants'; -import { toNonScientificString } from '../../hooks/use-token-values'; import { useDecodedTransactionData } from '../../hooks/useDecodedTransactionData'; import { useIsNFT } from './use-is-nft'; @@ -47,9 +46,8 @@ export const useApproveTokenSimulation = ( }, [value, decimals]); const formattedSpendingCap = useMemo(() => { - // formatting coerces small numbers to 0 - return isNFT || decodedSpendingCap < 1 - ? toNonScientificString(decodedSpendingCap) + return isNFT + ? decodedSpendingCap : new Intl.NumberFormat(locale).format(decodedSpendingCap); }, [decodedSpendingCap, isNFT, locale]); diff --git a/ui/pages/confirmations/components/confirm/info/approve/revoke-static-simulation/revoke-static-simulation.tsx b/ui/pages/confirmations/components/confirm/info/approve/revoke-static-simulation/revoke-static-simulation.tsx index e121e01b6320..77cee271d667 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/revoke-static-simulation/revoke-static-simulation.tsx +++ b/ui/pages/confirmations/components/confirm/info/approve/revoke-static-simulation/revoke-static-simulation.tsx @@ -12,8 +12,9 @@ import StaticSimulation from '../../shared/static-simulation/static-simulation'; export const RevokeStaticSimulation = () => { const t = useI18nContext(); - const { currentConfirmation: transactionMeta } = - useConfirmContext(); + const { currentConfirmation: transactionMeta } = useConfirmContext() as { + currentConfirmation: TransactionMeta; + }; const { chainId } = transactionMeta; 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 8e7b522f050a..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 @@ -28,8 +28,9 @@ const SpendingCapGroup = ({ }) => { const t = useI18nContext(); - const { currentConfirmation: transactionMeta } = - useConfirmContext(); + const { currentConfirmation: transactionMeta } = useConfirmContext() as { + currentConfirmation: TransactionMeta; + }; const { spendingCap, formattedSpendingCap, value } = useApproveTokenSimulation(transactionMeta, decimals); @@ -80,14 +81,14 @@ export const SpendingCap = ({ }) => { const t = useI18nContext(); - const { currentConfirmation: transactionMeta } = - useConfirmContext(); + const { currentConfirmation: transactionMeta } = useConfirmContext() as { + currentConfirmation: TransactionMeta; + }; const { userBalance, tokenSymbol, decimals } = useAssetDetails( transactionMeta.txParams.to, transactionMeta.txParams.from, transactionMeta.txParams.data, - transactionMeta.chainId, ); const accountBalance = calcTokenAmount( 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 47d28a0ba29d..f88485e985b3 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 @@ -15,35 +15,26 @@ exports[` renders component for contract interaction requ class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center" >
-
+ Estimated changes +

+
-

- Estimated changes -

-
-
- -
-
+
diff --git a/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx b/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx index 23629ee5096c..fc58008d7784 100644 --- a/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx +++ b/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx @@ -20,9 +20,9 @@ const BaseTransactionInfo = () => { <> diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.test.ts b/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.test.ts new file mode 100644 index 000000000000..23e4cc3c1bda --- /dev/null +++ b/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.test.ts @@ -0,0 +1,96 @@ +import { TransactionMeta } from '@metamask/transaction-controller'; +import { genUnapprovedTokenTransferConfirmation } from '../../../../../../../test/data/confirmations/token-transfer'; +import mockState from '../../../../../../../test/data/mock-state.json'; +import { renderHookWithProvider } from '../../../../../../../test/lib/render-helpers'; +import { useTokenImage } from './use-token-image'; + +describe('useTokenImage', () => { + it('returns iconUrl from selected token if it exists', () => { + const transactionMeta = genUnapprovedTokenTransferConfirmation( + {}, + ) as TransactionMeta; + + const TEST_SELECTED_TOKEN = { + address: 'address', + decimals: 18, + symbol: 'symbol', + iconUrl: 'iconUrl', + image: 'image', + }; + + const { result } = renderHookWithProvider( + () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN), + mockState, + ); + + expect(result.current).toEqual({ tokenImage: 'iconUrl' }); + }); + + it('returns selected token image if no iconUrl is included', () => { + const transactionMeta = genUnapprovedTokenTransferConfirmation( + {}, + ) as TransactionMeta; + + const TEST_SELECTED_TOKEN = { + address: 'address', + decimals: 18, + symbol: 'symbol', + image: 'image', + }; + + const { result } = renderHookWithProvider( + () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN), + mockState, + ); + + expect(result.current).toEqual({ tokenImage: 'image' }); + }); + + it('returns token list icon url if no image is included in the token', () => { + const transactionMeta = genUnapprovedTokenTransferConfirmation( + {}, + ) as TransactionMeta; + + const TEST_SELECTED_TOKEN = { + address: 'address', + decimals: 18, + symbol: 'symbol', + }; + + const { result } = renderHookWithProvider( + () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN), + { + ...mockState, + metamask: { + ...mockState.metamask, + tokenList: { + '0x076146c765189d51be3160a2140cf80bfc73ad68': { + iconUrl: 'tokenListIconUrl', + }, + }, + }, + }, + ); + + expect(result.current).toEqual({ tokenImage: 'tokenListIconUrl' }); + }); + + it('returns undefined if no image is found', () => { + const transactionMeta = genUnapprovedTokenTransferConfirmation( + {}, + ) as TransactionMeta; + + const TEST_SELECTED_TOKEN = { + address: 'address', + decimals: 18, + symbol: 'symbol', + }; + + const { result } = renderHookWithProvider( + () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN), + mockState, + ); + + expect(result.current).toEqual({ tokenImage: undefined }); + }); +}); diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.ts b/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.ts new file mode 100644 index 000000000000..5817d08028ab --- /dev/null +++ b/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.ts @@ -0,0 +1,20 @@ +import { TokenListMap } from '@metamask/assets-controllers'; +import { TransactionMeta } from '@metamask/transaction-controller'; +import { useSelector } from 'react-redux'; +import { getTokenList } from '../../../../../../selectors'; +import { SelectedToken } from '../shared/selected-token'; + +export const useTokenImage = ( + transactionMeta: TransactionMeta, + selectedToken: SelectedToken, +) => { + const tokenList = useSelector(getTokenList) as TokenListMap; + + // TODO: Add support for NFT images in one of the following tasks + const tokenImage = + selectedToken?.iconUrl || + selectedToken?.image || + tokenList[transactionMeta?.txParams?.to as string]?.iconUrl; + + return { tokenImage }; +}; diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts index 1ca46bb20db6..1ed5e9c249ff 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts @@ -5,7 +5,7 @@ import mockState from '../../../../../../../test/data/mock-state.json'; import { renderHookWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers'; import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate'; import { useAssetDetails } from '../../../../hooks/useAssetDetails'; -import { toNonScientificString, useTokenValues } from './use-token-values'; +import { useTokenValues } from './use-token-values'; import { useDecodedTransactionData } from './useDecodedTransactionData'; jest.mock('../../../../hooks/useAssetDetails', () => ({ @@ -73,8 +73,7 @@ describe('useTokenValues', () => { await waitForNextUpdate(); expect(result.current).toEqual({ - decodedTransferValue: '7', - displayTransferValue: '7', + decodedTransferValue: 7, fiatDisplayValue: '$6.37', pending: false, }); @@ -119,28 +118,9 @@ describe('useTokenValues', () => { await waitForNextUpdate(); expect(result.current).toEqual({ - decodedTransferValue: '7', - displayTransferValue: '7', + decodedTransferValue: 7, fiatDisplayValue: null, pending: false, }); }); }); - -describe('toNonScientificString', () => { - const TEST_CASES = [ - { scientific: 1.23e-5, expanded: '0.0000123' }, - { scientific: 1e-10, expanded: '0.0000000001' }, - { scientific: 1.23e-21, expanded: '1.23e-21' }, - ]; - - // @ts-expect-error This is missing from the Mocha type definitions - it.each(TEST_CASES)( - 'Expand $scientific to "$expanded"', - ({ scientific, expanded }: { scientific: number; expanded: string }) => { - const actual = toNonScientificString(scientific); - - expect(actual).toEqual(expanded); - }, - ); -}); diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts index 087a17c473c6..139a1e8116b9 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts @@ -3,13 +3,10 @@ import { isHexString } from '@metamask/utils'; import { BigNumber } from 'bignumber.js'; import { isBoolean } from 'lodash'; import { useMemo, useState } from 'react'; -import { useSelector } from 'react-redux'; import { Numeric } from '../../../../../../../shared/modules/Numeric'; import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate'; -import { getIntlLocale } from '../../../../../../ducks/locale/locale'; import { useFiatFormatter } from '../../../../../../hooks/useFiatFormatter'; import { useAssetDetails } from '../../../../hooks/useAssetDetails'; -import { formatAmount } from '../../../simulation-details/formatAmount'; import { useDecodedTransactionData } from './useDecodedTransactionData'; export const useTokenValues = (transactionMeta: TransactionMeta) => { @@ -17,7 +14,6 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => { transactionMeta.txParams.to, transactionMeta.txParams.from, transactionMeta.txParams.data, - transactionMeta.chainId, ); const decodedResponse = useDecodedTransactionData(); @@ -60,25 +56,9 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => { const fiatDisplayValue = fiatValue && fiatFormatter(fiatValue, { shorten: true }); - const locale = useSelector(getIntlLocale); - const displayTransferValue = formatAmount( - locale, - new BigNumber(decodedTransferValue), - ); - return { - decodedTransferValue: toNonScientificString(decodedTransferValue), - displayTransferValue, + decodedTransferValue, fiatDisplayValue, pending, }; }; - -export function toNonScientificString(num: number): string { - if (num >= 10e-18) { - return num.toFixed(18).replace(/\.?0+$/u, ''); - } - - // keep in scientific notation - return num.toString(); -} diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts index 17c8ab8dd8f6..911cdb20118c 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts @@ -22,13 +22,13 @@ describe('useFeeCalculations', () => { expect(result.current).toMatchInlineSnapshot(` { "estimatedFeeFiat": "$0.00", - "estimatedFeeNative": "0 ETH", + "estimatedFeeNative": "0 WEI", "l1FeeFiat": "", "l1FeeNative": "", "l2FeeFiat": "", "l2FeeNative": "", "maxFeeFiat": "$0.00", - "maxFeeNative": "0 ETH", + "maxFeeNative": "0 WEI", } `); }); diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts index 5b54dcc710b8..587d70c9c9ef 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts @@ -8,17 +8,15 @@ import { addHexes, decGWEIToHexWEI, decimalToHex, + getEthConversionFromWeiHex, getValueFromWeiHex, multiplyHexes, } from '../../../../../../../shared/modules/conversion.utils'; import { Numeric } from '../../../../../../../shared/modules/Numeric'; +import { getConversionRate } from '../../../../../../ducks/metamask/metamask'; import { useFiatFormatter } from '../../../../../../hooks/useFiatFormatter'; import { useGasFeeEstimates } from '../../../../../../hooks/useGasFeeEstimates'; -import { - getCurrentCurrency, - selectConversionRateByChainId, -} from '../../../../../../selectors'; -import { getMultichainNetwork } from '../../../../../../selectors/multichain'; +import { getCurrentCurrency } from '../../../../../../selectors'; import { HEX_ZERO } from '../shared/constants'; import { useEIP1559TxFees } from './useEIP1559TxFees'; import { useSupportsEIP1559 } from './useSupportsEIP1559'; @@ -32,25 +30,17 @@ const EMPTY_FEES = { export function useFeeCalculations(transactionMeta: TransactionMeta) { const currentCurrency = useSelector(getCurrentCurrency); - const { chainId } = transactionMeta; + const conversionRate = useSelector(getConversionRate); const fiatFormatter = useFiatFormatter(); - const conversionRate = useSelector((state) => - selectConversionRateByChainId(state, chainId), - ); - - const multichainNetwork = useSelector(getMultichainNetwork); - const ticker = multichainNetwork?.network?.ticker; - const getFeesFromHex = useCallback( (hexFee: string) => { - const nativeCurrencyFee = `${ - getValueFromWeiHex({ + const nativeCurrencyFee = + getEthConversionFromWeiHex({ value: hexFee, fromCurrency: EtherDenomination.GWEI, numberOfDecimals: 4, - }) || 0 - } ${ticker}`; + }) || `0 ${EtherDenomination.ETH}`; const currentCurrencyFee = fiatFormatter( Number( diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.test.ts b/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.test.ts deleted file mode 100644 index 9011569bac3e..000000000000 --- a/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.test.ts +++ /dev/null @@ -1,193 +0,0 @@ -import { TransactionMeta } from '@metamask/transaction-controller'; -import { useSelector } from 'react-redux'; -import { genUnapprovedTokenTransferConfirmation } from '../../../../../../../test/data/confirmations/token-transfer'; -import mockState from '../../../../../../../test/data/mock-state.json'; -import { renderHookWithProvider } from '../../../../../../../test/lib/render-helpers'; -import { getTokenList } from '../../../../../../selectors'; -import { useTokenDetails } from './useTokenDetails'; - -jest.mock('react-redux', () => ({ - ...jest.requireActual('react-redux'), - useSelector: jest.fn(), -})); - -const ICON_SYMBOL = 'FROG'; -const ICON_URL = - 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x0a2c375553e6965b42c135bb8b15a8914b08de0c.png'; -const MOCK_TOKEN_LIST = (transactionMeta: TransactionMeta) => ({ - [transactionMeta.txParams.to as string]: { - address: transactionMeta.txParams.to, - aggregators: ['CoinGecko', 'Socket', 'Coinmarketcap'], - decimals: 9, - iconUrl: ICON_URL, - name: 'Frog on ETH', - occurrences: 3, - symbol: ICON_SYMBOL, - }, -}); - -describe('useTokenDetails', () => { - const useSelectorMock = useSelector as jest.Mock; - - beforeEach(() => { - jest.resetAllMocks(); - }); - - it('returns token details from selected token if it exists', () => { - const transactionMeta = genUnapprovedTokenTransferConfirmation( - {}, - ) as TransactionMeta; - - const TEST_SELECTED_TOKEN = { - address: 'address', - decimals: 18, - symbol: 'symbol', - iconUrl: 'iconUrl', - image: 'image', - }; - - useSelectorMock.mockImplementation((selector) => { - if (selector === getTokenList) { - return MOCK_TOKEN_LIST(transactionMeta); - } else if (selector?.toString().includes('getWatchedToken')) { - return TEST_SELECTED_TOKEN; - } - return undefined; - }); - - const { result } = renderHookWithProvider( - () => useTokenDetails(transactionMeta), - mockState, - ); - - expect(result.current).toEqual({ - tokenImage: 'iconUrl', - tokenSymbol: 'symbol', - }); - }); - - it('returns token details from the token list if it exists', () => { - const transactionMeta = genUnapprovedTokenTransferConfirmation( - {}, - ) as TransactionMeta; - - const TEST_SELECTED_TOKEN = { - address: 'address', - decimals: 18, - }; - - useSelectorMock.mockImplementation((selector) => { - if (selector === getTokenList) { - return MOCK_TOKEN_LIST(transactionMeta); - } else if (selector?.toString().includes('getWatchedToken')) { - return TEST_SELECTED_TOKEN; - } - - return undefined; - }); - - const { result } = renderHookWithProvider( - () => useTokenDetails(transactionMeta), - mockState, - ); - - expect(result.current).toEqual({ - tokenImage: ICON_URL, - tokenSymbol: ICON_SYMBOL, - }); - }); - - it('returns selected token image if no iconUrl is included', () => { - const transactionMeta = genUnapprovedTokenTransferConfirmation( - {}, - ) as TransactionMeta; - - const TEST_SELECTED_TOKEN = { - address: 'address', - decimals: 18, - symbol: 'symbol', - image: 'image', - }; - - useSelectorMock.mockImplementation((selector) => { - if (selector === getTokenList) { - return MOCK_TOKEN_LIST(transactionMeta); - } else if (selector?.toString().includes('getWatchedToken')) { - return TEST_SELECTED_TOKEN; - } - return undefined; - }); - - const { result } = renderHookWithProvider( - () => useTokenDetails(transactionMeta), - mockState, - ); - - expect(result.current).toEqual({ - tokenImage: 'image', - tokenSymbol: 'symbol', - }); - }); - - it('returns token list icon url if no image is included in the token', () => { - const transactionMeta = genUnapprovedTokenTransferConfirmation( - {}, - ) as TransactionMeta; - - const TEST_SELECTED_TOKEN = { - address: 'address', - decimals: 18, - symbol: 'symbol', - }; - - useSelectorMock.mockImplementation((selector) => { - if (selector === getTokenList) { - return MOCK_TOKEN_LIST(transactionMeta); - } else if (selector?.toString().includes('getWatchedToken')) { - return TEST_SELECTED_TOKEN; - } - return undefined; - }); - - const { result } = renderHookWithProvider( - () => useTokenDetails(transactionMeta), - mockState, - ); - - expect(result.current).toEqual({ - tokenImage: ICON_URL, - tokenSymbol: 'symbol', - }); - }); - - it('returns undefined if no image is found', () => { - const transactionMeta = genUnapprovedTokenTransferConfirmation( - {}, - ) as TransactionMeta; - - const TEST_SELECTED_TOKEN = { - address: 'address', - decimals: 18, - symbol: 'symbol', - }; - - useSelectorMock.mockImplementation((selector) => { - if (selector === getTokenList) { - return {}; - } else if (selector?.toString().includes('getWatchedToken')) { - return TEST_SELECTED_TOKEN; - } - return undefined; - }); - - const { result } = renderHookWithProvider( - () => useTokenDetails(transactionMeta), - mockState, - ); - - expect(result.current).toEqual({ - tokenImage: undefined, - tokenSymbol: 'symbol', - }); - }); -}); diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.ts b/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.ts deleted file mode 100644 index da2faacaeb5f..000000000000 --- a/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { TokenListMap } from '@metamask/assets-controllers'; -import { TransactionMeta } from '@metamask/transaction-controller'; -import { useSelector } from 'react-redux'; -import { useI18nContext } from '../../../../../../hooks/useI18nContext'; -import { getTokenList, getWatchedToken } from '../../../../../../selectors'; -import { MultichainState } from '../../../../../../selectors/multichain'; - -export const useTokenDetails = (transactionMeta: TransactionMeta) => { - const t = useI18nContext(); - const selectedToken = useSelector((state: MultichainState) => - getWatchedToken(transactionMeta)(state), - ); - const tokenList = useSelector(getTokenList) as TokenListMap; - - const tokenImage = - selectedToken?.iconUrl || - selectedToken?.image || - tokenList[transactionMeta?.txParams?.to as string]?.iconUrl; - - const tokenSymbol = - selectedToken?.symbol || - tokenList[transactionMeta?.txParams?.to as string]?.symbol || - t('unknown'); - - return { tokenImage, tokenSymbol }; -}; diff --git a/ui/pages/confirmations/components/confirm/info/info.tsx b/ui/pages/confirmations/components/confirm/info/info.tsx index 642d1d70c017..3e87f4f7908c 100644 --- a/ui/pages/confirmations/components/confirm/info/info.tsx +++ b/ui/pages/confirmations/components/confirm/info/info.tsx @@ -2,11 +2,8 @@ import { TransactionType } from '@metamask/transaction-controller'; import React, { useMemo } from 'react'; import { useConfirmContext } from '../../../context/confirm'; import { SignatureRequestType } from '../../../types/confirm'; -import { useSmartTransactionFeatureFlags } from '../../../hooks/useSmartTransactionFeatureFlags'; import ApproveInfo from './approve/approve'; import BaseTransactionInfo from './base-transaction-info/base-transaction-info'; -import NativeTransferInfo from './native-transfer/native-transfer'; -import NFTTokenTransferInfo from './nft-token-transfer/nft-token-transfer'; import PersonalSignInfo from './personal-sign/personal-sign'; import SetApprovalForAllInfo from './set-approval-for-all-info/set-approval-for-all-info'; import TokenTransferInfo from './token-transfer/token-transfer'; @@ -16,15 +13,9 @@ import TypedSignInfo from './typed-sign/typed-sign'; const Info = () => { const { currentConfirmation } = useConfirmContext(); - // TODO: Create TransactionInfo and SignatureInfo components. - useSmartTransactionFeatureFlags(); - const ConfirmationInfoComponentMap = useMemo( () => ({ - [TransactionType.contractInteraction]: () => BaseTransactionInfo, - [TransactionType.deployContract]: () => BaseTransactionInfo, [TransactionType.personalSign]: () => PersonalSignInfo, - [TransactionType.simpleSend]: () => NativeTransferInfo, [TransactionType.signTypedData]: () => { const { version } = (currentConfirmation as SignatureRequestType)?.msgParams ?? {}; @@ -33,13 +24,13 @@ const Info = () => { } return TypedSignInfo; }, + [TransactionType.contractInteraction]: () => BaseTransactionInfo, + [TransactionType.deployContract]: () => BaseTransactionInfo, [TransactionType.tokenMethodApprove]: () => ApproveInfo, [TransactionType.tokenMethodIncreaseAllowance]: () => ApproveInfo, - [TransactionType.tokenMethodSafeTransferFrom]: () => NFTTokenTransferInfo, [TransactionType.tokenMethodSetApprovalForAll]: () => SetApprovalForAllInfo, [TransactionType.tokenMethodTransfer]: () => TokenTransferInfo, - [TransactionType.tokenMethodTransferFrom]: () => NFTTokenTransferInfo, }), [currentConfirmation], ); diff --git a/ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap deleted file mode 100644 index 4181d12bee5c..000000000000 --- a/ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap +++ /dev/null @@ -1,390 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`NativeTransferInfo renders correctly 1`] = ` -
-
-
- G -
-

- 0 ETH -

-
-
- - - - - - - - - -
-
-
-
-
-
-
-

- Estimated changes -

-
-
- -
-
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
-
-
-

- Network -

-
-
-
-
- G -
-

- Goerli -

-
-
-
-
-
-

- Interacting with -

-
-
- -
-
-
-
-
-
- -

- 0x07614...3ad68 -

-
-
-
-
-
-
-
-
-

- Network fee -

-
-
- -
-
-
-
-
-

- 0.0001 ETH -

-

- $0.04 -

- -
-
-
-
-
-

- Speed -

-
-
-
-
-

- 🦊 Market -

-

- - ~ - 0 sec - -

-
-
-
-
-
-`; diff --git a/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.stories.tsx b/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.stories.tsx deleted file mode 100644 index 1de48b2bb2a0..000000000000 --- a/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.stories.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { Provider } from 'react-redux'; -import { getMockTokenTransferConfirmState } from '../../../../../../../test/data/confirmations/helper'; -import { Box } from '../../../../../../components/component-library'; -import { - AlignItems, - Display, - FlexDirection, - JustifyContent, -} from '../../../../../../helpers/constants/design-system'; -import configureStore from '../../../../../../store/store'; -import { ConfirmContextProvider } from '../../../../context/confirm'; -import NativeTransferInfo from './native-transfer'; - -const store = configureStore(getMockTokenTransferConfirmState({})); - -const Story = { - title: 'Components/App/Confirm/info/NativeTransferInfo', - component: NativeTransferInfo, - decorators: [ - (story: () => any) => ( - - - - {story()} - - - - ), - ], -}; - -export default Story; - -export const DefaultStory = () => ; - -DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.test.tsx b/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.test.tsx deleted file mode 100644 index e08710b551aa..000000000000 --- a/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.test.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import configureMockStore from 'redux-mock-store'; -import { getMockTokenTransferConfirmState } from '../../../../../../../test/data/confirmations/helper'; -import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers'; -import NativeTransferInfo from './native-transfer'; - -jest.mock( - '../../../../../../components/app/alert-system/contexts/alertMetricsContext', - () => ({ - useAlertMetrics: jest.fn(() => ({ - trackAlertMetrics: jest.fn(), - })), - }), -); - -jest.mock('../../../../../../store/actions', () => ({ - ...jest.requireActual('../../../../../../store/actions'), - getGasFeeTimeEstimate: jest.fn().mockResolvedValue({ - lowerTimeBound: 0, - upperTimeBound: 60000, - }), -})); - -describe('NativeTransferInfo', () => { - it('renders correctly', () => { - const state = getMockTokenTransferConfirmState({}); - const mockStore = configureMockStore([])(state); - const { container } = renderWithConfirmContextProvider( - , - mockStore, - ); - - expect(container).toMatchSnapshot(); - }); -}); diff --git a/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.tsx b/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.tsx deleted file mode 100644 index c098936989dd..000000000000 --- a/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { TransactionMeta } from '@metamask/transaction-controller'; -import React from 'react'; -import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section'; -import { useConfirmContext } from '../../../../context/confirm'; -import { SimulationDetails } from '../../../simulation-details'; -import { AdvancedDetails } from '../shared/advanced-details/advanced-details'; -import { GasFeesSection } from '../shared/gas-fees-section/gas-fees-section'; -import NativeSendHeading from '../shared/native-send-heading/native-send-heading'; -import { TokenDetailsSection } from '../token-transfer/token-details-section'; -import { TransactionFlowSection } from '../token-transfer/transaction-flow-section'; - -const NativeTransferInfo = () => { - const { currentConfirmation: transactionMeta } = - useConfirmContext(); - - const isWalletInitiated = transactionMeta.origin === 'metamask'; - - return ( - <> - - - {!isWalletInitiated && ( - - - - )} - - - - - ); -}; - -export default NativeTransferInfo; diff --git a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap deleted file mode 100644 index 77794c9e70a4..000000000000 --- a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap +++ /dev/null @@ -1,391 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`NFTTokenTransferInfo renders correctly 1`] = ` -
-
-
- ? -
-

-

-

-
- - - - - - - - - -
-
-
-
-
-
-
-

- Estimated changes -

-
-
- -
-
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
-
-
-

- Network -

-
-
-
-
- G -
-

- Goerli -

-
-
-
-
-
-

- Interacting with -

-
-
- -
-
-
-
-
-
- -

- 0x07614...3ad68 -

-
-
-
-
-
-
-
-
-

- Network fee -

-
-
- -
-
-
-
-
-

- 0.0001 ETH -

-

- $0.04 -

- -
-
-
-
-
-

- Speed -

-
-
-
-
-

- 🦊 Market -

-

- - ~ - 0 sec - -

-
-
-
-
-
-`; diff --git a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.stories.tsx b/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.stories.tsx deleted file mode 100644 index 084698b2e2fa..000000000000 --- a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.stories.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { Provider } from 'react-redux'; -import { getMockTokenTransferConfirmState } from '../../../../../../../test/data/confirmations/helper'; -import { Box } from '../../../../../../components/component-library'; -import { - AlignItems, - Display, - FlexDirection, - JustifyContent, -} from '../../../../../../helpers/constants/design-system'; -import configureStore from '../../../../../../store/store'; -import { ConfirmContextProvider } from '../../../../context/confirm'; -import NFTTokenTransferInfo from './nft-token-transfer'; - -const store = configureStore(getMockTokenTransferConfirmState({})); - -const Story = { - title: 'Components/App/Confirm/info/NFTTransferInfo', - component: NFTTokenTransferInfo, - decorators: [ - (story: () => any) => ( - - - - {story()} - - - - ), - ], -}; - -export default Story; - -export const DefaultStory = () => ; - -DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.test.tsx b/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.test.tsx deleted file mode 100644 index 7b562fb3bb9e..000000000000 --- a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.test.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import configureMockStore from 'redux-mock-store'; -import { getMockTokenTransferConfirmState } from '../../../../../../../test/data/confirmations/helper'; -import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers'; -import NFTTokenTransferInfo from './nft-token-transfer'; - -jest.mock( - '../../../../../../components/app/alert-system/contexts/alertMetricsContext', - () => ({ - useAlertMetrics: jest.fn(() => ({ - trackAlertMetrics: jest.fn(), - })), - }), -); - -jest.mock('../../../../../../store/actions', () => ({ - ...jest.requireActual('../../../../../../store/actions'), - getGasFeeTimeEstimate: jest.fn().mockResolvedValue({ - lowerTimeBound: 0, - upperTimeBound: 60000, - }), -})); - -describe('NFTTokenTransferInfo', () => { - it('renders correctly', () => { - const state = getMockTokenTransferConfirmState({}); - const mockStore = configureMockStore([])(state); - const { container } = renderWithConfirmContextProvider( - , - mockStore, - ); - - expect(container).toMatchSnapshot(); - }); -}); diff --git a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx b/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx deleted file mode 100644 index 113920a6aec2..000000000000 --- a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { TransactionMeta } from '@metamask/transaction-controller'; -import React from 'react'; -import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section'; -import { useConfirmContext } from '../../../../context/confirm'; -import { SimulationDetails } from '../../../simulation-details'; -import { AdvancedDetails } from '../shared/advanced-details/advanced-details'; -import { GasFeesSection } from '../shared/gas-fees-section/gas-fees-section'; -import NFTSendHeading from '../shared/nft-send-heading/nft-send-heading'; -import { TokenDetailsSection } from '../token-transfer/token-details-section'; -import { TransactionFlowSection } from '../token-transfer/transaction-flow-section'; - -const NFTTokenTransferInfo = () => { - const { currentConfirmation: transactionMeta } = - useConfirmContext(); - - const isWalletInitiated = transactionMeta.origin === 'metamask'; - - return ( - <> - - - {!isWalletInitiated && ( - - - - )} - - - - - ); -}; - -export default NFTTokenTransferInfo; diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/__snapshots__/personal-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/__snapshots__/personal-sign.test.tsx.snap index 92ac3628363e..2f46c283b830 100644 --- a/ui/pages/confirmations/components/confirm/info/personal-sign/__snapshots__/personal-sign.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/personal-sign/__snapshots__/personal-sign.test.tsx.snap @@ -52,30 +52,9 @@ exports[`PersonalSignInfo handle reverse string properly 1`] = ` class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md" >
- -
@@ -156,30 +135,9 @@ exports[`PersonalSignInfo renders correctly for personal sign request 1`] = ` class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md" >
- -
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx index e105493485ec..6fe06c81467a 100644 --- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.test.tsx @@ -10,8 +10,6 @@ import { } from '../../../../../../../test/data/confirmations/helper'; import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers'; import { signatureRequestSIWE } from '../../../../../../../test/data/confirmations/personal_sign'; -import * as utils from '../../../../utils'; -import * as snapUtils from '../../../../../../helpers/utils/snaps'; import PersonalSignInfo from './personal-sign'; jest.mock( @@ -23,29 +21,6 @@ jest.mock( }), ); -jest.mock('../../../../utils', () => { - const originalUtils = jest.requireActual('../../../../utils'); - return { - ...originalUtils, - isSIWESignatureRequest: jest.fn().mockReturnValue(false), - }; -}); - -jest.mock('../../../../../../../node_modules/@metamask/snaps-utils', () => { - const originalUtils = jest.requireActual( - '../../../../../../../node_modules/@metamask/snaps-utils', - ); - return { - ...originalUtils, - stripSnapPrefix: jest.fn().mockReturnValue('@metamask/examplesnap'), - getSnapPrefix: jest.fn().mockReturnValue('npm:'), - }; -}); - -jest.mock('../../../../../../helpers/utils/snaps', () => ({ - isSnapId: jest.fn(), -})); - describe('PersonalSignInfo', () => { it('renders correctly for personal sign request', () => { const state = getMockPersonalSignConfirmState(); @@ -87,7 +62,6 @@ describe('PersonalSignInfo', () => { }); it('display signing in from for SIWE request', () => { - (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(true); const state = getMockPersonalSignConfirmStateForRequest(signatureRequestSIWE); const mockStore = configureMockStore([])(state); @@ -99,7 +73,6 @@ describe('PersonalSignInfo', () => { }); it('display simulation for SIWE request if preference useTransactionSimulations is enabled', () => { - (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(true); const state = getMockPersonalSignConfirmStateForRequest( signatureRequestSIWE, { @@ -115,73 +88,4 @@ describe('PersonalSignInfo', () => { ); expect(getByText('Estimated changes')).toBeDefined(); }); - - it('does not display tooltip text when isSIWE is true', async () => { - const state = - getMockPersonalSignConfirmStateForRequest(signatureRequestSIWE); // isSIWE is true - - (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(true); - const mockStore = configureMockStore([])(state); - const { queryByText, getByText } = renderWithConfirmContextProvider( - , - mockStore, - ); - - const requestFromLabel = getByText('Request from'); - await requestFromLabel.dispatchEvent( - new MouseEvent('mouseenter', { bubbles: true }), - ); - - expect( - queryByText('This is the site asking for your signature.'), - ).toBeNull(); - expect( - queryByText('This is the Snap asking for your signature.'), - ).toBeNull(); - }); - - it('displays "requestFromInfoSnap" tooltip when isSIWE is false and origin is a snap', async () => { - const state = - getMockPersonalSignConfirmStateForRequest(signatureRequestSIWE); - - (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(false); - (snapUtils.isSnapId as jest.Mock).mockReturnValue(true); - - const mockStore = configureMockStore([])(state); - const { queryByText, getByText } = renderWithConfirmContextProvider( - , - mockStore, - ); - - const requestFromLabel = getByText('Request from'); - await requestFromLabel.dispatchEvent( - new MouseEvent('mouseenter', { bubbles: true }), - ); - - expect( - queryByText('This is the Snap asking for your signature.'), - ).toBeDefined(); - }); - - it('displays "requestFromInfo" tooltip when isSIWE is false and origin is not a snap', async () => { - const state = - getMockPersonalSignConfirmStateForRequest(signatureRequestSIWE); - (utils.isSIWESignatureRequest as jest.Mock).mockReturnValue(false); - (snapUtils.isSnapId as jest.Mock).mockReturnValue(true); - - const mockStore = configureMockStore([])(state); - const { getByText, queryByText } = renderWithConfirmContextProvider( - , - mockStore, - ); - - const requestFromLabel = getByText('Request from'); - await requestFromLabel.dispatchEvent( - new MouseEvent('mouseenter', { bubbles: true }), - ); - - expect( - queryByText('This is the site asking for your signature.'), - ).toBeDefined(); - }); }); diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx index 5c0af68742c5..370d5e68261f 100644 --- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx +++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx @@ -2,42 +2,23 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { + ConfirmInfoRow, ConfirmInfoRowAddress, ConfirmInfoRowText, ConfirmInfoRowUrl, } from '../../../../../../components/app/confirm/info/row'; -import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row'; import { RowAlertKey } from '../../../../../../components/app/confirm/info/row/constants'; -import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section'; -import { - Box, - Icon, - IconName, - IconSize, - Text, -} from '../../../../../../components/component-library'; -import Tooltip from '../../../../../../components/ui/tooltip'; -import { - AlignItems, - BorderColor, - BorderRadius, - Display, - FlexDirection, - IconColor, - JustifyContent, - TextColor, - TextVariant, -} from '../../../../../../helpers/constants/design-system'; -import { isSnapId } from '../../../../../../helpers/utils/snaps'; +import { useI18nContext } from '../../../../../../hooks/useI18nContext'; +import { useConfirmContext } from '../../../../context/confirm'; import { hexToText, sanitizeString, } from '../../../../../../helpers/utils/util'; -import { useI18nContext } from '../../../../../../hooks/useI18nContext'; -import { useConfirmContext } from '../../../../context/confirm'; -import { selectUseTransactionSimulations } from '../../../../selectors/preferences'; import { SignatureRequestType } from '../../../../types/confirm'; +import { selectUseTransactionSimulations } from '../../../../selectors/preferences'; import { isSIWESignatureRequest } from '../../../../utils'; +import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row'; +import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section'; import { SIWESignInfo } from './siwe-sign'; const PersonalSignInfo: React.FC = () => { @@ -54,79 +35,17 @@ const PersonalSignInfo: React.FC = () => { const { from } = currentConfirmation.msgParams; const isSIWE = isSIWESignatureRequest(currentConfirmation); const chainId = currentConfirmation.chainId as string; - const messageText = sanitizeString( - hexToText(currentConfirmation.msgParams?.data), - ); - - let toolTipMessage; - if (!isSIWE) { - if (isSnapId(currentConfirmation.msgParams.origin)) { - toolTipMessage = t('requestFromInfoSnap'); - } else { - toolTipMessage = t('requestFromInfo'); - } - } - - const SimulationDetailsKey = ( - - - {t('simulationDetailsTitle')} - - - - - - ); - - const SimulationDetailsValue = ( - - {t('simulationDetailsNoChanges')} - - ); return ( <> {isSIWE && useTransactionSimulations && ( - - - {SimulationDetailsKey} - {SimulationDetailsValue} - - + + )} @@ -134,7 +53,7 @@ const PersonalSignInfo: React.FC = () => { alertKey={RowAlertKey.RequestFrom} ownerId={currentConfirmation.id} label={t('requestFrom')} - tooltip={toolTipMessage} + tooltip={isSIWE ? undefined : t('requestFromInfo')} > @@ -156,11 +75,12 @@ const PersonalSignInfo: React.FC = () => { alertKey="message" ownerId={currentConfirmation.id} label={t('message')} - collapsed={false} - copyEnabled - copyText={messageText} > - + )} diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap index 054bbb94a1aa..56fba6cdaa0c 100644 --- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap @@ -3,30 +3,37 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
- -
+
+
- - +

+ I accept the MetaMask Terms of Service: https://community.metamask.io/tos +

+
+
+
@@ -36,10 +43,263 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `

- Message + URL +

+
+
+
+

+ https://metamask.github.io +

+
+
+
+
+
+

+ Network +

+
+
+
+

+ Ethereum Mainnet +

+
+
+
+
+
+

+ Account +

+
+
+
+
+ +

+ 0x935e7...05477 +

+
+
+
+
+
+
+

+ Version +

+
+
+
+

+ 1 +

+
+
+
+
+
+

+ Chain ID +

+
+
+
+

+ 1 +

+
+
+
+
+
+

+ Nonce

+
+

+ 32891757 +

+
+
+
+
+
+

+ Issued +

+
+
+
+

+ 30 September 2021, 16:25 +

+
+
+
+
+
+

+ Request ID +

+
+
+
+

+ some_id +

+
`; @@ -47,30 +307,65 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = ` exports[`SIWESignInfo renders correctly for SIWE signature request with resources 1`] = `
+
+
+

+ Message +

+
+
+
+

+ I accept the MetaMask Terms of Service: https://community.metamask.io/tos +

+
+
+
- -
+
+
- - +

+ https://metamask.github.io +

+
+
+
@@ -80,10 +375,273 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource

- Message + Network +

+
+
+
+

+ Ethereum Mainnet +

+
+
+
+
+
+

+ Account +

+
+
+
+
+ +

+ 0x935E7...05477 +

+
+
+
+
+
+
+

+ Version +

+
+
+
+

+ 1 +

+
+
+
+
+
+

+ Chain ID +

+
+
+
+

+ 1 +

+
+
+
+
+
+

+ Nonce

+
+

+ 32891757 +

+
+
+
+
+
+

+ Issued +

+
+
+
+

+ 30 September 2021, 16:25 +

+
+
+
+
+
+

+ Request ID +

+
+
+
+

+ some_id +

+
+
+
+
+
+

+ Resources +

+
+
+
+

+ ipfs://Qme7ss3ARVgxv6rXqVPiikMJ8u2NLgmgszg13pYrDKEoiu +

+
+
+

+ https://example.com/my-web2-claim.json +

+
`; diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx index 4c1d233fd4c9..abf93e50f7b4 100644 --- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx +++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx @@ -11,8 +11,6 @@ import { ConfirmInfoRowDate, ConfirmInfoRowText, } from '../../../../../../../components/app/confirm/info/row'; -import { Box, Text } from '../../../../../../../components/component-library'; -import { TextColor } from '../../../../../../../helpers/constants/design-system'; import { useConfirmContext } from '../../../../../context/confirm'; const SIWESignInfo: React.FC = () => { @@ -41,58 +39,48 @@ const SIWESignInfo: React.FC = () => { (NETWORK_TO_NAME_MAP as Record)[hexChainId] ?? hexChainId; return ( - - - - {statement ?? ''} - - - + <> + + + + + + + + + + + + + + + + + + + + + + + + + {requestId && ( + + - - + )} + {resources && ( + + {resources.map((resource, index) => ( + + ))} - - - - - - - - - - - - - - - - {requestId && ( - - - - )} - {resources && ( - - {resources.map((resource, index) => ( - - ))} - - )} - - + )} + ); }; diff --git a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.stories.tsx b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.stories.tsx index aa9ec6cdc87c..8654400a0bfa 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.stories.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.stories.tsx @@ -22,6 +22,6 @@ const Story = { export default Story; -export const DefaultStory = () => ; +export const DefaultStory = () => ; DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx index d0a6d72d11e9..ebb0f69d75c1 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.tsx @@ -1,7 +1,5 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { TransactionMeta } from '@metamask/transaction-controller'; - import { ConfirmInfoRow, ConfirmInfoRowText, @@ -19,23 +17,15 @@ import { updateCustomNonce, } from '../../../../../../../store/actions'; import { selectConfirmationAdvancedDetailsOpen } from '../../../../../selectors/preferences'; -import { useConfirmContext } from '../../../../../context/confirm'; -import { isSignatureTransactionType } from '../../../../../utils'; import { TransactionData } from '../transaction-data/transaction-data'; const NonceDetails = () => { - const { currentConfirmation } = useConfirmContext(); const t = useI18nContext(); const dispatch = useDispatch(); useEffect(() => { - if ( - currentConfirmation && - !isSignatureTransactionType(currentConfirmation) - ) { - dispatch(getNextNonce(currentConfirmation.txParams.from)); - } - }, [currentConfirmation, dispatch]); + dispatch(getNextNonce()); + }, [dispatch]); const enableCustomNonce = useSelector(getUseNonceField); const nextNonce = useSelector(getNextSuggestedNonce); diff --git a/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.tsx b/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.tsx index 0462f8189e53..7d4223f01204 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.tsx @@ -1,9 +1,5 @@ -import { TransactionMeta } from '@metamask/transaction-controller'; import React, { Dispatch, SetStateAction } from 'react'; -import { useSelector } from 'react-redux'; -import { TEST_CHAINS } from '../../../../../../../../shared/constants/network'; -import { ConfirmInfoAlertRow } from '../../../../../../../components/app/confirm/info/row/alert-row/alert-row'; -import { RowAlertKey } from '../../../../../../../components/app/confirm/info/row/constants'; +import { TransactionMeta } from '@metamask/transaction-controller'; import { Box, Text } from '../../../../../../../components/component-library'; import { AlignItems, @@ -14,9 +10,10 @@ import { TextColor, } from '../../../../../../../helpers/constants/design-system'; import { useI18nContext } from '../../../../../../../hooks/useI18nContext'; -import { getPreferences } from '../../../../../../../selectors'; import { useConfirmContext } from '../../../../../context/confirm'; import { EditGasIconButton } from '../edit-gas-icon/edit-gas-icon-button'; +import { ConfirmInfoAlertRow } from '../../../../../../../components/app/confirm/info/row/alert-row/alert-row'; +import { RowAlertKey } from '../../../../../../../components/app/confirm/info/row/constants'; export const EditGasFeesRow = ({ fiatFee, @@ -34,12 +31,6 @@ export const EditGasFeesRow = ({ const { currentConfirmation: transactionMeta } = useConfirmContext(); - type TestNetChainId = (typeof TEST_CHAINS)[number]; - const isTestnet = TEST_CHAINS.includes( - transactionMeta.chainId as TestNetChainId, - ); - const { showFiatInTestnets } = useSelector(getPreferences); - return ( {nativeFee} - {(!isTestnet || showFiatInTestnets) && ( - - {fiatFee} - - )} + + {fiatFee} + ( - - - + ); DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.test.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.test.tsx index e5433c38fa5d..12b857acc1b2 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.test.tsx @@ -2,8 +2,8 @@ import React from 'react'; import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; +import { renderWithProvider } from '../../../../../../../../test/lib/render-helpers'; import mockState from '../../../../../../../../test/data/mock-state.json'; -import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers'; import { GasFeesRow } from './gas-fees-row'; describe('', () => { @@ -12,7 +12,7 @@ describe('', () => { it('renders component', () => { const state = mockState; const mockStore = configureMockStore(middleware)(state); - const { container } = renderWithConfirmContextProvider( + const { container } = renderWithProvider( { - const { currentConfirmation: transactionMeta } = - useConfirmContext(); - - type TestNetChainId = (typeof TEST_CHAINS)[number]; - const isTestnet = TEST_CHAINS.includes( - transactionMeta?.chainId as TestNetChainId, - ); - const { showFiatInTestnets } = useSelector(getPreferences); - return ( {nativeFee} - {(!isTestnet || showFiatInTestnets) && ( - {fiatFee} - )} + {fiatFee} ); diff --git a/ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx b/ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx deleted file mode 100644 index 9eb70a856464..000000000000 --- a/ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { TransactionMeta } from '@metamask/transaction-controller'; -import { BigNumber } from 'bignumber.js'; -import React from 'react'; -import { useSelector } from 'react-redux'; -import { - CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP, - TEST_CHAINS, -} from '../../../../../../../../shared/constants/network'; -import { - AvatarToken, - AvatarTokenSize, - Box, - Text, -} from '../../../../../../../components/component-library'; -import Tooltip from '../../../../../../../components/ui/tooltip'; -import { getIntlLocale } from '../../../../../../../ducks/locale/locale'; -import { - AlignItems, - Display, - FlexDirection, - JustifyContent, - TextColor, - TextVariant, -} from '../../../../../../../helpers/constants/design-system'; -import { MIN_AMOUNT } from '../../../../../../../hooks/useCurrencyDisplay'; -import { useFiatFormatter } from '../../../../../../../hooks/useFiatFormatter'; -import { - getPreferences, - selectConversionRateByChainId, -} from '../../../../../../../selectors'; -import { getMultichainNetwork } from '../../../../../../../selectors/multichain'; -import { useConfirmContext } from '../../../../../context/confirm'; -import { - formatAmount, - formatAmountMaxPrecision, -} from '../../../../simulation-details/formatAmount'; -import { toNonScientificString } from '../../hooks/use-token-values'; - -const NativeSendHeading = () => { - const { currentConfirmation: transactionMeta } = - useConfirmContext(); - - const { chainId } = transactionMeta; - - const nativeAssetTransferValue = new BigNumber( - transactionMeta.txParams.value as string, - ).dividedBy(new BigNumber(10).pow(18)); - - const conversionRate = useSelector((state) => - selectConversionRateByChainId(state, chainId), - ); - - const fiatValue = - conversionRate && - nativeAssetTransferValue && - new BigNumber(conversionRate) - .times(nativeAssetTransferValue, 10) - .toNumber(); - const fiatFormatter = useFiatFormatter(); - const fiatDisplayValue = - fiatValue && fiatFormatter(fiatValue, { shorten: true }); - - const multichainNetwork = useSelector(getMultichainNetwork); - const ticker = multichainNetwork?.network?.ticker; - - const locale = useSelector(getIntlLocale); - const roundedTransferValue = formatAmount(locale, nativeAssetTransferValue); - - const transferValue = toNonScientificString( - nativeAssetTransferValue.toNumber(), - ); - - type TestNetChainId = (typeof TEST_CHAINS)[number]; - const isTestnet = TEST_CHAINS.includes( - transactionMeta.chainId as TestNetChainId, - ); - const { showFiatInTestnets } = useSelector(getPreferences); - - const NetworkImage = ( - - ); - - const NativeAssetAmount = - roundedTransferValue === - `<${formatAmountMaxPrecision(locale, MIN_AMOUNT)}` ? ( - - - {`${roundedTransferValue} ${ticker}`} - - - ) : ( - - {`${roundedTransferValue} ${ticker}`} - - ); - - const NativeAssetFiatConversion = Boolean(fiatDisplayValue) && - (!isTestnet || showFiatInTestnets) && ( - - {fiatDisplayValue} - - ); - - return ( - - {NetworkImage} - {NativeAssetAmount} - {NativeAssetFiatConversion} - - ); -}; - -export default NativeSendHeading; diff --git a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/__snapshots__/nft-send-heading.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/__snapshots__/nft-send-heading.test.tsx.snap deleted file mode 100644 index 2e98c4e5ce13..000000000000 --- a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/__snapshots__/nft-send-heading.test.tsx.snap +++ /dev/null @@ -1,21 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` renders component 1`] = ` -
-
-
- ? -
-

-

-

-
-`; diff --git a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.stories.tsx b/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.stories.tsx deleted file mode 100644 index d2c02deb1c7e..000000000000 --- a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Meta } from '@storybook/react'; -import React from 'react'; -import { Provider } from 'react-redux'; -import { getMockTokenTransferConfirmState } from '../../../../../../../../test/data/confirmations/helper'; -import configureStore from '../../../../../../../store/store'; -import { ConfirmContextProvider } from '../../../../../context/confirm'; -import NFTSendHeading from './nft-send-heading'; - -const store = configureStore(getMockTokenTransferConfirmState({})); - -const Story = { - title: 'Components/App/Confirm/info/NFTSendHeading', - component: NFTSendHeading, - decorators: [ - (story: () => Meta) => ( - - {story()} - - ), - ], -}; - -export default Story; - -export const DefaultStory = () => ( - - - -); - -DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.test.tsx b/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.test.tsx deleted file mode 100644 index 0d2b1fd898f8..000000000000 --- a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.test.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import configureMockStore from 'redux-mock-store'; -import thunk from 'redux-thunk'; -import { getMockTokenTransferConfirmState } from '../../../../../../../../test/data/confirmations/helper'; -import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers'; -import NFTSendHeading from './nft-send-heading'; - -describe('', () => { - const middleware = [thunk]; - const state = getMockTokenTransferConfirmState({}); - const mockStore = configureMockStore(middleware)(state); - - it('renders component', () => { - const { container } = renderWithConfirmContextProvider( - , - mockStore, - ); - - expect(container).toMatchSnapshot(); - }); -}); diff --git a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.tsx b/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.tsx deleted file mode 100644 index 2f36d10ce42c..000000000000 --- a/ui/pages/confirmations/components/confirm/info/shared/nft-send-heading/nft-send-heading.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { TransactionMeta } from '@metamask/transaction-controller'; -import React from 'react'; -import { - AvatarToken, - AvatarTokenSize, - Box, - Text, -} from '../../../../../../../components/component-library'; -import { - AlignItems, - Display, - FlexDirection, - JustifyContent, - TextColor, - TextVariant, -} from '../../../../../../../helpers/constants/design-system'; -import { useConfirmContext } from '../../../../../context/confirm'; -import { useAssetDetails } from '../../../../../hooks/useAssetDetails'; - -const NFTSendHeading = () => { - const { currentConfirmation: transactionMeta } = - useConfirmContext(); - - const tokenAddress = transactionMeta.txParams.to; - const userAddress = transactionMeta.txParams.from; - const { data } = transactionMeta.txParams; - const { chainId } = transactionMeta; - - const { assetName, tokenImage, tokenId } = useAssetDetails( - tokenAddress, - userAddress, - data, - chainId, - ); - - const TokenImage = ; - - const TokenName = ( - - {assetName} - - ); - - const TokenID = ( - - {tokenId} - - ); - - return ( - - {TokenImage} - {TokenName} - {TokenID} - - ); -}; - -export default NFTSendHeading; diff --git a/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx b/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx index b44f5be93a4f..2806c33936c0 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx @@ -1,15 +1,12 @@ import { TransactionMeta } from '@metamask/transaction-controller'; import React from 'react'; import { useSelector } from 'react-redux'; -import { TEST_CHAINS } from '../../../../../../../../shared/constants/network'; import { AvatarToken, AvatarTokenSize, Box, Text, } from '../../../../../../../components/component-library'; -import Tooltip from '../../../../../../../components/ui/tooltip'; -import { getIntlLocale } from '../../../../../../../ducks/locale/locale'; import { AlignItems, BackgroundColor, @@ -19,76 +16,57 @@ import { TextColor, TextVariant, } from '../../../../../../../helpers/constants/design-system'; -import { MIN_AMOUNT } from '../../../../../../../hooks/useCurrencyDisplay'; import { useI18nContext } from '../../../../../../../hooks/useI18nContext'; -import { getPreferences } from '../../../../../../../selectors'; +import { getWatchedToken } from '../../../../../../../selectors'; +import { MultichainState } from '../../../../../../../selectors/multichain'; import { useConfirmContext } from '../../../../../context/confirm'; -import { formatAmountMaxPrecision } from '../../../../simulation-details/formatAmount'; +import { useTokenImage } from '../../hooks/use-token-image'; import { useTokenValues } from '../../hooks/use-token-values'; -import { useTokenDetails } from '../../hooks/useTokenDetails'; import { ConfirmLoader } from '../confirm-loader/confirm-loader'; const SendHeading = () => { const t = useI18nContext(); const { currentConfirmation: transactionMeta } = useConfirmContext(); - const locale = useSelector(getIntlLocale); - const { tokenImage, tokenSymbol } = useTokenDetails(transactionMeta); - const { - decodedTransferValue, - displayTransferValue, - fiatDisplayValue, - pending, - } = useTokenValues(transactionMeta); - - type TestNetChainId = (typeof TEST_CHAINS)[number]; - const isTestnet = TEST_CHAINS.includes( - transactionMeta.chainId as TestNetChainId, + const selectedToken = useSelector((state: MultichainState) => + getWatchedToken(transactionMeta)(state), ); - const { showFiatInTestnets } = useSelector(getPreferences); + const { tokenImage } = useTokenImage(transactionMeta, selectedToken); + const { decodedTransferValue, fiatDisplayValue, pending } = + useTokenValues(transactionMeta); const TokenImage = ( ); - const TokenValue = - displayTransferValue === - `<${formatAmountMaxPrecision(locale, MIN_AMOUNT)}` ? ( - - {`${displayTransferValue} ${tokenSymbol}`} - - ) : ( + const TokenValue = ( + <> {`${displayTransferValue} ${tokenSymbol}`} - ); - - const TokenFiatValue = Boolean(fiatDisplayValue) && - (!isTestnet || showFiatInTestnets) && ( - - {fiatDisplayValue} - - ); + >{`${decodedTransferValue || ''} ${ + selectedToken?.symbol || t('unknown') + }`} + {fiatDisplayValue && ( + + {fiatDisplayValue} + + )} + + ); if (pending) { return ; @@ -104,7 +82,6 @@ const SendHeading = () => { > {TokenImage} {TokenValue} - {TokenFiatValue} ); }; 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 cc66da7a1375..c53805c877e1 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 @@ -10,16 +10,10 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] = class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center mm-box--color-text-default mm-box--rounded-lg" style="overflow-wrap: anywhere; min-height: 24px; position: relative;" > - +
@@ -57,15 +51,6 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
-
+
-
+
-
+
-
+
- +
@@ -1228,16 +1216,10 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = ` class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center mm-box--color-text-default mm-box--rounded-lg" style="overflow-wrap: anywhere; min-height: 24px; position: relative;" > - +
@@ -2290,16 +2272,10 @@ exports[`TransactionData renders raw hexadecimal if no decoded data 1`] = ` class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center mm-box--color-text-default mm-box--rounded-lg" style="overflow-wrap: anywhere; min-height: 24px; position: relative;" > - +
diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.stories.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.stories.tsx index 105838af78c2..091185ae23f3 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.stories.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.stories.tsx @@ -24,6 +24,7 @@ function getStore(transactionData?: string, to?: string) { const confirmation = { ...confirmationTemplate, + chainId: '0x1', txParams: { ...confirmationTemplate.txParams, to: to ?? confirmationTemplate.txParams.to, diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.stories.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.stories.tsx index f37317c230c4..dfec9c8ef4d0 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.stories.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.stories.tsx @@ -5,6 +5,7 @@ import { PAYMASTER_AND_DATA, genUnapprovedContractInteractionConfirmation, } from '../../../../../../../../test/data/confirmations/contract-interaction'; +import mockState from '../../../../../../../../test/data/mock-state.json'; import { getMockConfirmStateForTransaction } from '../../../../../../../../test/data/confirmations/helper'; import configureStore from '../../../../../../../store/store'; import { ConfirmContextProvider } from '../../../../../context/confirm'; @@ -19,7 +20,9 @@ function getStore() { return configureStore( getMockConfirmStateForTransaction(confirmation, { metamask: { + ...mockState.metamask, preferences: { + ...mockState.metamask.preferences, petnamesEnabled: true, }, userOperations: { diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/token-details-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/token-details-section.test.tsx.snap index dcedd06b1557..c545cea1f66d 100644 --- a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/token-details-section.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/token-details-section.test.tsx.snap @@ -27,7 +27,7 @@ exports[`TokenDetailsSection renders correctly 1`] = ` class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0" >
G
@@ -53,21 +53,6 @@ exports[`TokenDetailsSection renders correctly 1`] = ` > Interacting with

-
-
- -
-
- - - - - - - - - + ? +
+

+ Unknown +

- - - - - - - - - +
+ +

+ 0x2e0D7...5d09B +

+
+
+ +
+

+ Estimated changes +

+
+
+ +
+
+
+
+
+

- Estimated changes + You send

-
+
- +
+
+
+

+ - 4 +

+
+
+
+
+
+
+ E +
+

+ ETH +

+
+
-
- - - - - - - - - -
@@ -202,7 +186,7 @@ exports[`TokenTransferInfo renders correctly 1`] = ` class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0" >
G
@@ -228,21 +212,6 @@ exports[`TokenTransferInfo renders correctly 1`] = ` > Interacting with

-
-
- -
-
{ > { ); - const tokenRow = transactionMeta.type !== TransactionType.simpleSend && ( - + const tokenRow = ( + ({ })); describe('TokenTransferInfo', () => { - it('renders correctly', () => { + it('renders correctly', async () => { const state = getMockTokenTransferConfirmState({}); const mockStore = configureMockStore([])(state); const { container } = renderWithConfirmContextProvider( @@ -30,6 +32,10 @@ describe('TokenTransferInfo', () => { mockStore, ); + await waitFor(() => { + expect(screen.getByText(tEn('networkFee') as string)).toBeInTheDocument(); + }); + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx index 50e9d85936f0..b89e87350a36 100644 --- a/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx +++ b/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx @@ -22,9 +22,9 @@ const TokenTransferInfo = () => { {!isWalletInitiated && ( )} diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx index 7194d46a8119..250b9bffd2cf 100644 --- a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx +++ b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx @@ -1,8 +1,5 @@ import { NameType } from '@metamask/name-controller'; -import { - TransactionMeta, - TransactionType, -} from '@metamask/transaction-controller'; +import { TransactionMeta } from '@metamask/transaction-controller'; import React from 'react'; import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section'; import Name from '../../../../../../components/app/name'; @@ -29,14 +26,9 @@ export const TransactionFlowSection = () => { const { value, pending } = useDecodedTransactionData(); - const addresses = value?.data[0].params.filter( + const recipientAddress = value?.data[0].params.find( (param) => param.type === 'address', - ); - const recipientAddress = - transactionMeta.type === TransactionType.simpleSend - ? transactionMeta.txParams.to - : // sometimes there's more than one address, in which case we want the last one - addresses?.[addresses.length - 1].value; + )?.value; if (pending) { return ; diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/__snapshots__/typed-sign-v1.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/__snapshots__/typed-sign-v1.test.tsx.snap index d4b07b83a269..59a6065e6b9d 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/__snapshots__/typed-sign-v1.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/__snapshots__/typed-sign-v1.test.tsx.snap @@ -52,30 +52,9 @@ exports[`TypedSignInfo correctly renders typed sign data request 1`] = ` class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md" >
- -
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.test.tsx index 2b1e6969ddd5..c6801dd91314 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.test.tsx @@ -5,7 +5,6 @@ import { TransactionType } from '@metamask/transaction-controller'; import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers'; import { getMockTypedSignConfirmStateForRequest } from '../../../../../../../test/data/confirmations/helper'; import { unapprovedTypedSignMsgV1 } from '../../../../../../../test/data/confirmations/typed_sign'; -import * as snapUtils from '../../../../../../helpers/utils/snaps'; import TypedSignInfoV1 from './typed-sign-v1'; jest.mock( @@ -17,21 +16,6 @@ jest.mock( }), ); -jest.mock('../../../../../../../node_modules/@metamask/snaps-utils', () => { - const originalUtils = jest.requireActual( - '../../../../../../../node_modules/@metamask/snaps-utils', - ); - return { - ...originalUtils, - stripSnapPrefix: jest.fn().mockReturnValue('@metamask/examplesnap'), - getSnapPrefix: jest.fn().mockReturnValue('npm:'), - }; -}); - -jest.mock('../../../../../../helpers/utils/snaps', () => ({ - isSnapId: jest.fn(), -})); - describe('TypedSignInfo', () => { it('correctly renders typed sign data request', () => { const mockState = getMockTypedSignConfirmStateForRequest( @@ -58,50 +42,4 @@ describe('TypedSignInfo', () => { ); expect(container).toMatchInlineSnapshot(`
`); }); - - it('displays "requestFromInfoSnap" tooltip when origin is a snap', async () => { - const mockState = getMockTypedSignConfirmStateForRequest({ - id: '123', - type: TransactionType.signTypedData, - chainId: '0x5', - }); - (snapUtils.isSnapId as jest.Mock).mockReturnValue(true); - const mockStore = configureMockStore([])(mockState); - const { queryByText } = renderWithConfirmContextProvider( - , - mockStore, - ); - - const requestFromLabel = queryByText('Request from'); - - await requestFromLabel?.dispatchEvent( - new MouseEvent('mouseenter', { bubbles: true }), - ); - expect( - queryByText('This is the Snap asking for your signature.'), - ).toBeDefined(); - }); - - it('displays "requestFromInfo" tooltip when origin is not a snap', async () => { - const mockState = getMockTypedSignConfirmStateForRequest({ - id: '123', - type: TransactionType.signTypedData, - chainId: '0x5', - }); - (snapUtils.isSnapId as jest.Mock).mockReturnValue(false); - const mockStore = configureMockStore([])(mockState); - const { queryByText } = renderWithConfirmContextProvider( - , - mockStore, - ); - - const requestFromLabel = queryByText('Request from'); - - await requestFromLabel?.dispatchEvent( - new MouseEvent('mouseenter', { bubbles: true }), - ); - expect( - queryByText('This is the site asking for your signature.'), - ).toBeDefined(); - }); }); diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.tsx index eb935d6bdef2..951acbba6782 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.tsx @@ -14,7 +14,6 @@ import { import { useConfirmContext } from '../../../../context/confirm'; import { ConfirmInfoRowTypedSignDataV1 } from '../../row/typed-sign-data-v1/typedSignDataV1'; import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section'; -import { isSnapId } from '../../../../../../helpers/utils/snaps'; const TypedSignV1Info: React.FC = () => { const t = useI18nContext(); @@ -24,9 +23,6 @@ const TypedSignV1Info: React.FC = () => { return null; } - const toolTipMessage = isSnapId(currentConfirmation.msgParams?.origin) - ? t('requestFromInfoSnap') - : t('requestFromInfo'); const chainId = currentConfirmation.chainId as string; return ( @@ -36,7 +32,7 @@ const TypedSignV1Info: React.FC = () => { alertKey={RowAlertKey.RequestFrom} ownerId={currentConfirmation.id} label={t('requestFrom')} - tooltip={toolTipMessage} + tooltip={t('requestFromInfo')} > { - +
- -
@@ -365,6 +344,294 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = `

+
+
+
+
+

+ Primary type: +

+
+
+
+

+ Permit +

+
+
+
+
+
+
+
+

+ Owner: +

+
+
+
+
+ +

+ 0x935E7...05477 +

+
+
+
+
+
+
+

+ Spender: +

+
+
+
+
+ +

+ 0x5B38D...eddC4 +

+
+
+
+
+
+
+

+ Value: +

+
+
+
+
+
+

+ 3,000 +

+
+
+
+
+
+
+
+

+ Nonce: +

+
+
+
+

+ 0 +

+
+
+
+
+
+

+ Deadline: +

+
+
+
+

+ 09 June 3554, 16:53 +

+
+
+
+
+
@@ -393,7 +660,7 @@ exports[`TypedSignInfo correctly renders permit sign type with no deadline 1`] =

- -
@@ -735,6 +981,294 @@ exports[`TypedSignInfo correctly renders permit sign type with no deadline 1`] =

+
+
+
+
+

+ Primary type: +

+
+
+
+

+ Permit +

+
+
+
+
+
+
+
+

+ Owner: +

+
+
+
+
+ +

+ 0x935E7...05477 +

+
+
+
+
+
+
+

+ Spender: +

+
+
+
+
+ +

+ 0x5B38D...eddC4 +

+
+
+
+
+
+
+

+ Value: +

+
+
+
+
+
+

+ 3,000 +

+
+
+
+
+
+
+
+

+ Nonce: +

+
+
+
+

+ 0 +

+
+
+
+
+
+

+ Deadline: +

+
+
+
+

+ None +

+
+
+
+
+
@@ -869,30 +1403,9 @@ exports[`TypedSignInfo renders origin for typed sign data request 1`] = ` class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md" >
- -
@@ -1723,30 +2236,9 @@ exports[`TypedSignInfo should render message for typed sign v3 request 1`] = ` class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md" >
- -
@@ -2211,30 +2703,9 @@ exports[`TypedSignInfo should render message for typed sign v4 request 1`] = ` class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md" >
- -
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx index c7a9eae6a496..fa0c911d5eae 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.tsx @@ -59,7 +59,6 @@ const PermitSimulationValueDisplay: React.FC< const tokenDetails = useGetTokenStandardAndDetails(tokenContract); useTrackERC20WithoutDecimalInformation( - chainId, tokenContract, tokenDetails as TokenDetailsERC20, MetaMetricsEventLocation.SignatureConfirmation, diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx index e6c93e964687..86826c5a60b0 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx @@ -16,7 +16,6 @@ import { unapprovedTypedSignMsgV3, } from '../../../../../../../test/data/confirmations/typed_sign'; import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers'; -import * as snapUtils from '../../../../../../helpers/utils/snaps'; import TypedSignInfo from './typed-sign'; jest.mock( @@ -34,21 +33,6 @@ jest.mock('../../../../../../store/actions', () => { }; }); -jest.mock('../../../../../../../node_modules/@metamask/snaps-utils', () => { - const originalUtils = jest.requireActual( - '../../../../../../../node_modules/@metamask/snaps-utils', - ); - return { - ...originalUtils, - stripSnapPrefix: jest.fn().mockReturnValue('@metamask/examplesnap'), - getSnapPrefix: jest.fn().mockReturnValue('npm:'), - }; -}); - -jest.mock('../../../../../../helpers/utils/snaps', () => ({ - isSnapId: jest.fn(), -})); - describe('TypedSignInfo', () => { it('renders origin for typed sign data request', () => { const state = getMockTypedSignConfirmState(); @@ -143,50 +127,4 @@ describe('TypedSignInfo', () => { ); expect(container).toMatchSnapshot(); }); - - it('displays "requestFromInfoSnap" tooltip when origin is a snap', async () => { - const mockState = getMockTypedSignConfirmStateForRequest({ - id: '123', - type: TransactionType.signTypedData, - chainId: '0x5', - }); - (snapUtils.isSnapId as jest.Mock).mockReturnValue(true); - const mockStore = configureMockStore([])(mockState); - const { queryByText } = renderWithConfirmContextProvider( - , - mockStore, - ); - - const requestFromLabel = queryByText('Request from'); - - await requestFromLabel?.dispatchEvent( - new MouseEvent('mouseenter', { bubbles: true }), - ); - expect( - queryByText('This is the Snap asking for your signature.'), - ).toBeDefined(); - }); - - it('displays "requestFromInfo" tooltip when origin is not a snap', async () => { - const mockState = getMockTypedSignConfirmStateForRequest({ - id: '123', - type: TransactionType.signTypedData, - chainId: '0x5', - }); - (snapUtils.isSnapId as jest.Mock).mockReturnValue(false); - const mockStore = configureMockStore([])(mockState); - const { queryByText } = renderWithConfirmContextProvider( - , - mockStore, - ); - - const requestFromLabel = queryByText('Request from'); - - await requestFromLabel?.dispatchEvent( - new MouseEvent('mouseenter', { bubbles: true }), - ); - expect( - queryByText('This is the site asking for your signature.'), - ).toBeDefined(); - }); }); diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx index f14107c1fd8a..bb011bc68710 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { isValidAddress } from 'ethereumjs-util'; @@ -11,18 +11,17 @@ import { ConfirmInfoRowDivider, ConfirmInfoRowUrl, } from '../../../../../../components/app/confirm/info/row'; -import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section'; import { useI18nContext } from '../../../../../../hooks/useI18nContext'; import { SignatureRequestType } from '../../../../types/confirm'; -import { useGetTokenStandardAndDetails } from '../../../../hooks/useGetTokenStandardAndDetails'; import { isOrderSignatureRequest, isPermitSignatureRequest, } from '../../../../utils'; +import { fetchErc20Decimals } from '../../../../utils/token'; import { useConfirmContext } from '../../../../context/confirm'; import { selectUseTransactionSimulations } from '../../../../selectors/preferences'; import { ConfirmInfoRowTypedSignData } from '../../row/typed-sign-data/typedSignData'; -import { isSnapId } from '../../../../../../helpers/utils/snaps'; +import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section'; import { PermitSimulation } from './permit-simulation'; const TypedSignInfo: React.FC = () => { @@ -31,6 +30,7 @@ const TypedSignInfo: React.FC = () => { const useTransactionSimulations = useSelector( selectUseTransactionSimulations, ); + const [decimals, setDecimals] = useState(0); if (!currentConfirmation?.msgParams) { return null; @@ -43,15 +43,17 @@ const TypedSignInfo: React.FC = () => { const isPermit = isPermitSignatureRequest(currentConfirmation); const isOrder = isOrderSignatureRequest(currentConfirmation); - const tokenContract = isPermit || isOrder ? verifyingContract : undefined; - const { decimalsNumber } = useGetTokenStandardAndDetails(tokenContract); - const chainId = currentConfirmation.chainId as string; - const toolTipMessage = isSnapId(currentConfirmation.msgParams.origin) - ? t('requestFromInfoSnap') - : t('requestFromInfo'); - const msgData = currentConfirmation.msgParams?.data as string; + useEffect(() => { + (async () => { + if (!isPermit && !isOrder) { + return; + } + const tokenDecimals = await fetchErc20Decimals(verifyingContract); + setDecimals(tokenDecimals); + })(); + }, [verifyingContract]); return ( <> @@ -69,7 +71,7 @@ const TypedSignInfo: React.FC = () => { alertKey={RowAlertKey.RequestFrom} ownerId={currentConfirmation.id} label={t('requestFrom')} - tooltip={toolTipMessage} + tooltip={t('requestFromInfo')} > @@ -83,15 +85,10 @@ const TypedSignInfo: React.FC = () => { )} - + diff --git a/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx b/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx index f8d6b87e50db..fca355a9b063 100644 --- a/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx +++ b/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx @@ -1,14 +1,18 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; +import { Hex } from '@metamask/utils'; import { Box } from '../../../../../components/component-library'; import { Toast } from '../../../../../components/multichain'; import { getLastInteractedConfirmationInfo, setLastInteractedConfirmationInfo, } from '../../../../../store/actions'; +import { + getCurrentChainId, + getNetworkConfigurationsByChainId, +} from '../../../../../selectors'; import { useI18nContext } from '../../../../../hooks/useI18nContext'; -import { selectNetworkConfigurationByChainId } from '../../../../../selectors'; const CHAIN_CHANGE_THRESHOLD_MILLISECONDS = 60 * 1000; // 1 Minute const TOAST_TIMEOUT_MILLISECONDS = 5 * 1000; // 5 Seconds @@ -18,13 +22,12 @@ const NetworkChangeToastLegacy = ({ }: { confirmation: { id: string; chainId: string }; }) => { - const newChainId = confirmation?.chainId; + const chainId = useSelector(getCurrentChainId); + const newChainId = confirmation?.chainId ?? chainId; const [toastVisible, setToastVisible] = useState(false); const t = useI18nContext(); - - const network = useSelector((state) => - selectNetworkConfigurationByChainId(state, newChainId), - ); + const networkConfigurations = useSelector(getNetworkConfigurationsByChainId); + const network = networkConfigurations[newChainId as Hex]; const hideToast = useCallback(() => { setToastVisible(false); @@ -32,11 +35,9 @@ const NetworkChangeToastLegacy = ({ useEffect(() => { let isMounted = true; - if (!confirmation) { return undefined; } - (async () => { const lastInteractedConfirmationInfo = await getLastInteractedConfirmationInfo(); @@ -70,7 +71,7 @@ const NetworkChangeToastLegacy = ({ return () => { isMounted = false; }; - }, [confirmation?.id]); + }, [confirmation?.id, chainId]); if (!toastVisible) { return null; diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx index 6bf31166b6e5..d5954e56609b 100644 --- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx +++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx @@ -2,10 +2,7 @@ import React from 'react'; import configureMockStore from 'redux-mock-store'; import { unapprovedTypedSignMsgV4 } from '../../../../../../test/data/confirmations/typed_sign'; -import { - getMockContractInteractionConfirmState, - getMockPersonalSignConfirmState, -} from '../../../../../../test/data/confirmations/helper'; +import { getMockPersonalSignConfirmState } from '../../../../../../test/data/confirmations/helper'; import { renderWithConfirmContextProvider } from '../../../../../../test/lib/confirmations/render-helpers'; import * as usePreviousHooks from '../../../../../hooks/usePrevious'; import ScrollToBottom from './scroll-to-bottom'; @@ -119,16 +116,6 @@ describe('ScrollToBottom', () => { expect(mockSetHasScrolledToBottom).toHaveBeenCalledWith(false); }); - it('does not render the scroll button when the confirmation is transaction redesigned', () => { - const mockStateTransaction = getMockContractInteractionConfirmState(); - const { container } = renderWithConfirmContextProvider( - foobar, - configureMockStore([])(mockStateTransaction), - ); - - expect(container.querySelector(buttonSelector)).not.toBeInTheDocument(); - }); - describe('when user has scrolled to the bottom', () => { beforeEach(() => { mockedUseScrollRequiredResult.isScrolledToBottom = true; diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx index c61053818923..f42997de114e 100644 --- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx +++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx @@ -1,6 +1,5 @@ import React, { useContext, useEffect } from 'react'; import { useSelector } from 'react-redux'; -import { TransactionType } from '@metamask/transaction-controller'; import { Box, ButtonIcon, @@ -21,7 +20,6 @@ import { usePrevious } from '../../../../../hooks/usePrevious'; import { useScrollRequired } from '../../../../../hooks/useScrollRequired'; import { useConfirmContext } from '../../../context/confirm'; import { selectConfirmationAdvancedDetailsOpen } from '../../../selectors/preferences'; -import { REDESIGN_DEV_TRANSACTION_TYPES } from '../../../utils'; type ContentProps = { /** @@ -51,13 +49,6 @@ const ScrollToBottom = ({ children }: ContentProps) => { offsetPxFromBottom: 0, }); - const isTransactionRedesign = REDESIGN_DEV_TRANSACTION_TYPES.includes( - currentConfirmation?.type as TransactionType, - ); - - const showScrollToBottom = - isScrollable && !isScrolledToBottom && !isTransactionRedesign; - /** * Scroll to the top of the page when the confirmation changes. This happens * when we navigate through different confirmations. Also, resets hasScrolledToBottom @@ -80,13 +71,8 @@ const ScrollToBottom = ({ children }: ContentProps) => { }, [currentConfirmation?.id, previousId, ref?.current]); useEffect(() => { - if (isTransactionRedesign) { - setIsScrollToBottomCompleted(true); - return; - } - setIsScrollToBottomCompleted(!isScrollable || hasScrolledToBottom); - }, [isScrollable, hasScrolledToBottom, isTransactionRedesign]); + }, [isScrollable, hasScrolledToBottom]); return ( { > {children} - {showScrollToBottom && ( + {isScrollable && !isScrolledToBottom && ( - - +
} diff --git a/ui/pages/confirmations/components/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap b/ui/pages/confirmations/components/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap index bf7516245e8b..362926d71ce8 100644 --- a/ui/pages/confirmations/components/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap +++ b/ui/pages/confirmations/components/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap @@ -105,7 +105,6 @@ exports[`Multi layer fee message when balance and token price checker is enabled > $0.00 @@ -153,7 +152,6 @@ exports[`Multi layer fee message when balance and token price checker is enabled > $0.56 diff --git a/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js b/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js index ff5adfea8b5d..4115f06cd644 100644 --- a/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js +++ b/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { captureException } from '@sentry/browser'; import BlockaidPackage from '@blockaid/ppom_release/package.json'; +import { useSelector } from 'react-redux'; import { NETWORK_TO_NAME_MAP } from '../../../../../../shared/constants/network'; import { OverflowWrap } from '../../../../../helpers/constants/design-system'; import { I18nContext } from '../../../../../contexts/i18n'; @@ -19,6 +20,7 @@ import { useTransactionEventFragment } from '../../../hooks/useTransactionEventF import SecurityProviderBannerAlert from '../security-provider-banner-alert'; import LoadingIndicator from '../../../../../components/ui/loading-indicator'; +import { getCurrentChainId } from '../../../../../selectors'; import { getReportUrl } from './blockaid-banner-utils'; const zlib = require('zlib'); @@ -57,6 +59,8 @@ function BlockaidBannerAlert({ txData, ...props }) { const { securityAlertResponse, origin, msgParams, type, txParams, chainId } = txData; + const selectorChainId = useSelector(getCurrentChainId); + const t = useContext(I18nContext); const { updateTransactionEventFragment } = useTransactionEventFragment(); @@ -127,7 +131,7 @@ function BlockaidBannerAlert({ txData, ...props }) { const reportData = { blockNumber: block, blockaidVersion: BlockaidPackage.version, - chain: NETWORK_TO_NAME_MAP[chainId], + chain: NETWORK_TO_NAME_MAP[chainId ?? selectorChainId], classification: isFailedResultType ? 'error' : reason, domain: origin ?? msgParams?.origin ?? txParams?.origin, jsonRpcMethod: type, diff --git a/ui/pages/confirmations/components/signature-request-header/signature-request-header.js b/ui/pages/confirmations/components/signature-request-header/signature-request-header.js index 61cbfe13e290..9c91ca476ebb 100644 --- a/ui/pages/confirmations/components/signature-request-header/signature-request-header.js +++ b/ui/pages/confirmations/components/signature-request-header/signature-request-header.js @@ -1,15 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; -import { RpcEndpointType } from '@metamask/network-controller'; -import { NetworkType } from '@metamask/controller-utils'; import { useI18nContext } from '../../../../hooks/useI18nContext'; +import { + getNativeCurrency, + getProviderConfig, +} from '../../../../ducks/metamask/metamask'; import { accountsWithSendEtherInfoSelector, + getCurrentChainId, getCurrentCurrency, - selectDefaultRpcEndpointByChainId, - selectNetworkConfigurationByChainId, } from '../../../../selectors'; import { formatCurrency } from '../../../../helpers/utils/confirm-tx.util'; import { @@ -25,33 +26,22 @@ import NetworkAccountBalanceHeader from '../../../../components/app/network-acco const SignatureRequestHeader = ({ txData }) => { const t = useI18nContext(); const { - chainId, msgParams: { from }, } = txData; const allAccounts = useSelector(accountsWithSendEtherInfoSelector); const fromAccount = getAccountByAddress(allAccounts, from); + const nativeCurrency = useSelector(getNativeCurrency); const currentCurrency = useSelector(getCurrentCurrency); + const currentChainId = useSelector(getCurrentChainId); - const { nativeCurrency, name: networkNickname } = useSelector((state) => - selectNetworkConfigurationByChainId(state, chainId), - ); - - const defaultRpcEndpoint = useSelector((state) => - selectDefaultRpcEndpointByChainId(state, chainId), - ); - - const networkType = - defaultRpcEndpoint.type === RpcEndpointType.Custom - ? NetworkType.rpc - : defaultRpcEndpoint.networkClientId; - - const networkName = getNetworkNameFromProviderType(networkType); + const providerConfig = useSelector(getProviderConfig); + const networkName = getNetworkNameFromProviderType(providerConfig.type); const conversionRate = null; // setting conversion rate to null by default to display balance in native const currentNetwork = networkName === '' - ? networkNickname || t('unknownNetwork') + ? providerConfig.nickname || t('unknownNetwork') : t(networkName); const balanceInBaseAsset = conversionRate @@ -81,7 +71,7 @@ const SignatureRequestHeader = ({ txData }) => { conversionRate ? currentCurrency?.toUpperCase() : nativeCurrency } accountAddress={fromAccount.address} - chainId={chainId} + chainId={currentChainId} /> ); }; diff --git a/ui/pages/confirmations/components/signature-request-header/signature-request-header.stories.js b/ui/pages/confirmations/components/signature-request-header/signature-request-header.stories.js index 111be8932207..673b9a67e598 100644 --- a/ui/pages/confirmations/components/signature-request-header/signature-request-header.stories.js +++ b/ui/pages/confirmations/components/signature-request-header/signature-request-header.stories.js @@ -1,30 +1,13 @@ import React from 'react'; -import { CHAIN_IDS } from '@metamask/transaction-controller'; -import { Provider } from 'react-redux'; -import configureStore from '../../../../store/store'; -import testData from '../../../../../.storybook/test-data'; -import { mockNetworkState } from '../../../../../test/stub/networks'; import SignatureRequestHeader from './signature-request-header'; -const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET; - -const store = configureStore({ - ...testData, - metamask: { - ...testData.metamask, - ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), - }, -}); - export default { title: 'Confirmations/Components/SignatureRequestHeader', - decorators: [(story) => {story()}], argTypes: { txData: { control: 'object' }, }, args: { txData: { - chainId: CHAIN_ID_MOCK, msgParams: { from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e', data: JSON.stringify({ diff --git a/ui/pages/confirmations/components/signature-request-header/signature-request-header.test.js b/ui/pages/confirmations/components/signature-request-header/signature-request-header.test.js index 862339239643..a3ddd3136627 100644 --- a/ui/pages/confirmations/components/signature-request-header/signature-request-header.test.js +++ b/ui/pages/confirmations/components/signature-request-header/signature-request-header.test.js @@ -1,17 +1,12 @@ import React from 'react'; import configureMockStore from 'redux-mock-store'; -import { CHAIN_IDS } from '@metamask/transaction-controller'; import mockState from '../../../../../test/data/mock-state.json'; import { renderWithProvider } from '../../../../../test/lib/render-helpers'; -import { mockNetworkState } from '../../../../../test/stub/networks'; import SignatureRequestHeader from '.'; -const CHAIN_ID_MOCK = CHAIN_IDS.GOERLI; - const props = { txData: { - chainId: CHAIN_ID_MOCK, msgParams: { from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', }, @@ -19,10 +14,7 @@ const props = { }; describe('SignatureRequestHeader', () => { - const store = configureMockStore()({ - ...mockState, - ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), - }); + const store = configureMockStore()(mockState); it('should match snapshot', () => { const { container } = renderWithProvider( diff --git a/ui/pages/confirmations/components/signature-request-original/signature-request-original.stories.js b/ui/pages/confirmations/components/signature-request-original/signature-request-original.stories.js index 7343d5c34140..297978bb5f04 100644 --- a/ui/pages/confirmations/components/signature-request-original/signature-request-original.stories.js +++ b/ui/pages/confirmations/components/signature-request-original/signature-request-original.stories.js @@ -1,16 +1,10 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; -import { CHAIN_IDS } from '@metamask/transaction-controller'; -import { Provider } from 'react-redux'; import { MESSAGE_TYPE } from '../../../../../shared/constants/app'; import testData from '../../../../../.storybook/test-data'; -import configureStore from '../../../../store/store'; -import { mockNetworkState } from '../../../../../test/stub/networks'; import README from './README.mdx'; import SignatureRequestOriginal from './signature-request-original.component'; -const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET; - const [MOCK_PRIMARY_ACCOUNT, MOCK_SECONDARY_ACCOUNT] = Object.values( testData.metamask.internalAccounts.accounts, ); @@ -47,17 +41,9 @@ const MOCK_SIGN_DATA = JSON.stringify({ }, }); -const store = configureStore({ - ...testData, - metamask: { - ...testData.metamask, - ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), - }, -}); - export default { title: 'Confirmations/Components/SignatureRequestOriginal', - decorators: [(story) => {story()}], + component: SignatureRequestOriginal, parameters: { docs: { @@ -101,7 +87,6 @@ DefaultStory.storyName = 'personal_sign Type'; DefaultStory.args = { txData: { - chainId: CHAIN_ID_MOCK, msgParams: { from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e', data: MOCK_SIGN_DATA, @@ -117,7 +102,6 @@ ETHSignTypedStory.storyName = 'eth_signTypedData Type'; ETHSignTypedStory.args = { txData: { - chainId: CHAIN_ID_MOCK, msgParams: { from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e', data: [ @@ -144,7 +128,6 @@ AccountMismatchStory.storyName = 'Account Mismatch warning'; AccountMismatchStory.args = { txData: { - chainId: CHAIN_ID_MOCK, msgParams: { from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4', data: MOCK_SIGN_DATA, diff --git a/ui/pages/confirmations/components/signature-request-original/signature-request-original.test.js b/ui/pages/confirmations/components/signature-request-original/signature-request-original.test.js index b8d1429751e6..11577f44e312 100644 --- a/ui/pages/confirmations/components/signature-request-original/signature-request-original.test.js +++ b/ui/pages/confirmations/components/signature-request-original/signature-request-original.test.js @@ -3,7 +3,6 @@ import configureMockStore from 'redux-mock-store'; import { fireEvent, screen } from '@testing-library/react'; import { act } from 'react-dom/test-utils'; import { EthAccountType } from '@metamask/keyring-api'; -import { CHAIN_IDS } from '@metamask/transaction-controller'; import { MESSAGE_TYPE } from '../../../../../shared/constants/app'; import { SECURITY_PROVIDER_MESSAGE_SEVERITY } from '../../../../../shared/constants/security-provider'; import mockState from '../../../../../test/data/mock-state.json'; @@ -12,7 +11,6 @@ import configureStore from '../../../../store/store'; import { rejectPendingApproval } from '../../../../store/actions'; import { shortenAddress } from '../../../../helpers/utils/util'; import { ETH_EOA_METHODS } from '../../../../../shared/constants/eth-methods'; -import { mockNetworkState } from '../../../../../test/stub/networks'; import SignatureRequestOriginal from '.'; jest.mock('../../../../store/actions', () => ({ @@ -23,15 +21,12 @@ jest.mock('../../../../store/actions', () => ({ setLastInteractedConfirmationInfo: jest.fn(), })); -const CHAIN_ID_MOCK = CHAIN_IDS.GOERLI; - const address = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'; const props = { signMessage: jest.fn(), cancelMessage: jest.fn(), txData: { - chainId: CHAIN_ID_MOCK, msgParams: { from: address, data: [ @@ -81,7 +76,6 @@ const render = ({ txData = props.txData, selectedAccount } = {}) => { const store = configureStore({ metamask: { ...mockState.metamask, - ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), internalAccounts, }, }); @@ -126,7 +120,6 @@ describe('SignatureRequestOriginal', () => { it('should escape RTL character in label or value', () => { const txData = { - chainId: CHAIN_ID_MOCK, msgParams: { from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', data: [ diff --git a/ui/pages/confirmations/components/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap b/ui/pages/confirmations/components/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap index fcf0bb30d8a3..a524cbcc1caf 100644 --- a/ui/pages/confirmations/components/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap +++ b/ui/pages/confirmations/components/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap @@ -169,7 +169,7 @@ exports[`SignatureRequestSIWE (Sign in with Ethereum) should match snapshot 1`] > 966.987986 - GoerliETH + ETH
diff --git a/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.stories.js b/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.stories.js index 7900cfe1828d..de29680421c6 100644 --- a/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.stories.js +++ b/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.stories.js @@ -1,37 +1,18 @@ import React from 'react'; -import { CHAIN_IDS } from '@metamask/transaction-controller'; -import { Provider } from 'react-redux'; import testData from '../../../../../.storybook/test-data'; -import configureStore from '../../../../store/store'; -import { mockNetworkState } from '../../../../../test/stub/networks'; import README from './README.mdx'; import SignatureRequestSIWE from './signature-request-siwe'; -const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET; - -const TRANSACTION_DATA_MOCK = { - chainId: CHAIN_ID_MOCK, -}; - const { internalAccounts: { accounts, selectedAccount }, } = testData.metamask; - const otherAccount = Object.values(accounts)[1]; const { address: selectedAddress } = accounts[selectedAccount]; -const store = configureStore({ - ...testData, - metamask: { - ...testData.metamask, - ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), - }, -}); - export default { title: 'Confirmations/Components/SignatureRequestSIWE', - decorators: [(story) => {story()}], + component: SignatureRequestSIWE, parameters: { docs: { @@ -153,7 +134,6 @@ DefaultStory.storyName = 'Default'; DefaultStory.args = { txData: { - ...TRANSACTION_DATA_MOCK, msgParams, }, }; @@ -164,7 +144,6 @@ export const BadDomainStory = (args) => { BadDomainStory.args = { txData: { - ...TRANSACTION_DATA_MOCK, msgParams: badDomainParams, }, }; @@ -175,7 +154,6 @@ export const BadAddressStory = (args) => { BadAddressStory.args = { txData: { - ...TRANSACTION_DATA_MOCK, msgParams: badAddressParams, }, }; @@ -186,7 +164,6 @@ export const BadDomainAndAddressStory = (args) => { BadDomainAndAddressStory.args = { txData: { - ...TRANSACTION_DATA_MOCK, msgParams: badDomainAndAddressParams, }, }; diff --git a/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.test.js b/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.test.js index f8f1a67b8cbc..c97be33e45b0 100644 --- a/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.test.js +++ b/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.test.js @@ -2,16 +2,14 @@ import React from 'react'; import { cloneDeep } from 'lodash'; import { fireEvent } from '@testing-library/react'; import { ApprovalType } from '@metamask/controller-utils'; -import { CHAIN_IDS } from '@metamask/transaction-controller'; import mockState from '../../../../../test/data/mock-state.json'; import { renderWithProvider } from '../../../../../test/lib/render-helpers'; import configureStore from '../../../../store/store'; -import { mockNetworkState } from '../../../../../test/stub/networks'; +import { getCurrentChainId } from '../../../../selectors'; import SignatureRequestSIWE from '.'; const MOCK_ORIGIN = 'https://example-dapp.website'; const MOCK_ADDRESS = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'; -const CHAIN_ID_MOCK = CHAIN_IDS.GOERLI; const mockStoreInitialState = { metamask: { @@ -22,7 +20,6 @@ const mockStoreInitialState = { name: 'Example Test Dapp', }, }, - ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), }, }; @@ -40,7 +37,6 @@ const mockProps = { cancelPersonalMessage: jest.fn(), signPersonalMessage: jest.fn(), txData: { - chainId: CHAIN_ID_MOCK, msgParams: { from: MOCK_ADDRESS, data: '0x6c6f63616c686f73743a383038302077616e747320796f7520746f207369676e20696e207769746820796f757220457468657265756d206163636f756e743a0a3078466232433135303034333433393034653566343038323537386334653865313131303563463765330a0a436c69636b20746f207369676e20696e20616e642061636365707420746865205465726d73206f6620536572766963653a2068747470733a2f2f636f6d6d756e6974792e6d6574616d61736b2e696f2f746f730a0a5552493a20687474703a2f2f6c6f63616c686f73743a383038300a56657273696f6e3a20310a436861696e2049443a20310a4e6f6e63653a2053544d74364b514d7777644f58453330360a4973737565642041743a20323032322d30332d31385432313a34303a34302e3832335a0a5265736f75726365733a0a2d20697066733a2f2f516d653773733341525667787636725871565069696b4d4a3875324e4c676d67737a673133705972444b456f69750a2d2068747470733a2f2f6578616d706c652e636f6d2f6d792d776562322d636c61696d2e6a736f6e', @@ -187,7 +183,7 @@ describe('SignatureRequestSIWE (Sign in with Ethereum)', () => { transactions: [ ...mockStoreInitialState.metamask.transactions, { - chainId: CHAIN_ID_MOCK, + chainId: getCurrentChainId(mockStoreInitialState), status: 'unapproved', }, ], diff --git a/ui/pages/confirmations/components/signature-request/__snapshots__/signature-request.test.js.snap b/ui/pages/confirmations/components/signature-request/__snapshots__/signature-request.test.js.snap index 943f8699b9aa..ba272fc26d89 100644 --- a/ui/pages/confirmations/components/signature-request/__snapshots__/signature-request.test.js.snap +++ b/ui/pages/confirmations/components/signature-request/__snapshots__/signature-request.test.js.snap @@ -177,6 +177,26 @@ exports[`Signature Request Component render should match snapshot when we are us
+
+ +
+

+ To view and confirm your most recent request, you'll need to approve or reject existing requests first. +

+

+

+
@@ -942,6 +962,7 @@ exports[`Signature Request Component render should match snapshot when we want t > 0 + ETH
@@ -949,6 +970,26 @@ exports[`Signature Request Component render should match snapshot when we want t
+
+ +
+

+ To view and confirm your most recent request, you'll need to approve or reject existing requests first. +

+

+

+
diff --git a/ui/pages/confirmations/components/signature-request/signature-request.js b/ui/pages/confirmations/components/signature-request/signature-request.js index 2a7977da0c75..3cf2a54327c9 100644 --- a/ui/pages/confirmations/components/signature-request/signature-request.js +++ b/ui/pages/confirmations/components/signature-request/signature-request.js @@ -18,14 +18,16 @@ import { doesAddressRequireLedgerHidConnection, getSubjectMetadata, getTotalUnapprovedMessagesCount, - selectNetworkConfigurationByChainId, ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) accountsWithSendEtherInfoSelector, getSelectedAccount, getAccountType, ///: END:ONLY_INCLUDE_IF } from '../../../../selectors'; -import { isAddressLedger } from '../../../../ducks/metamask/metamask'; +import { + getProviderConfig, + isAddressLedger, +} from '../../../../ducks/metamask/metamask'; import { sanitizeMessage, ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) @@ -95,7 +97,6 @@ const SignatureRequest = ({ txData, warnings }) => { const { id, type, - chainId, msgParams: { from, data, origin, version }, } = txData; @@ -103,12 +104,7 @@ const SignatureRequest = ({ txData, warnings }) => { const hardwareWalletRequiresConnection = useSelector((state) => doesAddressRequireLedgerHidConnection(state, from), ); - - const { blockExplorerUrls } = useSelector((state) => - selectNetworkConfigurationByChainId(state, chainId), - ); - - const blockExplorerUrl = blockExplorerUrls?.[0]; + const { chainId, rpcPrefs } = useSelector(getProviderConfig); const unapprovedMessagesCount = useSelector(getTotalUnapprovedMessagesCount); const subjectMetadata = useSelector(getSubjectMetadata); const isLedgerWallet = useSelector((state) => isAddressLedger(state, from)); @@ -341,7 +337,7 @@ const SignatureRequest = ({ txData, warnings }) => { setShowContractDetails(false)} isContractRequestingSignature /> diff --git a/ui/pages/confirmations/components/signature-request/signature-request.stories.js b/ui/pages/confirmations/components/signature-request/signature-request.stories.js index cc5374e2becb..b31032f8b1a7 100644 --- a/ui/pages/confirmations/components/signature-request/signature-request.stories.js +++ b/ui/pages/confirmations/components/signature-request/signature-request.stories.js @@ -1,25 +1,21 @@ import React from 'react'; import { Provider } from 'react-redux'; -import { CHAIN_IDS } from '@metamask/transaction-controller'; import configureStore from '../../../../store/store'; import testData from '../../../../../.storybook/test-data'; -import { mockNetworkState } from '../../../../../test/stub/networks'; import README from './README.mdx'; import SignatureRequest from './signature-request'; -const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET; - const store = configureStore({ ...testData, metamask: { ...testData.metamask, - ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), }, }); export default { title: 'Confirmations/Components/SignatureRequest', decorators: [(story) => {story()}], + component: SignatureRequest, parameters: { docs: { @@ -39,7 +35,6 @@ DefaultStory.storyName = 'Default'; DefaultStory.args = { txData: { - chainId: CHAIN_ID_MOCK, msgParams: { from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e', data: JSON.stringify({ @@ -87,7 +82,6 @@ AccountMismatchStory.storyName = 'AccountMismatch'; AccountMismatchStory.args = { ...DefaultStory.args, txData: { - chainId: CHAIN_ID_MOCK, msgParams: { ...DefaultStory.args.txData.msgParams, from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4', diff --git a/ui/pages/confirmations/components/signature-request/signature-request.test.js b/ui/pages/confirmations/components/signature-request/signature-request.test.js index 2e10381c40cb..9851cdbef454 100644 --- a/ui/pages/confirmations/components/signature-request/signature-request.test.js +++ b/ui/pages/confirmations/components/signature-request/signature-request.test.js @@ -1,25 +1,35 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import { fireEvent } from '@testing-library/react'; import configureMockStore from 'redux-mock-store'; import { EthAccountType } from '@metamask/keyring-api'; import mockState from '../../../../../test/data/mock-state.json'; import { renderWithProvider } from '../../../../../test/lib/render-helpers'; import { SECURITY_PROVIDER_MESSAGE_SEVERITY } from '../../../../../shared/constants/security-provider'; +import { + getNativeCurrency, + getProviderConfig, +} from '../../../../ducks/metamask/metamask'; +import { + accountsWithSendEtherInfoSelector, + conversionRateSelector, + getCurrentCurrency, + getMemoizedAddressBook, + getPreferences, + getSelectedAccount, + getTotalUnapprovedMessagesCount, + getInternalAccounts, + unconfirmedTransactionsHashSelector, + getAccountType, + getMemoizedMetaMaskInternalAccounts, + getSelectedInternalAccount, + pendingApprovalsSortedSelector, + getNetworkConfigurationsByChainId, +} from '../../../../selectors'; import { ETH_EOA_METHODS } from '../../../../../shared/constants/eth-methods'; import { mockNetworkState } from '../../../../../test/stub/networks'; import SignatureRequest from './signature-request'; -jest.mock('react-redux', () => ({ - ...jest.requireActual('react-redux'), - useDispatch: () => jest.fn(), -})); - -const CHAIN_ID_MOCK = '0x539'; - -const TRANSACTION_DATA_MOCK = { - chainId: CHAIN_ID_MOCK, -}; - const baseProps = { clearConfirmTransaction: () => jest.fn(), cancel: () => jest.fn(), @@ -27,11 +37,8 @@ const baseProps = { showRejectTransactionsConfirmationModal: () => jest.fn(), sign: () => jest.fn(), }; - const mockStore = { - ...mockState, metamask: { - ...mockState.metamask, ...mockNetworkState({ chainId: '0x539', nickname: 'Localhost 8545', @@ -54,13 +61,12 @@ const mockStore = { metadata: { name: 'John Doe', keyring: { - type: 'Custody', + type: 'HD Key Tree', }, }, options: {}, methods: ETH_EOA_METHODS, type: EthAccountType.Eoa, - balance: 0, }, }, selectedAccount: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3', @@ -88,6 +94,15 @@ const mockStore = { }, }, }; +jest.mock('react-redux', () => { + const actual = jest.requireActual('react-redux'); + + return { + ...actual, + useSelector: jest.fn(), + useDispatch: () => jest.fn(), + }; +}); const mockCustodySignFn = jest.fn(); @@ -99,13 +114,62 @@ jest.mock('../../../../hooks/useMMICustodySignMessage', () => ({ jest.mock('@metamask-institutional/extension'); +const generateUseSelectorRouter = (opts) => (selector) => { + const mockSelectedInternalAccount = getSelectedInternalAccount(opts); + + switch (selector) { + case getProviderConfig: + return getProviderConfig(opts); + case getCurrentCurrency: + return opts.metamask.currentCurrency; + case getNativeCurrency: + return getProviderConfig(opts).ticker; + case getTotalUnapprovedMessagesCount: + return opts.metamask.unapprovedTypedMessagesCount; + case getPreferences: + return opts.metamask.preferences; + case conversionRateSelector: + return opts.metamask.currencyRates[getProviderConfig(opts).ticker] + ?.conversionRate; + case getSelectedAccount: + return mockSelectedInternalAccount; + case getInternalAccounts: + return Object.values(opts.metamask.internalAccounts.accounts); + case getMemoizedMetaMaskInternalAccounts: + return Object.values(opts.metamask.internalAccounts.accounts); + case getMemoizedAddressBook: + return []; + case accountsWithSendEtherInfoSelector: + return Object.values(opts.metamask.internalAccounts.accounts).map( + (internalAccount) => { + return { + ...internalAccount, + ...(opts.metamask.accounts[internalAccount.address] ?? {}), + balance: + opts.metamask.accounts[internalAccount.address]?.balance ?? 0, + }; + }, + ); + case getAccountType: + return 'custody'; + case unconfirmedTransactionsHashSelector: + return {}; + case pendingApprovalsSortedSelector: + return Object.values(opts.metamask.pendingApprovals); + case getNetworkConfigurationsByChainId: + return opts.metamask.networkConfigurationsByChainId; + default: + return undefined; + } +}; describe('Signature Request Component', () => { - const store = configureMockStore()(mockStore); + const store = configureMockStore()(mockState); describe('render', () => { let messageData; beforeEach(() => { + useSelector.mockImplementation(generateUseSelectorRouter(mockStore)); messageData = { domain: { chainId: 97, @@ -155,39 +219,35 @@ describe('Signature Request Component', () => { }); it('should match snapshot when we want to switch to fiat', () => { - const storeOverride = configureMockStore()({ - ...mockStore, - metamask: { - ...mockStore.metamask, - ...mockNetworkState({ - chainId: CHAIN_ID_MOCK, - }), - currencyRates: { - ...mockStore.metamask.currencyRates, - ETH: { - ...(mockStore.metamask.currencyRates.ETH || {}), - conversionRate: 231.06, + useSelector.mockImplementation( + generateUseSelectorRouter({ + ...mockStore, + metamask: { + ...mockStore.metamask, + currencyRates: { + ...mockStore.metamask.currencyRates, + ETH: { + ...(mockStore.metamask.currencyRates.ETH || {}), + conversionRate: 231.06, + }, }, }, - }, - }); - + }), + ); const msgParams = { from: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5', data: JSON.stringify(messageData), version: 'V4', origin: 'test', }; - const { container } = renderWithProvider( , - storeOverride, + store, ); expect(container).toMatchSnapshot(); @@ -200,12 +260,10 @@ describe('Signature Request Component', () => { version: 'V4', origin: 'test', }; - const { container } = renderWithProvider( , @@ -222,12 +280,10 @@ describe('Signature Request Component', () => { version: 'V4', origin: 'test', }; - const { queryByTestId } = renderWithProvider( , @@ -252,7 +308,6 @@ describe('Signature Request Component', () => { , @@ -266,30 +321,29 @@ describe('Signature Request Component', () => { }); it('should not render a reject multiple requests link if there is not multiple requests', () => { - const storeOverride = configureMockStore()({ - ...mockStore, - metamask: { - ...mockStore.metamask, - unapprovedTypedMessagesCount: 0, - }, - }); - + useSelector.mockImplementation( + generateUseSelectorRouter({ + ...mockStore, + metamask: { + ...mockStore.metamask, + unapprovedTypedMessagesCount: 0, + }, + }), + ); const msgParams = { from: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5', data: JSON.stringify(messageData), version: 'V4', origin: 'test', }; - const { container } = renderWithProvider( , - storeOverride, + store, ); expect( @@ -304,12 +358,10 @@ describe('Signature Request Component', () => { version: 'V4', origin: 'test', }; - const { container } = renderWithProvider( , @@ -332,7 +384,6 @@ describe('Signature Request Component', () => { , @@ -357,7 +408,6 @@ describe('Signature Request Component', () => { , @@ -379,7 +429,6 @@ describe('Signature Request Component', () => { { { }); it('should render a warning when the selected account is not the one being used to sign', () => { - const storeOverride = configureMockStore()({ - ...mockStore, - metamask: { - ...mockStore.metamask, - accounts: { - ...mockStore.metamask.accounts, - '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': { - address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', - balance: '0x0', - name: 'Account 1', - }, - '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5': { - address: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5', - balance: '0x0', - name: 'Account 2', - }, - }, - internalAccounts: { + const msgParams = { + from: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5', + data: JSON.stringify(messageData), + version: 'V4', + origin: 'test', + }; + + useSelector.mockImplementation( + generateUseSelectorRouter({ + ...mockStore, + metamask: { + ...mockStore.metamask, accounts: { - 'b7e813d6-e31c-4bad-8615-8d4eff9f44f1': { + ...mockStore.metamask.accounts, + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': { address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', - id: 'b7e813d6-e31c-4bad-8615-8d4eff9f44f1', - metadata: { - name: 'Account 1', - keyring: { - type: 'HD Key Tree', - }, - }, - options: {}, - methods: ETH_EOA_METHODS, - type: EthAccountType.Eoa, + balance: '0x0', + name: 'Account 1', }, - 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': { + '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5': { address: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5', - id: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3', - metadata: { - name: 'Account 2', - keyring: { - type: 'HD Key Tree', + balance: '0x0', + name: 'Account 2', + }, + }, + internalAccounts: { + accounts: { + 'b7e813d6-e31c-4bad-8615-8d4eff9f44f1': { + address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + id: 'b7e813d6-e31c-4bad-8615-8d4eff9f44f1', + metadata: { + name: 'Account 1', + keyring: { + type: 'HD Key Tree', + }, }, + options: {}, + methods: ETH_EOA_METHODS, + type: EthAccountType.Eoa, + }, + 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': { + address: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5', + id: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3', + metadata: { + name: 'Account 2', + keyring: { + type: 'HD Key Tree', + }, + }, + options: {}, + methods: ETH_EOA_METHODS, + type: EthAccountType.Eoa, }, - options: {}, - methods: ETH_EOA_METHODS, - type: EthAccountType.Eoa, }, + selectedAccount: 'b7e813d6-e31c-4bad-8615-8d4eff9f44f1', }, - selectedAccount: 'b7e813d6-e31c-4bad-8615-8d4eff9f44f1', }, - }, - }); - - const msgParams = { - from: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5', - data: JSON.stringify(messageData), - version: 'V4', - origin: 'test', - }; + }), + ); const { container } = renderWithProvider( , - storeOverride, + store, ); expect( @@ -522,7 +571,6 @@ describe('Signature Request Component', () => { {...baseProps} conversionRate={null} txData={{ - ...TRANSACTION_DATA_MOCK, msgParams, securityAlertResponse: { resultType: 'Malicious', @@ -554,7 +602,6 @@ describe('Signature Request Component', () => { , @@ -563,9 +610,7 @@ describe('Signature Request Component', () => { const rejectRequestsLink = getByTestId('page-container-footer-next'); fireEvent.click(rejectRequestsLink); - expect(mockCustodySignFn).toHaveBeenCalledWith( - expect.objectContaining({ msgParams }), - ); + expect(mockCustodySignFn).toHaveBeenCalledWith({ msgParams }); }); }); }); diff --git a/ui/pages/confirmations/components/simulation-details/amount-pill.test.tsx b/ui/pages/confirmations/components/simulation-details/amount-pill.test.tsx index d08f9d7d1c52..044eca8d887c 100644 --- a/ui/pages/confirmations/components/simulation-details/amount-pill.test.tsx +++ b/ui/pages/confirmations/components/simulation-details/amount-pill.test.tsx @@ -6,7 +6,7 @@ import Tooltip from '../../../../components/ui/tooltip'; import { AmountPill } from './amount-pill'; import { AssetIdentifier, - NativeAssetIdentifier, + NATIVE_ASSET_IDENTIFIER, TokenAssetIdentifier, } from './types'; @@ -24,28 +24,17 @@ jest.mock('../../../../components/ui/tooltip', () => ({ })); const TOKEN_ID_MOCK = '0xabc'; -const CHAIN_ID_MOCK = '0x1'; - -const NATIVE_ASSET_MOCK: NativeAssetIdentifier = { - chainId: CHAIN_ID_MOCK, - standard: TokenStandard.none, -}; const ERC20_ASSET_MOCK: TokenAssetIdentifier = { - chainId: CHAIN_ID_MOCK, standard: TokenStandard.ERC20, address: '0x456', }; - const ERC721_ASSET_MOCK: TokenAssetIdentifier = { - chainId: CHAIN_ID_MOCK, standard: TokenStandard.ERC721, address: '0x123', tokenId: TOKEN_ID_MOCK, }; - const ERC1155_ASSET_MOCK: TokenAssetIdentifier = { - chainId: CHAIN_ID_MOCK, standard: TokenStandard.ERC1155, address: '0x789', tokenId: TOKEN_ID_MOCK, @@ -125,7 +114,7 @@ describe('AmountPill', () => { amount: BigNumber; expected: { text: string; tooltip: string }; }) => { - renderAndExpect(NATIVE_ASSET_MOCK, amount, expected); + renderAndExpect(NATIVE_ASSET_IDENTIFIER, amount, expected); }, ); }); diff --git a/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx b/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx index 4b11adf0e17b..477119b02284 100644 --- a/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx +++ b/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx @@ -10,7 +10,7 @@ import { AvatarNetwork } from '../../../../components/component-library/avatar-n import { mockNetworkState } from '../../../../../test/stub/networks'; import mockState from '../../../../../test/data/mock-state.json'; import { AssetPill } from './asset-pill'; -import { NativeAssetIdentifier, TokenAssetIdentifier } from './types'; +import { NATIVE_ASSET_IDENTIFIER, TokenAssetIdentifier } from './types'; jest.mock('../../../../components/component-library/avatar-network', () => ({ AvatarNetworkSize: { Sm: 'Sm' }, @@ -22,8 +22,6 @@ jest.mock('../../../../components/app/name', () => ({ default: jest.fn(() => null), })); -const CHAIN_ID_MOCK = '0x1'; - describe('AssetPill', () => { beforeEach(() => { jest.clearAllMocks(); @@ -63,12 +61,10 @@ describe('AssetPill', () => { }, }); - const asset: NativeAssetIdentifier = { - chainId, - standard: TokenStandard.none, - }; - - renderWithProvider(, store); + renderWithProvider( + , + store, + ); expect(screen.getByText(expected.ticker)).toBeInTheDocument(); @@ -85,7 +81,6 @@ describe('AssetPill', () => { it('renders Name component with correct props when asset standard is not none', () => { const asset: TokenAssetIdentifier = { - chainId: CHAIN_ID_MOCK, standard: TokenStandard.ERC20, address: '0x1234567890123456789012345678901234567890', }; diff --git a/ui/pages/confirmations/components/simulation-details/asset-pill.tsx b/ui/pages/confirmations/components/simulation-details/asset-pill.tsx index 99bd2b3af8ef..1545c86e452c 100644 --- a/ui/pages/confirmations/components/simulation-details/asset-pill.tsx +++ b/ui/pages/confirmations/components/simulation-details/asset-pill.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { NameType } from '@metamask/name-controller'; import { useSelector } from 'react-redux'; -import { Hex } from '@metamask/utils'; import { AvatarNetwork, AvatarNetworkSize, @@ -19,20 +18,16 @@ import { } from '../../../../helpers/constants/design-system'; import Name from '../../../../components/app/name'; import { TokenStandard } from '../../../../../shared/constants/transaction'; -import { getNetworkConfigurationsByChainId } from '../../../../selectors'; -import { CHAIN_ID_TOKEN_IMAGE_MAP } from '../../../../../shared/constants/network'; +import { + getCurrentChainId, + getNativeCurrencyImage, +} from '../../../../selectors'; +import { getNativeCurrency } from '../../../../ducks/metamask/metamask'; import { AssetIdentifier } from './types'; -const NativeAssetPill: React.FC<{ chainId: Hex }> = ({ chainId }) => { - const imgSrc = - CHAIN_ID_TOKEN_IMAGE_MAP[chainId as keyof typeof CHAIN_ID_TOKEN_IMAGE_MAP]; - - const networkConfigurationsByChainId = useSelector( - getNetworkConfigurationsByChainId, - ); - - const network = networkConfigurationsByChainId?.[chainId]; - const { nativeCurrency } = network; +const NativeAssetPill: React.FC = () => { + const ticker = useSelector(getNativeCurrency); + const imgSrc = useSelector(getNativeCurrencyImage); return ( = ({ chainId }) => { }} > - {nativeCurrency} + {ticker} ); @@ -65,10 +60,9 @@ const NativeAssetPill: React.FC<{ chainId: Hex }> = ({ chainId }) => { * @param props * @param props.asset */ -export const AssetPill: React.FC<{ - asset: AssetIdentifier; -}> = ({ asset }) => { - const { chainId } = asset; +export const AssetPill: React.FC<{ asset: AssetIdentifier }> = ({ asset }) => { + // TODO: Temporary pending multi-chain support in simulations; + const chainId = useSelector(getCurrentChainId); return ( {asset.standard === TokenStandard.none ? ( - + ) : ( { describe('IndividualFiatDisplay', () => { // @ts-expect-error This is missing from the Mocha type definitions it.each([ + [FIAT_UNAVAILABLE, 'Not Available'], [100, '$100'], [-100, '$100'], ])( @@ -83,6 +84,8 @@ describe('FiatDisplay', () => { describe('TotalFiatDisplay', () => { // @ts-expect-error This is missing from the Mocha type definitions it.each([ + [[FIAT_UNAVAILABLE, FIAT_UNAVAILABLE], 'Not Available'], + [[], 'Not Available'], [[100, 200, FIAT_UNAVAILABLE, 300], 'Total = $600'], [[-100, -200, FIAT_UNAVAILABLE, -300], 'Total = $600'], ])( diff --git a/ui/pages/confirmations/components/simulation-details/fiat-display.tsx b/ui/pages/confirmations/components/simulation-details/fiat-display.tsx index d7ec958f2a5b..ac3fcebcc159 100644 --- a/ui/pages/confirmations/components/simulation-details/fiat-display.tsx +++ b/ui/pages/confirmations/components/simulation-details/fiat-display.tsx @@ -50,7 +50,7 @@ export const IndividualFiatDisplay: React.FC<{ } if (fiatAmount === FIAT_UNAVAILABLE) { - return null; + return ; } const absFiat = Math.abs(fiatAmount); const fiatDisplayValue = fiatFormatter(absFiat, { shorten }); diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx index 0d1d5cd6c6d5..7c4fdc6e0d22 100644 --- a/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx +++ b/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx @@ -8,7 +8,6 @@ import { Hex } from '@metamask/utils'; import { SimulationErrorCode, SimulationTokenStandard, - TransactionMeta, } from '@metamask/transaction-controller'; import { NameType } from '@metamask/name-controller'; import { CHAIN_IDS } from '../../../../../shared/constants/network'; @@ -19,7 +18,7 @@ const DUMMY_BALANCE_CHANGE = { newBalance: '0xIGNORED' as Hex, }; -const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET; +const CHAIN_ID_MOCK = '0x1'; const ERC20_TOKEN_1_MOCK = '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599'; // WBTC const ERC20_TOKEN_2_MOCK = '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'; // USDC const ERC721_TOKEN_MOCK = '0x06012c8cf97bead5deae237070f9587f8e7a266d'; // CryptoKitties @@ -28,44 +27,36 @@ const ERC1155_TOKEN_MOCK = '0x60e4d786628fea6478f785a6d7e704777c86a7c6'; // MAYC const storeMock = configureStore({ metamask: { ...mockState.metamask, - ...mockNetworkState( - { chainId: CHAIN_IDS.MAINNET }, - { chainId: CHAIN_IDS.POLYGON }, - { chainId: CHAIN_IDS.ARBITRUM }, - ), preferences: { ...mockState.metamask.preferences, showNativeTokenAsMainBalance: false, }, + ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), useTokenDetection: true, - tokensChainsCache: { - [CHAIN_ID_MOCK]: { - data: { - [ERC20_TOKEN_1_MOCK]: { - address: ERC20_TOKEN_1_MOCK, - symbol: 'WBTC', - name: 'Wrapped Bitcoin', - iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC20_TOKEN_1_MOCK}.png`, - }, - [ERC20_TOKEN_2_MOCK]: { - address: ERC20_TOKEN_2_MOCK, - symbol: 'USDC', - name: 'USD Coin', - iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC20_TOKEN_2_MOCK}.png`, - }, - [ERC721_TOKEN_MOCK]: { - address: ERC721_TOKEN_MOCK, - symbol: 'CK', - name: 'CryptoKitties', - iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC721_TOKEN_MOCK}.png`, - }, - [ERC1155_TOKEN_MOCK]: { - address: ERC1155_TOKEN_MOCK, - symbol: 'MAYC', - name: 'Mutant Ape Yacht Club', - iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC1155_TOKEN_MOCK}.png `, - }, - }, + tokenList: { + [ERC20_TOKEN_1_MOCK]: { + address: ERC20_TOKEN_1_MOCK, + symbol: 'WBTC', + name: 'Wrapped Bitcoin', + iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC20_TOKEN_1_MOCK}.png`, + }, + [ERC20_TOKEN_2_MOCK]: { + address: ERC20_TOKEN_2_MOCK, + symbol: 'USDC', + name: 'USD Coin', + iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC20_TOKEN_2_MOCK}.png`, + }, + [ERC721_TOKEN_MOCK]: { + address: ERC721_TOKEN_MOCK, + symbol: 'CK', + name: 'CryptoKitties', + iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC721_TOKEN_MOCK}.png`, + }, + [ERC1155_TOKEN_MOCK]: { + address: ERC1155_TOKEN_MOCK, + symbol: 'MAYC', + name: 'Mutant Ape Yacht Club', + iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC1155_TOKEN_MOCK}.png `, }, }, names: { @@ -80,11 +71,19 @@ const storeMock = configureStore({ }, }); -function createTransactionMeta( - metadata: Partial, -): TransactionMeta { - return metadata as TransactionMeta; -} +const storeMockPolygon = configureStore({ + metamask: { + ...mockState.metamask, + ...mockNetworkState({ chainId: CHAIN_IDS.POLYGON }), + }, +}); + +const storeMockArbitrum = configureStore({ + metamask: { + ...mockState.metamask, + ...mockNetworkState({ chainId: CHAIN_IDS.ARBITRUM }), + }, +}); const meta: Meta = { title: 'Components/App/SimulationDetails', @@ -97,207 +96,180 @@ type Story = StoryObj; export const MultipleTokens: Story = { args: { - transaction: createTransactionMeta({ - chainId: CHAIN_ID_MOCK, - simulationData: { - nativeBalanceChange: { + simulationData: { + nativeBalanceChange: { + ...DUMMY_BALANCE_CHANGE, + difference: '0x12345678912345678', + isDecrease: true, + }, + tokenBalanceChanges: [ + { ...DUMMY_BALANCE_CHANGE, - difference: '0x12345678912345678', - isDecrease: true, + address: ERC20_TOKEN_1_MOCK, + difference: '0x123456', + isDecrease: false, + standard: SimulationTokenStandard.erc20, }, - tokenBalanceChanges: [ - { - ...DUMMY_BALANCE_CHANGE, - address: ERC20_TOKEN_1_MOCK, - difference: '0x123456', - isDecrease: false, - standard: SimulationTokenStandard.erc20, - }, - { - ...DUMMY_BALANCE_CHANGE, - address: ERC20_TOKEN_2_MOCK, - difference: '0x123456901', - isDecrease: false, - standard: SimulationTokenStandard.erc20, - }, - { - ...DUMMY_BALANCE_CHANGE, - address: ERC721_TOKEN_MOCK, - difference: '0x1', - isDecrease: false, - id: '0x721', - standard: SimulationTokenStandard.erc721, - }, - { - ...DUMMY_BALANCE_CHANGE, - address: ERC1155_TOKEN_MOCK, - difference: '0x13', - isDecrease: false, - id: '0x1155', - standard: SimulationTokenStandard.erc1155, - }, - ], - }, - }), + { + ...DUMMY_BALANCE_CHANGE, + address: ERC20_TOKEN_2_MOCK, + difference: '0x123456901', + isDecrease: false, + standard: SimulationTokenStandard.erc20, + }, + { + ...DUMMY_BALANCE_CHANGE, + address: ERC721_TOKEN_MOCK, + difference: '0x1', + isDecrease: false, + id: '0x721', + standard: SimulationTokenStandard.erc721, + }, + { + ...DUMMY_BALANCE_CHANGE, + address: ERC1155_TOKEN_MOCK, + difference: '0x13', + isDecrease: false, + id: '0x1155', + standard: SimulationTokenStandard.erc1155, + }, + ], + }, }, }; export const SendSmallAmount: Story = { args: { - transaction: createTransactionMeta({ - chainId: CHAIN_ID_MOCK, - simulationData: { - nativeBalanceChange: { - ...DUMMY_BALANCE_CHANGE, - difference: '0x123', - isDecrease: true, - }, - tokenBalanceChanges: [], + simulationData: { + nativeBalanceChange: { + ...DUMMY_BALANCE_CHANGE, + difference: '0x123', + isDecrease: true, }, - }), + tokenBalanceChanges: [], + }, }, }; export const LongValuesAndNames: Story = { args: { - transaction: createTransactionMeta({ - chainId: CHAIN_ID_MOCK, - simulationData: { - nativeBalanceChange: { + simulationData: { + nativeBalanceChange: { + ...DUMMY_BALANCE_CHANGE, + difference: '0x12345678912345678', + isDecrease: true, + }, + tokenBalanceChanges: [ + { ...DUMMY_BALANCE_CHANGE, - difference: '0x12345678912345678', - isDecrease: true, + address: ERC20_TOKEN_1_MOCK, + difference: '0x42345909', + isDecrease: false, + standard: SimulationTokenStandard.erc20, }, - tokenBalanceChanges: [ - { - ...DUMMY_BALANCE_CHANGE, - address: ERC20_TOKEN_1_MOCK, - difference: '0x42345909', - isDecrease: false, - standard: SimulationTokenStandard.erc20, - }, - { - ...DUMMY_BALANCE_CHANGE, - address: ERC20_TOKEN_2_MOCK, - difference: '0x123456901', - isDecrease: false, - standard: SimulationTokenStandard.erc20, - }, - ], - }, - }), + { + ...DUMMY_BALANCE_CHANGE, + address: ERC20_TOKEN_2_MOCK, + difference: '0x123456901', + isDecrease: false, + standard: SimulationTokenStandard.erc20, + }, + ], + }, }, }; export const PolygonNativeAsset: Story = { args: { - transaction: createTransactionMeta({ - chainId: CHAIN_IDS.POLYGON, - simulationData: { - nativeBalanceChange: { - ...DUMMY_BALANCE_CHANGE, - difference: '0x9345678923456789', - isDecrease: true, - }, - tokenBalanceChanges: [], + simulationData: { + nativeBalanceChange: { + ...DUMMY_BALANCE_CHANGE, + difference: '0x9345678923456789', + isDecrease: true, }, - }), + tokenBalanceChanges: [], + }, }, + decorators: [ + (story) => {story()}, + ], }; export const ArbitrumNativeAsset: Story = { args: { - transaction: createTransactionMeta({ - chainId: CHAIN_IDS.ARBITRUM, - simulationData: { - nativeBalanceChange: { - ...DUMMY_BALANCE_CHANGE, - difference: '0x9345678923456789', - isDecrease: true, - }, - tokenBalanceChanges: [], + simulationData: { + nativeBalanceChange: { + ...DUMMY_BALANCE_CHANGE, + difference: '0x9345678923456789', + isDecrease: true, }, - }), + tokenBalanceChanges: [], + }, }, + decorators: [ + (story) => {story()}, + ], }; export const ReceiveOnly: Story = { args: { - transaction: createTransactionMeta({ - chainId: CHAIN_ID_MOCK, - simulationData: { - nativeBalanceChange: { - previousBalance: '0x2', - newBalance: '0x1', - difference: '0x12345678912345678', - isDecrease: false, - }, - tokenBalanceChanges: [], + simulationData: { + nativeBalanceChange: { + previousBalance: '0x2', + newBalance: '0x1', + difference: '0x12345678912345678', + isDecrease: false, }, - }), + tokenBalanceChanges: [], + }, }, }; export const SendOnly: Story = { args: { - transaction: createTransactionMeta({ - chainId: CHAIN_ID_MOCK, - simulationData: { - nativeBalanceChange: { - previousBalance: '0x1', - newBalance: '0x2', - difference: '0x12345678912345678', - isDecrease: true, - }, - tokenBalanceChanges: [], + simulationData: { + nativeBalanceChange: { + previousBalance: '0x1', + newBalance: '0x2', + difference: '0x12345678912345678', + isDecrease: true, }, - }), + tokenBalanceChanges: [], + }, }, }; export const NoBalanceChanges: Story = { args: { - transaction: createTransactionMeta({ - chainId: CHAIN_ID_MOCK, - simulationData: { - nativeBalanceChange: undefined, - tokenBalanceChanges: [], - }, - }), + simulationData: { + nativeBalanceChange: undefined, + tokenBalanceChanges: [], + }, }, }; export const Loading: Story = { args: { - transaction: createTransactionMeta({ - chainId: CHAIN_ID_MOCK, - simulationData: undefined, - }), + simulationData: undefined, }, }; export const TransactionReverted: Story = { args: { - transaction: createTransactionMeta({ - chainId: CHAIN_ID_MOCK, - simulationData: { - error: { code: SimulationErrorCode.Reverted }, - nativeBalanceChange: undefined, - tokenBalanceChanges: [], - }, - }), + simulationData: { + error: { code: SimulationErrorCode.Reverted }, + nativeBalanceChange: undefined, + tokenBalanceChanges: [], + }, }, }; export const GenericError: Story = { args: { - transaction: createTransactionMeta({ - chainId: CHAIN_ID_MOCK, - simulationData: { - error: {}, - nativeBalanceChange: undefined, - tokenBalanceChanges: [], - }, - }), + simulationData: { + error: {}, + nativeBalanceChange: undefined, + tokenBalanceChanges: [], + }, }, }; diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx index 9294f7d1b5b5..5971e513e3a1 100644 --- a/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx +++ b/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx @@ -4,7 +4,6 @@ import { screen } from '@testing-library/react'; import { SimulationData, SimulationErrorCode, - TransactionMeta, } from '@metamask/transaction-controller'; import { BigNumber } from 'bignumber.js'; import { renderWithProvider } from '../../../../../test/lib/render-helpers'; @@ -26,27 +25,11 @@ jest.mock('./balance-change-list', () => ({ jest.mock('./useSimulationMetrics'); -jest.mock( - '../../../../components/app/confirm/info/row/alert-row/alert-row', - () => ({ - ConfirmInfoAlertRow: jest.fn(({ label }) => <>{label}), - }), -); - -jest.mock('../../context/confirm', () => ({ - useConfirmContext: jest.fn(() => ({ - currentConfirmation: { - id: 'testTransactionId', - }, - })), -})); - const renderSimulationDetails = (simulationData?: Partial) => renderWithProvider( , store, ); @@ -101,13 +84,17 @@ describe('SimulationDetails', () => { renderSimulationDetails({ error: { message: 'Unknown error' }, }); - expect(screen.getByText(/Unavailable/u)).toBeInTheDocument(); + expect( + screen.getByText(/error loading your estimation/u), + ).toBeInTheDocument(); }); it('renders empty content when there are no balance changes', () => { renderSimulationDetails({}); - expect(screen.getByText(/No changes/u)).toBeInTheDocument(); + expect( + screen.getByText(/No changes predicted for your wallet/u), + ).toBeInTheDocument(); }); it('passes the correct properties to BalanceChangeList components', () => { diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx index 57ee1f2ff3fb..79d5c2105a9c 100644 --- a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx +++ b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx @@ -1,7 +1,7 @@ import { + SimulationData, SimulationError, SimulationErrorCode, - TransactionMeta, } from '@metamask/transaction-controller'; import React from 'react'; import { @@ -25,16 +25,15 @@ import { TextVariant, } from '../../../../helpers/constants/design-system'; import { useI18nContext } from '../../../../hooks/useI18nContext'; -import { ConfirmInfoAlertRow } from '../../../../components/app/confirm/info/row/alert-row/alert-row'; -import { RowAlertKey } from '../../../../components/app/confirm/info/row/constants'; import { BalanceChangeList } from './balance-change-list'; import { useBalanceChanges } from './useBalanceChanges'; import { useSimulationMetrics } from './useSimulationMetrics'; export type SimulationDetailsProps = { + simulationData?: SimulationData; + transactionId: string; enableMetrics?: boolean; isTransactionsRedesign?: boolean; - transaction: TransactionMeta; }; /** @@ -62,23 +61,17 @@ const ErrorContent: React.FC<{ error: SimulationError }> = ({ error }) => { function getMessage() { return error.code === SimulationErrorCode.Reverted ? t('simulationDetailsTransactionReverted') - : t('simulationDetailsUnavailable'); + : t('simulationDetailsFailed'); } return ( - {error.code === SimulationErrorCode.Reverted && ( - - )} + {getMessage()} ); @@ -90,77 +83,20 @@ const ErrorContent: React.FC<{ error: SimulationError }> = ({ error }) => { const EmptyContent: React.FC = () => { const t = useI18nContext(); return ( - - {t('simulationDetailsNoChanges')} + + {t('simulationDetailsNoBalanceChanges')} ); }; -const HeaderWithAlert = ({ transactionId }: { transactionId: string }) => { - const t = useI18nContext(); - - return ( - - {/* Intentional fragment */} - <> - - ); -}; - -const LegacyHeader = () => { - const t = useI18nContext(); - return ( - - - {t('simulationDetailsTitle')} - - - - - - ); -}; - /** * Header at the top of the simulation preview. * * @param props * @param props.children - * @param props.isTransactionsRedesign - * @param props.transactionId */ -const HeaderLayout: React.FC<{ - isTransactionsRedesign: boolean; - transactionId: string; -}> = ({ children, isTransactionsRedesign, transactionId }) => { +const HeaderLayout: React.FC = ({ children }) => { + const t = useI18nContext(); return ( - {isTransactionsRedesign ? ( - - ) : ( - - )} + + + {t('simulationDetailsTitle')} + + + + + {children} ); @@ -185,13 +143,11 @@ const HeaderLayout: React.FC<{ * @param props.inHeader * @param props.isTransactionsRedesign * @param props.children - * @param props.transactionId */ const SimulationDetailsLayout: React.FC<{ inHeader?: React.ReactNode; isTransactionsRedesign: boolean; - transactionId: string; -}> = ({ inHeader, isTransactionsRedesign, transactionId, children }) => ( +}> = ({ inHeader, isTransactionsRedesign, children }) => ( - - {inHeader} - + {inHeader} {children} ); @@ -221,19 +172,20 @@ const SimulationDetailsLayout: React.FC<{ * Preview of a transaction's effects using simulation data. * * @param props - * @param props.transaction - Metadata of the transaction that was simulated. + * @param props.simulationData - The simulation data to display. + * @param props.transactionId - The ID of the transaction being simulated. * @param props.enableMetrics - Whether to enable simulation metrics. * @param props.isTransactionsRedesign - Whether or not the component is being * used inside the transaction redesign flow. */ export const SimulationDetails: React.FC = ({ - transaction, + simulationData, + transactionId, enableMetrics = false, isTransactionsRedesign = false, }: SimulationDetailsProps) => { const t = useI18nContext(); - const { chainId, id: transactionId, simulationData } = transaction; - const balanceChangesResult = useBalanceChanges({ chainId, simulationData }); + const balanceChangesResult = useBalanceChanges(simulationData); const loading = !simulationData || balanceChangesResult.pending; useSimulationMetrics({ @@ -249,7 +201,6 @@ export const SimulationDetails: React.FC = ({ } isTransactionsRedesign={isTransactionsRedesign} - transactionId={transactionId} > ); } @@ -266,19 +217,9 @@ export const SimulationDetails: React.FC = ({ } if (error) { - const inHeaderProp = error.code !== SimulationErrorCode.Reverted && { - inHeader: , - }; - return ( - - {error.code === SimulationErrorCode.Reverted && ( - - )} + + ); } @@ -287,21 +228,16 @@ export const SimulationDetails: React.FC = ({ const empty = balanceChanges.length === 0; if (empty) { return ( - } - /> + + + ); } const outgoing = balanceChanges.filter((bc) => bc.amount.isNegative()); const incoming = balanceChanges.filter((bc) => !bc.amount.isNegative()); return ( - + ; address: Hex; tokenId?: Hex; diff --git a/ui/pages/confirmations/components/simulation-details/useBalanceChanges.test.ts b/ui/pages/confirmations/components/simulation-details/useBalanceChanges.test.ts index 5f2e1dcbfd16..5dc0be870538 100644 --- a/ui/pages/confirmations/components/simulation-details/useBalanceChanges.test.ts +++ b/ui/pages/confirmations/components/simulation-details/useBalanceChanges.test.ts @@ -6,10 +6,10 @@ import { } from '@metamask/transaction-controller'; import { BigNumber } from 'bignumber.js'; import { TokenStandard } from '../../../../../shared/constants/transaction'; +import { getConversionRate } from '../../../../ducks/metamask/metamask'; import { getTokenStandardAndDetails } from '../../../../store/actions'; import { fetchTokenExchangeRates } from '../../../../helpers/utils/util'; import { memoizedGetTokenStandardAndDetails } from '../../utils/token'; -import { selectConversionRateByChainId } from '../../../../selectors'; import { useBalanceChanges } from './useBalanceChanges'; import { FIAT_UNAVAILABLE } from './types'; @@ -17,10 +17,13 @@ jest.mock('react-redux', () => ({ useSelector: jest.fn((selector) => selector()), })); +jest.mock('../../../../ducks/metamask/metamask', () => ({ + getConversionRate: jest.fn(), +})); + jest.mock('../../../../selectors', () => ({ getCurrentChainId: jest.fn(), getCurrentCurrency: jest.fn(), - selectConversionRateByChainId: jest.fn(), })); jest.mock('../../../../helpers/utils/util', () => ({ @@ -31,9 +34,7 @@ jest.mock('../../../../store/actions', () => ({ getTokenStandardAndDetails: jest.fn(), })); -const mockSelectConversionRateByChainId = jest.mocked( - selectConversionRateByChainId, -); +const mockGetConversionRate = getConversionRate as jest.Mock; const mockGetTokenStandardAndDetails = getTokenStandardAndDetails as jest.Mock; const mockFetchTokenExchangeRates = fetchTokenExchangeRates as jest.Mock; @@ -56,8 +57,6 @@ const DIFFERENCE_1_MOCK: Hex = '0x11'; const DIFFERENCE_2_MOCK: Hex = '0x2'; const DIFFERENCE_ETH_MOCK: Hex = '0x1234567890123456789'; -const CHAIN_ID_MOCK = '0x123'; - const dummyBalanceChange = { previousBalance: '0xIGNORE' as Hex, newBalance: '0xIGNORE' as Hex, @@ -84,7 +83,7 @@ describe('useBalanceChanges', () => { } return Promise.reject(new Error('Unable to determine token standard')); }); - mockSelectConversionRateByChainId.mockReturnValue(ETH_TO_FIAT_RATE); + mockGetConversionRate.mockReturnValue(ETH_TO_FIAT_RATE); mockFetchTokenExchangeRates.mockResolvedValue({ [ERC20_TOKEN_ADDRESS_1_MOCK]: ERC20_TO_FIAT_RATE_1_MOCK, [ERC20_TOKEN_ADDRESS_2_MOCK]: ERC20_TO_FIAT_RATE_2_MOCK, @@ -99,10 +98,7 @@ describe('useBalanceChanges', () => { describe('pending states', () => { it('returns pending=true if no simulation data', async () => { const { result, waitForNextUpdate } = renderHook(() => - useBalanceChanges({ - chainId: CHAIN_ID_MOCK, - simulationData: undefined, - }), + useBalanceChanges(undefined), ); expect(result.current).toEqual({ pending: true, value: [] }); await waitForNextUpdate(); @@ -123,7 +119,7 @@ describe('useBalanceChanges', () => { ], }; const { result, unmount, waitForNextUpdate } = renderHook(() => - useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }), + useBalanceChanges(simulationData), ); await waitForNextUpdate(); @@ -147,7 +143,7 @@ describe('useBalanceChanges', () => { ], }; const { result, unmount, waitForNextUpdate } = renderHook(() => - useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }), + useBalanceChanges(simulationData), ); await waitForNextUpdate(); @@ -165,9 +161,7 @@ describe('useBalanceChanges', () => { nativeBalanceChange: undefined, tokenBalanceChanges, }; - return renderHook(() => - useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }), - ); + return renderHook(() => useBalanceChanges(simulationData)); }; it('maps token balance changes correctly', async () => { @@ -187,7 +181,6 @@ describe('useBalanceChanges', () => { expect(changes).toEqual([ { asset: { - chainId: CHAIN_ID_MOCK, address: ERC20_TOKEN_ADDRESS_1_MOCK, standard: TokenStandard.ERC20, tokenId: undefined, @@ -244,7 +237,6 @@ describe('useBalanceChanges', () => { expect(result.current.value).toEqual([ { asset: { - chainId: CHAIN_ID_MOCK, address: NFT_TOKEN_ADDRESS_MOCK, standard: TokenStandard.ERC721, tokenId: TOKEN_ID_1_MOCK, @@ -315,9 +307,7 @@ describe('useBalanceChanges', () => { nativeBalanceChange, tokenBalanceChanges: [], }; - return renderHook(() => - useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }), - ); + return renderHook(() => useBalanceChanges(simulationData)); }; it('maps native balance change correctly', async () => { @@ -333,7 +323,6 @@ describe('useBalanceChanges', () => { expect(changes).toEqual([ { asset: { - chainId: CHAIN_ID_MOCK, standard: TokenStandard.none, }, amount: new BigNumber('-5373.003641998677469065'), @@ -343,7 +332,7 @@ describe('useBalanceChanges', () => { }); it('handles native fiat rate with more than 15 significant digits', async () => { - mockSelectConversionRateByChainId.mockReturnValue(0.1234567890123456); + mockGetConversionRate.mockReturnValue(0.1234567890123456); const { result, waitForNextUpdate } = setupHook({ ...dummyBalanceChange, difference: DIFFERENCE_ETH_MOCK, @@ -356,7 +345,7 @@ describe('useBalanceChanges', () => { }); it('handles unavailable native fiat rate', async () => { - mockSelectConversionRateByChainId.mockReturnValue(null); + mockGetConversionRate.mockReturnValue(null); const { result, waitForNextUpdate } = setupHook({ ...dummyBalanceChange, difference: DIFFERENCE_ETH_MOCK, @@ -393,7 +382,7 @@ describe('useBalanceChanges', () => { ], }; const { result, waitForNextUpdate } = renderHook(() => - useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }), + useBalanceChanges(simulationData), ); await waitForNextUpdate(); @@ -401,7 +390,6 @@ describe('useBalanceChanges', () => { const changes = result.current.value; expect(changes).toHaveLength(2); expect(changes[0].asset).toEqual({ - chainId: CHAIN_ID_MOCK, standard: TokenStandard.none, }); expect(changes[0].amount).toEqual( @@ -409,7 +397,6 @@ describe('useBalanceChanges', () => { ); expect(changes[0].fiatAmount).toBe(Number('-16119.010925996032')); expect(changes[1].asset).toEqual({ - chainId: CHAIN_ID_MOCK, address: ERC20_TOKEN_ADDRESS_1_MOCK, standard: TokenStandard.ERC20, }); diff --git a/ui/pages/confirmations/components/simulation-details/useBalanceChanges.ts b/ui/pages/confirmations/components/simulation-details/useBalanceChanges.ts index 666682c95c76..2a198d76ea36 100644 --- a/ui/pages/confirmations/components/simulation-details/useBalanceChanges.ts +++ b/ui/pages/confirmations/components/simulation-details/useBalanceChanges.ts @@ -10,17 +10,15 @@ import { BigNumber } from 'bignumber.js'; import { ContractExchangeRates } from '@metamask/assets-controllers'; import { useAsyncResultOrThrow } from '../../../../hooks/useAsyncResult'; import { TokenStandard } from '../../../../../shared/constants/transaction'; -import { - getCurrentCurrency, - selectConversionRateByChainId, -} from '../../../../selectors'; +import { getConversionRate } from '../../../../ducks/metamask/metamask'; +import { getCurrentChainId, getCurrentCurrency } from '../../../../selectors'; import { fetchTokenExchangeRates } from '../../../../helpers/utils/util'; import { ERC20_DEFAULT_DECIMALS, fetchErc20Decimals } from '../../utils/token'; import { BalanceChange, FIAT_UNAVAILABLE, - NativeAssetIdentifier, + NATIVE_ASSET_IDENTIFIER, TokenAssetIdentifier, } from './types'; @@ -96,25 +94,17 @@ async function fetchTokenFiatRates( function getNativeBalanceChange( nativeBalanceChange: SimulationBalanceChange | undefined, nativeFiatRate: number | undefined, - chainId: Hex, ): BalanceChange | undefined { if (!nativeBalanceChange) { return undefined; } - - const asset: NativeAssetIdentifier = { - chainId, - standard: TokenStandard.none, - }; - + const asset = NATIVE_ASSET_IDENTIFIER; const amount = getAssetAmount(nativeBalanceChange, NATIVE_DECIMALS); - const fiatAmount = nativeFiatRate ? amount .times(convertNumberToStringWithPrecisionWarning(nativeFiatRate)) .toNumber() : FIAT_UNAVAILABLE; - return { asset, amount, fiatAmount }; } @@ -123,11 +113,9 @@ function getTokenBalanceChanges( tokenBalanceChanges: SimulationTokenBalanceChange[], erc20Decimals: Record, erc20FiatRates: Partial>, - chainId: Hex, ): BalanceChange[] { return tokenBalanceChanges.map((tokenBc) => { const asset: TokenAssetIdentifier = { - chainId, standard: convertStandard(tokenBc.standard), address: tokenBc.address.toLowerCase() as Hex, tokenId: tokenBc.id, @@ -152,18 +140,12 @@ function getTokenBalanceChanges( } // Compiles a list of balance changes from simulation data -export const useBalanceChanges = ({ - chainId, - simulationData, -}: { - chainId: Hex; - simulationData?: SimulationData; -}): { pending: boolean; value: BalanceChange[] } => { +export const useBalanceChanges = ( + simulationData: SimulationData | undefined, +): { pending: boolean; value: BalanceChange[] } => { + const chainId = useSelector(getCurrentChainId); const fiatCurrency = useSelector(getCurrentCurrency); - - const nativeFiatRate = useSelector((state) => - selectConversionRateByChainId(state, chainId), - ); + const nativeFiatRate = useSelector(getConversionRate); const { nativeBalanceChange, tokenBalanceChanges = [] } = simulationData ?? {}; @@ -189,14 +171,11 @@ export const useBalanceChanges = ({ const nativeChange = getNativeBalanceChange( nativeBalanceChange, nativeFiatRate, - chainId, ); - const tokenChanges = getTokenBalanceChanges( tokenBalanceChanges, erc20Decimals.value, erc20FiatRates.value, - chainId, ); const balanceChanges: BalanceChange[] = [ diff --git a/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.test.ts b/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.test.ts index da1a93b92c6f..ec5857431f6b 100644 --- a/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.test.ts +++ b/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.test.ts @@ -492,7 +492,7 @@ describe('useSimulationMetrics', () => { balanceChanges: [balanceChange1, balanceChange2], }, expect.objectContaining({ - properties: expect.objectContaining({ + sensitiveProperties: expect.objectContaining({ [property]: 2.46, }), }), diff --git a/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.ts b/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.ts index 4109b00eae72..1f5c349d0050 100644 --- a/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.ts +++ b/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.ts @@ -4,6 +4,7 @@ import { } from '@metamask/transaction-controller'; import { useContext, useEffect, useState } from 'react'; import { NameType } from '@metamask/name-controller'; +import { useSelector } from 'react-redux'; import { useTransactionEventFragment } from '../../hooks/useTransactionEventFragment'; import { UseDisplayNameRequest, @@ -16,6 +17,7 @@ import { MetaMetricsEventCategory, MetaMetricsEventName, } from '../../../../../shared/constants/metametrics'; +import { getCurrentChainId } from '../../../../selectors'; import { calculateTotalFiat } from './fiat-display'; import { BalanceChange } from './types'; import { useLoadingTime } from './useLoadingTime'; @@ -63,6 +65,9 @@ export function useSimulationMetrics({ }: UseSimulationMetricsProps) { const { loadingTime, setLoadingComplete } = useLoadingTime(); + // TODO: Temporary pending multi-chain support in simulations. + const chainId = useSelector(getCurrentChainId); + if (!loading) { setLoadingComplete(); } @@ -74,7 +79,7 @@ export function useSimulationMetrics({ value: asset.address as string, type: NameType.ETHEREUM_ADDRESS, preferContractSymbol: true, - variation: asset.chainId, + variation: chainId, })); const displayNames = useDisplayNames(displayNameRequests); @@ -117,7 +122,10 @@ export function useSimulationMetrics({ ), }; - const sensitiveProperties = {}; + const sensitiveProperties = { + ...getSensitiveProperties(receivingAssets, 'simulation_receiving_assets_'), + ...getSensitiveProperties(sendingAssets, 'simulation_sending_assets_'), + }; const params = { properties, sensitiveProperties }; @@ -207,14 +215,15 @@ function getProperties( ), ); + return getPrefixProperties({ petname, quantity, type, value }, prefix); +} + +function getSensitiveProperties(changes: BalanceChange[], prefix: string) { const fiatAmounts = changes.map((change) => change.fiatAmount); const totalFiat = calculateTotalFiat(fiatAmounts); const totalValue = totalFiat ? Math.abs(totalFiat) : undefined; - return getPrefixProperties( - { petname, quantity, type, value, total_value: totalValue }, - prefix, - ); + return getPrefixProperties({ total_value: totalValue }, prefix); } // TODO: Replace `any` with type diff --git a/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.js b/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.js index 5127003a81e8..a641ecbab93a 100644 --- a/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.js +++ b/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.js @@ -14,10 +14,7 @@ import { } from '../../../../components/component-library'; import SimulationErrorMessage from '../simulation-error-message'; import { SEVERITIES } from '../../../../helpers/constants/design-system'; -// eslint-disable-next-line import/no-duplicates -import { selectNetworkConfigurationByChainId } from '../../../../selectors'; ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) -// eslint-disable-next-line import/no-duplicates import { submittedPendingTransactionsSelector } from '../../../../selectors'; import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url'; ///: END:ONLY_INCLUDE_IF @@ -25,6 +22,7 @@ import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url'; import { isSuspiciousResponse } from '../../../../../shared/modules/security-provider.utils'; import BlockaidBannerAlert from '../security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert'; import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message'; +import { getNativeCurrency } from '../../../../ducks/metamask/metamask'; import { parseStandardTokenTransactionData } from '../../../../../shared/modules/transaction.utils'; import { getTokenValueParam } from '../../../../../shared/lib/metamask-controller-utils'; import { QueuedRequestsBannerAlert } from '../../confirmation/components/queued-requests-banner-alert'; @@ -49,12 +47,7 @@ const TransactionAlerts = ({ ///: END:ONLY_INCLUDE_IF const t = useI18nContext(); - const { chainId } = txData; - - const { nativeCurrency } = useSelector((state) => - selectNetworkConfigurationByChainId(state, chainId), - ); - + const nativeCurrency = useSelector(getNativeCurrency); const transactionData = txData.txParams.data; const currentTokenSymbol = tokenSymbol || nativeCurrency; let currentTokenAmount; diff --git a/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.stories.js b/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.stories.js index 99a60a94e25d..ae46a4a83903 100644 --- a/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.stories.js +++ b/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.stories.js @@ -10,8 +10,6 @@ import { CHAIN_IDS } from '../../../../../shared/constants/network'; import { mockNetworkState } from '../../../../../test/stub/networks'; import TransactionAlerts from '.'; -const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET; - const mockSelectedInternalAccount = getSelectedInternalAccountFromMockState(testData); @@ -26,7 +24,7 @@ const customTransaction = ({ userFeeLevel: estimateUsed ? 'low' : 'medium', blockNumber: `${10902987 + i}`, id: 4678200543090545 + i, - chainId: CHAIN_ID_MOCK, + chainId: '0x1', status: 'confirmed', time: 1600654021000, txParams: { @@ -50,14 +48,23 @@ const customTransaction = ({ }; // simulate gas fee state -const customStore = ({ supportsEIP1559, pendingCount = 0 } = {}) => { +const customStore = ({ + supportsEIP1559, + isNetworkBusy, + pendingCount = 0, +} = {}) => { const data = cloneDeep({ ...testData, metamask: { ...testData?.metamask, + // isNetworkBusy + gasFeeEstimates: { + ...testData?.metamask?.gasFeeEstimates, + networkCongestion: isNetworkBusy ? 1 : 0.1, + }, // supportsEIP1559 ...mockNetworkState({ - chainId: CHAIN_ID_MOCK, + chainId: CHAIN_IDS.MAINNET, metadata: { EIPS: { 1559: Boolean(supportsEIP1559), @@ -68,12 +75,15 @@ const customStore = ({ supportsEIP1559, pendingCount = 0 } = {}) => { featureFlags: { ...testData?.metamask?.featureFlags, }, - transactions: [ - ...testData.metamask.transactions, - ...Array.from({ length: pendingCount }).map((_, i) => - customTransaction({ i, status: 'submitted' }), + incomingTransactions: { + ...testData?.metamask?.incomingTransactions, + ...Object.fromEntries( + Array.from({ length: pendingCount }).map((_, i) => { + const transaction = customTransaction({ i, status: 'submitted' }); + return [transaction?.hash, transaction]; + }), ), - ], + }, }, }); return configureStore(data); @@ -89,7 +99,6 @@ export default { args: { userAcknowledgedGasMissing: false, txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -120,7 +129,6 @@ DefaultStory.storyName = 'Default'; DefaultStory.args = { ...DefaultStory.args, txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x0', }, @@ -168,6 +176,15 @@ export const LowPriority = (args) => ( ); LowPriority.storyName = 'LowPriority'; +export const BusyNetwork = (args) => ( + + + + + +); +BusyNetwork.storyName = 'BusyNetwork'; + export const SendingZeroAmount = (args) => ( @@ -178,7 +195,6 @@ export const SendingZeroAmount = (args) => ( SendingZeroAmount.storyName = 'SendingZeroAmount'; SendingZeroAmount.args = { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x0', }, diff --git a/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.test.js b/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.test.js index 4695120fbae7..6ae1a59591dd 100644 --- a/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.test.js +++ b/ui/pages/confirmations/components/transaction-alerts/transaction-alerts.test.js @@ -1,7 +1,6 @@ import React from 'react'; import { fireEvent } from '@testing-library/react'; import sinon from 'sinon'; -import { CHAIN_IDS } from '@metamask/transaction-controller'; import { SECURITY_PROVIDER_MESSAGE_SEVERITY } from '../../../../../shared/constants/security-provider'; import { renderWithProvider } from '../../../../../test/jest'; import { submittedPendingTransactionsSelector } from '../../../../selectors/transactions'; @@ -10,7 +9,6 @@ import configureStore from '../../../../store/store'; import mockState from '../../../../../test/data/mock-state.json'; import * as txUtil from '../../../../../shared/modules/transaction.utils'; import * as metamaskControllerUtils from '../../../../../shared/lib/metamask-controller-utils'; -import { mockNetworkState } from '../../../../../test/stub/networks'; import TransactionAlerts from './transaction-alerts'; jest.mock('../../../../selectors/transactions', () => { @@ -24,28 +22,17 @@ jest.mock('../../../../contexts/gasFee'); jest.mock('../../../../selectors/account-abstraction'); -const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET; - -const STATE_MOCK = { - ...mockState, - metamask: { - ...mockState.metamask, - ...mockNetworkState({ - chainId: CHAIN_ID_MOCK, - }), - }, -}; - function render({ componentProps = {}, useGasFeeContextValue = {}, submittedPendingTransactionsSelectorValue = null, + mockedStore = mockState, }) { useGasFeeContext.mockReturnValue(useGasFeeContextValue); submittedPendingTransactionsSelector.mockReturnValue( submittedPendingTransactionsSelectorValue, ); - const store = configureStore(STATE_MOCK); + const store = configureStore(mockedStore); return renderWithProvider(, store); } @@ -54,7 +41,6 @@ describe('TransactionAlerts', () => { const { getByText } = render({ componentProps: { txData: { - chainId: CHAIN_ID_MOCK, securityAlertResponse: { resultType: 'Malicious', reason: 'blur_farming', @@ -78,7 +64,6 @@ describe('TransactionAlerts', () => { const { queryByText } = render({ componentProps: { txData: { - chainId: CHAIN_ID_MOCK, securityProviderResponse: { flagAsDangerous: '?', reason: 'Some reason...', @@ -104,7 +89,6 @@ describe('TransactionAlerts', () => { const { queryByText } = render({ componentProps: { txData: { - chainId: CHAIN_ID_MOCK, securityProviderResponse: { flagAsDangerous: SECURITY_PROVIDER_MESSAGE_SEVERITY.NOT_MALICIOUS, }, @@ -134,7 +118,6 @@ describe('TransactionAlerts', () => { }, componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -158,7 +141,6 @@ describe('TransactionAlerts', () => { }, componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -178,7 +160,6 @@ describe('TransactionAlerts', () => { componentProps: { setUserAcknowledgedGasMissing, txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -200,7 +181,6 @@ describe('TransactionAlerts', () => { componentProps: { userAcknowledgedGasMissing: true, txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -219,7 +199,6 @@ describe('TransactionAlerts', () => { const { queryByText } = render({ componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -241,7 +220,6 @@ describe('TransactionAlerts', () => { submittedPendingTransactionsSelectorValue: [{ some: 'transaction' }], componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -264,7 +242,6 @@ describe('TransactionAlerts', () => { ], componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -284,7 +261,6 @@ describe('TransactionAlerts', () => { submittedPendingTransactionsSelectorValue: [], componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -306,7 +282,6 @@ describe('TransactionAlerts', () => { }, componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -326,7 +301,6 @@ describe('TransactionAlerts', () => { }, componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -348,7 +322,6 @@ describe('TransactionAlerts', () => { }, componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -372,7 +345,6 @@ describe('TransactionAlerts', () => { }, componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -395,7 +367,6 @@ describe('TransactionAlerts', () => { submittedPendingTransactionsSelectorValue: [{ some: 'transaction' }], componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -417,7 +388,6 @@ describe('TransactionAlerts', () => { }, componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -437,7 +407,6 @@ describe('TransactionAlerts', () => { }, componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, @@ -476,7 +445,6 @@ describe('TransactionAlerts', () => { const { getByText } = render({ componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x0', }, @@ -493,7 +461,6 @@ describe('TransactionAlerts', () => { const { getByText } = render({ componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x0', }, @@ -511,7 +478,6 @@ describe('TransactionAlerts', () => { const { queryByText } = render({ componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x5af3107a4000', }, @@ -526,7 +492,6 @@ describe('TransactionAlerts', () => { const { queryByText } = render({ componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x0', }, @@ -543,7 +508,6 @@ describe('TransactionAlerts', () => { const { getByText } = render({ componentProps: { txData: { - chainId: CHAIN_ID_MOCK, txParams: { value: '0x1', }, diff --git a/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.js index 007aec372c62..ebd57c35a141 100644 --- a/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.js +++ b/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.js @@ -70,7 +70,7 @@ export default class ConfirmApproveContent extends Component { fromAddressIsLedger: PropTypes.bool, chainId: PropTypes.string, tokenAddress: PropTypes.string, - blockExplorerUrl: PropTypes.string, + rpcPrefs: PropTypes.object, isContract: PropTypes.bool, hexTransactionTotal: PropTypes.string, hexMinimumTransactionFee: PropTypes.string, @@ -375,10 +375,10 @@ export default class ConfirmApproveContent extends Component { } getTitleTokenDescription() { - const { tokenId, tokenAddress, blockExplorerUrl, chainId, userAddress } = + const { tokenId, tokenAddress, rpcPrefs, chainId, userAddress } = this.props; const useBlockExplorer = - blockExplorerUrl || + rpcPrefs?.blockExplorerUrl || [...TEST_CHAINS, CHAIN_IDS.MAINNET, CHAIN_IDS.LINEA_MAINNET].includes( chainId, ); @@ -393,7 +393,7 @@ export default class ConfirmApproveContent extends Component { null, userAddress, { - blockExplorerUrl: blockExplorerUrl ?? null, + blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null, }, ); const blockExplorerElement = ( @@ -529,7 +529,7 @@ export default class ConfirmApproveContent extends Component { fromAddressIsLedger, toAddress, chainId, - blockExplorerUrl, + rpcPrefs, assetStandard, tokenId, tokenAddress, @@ -612,7 +612,7 @@ export default class ConfirmApproveContent extends Component { tokenAddress={tokenAddress} toAddress={toAddress} chainId={chainId} - blockExplorerUrl={blockExplorerUrl} + rpcPrefs={rpcPrefs} tokenId={tokenId} assetName={assetName} assetStandard={assetStandard} diff --git a/ui/pages/confirmations/confirm-approve/confirm-approve.js b/ui/pages/confirmations/confirm-approve/confirm-approve.js index e167c15196ba..a5dcaeb6202d 100644 --- a/ui/pages/confirmations/confirm-approve/confirm-approve.js +++ b/ui/pages/confirmations/confirm-approve/confirm-approve.js @@ -12,7 +12,10 @@ import { getTokenApprovedParam } from '../../../helpers/utils/token-util'; import { readAddressAsContract } from '../../../../shared/modules/contract-utils'; import { GasFeeContextProvider } from '../../../contexts/gasFee'; import { TransactionModalContextProvider } from '../../../contexts/transaction-modal'; -import { isAddressLedger } from '../../../ducks/metamask/metamask'; +import { + getNativeCurrency, + isAddressLedger, +} from '../../../ducks/metamask/metamask'; import ConfirmContractInteraction from '../confirm-contract-interaction'; import { getCurrentCurrency, @@ -20,9 +23,10 @@ import { getUseNonceField, getCustomNonceValue, getNextSuggestedNonce, + getCurrentChainId, + getRpcPrefsForCurrentProvider, checkNetworkAndAccountSupports1559, getUseCurrencyRateCheck, - selectNetworkConfigurationByChainId, } from '../../../selectors'; import { useApproveTransaction } from '../hooks/useApproveTransaction'; import { useSimulationFailureWarning } from '../hooks/useSimulationFailureWarning'; @@ -62,23 +66,16 @@ export default function ConfirmApprove({ isSetApproveForAll, }) { const dispatch = useDispatch(); - const { chainId, txParams: { data: transactionData, from } = {} } = - transaction; + const { txParams: { data: transactionData } = {} } = transaction; const currentCurrency = useSelector(getCurrentCurrency); - - const { nativeCurrency } = useSelector((state) => - selectNetworkConfigurationByChainId(state, chainId), - ); - + const nativeCurrency = useSelector(getNativeCurrency); const subjectMetadata = useSelector(getSubjectMetadata); const useNonceField = useSelector(getUseNonceField); const nextNonce = useSelector(getNextSuggestedNonce); const customNonceValue = useSelector(getCustomNonceValue); - const { blockExplorerUrls } = useSelector((state) => - selectNetworkConfigurationByChainId(state, chainId), - ); - const blockExplorerUrl = blockExplorerUrls?.[0]; + const chainId = useSelector(getCurrentChainId); + const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); const networkAndAccountSupports1559 = useSelector( checkNetworkAndAccountSupports1559, ); @@ -269,7 +266,7 @@ export default function ConfirmApprove({ updateCustomNonce={(value) => { dispatch(updateCustomNonce(value)); }} - getNextNonce={() => dispatch(getNextNonce(from))} + getNextNonce={() => dispatch(getNextNonce())} showCustomizeNonceModal={({ /* eslint-disable no-shadow */ useNonceField, @@ -294,7 +291,7 @@ export default function ConfirmApprove({ txData={transaction} fromAddressIsLedger={fromAddressIsLedger} chainId={chainId} - blockExplorerUrl={blockExplorerUrl} + rpcPrefs={rpcPrefs} isContract={isContract} hasLayer1GasFee={layer1GasFee !== undefined} supportsEIP1559={supportsEIP1559} @@ -337,7 +334,6 @@ ConfirmApprove.propTypes = { userAddress: PropTypes.string, toAddress: PropTypes.string, transaction: PropTypes.shape({ - chainId: PropTypes.string, layer1GasFee: PropTypes.string, origin: PropTypes.string, txParams: PropTypes.shape({ diff --git a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap index 9ec3f2ac08d2..2bbceca19ec8 100644 --- a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap +++ b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap @@ -306,7 +306,6 @@ exports[`ConfirmSendEther should render correct information for for confirm send
0 @@ -470,7 +469,6 @@ exports[`ConfirmSendEther should render correct information for for confirm send > 0.000021 @@ -503,10 +501,10 @@ exports[`ConfirmSendEther should render correct information for for confirm send class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative" >

0.00021 diff --git a/ui/pages/confirmations/confirm-send-token/confirm-send-token.js b/ui/pages/confirmations/confirm-send-token/confirm-send-token.js index 4e68783e9be7..3e24c72541d5 100644 --- a/ui/pages/confirmations/confirm-send-token/confirm-send-token.js +++ b/ui/pages/confirmations/confirm-send-token/confirm-send-token.js @@ -8,9 +8,11 @@ import { editExistingTransaction } from '../../../ducks/send'; import { contractExchangeRateSelector, getCurrentCurrency, - selectConversionRateByChainId, - selectNetworkConfigurationByChainId, } from '../../../selectors'; +import { + getConversionRate, + getNativeCurrency, +} from '../../../ducks/metamask/metamask'; import { clearConfirmTransaction } from '../../../ducks/confirm-transaction/confirm-transaction.duck'; import { showSendTokenPage } from '../../../store/actions'; import { @@ -47,17 +49,8 @@ export default function ConfirmSendToken({ history.push(SEND_ROUTE); }); }; - - const { chainId } = transaction; - - const conversionRate = useSelector((state) => - selectConversionRateByChainId(state, chainId), - ); - - const { nativeCurrency } = useSelector((state) => - selectNetworkConfigurationByChainId(state, chainId), - ); - + const conversionRate = useSelector(getConversionRate); + const nativeCurrency = useSelector(getNativeCurrency); const currentCurrency = useSelector(getCurrentCurrency); const contractExchangeRate = useSelector(contractExchangeRateSelector); @@ -105,7 +98,6 @@ ConfirmSendToken.propTypes = { toAddress: PropTypes.string, tokenAddress: PropTypes.string, transaction: PropTypes.shape({ - chainId: PropTypes.string, origin: PropTypes.string, txParams: PropTypes.shape({ data: PropTypes.string, diff --git a/ui/pages/confirmations/confirm-signature-request/index.test.js b/ui/pages/confirmations/confirm-signature-request/index.test.js index f634bf40845c..e0c7c7c8bbeb 100644 --- a/ui/pages/confirmations/confirm-signature-request/index.test.js +++ b/ui/pages/confirmations/confirm-signature-request/index.test.js @@ -7,21 +7,13 @@ import { CHAIN_IDS } from '../../../../shared/constants/network'; import { mockNetworkState } from '../../../../test/stub/networks'; import ConfTx from '.'; -const CHAIN_ID_MOCK = CHAIN_IDS.GOERLI; - const mockState = { metamask: { - ...mockNetworkState({ - chainId: CHAIN_IDS.GOERLI, - nickname: 'Goerli test network', - ticker: undefined, - }), unapprovedPersonalMsgs: {}, unapprovedPersonalMsgCount: 0, unapprovedTypedMessages: { 267460284130106: { id: 267460284130106, - chainId: CHAIN_ID_MOCK, msgParams: { data: '{"domain":{"chainId":"5","name":"Ether Mail","verifyingContract":"0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC","version":"1"},"message":{"contents":"Hello, Bob!","from":{"name":"Cow","wallets":["0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826","0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF"]},"to":[{"name":"Bob","wallets":["0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB","0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57","0xB0B0b0b0b0b0B000000000000000000000000000"]}]},"primaryType":"Mail","types":{"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}],"Group":[{"name":"name","type":"string"},{"name":"members","type":"Person[]"}],"Mail":[{"name":"from","type":"Person"},{"name":"to","type":"Person[]"},{"name":"contents","type":"string"}],"Person":[{"name":"name","type":"string"},{"name":"wallets","type":"address[]"}]}}', from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', @@ -35,6 +27,11 @@ const mockState = { }, }, unapprovedTypedMessagesCount: 1, + ...mockNetworkState({ + chainId: CHAIN_IDS.GOERLI, + nickname: 'Goerli test network', + ticker: undefined, + }), currencyRates: {}, keyrings: [], subjectMetadata: {}, diff --git a/ui/pages/confirmations/confirm-token-transaction-base/confirm-token-transaction-base.js b/ui/pages/confirmations/confirm-token-transaction-base/confirm-token-transaction-base.js index 077d5c757dcb..7b60bf9ab4fe 100644 --- a/ui/pages/confirmations/confirm-token-transaction-base/confirm-token-transaction-base.js +++ b/ui/pages/confirmations/confirm-token-transaction-base/confirm-token-transaction-base.js @@ -15,12 +15,16 @@ import { import { PRIMARY } from '../../../helpers/constants/common'; import { contractExchangeRateSelector, + getCurrentChainId, getCurrentCurrency, + getRpcPrefsForCurrentProvider, getSelectedInternalAccount, - selectConversionRateByChainId, - selectNetworkConfigurationByChainId, - selectNftContractsByChainId, } from '../../../selectors'; +import { + getConversionRate, + getNativeCurrency, + getNftContracts, +} from '../../../ducks/metamask/metamask'; import { TokenStandard } from '../../../../shared/constants/transaction'; import { getWeiHexFromDecimalValue, @@ -43,28 +47,16 @@ export default function ConfirmTokenTransactionBase({ ethTransactionTotal, fiatTransactionTotal, hexMaximumTransactionFee, - transaction, }) { const t = useContext(I18nContext); const contractExchangeRate = useSelector(contractExchangeRateSelector); - const { chainId } = transaction; - - const { blockExplorerUrls, nativeCurrency } = useSelector((state) => - selectNetworkConfigurationByChainId(state, chainId), - ); - - const blockExplorerUrl = blockExplorerUrls?.[0]; + const nativeCurrency = useSelector(getNativeCurrency); const currentCurrency = useSelector(getCurrentCurrency); - - const conversionRate = useSelector((state) => - selectConversionRateByChainId(state, chainId), - ); - + const conversionRate = useSelector(getConversionRate); + const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); + const chainId = useSelector(getCurrentChainId); const { address: userAddress } = useSelector(getSelectedInternalAccount); - - const nftCollections = useSelector((state) => - selectNftContractsByChainId(state, chainId), - ); + const nftCollections = useSelector(getNftContracts); const ethTransactionTotalMaxAmount = Number( hexWEIToDecETH(hexMaximumTransactionFee), @@ -72,7 +64,7 @@ export default function ConfirmTokenTransactionBase({ const getTitleTokenDescription = (renderType) => { const useBlockExplorer = - blockExplorerUrl || + rpcPrefs?.blockExplorerUrl || [...TEST_CHAINS, CHAIN_IDS.MAINNET, CHAIN_IDS.LINEA_MAINNET].includes( chainId, ); @@ -95,7 +87,7 @@ export default function ConfirmTokenTransactionBase({ null, userAddress, { - blockExplorerUrl: blockExplorerUrl ?? null, + blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null, }, ); const blockExplorerElement = ( @@ -227,5 +219,4 @@ ConfirmTokenTransactionBase.propTypes = { ethTransactionTotal: PropTypes.string, fiatTransactionTotal: PropTypes.string, hexMaximumTransactionFee: PropTypes.string, - transaction: PropTypes.string, }; diff --git a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap index 5cdbdd5de6a5..c89fa090cd3d 100644 --- a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap +++ b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap @@ -264,7 +264,6 @@ exports[`Confirm Transaction Base should match snapshot 1`] = ` > 0.0001 @@ -337,12 +336,12 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
-

- No changes -

+

+ No changes predicted for your wallet +

0.000021 @@ -442,7 +440,6 @@ exports[`Confirm Transaction Base should match snapshot 1`] = ` > 0.000021 diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js index bcc3279752e2..1ae7eaaeb33d 100644 --- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js @@ -217,7 +217,6 @@ export default class ConfirmTransactionBase extends Component { mostRecentOverviewPage, txData, getNextNonce, - fromAddress, } = this.props; const { @@ -237,7 +236,7 @@ export default class ConfirmTransactionBase extends Component { transactionStatus === TransactionStatus.confirmed; if (txData.id !== prevTxData.id) { - getNextNonce(fromAddress); + getNextNonce(); } if ( @@ -414,7 +413,6 @@ export default class ConfirmTransactionBase extends Component { tokenSymbol, isUsingPaymaster, isSigningOrSubmitting, - fromAddress, } = this.props; const { t } = this.context; @@ -449,7 +447,7 @@ export default class ConfirmTransactionBase extends Component { updateCustomNonce(inputValue); - getNextNonce(fromAddress); + getNextNonce(); }; const renderTotalMaxAmount = ({ @@ -545,7 +543,11 @@ export default class ConfirmTransactionBase extends Component { const { simulationData } = txData; const simulationDetails = ( - + ); const showTotals = Boolean(simulationData?.error); @@ -1014,16 +1016,24 @@ export default class ConfirmTransactionBase extends Component { this._isMounted = true; const { toAddress, - fromAddress, - txData: { origin } = {}, + txData: { origin, chainId: txChainId } = {}, getNextNonce, tryReverseResolveAddress, smartTransactionsPreferenceEnabled, currentChainSupportsSmartTransactions, setSwapsFeatureFlags, fetchSmartTransactionsLiveness, + chainId, } = this.props; + // If the user somehow finds themselves seeing a confirmation + // on a network which is not presently selected, throw + if (txChainId === undefined || txChainId !== chainId) { + throw new Error( + `Currently selected chainId (${chainId}) does not match chainId (${txChainId}) on which the transaction was proposed.`, + ); + } + const { trackEvent } = this.context; trackEvent({ category: MetaMetricsEventCategory.Transactions, @@ -1035,7 +1045,7 @@ export default class ConfirmTransactionBase extends Component { }, }); - getNextNonce(fromAddress); + getNextNonce(); if (toAddress) { tryReverseResolveAddress(toAddress); } diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js index c34025e2f0c5..e06090f48e75 100644 --- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js @@ -69,8 +69,11 @@ import { isAddressLedger, updateGasFees, getIsGasEstimatesLoading, + getNativeCurrency, getSendToAccounts, + getProviderConfig, findKeyringForAddress, + getConversionRate, } from '../../../ducks/metamask/metamask'; import { addHexPrefix, @@ -94,19 +97,10 @@ import { CUSTOM_GAS_ESTIMATE } from '../../../../shared/constants/gas'; // eslint-disable-next-line import/no-duplicates import { getIsUsingPaymaster } from '../../../selectors/account-abstraction'; -import { - selectConversionRateByChainId, - selectNetworkConfigurationByChainId, - // eslint-disable-next-line import/no-duplicates -} from '../../../selectors/selectors'; - ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) -import { - getAccountType, - selectDefaultRpcEndpointByChainId, - // eslint-disable-next-line import/no-duplicates -} from '../../../selectors/selectors'; // eslint-disable-next-line import/no-duplicates +import { getAccountType } from '../../../selectors/selectors'; + import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../shared/constants/app'; import { getIsNoteToTraderSupported, @@ -174,16 +168,15 @@ const mapStateToProps = (state, ownProps) => { const gasLoadingAnimationIsShowing = getGasLoadingAnimationIsShowing(state); const isBuyableChain = getIsNativeTokenBuyable(state); const { confirmTransaction, metamask } = state; + const conversionRate = getConversionRate(state); const { addressBook, nextNonce } = metamask; const unapprovedTxs = getUnapprovedTransactions(state); + const { chainId } = getProviderConfig(state); const { tokenData, txData, tokenProps, nonce } = confirmTransaction; const { txParams = {}, id: transactionId, type } = txData; const txId = transactionId || paramsTransactionId; const transaction = getUnapprovedTransaction(state, txId) ?? {}; - const { chainId } = transaction; - const conversionRate = selectConversionRateByChainId(state, chainId); - const { from: fromAddress, to: txParamsToAddress, @@ -191,7 +184,6 @@ const mapStateToProps = (state, ownProps) => { gas: gasLimit, data, } = (transaction && transaction.txParams) || txParams; - const accounts = getMetaMaskAccounts(state); const smartTransactionsPreferenceEnabled = getSmartTransactionsPreferenceEnabled(state); @@ -278,10 +270,7 @@ const mapStateToProps = (state, ownProps) => { fullTxData.userFeeLevel === CUSTOM_GAS_ESTIMATE || txParamsAreDappSuggested(fullTxData); const fromAddressIsLedger = isAddressLedger(state, fromAddress); - - const { nativeCurrency } = - selectNetworkConfigurationByChainId(state, chainId) ?? {}; - + const nativeCurrency = getNativeCurrency(state); ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) const accountType = getAccountType(state, fromAddress); const fromChecksumHexAddress = toChecksumHexAddress(fromAddress); @@ -292,9 +281,7 @@ const mapStateToProps = (state, ownProps) => { const custodianPublishesTransaction = getIsCustodianPublishesTransactionSupported(state, fromChecksumHexAddress); const builtinRpcUrl = CHAIN_ID_TO_RPC_URL_MAP[chainId]; - - const { url: customRpcUrl } = - selectDefaultRpcEndpointByChainId(state, chainId) ?? {}; + const { rpcUrl: customRpcUrl } = getProviderConfig(state); const rpcUrl = customRpcUrl || builtinRpcUrl; @@ -442,7 +429,7 @@ export const mapDispatchToProps = (dispatch) => { fetchSmartTransactionsLiveness: () => { dispatch(fetchSmartTransactionsLiveness()); }, - getNextNonce: (address) => dispatch(getNextNonce(address)), + getNextNonce: () => dispatch(getNextNonce()), setNextNonce: (val) => dispatch(setNextNonce(val)), setDefaultHomeActiveTabName: (tabName) => dispatch(setDefaultHomeActiveTabName(tabName)), diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js index 5a846874fed3..bea6aef1d84d 100644 --- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js +++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js @@ -969,4 +969,45 @@ describe('Confirm Transaction Base', () => { expect(confirmButton).toBeDisabled(); }); }); + + describe('Preventing transaction submission', () => { + it('should throw error when on wrong chain', async () => { + const txParams = { + ...mockTxParams, + to: undefined, + data: '0xa22cb46500000000000000', + chainId: '0x5', + }; + const state = { + ...baseStore, + metamask: { + ...baseStore.metamask, + transactions: [ + { + id: baseStore.confirmTransaction.txData.id, + chainId: '0x5', + status: 'unapproved', + txParams, + }, + ], + ...mockNetworkState({ chainId: CHAIN_IDS.SEPOLIA }), + }, + confirmTransaction: { + ...baseStore.confirmTransaction, + txData: { + ...baseStore.confirmTransaction.txData, + value: '0x0', + isUserOperation: true, + txParams, + chainId: '0x5', + }, + }, + }; + + // Error will be triggered by componentDidMount + await expect(render({ state })).rejects.toThrow( + 'Currently selected chainId (0xaa36a7) does not match chainId (0x5) on which the transaction was proposed.', + ); + }); + }); }); diff --git a/ui/pages/confirmations/confirm-transaction/confirm-token-transaction-switch.js b/ui/pages/confirmations/confirm-transaction/confirm-token-transaction-switch.js index 72f570c5b98b..1bf5c8771b4f 100644 --- a/ui/pages/confirmations/confirm-transaction/confirm-token-transaction-switch.js +++ b/ui/pages/confirmations/confirm-transaction/confirm-token-transaction-switch.js @@ -27,7 +27,6 @@ import { useAssetDetails } from '../hooks/useAssetDetails'; export default function ConfirmTokenTransactionSwitch({ transaction }) { const { - chainId, txParams: { data, to: tokenAddress, from: userAddress } = {}, layer1GasFee, } = transaction; @@ -45,7 +44,7 @@ export default function ConfirmTokenTransactionSwitch({ transaction }) { tokenAmount, tokenId, toAddress, - } = useAssetDetails(tokenAddress, userAddress, data, chainId); + } = useAssetDetails(tokenAddress, userAddress, data); const { ethTransactionTotal, @@ -222,7 +221,6 @@ export default function ConfirmTokenTransactionSwitch({ transaction }) { ConfirmTokenTransactionSwitch.propTypes = { transaction: PropTypes.shape({ - chainId: PropTypes.string, origin: PropTypes.string, txParams: PropTypes.shape({ data: PropTypes.string, diff --git a/ui/pages/confirmations/confirm-transaction/confirm-transaction.component.js b/ui/pages/confirmations/confirm-transaction/confirm-transaction.component.js index 12971f21a2af..156bca192523 100644 --- a/ui/pages/confirmations/confirm-transaction/confirm-transaction.component.js +++ b/ui/pages/confirmations/confirm-transaction/confirm-transaction.component.js @@ -126,10 +126,9 @@ const ConfirmTransaction = () => { const prevTransactionId = usePrevious(transactionId); usePolling({ - startPolling: (input) => - gasFeeStartPollingByNetworkClientId(input.networkClientId), + startPollingByNetworkClientId: gasFeeStartPollingByNetworkClientId, stopPollingByPollingToken: gasFeeStopPollingByPollingToken, - input: { networkClientId: transaction.networkClientId ?? networkClientId }, + networkClientId: transaction.networkClientId ?? networkClientId, }); useEffect(() => { diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap index acc76e3c1bb3..1d27b332f7a5 100644 --- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap +++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap @@ -94,7 +94,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = ` >
- -
@@ -349,7 +328,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB >
- -
@@ -808,529 +766,558 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB

-
-
-
-
-
- - -
-
-
-
-`; - -exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitSingle 1`] = ` -
-
-
-
-
-
-
-
-
- - - - - -
-
-
-
- G -
-
-
-

-

- Goerli -

-
-
-
-
-
-
- -
-
-
-
-
-
-
-

- Spending cap request -

-

- This site wants permission to spend your tokens. -

-
-
-

- Estimated changes -

-
- +

+ Primary type: +

-
-
-
-

- You're giving the spender permission to spend this many tokens from your account. -

-
-
-
-
-
-

- Spending cap -

+

+ PermitBatch +

+
-
-
-
-

- 14,615,016,373,... -

-
+ Details: +

- -

- 0xA0b86...6eB48 -

+
+

+ 0: +

+
+
+
+
+
+
+

+ Token: +

+
+
+
+
+ +

+ 0xA0b86...6eB48 +

+
+
+
+
+
+
+

+ Amount: +

+
+
+
+
+
+

+ 14,615,016,373,... +

+
+
+
+
+
+
+
+

+ Expiration: +

+
+
+
+

+ 05 August 2024, 19:52 +

+
+
+
+
+
+

+ Nonce: +

+
+
+
+

+ 5 +

+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-

- Spender -

-
-
-
-
- -
-

- 0x3fC91...b7FAD -

-
-
-
-
-
-
-
-

- Request from -

-
-
- -
-
-
-
-
-

- metamask.github.io -

-
-
-
-
-
-

- Interacting with -

-
-
-
-
- +
+
+
+

+ SigDeadline: +

+
+
+
+

+ 06 July 2024, 20:22 +

-

- 0x00000...78BA3 -

-
-
-
-
-
-
- - -
-
-

- Message -

@@ -1359,7 +1346,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
`; -exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = ` +exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitSingle 1`] = `
- Test Account -

+ />

- Signature request + Spending cap request

- Review request details before you confirm. + This site wants permission to spend your tokens.

- Request from + Estimated changes

- metamask.github.io + You're giving the spender permission to spend this many tokens from your account.

@@ -1551,64 +1538,267 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `

- Interacting with + Spending cap

+
+
+ - +

+ 0xA0b86...6eB48 +

+
+
-

- 0xCcCCc...ccccC +

+
+
+
+
+
+
+
+

+ Spender +

+
+
+
+
+ +

+ 0x3fC91...b7FAD +

+
+
+
+
+
+
+
+

+ Request from +

+
+
+ +
+
+
+
+
+

+ metamask.github.io +

+
+
+
+
+
+

+ Interacting with +

+
+
+
+
+ +

+ 0x00000...78BA3

@@ -1618,30 +1808,9 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = ` class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md" >
- -
@@ -1682,7 +1851,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = ` class="mm-box mm-text mm-text--body-md mm-box--color-inherit" style="white-space: pre-wrap;" > - Mail + PermitSingle

@@ -1706,35 +1875,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `

- Contents: -

-
-
-
-

- Hello, Bob! -

-
-
-
-
-
-

- From: + Details:

@@ -1754,19 +1895,66 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `

- Name: + Token:

-

- Cow -

+ +

+ 0xA0b86...6eB48 +

+
- Wallets: + Amount:

-
-

- 0: -

-
-
-
-
- -

- 0xCD2a3...DD826 -

-
+ 14,615,016,373,... +

+
+
+
+
-
-
-

- 1: -

-
-
-
-
- -

- 0xDeaDb...DbeeF -

-
-
+ Expiration: +

+
+
+

+ 05 August 2024, 19:52 +

+
+
+
+
-
-
-

- 2: -

-
-
-
-
- -

- 0x06195...43896 -

-
-
+ Nonce: +

+
+

+ 5 +

+
@@ -2031,476 +2069,1567 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `

- To: + Spender:

-
-

- 0: -

-
-
-
-
-

- Name: -

-
-
-
-

- Bob -

-
-
-
-
-
-

- Wallets: -

-
-
-
-
-
-
-

- 0: -

-
-
-
-
- -

- 0xbBbBB...bBBbB -

-
-
-
-
-
-
-

- 1: -

-
-
-
-
- -

- 0xB0Bda...bEa57 -

-
-
-
-
-
-
-

- 2: -

-
-
-
-
- -

- 0xB0B0b...00000 -

-
-
-
+ + + +
+

+ 0x3fC91...b7FAD +

+
+
+
+
+
+
+

+ SigDeadline: +

+
+

+ 06 July 2024, 20:22 +

+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+`; + +exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = ` +
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+ G +
+
+
+

+ Test Account +

+

+ Goerli +

+
+
+
+
+
+
+ +
+
+
+
+
+
+
+

+ Signature request +

+

+ Review request details before you confirm. +

+
+
+
+
+

+ Request from +

+
+
+ +
+
+
+
+
+

+ metamask.github.io +

+
+
+
+
+
+

+ Interacting with +

+
+
+
+
+ +

+ 0xCcCCc...ccccC +

+
+
+
+
+
+
+
+
+

+ Message +

+
+
+
+
+
+
+

+ Primary type: +

+
+
+
+

+ Mail +

+
+
+
+
+
+
+
+

+ Contents: +

+
+
+
+

+ Hello, Bob! +

+
+
+
+
+
+

+ From: +

+
+
+
+
+
+
+

+ Name: +

+
+
+
+

+ Cow +

+
+
+
+
+
+

+ Wallets: +

+
+
+
+
+
+
+

+ 0: +

+
+
+
+
+ +

+ 0xCD2a3...DD826 +

+
+
+
+
+
+
+

+ 1: +

+
+
+
+
+ +

+ 0xDeaDb...DbeeF +

+
+
+
+
+
+
+

+ 2: +

+
+
+
+
+ +

+ 0x06195...43896 +

+
+
+
+
+
+
+
+
+
+
+

+ To: +

+
+
+
+
+
+
+

+ 0: +

+
+
+
+
+
+
+

+ Name: +

+
+
+
+

+ Bob +

+
+
+
+
+
+

+ Wallets: +

+
+
+
+
+
+
+

+ 0: +

+
+
+
+
+ +

+ 0xbBbBB...bBBbB +

+
+
+
+
+
+
+

+ 1: +

+
+
+
+
+ +

+ 0xB0Bda...bEa57 +

+
+
+
+
+
+
+

+ 2: +

+
+
+
+
+ +

+ 0xB0B0b...00000 +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+`; + +exports[`Confirm should match snapshot for signature - typed sign - permit 1`] = ` +
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+ G +
+
+
+

+

+ Goerli +

+
+
+
+
+
+
+ +
+
+
+
+
+
+
+

+ Spending cap request +

+

+ This site wants permission to spend your tokens. +

+
+
+
+
+

+ Estimated changes +

+
+
+ +
+
+
+
+
+

+ You're giving the spender permission to spend this many tokens from your account. +

+
+
+
+
+
+

+ Spending cap +

+
+
+
+
+
+
+
+
+

+ 30 +

+
+
+
+
+
+ +

+ 0xCcCCc...ccccC +

+
+
+
+
+
+
+
+
+
+
+
+
+

+ Spender +

+
+
+
+
+ +

+ 0x5B38D...eddC4 +

-
-
-
-
- - -
-
-
-
-`; - -exports[`Confirm should match snapshot for signature - typed sign - permit 1`] = ` -
-
-
-
-
-
+
- - - - - + Request from +

+
+
+ +
+
+
+

+ metamask.github.io +

+
- G -
-
-
-

-

- Goerli -

-
-
-
-
-
- +

+ Interacting with +

+
-
-
-
-
-
-
-

- Spending cap request -

-

- This site wants permission to spend your tokens. -

+
+
+ +

+ 0xCcCCc...ccccC +

+
+
+
+
- Estimated changes + Message

-
-
- -
-
-

- You're giving the spender permission to spend this many tokens from your account. -

-
-
-
-
-

- Spending cap -

+
+

+ Primary type: +

+
+
+
+

+ Permit +

+
-
-
+
+

+ Owner: +

+
+
+
+
+ +

+ 0x935E7...05477 +

+
+
+
+
+
+
+

+ Spender: +

+
+
+
+
+ +

+ 0x5B38D...eddC4 +

+
+
+
+
+
+
+

+ Value: +

+
+
+
+
+
+

+ 30 +

+
+
+
+
+
+

- 30 + Nonce:

-
-
-

- 0xCcCCc...ccccC + 0

-
-
-
-
-
-
-
-
-
-
-

- Spender -

-
-
-
-
- -
-

- 0x5B38D...eddC4 -

-
-
-
-
-
-
-
-

- Request from -

-
-
- -
-
-
-
-
-

- metamask.github.io -

-
-
-
-
-
-

- Interacting with -

-
-
-
-
- -

- 0xCcCCc...ccccC -

-
-
-
-
-
-
- - -
-
-

- Message -

@@ -2979,7 +4054,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = ` >
- -
diff --git a/ui/pages/confirmations/confirm/stories/transactions/contract-interaction.stories.tsx b/ui/pages/confirmations/confirm/stories/transactions/contract-interaction.stories.tsx index 5a531a97787d..33a8c2e67f0b 100644 --- a/ui/pages/confirmations/confirm/stories/transactions/contract-interaction.stories.tsx +++ b/ui/pages/confirmations/confirm/stories/transactions/contract-interaction.stories.tsx @@ -39,16 +39,15 @@ export const UserOperationStory = () => { }; const confirmState = getMockConfirmStateForTransaction(confirmation, { - metamask: { - preferences: { - ...mockState.metamask.preferences, - petnamesEnabled: true, - }, - userOperations: { - [confirmation.id]: { - userOperation: { - paymasterAndData: PAYMASTER_AND_DATA, - }, + metamask: {}, + preferences: { + ...mockState.metamask.preferences, + petnamesEnabled: true, + }, + userOperations: { + [confirmation.id]: { + userOperation: { + paymasterAndData: PAYMASTER_AND_DATA, }, }, }, diff --git a/ui/pages/confirmations/confirm/stories/utils.tsx b/ui/pages/confirmations/confirm/stories/utils.tsx index 18f9ae734e31..9c68a392cbd7 100644 --- a/ui/pages/confirmations/confirm/stories/utils.tsx +++ b/ui/pages/confirmations/confirm/stories/utils.tsx @@ -1,11 +1,17 @@ import React from 'react'; import { Provider } from 'react-redux'; +import { MemoryRouter, Route } from 'react-router-dom'; import configureStore from '../../../../store/store'; +import { ConfirmContextProvider } from '../../context/confirm'; import ConfirmPage from '../confirm'; export const CONFIRM_PAGE_DECORATOR = [ (story: () => React.ReactFragment) => { - return
{story()}
; + return ( + +
{story()}
+ + ); }, ]; @@ -30,7 +36,18 @@ export function ConfirmStoryTemplate( return ( - + {/* Adding the MemoryRouter and Route is a workaround to bypass a 404 error in storybook that + is caused when the 'ui/pages/confirmations/hooks/syncConfirmPath.ts' hook calls + history.replace. To avoid history.replace, we can provide a param id. */} + + } /> + ); } diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap index 317071e6be26..a541bb5f7ae3 100644 --- a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap +++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap @@ -334,7 +334,6 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = ` > 966.988 @@ -378,7 +377,6 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = ` > 966.988 diff --git a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js index 1df546b06003..24d66b8785fb 100644 --- a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js +++ b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js @@ -11,10 +11,7 @@ import { Severity, TypographyVariant, } from '../../../../helpers/constants/design-system'; -import { - DEFAULT_ROUTE, - ONBOARDING_PRIVACY_SETTINGS_ROUTE, -} from '../../../../helpers/constants/routes'; +import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'; import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url'; import { jsonRpcRequest } from '../../../../../shared/modules/rpc.utils'; import { isValidASCIIURL, toPunycodeURL } from '../../utils/confirm'; @@ -384,13 +381,7 @@ function getValues(pendingApproval, t, actions, history, data) { nickname: pendingApproval.requestData.chainName, }); - const locationPath = document.location.hash.replace('#', '/'); - const isOnboardingRoute = - locationPath === ONBOARDING_PRIVACY_SETTINGS_ROUTE; - - if (!isOnboardingRoute) { - history.push(DEFAULT_ROUTE); - } + history.push(DEFAULT_ROUTE); } return []; }, diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useResimulationAlert.test.ts b/ui/pages/confirmations/hooks/alerts/transactions/useResimulationAlert.test.ts deleted file mode 100644 index 174b6ec0398a..000000000000 --- a/ui/pages/confirmations/hooks/alerts/transactions/useResimulationAlert.test.ts +++ /dev/null @@ -1,126 +0,0 @@ -import { ApprovalType } from '@metamask/controller-utils'; -import { - TransactionMeta, - TransactionStatus, - TransactionType, -} from '@metamask/transaction-controller'; - -import { getMockConfirmState } from '../../../../../../test/data/confirmations/helper'; -import { renderHookWithConfirmContextProvider } from '../../../../../../test/lib/confirmations/render-helpers'; -import { Severity } from '../../../../../helpers/constants/design-system'; -import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants'; -import { genUnapprovedContractInteractionConfirmation } from '../../../../../../test/data/confirmations/contract-interaction'; -import { useResimulationAlert } from './useResimulationAlert'; - -const ACCOUNT_ADDRESS = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'; -const TRANSACTION_ID_MOCK = '123-456'; - -const CONFIRMATION_MOCK = genUnapprovedContractInteractionConfirmation({ - chainId: '0x5', -}) as TransactionMeta; - -const TRANSACTION_META_MOCK = { - id: TRANSACTION_ID_MOCK, - chainId: '0x5', - status: TransactionStatus.submitted, - type: TransactionType.contractInteraction, - txParams: { - from: ACCOUNT_ADDRESS, - }, - time: new Date().getTime() - 10000, - simulationData: { - isUpdatedAfterSecurityCheck: true, - tokenBalanceChanges: [], - }, -} as TransactionMeta; - -function runHook({ - currentConfirmation, - transactions = [], -}: { - currentConfirmation?: TransactionMeta; - transactions?: TransactionMeta[]; -} = {}) { - let pendingApprovals = {}; - if (currentConfirmation) { - pendingApprovals = { - [currentConfirmation.id as string]: { - id: currentConfirmation.id, - type: ApprovalType.Transaction, - }, - }; - transactions.push(currentConfirmation); - } - const state = getMockConfirmState({ - metamask: { - pendingApprovals, - transactions, - }, - }); - const response = renderHookWithConfirmContextProvider( - useResimulationAlert, - state, - ); - - return response.result.current; -} - -describe('useResimulationAlert', () => { - beforeEach(() => { - jest.resetAllMocks(); - }); - - it('returns no alerts if no confirmation', () => { - expect(runHook()).toEqual([]); - }); - - it('returns no alerts if no transactions', () => { - expect( - runHook({ - currentConfirmation: CONFIRMATION_MOCK, - transactions: [], - }), - ).toEqual([]); - }); - - it('returns no alerts if isUpdatedAfterSecurityCheck is false', () => { - const notResimulatedConfirmation = { - ...TRANSACTION_META_MOCK, - simulationData: { - isUpdatedAfterSecurityCheck: false, - tokenBalanceChanges: [], - }, - }; - expect( - runHook({ - currentConfirmation: notResimulatedConfirmation, - }), - ).toEqual([]); - }); - - it('returns alert if isUpdatedAfterSecurityCheck is true', () => { - const resimulatedConfirmation = { - ...CONFIRMATION_MOCK, - simulationData: { - isUpdatedAfterSecurityCheck: true, - tokenBalanceChanges: [], - }, - }; - const alerts = runHook({ - currentConfirmation: resimulatedConfirmation, - }); - - expect(alerts).toEqual([ - { - actions: [], - field: RowAlertKey.Resimulation, - isBlocking: false, - key: 'simulationDetailsTitle', - message: - 'Estimated changes for this transaction have been updated. Review them closely before proceeding.', - reason: 'Results have changed', - severity: Severity.Danger, - }, - ]); - }); -}); diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useResimulationAlert.ts b/ui/pages/confirmations/hooks/alerts/transactions/useResimulationAlert.ts deleted file mode 100644 index c838e07e62c4..000000000000 --- a/ui/pages/confirmations/hooks/alerts/transactions/useResimulationAlert.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { useMemo } from 'react'; -import { TransactionMeta } from '@metamask/transaction-controller'; - -import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts'; -import { useI18nContext } from '../../../../../hooks/useI18nContext'; -import { Severity } from '../../../../../helpers/constants/design-system'; -import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants'; -import { useConfirmContext } from '../../../context/confirm'; - -export function useResimulationAlert(): Alert[] { - const t = useI18nContext(); - const { currentConfirmation } = useConfirmContext(); - - const isUpdatedAfterSecurityCheck = (currentConfirmation as TransactionMeta) - ?.simulationData?.isUpdatedAfterSecurityCheck; - - return useMemo(() => { - if (!isUpdatedAfterSecurityCheck) { - return []; - } - - return [ - { - actions: [], - field: RowAlertKey.Resimulation, - isBlocking: false, - key: 'simulationDetailsTitle', - message: t('alertMessageChangeInSimulationResults'), - reason: t('alertReasonChangeInSimulationResults'), - severity: Severity.Danger, - }, - ]; - }, [isUpdatedAfterSecurityCheck, t]); -} diff --git a/ui/pages/confirmations/hooks/alerts/useBlockaidAlerts.ts b/ui/pages/confirmations/hooks/alerts/useBlockaidAlerts.ts index 2f26fcefbee9..1b6412d66614 100644 --- a/ui/pages/confirmations/hooks/alerts/useBlockaidAlerts.ts +++ b/ui/pages/confirmations/hooks/alerts/useBlockaidAlerts.ts @@ -15,6 +15,7 @@ import { import { Alert } from '../../../../ducks/confirm-alerts/confirm-alerts'; import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url'; import { useI18nContext } from '../../../../hooks/useI18nContext'; +import { getCurrentChainId } from '../../../../selectors'; import { SIGNATURE_TRANSACTION_TYPES, REDESIGN_DEV_TRANSACTION_TYPES, @@ -50,6 +51,7 @@ type SecurityAlertResponsesState = { const useBlockaidAlerts = (): Alert[] => { const t = useI18nContext(); const { currentConfirmation } = useConfirmContext(); + const selectorChainId = useSelector(getCurrentChainId); const securityAlertId = ( currentConfirmation?.securityAlertResponse as SecurityAlertResponse @@ -97,7 +99,9 @@ const useBlockaidAlerts = (): Alert[] => { const reportData = { blockNumber: block, blockaidVersion: BlockaidPackage.version, - chain: (NETWORK_TO_NAME_MAP as Record)[chainId], + chain: (NETWORK_TO_NAME_MAP as Record)[ + chainId ?? selectorChainId + ], classification: isFailedResultType ? 'error' : reason, domain: origin ?? msgParams?.origin ?? origin, jsonRpcMethod: type, diff --git a/ui/pages/confirmations/hooks/test-utils.js b/ui/pages/confirmations/hooks/test-utils.js index 0cda95770107..908f600564f8 100644 --- a/ui/pages/confirmations/hooks/test-utils.js +++ b/ui/pages/confirmations/hooks/test-utils.js @@ -3,6 +3,10 @@ import { useSelector } from 'react-redux'; import { useMultichainSelector } from '../../../hooks/useMultichainSelector'; import { GasEstimateTypes } from '../../../../shared/constants/gas'; +import { + getConversionRate, + getNativeCurrency, +} from '../../../ducks/metamask/metamask'; import { getCurrentCurrency, getShouldShowFiat, @@ -10,8 +14,6 @@ import { getCurrentKeyring, getTokenExchangeRates, getPreferences, - selectConversionRateByChainId, - selectNetworkConfigurationByChainId, } from '../../../selectors'; import { @@ -105,10 +107,13 @@ export const generateUseSelectorRouter = if (selector === getMultichainIsEvm) { return true; } - if (selector === selectConversionRateByChainId) { + if (selector === getConversionRate) { return MOCK_ETH_USD_CONVERSION_RATE; } - if (selector === getMultichainNativeCurrency) { + if ( + selector === getMultichainNativeCurrency || + selector === getNativeCurrency + ) { return EtherDenomination.ETH; } if (selector === getPreferences) { @@ -122,9 +127,6 @@ export const generateUseSelectorRouter = ) { return 'USD'; } - if (selector === selectNetworkConfigurationByChainId) { - return '2'; - } if ( selector === getMultichainShouldShowFiat || selector === getShouldShowFiat diff --git a/ui/pages/confirmations/hooks/useAssetDetails.js b/ui/pages/confirmations/hooks/useAssetDetails.js index bea2f6da89a8..4a9afaf05468 100644 --- a/ui/pages/confirmations/hooks/useAssetDetails.js +++ b/ui/pages/confirmations/hooks/useAssetDetails.js @@ -1,7 +1,7 @@ import { isEqual } from 'lodash'; import { useState, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import { getTokens } from '../../../ducks/metamask/metamask'; +import { getNfts, getTokens } from '../../../ducks/metamask/metamask'; import { getAssetDetails } from '../../../helpers/utils/token-util'; import { hideLoadingIndication, @@ -10,18 +10,11 @@ import { import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils'; import { usePrevious } from '../../../hooks/usePrevious'; import { useTokenTracker } from '../../../hooks/useTokenTracker'; -import { selectNftsByChainId } from '../../../selectors'; -export function useAssetDetails( - tokenAddress, - userAddress, - transactionData, - chainId, -) { +export function useAssetDetails(tokenAddress, userAddress, transactionData) { const dispatch = useDispatch(); - // state selectors - const nfts = useSelector((state) => selectNftsByChainId(state, chainId)); + const nfts = useSelector(getNfts); const tokens = useSelector(getTokens, isEqual); const currentToken = tokens.find((token) => isEqualCaseInsensitive(token.address, tokenAddress), diff --git a/ui/pages/confirmations/hooks/useConfirmationAlerts.ts b/ui/pages/confirmations/hooks/useConfirmationAlerts.ts index c5f77f143cb6..3ea9a5e2d254 100644 --- a/ui/pages/confirmations/hooks/useConfirmationAlerts.ts +++ b/ui/pages/confirmations/hooks/useConfirmationAlerts.ts @@ -10,7 +10,6 @@ import { useNetworkBusyAlerts } from './alerts/transactions/useNetworkBusyAlerts import { useNoGasPriceAlerts } from './alerts/transactions/useNoGasPriceAlerts'; import { usePendingTransactionAlerts } from './alerts/transactions/usePendingTransactionAlerts'; import { useQueuedConfirmationsAlerts } from './alerts/transactions/useQueuedConfirmationsAlerts'; -import { useResimulationAlert } from './alerts/transactions/useResimulationAlert'; ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) import { useSigningOrSubmittingAlerts } from './alerts/transactions/useSigningOrSubmittingAlerts'; ///: END:ONLY_INCLUDE_IF @@ -35,11 +34,11 @@ function useTransactionAlerts(): Alert[] { const networkBusyAlerts = useNetworkBusyAlerts(); const noGasPriceAlerts = useNoGasPriceAlerts(); const pendingTransactionAlerts = usePendingTransactionAlerts(); - const resimulationAlert = useResimulationAlert(); ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) const signingOrSubmittingAlerts = useSigningOrSubmittingAlerts(); ///: END:ONLY_INCLUDE_IF const queuedConfirmationsAlerts = useQueuedConfirmationsAlerts(); + return useMemo( () => [ ...gasEstimateFailedAlerts, @@ -49,7 +48,6 @@ function useTransactionAlerts(): Alert[] { ...networkBusyAlerts, ...noGasPriceAlerts, ...pendingTransactionAlerts, - ...resimulationAlert, ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) ...signingOrSubmittingAlerts, ///: END:ONLY_INCLUDE_IF @@ -63,7 +61,6 @@ function useTransactionAlerts(): Alert[] { networkBusyAlerts, noGasPriceAlerts, pendingTransactionAlerts, - resimulationAlert, ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) signingOrSubmittingAlerts, ///: END:ONLY_INCLUDE_IF diff --git a/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts b/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts index f0463287ef34..4c6dddfa7a5a 100644 --- a/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts +++ b/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts @@ -6,23 +6,30 @@ import { NETWORK_TO_NAME_MAP, } from '../../../../shared/constants/network'; +import { + getCurrentChainId, + getNetworkConfigurationsByChainId, +} from '../../../selectors'; + import { useI18nContext } from '../../../hooks/useI18nContext'; import { useConfirmContext } from '../context/confirm'; -import { selectNetworkConfigurationByChainId } from '../../../selectors'; function useConfirmationNetworkInfo() { const t = useI18nContext(); const { currentConfirmation } = useConfirmContext(); - const chainId = currentConfirmation?.chainId as Hex; - - const networkConfiguration = useSelector((state) => - selectNetworkConfigurationByChainId(state, chainId), - ); + const networkConfigurations = useSelector(getNetworkConfigurationsByChainId); + const currentChainId = useSelector(getCurrentChainId); let networkDisplayName = ''; let networkImageUrl = ''; if (currentConfirmation) { + // use the current confirmation chainId, else use the current network chainId + const chainId = + (currentConfirmation?.chainId as Hex | undefined) ?? currentChainId; + + const networkConfiguration = networkConfigurations[chainId]; + networkDisplayName = networkConfiguration?.name ?? NETWORK_TO_NAME_MAP[chainId as keyof typeof NETWORK_TO_NAME_MAP] ?? diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts index cf5e8a1383a2..8ce37261aa8e 100644 --- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts +++ b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts @@ -8,6 +8,7 @@ import { useSelector } from 'react-redux'; import { useParams } from 'react-router-dom'; import { ApprovalsMetaMaskState, + getCurrentChainId, getIsRedesignedConfirmationsDeveloperEnabled, getRedesignedConfirmationsEnabled, getRedesignedTransactionsEnabled, @@ -35,6 +36,9 @@ const useCurrentConfirmation = () => { const oldestPendingApproval = useSelector(oldestPendingConfirmationSelector); const confirmationId = paramsConfirmationId ?? oldestPendingApproval?.id; + // TODO: Temporary pending chain ID persisted in signature requests. + const globalChainId = useSelector(getCurrentChainId); + const isRedesignedSignaturesUserSettingEnabled = useSelector( getRedesignedConfirmationsEnabled, ); @@ -102,10 +106,12 @@ const useCurrentConfirmation = () => { } const currentConfirmation = - transactionMetadata ?? signatureMessage ?? undefined; + transactionMetadata ?? + (signatureMessage && { ...signatureMessage, chainId: globalChainId }) ?? + undefined; return { currentConfirmation }; - }, [transactionMetadata, signatureMessage, shouldUseRedesign]); + }, [transactionMetadata, signatureMessage, shouldUseRedesign, globalChainId]); }; export default useCurrentConfirmation; diff --git a/ui/pages/confirmations/hooks/useGasFeeInputs.js b/ui/pages/confirmations/hooks/useGasFeeInputs.js index 8675b726038a..27a60ad5f043 100644 --- a/ui/pages/confirmations/hooks/useGasFeeInputs.js +++ b/ui/pages/confirmations/hooks/useGasFeeInputs.js @@ -11,7 +11,6 @@ import { GAS_FORM_ERRORS } from '../../../helpers/constants/gas'; import { checkNetworkAndAccountSupports1559, getAdvancedInlineGasShown, - selectNetworkConfigurationByChainId, } from '../../../selectors'; import { isLegacyTransaction } from '../../../helpers/utils/transactions.util'; import { useGasFeeEstimates } from '../../../hooks/useGasFeeEstimates'; @@ -119,13 +118,6 @@ export function useGasFeeInputs( ? retryTxMeta : _transaction; - const network = useSelector((state) => - selectNetworkConfigurationByChainId(state, transaction?.chainId), - ); - - const networkClientId = - network?.rpcEndpoints?.[network?.defaultRpcEndpointIndex]?.networkClientId; - const supportsEIP1559 = useSelector(checkNetworkAndAccountSupports1559) && !isLegacyTransaction(transaction?.txParams); @@ -138,7 +130,7 @@ export function useGasFeeInputs( gasFeeEstimates, isGasEstimatesLoading, isNetworkBusy, - } = useGasFeeEstimates(networkClientId); + } = useGasFeeEstimates(transaction?.networkClientId); const userPrefersAdvancedGas = useSelector(getAdvancedInlineGasShown); diff --git a/ui/pages/confirmations/hooks/useGasFeeInputs.test.js b/ui/pages/confirmations/hooks/useGasFeeInputs.test.js index 48f78f42977f..c7477d548735 100644 --- a/ui/pages/confirmations/hooks/useGasFeeInputs.test.js +++ b/ui/pages/confirmations/hooks/useGasFeeInputs.test.js @@ -50,7 +50,6 @@ jest.mock('../../../hooks/useMultichainSelector', () => ({ const mockTransaction = { status: TransactionStatus.unapproved, type: TransactionType.simpleSend, - networkClientId: '2', txParams: { from: '0x000000000000000000000000000000000000dead', type: '0x2', @@ -95,7 +94,6 @@ describe('useGasFeeInputs', () => { checkNetworkAndAccountSupports1559Response: false, }), ); - const { result } = renderHook(() => useGasFeeInputs()); expect(result.current.gasPrice).toBe( LEGACY_GAS_ESTIMATE_RETURN_VALUE.gasFeeEstimates.medium, @@ -189,19 +187,9 @@ describe('useGasFeeInputs', () => { ); expect(result.current.balanceError).toBe(true); }); - - it('should call useGasFeeEstimates with correct networkClientId', () => { - renderHook(() => useGasFeeInputs(null, mockTransaction)); - expect(useGasFeeEstimates).not.toHaveBeenCalledWith('2'); - }); }); describe('editGasMode', () => { - beforeEach(() => { - useGasFeeEstimates.mockImplementation( - () => HIGH_FEE_MARKET_ESTIMATE_RETURN_VALUE, - ); - }); it('should return editGasMode passed', () => { const { result } = renderHook(() => useGasFeeInputs(undefined, undefined, undefined, EditGasModes.swaps), diff --git a/ui/pages/confirmations/hooks/useGetTokenStandardAndDetails.ts b/ui/pages/confirmations/hooks/useGetTokenStandardAndDetails.ts index b4ad2b5d51ef..88dfb0a12b9d 100644 --- a/ui/pages/confirmations/hooks/useGetTokenStandardAndDetails.ts +++ b/ui/pages/confirmations/hooks/useGetTokenStandardAndDetails.ts @@ -16,12 +16,8 @@ import { * @returns */ export const useGetTokenStandardAndDetails = ( - tokenAddress?: Hex | string | undefined, + tokenAddress: Hex | string | undefined, ) => { - if (!tokenAddress) { - return { decimalsNumber: undefined }; - } - const { value: details } = useAsyncResult( async () => (await memoizedGetTokenStandardAndDetails( diff --git a/ui/pages/confirmations/hooks/useSmartTransactionFeatureFlags.test.ts b/ui/pages/confirmations/hooks/useSmartTransactionFeatureFlags.test.ts deleted file mode 100644 index 708a78b5b1eb..000000000000 --- a/ui/pages/confirmations/hooks/useSmartTransactionFeatureFlags.test.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { act } from 'react-dom/test-utils'; -import { useDispatch } from 'react-redux'; -import { CHAIN_IDS, TransactionMeta } from '@metamask/transaction-controller'; -import { Hex } from '@metamask/utils'; -import { - fetchSmartTransactionsLiveness, - setSwapsFeatureFlags, -} from '../../../store/actions'; -import { renderHookWithConfirmContextProvider } from '../../../../test/lib/confirmations/render-helpers'; -import { genUnapprovedContractInteractionConfirmation } from '../../../../test/data/confirmations/contract-interaction'; -import { getMockConfirmStateForTransaction } from '../../../../test/data/confirmations/helper'; -import { mockNetworkState } from '../../../../test/stub/networks'; -import { fetchSwapsFeatureFlags } from '../../swaps/swaps.util'; -import { useSmartTransactionFeatureFlags } from './useSmartTransactionFeatureFlags'; - -jest.mock('react-redux', () => ({ - ...jest.requireActual('react-redux'), - useDispatch: jest.fn(), -})); - -jest.mock('../../../store/actions', () => ({ - ...jest.requireActual('../../../store/actions'), - setSwapsFeatureFlags: jest.fn(), - fetchSmartTransactionsLiveness: jest.fn(), -})); - -jest.mock('../../swaps/swaps.util', () => ({ - ...jest.requireActual('../../swaps/swaps.util'), - fetchSwapsFeatureFlags: jest.fn(), -})); - -async function runHook({ - smartTransactionsOptInStatus, - chainId, - confirmation, -}: { - smartTransactionsOptInStatus: boolean; - chainId: Hex; - confirmation?: Partial; -}) { - const transaction = - (confirmation as TransactionMeta) ?? - genUnapprovedContractInteractionConfirmation({ - chainId, - }); - - const state = getMockConfirmStateForTransaction(transaction, { - metamask: { - ...mockNetworkState({ chainId, id: 'Test' }), - selectedNetworkClientId: 'Test', - preferences: { - smartTransactionsOptInStatus, - }, - }, - }); - - renderHookWithConfirmContextProvider( - () => useSmartTransactionFeatureFlags(), - state, - ); - - await act(async () => { - // Intentionally empty - }); -} - -describe('useSmartTransactionFeatureFlags', () => { - const setSwapsFeatureFlagsMock = jest.mocked(setSwapsFeatureFlags); - const fetchSwapsFeatureFlagsMock = jest.mocked(fetchSwapsFeatureFlags); - const fetchSmartTransactionsLivenessMock = jest.mocked( - fetchSmartTransactionsLiveness, - ); - const useDispatchMock = jest.mocked(useDispatch); - - beforeEach(() => { - jest.resetAllMocks(); - useDispatchMock.mockReturnValue(jest.fn()); - fetchSwapsFeatureFlagsMock.mockResolvedValue({}); - fetchSmartTransactionsLivenessMock.mockReturnValue(() => Promise.resolve()); - }); - - it('updates feature flags', async () => { - await runHook({ - smartTransactionsOptInStatus: true, - chainId: CHAIN_IDS.MAINNET, - }); - - expect(setSwapsFeatureFlagsMock).toHaveBeenCalledTimes(1); - expect(setSwapsFeatureFlagsMock).toHaveBeenCalledWith({}); - }); - - it('does not update feature flags if smart transactions disabled', async () => { - await runHook({ - smartTransactionsOptInStatus: false, - chainId: CHAIN_IDS.MAINNET, - }); - - expect(setSwapsFeatureFlagsMock).not.toHaveBeenCalled(); - }); - - it('does not update feature flags if chain not supported', async () => { - await runHook({ - smartTransactionsOptInStatus: true, - chainId: CHAIN_IDS.ARBITRUM, - }); - - expect(setSwapsFeatureFlagsMock).not.toHaveBeenCalled(); - }); - - it('does not update feature flags if confirmation is not transaction', async () => { - await runHook({ - smartTransactionsOptInStatus: true, - chainId: CHAIN_IDS.MAINNET, - confirmation: {}, - }); - - expect(setSwapsFeatureFlagsMock).not.toHaveBeenCalled(); - }); -}); diff --git a/ui/pages/confirmations/hooks/useSmartTransactionFeatureFlags.ts b/ui/pages/confirmations/hooks/useSmartTransactionFeatureFlags.ts deleted file mode 100644 index 099327eb211f..000000000000 --- a/ui/pages/confirmations/hooks/useSmartTransactionFeatureFlags.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { useDispatch, useSelector } from 'react-redux'; -import { useEffect } from 'react'; -import { TransactionMeta } from '@metamask/transaction-controller'; -import log from 'loglevel'; -import { - getCurrentChainSupportsSmartTransactions, - getSmartTransactionsPreferenceEnabled, -} from '../../../../shared/modules/selectors'; -import { fetchSwapsFeatureFlags } from '../../swaps/swaps.util'; -import { - fetchSmartTransactionsLiveness, - setSwapsFeatureFlags, -} from '../../../store/actions'; -import { useConfirmContext } from '../context/confirm'; - -export function useSmartTransactionFeatureFlags() { - const dispatch = useDispatch(); - const { currentConfirmation } = useConfirmContext(); - const { id: transactionId, txParams } = currentConfirmation ?? {}; - const isTransaction = Boolean(txParams); - - const smartTransactionsPreferenceEnabled = useSelector( - getSmartTransactionsPreferenceEnabled, - ); - - const currentChainSupportsSmartTransactions = useSelector( - getCurrentChainSupportsSmartTransactions, - ); - - useEffect(() => { - if ( - !isTransaction || - !transactionId || - !smartTransactionsPreferenceEnabled || - !currentChainSupportsSmartTransactions - ) { - return; - } - - Promise.all([fetchSwapsFeatureFlags(), fetchSmartTransactionsLiveness()()]) - .then(([swapsFeatureFlags]) => { - dispatch(setSwapsFeatureFlags(swapsFeatureFlags)); - }) - .catch((error) => { - log.debug('Error updating smart transaction feature flags', error); - }); - }, [ - isTransaction, - transactionId, - smartTransactionsPreferenceEnabled, - currentChainSupportsSmartTransactions, - ]); -} diff --git a/ui/pages/confirmations/hooks/useTrackERC20WithoutDecimalInformation.test.ts b/ui/pages/confirmations/hooks/useTrackERC20WithoutDecimalInformation.test.ts index 9c98432918e2..dff0103fbe21 100644 --- a/ui/pages/confirmations/hooks/useTrackERC20WithoutDecimalInformation.test.ts +++ b/ui/pages/confirmations/hooks/useTrackERC20WithoutDecimalInformation.test.ts @@ -1,7 +1,6 @@ import { renderHook } from '@testing-library/react-hooks'; import { useContext } from 'react'; -import { CHAIN_IDS } from '@metamask/transaction-controller'; import { TokenStandard } from '../../../../shared/constants/transaction'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { TokenDetailsERC20 } from '../utils/token'; @@ -31,7 +30,7 @@ describe('useTrackERC20WithoutDecimalInformation', () => { }); renderHook(() => - useTrackERC20WithoutDecimalInformation(CHAIN_IDS.MAINNET, '0x5', { + useTrackERC20WithoutDecimalInformation('0x5', { standard: TokenStandard.ERC20, } as TokenDetailsERC20), ); diff --git a/ui/pages/confirmations/hooks/useTrackERC20WithoutDecimalInformation.ts b/ui/pages/confirmations/hooks/useTrackERC20WithoutDecimalInformation.ts index 266048e11134..fa6a5e620fc4 100644 --- a/ui/pages/confirmations/hooks/useTrackERC20WithoutDecimalInformation.ts +++ b/ui/pages/confirmations/hooks/useTrackERC20WithoutDecimalInformation.ts @@ -1,3 +1,4 @@ +import { useSelector } from 'react-redux'; import { useContext, useEffect } from 'react'; import { Hex } from '@metamask/utils'; @@ -9,23 +10,23 @@ import { } from '../../../../shared/constants/metametrics'; import { TokenStandard } from '../../../../shared/constants/transaction'; import { MetaMetricsContext } from '../../../contexts/metametrics'; +import { getCurrentChainId } from '../../../selectors'; import { parseTokenDetailDecimals, TokenDetailsERC20 } from '../utils/token'; /** * Track event that number of decimals in ERC20 is not obtained * - * @param chainId * @param tokenAddress * @param tokenDetails * @param metricLocation */ const useTrackERC20WithoutDecimalInformation = ( - chainId: Hex, tokenAddress: Hex | string | undefined, tokenDetails?: TokenDetailsERC20, metricLocation = MetaMetricsEventLocation.SignatureConfirmation, ) => { const trackEvent = useContext(MetaMetricsContext); + const chainId = useSelector(getCurrentChainId); useEffect(() => { if (chainId === undefined || tokenDetails === undefined) { diff --git a/ui/pages/confirmations/hooks/useTransactionEventFragment.js b/ui/pages/confirmations/hooks/useTransactionEventFragment.js index c69cbb8fc80f..b28b1fd02a54 100644 --- a/ui/pages/confirmations/hooks/useTransactionEventFragment.js +++ b/ui/pages/confirmations/hooks/useTransactionEventFragment.js @@ -31,7 +31,6 @@ export const useTransactionEventFragment = () => { await createTransactionEventFragment(transactionId); } updateEventFragment(`transaction-added-${transactionId}`, params); - updateEventFragment(`transaction-submitted-${transactionId}`, params); }, [fragmentExists, gasTransactionId], ); diff --git a/ui/pages/confirmations/hooks/useTransactionFunctionType.js b/ui/pages/confirmations/hooks/useTransactionFunctionType.js index 10255149eda7..559367fff066 100644 --- a/ui/pages/confirmations/hooks/useTransactionFunctionType.js +++ b/ui/pages/confirmations/hooks/useTransactionFunctionType.js @@ -2,10 +2,8 @@ import { useSelector } from 'react-redux'; import { TransactionType } from '@metamask/transaction-controller'; import { ORIGIN_METAMASK } from '../../../../shared/constants/app'; -import { - getKnownMethodData, - selectNetworkConfigurationByChainId, -} from '../../../selectors'; +import { getKnownMethodData } from '../../../selectors'; +import { getNativeCurrency } from '../../../ducks/metamask/metamask'; import { getTransactionTypeTitle } from '../../../helpers/utils/transactions.util'; import { getMethodName } from '../../../helpers/utils/metrics'; @@ -13,12 +11,8 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; export const useTransactionFunctionType = (txData = {}) => { const t = useI18nContext(); - const { chainId, txParams } = txData; - - const networkConfiguration = useSelector((state) => - selectNetworkConfigurationByChainId(state, chainId), - ); - + const nativeCurrency = useSelector(getNativeCurrency); + const { txParams } = txData; const methodData = useSelector( (state) => getKnownMethodData(state, txParams?.data) || {}, ); @@ -27,8 +21,6 @@ export const useTransactionFunctionType = (txData = {}) => { return {}; } - const { nativeCurrency } = networkConfiguration ?? {}; - const isTokenApproval = txData.type === TransactionType.tokenMethodSetApprovalForAll || txData.type === TransactionType.tokenMethodApprove || diff --git a/ui/pages/confirmations/hooks/useTransactionFunctionType.test.js b/ui/pages/confirmations/hooks/useTransactionFunctionType.test.js index da625ad68267..2bdc008e05dd 100644 --- a/ui/pages/confirmations/hooks/useTransactionFunctionType.test.js +++ b/ui/pages/confirmations/hooks/useTransactionFunctionType.test.js @@ -1,64 +1,47 @@ -import { CHAIN_IDS, TransactionType } from '@metamask/transaction-controller'; +import { TransactionType } from '@metamask/transaction-controller'; import { renderHookWithProvider } from '../../../../test/lib/render-helpers'; import mockState from '../../../../test/data/mock-state.json'; -import { mockNetworkState } from '../../../../test/stub/networks'; import { useTransactionFunctionType } from './useTransactionFunctionType'; -const CHAIN_ID_MOCK = CHAIN_IDS.GOERLI; - -const STATE_MOCK = { - ...mockState, - metamask: { - ...mockState.metamask, - ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), - }, -}; - describe('useTransactionFunctionType', () => { it('should return functionType depending on transaction data if present', () => { const { result } = renderHookWithProvider( () => useTransactionFunctionType({ - chainId: CHAIN_ID_MOCK, txParams: { data: '0x095ea7b30000000000000000000000002f318c334780961fb129d2a6c30d0763d9a5c9700000000000000000000000000000000000000000000000000000000000011170', }, type: TransactionType.tokenMethodApprove, }), - STATE_MOCK, + mockState, ); expect(result.current.functionType).toStrictEqual('Approve spend limit'); }); - it('should return functionType depending on transaction type if method not present in transaction data', () => { const { result } = renderHookWithProvider( () => useTransactionFunctionType({ - chainId: CHAIN_ID_MOCK, txParams: {}, type: TransactionType.tokenMethodTransfer, }), - STATE_MOCK, + mockState, ); expect(result.current.functionType).toStrictEqual('Transfer'); }); - it('should return functionType Contract interaction by default', () => { const { result } = renderHookWithProvider( () => useTransactionFunctionType({ - chainId: CHAIN_ID_MOCK, txParams: {}, }), - STATE_MOCK, + mockState, ); expect(result.current.functionType).toStrictEqual('Contract interaction'); }); - it('should return undefined is txData is not present', () => { const { result } = renderHookWithProvider( () => useTransactionFunctionType(), - STATE_MOCK, + mockState, ); expect(result.current.functionType).toBeUndefined(); }); diff --git a/ui/pages/confirmations/hooks/useTransactionInfo.js b/ui/pages/confirmations/hooks/useTransactionInfo.js index ef709de50486..452e44c83dfb 100644 --- a/ui/pages/confirmations/hooks/useTransactionInfo.js +++ b/ui/pages/confirmations/hooks/useTransactionInfo.js @@ -1,4 +1,5 @@ import { useSelector } from 'react-redux'; +import { getProviderConfig } from '../../../ducks/metamask/metamask'; import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils'; import { getSelectedInternalAccount } from '../../../selectors'; @@ -6,7 +7,7 @@ import { getSelectedInternalAccount } from '../../../selectors'; export const useTransactionInfo = (txData = {}) => { const { allNftContracts } = useSelector((state) => state.metamask); const selectedInternalAccount = useSelector(getSelectedInternalAccount); - const { chainId } = txData; + const { chainId } = useSelector(getProviderConfig); const isNftTransfer = Boolean( allNftContracts?.[selectedInternalAccount.address]?.[chainId]?.find( diff --git a/ui/pages/confirmations/hooks/useTransactionInfo.test.js b/ui/pages/confirmations/hooks/useTransactionInfo.test.js index 272c27abbfa4..61ae036c4000 100644 --- a/ui/pages/confirmations/hooks/useTransactionInfo.test.js +++ b/ui/pages/confirmations/hooks/useTransactionInfo.test.js @@ -1,7 +1,7 @@ -import { CHAIN_IDS } from '@metamask/transaction-controller'; import { renderHookWithProvider } from '../../../../test/lib/render-helpers'; import mockState from '../../../../test/data/mock-state.json'; import { getSelectedInternalAccountFromMockState } from '../../../../test/jest/mocks'; +import { getCurrentChainId } from '../../../selectors'; import { useTransactionInfo } from './useTransactionInfo'; const mockSelectedInternalAccount = @@ -13,25 +13,22 @@ describe('useTransactionInfo', () => { const { result } = renderHookWithProvider( () => useTransactionInfo({ - chainId: CHAIN_IDS.GOERLI, txParams: {}, }), mockState, ); expect(result.current.isNftTransfer).toStrictEqual(false); }); - it('should return true if transaction is NFT transfer', () => { mockState.metamask.allNftContracts = { [mockSelectedInternalAccount.address]: { - [CHAIN_IDS.GOERLI]: [{ address: '0x9' }], + [getCurrentChainId(mockState)]: [{ address: '0x9' }], }, }; const { result } = renderHookWithProvider( () => useTransactionInfo({ - chainId: CHAIN_IDS.GOERLI, txParams: { to: '0x9', }, diff --git a/ui/pages/confirmations/send/gas-display/gas-display.js b/ui/pages/confirmations/send/gas-display/gas-display.js index 312854d168a7..33a011c2966a 100644 --- a/ui/pages/confirmations/send/gas-display/gas-display.js +++ b/ui/pages/confirmations/send/gas-display/gas-display.js @@ -27,11 +27,14 @@ import { getIsTestnet, getUseCurrencyRateCheck, getUnapprovedTransactions, - selectNetworkConfigurationByChainId, } from '../../../../selectors'; import { INSUFFICIENT_TOKENS_ERROR } from '../send.constants'; import { getCurrentDraftTransaction } from '../../../../ducks/send'; +import { + getNativeCurrency, + getProviderConfig, +} from '../../../../ducks/metamask/metamask'; import { showModal } from '../../../../store/actions'; import { addHexes, @@ -49,26 +52,25 @@ import { getIsNativeTokenBuyable } from '../../../../ducks/ramps'; export default function GasDisplay({ gasError }) { const t = useContext(I18nContext); const dispatch = useDispatch(); - const { estimateUsed, transaction } = useGasFeeContext(); - const { chainId } = transaction; + const { estimateUsed } = useGasFeeContext(); const trackEvent = useContext(MetaMetricsContext); - const { openBuyCryptoInPdapp } = useRamps(); - const { name: networkNickname, nativeCurrency } = useSelector((state) => - selectNetworkConfigurationByChainId(state, chainId), - ); + const { openBuyCryptoInPdapp } = useRamps(); + const providerConfig = useSelector(getProviderConfig); const isTestnet = useSelector(getIsTestnet); const isBuyableChain = useSelector(getIsNativeTokenBuyable); const draftTransaction = useSelector(getCurrentDraftTransaction); const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck); const { showFiatInTestnets } = useSelector(getPreferences); const unapprovedTxs = useSelector(getUnapprovedTransactions); + const nativeCurrency = useSelector(getNativeCurrency); + const { chainId } = providerConfig; const networkName = NETWORK_TO_NAME_MAP[chainId]; const isInsufficientTokenError = draftTransaction?.amount?.error === INSUFFICIENT_TOKENS_ERROR; const editingTransaction = unapprovedTxs[draftTransaction.id]; - const currentNetworkName = networkName || networkNickname; + const currentNetworkName = networkName || providerConfig.nickname; const transactionData = { txParams: { diff --git a/ui/pages/confirmations/token-allowance/__snapshots__/token-allowance.test.js.snap b/ui/pages/confirmations/token-allowance/__snapshots__/token-allowance.test.js.snap index bc44e728df86..91ac3c735f84 100644 --- a/ui/pages/confirmations/token-allowance/__snapshots__/token-allowance.test.js.snap +++ b/ui/pages/confirmations/token-allowance/__snapshots__/token-allowance.test.js.snap @@ -148,14 +148,14 @@ exports[`TokenAllowancePage when mounted should match snapshot 1`] = `
- Ethereum Mainnet + mainnet
getTargetAccountWithSendEtherInfo(state, userAddress), ); - - const { chainId } = txData; - - const networkIdentifier = useSelector((state) => - selectNetworkIdentifierByChainId(state, chainId), - ); - - const { blockExplorerUrls } = - useSelector((state) => - selectNetworkConfigurationByChainId(state, chainId), - ) ?? {}; - - const blockExplorerUrl = blockExplorerUrls?.[0]; + const networkIdentifier = useSelector(getNetworkIdentifier); + const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); const unapprovedTxCount = useSelector(getUnapprovedTxCount); const unapprovedTxs = useSelector(getUnapprovedTransactions); const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck); @@ -363,12 +347,12 @@ export default function TokenAllowance({ }; const handleNextNonce = useCallback(() => { - dispatch(getNextNonce(txData.txParams.from)); - }, [dispatch, txData.txParams.from]); + dispatch(getNextNonce()); + }, [getNextNonce, dispatch]); useEffect(() => { - dispatch(getNextNonce(txData.txParams.from)); - }, [dispatch, txData.txParams.from]); + dispatch(getNextNonce()); + }, [getNextNonce, dispatch]); const handleUpdateCustomNonce = (value) => { dispatch(updateCustomNonce(value)); @@ -403,7 +387,7 @@ export default function TokenAllowance({ tokenName={tokenSymbol} address={tokenAddress} chainId={fullTxData.chainId} - blockExplorerUrl={blockExplorerUrl} + rpcPrefs={rpcPrefs} /> ); @@ -726,7 +710,7 @@ export default function TokenAllowance({ tokenAddress={tokenAddress} toAddress={toAddress} chainId={fullTxData.chainId} - blockExplorerUrl={blockExplorerUrl} + rpcPrefs={rpcPrefs} /> )} diff --git a/ui/pages/confirmations/token-allowance/token-allowance.test.js b/ui/pages/confirmations/token-allowance/token-allowance.test.js index 68df89777c7e..ddfc48a2cfaa 100644 --- a/ui/pages/confirmations/token-allowance/token-allowance.test.js +++ b/ui/pages/confirmations/token-allowance/token-allowance.test.js @@ -203,7 +203,7 @@ describe('TokenAllowancePage', () => { status: 'unapproved', originalGasEstimate: '0xea60', userEditedGasLimit: false, - chainId: CHAIN_IDS.MAINNET, + chainId: '0x3', loadingDefaults: false, dappSuggestedGasFees: { gasPrice: '0x4a817c800', diff --git a/ui/pages/confirmations/utils/confirm.ts b/ui/pages/confirmations/utils/confirm.ts index a007ca0aa0b2..a33c1dae735c 100644 --- a/ui/pages/confirmations/utils/confirm.ts +++ b/ui/pages/confirmations/utils/confirm.ts @@ -23,9 +23,6 @@ export const REDESIGN_USER_TRANSACTION_TYPES = [ TransactionType.tokenMethodIncreaseAllowance, TransactionType.tokenMethodSetApprovalForAll, TransactionType.tokenMethodTransfer, - TransactionType.tokenMethodTransferFrom, - TransactionType.tokenMethodSafeTransferFrom, - TransactionType.simpleSend, ]; export const REDESIGN_DEV_TRANSACTION_TYPES = [ diff --git a/ui/pages/error-page/error-component.test.tsx b/ui/pages/error-page/error-component.test.tsx deleted file mode 100644 index 16188c30881a..000000000000 --- a/ui/pages/error-page/error-component.test.tsx +++ /dev/null @@ -1,192 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import '@testing-library/jest-dom/extend-expect'; -import browser from 'webextension-polyfill'; -import { fireEvent } from '@testing-library/react'; -import { renderWithProvider } from '../../../test/lib/render-helpers'; -import { useI18nContext } from '../../hooks/useI18nContext'; -import { MetaMetricsContext } from '../../contexts/metametrics'; -import { getParticipateInMetaMetrics } from '../../selectors'; -import { getMessage } from '../../helpers/utils/i18n-helper'; -// eslint-disable-next-line import/no-restricted-paths -import messages from '../../../app/_locales/en/messages.json'; -import { SUPPORT_REQUEST_LINK } from '../../helpers/constants/common'; -import { - MetaMetricsContextProp, - MetaMetricsEventCategory, - MetaMetricsEventName, -} from '../../../shared/constants/metametrics'; -import ErrorPage from './error-page.component'; - -jest.mock('../../hooks/useI18nContext', () => ({ - useI18nContext: jest.fn(), -})); - -jest.mock('webextension-polyfill', () => ({ - runtime: { - reload: jest.fn(), - }, -})); - -jest.mock('react-redux', () => ({ - ...jest.requireActual('react-redux'), - useSelector: jest.fn(), -})); - -describe('ErrorPage', () => { - const useSelectorMock = useSelector as jest.Mock; - const mockTrackEvent = jest.fn(); - const MockError = new Error( - "Cannot read properties of undefined (reading 'message')", - ) as Error & { code?: string }; - MockError.code = '500'; - - const mockI18nContext = jest - .fn() - .mockReturnValue((key: string, variables: string[]) => - getMessage('en', messages, key, variables), - ); - - beforeEach(() => { - useSelectorMock.mockImplementation((selector) => { - if (selector === getParticipateInMetaMetrics) { - return true; - } - return undefined; - }); - (useI18nContext as jest.Mock).mockImplementation(mockI18nContext); - jest.useFakeTimers(); - }); - - afterEach(() => { - jest.useRealTimers(); - }); - - it('should render the error message, code, and name if provided', () => { - const { getByTestId } = renderWithProvider( - - - , - ); - - expect( - getByTestId('error-page-error-message').textContent, - ).toMatchInlineSnapshot( - `"Message: Cannot read properties of undefined (reading 'message')"`, - ); - expect( - getByTestId('error-page-error-code').textContent, - ).toMatchInlineSnapshot(`"Code: 500"`); - expect( - getByTestId('error-page-error-name').textContent, - ).toMatchInlineSnapshot(`"Code: Error"`); - }); - - it('should not render error details if no error information is provided', () => { - const error = {}; - - const { queryByTestId } = renderWithProvider( - - - , - ); - - expect(queryByTestId('error-page-error-message')).toBeNull(); - expect(queryByTestId('error-page-error-code')).toBeNull(); - expect(queryByTestId('error-page-error-name')).toBeNull(); - expect(queryByTestId('error-page-error-stack')).toBeNull(); - }); - - it('should render sentry user feedback form and submit sentry report successfully when metrics is opted in', () => { - const { getByTestId, queryByTestId } = renderWithProvider( - - - , - ); - const describeButton = getByTestId( - 'error-page-describe-what-happened-button', - ); - fireEvent.click(describeButton); - expect( - queryByTestId('error-page-sentry-feedback-modal'), - ).toBeInTheDocument(); - const textarea = getByTestId('error-page-sentry-feedback-textarea'); - fireEvent.change(textarea, { - target: { value: 'Something went wrong on develop option page' }, - }); - const submitButton = getByTestId( - 'error-page-sentry-feedback-submit-button', - ); - fireEvent.click(submitButton); - expect( - queryByTestId('error-page-sentry-feedback-modal'), - ).not.toBeInTheDocument(); - expect( - queryByTestId('error-page-sentry-feedback-success-modal'), - ).toBeInTheDocument(); - jest.advanceTimersByTime(5000); - expect( - queryByTestId('error-page-sentry-feedback-modal'), - ).not.toBeInTheDocument(); - }); - - it('should render not sentry user feedback option when metrics is not opted in', () => { - useSelectorMock.mockImplementation((selector) => { - if (selector === getParticipateInMetaMetrics) { - return false; - } - return undefined; - }); - const { queryByTestId } = renderWithProvider( - - - , - ); - const describeButton = queryByTestId( - 'error-page-describe-what-happened-button', - ); - - expect(describeButton).toBeNull(); - }); - - it('should reload the extension when the "Try Again" button is clicked', () => { - const { getByTestId } = renderWithProvider( - - - , - ); - const tryAgainButton = getByTestId('error-page-try-again-button'); - fireEvent.click(tryAgainButton); - expect(browser.runtime.reload).toHaveBeenCalled(); - }); - - it('should open the support link and track the MetaMetrics event when the "Contact Support" button is clicked', () => { - window.open = jest.fn(); - - const { getByTestId } = renderWithProvider( - - - , - ); - - const contactSupportButton = getByTestId( - 'error-page-contact-support-button', - ); - fireEvent.click(contactSupportButton); - - expect(window.open).toHaveBeenCalledWith(SUPPORT_REQUEST_LINK, '_blank'); - - expect(mockTrackEvent).toHaveBeenCalledWith( - { - category: MetaMetricsEventCategory.Error, - event: MetaMetricsEventName.SupportLinkClicked, - properties: { - url: SUPPORT_REQUEST_LINK, - }, - }, - { - contextPropsIntoEventProperties: [MetaMetricsContextProp.PageTitle], - }, - ); - }); -}); diff --git a/ui/pages/error-page/error-page.component.tsx b/ui/pages/error-page/error-page.component.tsx deleted file mode 100644 index 9a094057dcc0..000000000000 --- a/ui/pages/error-page/error-page.component.tsx +++ /dev/null @@ -1,312 +0,0 @@ -import React, { useEffect, useContext, useState } from 'react'; -import { useSelector } from 'react-redux'; -import * as Sentry from '@sentry/browser'; -import browser from 'webextension-polyfill'; -import { - MetaMetricsContextProp, - MetaMetricsEventCategory, - MetaMetricsEventName, -} from '../../../shared/constants/metametrics'; - -import { getParticipateInMetaMetrics } from '../../selectors'; -import { MetaMetricsContext } from '../../contexts/metametrics'; -import { useI18nContext } from '../../hooks/useI18nContext'; -import { - BannerAlert, - Box, - Icon, - IconName, - IconSize, - Text, - Button, - ButtonVariant, - Modal, - ModalOverlay, - ModalContent, - ModalHeader, - ModalBody, - ModalFooter, -} from '../../components/component-library'; -import { - AlignItems, - BackgroundColor, - BlockSize, - BorderRadius, - Display, - FlexDirection, - IconColor, - JustifyContent, - TextColor, - TextVariant, -} from '../../helpers/constants/design-system'; - -import { SUPPORT_REQUEST_LINK } from '../../helpers/constants/common'; - -import { Textarea } from '../../components/component-library/textarea/textarea'; -import { TextareaResize } from '../../components/component-library/textarea/textarea.types'; -import { ButtonSize } from '../../components/component-library/button/button.types'; - -type ErrorPageProps = { - error: { - message?: string; - code?: string; - name?: string; - stack?: string; - }; -}; - -const ErrorPage: React.FC = ({ error }) => { - const t = useI18nContext(); - const trackEvent = useContext(MetaMetricsContext); - const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics); - - const [feedbackMessage, setFeedbackMessage] = useState(''); - const [isFeedbackModalOpen, setIsFeedbackModalOpen] = useState(false); - const [isSuccessModalShown, setIsSuccessModalShown] = useState(false); - - const handleClickDescribeButton = (): void => { - setIsFeedbackModalOpen(true); - }; - - const handleCloseDescribeModal = (): void => { - setIsFeedbackModalOpen(false); - }; - - const handleSubmitFeedback = (e: React.MouseEvent) => { - e.preventDefault(); - const eventId = Sentry.lastEventId(); - - Sentry.captureFeedback({ - message: feedbackMessage, - associatedEventId: eventId, - }); - handleCloseDescribeModal(); - setIsSuccessModalShown(true); - }; - - useEffect(() => { - if (isSuccessModalShown) { - const timeoutId = setTimeout(() => { - setIsSuccessModalShown(false); // Close the modal after 5 seconds - }, 5000); - - // Cleanup function to clear timeout if the component unmounts or state changes - return () => clearTimeout(timeoutId); - } - return undefined; - }, [isSuccessModalShown]); - - return ( -
-
- - - - {t('errorPageTitle')} - - - -
- {t('errorPageInfo')} -
- - {t('errorPageMessageTitle')} - - - {error.message ? ( - - {t('errorMessage', [error.message])} - - ) : null} - {error.code ? ( - - {t('errorCode', [error.code])} - - ) : null} - {error.name ? ( - - {t('errorName', [error.name])} - - ) : null} - {error.stack ? ( - <> - - {t('errorStack')} - - 
-                {error.stack}
-
- - ) : null} - - - {isFeedbackModalOpen && ( - - - - - {t('errorPageSentryFormTitle')} - - -