From 134d9a660d593d4add38fcfa63f4b88da9bab806 Mon Sep 17 00:00:00 2001 From: legobeat <109787230+legobeat@users.noreply.github.com> Date: Tue, 22 Oct 2024 12:43:21 +0000 Subject: [PATCH 001/116] fix(deps): gridplus-sdk@2.5.1->~2.6.0 (#27973) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** - fix(deps): `gridplus-sdk@2.5.1->~2.6.0` - `2.7.0` updates to `@ethereumjs/tx` 5, so holding at 2.6 - removes dependency on legacy `ethereum-cryptography` v1 - dedupe and unpin `@ethereumjs/tx` to `^4.2.0` - `eth-lattice-keyring` is pinned to `@ethereumjs/tx@4.1.1` - `gridplus-sdk` is pinned to `@ethereumjs/tx@4.1.2` - fix(deps): bump `elliptic@6.5.4->^6.5.7` via resolutions - fix(deps): bump `secp256k` [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27973?quickstart=1) ## **Related issues** - https://github.com/GridPlus/eth-lattice-keyring/pull/64 - https://github.com/GridPlus/gridplus-sdk/issues/547 ## **Manual testing steps** ## **Screenshots/Recordings** ### **Before** ### **After** ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- lavamoat/browserify/beta/policy.json | 163 +++------------- lavamoat/browserify/flask/policy.json | 163 +++------------- lavamoat/browserify/main/policy.json | 163 +++------------- lavamoat/browserify/mmi/policy.json | 163 +++------------- package.json | 18 +- yarn.lock | 266 +++++++------------------- 6 files changed, 192 insertions(+), 744 deletions(-) diff --git a/lavamoat/browserify/beta/policy.json b/lavamoat/browserify/beta/policy.json index 9cbdda6ac03e..1ec0abe0f909 100644 --- a/lavamoat/browserify/beta/policy.json +++ b/lavamoat/browserify/beta/policy.json @@ -182,16 +182,28 @@ "crypto": true }, "packages": { + "@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true, "@ethereumjs/tx>ethereum-cryptography>@scure/bip32": true, - "@metamask/message-signing-snap>@noble/curves": true, - "@noble/hashes": true + "@metamask/message-signing-snap>@noble/curves": true + } + }, + "@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@ethereumjs/tx>ethereum-cryptography>@scure/bip32": { "packages": { + "@ethereumjs/tx>ethereum-cryptography>@scure/bip32>@noble/hashes": true, "@metamask/message-signing-snap>@noble/curves": true, - "@metamask/utils>@scure/base": true, - "@noble/hashes": true + "@metamask/utils>@scure/base": true + } + }, + "@ethereumjs/tx>ethereum-cryptography>@scure/bip32>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@ethersproject/abi": { @@ -1498,7 +1510,13 @@ "TextEncoder": true }, "packages": { - "@noble/hashes": true + "@metamask/message-signing-snap>@noble/curves>@noble/hashes": true + } + }, + "@metamask/message-signing-snap>@noble/curves>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@metamask/name-controller": { @@ -4073,59 +4091,16 @@ "setInterval": true }, "packages": { + "@ethereumjs/tx": true, "@ethereumjs/tx>@ethereumjs/util": true, "bn.js": true, "browserify>buffer": true, "crypto-browserify": true, - "eth-lattice-keyring>@ethereumjs/tx": true, "eth-lattice-keyring>gridplus-sdk": true, "eth-lattice-keyring>rlp": true, "webpack>events": true } }, - "eth-lattice-keyring>@ethereumjs/tx": { - "packages": { - "@ethereumjs/tx>@ethereumjs/common": true, - "@ethereumjs/tx>@ethereumjs/rlp": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "@ethersproject/providers": true, - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": true, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": { - "packages": { - "browserify": true, - "browserify>buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>@chainsafe/persistent-merkle-tree": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>case": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>@chainsafe/persistent-merkle-tree": { - "globals": { - "WeakRef": true - }, - "packages": { - "browserify": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography": { - "globals": { - "TextDecoder": true, - "crypto": true - }, - "packages": { - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { - "globals": { - "TextEncoder": true, - "crypto": true - } - }, "eth-lattice-keyring>gridplus-sdk": { "globals": { "AbortController": true, @@ -4141,20 +4116,20 @@ "setTimeout": true }, "packages": { + "@ethereumjs/tx": true, "@ethereumjs/tx>@ethereumjs/common>crc-32": true, "@ethersproject/abi": true, + "@metamask/eth-sig-util": true, "@metamask/ethjs>js-sha3": true, "@metamask/keyring-api>bech32": true, + "@metamask/ppom-validator>elliptic": true, "bn.js": true, "browserify>buffer": true, "eth-lattice-keyring>gridplus-sdk>@ethereumjs/common": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx": true, "eth-lattice-keyring>gridplus-sdk>aes-js": true, "eth-lattice-keyring>gridplus-sdk>bignumber.js": true, "eth-lattice-keyring>gridplus-sdk>bitwise": true, "eth-lattice-keyring>gridplus-sdk>borc": true, - "eth-lattice-keyring>gridplus-sdk>elliptic": true, - "eth-lattice-keyring>gridplus-sdk>eth-eip712-util-browser": true, "eth-lattice-keyring>gridplus-sdk>rlp": true, "eth-lattice-keyring>gridplus-sdk>secp256k1": true, "eth-lattice-keyring>gridplus-sdk>uuid": true, @@ -4171,41 +4146,6 @@ "webpack>events": true } }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx": { - "packages": { - "@ethereumjs/tx>@ethereumjs/rlp": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "@ethersproject/providers": true, - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>@ethereumjs/common": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>@ethereumjs/common": { - "packages": { - "@ethereumjs/tx>@ethereumjs/common>crc-32": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "browserify>buffer": true, - "webpack>events": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography": { - "globals": { - "TextDecoder": true, - "crypto": true - }, - "packages": { - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { - "globals": { - "TextEncoder": true, - "crypto": true - } - }, "eth-lattice-keyring>gridplus-sdk>aes-js": { "globals": { "define": true @@ -4246,27 +4186,6 @@ "location": true } }, - "eth-lattice-keyring>gridplus-sdk>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true - } - }, - "eth-lattice-keyring>gridplus-sdk>eth-eip712-util-browser": { - "globals": { - "intToBuffer": true - }, - "packages": { - "@metamask/ethjs>js-sha3": true, - "bn.js": true, - "buffer": true - } - }, "eth-lattice-keyring>gridplus-sdk>rlp": { "globals": { "TextEncoder": true @@ -4274,18 +4193,7 @@ }, "eth-lattice-keyring>gridplus-sdk>secp256k1": { "packages": { - "eth-lattice-keyring>gridplus-sdk>secp256k1>elliptic": true - } - }, - "eth-lattice-keyring>gridplus-sdk>secp256k1>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true + "@metamask/ppom-validator>elliptic": true } }, "eth-lattice-keyring>gridplus-sdk>uuid": { @@ -4609,20 +4517,9 @@ "ethers>@ethersproject/signing-key": { "packages": { "@ethersproject/bytes": true, + "@metamask/ppom-validator>elliptic": true, "ethers>@ethersproject/logger": true, - "ethers>@ethersproject/properties": true, - "ethers>@ethersproject/signing-key>elliptic": true - } - }, - "ethers>@ethersproject/signing-key>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true + "ethers>@ethersproject/properties": true } }, "ethers>@ethersproject/solidity": { diff --git a/lavamoat/browserify/flask/policy.json b/lavamoat/browserify/flask/policy.json index 9cbdda6ac03e..1ec0abe0f909 100644 --- a/lavamoat/browserify/flask/policy.json +++ b/lavamoat/browserify/flask/policy.json @@ -182,16 +182,28 @@ "crypto": true }, "packages": { + "@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true, "@ethereumjs/tx>ethereum-cryptography>@scure/bip32": true, - "@metamask/message-signing-snap>@noble/curves": true, - "@noble/hashes": true + "@metamask/message-signing-snap>@noble/curves": true + } + }, + "@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@ethereumjs/tx>ethereum-cryptography>@scure/bip32": { "packages": { + "@ethereumjs/tx>ethereum-cryptography>@scure/bip32>@noble/hashes": true, "@metamask/message-signing-snap>@noble/curves": true, - "@metamask/utils>@scure/base": true, - "@noble/hashes": true + "@metamask/utils>@scure/base": true + } + }, + "@ethereumjs/tx>ethereum-cryptography>@scure/bip32>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@ethersproject/abi": { @@ -1498,7 +1510,13 @@ "TextEncoder": true }, "packages": { - "@noble/hashes": true + "@metamask/message-signing-snap>@noble/curves>@noble/hashes": true + } + }, + "@metamask/message-signing-snap>@noble/curves>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@metamask/name-controller": { @@ -4073,59 +4091,16 @@ "setInterval": true }, "packages": { + "@ethereumjs/tx": true, "@ethereumjs/tx>@ethereumjs/util": true, "bn.js": true, "browserify>buffer": true, "crypto-browserify": true, - "eth-lattice-keyring>@ethereumjs/tx": true, "eth-lattice-keyring>gridplus-sdk": true, "eth-lattice-keyring>rlp": true, "webpack>events": true } }, - "eth-lattice-keyring>@ethereumjs/tx": { - "packages": { - "@ethereumjs/tx>@ethereumjs/common": true, - "@ethereumjs/tx>@ethereumjs/rlp": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "@ethersproject/providers": true, - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": true, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": { - "packages": { - "browserify": true, - "browserify>buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>@chainsafe/persistent-merkle-tree": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>case": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>@chainsafe/persistent-merkle-tree": { - "globals": { - "WeakRef": true - }, - "packages": { - "browserify": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography": { - "globals": { - "TextDecoder": true, - "crypto": true - }, - "packages": { - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { - "globals": { - "TextEncoder": true, - "crypto": true - } - }, "eth-lattice-keyring>gridplus-sdk": { "globals": { "AbortController": true, @@ -4141,20 +4116,20 @@ "setTimeout": true }, "packages": { + "@ethereumjs/tx": true, "@ethereumjs/tx>@ethereumjs/common>crc-32": true, "@ethersproject/abi": true, + "@metamask/eth-sig-util": true, "@metamask/ethjs>js-sha3": true, "@metamask/keyring-api>bech32": true, + "@metamask/ppom-validator>elliptic": true, "bn.js": true, "browserify>buffer": true, "eth-lattice-keyring>gridplus-sdk>@ethereumjs/common": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx": true, "eth-lattice-keyring>gridplus-sdk>aes-js": true, "eth-lattice-keyring>gridplus-sdk>bignumber.js": true, "eth-lattice-keyring>gridplus-sdk>bitwise": true, "eth-lattice-keyring>gridplus-sdk>borc": true, - "eth-lattice-keyring>gridplus-sdk>elliptic": true, - "eth-lattice-keyring>gridplus-sdk>eth-eip712-util-browser": true, "eth-lattice-keyring>gridplus-sdk>rlp": true, "eth-lattice-keyring>gridplus-sdk>secp256k1": true, "eth-lattice-keyring>gridplus-sdk>uuid": true, @@ -4171,41 +4146,6 @@ "webpack>events": true } }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx": { - "packages": { - "@ethereumjs/tx>@ethereumjs/rlp": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "@ethersproject/providers": true, - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>@ethereumjs/common": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>@ethereumjs/common": { - "packages": { - "@ethereumjs/tx>@ethereumjs/common>crc-32": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "browserify>buffer": true, - "webpack>events": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography": { - "globals": { - "TextDecoder": true, - "crypto": true - }, - "packages": { - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { - "globals": { - "TextEncoder": true, - "crypto": true - } - }, "eth-lattice-keyring>gridplus-sdk>aes-js": { "globals": { "define": true @@ -4246,27 +4186,6 @@ "location": true } }, - "eth-lattice-keyring>gridplus-sdk>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true - } - }, - "eth-lattice-keyring>gridplus-sdk>eth-eip712-util-browser": { - "globals": { - "intToBuffer": true - }, - "packages": { - "@metamask/ethjs>js-sha3": true, - "bn.js": true, - "buffer": true - } - }, "eth-lattice-keyring>gridplus-sdk>rlp": { "globals": { "TextEncoder": true @@ -4274,18 +4193,7 @@ }, "eth-lattice-keyring>gridplus-sdk>secp256k1": { "packages": { - "eth-lattice-keyring>gridplus-sdk>secp256k1>elliptic": true - } - }, - "eth-lattice-keyring>gridplus-sdk>secp256k1>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true + "@metamask/ppom-validator>elliptic": true } }, "eth-lattice-keyring>gridplus-sdk>uuid": { @@ -4609,20 +4517,9 @@ "ethers>@ethersproject/signing-key": { "packages": { "@ethersproject/bytes": true, + "@metamask/ppom-validator>elliptic": true, "ethers>@ethersproject/logger": true, - "ethers>@ethersproject/properties": true, - "ethers>@ethersproject/signing-key>elliptic": true - } - }, - "ethers>@ethersproject/signing-key>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true + "ethers>@ethersproject/properties": true } }, "ethers>@ethersproject/solidity": { diff --git a/lavamoat/browserify/main/policy.json b/lavamoat/browserify/main/policy.json index 9cbdda6ac03e..1ec0abe0f909 100644 --- a/lavamoat/browserify/main/policy.json +++ b/lavamoat/browserify/main/policy.json @@ -182,16 +182,28 @@ "crypto": true }, "packages": { + "@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true, "@ethereumjs/tx>ethereum-cryptography>@scure/bip32": true, - "@metamask/message-signing-snap>@noble/curves": true, - "@noble/hashes": true + "@metamask/message-signing-snap>@noble/curves": true + } + }, + "@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@ethereumjs/tx>ethereum-cryptography>@scure/bip32": { "packages": { + "@ethereumjs/tx>ethereum-cryptography>@scure/bip32>@noble/hashes": true, "@metamask/message-signing-snap>@noble/curves": true, - "@metamask/utils>@scure/base": true, - "@noble/hashes": true + "@metamask/utils>@scure/base": true + } + }, + "@ethereumjs/tx>ethereum-cryptography>@scure/bip32>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@ethersproject/abi": { @@ -1498,7 +1510,13 @@ "TextEncoder": true }, "packages": { - "@noble/hashes": true + "@metamask/message-signing-snap>@noble/curves>@noble/hashes": true + } + }, + "@metamask/message-signing-snap>@noble/curves>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@metamask/name-controller": { @@ -4073,59 +4091,16 @@ "setInterval": true }, "packages": { + "@ethereumjs/tx": true, "@ethereumjs/tx>@ethereumjs/util": true, "bn.js": true, "browserify>buffer": true, "crypto-browserify": true, - "eth-lattice-keyring>@ethereumjs/tx": true, "eth-lattice-keyring>gridplus-sdk": true, "eth-lattice-keyring>rlp": true, "webpack>events": true } }, - "eth-lattice-keyring>@ethereumjs/tx": { - "packages": { - "@ethereumjs/tx>@ethereumjs/common": true, - "@ethereumjs/tx>@ethereumjs/rlp": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "@ethersproject/providers": true, - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": true, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": { - "packages": { - "browserify": true, - "browserify>buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>@chainsafe/persistent-merkle-tree": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>case": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>@chainsafe/persistent-merkle-tree": { - "globals": { - "WeakRef": true - }, - "packages": { - "browserify": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography": { - "globals": { - "TextDecoder": true, - "crypto": true - }, - "packages": { - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { - "globals": { - "TextEncoder": true, - "crypto": true - } - }, "eth-lattice-keyring>gridplus-sdk": { "globals": { "AbortController": true, @@ -4141,20 +4116,20 @@ "setTimeout": true }, "packages": { + "@ethereumjs/tx": true, "@ethereumjs/tx>@ethereumjs/common>crc-32": true, "@ethersproject/abi": true, + "@metamask/eth-sig-util": true, "@metamask/ethjs>js-sha3": true, "@metamask/keyring-api>bech32": true, + "@metamask/ppom-validator>elliptic": true, "bn.js": true, "browserify>buffer": true, "eth-lattice-keyring>gridplus-sdk>@ethereumjs/common": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx": true, "eth-lattice-keyring>gridplus-sdk>aes-js": true, "eth-lattice-keyring>gridplus-sdk>bignumber.js": true, "eth-lattice-keyring>gridplus-sdk>bitwise": true, "eth-lattice-keyring>gridplus-sdk>borc": true, - "eth-lattice-keyring>gridplus-sdk>elliptic": true, - "eth-lattice-keyring>gridplus-sdk>eth-eip712-util-browser": true, "eth-lattice-keyring>gridplus-sdk>rlp": true, "eth-lattice-keyring>gridplus-sdk>secp256k1": true, "eth-lattice-keyring>gridplus-sdk>uuid": true, @@ -4171,41 +4146,6 @@ "webpack>events": true } }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx": { - "packages": { - "@ethereumjs/tx>@ethereumjs/rlp": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "@ethersproject/providers": true, - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>@ethereumjs/common": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>@ethereumjs/common": { - "packages": { - "@ethereumjs/tx>@ethereumjs/common>crc-32": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "browserify>buffer": true, - "webpack>events": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography": { - "globals": { - "TextDecoder": true, - "crypto": true - }, - "packages": { - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { - "globals": { - "TextEncoder": true, - "crypto": true - } - }, "eth-lattice-keyring>gridplus-sdk>aes-js": { "globals": { "define": true @@ -4246,27 +4186,6 @@ "location": true } }, - "eth-lattice-keyring>gridplus-sdk>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true - } - }, - "eth-lattice-keyring>gridplus-sdk>eth-eip712-util-browser": { - "globals": { - "intToBuffer": true - }, - "packages": { - "@metamask/ethjs>js-sha3": true, - "bn.js": true, - "buffer": true - } - }, "eth-lattice-keyring>gridplus-sdk>rlp": { "globals": { "TextEncoder": true @@ -4274,18 +4193,7 @@ }, "eth-lattice-keyring>gridplus-sdk>secp256k1": { "packages": { - "eth-lattice-keyring>gridplus-sdk>secp256k1>elliptic": true - } - }, - "eth-lattice-keyring>gridplus-sdk>secp256k1>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true + "@metamask/ppom-validator>elliptic": true } }, "eth-lattice-keyring>gridplus-sdk>uuid": { @@ -4609,20 +4517,9 @@ "ethers>@ethersproject/signing-key": { "packages": { "@ethersproject/bytes": true, + "@metamask/ppom-validator>elliptic": true, "ethers>@ethersproject/logger": true, - "ethers>@ethersproject/properties": true, - "ethers>@ethersproject/signing-key>elliptic": true - } - }, - "ethers>@ethersproject/signing-key>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true + "ethers>@ethersproject/properties": true } }, "ethers>@ethersproject/solidity": { diff --git a/lavamoat/browserify/mmi/policy.json b/lavamoat/browserify/mmi/policy.json index fae253f8b9d5..07796dc92f74 100644 --- a/lavamoat/browserify/mmi/policy.json +++ b/lavamoat/browserify/mmi/policy.json @@ -182,16 +182,28 @@ "crypto": true }, "packages": { + "@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true, "@ethereumjs/tx>ethereum-cryptography>@scure/bip32": true, - "@metamask/message-signing-snap>@noble/curves": true, - "@noble/hashes": true + "@metamask/message-signing-snap>@noble/curves": true + } + }, + "@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@ethereumjs/tx>ethereum-cryptography>@scure/bip32": { "packages": { + "@ethereumjs/tx>ethereum-cryptography>@scure/bip32>@noble/hashes": true, "@metamask/message-signing-snap>@noble/curves": true, - "@metamask/utils>@scure/base": true, - "@noble/hashes": true + "@metamask/utils>@scure/base": true + } + }, + "@ethereumjs/tx>ethereum-cryptography>@scure/bip32>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@ethersproject/abi": { @@ -1590,7 +1602,13 @@ "TextEncoder": true }, "packages": { - "@noble/hashes": true + "@metamask/message-signing-snap>@noble/curves>@noble/hashes": true + } + }, + "@metamask/message-signing-snap>@noble/curves>@noble/hashes": { + "globals": { + "TextEncoder": true, + "crypto": true } }, "@metamask/name-controller": { @@ -4165,59 +4183,16 @@ "setInterval": true }, "packages": { + "@ethereumjs/tx": true, "@ethereumjs/tx>@ethereumjs/util": true, "bn.js": true, "browserify>buffer": true, "crypto-browserify": true, - "eth-lattice-keyring>@ethereumjs/tx": true, "eth-lattice-keyring>gridplus-sdk": true, "eth-lattice-keyring>rlp": true, "webpack>events": true } }, - "eth-lattice-keyring>@ethereumjs/tx": { - "packages": { - "@ethereumjs/tx>@ethereumjs/common": true, - "@ethereumjs/tx>@ethereumjs/rlp": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "@ethersproject/providers": true, - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": true, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": { - "packages": { - "browserify": true, - "browserify>buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>@chainsafe/persistent-merkle-tree": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>case": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz>@chainsafe/persistent-merkle-tree": { - "globals": { - "WeakRef": true - }, - "packages": { - "browserify": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography": { - "globals": { - "TextDecoder": true, - "crypto": true - }, - "packages": { - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true - } - }, - "eth-lattice-keyring>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { - "globals": { - "TextEncoder": true, - "crypto": true - } - }, "eth-lattice-keyring>gridplus-sdk": { "globals": { "AbortController": true, @@ -4233,20 +4208,20 @@ "setTimeout": true }, "packages": { + "@ethereumjs/tx": true, "@ethereumjs/tx>@ethereumjs/common>crc-32": true, "@ethersproject/abi": true, + "@metamask/eth-sig-util": true, "@metamask/ethjs>js-sha3": true, "@metamask/keyring-api>bech32": true, + "@metamask/ppom-validator>elliptic": true, "bn.js": true, "browserify>buffer": true, "eth-lattice-keyring>gridplus-sdk>@ethereumjs/common": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx": true, "eth-lattice-keyring>gridplus-sdk>aes-js": true, "eth-lattice-keyring>gridplus-sdk>bignumber.js": true, "eth-lattice-keyring>gridplus-sdk>bitwise": true, "eth-lattice-keyring>gridplus-sdk>borc": true, - "eth-lattice-keyring>gridplus-sdk>elliptic": true, - "eth-lattice-keyring>gridplus-sdk>eth-eip712-util-browser": true, "eth-lattice-keyring>gridplus-sdk>rlp": true, "eth-lattice-keyring>gridplus-sdk>secp256k1": true, "eth-lattice-keyring>gridplus-sdk>uuid": true, @@ -4263,41 +4238,6 @@ "webpack>events": true } }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx": { - "packages": { - "@ethereumjs/tx>@ethereumjs/rlp": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "@ethersproject/providers": true, - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true, - "eth-lattice-keyring>@ethereumjs/tx>@chainsafe/ssz": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>@ethereumjs/common": true, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>@ethereumjs/common": { - "packages": { - "@ethereumjs/tx>@ethereumjs/common>crc-32": true, - "@ethereumjs/tx>@ethereumjs/util": true, - "browserify>buffer": true, - "webpack>events": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography": { - "globals": { - "TextDecoder": true, - "crypto": true - }, - "packages": { - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": true - } - }, - "eth-lattice-keyring>gridplus-sdk>@ethereumjs/tx>ethereum-cryptography>@noble/hashes": { - "globals": { - "TextEncoder": true, - "crypto": true - } - }, "eth-lattice-keyring>gridplus-sdk>aes-js": { "globals": { "define": true @@ -4338,27 +4278,6 @@ "location": true } }, - "eth-lattice-keyring>gridplus-sdk>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true - } - }, - "eth-lattice-keyring>gridplus-sdk>eth-eip712-util-browser": { - "globals": { - "intToBuffer": true - }, - "packages": { - "@metamask/ethjs>js-sha3": true, - "bn.js": true, - "buffer": true - } - }, "eth-lattice-keyring>gridplus-sdk>rlp": { "globals": { "TextEncoder": true @@ -4366,18 +4285,7 @@ }, "eth-lattice-keyring>gridplus-sdk>secp256k1": { "packages": { - "eth-lattice-keyring>gridplus-sdk>secp256k1>elliptic": true - } - }, - "eth-lattice-keyring>gridplus-sdk>secp256k1>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true + "@metamask/ppom-validator>elliptic": true } }, "eth-lattice-keyring>gridplus-sdk>uuid": { @@ -4701,20 +4609,9 @@ "ethers>@ethersproject/signing-key": { "packages": { "@ethersproject/bytes": true, + "@metamask/ppom-validator>elliptic": true, "ethers>@ethersproject/logger": true, - "ethers>@ethersproject/properties": true, - "ethers>@ethersproject/signing-key>elliptic": true - } - }, - "ethers>@ethersproject/signing-key>elliptic": { - "packages": { - "@metamask/ppom-validator>elliptic>brorand": true, - "@metamask/ppom-validator>elliptic>hmac-drbg": true, - "@metamask/ppom-validator>elliptic>minimalistic-assert": true, - "@metamask/ppom-validator>elliptic>minimalistic-crypto-utils": true, - "bn.js": true, - "ethers>@ethersproject/sha2>hash.js": true, - "pumpify>inherits": true + "ethers>@ethersproject/properties": true } }, "ethers>@ethersproject/solidity": { diff --git a/package.json b/package.json index c3b60bfa1e48..2b5baa029c23 100644 --- a/package.json +++ b/package.json @@ -132,6 +132,13 @@ }, "resolutions": { "chokidar": "^3.6.0", + "gridplus-sdk": "~2.6.0", + "gridplus-sdk/secp256k1": "^5.0.1", + "eth-lattice-keyring/@ethereumjs/tx": "^4.2.0", + "gridplus-sdk/@ethereumjs/tx": "^4.2.0", + "@ethersproject/signing-key/elliptic": "^6.5.7", + "gridplus-sdk/elliptic": "^6.5.7", + "ganache/secp256k1": "^4.0.4", "simple-update-notifier@^1.0.0": "^2.0.0", "@babel/core": "patch:@babel/core@npm%3A7.23.2#~/.yarn/patches/@babel-core-npm-7.23.2-b93f586907.patch", "@types/react": "^16.9.53", @@ -698,16 +705,9 @@ "@eth-optimism/contracts>@ethersproject/hardware-wallets>@ledgerhq/hw-transport-node-hid>@ledgerhq/hw-transport-node-hid-noevents>node-hid": false, "@eth-optimism/contracts>@ethersproject/hardware-wallets>@ledgerhq/hw-transport-node-hid>node-hid": false, "@eth-optimism/contracts>@ethersproject/hardware-wallets>@ledgerhq/hw-transport-node-hid>usb": false, - "@metamask/controllers>web3-provider-engine>ethereumjs-util>keccak": false, - "@metamask/controllers>web3-provider-engine>ethereumjs-util>secp256k1": false, - "@metamask/controllers>web3-provider-engine>ethereumjs-vm>merkle-patricia-tree>ethereumjs-util>keccak": false, - "@metamask/controllers>web3-provider-engine>ethereumjs-vm>merkle-patricia-tree>ethereumjs-util>secp256k1": false, - "@metamask/eth-ledger-bridge-keyring>hdkey>secp256k1": false, "@storybook/api>core-js": false, "@storybook/core>@storybook/core-client>@storybook/ui>core-js-pure": false, "@storybook/test-runner>@storybook/core-common>esbuild": false, - "eth-json-rpc-filters>eth-json-rpc-middleware>ethereumjs-util>keccak": false, - "eth-json-rpc-filters>eth-json-rpc-middleware>ethereumjs-util>secp256k1": false, "eth-lattice-keyring>gridplus-sdk": false, "ethereumjs-util>ethereum-cryptography>keccak": false, "ganache>@trufflesuite/bigint-buffer": false, @@ -718,13 +718,10 @@ "ganache>leveldown": false, "ganache>secp256k1": false, "ganache>utf-8-validate": false, - "ethereumjs-util>ethereum-cryptography>secp256k1": false, "gulp-watch>chokidar>fsevents": false, "gulp>glob-watcher>chokidar>fsevents": false, "webpack>watchpack>watchpack-chokidar2>chokidar>fsevents": false, - "@keystonehq/bc-ur-registry-eth>hdkey>secp256k1": false, "eth-lattice-keyring>gridplus-sdk>secp256k1": false, - "eth-lattice-keyring>secp256k1": false, "@storybook/react>@pmmmwh/react-refresh-webpack-plugin>core-js-pure": false, "@testing-library/jest-dom>aria-query>@babel/runtime-corejs3>core-js-pure": false, "web3": false, @@ -733,7 +730,6 @@ "web3>web3-core>web3-core-requestmanager>web3-providers-ws>websocket>es5-ext": false, "web3>web3-core>web3-core-requestmanager>web3-providers-ws>websocket>utf-8-validate": false, "web3>web3-shh": false, - "@keystonehq/metamask-airgapped-keyring>@keystonehq/base-eth-keyring>hdkey>secp256k1": false, "@metamask/base-controller>simple-git-hooks": false, "@storybook/core>@storybook/core-server>webpack>watchpack>watchpack-chokidar2>chokidar>fsevents": false, "resolve-url-loader>es6-iterator>es5-ext": false, diff --git a/yarn.lock b/yarn.lock index af059f8960e9..4c9e13f82134 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1725,33 +1725,6 @@ __metadata: languageName: node linkType: hard -"@chainsafe/as-sha256@npm:^0.3.1": - version: 0.3.1 - resolution: "@chainsafe/as-sha256@npm:0.3.1" - checksum: 10/3bae7b4bc6e307baa3cf1f9d2c75827874cd0fb458bc592656d741d374b48e71c042fe21616a506cb821487a5abfc6b92181e4b7fbf49b7370cee4df0b67d95a - languageName: node - linkType: hard - -"@chainsafe/persistent-merkle-tree@npm:^0.4.2": - version: 0.4.2 - resolution: "@chainsafe/persistent-merkle-tree@npm:0.4.2" - dependencies: - "@chainsafe/as-sha256": "npm:^0.3.1" - checksum: 10/a7e59f80be3ce0a86fe452a3c003bd159a1719ed22cae22e9841668f0eda8c35412fa16b3b150d96f583a24f430a5cc2a1bfcabafc1b9cf6e1fdb227e98c4dc7 - languageName: node - linkType: hard - -"@chainsafe/ssz@npm:0.9.4": - version: 0.9.4 - resolution: "@chainsafe/ssz@npm:0.9.4" - dependencies: - "@chainsafe/as-sha256": "npm:^0.3.1" - "@chainsafe/persistent-merkle-tree": "npm:^0.4.2" - case: "npm:^1.6.3" - checksum: 10/2fe83d0b3ef131e14b51b88bb3343b14e7a02185fa9fd3da84b4726dbd857daaa4f7f6f4840fe3772fc1380352b1675a13b5f6153c4211c0f00ffa542b62bf2f - languageName: node - linkType: hard - "@colors/colors@npm:1.5.0": version: 1.5.0 resolution: "@colors/colors@npm:1.5.0" @@ -2363,17 +2336,17 @@ __metadata: languageName: node linkType: hard -"@ethereumjs/common@npm:3.1.1": - version: 3.1.1 - resolution: "@ethereumjs/common@npm:3.1.1" +"@ethereumjs/common@npm:3.1.2": + version: 3.1.2 + resolution: "@ethereumjs/common@npm:3.1.2" dependencies: - "@ethereumjs/util": "npm:^8.0.5" + "@ethereumjs/util": "npm:^8.0.6" crc-32: "npm:^1.2.0" - checksum: 10/dcc3dd9ec23e8817ec0bf5bb2217619a8db08ea937603258831a906702e79c6f6e93b47d6edde551c7f46ce4a0268febacc23cefcb4ca2865be3b5c0bf5ec670 + checksum: 10/f65fda8bf9b86e6f5a7a2d149ddcb6df521fcad52a64378a1f09392fe766a498e60cd3d708613786ec70db82b6a3aac0f8f68ee3271dd36444b908eff02e1a7b languageName: node linkType: hard -"@ethereumjs/common@npm:^3.1.1, @ethereumjs/common@npm:^3.2.0": +"@ethereumjs/common@npm:^3.2.0": version: 3.2.0 resolution: "@ethereumjs/common@npm:3.2.0" dependencies: @@ -2410,25 +2383,6 @@ __metadata: languageName: node linkType: hard -"@ethereumjs/tx@npm:4.1.1": - version: 4.1.1 - resolution: "@ethereumjs/tx@npm:4.1.1" - dependencies: - "@chainsafe/ssz": "npm:0.9.4" - "@ethereumjs/common": "npm:^3.1.1" - "@ethereumjs/rlp": "npm:^4.0.1" - "@ethereumjs/util": "npm:^8.0.5" - "@ethersproject/providers": "npm:^5.7.2" - ethereum-cryptography: "npm:^1.1.2" - peerDependencies: - c-kzg: ^1.0.8 - peerDependenciesMeta: - c-kzg: - optional: true - checksum: 10/3074e198e0a550dd47dc359d16aa3bb9336fc52b14681fb0b1bcc8d4bdac62cc384962a13347819488da18bedf9578d4d5f2491e3609cb7fa7b2f6cafeb18b23 - languageName: node - linkType: hard - "@ethereumjs/tx@npm:^4.0.2, @ethereumjs/tx@npm:^4.1.1, @ethereumjs/tx@npm:^4.2.0": version: 4.2.0 resolution: "@ethereumjs/tx@npm:4.2.0" @@ -2453,7 +2407,7 @@ __metadata: languageName: node linkType: hard -"@ethereumjs/util@npm:^8.0.0, @ethereumjs/util@npm:^8.0.5, @ethereumjs/util@npm:^8.1.0": +"@ethereumjs/util@npm:^8.0.0, @ethereumjs/util@npm:^8.0.5, @ethereumjs/util@npm:^8.0.6, @ethereumjs/util@npm:^8.1.0": version: 8.1.0 resolution: "@ethereumjs/util@npm:8.1.0" dependencies: @@ -2474,7 +2428,7 @@ __metadata: languageName: node linkType: hard -"@ethersproject/abi@npm:5.7.0, @ethersproject/abi@npm:^5.5.0, @ethersproject/abi@npm:^5.6.4, @ethersproject/abi@npm:^5.7.0": +"@ethersproject/abi@npm:5.7.0, @ethersproject/abi@npm:^5.6.4, @ethersproject/abi@npm:^5.7.0": version: 5.7.0 resolution: "@ethersproject/abi@npm:5.7.0" dependencies: @@ -5341,7 +5295,7 @@ __metadata: languageName: node linkType: hard -"@metamask/eth-sig-util@npm:^7.0.0, @metamask/eth-sig-util@npm:^7.0.1, @metamask/eth-sig-util@npm:^7.0.3": +"@metamask/eth-sig-util@npm:^7.0.0, @metamask/eth-sig-util@npm:^7.0.1, @metamask/eth-sig-util@npm:^7.0.2, @metamask/eth-sig-util@npm:^7.0.3": version: 7.0.3 resolution: "@metamask/eth-sig-util@npm:7.0.3" dependencies: @@ -6692,13 +6646,6 @@ __metadata: languageName: node linkType: hard -"@noble/hashes@npm:1.1.2": - version: 1.1.2 - resolution: "@noble/hashes@npm:1.1.2" - checksum: 10/2826c94ea30b8d2447fda549f4ffa97a637a480eeef5c96702a2f932c305038465f7436caf5b2bad41eb43c08c270b921e101488b18165feebe3854091b56d91 - languageName: node - linkType: hard - "@noble/hashes@npm:1.3.2": version: 1.3.2 resolution: "@noble/hashes@npm:1.3.2" @@ -6706,17 +6653,17 @@ __metadata: languageName: node linkType: hard -"@noble/hashes@npm:1.4.0, @noble/hashes@npm:^1.1.2, @noble/hashes@npm:^1.2.0, @noble/hashes@npm:^1.3.1, @noble/hashes@npm:^1.3.2, @noble/hashes@npm:^1.3.3, @noble/hashes@npm:^1.4.0, @noble/hashes@npm:~1.4.0": +"@noble/hashes@npm:1.4.0, @noble/hashes@npm:~1.4.0": version: 1.4.0 resolution: "@noble/hashes@npm:1.4.0" checksum: 10/e156e65794c473794c52fa9d06baf1eb20903d0d96719530f523cc4450f6c721a957c544796e6efd0197b2296e7cd70efeb312f861465e17940a3e3c7e0febc6 languageName: node linkType: hard -"@noble/hashes@npm:~1.1.1": - version: 1.1.3 - resolution: "@noble/hashes@npm:1.1.3" - checksum: 10/42e9883649abd85e6a65cfa528e72b2a81ebb601b44db1d71b6ba927cede0627d7d8c649df159a7f84a949dfe17fe268d4b664c5a36c7e0b2a3d4198bc19f5e4 +"@noble/hashes@npm:^1.1.2, @noble/hashes@npm:^1.2.0, @noble/hashes@npm:^1.3.1, @noble/hashes@npm:^1.3.2, @noble/hashes@npm:^1.3.3, @noble/hashes@npm:^1.4.0": + version: 1.5.0 + resolution: "@noble/hashes@npm:1.5.0" + checksum: 10/da7fc7af52af7afcf59810a7eea6155075464ff462ffda2572dc6d57d53e2669b1ea2ec774e814f6273f1697e567f28d36823776c9bf7068cba2a2855140f26e languageName: node linkType: hard @@ -6727,13 +6674,6 @@ __metadata: languageName: node linkType: hard -"@noble/secp256k1@npm:1.6.3, @noble/secp256k1@npm:~1.6.0": - version: 1.6.3 - resolution: "@noble/secp256k1@npm:1.6.3" - checksum: 10/e4f4b0cfa1c5d23fb1b9938fa3cce1a1160a76a89eb91f6dde98075bbdf328709d51771c85b6b4b118f8ce5a6c6554da6c9af7de7716aba56cef30f61a715bd7 - languageName: node - linkType: hard - "@noble/secp256k1@npm:^1.7.0": version: 1.7.1 resolution: "@noble/secp256k1@npm:1.7.1" @@ -7851,21 +7791,10 @@ __metadata: languageName: node linkType: hard -"@scure/base@npm:^1.0.0, @scure/base@npm:^1.1.1, @scure/base@npm:^1.1.3, @scure/base@npm:~1.1.0, @scure/base@npm:~1.1.3, @scure/base@npm:~1.1.6": - version: 1.1.7 - resolution: "@scure/base@npm:1.1.7" - checksum: 10/fc50ffaab36cb46ff9fa4dc5052a06089ab6a6707f63d596bb34aaaec76173c9a564ac312a0b981b5e7a5349d60097b8878673c75d6cbfc4da7012b63a82099b - languageName: node - linkType: hard - -"@scure/bip32@npm:1.1.0": - version: 1.1.0 - resolution: "@scure/bip32@npm:1.1.0" - dependencies: - "@noble/hashes": "npm:~1.1.1" - "@noble/secp256k1": "npm:~1.6.0" - "@scure/base": "npm:~1.1.0" - checksum: 10/e58660fc96dc5c87d0047bf41150fa3b424617e6289ba522cc81bdeecaf1a26e34f01dcd9d76f3e5c2c570ced608a527733cc375abfce4dc9b8e2365719ea5d3 +"@scure/base@npm:^1.0.0, @scure/base@npm:^1.1.1, @scure/base@npm:^1.1.3, @scure/base@npm:~1.1.3, @scure/base@npm:~1.1.6": + version: 1.1.9 + resolution: "@scure/base@npm:1.1.9" + checksum: 10/f0ab7f687bbcdee2a01377fe3cd808bf63977999672751295b6a92625d5322f4754a96d40f6bd579bc367aad48ecf8a4e6d0390e70296e6ded1076f52adb16bb languageName: node linkType: hard @@ -7880,16 +7809,6 @@ __metadata: languageName: node linkType: hard -"@scure/bip39@npm:1.1.0": - version: 1.1.0 - resolution: "@scure/bip39@npm:1.1.0" - dependencies: - "@noble/hashes": "npm:~1.1.1" - "@scure/base": "npm:~1.1.0" - checksum: 10/d843be225dda4b6b2c0f90e52e00eef708df3cecbc944902298d487c669a6d219bd41877b20adaf72ba84aec2f0cb1e4567dafc6ce7295d9f132bdb0dcb375b3 - languageName: node - linkType: hard - "@scure/bip39@npm:1.3.0": version: 1.3.0 resolution: "@scure/bip39@npm:1.3.0" @@ -13511,9 +13430,9 @@ __metadata: linkType: hard "bitwise@npm:^2.0.4": - version: 2.1.0 - resolution: "bitwise@npm:2.1.0" - checksum: 10/d075220e8b8d1e41d0e60c7081811eef108024a094c4e7f5c2ad67235f3bcac9f6ffd218884900591d602fbd61aff9a6c1d650cd5a0e0e34f12e11623aab5da1 + version: 2.2.1 + resolution: "bitwise@npm:2.2.1" + checksum: 10/517aea40f326847935a8ae4367d6beca596982ad55db1d0288a4055c9eba78c6b3ccd10d9ad423df356d946d9a898b36c0d5c06673fba4fb98fb1b58df74788e languageName: node linkType: hard @@ -14416,13 +14335,6 @@ __metadata: languageName: node linkType: hard -"case@npm:^1.6.3": - version: 1.6.3 - resolution: "case@npm:1.6.3" - checksum: 10/2fc1df75bbb4118339e06141b9a54aba95cc62460ac92730290144fbec6b6a04f5bf7abf6a6486a1338f5821bd184402f216cec8cea0472451759c27e20fc332 - languageName: node - linkType: hard - "cashaddrjs@npm:0.4.4": version: 0.4.4 resolution: "cashaddrjs@npm:0.4.4" @@ -15559,14 +15471,11 @@ __metadata: linkType: hard "crc-32@npm:^1.2.0": - version: 1.2.0 - resolution: "crc-32@npm:1.2.0" - dependencies: - exit-on-epipe: "npm:~1.0.1" - printj: "npm:~1.1.0" + version: 1.2.2 + resolution: "crc-32@npm:1.2.2" bin: - crc32: ./bin/crc32.njs - checksum: 10/10c648c986b005ed0ea8393bb0d1ccb99e7a102505b136d313dee6abe204aa682d9bb9bc6fd180f9cd98ef92aa029964f1cc96a2a85eb50507dedd9ead1a262f + crc32: bin/crc32.njs + checksum: 10/824f696a5baaf617809aa9cd033313c8f94f12d15ebffa69f10202480396be44aef9831d900ab291638a8022ed91c360696dd5b1ba691eb3f34e60be8835b7c3 languageName: node linkType: hard @@ -17222,24 +17131,9 @@ __metadata: languageName: node linkType: hard -"elliptic@npm:6.5.4": - version: 6.5.4 - resolution: "elliptic@npm:6.5.4" - dependencies: - bn.js: "npm:^4.11.9" - brorand: "npm:^1.1.0" - hash.js: "npm:^1.0.0" - hmac-drbg: "npm:^1.0.1" - inherits: "npm:^2.0.4" - minimalistic-assert: "npm:^1.0.1" - minimalistic-crypto-utils: "npm:^1.0.1" - checksum: 10/2cd7ff4b69720dbb2ca1ca650b2cf889d1df60c96d4a99d331931e4fe21e45a7f3b8074e86618ca7e56366c4b6258007f234f9d61d9b0c87bbbc8ea990b99e94 - languageName: node - linkType: hard - -"elliptic@npm:^6.0.0, elliptic@npm:^6.4.0, elliptic@npm:^6.5.2, elliptic@npm:^6.5.4": - version: 6.5.6 - resolution: "elliptic@npm:6.5.6" +"elliptic@npm:^6.0.0, elliptic@npm:^6.4.0, elliptic@npm:^6.5.4, elliptic@npm:^6.5.7": + version: 6.5.7 + resolution: "elliptic@npm:6.5.7" dependencies: bn.js: "npm:^4.11.9" brorand: "npm:^1.1.0" @@ -17248,7 +17142,7 @@ __metadata: inherits: "npm:^2.0.4" minimalistic-assert: "npm:^1.0.1" minimalistic-crypto-utils: "npm:^1.0.1" - checksum: 10/09377ec924fdb37775d63e5d7e5ebb2845842e6f08880b68265b1108863e968970c4a4e1c43df622078c8262417deec9a04aeb9d34e8d09a9693e19b5454e1df + checksum: 10/fbad1fad0a5cc07df83f80cc1f7a784247ef59075194d3e340eaeb2f4dd594825ee24c7e9b0cf279c9f1982efe610503bb3139737926428c4821d4fca1bcf348 languageName: node linkType: hard @@ -18424,20 +18318,9 @@ __metadata: linkType: hard "eth-chainlist@npm:~0.0.498": - version: 0.0.498 - resolution: "eth-chainlist@npm:0.0.498" - checksum: 10/a414c0e1f0a877f9ab8bf1cf775556308ddbb66618e368666d4dea9a0b949febedf8ca5440cf57419413404e7661f1e3d040802faf532d0e1618c40ecd334cbf - languageName: node - linkType: hard - -"eth-eip712-util-browser@npm:^0.0.3": - version: 0.0.3 - resolution: "eth-eip712-util-browser@npm:0.0.3" - dependencies: - bn.js: "npm:>4.0.0" - buffer: "npm:^6.0.3" - js-sha3: "npm:^0.8.0" - checksum: 10/f953e553da8326cc7eacffd7edc4c5ca4ba66ddf27546412cbed961900d50bbd8196b44665bd9e8f7d63c3b64df0793a6a8a60cc2f15b340763a78e84c4e7bd4 + version: 0.0.519 + resolution: "eth-chainlist@npm:0.0.519" + checksum: 10/c9767c64e58d140d04e6fcca9589c50edab48a5c57a62f2c749279574a9ab3e13784b05ab4c05c7b020fe8421769bc4119bd7a904df040fbb076827aaac3de23 languageName: node linkType: hard @@ -18509,18 +18392,6 @@ __metadata: languageName: node linkType: hard -"ethereum-cryptography@npm:^1.1.2": - version: 1.1.2 - resolution: "ethereum-cryptography@npm:1.1.2" - dependencies: - "@noble/hashes": "npm:1.1.2" - "@noble/secp256k1": "npm:1.6.3" - "@scure/bip32": "npm:1.1.0" - "@scure/bip39": "npm:1.1.0" - checksum: 10/abf9288086002a697e0ee0077d77d001c8e1306fa53ea8d7901f9744786f47d073caa6c266bd5b25a283a5c0fbc8beed9fa9cd90d842dc51339e6748aa1ab46a - languageName: node - linkType: hard - "ethereum-cryptography@npm:^2.0.0, ethereum-cryptography@npm:^2.1.2, ethereum-cryptography@npm:^2.2.1": version: 2.2.1 resolution: "ethereum-cryptography@npm:2.2.1" @@ -18813,13 +18684,6 @@ __metadata: languageName: node linkType: hard -"exit-on-epipe@npm:~1.0.1": - version: 1.0.1 - resolution: "exit-on-epipe@npm:1.0.1" - checksum: 10/b180aa277aec5bef2609b34e5876061f421a1f81bf343beb213c4d60b382ddcb6b83012833f0ba329d6bc38042685c8d89b1c52ea495b9b6327948ea80627398 - languageName: node - linkType: hard - "exit@npm:^0.1.2": version: 0.1.2 resolution: "exit@npm:0.1.2" @@ -20786,30 +20650,30 @@ __metadata: languageName: node linkType: hard -"gridplus-sdk@npm:^2.5.1": - version: 2.5.1 - resolution: "gridplus-sdk@npm:2.5.1" +"gridplus-sdk@npm:~2.6.0": + version: 2.6.0 + resolution: "gridplus-sdk@npm:2.6.0" dependencies: - "@ethereumjs/common": "npm:3.1.1" - "@ethereumjs/tx": "npm:4.1.1" - "@ethersproject/abi": "npm:^5.5.0" + "@ethereumjs/common": "npm:3.1.2" + "@ethereumjs/tx": "npm:4.1.2" + "@ethersproject/abi": "npm:^5.7.0" + "@metamask/eth-sig-util": "npm:^7.0.2" "@types/uuid": "npm:^9.0.0" aes-js: "npm:^3.1.1" bech32: "npm:^2.0.0" - bignumber.js: "npm:^9.0.1" + bignumber.js: "npm:^9.1.1" bitwise: "npm:^2.0.4" borc: "npm:^2.1.2" bs58check: "npm:^2.1.2" - buffer: "npm:^5.6.0" + buffer: "npm:^6.0.3" crc-32: "npm:^1.2.0" elliptic: "npm:6.5.4" - eth-eip712-util-browser: "npm:^0.0.3" hash.js: "npm:^1.1.7" - js-sha3: "npm:^0.8.0" + js-sha3: "npm:^0.9.3" rlp: "npm:^3.0.0" - secp256k1: "npm:4.0.2" + secp256k1: "npm:5.0.0" uuid: "npm:^9.0.0" - checksum: 10/57deeae78fc5f904309e689054baabaed8b078b896ecfd5d724889c6ea424a113db64c3fd79d4dca7cc5f558167d7af754506df5c0692ee76087822ae60c3873 + checksum: 10/d3b845ea5d69fd9b95698175efe1918fb39294a6e43ffcf1d771a0143ae45fb9a25569d496ab510cfb508c779482153800c2e5c7c9c1c62280ff73cab4a1ac45 languageName: node linkType: hard @@ -27667,6 +27531,15 @@ __metadata: languageName: node linkType: hard +"node-addon-api@npm:^5.0.0": + version: 5.1.0 + resolution: "node-addon-api@npm:5.1.0" + dependencies: + node-gyp: "npm:latest" + checksum: 10/595f59ffb4630564f587c502119cbd980d302e482781021f3b479f5fc7e41cf8f2f7280fdc2795f32d148e4f3259bd15043c52d4a3442796aa6f1ae97b959636 + languageName: node + linkType: hard + "node-addon-api@npm:^7.0.0": version: 7.1.0 resolution: "node-addon-api@npm:7.1.0" @@ -29725,15 +29598,6 @@ __metadata: languageName: node linkType: hard -"printj@npm:~1.1.0": - version: 1.1.2 - resolution: "printj@npm:1.1.2" - bin: - printj: ./bin/printj.njs - checksum: 10/45376a5ee7ef2e0d7ff0b4fecc893d73995a332e63d7e0622a544fe662c8213d22f0c9750e627c6d732a7d7a543266be960e6cd51cf19485cce87cf80468bb41 - languageName: node - linkType: hard - "prismjs@npm:^1.27.0": version: 1.29.0 resolution: "prismjs@npm:1.29.0" @@ -32591,27 +32455,27 @@ __metadata: languageName: node linkType: hard -"secp256k1@npm:4.0.2": - version: 4.0.2 - resolution: "secp256k1@npm:4.0.2" +"secp256k1@npm:^4.0.0, secp256k1@npm:^4.0.1, secp256k1@npm:^4.0.4": + version: 4.0.4 + resolution: "secp256k1@npm:4.0.4" dependencies: - elliptic: "npm:^6.5.2" - node-addon-api: "npm:^2.0.0" + elliptic: "npm:^6.5.7" + node-addon-api: "npm:^5.0.0" node-gyp: "npm:latest" node-gyp-build: "npm:^4.2.0" - checksum: 10/80f0a5b44dbe0a062ed0fbf2a82044037a2598a0ea6ec5a0924bfa1f53006b423a43db82ff1cb2924d280b06f2a34235a1733631b3459b86b7a886c0ef41e0c5 + checksum: 10/45000f348c853df7c1e2b67c48efb062ae78c0620ab1a5cfb02fa20d3aad39c641f4e7a18b3de3b54a7c0cc1e0addeb8ecd9d88bc332e92df17a92b60c36122a languageName: node linkType: hard -"secp256k1@npm:4.0.3, secp256k1@npm:^4.0.0, secp256k1@npm:^4.0.1": - version: 4.0.3 - resolution: "secp256k1@npm:4.0.3" +"secp256k1@npm:^5.0.1": + version: 5.0.1 + resolution: "secp256k1@npm:5.0.1" dependencies: - elliptic: "npm:^6.5.4" - node-addon-api: "npm:^2.0.0" + elliptic: "npm:^6.5.7" + node-addon-api: "npm:^5.0.0" node-gyp: "npm:latest" node-gyp-build: "npm:^4.2.0" - checksum: 10/8b45820cd90fd2f95cc8fdb9bf8a71e572de09f2311911ae461a951ffa9e30c99186a129d0f1afeb380dd67eca0c10493f8a7513c39063fda015e99995088e3b + checksum: 10/63fbd35624be4fd9cf3d39e5f79c5471b4a8aea6944453b2bea7b100bb1c77a25c55e6e08e2210cdabdf478c4c62d34c408b34214f2afd9367e19a52a3a4236c languageName: node linkType: hard From d8f786bf6b4c2c1c315ad1050dca2cf0e3c85c73 Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Tue, 22 Oct 2024 15:08:26 +0200 Subject: [PATCH 002/116] fix(snaps): Adjust alignment of custom UI links (#27957) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This PR fixes the alignment issues of the custom UI link. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27957?quickstart=1) ## **Related issues** Fixes: ## **Manual testing steps** ```ts import { Address, Box, Button, Container, Footer, Link, Row, Text, type SnapComponent, } from '@metamask/snaps-sdk/jsx'; /** * A custom dialog component. * * @returns The custom dialog component. */ export const CustomDialog: SnapComponent = () => (
This is a link This is a long text that should wrap around and take up multiple lines to test the layout of the dialog with a{' '} very very very very long link that should wrap on multiple lines, we will see {' '} in the middle.
); ``` ## **Screenshots/Recordings** ### **Before** ![Screenshot from 2024-10-21 12-34-40](https://github.com/user-attachments/assets/3838dafa-8143-4b3d-bb28-699ce139e7da) ### **After** ![Screenshot from 2024-10-21 15-06-57](https://github.com/user-attachments/assets/f789dc89-3550-416f-8ada-dcb86f01c151) ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- ui/components/app/app-components.scss | 1 + .../snap-ui-address.test.tsx.snap | 26 +++++++++---------- .../snaps/snap-ui-address/snap-ui-address.tsx | 7 ++++- .../app/snaps/snap-ui-link/index.scss | 11 ++++++++ .../app/snaps/snap-ui-link/snap-ui-link.js | 11 ++++++-- .../app/snaps/snap-ui-renderer/index.scss | 8 +++--- 6 files changed, 44 insertions(+), 20 deletions(-) create mode 100644 ui/components/app/snaps/snap-ui-link/index.scss diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index 0995f4b52a4a..9eefd48028ac 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -25,6 +25,7 @@ @import 'snaps/snap-ui-input/index'; @import 'snaps/snap-ui-file-input/index'; @import 'snaps/snap-ui-selector/index'; +@import 'snaps/snap-ui-link/index'; @import 'snaps/snap-delineator/index'; @import 'snaps/snap-home-menu/index'; @import 'snaps/snap-list-item/index'; 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 d29236409dbc..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 @@ -3,7 +3,7 @@ exports[`SnapUIAddress renders Bitcoin address 1`] = `
= ({ const shortenedAddress = shortenAddress(transformedAddress); return ( - + {shortenedAddress} diff --git a/ui/components/app/snaps/snap-ui-link/index.scss b/ui/components/app/snaps/snap-ui-link/index.scss new file mode 100644 index 000000000000..7d3f75f0e372 --- /dev/null +++ b/ui/components/app/snaps/snap-ui-link/index.scss @@ -0,0 +1,11 @@ +.snap-ui-renderer__link { + & .snap-ui-renderer__address { + // Fixes an issue where the link end icon would wrap + display: inline-flex; + } + + .snap-ui-renderer__address + .mm-icon { + // This fixes an issue where the icon would be misaligned with the Address component + top: 0; + } +} 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 a1289543fd45..58a22008a52a 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 @@ -34,7 +34,7 @@ export const SnapUILink = ({ href, children }) => { {children} @@ -51,7 +51,14 @@ export const SnapUILink = ({ href, children }) => { externalLink size={ButtonLinkSize.Inherit} display={Display.Inline} - className="snap-ui-link" + className="snap-ui-renderer__link" + style={{ + // Prevents the link from taking up the full width of the parent. + width: 'fit-content', + }} + textProps={{ + display: Display.Inline, + }} > {children} diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss index 7e18e72c917f..d32edf726479 100644 --- a/ui/components/app/snaps/snap-ui-renderer/index.scss +++ b/ui/components/app/snaps/snap-ui-renderer/index.scss @@ -34,6 +34,10 @@ border-radius: 8px; border-color: var(--color-border-muted); + & .mm-icon { + top: 0; + } + .mm-text--overflow-wrap-anywhere { overflow-wrap: normal; } @@ -48,10 +52,6 @@ &__panel { gap: 8px; - - .mm-icon--size-inherit { - top: 0; - } } &__text { From c926f9641d8f1e1b8c9ddc3886808ae1891b7608 Mon Sep 17 00:00:00 2001 From: Nidhi Kumari Date: Tue, 22 Oct 2024 18:42:12 +0530 Subject: [PATCH 003/116] fix: updated event name for site cell component (#27981) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR is to update the event name for metametrics in site cell component ## **Related issues** Fixes: [https://github.com/MetaMask/MetaMask-planning/issues/3263](https://github.com/MetaMask/MetaMask-planning/issues/3263) ## **Manual testing steps** 1. Go to ui/contexts/metametrics.js 2. In trackEvent in this file, add a log to see the payload 3. Run extension with yarn start. Go to Permissions Page, click on edit button for accounts and networks and check the console to verify the payload. ## **Screenshots/Recordings** ### **Before** NA ### **After** NA ## **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. --- .../pages/review-permissions-page/site-cell/site-cell.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 ae7a93283ead..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 @@ -100,7 +100,7 @@ export const SiteCell: React.FC = ({ setShowEditAccountsModal(true); trackEvent({ category: MetaMetricsEventCategory.Navigation, - event: MetaMetricsEventName.TokenImportButtonClicked, + event: MetaMetricsEventName.ViewPermissionedAccounts, properties: { location: 'Connect view, Permissions toast, Permissions (dapp)', }, @@ -133,7 +133,7 @@ export const SiteCell: React.FC = ({ setShowEditNetworksModal(true); trackEvent({ category: MetaMetricsEventCategory.Navigation, - event: MetaMetricsEventName.TokenImportButtonClicked, + event: MetaMetricsEventName.ViewPermissionedNetworks, properties: { location: 'Connect view, Permissions toast, Permissions (dapp)', }, From 528f2f50e974c17b21a257a0d05956b4c5d1b644 Mon Sep 17 00:00:00 2001 From: Prithpal Sooriya Date: Tue, 22 Oct 2024 14:40:08 +0100 Subject: [PATCH 004/116] test: update notification date tests to be timezone agnostic (#27925) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** A rare edge-case where unit tests locally (when in a different timezone) failed. This updates the tests to use UTC dates and uses the UTC timezone. NOTE - that these tests pass in CI and need to be tested locally by devs in different timezones. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27925?quickstart=1) ## **Related issues** Fixes: ## **Manual testing steps** N/A - this has no impact on the extension, just tests. You can try running this unit test locally to see if it passes. ## **Screenshots/Recordings** ### **Before** N/A ### **After** N/A ## **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. --- test/env.js | 1 + ui/helpers/utils/notification.utils.test.ts | 22 ++++++++++----------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/test/env.js b/test/env.js index 2dacb1d888ba..268f01af0e3b 100644 --- a/test/env.js +++ b/test/env.js @@ -16,3 +16,4 @@ process.env.PUSH_NOTIFICATIONS_SERVICE_URL = process.env.PORTFOLIO_URL = 'https://portfolio.test'; process.env.METAMASK_VERSION = 'MOCK_VERSION'; process.env.ENABLE_CONFIRMATION_REDESIGN = 'true'; +process.env.TZ = 'UTC'; diff --git a/ui/helpers/utils/notification.utils.test.ts b/ui/helpers/utils/notification.utils.test.ts index f82f8532cb58..2f4e66c26504 100644 --- a/ui/helpers/utils/notification.utils.test.ts +++ b/ui/helpers/utils/notification.utils.test.ts @@ -9,7 +9,7 @@ import { describe('formatMenuItemDate', () => { beforeAll(() => { jest.useFakeTimers(); - jest.setSystemTime(new Date('2024-06-07T09:40:00Z')); + jest.setSystemTime(new Date(Date.UTC(2024, 5, 7, 9, 40, 0))); // 2024-06-07T09:40:00Z }); afterAll(() => { @@ -28,7 +28,7 @@ describe('formatMenuItemDate', () => { // assert 1 hour ago assertToday((testDate) => { - testDate.setHours(testDate.getHours() - 1); + testDate.setUTCHours(testDate.getUTCHours() - 1); return testDate; }); }); @@ -42,14 +42,14 @@ describe('formatMenuItemDate', () => { // assert exactly 1 day ago assertYesterday((testDate) => { - testDate.setDate(testDate.getDate() - 1); + testDate.setUTCDate(testDate.getUTCDate() - 1); }); // assert almost a day ago, but was still yesterday // E.g. if Today way 09:40AM, but date to test was 23 hours ago (yesterday at 10:40AM), we still want to to show yesterday assertYesterday((testDate) => { - testDate.setDate(testDate.getDate() - 1); - testDate.setHours(testDate.getHours() + 1); + testDate.setUTCDate(testDate.getUTCDate() - 1); + testDate.setUTCHours(testDate.getUTCHours() + 1); }); }); @@ -62,18 +62,18 @@ describe('formatMenuItemDate', () => { // assert exactly 1 month ago assertMonthsAgo((testDate) => { - testDate.setMonth(testDate.getMonth() - 1); + testDate.setUTCMonth(testDate.getUTCMonth() - 1); }); // assert 2 months ago assertMonthsAgo((testDate) => { - testDate.setMonth(testDate.getMonth() - 2); + testDate.setUTCMonth(testDate.getUTCMonth() - 2); }); // assert almost a month ago (where it is a new month, but not 30 days) assertMonthsAgo(() => { // jest mock date is set in july, so we will test with month may - return new Date('2024-05-20T09:40:00Z'); + return new Date(Date.UTC(2024, 4, 20, 9, 40, 0)); // 2024-05-20T09:40:00Z }); }); @@ -86,18 +86,18 @@ describe('formatMenuItemDate', () => { // assert exactly 1 year ago assertYearsAgo((testDate) => { - testDate.setFullYear(testDate.getFullYear() - 1); + testDate.setUTCFullYear(testDate.getUTCFullYear() - 1); }); // assert 2 years ago assertYearsAgo((testDate) => { - testDate.setFullYear(testDate.getFullYear() - 2); + testDate.setUTCFullYear(testDate.getUTCFullYear() - 2); }); // assert almost a year ago (where it is a new year, but not 365 days ago) assertYearsAgo(() => { // jest mock date is set in 2024, so we will test with year 2023 - return new Date('2023-11-20T09:40:00Z'); + return new Date(Date.UTC(2023, 10, 20, 9, 40, 0)); // 2023-11-20T09:40:00Z }); }); }); From 088983ae8d1b1dec408a9ebffecafabff667b03c Mon Sep 17 00:00:00 2001 From: Nidhi Kumari Date: Tue, 22 Oct 2024 19:12:03 +0530 Subject: [PATCH 005/116] feat: removed feature flag for confirmations screen (#27877) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR is to remove the feature flag from confirmations page ## **Related issues** Fixes: [https://github.com/MetaMask/MetaMask-planning/issues/3517](https://github.com/MetaMask/MetaMask-planning/issues/3517) ## **Manual testing steps** 1. Connect extension to a Dapp 2. Try to switch to a non enabled network from Dapp 3. In the confirmations screen, we should not see the network picker 4. The Definition list component should expand and popup should not show up on click of See Details ## **Screenshots/Recordings** ### **Before** ![Screenshot 2024-10-16 at 5 55 15 PM](https://github.com/user-attachments/assets/74984e47-2d42-4c10-9fa9-47193139edad) ### **After** ![Screenshot 2024-10-16 at 5 54 55 PM](https://github.com/user-attachments/assets/ee40e7fc-8980-4d17-9e0e-993cacb6d69c) ## **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/_locales/de/messages.json | 23 -- app/_locales/el/messages.json | 23 -- app/_locales/en/messages.json | 33 +-- app/_locales/es/messages.json | 23 -- app/_locales/es_419/messages.json | 20 -- app/_locales/fr/messages.json | 23 -- app/_locales/hi/messages.json | 23 -- app/_locales/id/messages.json | 23 -- app/_locales/it/messages.json | 20 -- app/_locales/ja/messages.json | 23 -- app/_locales/ko/messages.json | 23 -- app/_locales/ph/messages.json | 20 -- app/_locales/pt/messages.json | 23 -- app/_locales/pt_BR/messages.json | 20 -- app/_locales/ru/messages.json | 23 -- app/_locales/tl/messages.json | 23 -- app/_locales/tr/messages.json | 23 -- app/_locales/vi/messages.json | 23 -- app/_locales/zh_CN/messages.json | 23 -- app/_locales/zh_TW/messages.json | 20 -- .../dapp-interactions.spec.js | 2 +- .../tests/network/add-custom-network.spec.js | 39 +-- ...om-blockaid-alert-networks-support.spec.js | 2 +- .../ui/definition-list/definition-list.js | 6 +- .../truncated-definition-list.js | 47 +--- .../confirmation/confirmation.js | 9 +- .../confirmation/confirmation.scss | 2 +- .../add-ethereum-chain.test.js.snap | 134 ++------- .../create-named-snap-account.test.js.snap | 2 +- .../create-snap-account.test.js.snap | 2 +- .../__snapshots__/error.test.js.snap | 2 +- .../remove-snap-account.test.js.snap | 2 +- .../snap-account-redirect.test.js.snap | 2 +- .../__snapshots__/success.test.js.snap | 2 +- .../switch-ethereum-chain.test.js.snap | 50 +--- .../templates/add-ethereum-chain.js | 258 +++--------------- .../templates/add-ethereum-chain.test.js | 9 +- 37 files changed, 108 insertions(+), 917 deletions(-) diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index fe0c84afcfac..8d1ed215aa92 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "Benutzerdefiniertes Netzwerk hinzufügen" }, - "addEthereumChainConfirmationDescription": { - "message": "Dadurch kann dieses Netzwerk innerhalb MetaMask verwendet werden." - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask überprüft keine benutzerdefinierten Netzwerke." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Erfahren Sie mehr über $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "Betrug und Sicherheitsrisiken im Netzwerk", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Dieser Seite das Hinzufügen eines Netzwerks erlauben?" - }, "addEthereumChainWarningModalHeader": { "message": "Fügen Sie diesen RPC-Anbieter nur hinzu, wenn Sie sich sicher sind, dass Sie ihm vertrauen können. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "Kontaktieren Sie die Ersteller von $1 für weitere Unterstützung.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "Einige Netzwerke können Sicherheits- und/oder Datenschutzrisiken bergen. Informieren Sie sich über die Risiken, bevor Sie ein Netzwerk hinzufügen und nutzen." - }, "somethingDoesntLookRight": { "message": "Scheint irgendetwas nicht in Ordnung zu sein? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "Aktivität anzeigen" }, - "viewAllDetails": { - "message": "Alle Details anzeigen" - }, "viewAllQuotes": { "message": "alle Angebote anzeigen" }, diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 5c42a8d829b4..7ccc23b123bb 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "Προσθήκη προσαρμοσμένου δικτύου" }, - "addEthereumChainConfirmationDescription": { - "message": "Αυτό θα επιτρέψει σε αυτό το δίκτυο να χρησιμοποιηθεί στο MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "Το MetaMask δεν επαληθεύει τα προσαρμοσμένα δίκτυα." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Μάθετε για το $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "απάτες και κίνδυνοι ασφάλειας δικτύου", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Επιτρέπετε σε αυτήν την ιστοσελίδα να προσθέσει ένα δίκτυο;" - }, "addEthereumChainWarningModalHeader": { "message": "Προσθέστε αυτόν τον πάροχο RPC μόνο αν είστε σίγουροι ότι μπορείτε να τον εμπιστευτείτε. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "Επικοινωνήστε με τους διαχειριστές του $1 για περαιτέρω υποστήριξη.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "Ορισμένα δίκτυα ενδέχεται να ενέχουν κινδύνους για την ασφάλεια ή/και το απόρρητο. Ενημερωθείτε για τους κινδύνους πριν προσθέσετε και χρησιμοποιήσετε ένα δίκτυο." - }, "somethingDoesntLookRight": { "message": "Κάτι δεν φαίνεται σωστό; $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "Προβολή δραστηριότητας" }, - "viewAllDetails": { - "message": "Προβολή όλων των λεπτομερειών" - }, "viewAllQuotes": { "message": "προβολή όλων των προσφορών" }, diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 70cb4da8cfb6..b36f3ffcdb4e 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -231,23 +231,6 @@ "addCustomNetwork": { "message": "Add custom network" }, - "addEthereumChainConfirmationDescription": { - "message": "This will allow this network to be used within MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask does not verify custom networks." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Learn about $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "scams and network security risks", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Allow this site to add a network?" - }, "addEthereumChainWarningModalHeader": { "message": "Only add this RPC provider if you’re sure you can trust it. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4668,6 +4651,9 @@ "securityDescription": { "message": "Reduce your chances of joining unsafe networks and protect your accounts" }, + "securityMessageLinkForNetworks": { + "message": "network scams and security risks" + }, "securityPrivacyPath": { "message": "Settings > Security & Privacy." }, @@ -5238,9 +5224,6 @@ "message": "Contact the creators of $1 for further support.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "Some networks may pose security and/or privacy risks. Understand the risks before adding & using a network." - }, "somethingDoesntLookRight": { "message": "Something doesn't look right? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6324,9 +6307,6 @@ "unknown": { "message": "Unknown" }, - "unknownChainWarning": { - "message": "We can’t verify custom networks. To avoid malicious providers from recording your network activity, only add networks you trust." - }, "unknownCollection": { "message": "Unnamed collection" }, @@ -6455,9 +6435,6 @@ "viewActivity": { "message": "View activity" }, - "viewAllDetails": { - "message": "View all details" - }, "viewAllQuotes": { "message": "view all quotes" }, @@ -6540,6 +6517,10 @@ "watchEthereumAccountsToggle": { "message": "Watch Ethereum Accounts (Beta)" }, + "watchOutMessage": { + "message": "Beware of $1.", + "description": "$1 is a link with text that is provided by the 'securityMessageLinkForNetworks' key" + }, "weak": { "message": "Weak" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index 97d6f4be9854..a2578d1f4137 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "Agregar red personalizada" }, - "addEthereumChainConfirmationDescription": { - "message": "Esto permitirá que la red se utilice en MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask no verifica redes personalizadas." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Obtenga más información sobre $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "estafas y riesgos de seguridad de la red", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "¿Permitir que este sitio agregue una red?" - }, "addEthereumChainWarningModalHeader": { "message": "Agregue este proveedor de RPC solo si está seguro de que puede confiar en él. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4855,9 +4838,6 @@ "message": "Póngase en contacto con los creadores de $1 para obtener más ayuda.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "Algunas redes pueden presentar riesgos de seguridad y/o privacidad. Comprenda los riesgos antes de agregar y utilizar una red." - }, "somethingDoesntLookRight": { "message": "Algo no se ve bien, ¿cierto? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6004,9 +5984,6 @@ "viewActivity": { "message": "Ver actividad" }, - "viewAllDetails": { - "message": "Ver todos los detalles" - }, "viewAllQuotes": { "message": "ver todas las cotizaciones" }, diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json index 672823c370ba..cebfc3cef106 100644 --- a/app/_locales/es_419/messages.json +++ b/app/_locales/es_419/messages.json @@ -100,23 +100,6 @@ "addContact": { "message": "Agregar contacto" }, - "addEthereumChainConfirmationDescription": { - "message": "Esto permitirá que la red se utilice en MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask no verifica redes personalizadas." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Obtenga más información sobre $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "estafas y riesgos de seguridad de la red", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "¿Permitir que este sitio agregue una red?" - }, "addFriendsAndAddresses": { "message": "Agregue amigos y direcciones de confianza" }, @@ -2335,9 +2318,6 @@ "userName": { "message": "Nombre de usuario" }, - "viewAllDetails": { - "message": "Ver todos los detalles" - }, "viewContact": { "message": "Ver contacto" }, diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index dbaffd44cf38..c3151d3ca53f 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "Ajouter un réseau personnalisé" }, - "addEthereumChainConfirmationDescription": { - "message": "Cela permettra d’utiliser ce réseau dans MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask ne vérifie pas les réseaux personnalisés." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "En savoir plus sur $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "les risques de fraude et de sécurité des réseaux", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Autoriser ce site à ajouter un réseau ?" - }, "addEthereumChainWarningModalHeader": { "message": "N’ajoutez ce fournisseur de RPC que si vous lui faites confiance. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "L’interface utilisateur (IU) spécifiée par le snap n’est pas valide.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "Certains réseaux peuvent présenter des risques pour la sécurité et/ou la vie privée. Informez-vous sur les risques avant d’ajouter et d’utiliser un réseau." - }, "somethingDoesntLookRight": { "message": "On dirait que quelque chose ne va pas ? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "Voir l’activité" }, - "viewAllDetails": { - "message": "Afficher tous les détails" - }, "viewAllQuotes": { "message": "afficher toutes les cotations" }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index 0e624b4ba807..c69c7117d4d0 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "कस्टम नेटवर्क जोड़ें" }, - "addEthereumChainConfirmationDescription": { - "message": "इससे इस नेटवर्क को MetaMask के अंदर इस्तेमाल करने की अनुमति मिलेगी।" - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask कस्टम नेटवर्क को वेरीफ़ाई नहीं करता है।" - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "$1 के बारे में जानें।", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "स्कैम और नेटवर्क से जुड़े सुरक्षा जोखिम", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "इस साइट को नेटवर्क जोड़ने की अनुमति दें?" - }, "addEthereumChainWarningModalHeader": { "message": "इस RPC प्रोवाइडर को केवल तभी जोड़ें जब आप निश्चित हैं कि आप इस पर विश्वास कर सकते हैं। $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "अधिक सहायता के लिए $1 के निर्माताओं से कॉन्टेक्ट करें।", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "कुछ नेटवर्क सुरक्षा और/या गोपनीयता संबंधी जोखिम पैदा कर सकते हैं। नेटवर्क जोड़ने और इस्तेमाल करने से पहले जोखिमों को समझें।" - }, "somethingDoesntLookRight": { "message": "कुछ तो गड़बड़ है? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "एक्टिविटी देखें" }, - "viewAllDetails": { - "message": "सभी विवरण देखें" - }, "viewAllQuotes": { "message": "सभी उद्धरण को देखें" }, diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index 68b52556c3f6..53e7fd923fda 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "Tambahkan jaringan khusus" }, - "addEthereumChainConfirmationDescription": { - "message": "Tindakan ini akan membantu jaringan ini agar dapat digunakan di MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask tidak memverifikasi jaringan kustom." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Pelajari tentang $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "penipuan dan risiko keamanan jaringan", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Izinkan situs ini untuk menambahkan jaringan?" - }, "addEthereumChainWarningModalHeader": { "message": "Cukup tambahkan penyedia RPC ini jika Anda yakin dapat memercayainya. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "Hubungi pembuat $1 untuk dukungan lebih lanjut.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "Beberapa jaringan dapat menimbulkan risiko keamanan dan/atau privasi. Pahami risikonya sebelum menambahkan dan menggunakan jaringan." - }, "somethingDoesntLookRight": { "message": "Ada yang tidak beres? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "Lihat aktivitas" }, - "viewAllDetails": { - "message": "Lihat semua detail" - }, "viewAllQuotes": { "message": "lihat semua kuotasi" }, diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json index 4dac80c253b3..0c79dd8fc6fc 100644 --- a/app/_locales/it/messages.json +++ b/app/_locales/it/messages.json @@ -152,23 +152,6 @@ "addContact": { "message": "Aggiungi contatto" }, - "addEthereumChainConfirmationDescription": { - "message": "Ciò consentirà a questa rete di essere utilizzata all'interno di MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask non verifica le reti personalizzate." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Maggiori informazioni su $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "truffe e rischi per la sicurezza della rete", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Consenti a questo sito di aggiungere una rete?" - }, "addFriendsAndAddresses": { "message": "Aggiungi amici e indirizzi di cui ti fidi" }, @@ -1649,9 +1632,6 @@ "userName": { "message": "Nome utente" }, - "viewAllDetails": { - "message": "Vedi tutti i dettagli" - }, "viewContact": { "message": "Visualizza contatto" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 73f3f8300646..c26ec67990b2 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "カスタムネットワークを追加" }, - "addEthereumChainConfirmationDescription": { - "message": "これにより、このネットワークはMetaMask内で使用できるようになります。" - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMaskはカスタムネットワークを検証しません。" - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "$1の詳細。", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "詐欺やネットワークセキュリティのリスク", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "このサイトにネットワークの追加を許可しますか？" - }, "addEthereumChainWarningModalHeader": { "message": "このRPCプロバイダーは、確実に信頼できる場合のみ追加してください。$1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "今後のサポートは、$1の作成者にお問い合わせください。", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "ネットワークによっては、セキュリティやプライバシーの面でリスクが伴う可能性があります。ネットワークを追加・使用する前にリスクを理解するようにしてください。" - }, "somethingDoesntLookRight": { "message": "何か不審な点があれば、$1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "アクティビティを表示" }, - "viewAllDetails": { - "message": "すべての詳細の表示" - }, "viewAllQuotes": { "message": "すべてのクォートを表示" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index be1de55c51c7..ad4959a459b9 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "맞춤 네트워크 추가" }, - "addEthereumChainConfirmationDescription": { - "message": "이렇게 하면 MetaMask 내에서 이 네트워크를 사용할 수 있습니다." - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask는 맞춤 네트워크를 검증하지 않습니다." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "$1에 대해 알아보기", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "사기 및 네트워크 보안 위험", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "이 사이트에서 네트워크를 추가하도록 허용하시겠습니까?" - }, "addEthereumChainWarningModalHeader": { "message": "신뢰할 수 있는 경우에만 이 RPC 공급입체를 추가하세요. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "$1 작성자에게 연락하여 향후 지원을 요청하세요.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "네트워크에 따라 보안이나 개인 정보 유출의 위험이 있을 수 있습니다. 네트워크 추가 및 사용 이전에 위험 요소를 파악하세요." - }, "somethingDoesntLookRight": { "message": "무언가 잘못되었나요? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "활동 보기" }, - "viewAllDetails": { - "message": "모든 세부 정보 보기" - }, "viewAllQuotes": { "message": "모든 견적 보기" }, diff --git a/app/_locales/ph/messages.json b/app/_locales/ph/messages.json index 1687cb7818f0..e6b4bc3e7811 100644 --- a/app/_locales/ph/messages.json +++ b/app/_locales/ph/messages.json @@ -42,23 +42,6 @@ "addContact": { "message": "Magdagdag ng contact" }, - "addEthereumChainConfirmationDescription": { - "message": "Bibigyang-daan nito na magamit ang network na ito sa MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "Hindi vine-verify ng MetaMask ang mga custom na network." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Matuto tungkol sa $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "mga scam at panganib sa seguridad ng network", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Payagan ang site na ito na magdagdag ng network?" - }, "addFriendsAndAddresses": { "message": "Magdagdag ng mga kaibigan at address na pinagkakatiwalaan mo" }, @@ -1594,9 +1577,6 @@ "userName": { "message": "Username" }, - "viewAllDetails": { - "message": "Tingnan ang lahat ng detalye" - }, "viewContact": { "message": "Tingnan ang Contact" }, diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index 656733cecf65..7831e080500b 100644 --- a/app/_locales/pt/messages.json +++ b/app/_locales/pt/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "Adicionar rede personalizada" }, - "addEthereumChainConfirmationDescription": { - "message": "Isso permitirá que essa rede seja usada dentro da MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "A MetaMask não verifica redes personalizadas." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Saiba mais sobre $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "golpes e riscos de segurança nas redes", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Permitir que este site adicione uma rede?" - }, "addEthereumChainWarningModalHeader": { "message": "Adicione esse provedor de RPC apenas se tiver certeza de que é confiável. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "Contate os criadores de $1 para receber mais suporte.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "Algumas redes podem representar riscos de segurança e/ou privacidade. Tenha os riscos em mente antes de adicionar e usar uma rede." - }, "somethingDoesntLookRight": { "message": "Alguma coisa não parece certa? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "Ver atividade" }, - "viewAllDetails": { - "message": "Ver todos os detalhes" - }, "viewAllQuotes": { "message": "ver todas as cotações" }, diff --git a/app/_locales/pt_BR/messages.json b/app/_locales/pt_BR/messages.json index 6062013d6d6f..58d7f6ea8718 100644 --- a/app/_locales/pt_BR/messages.json +++ b/app/_locales/pt_BR/messages.json @@ -100,23 +100,6 @@ "addContact": { "message": "Adicionar contato" }, - "addEthereumChainConfirmationDescription": { - "message": "Isso permitirá que essa rede seja usada dentro da MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "A MetaMask não verifica redes personalizadas." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Saiba mais sobre $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "fraudes e riscos de segurança da rede", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Permitir que esse site adicione uma rede?" - }, "addFriendsAndAddresses": { "message": "Adicionar amigos e endereços confiáveis" }, @@ -2335,9 +2318,6 @@ "userName": { "message": "Nome de usuário" }, - "viewAllDetails": { - "message": "Ver todos os detalhes" - }, "viewContact": { "message": "Ver contato" }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index 0c2f92821ed2..d32a603b367b 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "Добавить пользовательскую сеть" }, - "addEthereumChainConfirmationDescription": { - "message": "Это позволит использовать эту сеть в MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask не проверяет пользовательские сети." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Подробнее о $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "мошенничестве и угрозах безопасности в сети", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Разрешить этому сайту добавить сеть?" - }, "addEthereumChainWarningModalHeader": { "message": "Добавляйте этого поставщика RPC только в том случае, если уверены, что ему можно доверять. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "Свяжитесь с авторами $1 для получения дополнительной поддержки.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "Некоторые сети могут представлять угрозу безопасности и/или конфиденциальности. Прежде чем добавлять и использовать сеть, ознакомьтесь с рисками." - }, "somethingDoesntLookRight": { "message": "Что-то не так? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "Смотреть активность" }, - "viewAllDetails": { - "message": "Смотреть все сведения" - }, "viewAllQuotes": { "message": "смотреть все котировки" }, diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index 61d8ff6e5d8c..0c3675d78754 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "Magdagdag ng custom na network" }, - "addEthereumChainConfirmationDescription": { - "message": "Magpapahintulot ito sa network na ito na gamitin sa loob ng MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "Ang MetaMask ay hindi nagve-verify ng mga custom na network." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Alamin ang tungkol sa $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "mga panloloko at panganib ng seguridad ng network", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Payagan ang site na ito na magdagdag ng network?" - }, "addEthereumChainWarningModalHeader": { "message": "Idagdag lamang ang RPC provider na ito kung sigurado kang mapagkakatiwalaan ito. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "Makipag-ugnayan sa mga tagalikha ng $1 para sa karagdagang suporta.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "Maaaring magdulot ang ilang network ng mga panganib sa seguridad at/o pagkapribado. Unawain ang mga panganib bago idagdag o gamitin ang isang network." - }, "somethingDoesntLookRight": { "message": "Mayroon bang hindi tama? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "Tingnan ang aktibidad" }, - "viewAllDetails": { - "message": "Tingnan ang lahat ng detalye" - }, "viewAllQuotes": { "message": "tingnan ang lahat ng quote" }, diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index d80d6564b880..253e00845388 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "Özel ağ ekle" }, - "addEthereumChainConfirmationDescription": { - "message": "Bu, bu ağın MetaMas dahilinde kullanılmasına olanak tanıyacaktır." - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask özel ağları doğrulamaz." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "$1 hakkında bilgi edinin.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "dolandırıcılık ve ağ güvenliği riskleri", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Bu sitenin ağ eklemesine izin ver?" - }, "addEthereumChainWarningModalHeader": { "message": "Bu RPC sağlayıcısını sadece ona güvenebileceğinizden eminseniz ekleyin. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "Daha fazla destek için $1 oluşturucuları ile iletişime geçin.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "Bazı ağlar güvenlik ve/veya gizlilik riskleri teşkil edebilir. Bir ağ eklemeden ve kullanmadan önce riskleri anlayın." - }, "somethingDoesntLookRight": { "message": "Doğru görünmeyen bir şeyler mi var? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "Aktiviteyi görüntüle" }, - "viewAllDetails": { - "message": "Tüm bilgileri görüntüle" - }, "viewAllQuotes": { "message": "tüm teklifleri görüntüle" }, diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index 0bac5423d1ee..538108c0677d 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "Thêm mạng tùy chỉnh" }, - "addEthereumChainConfirmationDescription": { - "message": "Thao tác này sẽ cho phép sử dụng mạng này trong MetaMask." - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask không xác minh mạng tùy chỉnh." - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "Tìm hiểu về $1.", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "lừa đảo và các nguy cơ về an ninh mạng", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "Cho phép trang này thêm một mạng?" - }, "addEthereumChainWarningModalHeader": { "message": "Chỉ thêm nhà cung cấp RPC này nếu bạn chắc chắn bạn có thể tin tưởng. $1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "Liên hệ với những người tạo ra $1 để được hỗ trợ thêm.", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "Một số mạng có thể gây ra rủi ro về bảo mật và/hoặc quyền riêng tư. Bạn cần hiểu rõ các rủi ro này trước khi thêm và sử dụng mạng." - }, "somethingDoesntLookRight": { "message": "Có gì đó không ổn? $1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "Xem hoạt động" }, - "viewAllDetails": { - "message": "Xem toàn bộ chi tiết" - }, "viewAllQuotes": { "message": "xem tất cả báo giá" }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 7209fb1c5b44..d3a4af11220a 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -207,23 +207,6 @@ "addCustomNetwork": { "message": "添加自定义网络" }, - "addEthereumChainConfirmationDescription": { - "message": "这将允许在 MetaMask 中使用此网络。" - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask 不验证自定义网络。" - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "了解 $1。", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "欺诈和网络安全风险", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "允许此网站添加一个网络到MetaMask上？" - }, "addEthereumChainWarningModalHeader": { "message": "仅当您确定可以信任此 RPC 提供商时才能添加它。$1", "description": "$1 is addEthereumChainWarningModalHeaderPartTwo passed separately so that it can be bolded" @@ -4858,9 +4841,6 @@ "message": "联系 $1 的创建者以获得进一步支持。", "description": "This is shown when the insight snap throws an error. $1 is the snap name" }, - "someNetworksMayPoseSecurity": { - "message": "某些网络可能会带来安全和/或隐私风险。在添加和使用网络之前，请先了解风险。" - }, "somethingDoesntLookRight": { "message": "有什么不对劲吗？$1", "description": "A false positive message for users to contact support. $1 is a link to the support page." @@ -6007,9 +5987,6 @@ "viewActivity": { "message": "查看活动" }, - "viewAllDetails": { - "message": "查看所有详情" - }, "viewAllQuotes": { "message": "查看所有报价" }, diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json index 7cdfa8e28add..7a7fdb68cf1f 100644 --- a/app/_locales/zh_TW/messages.json +++ b/app/_locales/zh_TW/messages.json @@ -42,23 +42,6 @@ "addContact": { "message": "新增合約" }, - "addEthereumChainConfirmationDescription": { - "message": "這會允許在 MetaMask 內使用這個網路。" - }, - "addEthereumChainConfirmationRisks": { - "message": "MetaMask 不會對自訂的網路做驗證。" - }, - "addEthereumChainConfirmationRisksLearnMore": { - "message": "了解更多關於$1的事。", - "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key" - }, - "addEthereumChainConfirmationRisksLearnMoreLink": { - "message": "詐騙與網路安全風險", - "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key" - }, - "addEthereumChainConfirmationTitle": { - "message": "允許這個網站新增一個網路？" - }, "addFriendsAndAddresses": { "message": "新增朋友和您信任的位址" }, @@ -1370,9 +1353,6 @@ "userName": { "message": "使用者名稱" }, - "viewAllDetails": { - "message": "查看所有詳情" - }, "viewContact": { "message": "觀看聯絡資訊" }, diff --git a/test/e2e/tests/dapp-interactions/dapp-interactions.spec.js b/test/e2e/tests/dapp-interactions/dapp-interactions.spec.js index b992925ffc7a..584408134f1a 100644 --- a/test/e2e/tests/dapp-interactions/dapp-interactions.spec.js +++ b/test/e2e/tests/dapp-interactions/dapp-interactions.spec.js @@ -31,7 +31,7 @@ describe('Dapp interactions', function () { await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); await unlockWallet(driver); const notification = await driver.isElementPresent({ - text: 'Allow this site to add a network?', + text: 'Add Localhost 8546', tag: 'h3', }); diff --git a/test/e2e/tests/network/add-custom-network.spec.js b/test/e2e/tests/network/add-custom-network.spec.js index dc8f38e1168c..d24beb431c1c 100644 --- a/test/e2e/tests/network/add-custom-network.spec.js +++ b/test/e2e/tests/network/add-custom-network.spec.js @@ -119,9 +119,7 @@ const inputData = { }; describe('Custom network', function () { - const chainID = '42161'; const networkURL = 'https://arbitrum-mainnet.infura.io'; - const networkNAME = 'Arbitrum One'; const currencySYMBOL = 'ETH'; const blockExplorerURL = 'https://explorer.arbitrum.io'; @@ -456,52 +454,29 @@ describe('Custom network', function () { text: 'Add', }); - // verify network details - const title = await driver.findElement({ - tag: 'span', - text: 'Arbitrum One', - }); - - assert.equal( - await title.getText(), - 'Arbitrum One', - 'Title of popup should be selected network', + const [currencySymbol, networkUrl] = await driver.findElements( + '.definition-list dd', ); - - const [networkName, networkUrl, chainIdElement, currencySymbol] = - await driver.findElements('.definition-list dd'); - assert.equal( - await networkName.getText(), - networkNAME, - 'Network name is not correctly displayed', + await currencySymbol.getText(), + currencySYMBOL, + 'Currency symbol is not correctly displayed', ); assert.equal( await networkUrl.getText(), networkURL, 'Network Url is not correctly displayed', ); - assert.equal( - await chainIdElement.getText(), - chainID.toString(), - 'Chain Id is not correctly displayed', - ); - assert.equal( - await currencySymbol.getText(), - currencySYMBOL, - 'Currency symbol is not correctly displayed', - ); - await driver.clickElement({ tag: 'a', text: 'View all details' }); + await driver.clickElement({ tag: 'a', text: 'See details' }); const networkDetailsLabels = await driver.findElements('dd'); assert.equal( - await networkDetailsLabels[8].getText(), + await networkDetailsLabels[4].getText(), blockExplorerURL, 'Block Explorer URL is not correct', ); - await driver.clickElement({ tag: 'button', text: 'Close' }); await driver.clickElement({ tag: 'button', text: 'Approve' }); // verify network switched diff --git a/test/e2e/tests/ppom/ppom-blockaid-alert-networks-support.spec.js b/test/e2e/tests/ppom/ppom-blockaid-alert-networks-support.spec.js index 719f8cbdc16b..f40fd68f9566 100644 --- a/test/e2e/tests/ppom/ppom-blockaid-alert-networks-support.spec.js +++ b/test/e2e/tests/ppom/ppom-blockaid-alert-networks-support.spec.js @@ -114,7 +114,7 @@ describe('PPOM Blockaid Alert - Multiple Networks Support @no-mmi', function () text: 'Add', }); - await driver.clickElement({ tag: 'a', text: 'View all details' }); + await driver.clickElement({ tag: 'a', text: 'See details' }); await driver.clickElement({ tag: 'button', text: 'Close' }); await driver.clickElement({ tag: 'button', text: 'Approve' }); diff --git a/ui/components/ui/definition-list/definition-list.js b/ui/components/ui/definition-list/definition-list.js index 84a23325b37a..84d3f48135ab 100644 --- a/ui/components/ui/definition-list/definition-list.js +++ b/ui/components/ui/definition-list/definition-list.js @@ -32,7 +32,7 @@ export default function DefinitionList({ {Object.entries(dictionary).map(([term, definition]) => ( setIsPopoverOpen(true)} > - {t(process.env.CHAIN_PERMISSIONS ? 'seeDetails' : 'viewAllDetails')} + {t('seeDetails')} ); - const renderPopover = () => - isPopoverOpen && ( - setIsPopoverOpen(false)} - footer={ - - } - > - - {renderDefinitionList(true)} - - - ); - const renderContent = () => { - if (process.env.CHAIN_PERMISSIONS) { - return isPopoverOpen ? ( - renderDefinitionList(true) - ) : ( - <> - {renderDefinitionList(false)} - {renderButton()} - - ); - } - return ( + return isPopoverOpen ? ( + renderDefinitionList(true) + ) : ( <> {renderDefinitionList(false)} {renderButton()} - {renderPopover()} ); }; return ( - {templatedValues.networkDisplay && !process.env.CHAIN_PERMISSIONS ? ( - - - - ) : null} {isSnapCustomUIDialog ? ( :last-child { - margin-bottom: 16px; + margin-top: auto; } } diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap index 38bdc74279f8..d29769f0ca7f 100644 --- a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap +++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap @@ -6,94 +6,52 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = ` class="confirmation-page" >
-
-
-
- T -
- - Test initial state - - -
-

Update Test initial state

This site is requesting to update your default network URL. You can edit defaults and network information any time.
-
- - MetaMask does not verify custom networks. - - - - Learn about - - scams and network security risks - - . - - -
- Network name + Currency symbol
- Test chain + TST
Network URL
@@ -107,75 +65,41 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = ` >
https://rpcurl.test.chain
-
- Chain ID -
-
- -
-
-
-
- 39321 -
-
- Currency symbol -
-
- -
-
-
-
- TST -
- View all details + See details
+
+ + + Beware of + + network scams and security risks + + . + + +

-
-
-
- T -
- - Test initial state - - -
-

@@ -121,32 +98,9 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi class="confirmation-page" >
-
-
-
- T -
- - Test initial state - - -
-

diff --git a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js index 998751c6e3a7..24d66b8785fb 100644 --- a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js +++ b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js @@ -1,25 +1,19 @@ import { providerErrors } from '@metamask/rpc-errors'; -import React from 'react'; import { RpcEndpointType } from '@metamask/network-controller'; - import { infuraProjectId, DEPRECATED_NETWORKS, } from '../../../../../shared/constants/network'; import { - Severity, - TypographyVariant, - TextAlign, + AlignItems, Display, FlexDirection, - AlignItems, - JustifyContent, - BackgroundColor, + Severity, + TypographyVariant, } from '../../../../helpers/constants/design-system'; import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'; import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url'; import { jsonRpcRequest } from '../../../../../shared/modules/rpc.utils'; -import { BannerAlertSeverity } from '../../../../components/component-library'; import { isValidASCIIURL, toPunycodeURL } from '../../utils/confirm'; const UNRECOGNIZED_CHAIN = { @@ -151,8 +145,6 @@ const MISMATCHED_NETWORK_RPC_CHAIN_ID = { }, }; -const multichainFlag = process.env.CHAIN_PERMISSIONS; - const ERROR_CONNECTING_TO_RPC = { id: 'ERROR_CONNECTING_TO_RPC', severity: Severity.Danger, @@ -234,124 +226,20 @@ function getValues(pendingApproval, t, actions, history, data) { data.existingNetworkConfiguration.name, ]); } else { - title = process.env.CHAIN_PERMISSIONS - ? t('addNetworkConfirmationTitle', [ - pendingApproval.requestData.chainName, - ]) - : t('addEthereumChainConfirmationTitle'); + title = t('addNetworkConfirmationTitle', [ + pendingApproval.requestData.chainName, + ]); } let subtitle; if (data.existingNetworkConfiguration) { subtitle = t('updateEthereumChainConfirmationDescription'); } else { - subtitle = process.env.CHAIN_PERMISSIONS - ? t('multichainAddEthereumChainConfirmationDescription') - : t('addEthereumChainConfirmationDescription'); + subtitle = t('multichainAddEthereumChainConfirmationDescription'); } return { content: [ - { - hide: !originIsMetaMask, - element: 'Box', - key: 'network-box', - props: { - textAlign: TextAlign.Center, - display: Display.Flex, - justifyContent: JustifyContent.center, - marginTop: 4, - marginBottom: 2, - }, - children: [ - { - element: 'Chip', - key: 'network-chip', - props: { - label: pendingApproval.requestData.chainName, - backgroundColor: BackgroundColor.backgroundAlternative, - leftIconUrl: pendingApproval.requestData.imageUrl, - }, - }, - ], - }, - multichainFlag && { - element: 'BannerAlert', - key: 'only-add-networks-you-trust', - children: [ - { - element: 'Typography', - key: 'description', - props: { - style: { display: originIsMetaMask && '-webkit-box' }, - }, - children: [ - `${t('unknownChainWarning')} `, - { - hide: !originIsMetaMask, - element: 'Tooltip', - key: 'tooltip-info', - props: { - position: 'bottom', - interactive: true, - trigger: 'mouseenter', - html: ( - - ), - }, - children: [ - { - element: 'i', - key: 'info-circle', - props: { - className: 'fas fa-info-circle', - style: { - marginLeft: '4px', - color: 'var(--color-icon-default)', - }, - }, - }, - ], - }, - ], - }, - { - element: 'a', - children: t('learnMoreUpperCase'), - key: 'learnMoreUpperCase', - props: { - href: ZENDESK_URLS.USER_GUIDE_CUSTOM_NETWORKS, - target: '__blank', - }, - }, - ], - props: { - severity: BannerAlertSeverity.Warning, - boxProps: { - margin: [0, 4], - display: Display.Flex, - flexDirection: FlexDirection.Column, - alignItems: AlignItems.center, - }, - }, - }, - { element: 'Typography', key: 'title', @@ -370,103 +258,13 @@ function getValues(pendingApproval, t, actions, history, data) { key: 'description', children: subtitle, props: { - variant: TypographyVariant.H7, + variant: TypographyVariant.H6, align: 'center', boxProps: { margin: originIsMetaMask ? [0, 8, 4] : [0, 0, 4], }, }, }, - { - element: 'Typography', - key: 'only-add-networks-you-trust', - children: process.env.CHAIN_PERMISSIONS - ? [] - : [ - { - element: 'b', - key: 'bolded-text', - props: { - style: { display: originIsMetaMask && '-webkit-box' }, - }, - children: [ - `${t('addEthereumChainConfirmationRisks')} `, - { - hide: !originIsMetaMask, - element: 'Tooltip', - key: 'tooltip-info', - props: { - position: 'bottom', - interactive: true, - trigger: 'mouseenter', - html: ( -
- {t('someNetworksMayPoseSecurity')}{' '} - - {t('learnMoreUpperCase')} - -
- ), - }, - children: [ - { - element: 'i', - key: 'info-circle', - props: { - className: 'fas fa-info-circle', - style: { - marginLeft: '4px', - color: 'var(--color-icon-default)', - }, - }, - }, - ], - }, - ], - }, - { - element: 'MetaMaskTranslation', - key: 'learn-about-risks', - props: { - translationKey: 'addEthereumChainConfirmationRisksLearnMore', - variables: [ - { - element: 'a', - children: t( - 'addEthereumChainConfirmationRisksLearnMoreLink', - ), - key: 'addEthereumChainConfirmationRisksLearnMoreLink', - props: { - href: ZENDESK_URLS.USER_GUIDE_CUSTOM_NETWORKS, - target: '__blank', - }, - }, - ], - }, - }, - ], - props: { - variant: TypographyVariant.H7, - boxProps: { - margin: originIsMetaMask ? [0, 8] : 0, - display: Display.Flex, - flexDirection: FlexDirection.Column, - alignItems: AlignItems.center, - }, - }, - }, { element: 'TruncatedDefinitionList', key: 'network-details', @@ -497,14 +295,40 @@ function getValues(pendingApproval, t, actions, history, data) { [t('blockExplorerUrl')]: pendingApproval.requestData.rpcPrefs.blockExplorerUrl, }, - prefaceKeys: process.env.CHAIN_PERMISSIONS - ? [t('currencySymbol'), t('networkURL')] - : [ - t('networkName'), - t('networkURL'), - t('chainId'), - t('currencySymbol'), + prefaceKeys: [t('currencySymbol'), t('networkURL')], + }, + }, + { + element: 'Typography', + key: 'only-add-networks-you-trust', + children: [ + { + element: 'MetaMaskTranslation', + key: 'learn-about-risks', + props: { + translationKey: 'watchOutMessage', + variables: [ + { + element: 'a', + children: t('securityMessageLinkForNetworks'), + key: 'securityMessageLinkForNetworks', + props: { + href: ZENDESK_URLS.USER_GUIDE_CUSTOM_NETWORKS, + target: '__blank', + }, + }, ], + }, + }, + ], + props: { + variant: TypographyVariant.H6, + boxProps: { + margin: originIsMetaMask ? [0, 8] : 0, + display: Display.Flex, + flexDirection: FlexDirection.Column, + alignItems: AlignItems.center, + }, }, }, ], diff --git a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.test.js b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.test.js index ff7fa449f29e..19f51b6fa798 100644 --- a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.test.js +++ b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.test.js @@ -61,15 +61,8 @@ describe('add-ethereum-chain confirmation', () => { }, }; const store = configureMockStore(middleware)(testStore); - const { container, getByText } = renderWithProvider( - , - store, - ); + const { container } = renderWithProvider(, store); await waitFor(() => { - expect( - getByText('MetaMask does not verify custom networks.'), - ).toBeInTheDocument(); - expect(container.querySelector('.callout')).toBeDefined(); expect(container).toMatchSnapshot(); }); }); From b87b4e5ccb12c65d60ed6e78a59571f651198f89 Mon Sep 17 00:00:00 2001 From: sahar-fehri Date: Tue, 22 Oct 2024 17:18:07 +0200 Subject: [PATCH 006/116] feat: add ape token mainnet (#27974) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** PR to add Ape token icon and display ape icon for mainnet [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27974?quickstart=1) ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** ### **Before** Screenshot 2024-10-19 at 23 01 54 ### **After** https://github.com/user-attachments/assets/f8da7264-709b-4da2-85bd-b9dae6b1d724 ## **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/images/ape-token.svg | 1 + shared/constants/network.ts | 11 +++++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 app/images/ape-token.svg diff --git a/app/images/ape-token.svg b/app/images/ape-token.svg new file mode 100644 index 000000000000..8c1777f1a497 --- /dev/null +++ b/app/images/ape-token.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/shared/constants/network.ts b/shared/constants/network.ts index e911ce1aabf5..bca294bc94f2 100644 --- a/shared/constants/network.ts +++ b/shared/constants/network.ts @@ -147,6 +147,7 @@ export const CHAIN_IDS = { NUMBERS: '0x290b', SEI: '0x531', APE_TESTNET: '0x8157', + APE_MAINNET: '0x8173', BERACHAIN: '0x138d5', METACHAIN_ONE: '0x1b6e6', ARBITRUM_SEPOLIA: '0x66eee', @@ -207,6 +208,7 @@ export const CHAINLIST_CHAIN_IDS_MAP = { ZORA_MAINNET: '0x76adf1', FILECOIN: '0x13a', NUMBERS: '0x290b', + APE: '0x8173', } as const; // To add a deprecation warning to a network, add it to the array @@ -371,6 +373,7 @@ const CHAINLIST_CURRENCY_SYMBOLS_MAP = { HUOBI_ECO_CHAIN_MAINNET: 'HT', ACALA_NETWORK: 'ACA', IOTEX_MAINNET: 'IOTX', + APE: 'APE', } as const; export const CHAINLIST_CURRENCY_SYMBOLS_MAP_NETWORK_COLLISION = { @@ -416,6 +419,7 @@ export const FUSE_GOLD_MAINNET_IMAGE_URL = './images/fuse-mainnet.jpg'; export const HAQQ_NETWORK_IMAGE_URL = './images/haqq.svg'; export const IOTEX_MAINNET_IMAGE_URL = './images/iotex.svg'; export const IOTEX_TOKEN_IMAGE_URL = './images/iotex-token.svg'; +export const APE_TOKEN_IMAGE_URL = './images/ape-token.svg'; export const KCC_MAINNET_IMAGE_URL = './images/kcc-mainnet.svg'; export const KLAYTN_MAINNET_IMAGE_URL = './images/klaytn.svg'; export const KROMA_MAINNET_IMAGE_URL = './images/kroma.svg'; @@ -449,7 +453,7 @@ export const NUMBERS_MAINNET_IMAGE_URL = './images/numbers-mainnet.svg'; export const NUMBERS_TOKEN_IMAGE_URL = './images/numbers-token.png'; export const SEI_IMAGE_URL = './images/sei.svg'; export const NEAR_IMAGE_URL = './images/near.svg'; -export const APE_TESTNET_IMAGE_URL = './images/ape.svg'; +export const APE_IMAGE_URL = './images/ape.svg'; export const INFURA_PROVIDER_TYPES = [ NETWORK_TYPES.MAINNET, @@ -564,6 +568,7 @@ export const NETWORK_TO_NAME_MAP = { export const CHAIN_ID_TO_CURRENCY_SYMBOL_MAP = { [CHAINLIST_CHAIN_IDS_MAP.AVALANCHE]: CHAINLIST_CURRENCY_SYMBOLS_MAP.AVALANCHE, + [CHAINLIST_CHAIN_IDS_MAP.APE]: CHAINLIST_CURRENCY_SYMBOLS_MAP.APE, [CHAINLIST_CHAIN_IDS_MAP.BSC]: CHAINLIST_CURRENCY_SYMBOLS_MAP.BNB, [CHAINLIST_CHAIN_IDS_MAP.BASE]: CHAINLIST_CURRENCY_SYMBOLS_MAP.BASE, [CHAINLIST_CHAIN_IDS_MAP.ARBITRUM]: CHAINLIST_CURRENCY_SYMBOLS_MAP.ARBITRUM, @@ -782,7 +787,8 @@ export const CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP = { [CHAINLIST_CHAIN_IDS_MAP.ZKATANA]: ZKATANA_MAINNET_IMAGE_URL, [CHAINLIST_CHAIN_IDS_MAP.ZORA_MAINNET]: ZORA_MAINNET_IMAGE_URL, [CHAINLIST_CHAIN_IDS_MAP.FILECOIN]: FILECOIN_MAINNET_IMAGE_URL, - [CHAINLIST_CHAIN_IDS_MAP.APE_TESTNET]: APE_TESTNET_IMAGE_URL, + [CHAINLIST_CHAIN_IDS_MAP.APE_TESTNET]: APE_IMAGE_URL, + [CHAINLIST_CHAIN_IDS_MAP.APE_MAINNET]: APE_IMAGE_URL, [CHAINLIST_CHAIN_IDS_MAP.BASE]: BASE_TOKEN_IMAGE_URL, [CHAINLIST_CHAIN_IDS_MAP.NUMBERS]: NUMBERS_MAINNET_IMAGE_URL, [CHAINLIST_CHAIN_IDS_MAP.SEI]: SEI_IMAGE_URL, @@ -817,6 +823,7 @@ export const CHAIN_ID_TOKEN_IMAGE_MAP = { [CHAIN_IDS.MOONRIVER]: MOONRIVER_TOKEN_IMAGE_URL, [CHAIN_IDS.MOONBEAM]: MOONBEAM_TOKEN_IMAGE_URL, [CHAINLIST_CHAIN_IDS_MAP.IOTEX_MAINNET]: IOTEX_TOKEN_IMAGE_URL, + [CHAINLIST_CHAIN_IDS_MAP.APE_MAINNET]: APE_TOKEN_IMAGE_URL, } as const; export const INFURA_BLOCKED_KEY = 'countryBlocked'; From 80cfcf79b7dde4db9cf1bad86cb1b8624e354727 Mon Sep 17 00:00:00 2001 From: Bryan Fullam Date: Tue, 22 Oct 2024 18:33:26 +0200 Subject: [PATCH 007/116] fix: prevent scrolling to account list item on send page (#27934) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Opening the send page scrolls down to the currently selected account. On a wallet with 6+ accounts, this scrolls so far that the more relevant sending UI is out of view. This PR prevents the scrolling behavior, keeping the relevant UI in view. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27934?quickstart=1) ## **Manual testing steps** 1. On a wallet with 6+ addresses, select the last address on extension 2. Click the Send button ## **Screenshots/Recordings** ### **Before** ![Screenshot 2024-10-17 at 17 15 19](https://github.com/user-attachments/assets/45dca03e-1754-4a81-bde7-7e887834787b) ### **After** ![Screenshot 2024-10-17 at 17 16 05](https://github.com/user-attachments/assets/6ec5cb74-0b3e-45f1-a4de-5c74c0c2ad21) ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .../multichain/account-list-item/account-list-item.js | 9 +++++++-- .../multichain/pages/send/components/your-accounts.tsx | 1 + 2 files changed, 8 insertions(+), 2 deletions(-) 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 517639b1c86e..9e070b33954b 100644 --- a/ui/components/multichain/account-list-item/account-list-item.js +++ b/ui/components/multichain/account-list-item/account-list-item.js @@ -86,6 +86,7 @@ const AccountListItem = ({ isActive = false, startAccessory, onActionClick, + shouldScrollToWhenSelected = true, }) => { const t = useI18nContext(); const [accountOptionsMenuOpen, setAccountOptionsMenuOpen] = useState(false); @@ -128,10 +129,10 @@ const AccountListItem = ({ // scroll the item into view const itemRef = useRef(null); useEffect(() => { - if (selected) { + if (selected && shouldScrollToWhenSelected) { itemRef.current?.scrollIntoView?.(); } - }, [itemRef, selected]); + }, [itemRef, selected, shouldScrollToWhenSelected]); const trackEvent = useContext(MetaMetricsContext); const primaryTokenImage = useMultichainSelector( @@ -502,6 +503,10 @@ AccountListItem.propTypes = { * Represents start accessory */ startAccessory: PropTypes.node, + /** + * Determines if list item should be scrolled to when selected + */ + shouldScrollToWhenSelected: PropTypes.bool, }; AccountListItem.displayName = 'AccountListItem'; diff --git a/ui/components/multichain/pages/send/components/your-accounts.tsx b/ui/components/multichain/pages/send/components/your-accounts.tsx index f53d6603cb78..e59d0aa2d5a1 100644 --- a/ui/components/multichain/pages/send/components/your-accounts.tsx +++ b/ui/components/multichain/pages/send/components/your-accounts.tsx @@ -57,6 +57,7 @@ export const SendPageYourAccounts = ({ selected={selectedAccount.address === account.address} key={account.address} isPinned={Boolean(account.pinned)} + shouldScrollToWhenSelected={false} onClick={() => { dispatch( addHistoryEntry( From 6b9499268b00bb20c87213d5c616b85586dc578d Mon Sep 17 00:00:00 2001 From: Nick Gambino <35090461+gambinish@users.noreply.github.com> Date: Tue, 22 Oct 2024 07:15:03 -1000 Subject: [PATCH 008/116] fix: Allow users to remove linea from networks list (#27512) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Users should be allowed to remove Linea from networks list. When Linea is removed from default network list, it should appear within the Popular Networks section (be suggested to them). So, we need to also add it to `FEATURED_RPCS` [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27512?quickstart=1) ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/MMASSETS-387 ## **Manual testing steps** 1. Go to networks list, ensure that you can remove linea, even though it is a default network. ## **Screenshots/Recordings** ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- shared/constants/network.test.ts | 1 + shared/constants/network.ts | 14 ++++++++++++++ .../network-list-menu/network-list-menu.tsx | 5 +---- ui/ducks/bridge/selectors.test.ts | 18 +++++++++--------- 4 files changed, 25 insertions(+), 13 deletions(-) diff --git a/shared/constants/network.test.ts b/shared/constants/network.test.ts index 20a13ccfb273..9d9ca72b46cd 100644 --- a/shared/constants/network.test.ts +++ b/shared/constants/network.test.ts @@ -35,6 +35,7 @@ describe('NetworkConstants', () => { 'Polygon Mainnet': CHAIN_IDS.POLYGON, 'zkSync Era Mainnet': CHAIN_IDS.ZKSYNC_ERA, 'Base Mainnet': CHAIN_IDS.BASE, + 'Linea Mainnet': CHAIN_IDS.LINEA_MAINNET, }; FEATURED_RPCS.forEach((rpc) => { diff --git a/shared/constants/network.ts b/shared/constants/network.ts index bca294bc94f2..64d330b73b2c 100644 --- a/shared/constants/network.ts +++ b/shared/constants/network.ts @@ -939,6 +939,20 @@ export const UNSUPPORTED_RPC_METHODS = new Set([ export const IPFS_DEFAULT_GATEWAY_URL = 'dweb.link'; export const FEATURED_RPCS: AddNetworkFields[] = [ + { + chainId: CHAIN_IDS.LINEA_MAINNET, + name: LINEA_MAINNET_DISPLAY_NAME, + nativeCurrency: CURRENCY_SYMBOLS.ETH, + rpcEndpoints: [ + { + url: `https://linea-mainnet.infura.io/v3/${infuraProjectId}`, + type: RpcEndpointType.Custom, + }, + ], + defaultRpcEndpointIndex: 0, + blockExplorerUrls: ['https://lineascan.build/'], + defaultBlockExplorerUrlIndex: 0, + }, { chainId: CHAIN_IDS.ARBITRUM, name: ARBITRUM_DISPLAY_NAME, diff --git a/ui/components/multichain/network-list-menu/network-list-menu.tsx b/ui/components/multichain/network-list-menu/network-list-menu.tsx index 5376dc17859e..518f9f19387a 100644 --- a/ui/components/multichain/network-list-menu/network-list-menu.tsx +++ b/ui/components/multichain/network-list-menu/network-list-menu.tsx @@ -251,10 +251,7 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => { const generateNetworkListItem = (network: NetworkConfiguration) => { const isCurrentNetwork = network.chainId === currentChainId; const canDeleteNetwork = - isUnlocked && - !isCurrentNetwork && - network.chainId !== CHAIN_IDS.MAINNET && - network.chainId !== CHAIN_IDS.LINEA_MAINNET; + isUnlocked && !isCurrentNetwork && network.chainId !== CHAIN_IDS.MAINNET; return ( { { srcNetworkAllowlist: [CHAIN_IDS.ARBITRUM] }, { toChainId: '0xe708' }, {}, - { ...mockNetworkState(FEATURED_RPCS[0]) }, + { ...mockNetworkState(FEATURED_RPCS[1]) }, ); const result = getFromChain(state as never); @@ -89,7 +89,7 @@ describe('Bridge selectors', () => { ); const result = getAllBridgeableNetworks(state as never); - expect(result).toHaveLength(7); + expect(result).toHaveLength(8); expect(result[0]).toStrictEqual( expect.objectContaining({ chainId: FEATURED_RPCS[0].chainId }), ); @@ -190,21 +190,19 @@ describe('Bridge selectors', () => { }, {}, {}, - mockNetworkState(...FEATURED_RPCS, { - chainId: CHAIN_IDS.LINEA_MAINNET, - }), + mockNetworkState(...FEATURED_RPCS), ); const result = getToChains(state as never); expect(result).toHaveLength(3); expect(result[0]).toStrictEqual( - expect.objectContaining({ chainId: CHAIN_IDS.OPTIMISM }), + expect.objectContaining({ chainId: CHAIN_IDS.ARBITRUM }), ); expect(result[1]).toStrictEqual( - expect.objectContaining({ chainId: CHAIN_IDS.POLYGON }), + expect.objectContaining({ chainId: CHAIN_IDS.OPTIMISM }), ); expect(result[2]).toStrictEqual( - expect.objectContaining({ chainId: CHAIN_IDS.LINEA_MAINNET }), + expect.objectContaining({ chainId: CHAIN_IDS.POLYGON }), ); }); @@ -297,7 +295,9 @@ describe('Bridge selectors', () => { { ...mockNetworkState( ...Object.values(BUILT_IN_NETWORKS), - ...FEATURED_RPCS, + ...FEATURED_RPCS.filter( + (network) => network.chainId !== CHAIN_IDS.LINEA_MAINNET, // Linea mainnet is both a built in network, as well as featured RPC + ), ), useExternalServices: true, }, From d473e13b6f77237b1a681a5101b98c21a5950812 Mon Sep 17 00:00:00 2001 From: David Murdoch <187813+davidmurdoch@users.noreply.github.com> Date: Tue, 22 Oct 2024 14:52:30 -0400 Subject: [PATCH 009/116] refactor: remove circular dependency between `ui/ducks/custom-gas.js` and `ui/selectors/index.js` (#27640) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/selectors/custom-gas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/selectors/custom-gas.js b/ui/selectors/custom-gas.js index ac1f417e938a..8afd741060a0 100644 --- a/ui/selectors/custom-gas.js +++ b/ui/selectors/custom-gas.js @@ -15,7 +15,7 @@ import { import { calcGasTotal } from '../../shared/lib/transactions-controller-utils'; import { Numeric } from '../../shared/modules/Numeric'; import { EtherDenomination } from '../../shared/constants/common'; -import { getIsMainnet } from '.'; +import { getIsMainnet } from './selectors'; export function getCustomGasLimit(state) { return state.gas.customData.limit; From ad6d1b3dde9e507df953bb65d88773a4519afd5c Mon Sep 17 00:00:00 2001 From: David Murdoch <187813+davidmurdoch@users.noreply.github.com> Date: Tue, 22 Oct 2024 15:23:06 -0400 Subject: [PATCH 010/116] refactor: remove relative imports to `selectors/index.js` from other selectors files (#27642) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/selectors/multichain.ts | 2 +- ui/selectors/permissions.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/selectors/multichain.ts b/ui/selectors/multichain.ts index b676da209046..609ba2fe5f64 100644 --- a/ui/selectors/multichain.ts +++ b/ui/selectors/multichain.ts @@ -36,7 +36,7 @@ import { getSelectedInternalAccount, getShouldShowFiat, getShowFiatInTestnets, -} from '.'; +} from './selectors'; export type RatesState = { metamask: RatesControllerState; diff --git a/ui/selectors/permissions.js b/ui/selectors/permissions.js index fb32d41c9b17..4031b8e881a3 100644 --- a/ui/selectors/permissions.js +++ b/ui/selectors/permissions.js @@ -12,7 +12,7 @@ import { getOriginOfCurrentTab, getSelectedInternalAccount, getTargetSubjectMetadata, -} from '.'; +} from './selectors'; // selectors From eb7778653a2e998fc50828eda743bade0941106d Mon Sep 17 00:00:00 2001 From: legobeat <109787230+legobeat@users.noreply.github.com> Date: Tue, 22 Oct 2024 20:06:49 +0000 Subject: [PATCH 011/116] fix: @metamask/eth-json-rpc-filters@^7.0.0->^8.0.0 (#27917) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** - chore: remove obsolete allow-scripts entries - deps: @metamask/eth-json-rpc-filters@^7.0.0->^8.0.0 - https://github.com/MetaMask/eth-json-rpc-filters/releases/tag/v8.0.0 - remove usage of legacy `metamask/eth-query@3.0.1` [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27917?quickstart=1) ## **Related issues** ### Blocking - #27956 ## **Manual testing steps** ## **Screenshots/Recordings** ### **Before** ### **After** ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] 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. --- lavamoat/browserify/beta/policy.json | 56 +++------------------------ lavamoat/browserify/flask/policy.json | 56 +++------------------------ lavamoat/browserify/main/policy.json | 56 +++------------------------ lavamoat/browserify/mmi/policy.json | 56 +++------------------------ package.json | 2 +- yarn.lock | 37 +++++------------- 6 files changed, 34 insertions(+), 229 deletions(-) diff --git a/lavamoat/browserify/beta/policy.json b/lavamoat/browserify/beta/policy.json index 1ec0abe0f909..a99bc5a7a0d9 100644 --- a/lavamoat/browserify/beta/policy.json +++ b/lavamoat/browserify/beta/policy.json @@ -860,68 +860,24 @@ "console.error": true }, "packages": { - "@metamask/eth-json-rpc-filters>@metamask/eth-query": true, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine": true, - "@metamask/eth-json-rpc-filters>async-mutex": true, + "@metamask/eth-query": true, + "@metamask/name-controller>async-mutex": true, "@metamask/safe-event-emitter": true, "pify": true } }, - "@metamask/eth-json-rpc-filters>@metamask/eth-query": { - "packages": { - "@metamask/eth-query>json-rpc-random-id": true, - "watchify>xtend": true - } - }, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine": { "packages": { "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors": true, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/utils": true, - "@metamask/safe-event-emitter": true + "@metamask/safe-event-emitter": true, + "@metamask/utils": true } }, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors": { "packages": { - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors>@metamask/utils": true, - "@metamask/rpc-errors>fast-safe-stringify": true - } - }, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>@metamask/superstruct": true, - "@metamask/utils>@scure/base": true, - "@metamask/utils>pony-cause": true, - "@noble/hashes": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>@metamask/superstruct": true, - "@metamask/utils>@scure/base": true, - "@metamask/utils>pony-cause": true, - "@noble/hashes": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, - "@metamask/eth-json-rpc-filters>async-mutex": { - "globals": { - "setTimeout": true - }, - "packages": { - "@swc/helpers>tslib": true + "@metamask/rpc-errors>fast-safe-stringify": true, + "@metamask/utils": true } }, "@metamask/eth-json-rpc-middleware": { diff --git a/lavamoat/browserify/flask/policy.json b/lavamoat/browserify/flask/policy.json index 1ec0abe0f909..a99bc5a7a0d9 100644 --- a/lavamoat/browserify/flask/policy.json +++ b/lavamoat/browserify/flask/policy.json @@ -860,68 +860,24 @@ "console.error": true }, "packages": { - "@metamask/eth-json-rpc-filters>@metamask/eth-query": true, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine": true, - "@metamask/eth-json-rpc-filters>async-mutex": true, + "@metamask/eth-query": true, + "@metamask/name-controller>async-mutex": true, "@metamask/safe-event-emitter": true, "pify": true } }, - "@metamask/eth-json-rpc-filters>@metamask/eth-query": { - "packages": { - "@metamask/eth-query>json-rpc-random-id": true, - "watchify>xtend": true - } - }, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine": { "packages": { "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors": true, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/utils": true, - "@metamask/safe-event-emitter": true + "@metamask/safe-event-emitter": true, + "@metamask/utils": true } }, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors": { "packages": { - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors>@metamask/utils": true, - "@metamask/rpc-errors>fast-safe-stringify": true - } - }, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>@metamask/superstruct": true, - "@metamask/utils>@scure/base": true, - "@metamask/utils>pony-cause": true, - "@noble/hashes": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>@metamask/superstruct": true, - "@metamask/utils>@scure/base": true, - "@metamask/utils>pony-cause": true, - "@noble/hashes": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, - "@metamask/eth-json-rpc-filters>async-mutex": { - "globals": { - "setTimeout": true - }, - "packages": { - "@swc/helpers>tslib": true + "@metamask/rpc-errors>fast-safe-stringify": true, + "@metamask/utils": true } }, "@metamask/eth-json-rpc-middleware": { diff --git a/lavamoat/browserify/main/policy.json b/lavamoat/browserify/main/policy.json index 1ec0abe0f909..a99bc5a7a0d9 100644 --- a/lavamoat/browserify/main/policy.json +++ b/lavamoat/browserify/main/policy.json @@ -860,68 +860,24 @@ "console.error": true }, "packages": { - "@metamask/eth-json-rpc-filters>@metamask/eth-query": true, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine": true, - "@metamask/eth-json-rpc-filters>async-mutex": true, + "@metamask/eth-query": true, + "@metamask/name-controller>async-mutex": true, "@metamask/safe-event-emitter": true, "pify": true } }, - "@metamask/eth-json-rpc-filters>@metamask/eth-query": { - "packages": { - "@metamask/eth-query>json-rpc-random-id": true, - "watchify>xtend": true - } - }, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine": { "packages": { "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors": true, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/utils": true, - "@metamask/safe-event-emitter": true + "@metamask/safe-event-emitter": true, + "@metamask/utils": true } }, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors": { "packages": { - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors>@metamask/utils": true, - "@metamask/rpc-errors>fast-safe-stringify": true - } - }, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>@metamask/superstruct": true, - "@metamask/utils>@scure/base": true, - "@metamask/utils>pony-cause": true, - "@noble/hashes": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>@metamask/superstruct": true, - "@metamask/utils>@scure/base": true, - "@metamask/utils>pony-cause": true, - "@noble/hashes": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, - "@metamask/eth-json-rpc-filters>async-mutex": { - "globals": { - "setTimeout": true - }, - "packages": { - "@swc/helpers>tslib": true + "@metamask/rpc-errors>fast-safe-stringify": true, + "@metamask/utils": true } }, "@metamask/eth-json-rpc-middleware": { diff --git a/lavamoat/browserify/mmi/policy.json b/lavamoat/browserify/mmi/policy.json index 07796dc92f74..5a3b2becb001 100644 --- a/lavamoat/browserify/mmi/policy.json +++ b/lavamoat/browserify/mmi/policy.json @@ -952,68 +952,24 @@ "console.error": true }, "packages": { - "@metamask/eth-json-rpc-filters>@metamask/eth-query": true, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine": true, - "@metamask/eth-json-rpc-filters>async-mutex": true, + "@metamask/eth-query": true, + "@metamask/name-controller>async-mutex": true, "@metamask/safe-event-emitter": true, "pify": true } }, - "@metamask/eth-json-rpc-filters>@metamask/eth-query": { - "packages": { - "@metamask/eth-query>json-rpc-random-id": true, - "watchify>xtend": true - } - }, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine": { "packages": { "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors": true, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/utils": true, - "@metamask/safe-event-emitter": true + "@metamask/safe-event-emitter": true, + "@metamask/utils": true } }, "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors": { "packages": { - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors>@metamask/utils": true, - "@metamask/rpc-errors>fast-safe-stringify": true - } - }, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/rpc-errors>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>@metamask/superstruct": true, - "@metamask/utils>@scure/base": true, - "@metamask/utils>pony-cause": true, - "@noble/hashes": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, - "@metamask/eth-json-rpc-filters>@metamask/json-rpc-engine>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>@metamask/superstruct": true, - "@metamask/utils>@scure/base": true, - "@metamask/utils>pony-cause": true, - "@noble/hashes": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, - "@metamask/eth-json-rpc-filters>async-mutex": { - "globals": { - "setTimeout": true - }, - "packages": { - "@swc/helpers>tslib": true + "@metamask/rpc-errors>fast-safe-stringify": true, + "@metamask/utils": true } }, "@metamask/eth-json-rpc-middleware": { diff --git a/package.json b/package.json index 2b5baa029c23..9826fb4ff59a 100644 --- a/package.json +++ b/package.json @@ -316,7 +316,7 @@ "@metamask/design-tokens": "^4.0.0", "@metamask/ens-controller": "^13.0.0", "@metamask/ens-resolver-snap": "^0.1.2", - "@metamask/eth-json-rpc-filters": "^7.0.0", + "@metamask/eth-json-rpc-filters": "^8.0.0", "@metamask/eth-json-rpc-middleware": "patch:@metamask/eth-json-rpc-middleware@npm%3A14.0.1#~/.yarn/patches/@metamask-eth-json-rpc-middleware-npm-14.0.1-b6c2ccbe8c.patch", "@metamask/eth-ledger-bridge-keyring": "^3.0.1", "@metamask/eth-query": "^4.0.0", diff --git a/yarn.lock b/yarn.lock index 4c9e13f82134..1170bdb8a6a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5144,16 +5144,16 @@ __metadata: languageName: node linkType: hard -"@metamask/eth-json-rpc-filters@npm:^7.0.0": - version: 7.0.0 - resolution: "@metamask/eth-json-rpc-filters@npm:7.0.0" +"@metamask/eth-json-rpc-filters@npm:^8.0.0": + version: 8.0.0 + resolution: "@metamask/eth-json-rpc-filters@npm:8.0.0" dependencies: - "@metamask/eth-query": "npm:^3.0.1" - "@metamask/json-rpc-engine": "npm:^7.1.0" + "@metamask/eth-query": "npm:^4.0.0" + "@metamask/json-rpc-engine": "npm:^9.0.0" "@metamask/safe-event-emitter": "npm:^3.0.0" - async-mutex: "npm:^0.2.6" + async-mutex: "npm:^0.5.0" pify: "npm:^5.0.0" - checksum: 10/8ee6a6791f8e84d590192ade2c8b1ddaaa81fd4eb64b042facaafd8fbe69f29df3a3e2c79dfb0da0839f72e53832e73ac8b72dbedb94a919fe9afcdad51a2c2a + checksum: 10/2a0a081abe3ed152e4c74116a486dae49a37cdda1ea1d4739825fc888be40518623a69593034b7da2489204af968060670b00d1e2299ff721b554c615b09127b languageName: node linkType: hard @@ -5275,16 +5275,6 @@ __metadata: languageName: node linkType: hard -"@metamask/eth-query@npm:^3.0.1": - version: 3.0.1 - resolution: "@metamask/eth-query@npm:3.0.1" - dependencies: - json-rpc-random-id: "npm:^1.0.0" - xtend: "npm:^4.0.1" - checksum: 10/d463aff018ae3f1229331177e9efa0eb62958c6fcc30039c22d151ee64da17d55153ef4861060aecec674f764aa9074341bef53fdf86c2258d3cb2682976e835 - languageName: node - linkType: hard - "@metamask/eth-query@npm:^4.0.0": version: 4.0.0 resolution: "@metamask/eth-query@npm:4.0.0" @@ -5547,7 +5537,7 @@ __metadata: languageName: node linkType: hard -"@metamask/json-rpc-engine@npm:^7.1.0, @metamask/json-rpc-engine@npm:^7.1.1, @metamask/json-rpc-engine@npm:^7.3.2": +"@metamask/json-rpc-engine@npm:^7.1.1, @metamask/json-rpc-engine@npm:^7.3.2": version: 7.3.3 resolution: "@metamask/json-rpc-engine@npm:7.3.3" dependencies: @@ -12787,15 +12777,6 @@ __metadata: languageName: node linkType: hard -"async-mutex@npm:^0.2.6": - version: 0.2.6 - resolution: "async-mutex@npm:0.2.6" - dependencies: - tslib: "npm:^2.0.0" - checksum: 10/3cf676fc48b4686abf534cc02d4784bab3f35d7836a0a7476c96e57c3f6607dd3d94cc0989b29d33ce5ae5cde8be8e1a96f3e769ba3b0e1ba4a244f873aa5623 - languageName: node - linkType: hard - "async-mutex@npm:^0.3.1": version: 0.3.2 resolution: "async-mutex@npm:0.3.2" @@ -25976,7 +25957,7 @@ __metadata: "@metamask/eslint-config-nodejs": "npm:^9.0.0" "@metamask/eslint-config-typescript": "npm:^9.0.1" "@metamask/eslint-plugin-design-tokens": "npm:^1.1.0" - "@metamask/eth-json-rpc-filters": "npm:^7.0.0" + "@metamask/eth-json-rpc-filters": "npm:^8.0.0" "@metamask/eth-json-rpc-middleware": "patch:@metamask/eth-json-rpc-middleware@npm%3A14.0.1#~/.yarn/patches/@metamask-eth-json-rpc-middleware-npm-14.0.1-b6c2ccbe8c.patch" "@metamask/eth-ledger-bridge-keyring": "npm:^3.0.1" "@metamask/eth-query": "npm:^4.0.0" From a1a62aa33572710ec915823d52427c93979ee622 Mon Sep 17 00:00:00 2001 From: Howard Braham Date: Tue, 22 Oct 2024 13:33:36 -0700 Subject: [PATCH 012/116] refactor: routes.component.js and creation of ToastMaster (#27735) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This PR is part of the larger effort to add `React.lazy` to routes. I would be very surprised if I did not break functionality somewhere, as this was a large and tough refactor. It needs some good QA, and Harika has been doing some testing that has passed. Summary of what I did: - Pulled all Toast-related logic out of routes.component.js and into the new ToastMaster - Pulled everything else I could pull out into routes-helpers.js - Moved things out of the general selectors.js and actions.ts into toast-master-selectors.ts - Simplification of some Pointless Thunks™ For later PRs: - Convert routes.component.js to TypeScript - Convert routes.component.js to Hooks - Convert routes.component.js to react-router v6 - Eliminate routes.container.js [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27735?quickstart=1) ## **Related issues** Progresses: MetaMask/MetaMask-planning#2898 ## **Manual testing steps** Test all the Routes and all the Toasts ## **Screenshots/Recordings** ### **Before** ### **After** ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .../nfts-detection-notice-nfts-tab.js | 6 +- ui/components/app/toast-master/selectors.ts | 108 ++++ .../app/toast-master/toast-master.js | 299 ++++++++++ .../app/toast-master/toast-master.test.ts | 206 +++++++ ui/components/app/toast-master/utils.ts | 69 +++ ui/pages/onboarding-flow/onboarding-flow.js | 10 +- ui/pages/routes/routes.component.js | 539 +----------------- ui/pages/routes/routes.container.js | 48 +- ui/pages/routes/utils.js | 211 +++++++ ui/selectors/selectors.js | 59 -- ui/selectors/selectors.test.js | 205 +------ ui/store/actions.ts | 41 -- 12 files changed, 934 insertions(+), 867 deletions(-) create mode 100644 ui/components/app/toast-master/selectors.ts create mode 100644 ui/components/app/toast-master/toast-master.js create mode 100644 ui/components/app/toast-master/toast-master.test.ts create mode 100644 ui/components/app/toast-master/utils.ts create mode 100644 ui/pages/routes/utils.js diff --git a/ui/components/app/assets/nfts/nfts-detection-notice-nfts-tab/nfts-detection-notice-nfts-tab.js b/ui/components/app/assets/nfts/nfts-detection-notice-nfts-tab/nfts-detection-notice-nfts-tab.js index 3069b6cc5168..0f8f629cada0 100644 --- a/ui/components/app/assets/nfts/nfts-detection-notice-nfts-tab/nfts-detection-notice-nfts-tab.js +++ b/ui/components/app/assets/nfts/nfts-detection-notice-nfts-tab/nfts-detection-notice-nfts-tab.js @@ -1,14 +1,14 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { BannerAlert } from '../../../../component-library'; import { useI18nContext } from '../../../../../hooks/useI18nContext'; +import { getOpenSeaEnabled } from '../../../../../selectors'; import { detectNfts, setOpenSeaEnabled, - setShowNftDetectionEnablementToast, setUseNftDetection, } from '../../../../../store/actions'; -import { getOpenSeaEnabled } from '../../../../../selectors'; +import { BannerAlert } from '../../../../component-library'; +import { setShowNftDetectionEnablementToast } from '../../../toast-master/utils'; export default function NFTsDetectionNoticeNFTsTab() { const t = useI18nContext(); diff --git a/ui/components/app/toast-master/selectors.ts b/ui/components/app/toast-master/selectors.ts new file mode 100644 index 000000000000..b88762c3bc19 --- /dev/null +++ b/ui/components/app/toast-master/selectors.ts @@ -0,0 +1,108 @@ +import { InternalAccount, isEvmAccountType } from '@metamask/keyring-api'; +import { getAlertEnabledness } from '../../../ducks/metamask/metamask'; +import { PRIVACY_POLICY_DATE } from '../../../helpers/constants/privacy-policy'; +import { + SURVEY_DATE, + SURVEY_END_TIME, + SURVEY_START_TIME, +} from '../../../helpers/constants/survey'; +import { getPermittedAccountsForCurrentTab } from '../../../selectors'; +import { MetaMaskReduxState } from '../../../store/store'; +import { getIsPrivacyToastRecent } from './utils'; + +// TODO: get this into one of the larger definitions of state type +type State = Omit & { + appState: { + showNftDetectionEnablementToast?: boolean; + }; + metamask: { + newPrivacyPolicyToastClickedOrClosed?: boolean; + newPrivacyPolicyToastShownDate?: number; + onboardingDate?: number; + showNftDetectionEnablementToast?: boolean; + surveyLinkLastClickedOrClosed?: number; + switchedNetworkNeverShowMessage?: boolean; + }; +}; + +/** + * Determines if the survey toast should be shown based on the current time, survey start and end times, and whether the survey link was last clicked or closed. + * + * @param state - The application state containing the necessary survey data. + * @returns True if the current time is between the survey start and end times and the survey link was not last clicked or closed. False otherwise. + */ +export function selectShowSurveyToast(state: State): boolean { + if (state.metamask?.surveyLinkLastClickedOrClosed) { + return false; + } + + const startTime = new Date(`${SURVEY_DATE} ${SURVEY_START_TIME}`).getTime(); + const endTime = new Date(`${SURVEY_DATE} ${SURVEY_END_TIME}`).getTime(); + const now = Date.now(); + + return now > startTime && now < endTime; +} + +/** + * Determines if the privacy policy toast should be shown based on the current date and whether the new privacy policy toast was clicked or closed. + * + * @param state - The application state containing the privacy policy data. + * @returns Boolean is True if the toast should be shown, and the number is the date the toast was last shown. + */ +export function selectShowPrivacyPolicyToast(state: State): { + showPrivacyPolicyToast: boolean; + newPrivacyPolicyToastShownDate?: number; +} { + const { + newPrivacyPolicyToastClickedOrClosed, + newPrivacyPolicyToastShownDate, + onboardingDate, + } = state.metamask || {}; + const newPrivacyPolicyDate = new Date(PRIVACY_POLICY_DATE); + const currentDate = new Date(Date.now()); + + const showPrivacyPolicyToast = + !newPrivacyPolicyToastClickedOrClosed && + currentDate >= newPrivacyPolicyDate && + getIsPrivacyToastRecent(newPrivacyPolicyToastShownDate) && + // users who onboarded before the privacy policy date should see the notice + // and + // old users who don't have onboardingDate set should see the notice + (!onboardingDate || onboardingDate < newPrivacyPolicyDate.valueOf()); + + return { showPrivacyPolicyToast, newPrivacyPolicyToastShownDate }; +} + +export function selectNftDetectionEnablementToast(state: State): boolean { + return Boolean(state.appState?.showNftDetectionEnablementToast); +} + +// If there is more than one connected account to activeTabOrigin, +// *BUT* the current account is not one of them, show the banner +export function selectShowConnectAccountToast( + state: State, + account: InternalAccount, +): boolean { + const allowShowAccountSetting = getAlertEnabledness(state).unconnectedAccount; + const connectedAccounts = getPermittedAccountsForCurrentTab(state); + const isEvmAccount = isEvmAccountType(account?.type); + + return ( + allowShowAccountSetting && + account && + state.activeTab?.origin && + isEvmAccount && + connectedAccounts.length > 0 && + !connectedAccounts.some((address) => address === account.address) + ); +} + +/** + * Retrieves user preference to never see the "Switched Network" toast + * + * @param state - Redux state object. + * @returns Boolean preference value + */ +export function selectSwitchedNetworkNeverShowMessage(state: State): boolean { + return Boolean(state.metamask.switchedNetworkNeverShowMessage); +} diff --git a/ui/components/app/toast-master/toast-master.js b/ui/components/app/toast-master/toast-master.js new file mode 100644 index 000000000000..584f1cc25983 --- /dev/null +++ b/ui/components/app/toast-master/toast-master.js @@ -0,0 +1,299 @@ +/* eslint-disable react/prop-types -- TODO: upgrade to TypeScript */ + +import React, { useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { useHistory, useLocation } from 'react-router-dom'; +import { MILLISECOND, SECOND } from '../../../../shared/constants/time'; +import { + PRIVACY_POLICY_LINK, + SURVEY_LINK, +} from '../../../../shared/lib/ui-utils'; +import { + BorderColor, + BorderRadius, + IconColor, + TextVariant, +} from '../../../helpers/constants/design-system'; +import { + DEFAULT_ROUTE, + REVIEW_PERMISSIONS, +} from '../../../helpers/constants/routes'; +import { getURLHost } from '../../../helpers/utils/util'; +import { useI18nContext } from '../../../hooks/useI18nContext'; +import { usePrevious } from '../../../hooks/usePrevious'; +import { + getCurrentNetwork, + getOriginOfCurrentTab, + getSelectedAccount, + getSwitchedNetworkDetails, + getUseNftDetection, +} from '../../../selectors'; +import { + addPermittedAccount, + clearSwitchedNetworkDetails, + hidePermittedNetworkToast, +} from '../../../store/actions'; +import { + AvatarAccount, + AvatarAccountSize, + AvatarNetwork, + Icon, + IconName, +} from '../../component-library'; +import { Toast, ToastContainer } from '../../multichain'; +import { SurveyToast } from '../../ui/survey-toast'; +import { + selectNftDetectionEnablementToast, + selectShowConnectAccountToast, + selectShowPrivacyPolicyToast, + selectShowSurveyToast, + selectSwitchedNetworkNeverShowMessage, +} from './selectors'; +import { + setNewPrivacyPolicyToastClickedOrClosed, + setNewPrivacyPolicyToastShownDate, + setShowNftDetectionEnablementToast, + setSurveyLinkLastClickedOrClosed, + setSwitchedNetworkNeverShowMessage, +} from './utils'; + +export function ToastMaster() { + const location = useLocation(); + + const onHomeScreen = location.pathname === DEFAULT_ROUTE; + + return ( + onHomeScreen && ( + + + + + + + + + + ) + ); +} + +function ConnectAccountToast() { + const t = useI18nContext(); + const dispatch = useDispatch(); + + const [hideConnectAccountToast, setHideConnectAccountToast] = useState(false); + const account = useSelector(getSelectedAccount); + + // If the account has changed, allow the connect account toast again + const prevAccountAddress = usePrevious(account?.address); + if (account?.address !== prevAccountAddress && hideConnectAccountToast) { + setHideConnectAccountToast(false); + } + + const showConnectAccountToast = useSelector((state) => + selectShowConnectAccountToast(state, account), + ); + + const activeTabOrigin = useSelector(getOriginOfCurrentTab); + + return ( + Boolean(!hideConnectAccountToast && showConnectAccountToast) && ( + + } + text={t('accountIsntConnectedToastText', [ + account?.metadata?.name, + getURLHost(activeTabOrigin), + ])} + actionText={t('connectAccount')} + onActionClick={() => { + // Connect this account + dispatch(addPermittedAccount(activeTabOrigin, account.address)); + // Use setTimeout to prevent React re-render from + // hiding the tooltip + setTimeout(() => { + // Trigger a mouseenter on the header's connection icon + // to display the informative connection tooltip + document + .querySelector( + '[data-testid="connection-menu"] [data-tooltipped]', + ) + ?.dispatchEvent(new CustomEvent('mouseenter', {})); + }, 250 * MILLISECOND); + }} + onClose={() => setHideConnectAccountToast(true)} + /> + ) + ); +} + +function SurveyToastMayDelete() { + const t = useI18nContext(); + + const showSurveyToast = useSelector(selectShowSurveyToast); + + return ( + showSurveyToast && ( + + } + text={t('surveyTitle')} + actionText={t('surveyConversion')} + onActionClick={() => { + global.platform.openTab({ + url: SURVEY_LINK, + }); + setSurveyLinkLastClickedOrClosed(Date.now()); + }} + onClose={() => { + setSurveyLinkLastClickedOrClosed(Date.now()); + }} + /> + ) + ); +} + +function PrivacyPolicyToast() { + const t = useI18nContext(); + + const { showPrivacyPolicyToast, newPrivacyPolicyToastShownDate } = + useSelector(selectShowPrivacyPolicyToast); + + // If the privacy policy toast is shown, and there is no date set, set it + if (showPrivacyPolicyToast && !newPrivacyPolicyToastShownDate) { + setNewPrivacyPolicyToastShownDate(Date.now()); + } + + return ( + showPrivacyPolicyToast && ( + + } + text={t('newPrivacyPolicyTitle')} + actionText={t('newPrivacyPolicyActionButton')} + onActionClick={() => { + global.platform.openTab({ + url: PRIVACY_POLICY_LINK, + }); + setNewPrivacyPolicyToastClickedOrClosed(); + }} + onClose={setNewPrivacyPolicyToastClickedOrClosed} + /> + ) + ); +} + +function SwitchedNetworkToast() { + const t = useI18nContext(); + const dispatch = useDispatch(); + + const switchedNetworkDetails = useSelector(getSwitchedNetworkDetails); + const switchedNetworkNeverShowMessage = useSelector( + selectSwitchedNetworkNeverShowMessage, + ); + + const isShown = switchedNetworkDetails && !switchedNetworkNeverShowMessage; + + return ( + isShown && ( + + } + text={t('switchedNetworkToastMessage', [ + switchedNetworkDetails.nickname, + getURLHost(switchedNetworkDetails.origin), + ])} + actionText={t('switchedNetworkToastDecline')} + onActionClick={setSwitchedNetworkNeverShowMessage} + onClose={() => dispatch(clearSwitchedNetworkDetails())} + /> + ) + ); +} + +function NftEnablementToast() { + const t = useI18nContext(); + const dispatch = useDispatch(); + + const showNftEnablementToast = useSelector(selectNftDetectionEnablementToast); + const useNftDetection = useSelector(getUseNftDetection); + + const autoHideToastDelay = 5 * SECOND; + + return ( + showNftEnablementToast && + useNftDetection && ( + + } + text={t('nftAutoDetectionEnabled')} + borderRadius={BorderRadius.LG} + textVariant={TextVariant.bodyMd} + autoHideTime={autoHideToastDelay} + onAutoHideToast={() => + dispatch(setShowNftDetectionEnablementToast(false)) + } + /> + ) + ); +} + +function PermittedNetworkToast() { + const t = useI18nContext(); + const dispatch = useDispatch(); + + const isPermittedNetworkToastOpen = useSelector( + (state) => state.appState.showPermittedNetworkToastOpen, + ); + + const currentNetwork = useSelector(getCurrentNetwork); + const activeTabOrigin = useSelector(getOriginOfCurrentTab); + const safeEncodedHost = encodeURIComponent(activeTabOrigin); + const history = useHistory(); + + return ( + isPermittedNetworkToastOpen && ( + + } + text={t('permittedChainToastUpdate', [ + getURLHost(activeTabOrigin), + currentNetwork?.nickname, + ])} + actionText={t('editPermissions')} + onActionClick={() => { + dispatch(hidePermittedNetworkToast()); + history.push(`${REVIEW_PERMISSIONS}/${safeEncodedHost}`); + }} + onClose={() => dispatch(hidePermittedNetworkToast())} + /> + ) + ); +} diff --git a/ui/components/app/toast-master/toast-master.test.ts b/ui/components/app/toast-master/toast-master.test.ts new file mode 100644 index 000000000000..8b29f20a240d --- /dev/null +++ b/ui/components/app/toast-master/toast-master.test.ts @@ -0,0 +1,206 @@ +import { PRIVACY_POLICY_DATE } from '../../../helpers/constants/privacy-policy'; +import { SURVEY_DATE, SURVEY_GMT } from '../../../helpers/constants/survey'; +import { + selectShowPrivacyPolicyToast, + selectShowSurveyToast, +} from './selectors'; + +describe('#getShowSurveyToast', () => { + const realDateNow = Date.now; + + afterEach(() => { + Date.now = realDateNow; + }); + + it('shows the survey link when not yet seen and within time bounds', () => { + Date.now = () => + new Date(`${SURVEY_DATE} 12:25:00 ${SURVEY_GMT}`).getTime(); + const result = selectShowSurveyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + surveyLinkLastClickedOrClosed: undefined, + }, + }); + expect(result).toStrictEqual(true); + }); + + it('does not show the survey link when seen and within time bounds', () => { + Date.now = () => + new Date(`${SURVEY_DATE} 12:25:00 ${SURVEY_GMT}`).getTime(); + const result = selectShowSurveyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + surveyLinkLastClickedOrClosed: 123456789, + }, + }); + expect(result).toStrictEqual(false); + }); + + it('does not show the survey link before time bounds', () => { + Date.now = () => + new Date(`${SURVEY_DATE} 11:25:00 ${SURVEY_GMT}`).getTime(); + const result = selectShowSurveyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + surveyLinkLastClickedOrClosed: undefined, + }, + }); + expect(result).toStrictEqual(false); + }); + + it('does not show the survey link after time bounds', () => { + Date.now = () => + new Date(`${SURVEY_DATE} 14:25:00 ${SURVEY_GMT}`).getTime(); + const result = selectShowSurveyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + surveyLinkLastClickedOrClosed: undefined, + }, + }); + expect(result).toStrictEqual(false); + }); +}); + +describe('#getShowPrivacyPolicyToast', () => { + let dateNowSpy: jest.SpyInstance; + + describe('mock one day after', () => { + beforeEach(() => { + const dayAfterPolicyDate = new Date(PRIVACY_POLICY_DATE); + dayAfterPolicyDate.setDate(dayAfterPolicyDate.getDate() + 1); + + dateNowSpy = jest + .spyOn(Date, 'now') + .mockReturnValue(dayAfterPolicyDate.getTime()); + }); + + afterEach(() => { + dateNowSpy.mockRestore(); + }); + + it('shows the privacy policy toast when not yet seen, on or after the policy date, and onboardingDate is before the policy date', () => { + const result = selectShowPrivacyPolicyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + newPrivacyPolicyToastClickedOrClosed: false, + onboardingDate: new Date(PRIVACY_POLICY_DATE).setDate( + new Date(PRIVACY_POLICY_DATE).getDate() - 2, + ), + }, + }); + expect(result.showPrivacyPolicyToast).toBe(true); + }); + + it('does not show the privacy policy toast when seen, even if on or after the policy date and onboardingDate is before the policy date', () => { + const result = selectShowPrivacyPolicyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + newPrivacyPolicyToastClickedOrClosed: true, + onboardingDate: new Date(PRIVACY_POLICY_DATE).setDate( + new Date(PRIVACY_POLICY_DATE).getDate() - 2, + ), + }, + }); + expect(result.showPrivacyPolicyToast).toBe(false); + }); + + it('shows the privacy policy toast when not yet seen, on or after the policy date, and onboardingDate is not set', () => { + const result = selectShowPrivacyPolicyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + newPrivacyPolicyToastClickedOrClosed: false, + onboardingDate: undefined, + }, + }); + expect(result.showPrivacyPolicyToast).toBe(true); + }); + }); + + describe('mock same day', () => { + beforeEach(() => { + dateNowSpy = jest + .spyOn(Date, 'now') + .mockReturnValue(new Date(PRIVACY_POLICY_DATE).getTime()); + }); + + afterEach(() => { + dateNowSpy.mockRestore(); + }); + + it('shows the privacy policy toast when not yet seen, on or after the policy date, and onboardingDate is before the policy date', () => { + const result = selectShowPrivacyPolicyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + newPrivacyPolicyToastClickedOrClosed: false, + onboardingDate: new Date(PRIVACY_POLICY_DATE).setDate( + new Date(PRIVACY_POLICY_DATE).getDate() - 2, + ), + }, + }); + expect(result.showPrivacyPolicyToast).toBe(true); + }); + + it('does not show the privacy policy toast when seen, even if on or after the policy date and onboardingDate is before the policy date', () => { + const result = selectShowPrivacyPolicyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + newPrivacyPolicyToastClickedOrClosed: true, + onboardingDate: new Date(PRIVACY_POLICY_DATE).setDate( + new Date(PRIVACY_POLICY_DATE).getDate() - 2, + ), + }, + }); + expect(result.showPrivacyPolicyToast).toBe(false); + }); + + it('shows the privacy policy toast when not yet seen, on or after the policy date, and onboardingDate is not set', () => { + const result = selectShowPrivacyPolicyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + newPrivacyPolicyToastClickedOrClosed: false, + onboardingDate: undefined, + }, + }); + expect(result.showPrivacyPolicyToast).toBe(true); + }); + }); + + describe('mock day before', () => { + beforeEach(() => { + const dayBeforePolicyDate = new Date(PRIVACY_POLICY_DATE); + dayBeforePolicyDate.setDate(dayBeforePolicyDate.getDate() - 1); + + dateNowSpy = jest + .spyOn(Date, 'now') + .mockReturnValue(dayBeforePolicyDate.getTime()); + }); + + afterEach(() => { + dateNowSpy.mockRestore(); + }); + + it('does not show the privacy policy toast before the policy date', () => { + const result = selectShowPrivacyPolicyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + newPrivacyPolicyToastClickedOrClosed: false, + onboardingDate: new Date(PRIVACY_POLICY_DATE).setDate( + new Date(PRIVACY_POLICY_DATE).getDate() - 2, + ), + }, + }); + expect(result.showPrivacyPolicyToast).toBe(false); + }); + + it('does not show the privacy policy toast before the policy date even if onboardingDate is not set', () => { + const result = selectShowPrivacyPolicyToast({ + // @ts-expect-error: intentionally passing incomplete input + metamask: { + newPrivacyPolicyToastClickedOrClosed: false, + onboardingDate: undefined, + }, + }); + expect(result.showPrivacyPolicyToast).toBe(false); + }); + }); +}); diff --git a/ui/components/app/toast-master/utils.ts b/ui/components/app/toast-master/utils.ts new file mode 100644 index 000000000000..d6544707f45d --- /dev/null +++ b/ui/components/app/toast-master/utils.ts @@ -0,0 +1,69 @@ +import { PayloadAction } from '@reduxjs/toolkit'; +import { ReactFragment } from 'react'; +import { SHOW_NFT_DETECTION_ENABLEMENT_TOAST } from '../../../store/actionConstants'; +import { submitRequestToBackground } from '../../../store/background-connection'; + +/** + * Returns true if the privacy policy toast was shown either never, or less than a day ago. + * + * @param newPrivacyPolicyToastShownDate + * @returns true if the privacy policy toast was shown either never, or less than a day ago + */ +export function getIsPrivacyToastRecent( + newPrivacyPolicyToastShownDate?: number, +): boolean { + if (!newPrivacyPolicyToastShownDate) { + return true; + } + + const currentDate = new Date(); + const oneDayInMilliseconds = 24 * 60 * 60 * 1000; + const newPrivacyPolicyToastShownDateObj = new Date( + newPrivacyPolicyToastShownDate, + ); + const toastWasShownLessThanADayAgo = + currentDate.valueOf() - newPrivacyPolicyToastShownDateObj.valueOf() < + oneDayInMilliseconds; + + return toastWasShownLessThanADayAgo; +} + +export function setNewPrivacyPolicyToastShownDate(time: number) { + submitRequestToBackgroundAndCatch('setNewPrivacyPolicyToastShownDate', [ + time, + ]); +} + +export function setNewPrivacyPolicyToastClickedOrClosed() { + submitRequestToBackgroundAndCatch('setNewPrivacyPolicyToastClickedOrClosed'); +} + +export function setShowNftDetectionEnablementToast( + value: boolean, +): PayloadAction { + return { + type: SHOW_NFT_DETECTION_ENABLEMENT_TOAST, + payload: value, + }; +} + +export function setSwitchedNetworkNeverShowMessage() { + submitRequestToBackgroundAndCatch('setSwitchedNetworkNeverShowMessage', [ + true, + ]); +} + +export function setSurveyLinkLastClickedOrClosed(time: number) { + submitRequestToBackgroundAndCatch('setSurveyLinkLastClickedOrClosed', [time]); +} + +// May move this to a different file after discussion with team +export function submitRequestToBackgroundAndCatch( + method: string, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + args?: any[], +) { + submitRequestToBackground(method, args)?.catch((error) => { + console.error('Error caught in submitRequestToBackground', error); + }); +} diff --git a/ui/pages/onboarding-flow/onboarding-flow.js b/ui/pages/onboarding-flow/onboarding-flow.js index 01ea177eb851..5b1194229395 100644 --- a/ui/pages/onboarding-flow/onboarding-flow.js +++ b/ui/pages/onboarding-flow/onboarding-flow.js @@ -28,7 +28,6 @@ import { createNewVaultAndGetSeedPhrase, unlockAndGetSeedPhrase, createNewVaultAndRestore, - setOnboardingDate, } from '../../store/actions'; import { getFirstTimeFlowTypeRouteAfterUnlock } from '../../selectors'; import { MetaMetricsContext } from '../../contexts/metametrics'; @@ -46,6 +45,7 @@ import ExperimentalArea from '../../components/app/flask/experimental-area'; import OnboardingSuccessful from '../institutional/onboarding-successful/onboarding-successful'; import { RemindSRP } from '../institutional/remind-srp/remind-srp'; ///: END:ONLY_INCLUDE_IF +import { submitRequestToBackgroundAndCatch } from '../../components/app/toast-master/utils'; import OnboardingFlowSwitch from './onboarding-flow-switch/onboarding-flow-switch'; import CreatePassword from './create-password/create-password'; import ReviewRecoveryPhrase from './recovery-phrase/review-recovery-phrase'; @@ -72,8 +72,8 @@ export default function OnboardingFlow() { const trackEvent = useContext(MetaMetricsContext); useEffect(() => { - dispatch(setOnboardingDate()); - }, [dispatch]); + setOnboardingDate(); + }, []); useEffect(() => { if (completedOnboarding && !isFromReminder) { @@ -240,3 +240,7 @@ export default function OnboardingFlow() {

); } + +function setOnboardingDate() { + submitRequestToBackgroundAndCatch('setOnboardingDate'); +} diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index d59c4b29e0c1..e26e17be9e23 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { matchPath, Route, Switch } from 'react-router-dom'; import IdleTimer from 'react-idle-timer'; -import { isEvmAccountType } from '@metamask/keyring-api'; import Swaps from '../swaps'; import ConfirmTransaction from '../confirmations/confirm-transaction'; @@ -27,7 +26,6 @@ import Loading from '../../components/ui/loading-screen'; import LoadingNetwork from '../../components/app/loading-network-screen'; import { Modal } from '../../components/app/modals'; import Alert from '../../components/ui/alert'; -import { SURVEY_LINK, PRIVACY_POLICY_LINK } from '../../../shared/lib/ui-utils'; import { AppHeader, AccountListMenu, @@ -35,10 +33,7 @@ import { AccountDetails, ImportNftsModal, ImportTokensModal, - ToastContainer, - Toast, } from '../../components/multichain'; -import { SurveyToast } from '../../components/ui/survey-toast'; import UnlockPage from '../unlock-page'; import Alerts from '../../components/app/alerts'; import Asset from '../asset'; @@ -73,7 +68,6 @@ import { UNLOCK_ROUTE, CONFIRMATION_V_NEXT_ROUTE, ONBOARDING_ROUTE, - ONBOARDING_UNLOCK_ROUTE, CONNECTIONS, PERMISSIONS, REVIEW_PERMISSIONS, @@ -98,25 +92,15 @@ import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES, ///: END:ONLY_INCLUDE_IF } from '../../../shared/constants/app'; -import { NETWORK_TYPES } from '../../../shared/constants/network'; // TODO: Remove restricted import // eslint-disable-next-line import/no-restricted-paths import { getEnvironmentType } from '../../../app/scripts/lib/util'; import ConfirmationPage from '../confirmations/confirmation'; import OnboardingFlow from '../onboarding-flow/onboarding-flow'; import QRHardwarePopover from '../../components/app/qr-hardware-popover'; -import { SEND_STAGES } from '../../ducks/send'; import DeprecatedNetworks from '../../components/ui/deprecated-networks/deprecated-networks'; import NewNetworkInfo from '../../components/ui/new-network-info/new-network-info'; -import { ThemeType } from '../../../shared/constants/preferences'; -import { - AvatarAccount, - AvatarAccountSize, - AvatarNetwork, - Box, - Icon, - IconName, -} from '../../components/component-library'; +import { Box } from '../../components/component-library'; import { ToggleIpfsModal } from '../../components/app/assets/nfts/nft-default-image/toggle-ipfs-modal'; import { BasicConfigurationModal } from '../../components/app/basic-configuration-modal'; ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) @@ -125,33 +109,23 @@ import KeyringSnapRemovalResult from '../../components/app/modals/keyring-snap-r import { SendPage } from '../../components/multichain/pages/send'; import { DeprecatedNetworkModal } from '../settings/deprecated-network-modal/DeprecatedNetworkModal'; -import { getURLHost } from '../../helpers/utils/util'; -import { - BorderColor, - BorderRadius, - IconColor, - TextVariant, -} from '../../helpers/constants/design-system'; -import { MILLISECOND, SECOND } from '../../../shared/constants/time'; import { MultichainMetaFoxLogo } from '../../components/multichain/app-header/multichain-meta-fox-logo'; import NetworkConfirmationPopover from '../../components/multichain/network-list-menu/network-confirmation-popover/network-confirmation-popover'; import NftFullImage from '../../components/app/assets/nfts/nft-details/nft-full-image'; import CrossChainSwap from '../bridge'; - -const isConfirmTransactionRoute = (pathname) => - Boolean( - matchPath(pathname, { - path: CONFIRM_TRANSACTION_ROUTE, - exact: false, - }), - ); +import { ToastMaster } from '../../components/app/toast-master/toast-master'; +import { + getConnectingLabel, + hideAppHeader, + isConfirmTransactionRoute, + setTheme, + showOnboardingHeader, +} from './utils'; export default class Routes extends Component { static propTypes = { currentCurrency: PropTypes.string, - account: PropTypes.object, activeTabOrigin: PropTypes.string, - showConnectAccountToast: PropTypes.bool.isRequired, setCurrentCurrencyToUSD: PropTypes.func, isLoading: PropTypes.bool, loadingMessage: PropTypes.string, @@ -163,16 +137,11 @@ export default class Routes extends Component { setLastActiveTime: PropTypes.func, history: PropTypes.object, location: PropTypes.object, - lockMetaMask: PropTypes.func, - providerId: PropTypes.string, - providerType: PropTypes.string, autoLockTimeLimit: PropTypes.number, pageChanged: PropTypes.func.isRequired, - prepareToLeaveSwaps: PropTypes.func, browserEnvironmentOs: PropTypes.string, browserEnvironmentBrowser: PropTypes.string, theme: PropTypes.string, - sendStage: PropTypes.string, isNetworkUsed: PropTypes.bool, allAccountsOnNetworkAreEmpty: PropTypes.bool, isTestNet: PropTypes.bool, @@ -189,8 +158,6 @@ export default class Routes extends Component { accountDetailsAddress: PropTypes.string, isImportNftsModalOpen: PropTypes.bool.isRequired, hideImportNftsModal: PropTypes.func.isRequired, - isPermittedNetworkToastOpen: PropTypes.bool.isRequired, - hidePermittedNetworkToast: PropTypes.func.isRequired, isIpfsModalOpen: PropTypes.bool.isRequired, isBasicConfigurationModalOpen: PropTypes.bool.isRequired, hideIpfsModal: PropTypes.func.isRequired, @@ -198,27 +165,14 @@ export default class Routes extends Component { hideImportTokensModal: PropTypes.func.isRequired, isDeprecatedNetworkModalOpen: PropTypes.bool.isRequired, hideDeprecatedNetworkModal: PropTypes.func.isRequired, - addPermittedAccount: PropTypes.func.isRequired, switchedNetworkDetails: PropTypes.object, - useNftDetection: PropTypes.bool, - currentNetwork: PropTypes.object, - showNftEnablementToast: PropTypes.bool, - setHideNftEnablementToast: PropTypes.func.isRequired, clearSwitchedNetworkDetails: PropTypes.func.isRequired, - setSwitchedNetworkNeverShowMessage: PropTypes.func.isRequired, networkToAutomaticallySwitchTo: PropTypes.object, - neverShowSwitchedNetworkMessage: PropTypes.bool.isRequired, automaticallySwitchNetwork: PropTypes.func.isRequired, totalUnapprovedConfirmationCount: PropTypes.number.isRequired, currentExtensionPopupId: PropTypes.number, useRequestQueue: PropTypes.bool, - showSurveyToast: PropTypes.bool.isRequired, - showPrivacyPolicyToast: PropTypes.bool.isRequired, - newPrivacyPolicyToastShownDate: PropTypes.number, - setSurveyLinkLastClickedOrClosed: PropTypes.func.isRequired, - setNewPrivacyPolicyToastShownDate: PropTypes.func.isRequired, clearEditedNetwork: PropTypes.func.isRequired, - setNewPrivacyPolicyToastClickedOrClosed: PropTypes.func.isRequired, ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) isShowKeyringSnapRemovalResultModal: PropTypes.bool.isRequired, hideShowKeyringSnapRemovalResultModal: PropTypes.func.isRequired, @@ -231,34 +185,9 @@ export default class Routes extends Component { metricsEvent: PropTypes.func, }; - state = { - hideConnectAccountToast: false, - }; - - getTheme() { - const { theme } = this.props; - if (theme === ThemeType.os) { - if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) { - return ThemeType.dark; - } - return ThemeType.light; - } - return theme; - } - - setTheme() { - const theme = this.getTheme(); - document.documentElement.setAttribute('data-theme', theme); - } - - componentDidMount() { - this.updateNewPrivacyPolicyToastDate(); - } - componentDidUpdate(prevProps) { const { theme, - account, networkToAutomaticallySwitchTo, activeTabOrigin, totalUnapprovedConfirmationCount, @@ -267,11 +196,7 @@ export default class Routes extends Component { currentExtensionPopupId, } = this.props; if (theme !== prevProps.theme) { - this.setTheme(); - } - - if (prevProps.account?.address !== account?.address) { - this.setState({ hideConnectAccountToast: false }); + setTheme(theme); } // Automatically switch the network if the user @@ -326,7 +251,7 @@ export default class Routes extends Component { } }); - this.setTheme(); + setTheme(this.props.theme); } renderRoutes() { @@ -457,394 +382,6 @@ export default class Routes extends Component { return routes; } - onInitializationUnlockPage() { - const { location } = this.props; - return Boolean( - matchPath(location.pathname, { - path: ONBOARDING_UNLOCK_ROUTE, - exact: true, - }), - ); - } - - onConfirmPage() { - const { location } = this.props; - return Boolean( - matchPath(location.pathname, { - path: CONFIRM_TRANSACTION_ROUTE, - exact: false, - }), - ); - } - - onEditTransactionPage() { - return ( - this.props.sendStage === SEND_STAGES.EDIT || - this.props.sendStage === SEND_STAGES.DRAFT || - this.props.sendStage === SEND_STAGES.ADD_RECIPIENT - ); - } - - onSwapsPage() { - const { location } = this.props; - return Boolean( - matchPath(location.pathname, { path: SWAPS_ROUTE, exact: false }), - ); - } - - onHomeScreen() { - const { location } = this.props; - return location.pathname === DEFAULT_ROUTE; - } - - hideAppHeader() { - const { location } = this.props; - - const isCrossChainSwapsPage = Boolean( - matchPath(location.pathname, { - path: `${CROSS_CHAIN_SWAP_ROUTE}`, - exact: false, - }), - ); - - if (isCrossChainSwapsPage) { - return true; - } - - const isNotificationsPage = Boolean( - matchPath(location.pathname, { - path: `${NOTIFICATIONS_ROUTE}`, - exact: false, - }), - ); - - if (isNotificationsPage) { - return true; - } - - const isInitializing = Boolean( - matchPath(location.pathname, { - path: ONBOARDING_ROUTE, - exact: false, - }), - ); - - if (isInitializing && !this.onInitializationUnlockPage()) { - return true; - } - - const windowType = getEnvironmentType(); - - if (windowType === ENVIRONMENT_TYPE_NOTIFICATION) { - return true; - } - - const isPermissionsPage = Boolean( - matchPath(location.pathname, { - path: PERMISSIONS, - exact: false, - }), - ); - - if (isPermissionsPage) { - return true; - } - - const isConnectionsPage = Boolean( - matchPath(location.pathname, { - path: CONNECTIONS, - exact: false, - }), - ); - - if (isConnectionsPage) { - return true; - } - - const isReviewPermissionsPgae = Boolean( - matchPath(location.pathname, { - path: REVIEW_PERMISSIONS, - exact: false, - }), - ); - - if (isReviewPermissionsPgae) { - return true; - } - - if (windowType === ENVIRONMENT_TYPE_POPUP && this.onConfirmPage()) { - return true; - } - - const isHandlingPermissionsRequest = Boolean( - matchPath(location.pathname, { - path: CONNECT_ROUTE, - exact: false, - }), - ); - - const isMultichainSend = Boolean( - matchPath(location.pathname, { - path: SEND_ROUTE, - exact: false, - }), - ); - if (isMultichainSend) { - return true; - } - - const isSnapsHome = Boolean( - matchPath(location.pathname, { - path: SNAPS_VIEW_ROUTE, - exact: false, - }), - ); - if (isSnapsHome) { - return true; - } - - const isHandlingAddEthereumChainRequest = Boolean( - matchPath(location.pathname, { - path: CONFIRMATION_V_NEXT_ROUTE, - exact: false, - }), - ); - - return ( - isHandlingPermissionsRequest || - isHandlingAddEthereumChainRequest || - isConfirmTransactionRoute(this.pathname) - ); - } - - showOnboardingHeader() { - const { location } = this.props; - - return Boolean( - matchPath(location.pathname, { - path: ONBOARDING_ROUTE, - exact: false, - }), - ); - } - - onAppHeaderClick = async () => { - const { prepareToLeaveSwaps } = this.props; - if (this.onSwapsPage()) { - await prepareToLeaveSwaps(); - } - }; - - renderToasts() { - const { t } = this.context; - const { - account, - activeTabOrigin, - addPermittedAccount, - showSurveyToast, - showConnectAccountToast, - showPrivacyPolicyToast, - newPrivacyPolicyToastShownDate, - clearSwitchedNetworkDetails, - setSurveyLinkLastClickedOrClosed, - setNewPrivacyPolicyToastClickedOrClosed, - setSwitchedNetworkNeverShowMessage, - switchedNetworkDetails, - useNftDetection, - showNftEnablementToast, - setHideNftEnablementToast, - isPermittedNetworkToastOpen, - currentNetwork, - } = this.props; - - const showAutoNetworkSwitchToast = this.getShowAutoNetworkSwitchTest(); - const isPrivacyToastRecent = this.getIsPrivacyToastRecent(); - const isPrivacyToastNotShown = !newPrivacyPolicyToastShownDate; - const isEvmAccount = isEvmAccountType(account?.type); - const autoHideToastDelay = 5 * SECOND; - const safeEncodedHost = encodeURIComponent(activeTabOrigin); - - const onAutoHideToast = () => { - setHideNftEnablementToast(false); - }; - if (!this.onHomeScreen()) { - return null; - } - - return ( - - - {showConnectAccountToast && - !this.state.hideConnectAccountToast && - isEvmAccount ? ( - - } - text={this.context.t('accountIsntConnectedToastText', [ - account?.metadata?.name, - getURLHost(activeTabOrigin), - ])} - actionText={this.context.t('connectAccount')} - onActionClick={() => { - // Connect this account - addPermittedAccount(activeTabOrigin, account.address); - // Use setTimeout to prevent React re-render from - // hiding the tooltip - setTimeout(() => { - // Trigger a mouseenter on the header's connection icon - // to display the informative connection tooltip - document - .querySelector( - '[data-testid="connection-menu"] [data-tooltipped]', - ) - ?.dispatchEvent(new CustomEvent('mouseenter', {})); - }, 250 * MILLISECOND); - }} - onClose={() => this.setState({ hideConnectAccountToast: true })} - /> - ) : null} - {showSurveyToast && ( - - } - text={t('surveyTitle')} - actionText={t('surveyConversion')} - onActionClick={() => { - global.platform.openTab({ - url: SURVEY_LINK, - }); - setSurveyLinkLastClickedOrClosed(Date.now()); - }} - onClose={() => { - setSurveyLinkLastClickedOrClosed(Date.now()); - }} - /> - )} - {showPrivacyPolicyToast && - (isPrivacyToastRecent || isPrivacyToastNotShown) && ( - - } - text={t('newPrivacyPolicyTitle')} - actionText={t('newPrivacyPolicyActionButton')} - onActionClick={() => { - global.platform.openTab({ - url: PRIVACY_POLICY_LINK, - }); - setNewPrivacyPolicyToastClickedOrClosed(); - }} - onClose={() => { - setNewPrivacyPolicyToastClickedOrClosed(); - }} - /> - )} - {showAutoNetworkSwitchToast ? ( - - } - text={this.context.t('switchedNetworkToastMessage', [ - switchedNetworkDetails.nickname, - getURLHost(switchedNetworkDetails.origin), - ])} - actionText={this.context.t('switchedNetworkToastDecline')} - onActionClick={() => setSwitchedNetworkNeverShowMessage()} - onClose={() => clearSwitchedNetworkDetails()} - /> - ) : null} - {showNftEnablementToast && useNftDetection ? ( - - } - text={this.context.t('nftAutoDetectionEnabled')} - borderRadius={BorderRadius.LG} - textVariant={TextVariant.bodyMd} - autoHideTime={autoHideToastDelay} - onAutoHideToast={onAutoHideToast} - /> - ) : null} - - {isPermittedNetworkToastOpen ? ( - - } - text={this.context.t('permittedChainToastUpdate', [ - getURLHost(activeTabOrigin), - currentNetwork?.nickname, - ])} - actionText={this.context.t('editPermissions')} - onActionClick={() => { - this.props.hidePermittedNetworkToast(); - this.props.history.push( - `${REVIEW_PERMISSIONS}/${safeEncodedHost}`, - ); - }} - onClose={() => this.props.hidePermittedNetworkToast()} - /> - ) : null} - - ); - } - - updateNewPrivacyPolicyToastDate() { - const { - showPrivacyPolicyToast, - newPrivacyPolicyToastShownDate, - setNewPrivacyPolicyToastShownDate, - } = this.props; - - if (showPrivacyPolicyToast && !newPrivacyPolicyToastShownDate) { - setNewPrivacyPolicyToastShownDate(Date.now()); - } - } - - getIsPrivacyToastRecent() { - const { newPrivacyPolicyToastShownDate } = this.props; - - const currentDate = new Date(); - const oneDayInMilliseconds = 24 * 60 * 60 * 1000; - const newPrivacyPolicyToastShownDateObj = new Date( - newPrivacyPolicyToastShownDate, - ); - const toastWasShownLessThanADayAgo = - currentDate - newPrivacyPolicyToastShownDateObj < oneDayInMilliseconds; - - return toastWasShownLessThanADayAgo; - } - - getShowAutoNetworkSwitchTest() { - return ( - this.props.switchedNetworkDetails && - !this.props.neverShowSwitchedNetworkMessage - ); - } - render() { const { isLoading, @@ -889,7 +426,7 @@ export default class Routes extends Component { const loadMessage = loadingMessage || isNetworkLoading - ? this.getConnectingLabel(loadingMessage) + ? getConnectingLabel(loadingMessage, this.props, this.context) : null; // Conditions for displaying the Send route @@ -928,8 +465,6 @@ export default class Routes extends Component { ); ///: END:ONLY_INCLUDE_IF - const showAutoNetworkSwitchToast = this.getShowAutoNetworkSwitchTest(); - return (
clearSwitchedNetworkDetails() : undefined } @@ -950,9 +485,9 @@ export default class Routes extends Component { - {!this.hideAppHeader() && } + {!hideAppHeader(this.props) && } {isConfirmTransactionRoute(this.pathname) && } - {this.showOnboardingHeader() && } + {showOnboardingHeader(location) && } { ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) isUnlocked ? : null @@ -1007,47 +542,13 @@ export default class Routes extends Component { {this.renderRoutes()} {isUnlocked ? : null} - {this.renderToasts()} +
); } +} - toggleMetamaskActive() { - if (this.props.isUnlocked) { - // currently active: deactivate - this.props.lockMetaMask(); - } else { - // currently inactive: redirect to password box - const passwordBox = document.querySelector('input[type=password]'); - if (!passwordBox) { - return; - } - passwordBox.focus(); - } - } - - getConnectingLabel(loadingMessage) { - if (loadingMessage) { - return loadingMessage; - } - const { providerType, providerId } = this.props; - const { t } = this.context; - - switch (providerType) { - case NETWORK_TYPES.MAINNET: - return t('connectingToMainnet'); - case NETWORK_TYPES.GOERLI: - return t('connectingToGoerli'); - case NETWORK_TYPES.SEPOLIA: - return t('connectingToSepolia'); - case NETWORK_TYPES.LINEA_GOERLI: - return t('connectingToLineaGoerli'); - case NETWORK_TYPES.LINEA_SEPOLIA: - return t('connectingToLineaSepolia'); - case NETWORK_TYPES.LINEA_MAINNET: - return t('connectingToLineaMainnet'); - default: - return t('connectingTo', [providerId]); - } - } +// Will eventually delete this function +function getShowAutoNetworkSwitchTest(props) { + return props.switchedNetworkDetails && !props.switchedNetworkNeverShowMessage; } diff --git a/ui/pages/routes/routes.container.js b/ui/pages/routes/routes.container.js index 2c26f0daa0b5..7553e59963d2 100644 --- a/ui/pages/routes/routes.container.js +++ b/ui/pages/routes/routes.container.js @@ -17,17 +17,10 @@ import { ///: END:ONLY_INCLUDE_IF getShowExtensionInFullSizeView, getSelectedAccount, - getPermittedAccountsForCurrentTab, getSwitchedNetworkDetails, - getNeverShowSwitchedNetworkMessage, getNetworkToAutomaticallySwitchTo, getNumberOfAllUnapprovedTransactionsAndMessages, - getShowSurveyToast, - getNewPrivacyPolicyToastShownDate, - getShowPrivacyPolicyToast, getUseRequestQueue, - getUseNftDetection, - getNftDetectionEnablementToast, getCurrentNetwork, } from '../../selectors'; import { @@ -41,28 +34,22 @@ import { hideImportTokensModal, hideDeprecatedNetworkModal, addPermittedAccount, - setSurveyLinkLastClickedOrClosed, - setNewPrivacyPolicyToastClickedOrClosed, - setNewPrivacyPolicyToastShownDate, automaticallySwitchNetwork, clearSwitchedNetworkDetails, - neverShowSwitchedNetworkMessage, - setShowNftDetectionEnablementToast, ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) hideKeyringRemovalResultModal, ///: END:ONLY_INCLUDE_IF setEditedNetwork, - hidePermittedNetworkToast, } from '../../store/actions'; import { pageChanged } from '../../ducks/history/history'; import { prepareToLeaveSwaps } from '../../ducks/swaps/swaps'; import { getSendStage } from '../../ducks/send'; import { - getAlertEnabledness, getIsUnlocked, getProviderConfig, } from '../../ducks/metamask/metamask'; import { DEFAULT_AUTO_LOCK_TIME_LIMIT } from '../../../shared/constants/preferences'; +import { selectSwitchedNetworkNeverShowMessage } from '../../components/app/toast-master/selectors'; import Routes from './routes.component'; function mapStateToProps(state) { @@ -74,31 +61,18 @@ function mapStateToProps(state) { // If there is more than one connected account to activeTabOrigin, // *BUT* the current account is not one of them, show the banner - const allowShowAccountSetting = getAlertEnabledness(state).unconnectedAccount; const account = getSelectedAccount(state); const activeTabOrigin = activeTab?.origin; - const connectedAccounts = getPermittedAccountsForCurrentTab(state); const currentNetwork = getCurrentNetwork(state); - const showConnectAccountToast = Boolean( - allowShowAccountSetting && - account && - activeTabOrigin && - connectedAccounts.length > 0 && - !connectedAccounts.find((address) => address === account.address), - ); const networkToAutomaticallySwitchTo = getNetworkToAutomaticallySwitchTo(state); const switchedNetworkDetails = getSwitchedNetworkDetails(state); - const useNftDetection = getUseNftDetection(state); - const showNftEnablementToast = getNftDetectionEnablementToast(state); - return { alertOpen, alertMessage, account, - showConnectAccountToast, activeTabOrigin, textDirection: state.metamask.textDirection, isLoading, @@ -130,20 +104,15 @@ function mapStateToProps(state) { accountDetailsAddress: state.appState.accountDetailsAddress, isImportNftsModalOpen: state.appState.importNftsModal.open, isIpfsModalOpen: state.appState.showIpfsModalOpen, - isPermittedNetworkToastOpen: state.appState.showPermittedNetworkToastOpen, switchedNetworkDetails, - useNftDetection, - showNftEnablementToast, networkToAutomaticallySwitchTo, currentNetwork, totalUnapprovedConfirmationCount: getNumberOfAllUnapprovedTransactionsAndMessages(state), - neverShowSwitchedNetworkMessage: getNeverShowSwitchedNetworkMessage(state), + switchedNetworkNeverShowMessage: + selectSwitchedNetworkNeverShowMessage(state), currentExtensionPopupId: state.metamask.currentExtensionPopupId, useRequestQueue: getUseRequestQueue(state), - newPrivacyPolicyToastShownDate: getNewPrivacyPolicyToastShownDate(state), - showPrivacyPolicyToast: getShowPrivacyPolicyToast(state), - showSurveyToast: getShowSurveyToast(state), ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) isShowKeyringSnapRemovalResultModal: state.appState.showKeyringRemovalSnapModal, @@ -163,29 +132,18 @@ function mapDispatchToProps(dispatch) { toggleNetworkMenu: () => dispatch(toggleNetworkMenu()), hideImportNftsModal: () => dispatch(hideImportNftsModal()), hideIpfsModal: () => dispatch(hideIpfsModal()), - hidePermittedNetworkToast: () => dispatch(hidePermittedNetworkToast()), hideImportTokensModal: () => dispatch(hideImportTokensModal()), hideDeprecatedNetworkModal: () => dispatch(hideDeprecatedNetworkModal()), addPermittedAccount: (activeTabOrigin, address) => dispatch(addPermittedAccount(activeTabOrigin, address)), clearSwitchedNetworkDetails: () => dispatch(clearSwitchedNetworkDetails()), - setSwitchedNetworkNeverShowMessage: () => - dispatch(neverShowSwitchedNetworkMessage()), automaticallySwitchNetwork: (networkId, selectedTabOrigin) => dispatch(automaticallySwitchNetwork(networkId, selectedTabOrigin)), - setSurveyLinkLastClickedOrClosed: (time) => - dispatch(setSurveyLinkLastClickedOrClosed(time)), - setNewPrivacyPolicyToastClickedOrClosed: () => - dispatch(setNewPrivacyPolicyToastClickedOrClosed()), - setNewPrivacyPolicyToastShownDate: (date) => - dispatch(setNewPrivacyPolicyToastShownDate(date)), clearEditedNetwork: () => dispatch(setEditedNetwork()), ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) hideShowKeyringSnapRemovalResultModal: () => dispatch(hideKeyringRemovalResultModal()), ///: END:ONLY_INCLUDE_IF - setHideNftEnablementToast: (value) => - dispatch(setShowNftDetectionEnablementToast(value)), }; } diff --git a/ui/pages/routes/utils.js b/ui/pages/routes/utils.js new file mode 100644 index 000000000000..31918f91bb07 --- /dev/null +++ b/ui/pages/routes/utils.js @@ -0,0 +1,211 @@ +import { matchPath } from 'react-router-dom'; +// eslint-disable-next-line import/no-restricted-paths +import { getEnvironmentType } from '../../../app/scripts/lib/util'; +import { + ENVIRONMENT_TYPE_NOTIFICATION, + ENVIRONMENT_TYPE_POPUP, +} from '../../../shared/constants/app'; +import { NETWORK_TYPES } from '../../../shared/constants/network'; +import { ThemeType } from '../../../shared/constants/preferences'; +import { + CONFIRM_TRANSACTION_ROUTE, + CONFIRMATION_V_NEXT_ROUTE, + CONNECT_ROUTE, + CONNECTIONS, + NOTIFICATIONS_ROUTE, + ONBOARDING_ROUTE, + ONBOARDING_UNLOCK_ROUTE, + PERMISSIONS, + REVIEW_PERMISSIONS, + SEND_ROUTE, + SNAPS_VIEW_ROUTE, +} from '../../helpers/constants/routes'; + +export function isConfirmTransactionRoute(pathname) { + return Boolean( + matchPath(pathname, { + path: CONFIRM_TRANSACTION_ROUTE, + exact: false, + }), + ); +} + +function getThemeFromRawTheme(theme) { + if (theme === ThemeType.os) { + if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) { + return ThemeType.dark; + } + return ThemeType.light; + } + return theme; +} + +export function setTheme(theme) { + document.documentElement.setAttribute( + 'data-theme', + getThemeFromRawTheme(theme), + ); +} + +function onConfirmPage(props) { + const { location } = props; + return Boolean( + matchPath(location.pathname, { + path: CONFIRM_TRANSACTION_ROUTE, + exact: false, + }), + ); +} + +function onInitializationUnlockPage(props) { + const { location } = props; + return Boolean( + matchPath(location.pathname, { + path: ONBOARDING_UNLOCK_ROUTE, + exact: true, + }), + ); +} + +export function showOnboardingHeader(location) { + return Boolean( + matchPath(location.pathname, { + path: ONBOARDING_ROUTE, + exact: false, + }), + ); +} + +export function getConnectingLabel(loadingMessage, props, context) { + if (loadingMessage) { + return loadingMessage; + } + const { providerType, providerId } = props; + const { t } = context; + + switch (providerType) { + case NETWORK_TYPES.MAINNET: + return t('connectingToMainnet'); + case NETWORK_TYPES.GOERLI: + return t('connectingToGoerli'); + case NETWORK_TYPES.SEPOLIA: + return t('connectingToSepolia'); + case NETWORK_TYPES.LINEA_GOERLI: + return t('connectingToLineaGoerli'); + case NETWORK_TYPES.LINEA_SEPOLIA: + return t('connectingToLineaSepolia'); + case NETWORK_TYPES.LINEA_MAINNET: + return t('connectingToLineaMainnet'); + default: + return t('connectingTo', [providerId]); + } +} + +export function hideAppHeader(props) { + const { location } = props; + + const isNotificationsPage = Boolean( + matchPath(location.pathname, { + path: `${NOTIFICATIONS_ROUTE}`, + exact: false, + }), + ); + + if (isNotificationsPage) { + return true; + } + + const isInitializing = Boolean( + matchPath(location.pathname, { + path: ONBOARDING_ROUTE, + exact: false, + }), + ); + + if (isInitializing && !onInitializationUnlockPage(props)) { + return true; + } + + const windowType = getEnvironmentType(); + + if (windowType === ENVIRONMENT_TYPE_NOTIFICATION) { + return true; + } + + const isPermissionsPage = Boolean( + matchPath(location.pathname, { + path: PERMISSIONS, + exact: false, + }), + ); + + if (isPermissionsPage) { + return true; + } + + const isConnectionsPage = Boolean( + matchPath(location.pathname, { + path: CONNECTIONS, + exact: false, + }), + ); + + if (isConnectionsPage) { + return true; + } + + const isReviewPermissionsPgae = Boolean( + matchPath(location.pathname, { + path: REVIEW_PERMISSIONS, + exact: false, + }), + ); + + if (isReviewPermissionsPgae) { + return true; + } + + if (windowType === ENVIRONMENT_TYPE_POPUP && onConfirmPage(props)) { + return true; + } + + const isHandlingPermissionsRequest = Boolean( + matchPath(location.pathname, { + path: CONNECT_ROUTE, + exact: false, + }), + ); + + const isMultichainSend = Boolean( + matchPath(location.pathname, { + path: SEND_ROUTE, + exact: false, + }), + ); + if (isMultichainSend) { + return true; + } + + const isSnapsHome = Boolean( + matchPath(location.pathname, { + path: SNAPS_VIEW_ROUTE, + exact: false, + }), + ); + if (isSnapsHome) { + return true; + } + + const isHandlingAddEthereumChainRequest = Boolean( + matchPath(location.pathname, { + path: CONFIRMATION_V_NEXT_ROUTE, + exact: false, + }), + ); + + return ( + isHandlingPermissionsRequest || + isHandlingAddEthereumChainRequest || + isConfirmTransactionRoute(location.pathname) + ); +} diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 431d2c1b5d0a..7f9327f7a45c 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -97,12 +97,6 @@ import { } from '../../shared/modules/conversion.utils'; import { BackgroundColor } from '../helpers/constants/design-system'; import { NOTIFICATION_DROP_LEDGER_FIREFOX } from '../../shared/notifications'; -import { - SURVEY_DATE, - SURVEY_END_TIME, - SURVEY_START_TIME, -} from '../helpers/constants/survey'; -import { PRIVACY_POLICY_DATE } from '../helpers/constants/privacy-policy'; import { ENVIRONMENT_TYPE_POPUP } from '../../shared/constants/app'; import { MultichainNativeAssets } from '../../shared/constants/multichain/assets'; // TODO: Remove restricted import @@ -701,16 +695,6 @@ export function getGasIsLoading(state) { return state.appState.gasIsLoading; } -/** - * Retrieves user preference to never see the "Switched Network" toast - * - * @param state - Redux state object. - * @returns Boolean preference value - */ -export function getNeverShowSwitchedNetworkMessage(state) { - return state.metamask.switchedNetworkNeverShowMessage; -} - export const getNetworkConfigurationsByChainId = createDeepEqualSelector( (state) => state.metamask.networkConfigurationsByChainId, /** @@ -777,10 +761,6 @@ export function getNftIsStillFetchingIndication(state) { return state.appState.isNftStillFetchingIndication; } -export function getNftDetectionEnablementToast(state) { - return state.appState.showNftDetectionEnablementToast; -} - export function getCurrentCurrency(state) { return state.metamask.currentCurrency; } @@ -1990,41 +1970,6 @@ export function getShowTermsOfUse(state) { ); } -/** - * Determines if the survey toast should be shown based on the current time, survey start and end times, and whether the survey link was last clicked or closed. - * - * @param {*} state - The application state containing the necessary survey data. - * @returns {boolean} True if the current time is between the survey start and end times and the survey link was not last clicked or closed. False otherwise. - */ -export function getShowSurveyToast(state) { - const { surveyLinkLastClickedOrClosed } = state.metamask; - const startTime = new Date(`${SURVEY_DATE} ${SURVEY_START_TIME}`).getTime(); - const endTime = new Date(`${SURVEY_DATE} ${SURVEY_END_TIME}`).getTime(); - const now = Date.now(); - return now > startTime && now < endTime && !surveyLinkLastClickedOrClosed; -} - -/** - * Determines if the privacy policy toast should be shown based on the current date and whether the new privacy policy toast was clicked or closed. - * - * @param {*} state - The application state containing the privacy policy data. - * @returns {boolean} True if the current date is on or after the new privacy policy date and the privacy policy toast was not clicked or closed. False otherwise. - */ -export function getShowPrivacyPolicyToast(state) { - const { newPrivacyPolicyToastClickedOrClosed, onboardingDate } = - state.metamask; - const newPrivacyPolicyDate = new Date(PRIVACY_POLICY_DATE); - const currentDate = new Date(Date.now()); - return ( - !newPrivacyPolicyToastClickedOrClosed && - currentDate >= newPrivacyPolicyDate && - // users who onboarded before the privacy policy date should see the notice - // and - // old users who don't have onboardingDate set should see the notice - (onboardingDate < newPrivacyPolicyDate || !onboardingDate) - ); -} - export function getLastViewedUserSurvey(state) { return state.metamask.lastViewedUserSurvey; } @@ -2038,10 +1983,6 @@ export function getShowOutdatedBrowserWarning(state) { return currentTime - outdatedBrowserWarningLastShown >= DAY * 2; } -export function getNewPrivacyPolicyToastShownDate(state) { - return state.metamask.newPrivacyPolicyToastShownDate; -} - export function getOnboardingDate(state) { return state.metamask.onboardingDate; } diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js index 8d71048e0924..5772f9642805 100644 --- a/ui/selectors/selectors.test.js +++ b/ui/selectors/selectors.test.js @@ -1,21 +1,20 @@ -import { deepClone } from '@metamask/snaps-utils'; import { ApprovalType } from '@metamask/controller-utils'; import { BtcAccountType, EthAccountType, EthMethod, } from '@metamask/keyring-api'; +import { deepClone } from '@metamask/snaps-utils'; import { TransactionStatus } from '@metamask/transaction-controller'; -import mockState from '../../test/data/mock-state.json'; +import { ETH_EOA_METHODS } from '../../shared/constants/eth-methods'; import { KeyringType } from '../../shared/constants/keyring'; +import { DeleteRegulationStatus } from '../../shared/constants/metametrics'; import { CHAIN_IDS, NETWORK_TYPES } from '../../shared/constants/network'; -import { SURVEY_DATE, SURVEY_GMT } from '../helpers/constants/survey'; -import { PRIVACY_POLICY_DATE } from '../helpers/constants/privacy-policy'; +import mockState from '../../test/data/mock-state.json'; import { createMockInternalAccount } from '../../test/jest/mocks'; -import { ETH_EOA_METHODS } from '../../shared/constants/eth-methods'; -import { getProviderConfig } from '../ducks/metamask/metamask'; import { mockNetworkState } from '../../test/stub/networks'; -import { DeleteRegulationStatus } from '../../shared/constants/metametrics'; +import { selectSwitchedNetworkNeverShowMessage } from '../components/app/toast-master/selectors'; +import { getProviderConfig } from '../ducks/metamask/metamask'; import * as selectors from './selectors'; jest.mock('../../app/scripts/lib/util', () => ({ @@ -187,10 +186,10 @@ describe('Selectors', () => { }); }); - describe('#getNeverShowSwitchedNetworkMessage', () => { + describe('#selectSwitchedNetworkNeverShowMessage', () => { it('returns the correct value', () => { expect( - selectors.getNeverShowSwitchedNetworkMessage({ + selectSwitchedNetworkNeverShowMessage({ metamask: { switchedNetworkNeverShowMessage: true }, }), ).toStrictEqual(true); @@ -1406,194 +1405,6 @@ describe('Selectors', () => { }); }); - describe('#getShowSurveyToast', () => { - const realDateNow = Date.now; - - afterEach(() => { - Date.now = realDateNow; - }); - - it('shows the survey link when not yet seen and within time bounds', () => { - Date.now = () => - new Date(`${SURVEY_DATE} 12:25:00 ${SURVEY_GMT}`).getTime(); - const result = selectors.getShowSurveyToast({ - metamask: { - surveyLinkLastClickedOrClosed: null, - }, - }); - expect(result).toStrictEqual(true); - }); - - it('does not show the survey link when seen and within time bounds', () => { - Date.now = () => - new Date(`${SURVEY_DATE} 12:25:00 ${SURVEY_GMT}`).getTime(); - const result = selectors.getShowSurveyToast({ - metamask: { - surveyLinkLastClickedOrClosed: 123456789, - }, - }); - expect(result).toStrictEqual(false); - }); - - it('does not show the survey link before time bounds', () => { - Date.now = () => - new Date(`${SURVEY_DATE} 11:25:00 ${SURVEY_GMT}`).getTime(); - const result = selectors.getShowSurveyToast({ - metamask: { - surveyLinkLastClickedOrClosed: null, - }, - }); - expect(result).toStrictEqual(false); - }); - - it('does not show the survey link after time bounds', () => { - Date.now = () => - new Date(`${SURVEY_DATE} 14:25:00 ${SURVEY_GMT}`).getTime(); - const result = selectors.getShowSurveyToast({ - metamask: { - surveyLinkLastClickedOrClosed: null, - }, - }); - expect(result).toStrictEqual(false); - }); - }); - - describe('#getShowPrivacyPolicyToast', () => { - let dateNowSpy; - - describe('mock one day after', () => { - beforeEach(() => { - const dayAfterPolicyDate = new Date(PRIVACY_POLICY_DATE); - dayAfterPolicyDate.setDate(dayAfterPolicyDate.getDate() + 1); - - dateNowSpy = jest - .spyOn(Date, 'now') - .mockReturnValue(dayAfterPolicyDate.getTime()); - }); - - afterEach(() => { - dateNowSpy.mockRestore(); - }); - - it('shows the privacy policy toast when not yet seen, on or after the policy date, and onboardingDate is before the policy date', () => { - const result = selectors.getShowPrivacyPolicyToast({ - metamask: { - newPrivacyPolicyToastClickedOrClosed: null, - onboardingDate: new Date(PRIVACY_POLICY_DATE).setDate( - new Date(PRIVACY_POLICY_DATE).getDate() - 2, - ), - }, - }); - expect(result).toBe(true); - }); - - it('does not show the privacy policy toast when seen, even if on or after the policy date and onboardingDate is before the policy date', () => { - const result = selectors.getShowPrivacyPolicyToast({ - metamask: { - newPrivacyPolicyToastClickedOrClosed: true, - onboardingDate: new Date(PRIVACY_POLICY_DATE).setDate( - new Date(PRIVACY_POLICY_DATE).getDate() - 2, - ), - }, - }); - expect(result).toBe(false); - }); - - it('shows the privacy policy toast when not yet seen, on or after the policy date, and onboardingDate is not set', () => { - const result = selectors.getShowPrivacyPolicyToast({ - metamask: { - newPrivacyPolicyToastClickedOrClosed: null, - onboardingDate: null, - }, - }); - expect(result).toBe(true); - }); - }); - - describe('mock same day', () => { - beforeEach(() => { - dateNowSpy = jest - .spyOn(Date, 'now') - .mockReturnValue(new Date(PRIVACY_POLICY_DATE).getTime()); - }); - - afterEach(() => { - dateNowSpy.mockRestore(); - }); - - it('shows the privacy policy toast when not yet seen, on or after the policy date, and onboardingDate is before the policy date', () => { - const result = selectors.getShowPrivacyPolicyToast({ - metamask: { - newPrivacyPolicyToastClickedOrClosed: null, - onboardingDate: new Date(PRIVACY_POLICY_DATE).setDate( - new Date(PRIVACY_POLICY_DATE).getDate() - 2, - ), - }, - }); - expect(result).toBe(true); - }); - - it('does not show the privacy policy toast when seen, even if on or after the policy date and onboardingDate is before the policy date', () => { - const result = selectors.getShowPrivacyPolicyToast({ - metamask: { - newPrivacyPolicyToastClickedOrClosed: true, - onboardingDate: new Date(PRIVACY_POLICY_DATE).setDate( - new Date(PRIVACY_POLICY_DATE).getDate() - 2, - ), - }, - }); - expect(result).toBe(false); - }); - - it('shows the privacy policy toast when not yet seen, on or after the policy date, and onboardingDate is not set', () => { - const result = selectors.getShowPrivacyPolicyToast({ - metamask: { - newPrivacyPolicyToastClickedOrClosed: null, - onboardingDate: null, - }, - }); - expect(result).toBe(true); - }); - }); - - describe('mock day before', () => { - beforeEach(() => { - const dayBeforePolicyDate = new Date(PRIVACY_POLICY_DATE); - dayBeforePolicyDate.setDate(dayBeforePolicyDate.getDate() - 1); - - dateNowSpy = jest - .spyOn(Date, 'now') - .mockReturnValue(dayBeforePolicyDate.getTime()); - }); - - afterEach(() => { - dateNowSpy.mockRestore(); - }); - - it('does not show the privacy policy toast before the policy date', () => { - const result = selectors.getShowPrivacyPolicyToast({ - metamask: { - newPrivacyPolicyToastClickedOrClosed: null, - onboardingDate: new Date(PRIVACY_POLICY_DATE).setDate( - new Date(PRIVACY_POLICY_DATE).getDate() - 2, - ), - }, - }); - expect(result).toBe(false); - }); - - it('does not show the privacy policy toast before the policy date even if onboardingDate is not set', () => { - const result = selectors.getShowPrivacyPolicyToast({ - metamask: { - newPrivacyPolicyToastClickedOrClosed: null, - onboardingDate: null, - }, - }); - expect(result).toBe(false); - }); - }); - }); - it('#getUpdatedAndSortedAccounts', () => { const pinnedAccountState = { ...mockState, diff --git a/ui/store/actions.ts b/ui/store/actions.ts index a051bb15d5fd..91e4530035b5 100644 --- a/ui/store/actions.ts +++ b/ui/store/actions.ts @@ -2789,15 +2789,6 @@ export function showNftStillFetchingIndication(): Action { }; } -export function setShowNftDetectionEnablementToast( - value: boolean, -): PayloadAction { - return { - type: actionConstants.SHOW_NFT_DETECTION_ENABLEMENT_TOAST, - payload: value, - }; -} - export function setHardwareWalletDefaultHdPath({ device, path, @@ -4279,38 +4270,12 @@ export function setTermsOfUseLastAgreed(lastAgreed: number) { }; } -export function setSurveyLinkLastClickedOrClosed(time: number) { - return async () => { - await submitRequestToBackground('setSurveyLinkLastClickedOrClosed', [time]); - }; -} - -export function setNewPrivacyPolicyToastClickedOrClosed() { - return async () => { - await submitRequestToBackground('setNewPrivacyPolicyToastClickedOrClosed'); - }; -} - export function setLastViewedUserSurvey(id: number) { return async () => { await submitRequestToBackground('setLastViewedUserSurvey', [id]); }; } -export function setOnboardingDate() { - return async () => { - await submitRequestToBackground('setOnboardingDate'); - }; -} - -export function setNewPrivacyPolicyToastShownDate(time: number) { - return async () => { - await submitRequestToBackground('setNewPrivacyPolicyToastShownDate', [ - time, - ]); - }; -} - export function setOutdatedBrowserWarningLastShown(lastShown: number) { return async () => { await submitRequestToBackground('setOutdatedBrowserWarningLastShown', [ @@ -4950,12 +4915,6 @@ export function hideNetworkBanner() { return submitRequestToBackground('setShowNetworkBanner', [false]); } -export function neverShowSwitchedNetworkMessage() { - return submitRequestToBackground('setSwitchedNetworkNeverShowMessage', [ - true, - ]); -} - /** * Sends the background state the networkClientId and domain upon network switch * From 5fcb31b6ec91f5362c97964a8043673ac21b112f Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Tue, 22 Oct 2024 23:38:23 -0400 Subject: [PATCH 013/116] fix: Fix stream re-initialization (#28024) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Streams were not correctly re-initialized after a service worker restart, causing a broken UI for any affected window. This bug was introduced in https://github.com/MetaMask/metamask-extension/pull/26969, which reached production as part of v12.5.0. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28024?quickstart=1) ## **Related issues** Fixes #28018 ## **Manual testing steps** 1. Open a fullscreen page or trigger a dapp confirmation 2. Restart the service worker 3. See that the page is broken ## **Screenshots/Recordings** ### **Before** https://github.com/user-attachments/assets/38e2d2f4-f555-4a14-87f7-73ff2d95c306 ### **After** https://github.com/user-attachments/assets/1b6d9704-1ce2-4363-bc1d-118f1560b64a ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - No additional tests have been added yet because this is being considered for a hotfix. This should be covered either by an integration or an e2e test (or not). The affected code is not easy to cover effectively with unit tests. - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- app/scripts/ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/ui.js b/app/scripts/ui.js index 4f06fb8998c4..794037e12761 100644 --- a/app/scripts/ui.js +++ b/app/scripts/ui.js @@ -104,7 +104,7 @@ async function start() { if (isManifestV3 && isUIInitialised) { // Currently when service worker is revived we create new streams // in later version we might try to improve it by reviving same streams. - updateUiStreams(); + updateUiStreams(connectionStream); } else { await initializeUiWithTab( activeTab, From 4d26e24d9d121336d3970c403f2d42eb10511e02 Mon Sep 17 00:00:00 2001 From: Mathieu Artu Date: Wed, 23 Oct 2024 10:01:44 +0200 Subject: [PATCH 014/116] feat(NOTIFY-1245): add account syncing E2E helpers & basic tests (#28005) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This PR add a helper (`UserStorageMockttpController`) that helps mocking how user storage behaves in the context of E2E tests. This PR also adds two Account Syncing E2E tests to serve as a base to expand upon. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28005?quickstart=1) ## **Related issues** https://consensyssoftware.atlassian.net/browse/NOTIFY-1245 ## **Manual testing steps** 1. Run E2E tests 2. Verify that both new Account syncing E2E tests passes 3. Run unit tests 4. Verify that `UserStorageMockttpController` tests passes ## **Screenshots/Recordings** ### **Before** ### **After** ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- jest.config.js | 1 + test/e2e/fixture-builder.js | 2 + .../userStorageMockttpController.test.ts | 304 ++++++++++++++++++ .../userStorageMockttpController.ts | 196 +++++++++++ .../metrics/nft-detection-metrics.spec.js | 2 +- .../metrics/token-detection-metrics.spec.js | 2 +- test/e2e/tests/metrics/wallet-created.spec.js | 2 +- .../notifications/account-syncing/helpers.ts | 3 + .../notifications/account-syncing/mockData.ts | 12 + ...c-after-adding-custom-name-account.spec.ts | 120 +++++++ .../sync-after-onboarding.spec.ts | 60 ++++ test/e2e/tests/notifications/constants.ts | 7 + test/e2e/tests/notifications/mocks.ts | 39 +-- 13 files changed, 725 insertions(+), 25 deletions(-) create mode 100644 test/e2e/helpers/user-storage/userStorageMockttpController.test.ts create mode 100644 test/e2e/helpers/user-storage/userStorageMockttpController.ts create mode 100644 test/e2e/tests/notifications/account-syncing/helpers.ts create mode 100644 test/e2e/tests/notifications/account-syncing/mockData.ts create mode 100644 test/e2e/tests/notifications/account-syncing/sync-after-adding-custom-name-account.spec.ts create mode 100644 test/e2e/tests/notifications/account-syncing/sync-after-onboarding.spec.ts create mode 100644 test/e2e/tests/notifications/constants.ts diff --git a/jest.config.js b/jest.config.js index f1d38ab4aea3..56a75bfc68ed 100644 --- a/jest.config.js +++ b/jest.config.js @@ -35,6 +35,7 @@ module.exports = { '/development/**/*.test.(js|ts|tsx)', '/test/unit-global/**/*.test.(js|ts|tsx)', '/test/e2e/helpers.test.js', + '/test/e2e/helpers/**/*.test.(js|ts|tsx)', ], testPathIgnorePatterns: ['/development/webpack/'], testTimeout: 5500, diff --git a/test/e2e/fixture-builder.js b/test/e2e/fixture-builder.js index d73b959946c2..29770343488d 100644 --- a/test/e2e/fixture-builder.js +++ b/test/e2e/fixture-builder.js @@ -57,6 +57,7 @@ function onboardingFixture() { }), providerConfig: { id: 'networkConfigurationId' }, }, + NotificationServicesController: {}, PreferencesController: { advancedGasFee: {}, currentLocale: 'en', @@ -138,6 +139,7 @@ function onboardingFixture() { }, }, }, + UserStorageController: {}, TokensController: { allDetectedTokens: {}, allIgnoredTokens: {}, diff --git a/test/e2e/helpers/user-storage/userStorageMockttpController.test.ts b/test/e2e/helpers/user-storage/userStorageMockttpController.test.ts new file mode 100644 index 000000000000..1b6591899c0e --- /dev/null +++ b/test/e2e/helpers/user-storage/userStorageMockttpController.test.ts @@ -0,0 +1,304 @@ +import * as mockttp from 'mockttp'; +import { UserStorageMockttpController } from './userStorageMockttpController'; + +describe('UserStorageMockttpController', () => { + let mockServer: mockttp.Mockttp; + + const baseUrl = 'https://user-storage.api.cx.metamask.io/api/v1/userstorage'; + + describe('mimics user storage behaviour', () => { + mockServer = mockttp.getLocal({ cors: true }); + + it('handles GET requests that have empty response', async () => { + const controller = new UserStorageMockttpController(); + + controller.setupPath('accounts', mockServer); + + const request = await controller.onGet('accounts', { + path: `${baseUrl}/accounts`, + }); + + expect(request.json).toEqual(null); + }); + + it('handles GET requests that have a pre-defined response', async () => { + const controller = new UserStorageMockttpController(); + const mockedData = [ + { + HashedKey: + '7f8a7963423985c50f75f6ad42a6cf4e7eac43a6c55e3c6fcd49d73f01c1471b', + Data: 'data1', + }, + { + HashedKey: + 'c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468', + Data: 'data2', + }, + ]; + + controller.setupPath('accounts', mockServer, { + getResponse: mockedData, + }); + + const request = await controller.onGet('accounts', { + path: `${baseUrl}/accounts`, + }); + + expect(request.json).toEqual(mockedData); + }); + + it('handles batch GET requests', async () => { + const controller = new UserStorageMockttpController(); + const mockedData = [ + { + HashedKey: + '7f8a7963423985c50f75f6ad42a6cf4e7eac43a6c55e3c6fcd49d73f01c1471b', + Data: 'data1', + }, + { + HashedKey: + 'c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468', + Data: 'data2', + }, + ]; + + controller.setupPath('accounts', mockServer, { + getResponse: mockedData, + }); + + const request = await controller.onGet('accounts', { + path: `${baseUrl}/accounts`, + }); + + expect(request.json).toEqual(mockedData); + }); + + it('handles GET requests for feature entries', async () => { + const controller = new UserStorageMockttpController(); + const mockedData = [ + { + HashedKey: + '7f8a7963423985c50f75f6ad42a6cf4e7eac43a6c55e3c6fcd49d73f01c1471b', + Data: 'data1', + }, + { + HashedKey: + 'c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468', + Data: 'data2', + }, + ]; + + controller.setupPath('accounts', mockServer, { + getResponse: mockedData, + }); + + const request = await controller.onGet('accounts', { + path: `${baseUrl}/accounts/7f8a7963423985c50f75f6ad42a6cf4e7eac43a6c55e3c6fcd49d73f01c1471b`, + }); + + expect(request.json).toEqual(mockedData[0]); + }); + + it('handles PUT requests to create new entries', async () => { + const controller = new UserStorageMockttpController(); + const mockedData = [ + { + HashedKey: + '7f8a7963423985c50f75f6ad42a6cf4e7eac43a6c55e3c6fcd49d73f01c1471b', + Data: 'data1', + }, + { + HashedKey: + 'c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468', + Data: 'data2', + }, + ]; + const mockedAddedData = { + HashedKey: + '6afbe024087495b4e0d56c4bdfc981c84eba44a7c284d4f455b5db4fcabc2173', + Data: 'data3', + }; + + controller.setupPath('accounts', mockServer, { + getResponse: mockedData, + }); + + const putRequest = await controller.onPut('accounts', { + path: `${baseUrl}/accounts/6afbe024087495b4e0d56c4bdfc981c84eba44a7c284d4f455b5db4fcabc2173`, + body: { + getJson: async () => ({ + data: mockedAddedData.Data, + }), + } as unknown as mockttp.CompletedBody, + }); + + expect(putRequest.statusCode).toEqual(204); + + const getRequest = await controller.onGet('accounts', { + path: `${baseUrl}/accounts`, + }); + + expect(getRequest.json).toEqual([...mockedData, mockedAddedData]); + }); + + it('handles PUT requests to update existing entries', async () => { + const controller = new UserStorageMockttpController(); + const mockedData = [ + { + HashedKey: + '7f8a7963423985c50f75f6ad42a6cf4e7eac43a6c55e3c6fcd49d73f01c1471b', + Data: 'data1', + }, + { + HashedKey: + 'c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468', + Data: 'data2', + }, + ]; + const mockedUpdatedData = { + HashedKey: + 'c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468', + Data: 'data3', + }; + + controller.setupPath('accounts', mockServer, { + getResponse: mockedData, + }); + + const putRequest = await controller.onPut('accounts', { + path: `${baseUrl}/accounts/c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468`, + body: { + getJson: async () => ({ + data: mockedUpdatedData.Data, + }), + } as unknown as mockttp.CompletedBody, + }); + + expect(putRequest.statusCode).toEqual(204); + + const getRequest = await controller.onGet('accounts', { + path: `${baseUrl}/accounts`, + }); + + expect(getRequest.json).toEqual([mockedData[0], mockedUpdatedData]); + }); + + it('handles batch PUT requests', async () => { + const controller = new UserStorageMockttpController(); + const mockedData = [ + { + HashedKey: + '7f8a7963423985c50f75f6ad42a6cf4e7eac43a6c55e3c6fcd49d73f01c1471b', + Data: 'data1', + }, + { + HashedKey: + 'c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468', + Data: 'data2', + }, + ]; + const mockedUpdatedData = [ + { + HashedKey: + '7f8a7963423985c50f75f6ad42a6cf4e7eac43a6c55e3c6fcd49d73f01c1471b', + Data: 'data3', + }, + { + HashedKey: + 'c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468', + Data: 'data4', + }, + ]; + + controller.setupPath('accounts', mockServer, { + getResponse: mockedData, + }); + + const putData = {} as { [key: string]: string }; + mockedUpdatedData.forEach((entry) => { + putData[entry.HashedKey] = entry.Data; + }); + + const putRequest = await controller.onPut('accounts', { + path: `${baseUrl}/accounts`, + body: { + getJson: async () => ({ + data: putData, + }), + } as unknown as mockttp.CompletedBody, + }); + + expect(putRequest.statusCode).toEqual(204); + + const getRequest = await controller.onGet('accounts', { + path: `${baseUrl}/accounts`, + }); + + expect(getRequest.json).toEqual(mockedUpdatedData); + }); + + it('handles DELETE requests', async () => { + const controller = new UserStorageMockttpController(); + const mockedData = [ + { + HashedKey: + '7f8a7963423985c50f75f6ad42a6cf4e7eac43a6c55e3c6fcd49d73f01c1471b', + Data: 'data1', + }, + { + HashedKey: + 'c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468', + Data: 'data2', + }, + ]; + + controller.setupPath('accounts', mockServer, { + getResponse: mockedData, + }); + + const deleteRequest = await controller.onDelete('accounts', { + path: `${baseUrl}/accounts/c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468`, + }); + + expect(deleteRequest.statusCode).toEqual(204); + + const getRequest = await controller.onGet('accounts', { + path: `${baseUrl}/accounts`, + }); + + expect(getRequest.json).toEqual([mockedData[0]]); + }); + + it('handles batch DELETE requests', async () => { + const controller = new UserStorageMockttpController(); + const mockedData = [ + { + HashedKey: + '7f8a7963423985c50f75f6ad42a6cf4e7eac43a6c55e3c6fcd49d73f01c1471b', + Data: 'data1', + }, + { + HashedKey: + 'c236b92ea7d513b2beda062cb546986961dfa7ca4334a2913f7837e43d050468', + Data: 'data2', + }, + ]; + + controller.setupPath('accounts', mockServer, { + getResponse: mockedData, + }); + + const deleteRequest = await controller.onDelete('accounts', { + path: `${baseUrl}/accounts`, + }); + + expect(deleteRequest.statusCode).toEqual(204); + + const getRequest = await controller.onGet('accounts', { + path: `${baseUrl}/accounts`, + }); + + expect(getRequest.json).toEqual(null); + }); + }); +}); diff --git a/test/e2e/helpers/user-storage/userStorageMockttpController.ts b/test/e2e/helpers/user-storage/userStorageMockttpController.ts new file mode 100644 index 000000000000..970a10d11120 --- /dev/null +++ b/test/e2e/helpers/user-storage/userStorageMockttpController.ts @@ -0,0 +1,196 @@ +import { CompletedRequest, Mockttp } from 'mockttp'; + +// TODO: Export user storage schema from @metamask/profile-sync-controller +export const pathRegexps = { + accounts: + /https:\/\/user-storage\.api\.cx\.metamask\.io\/api\/v1\/userstorage\/accounts/u, + networks: + /https:\/\/user-storage\.api\.cx\.metamask\.io\/api\/v1\/userstorage\/networks/u, + notifications: + /https:\/\/user-storage\.api\.cx\.metamask\.io\/api\/v1\/userstorage\/notifications/u, +}; + +type UserStorageResponseData = { HashedKey: string; Data: string }; + +const determineIfFeatureEntryFromURL = (url: string) => + url.substring(url.lastIndexOf('userstorage') + 12).split('/').length === 2; + +export class UserStorageMockttpController { + paths: Map< + keyof typeof pathRegexps, + { + response: UserStorageResponseData[]; + server: Mockttp; + } + > = new Map(); + + readonly onGet = async ( + path: keyof typeof pathRegexps, + request: Pick, + statusCode: number = 200, + ) => { + const internalPathData = this.paths.get(path); + + if (!internalPathData) { + return { + statusCode, + json: null, + }; + } + + const isFeatureEntry = determineIfFeatureEntryFromURL(request.path); + + if (isFeatureEntry) { + const json = + internalPathData.response?.find( + (entry) => entry.HashedKey === request.path.split('/').pop(), + ) || null; + + return { + statusCode, + json, + }; + } + + const json = internalPathData?.response.length + ? internalPathData.response + : null; + + return { + statusCode, + json, + }; + }; + + readonly onPut = async ( + path: keyof typeof pathRegexps, + request: Pick, + statusCode: number = 204, + ) => { + const isFeatureEntry = determineIfFeatureEntryFromURL(request.path); + + const data = (await request.body.getJson()) as { + data: string | { [key: string]: string }; + }; + + const newOrUpdatedSingleOrBatchEntries = + isFeatureEntry && typeof data?.data === 'string' + ? [ + { + HashedKey: request.path.split('/').pop() as string, + Data: data?.data, + }, + ] + : Object.entries(data?.data).map(([key, value]) => ({ + HashedKey: key, + Data: value, + })); + + newOrUpdatedSingleOrBatchEntries.forEach((entry) => { + const internalPathData = this.paths.get(path); + + if (!internalPathData) { + return; + } + + const doesThisEntryExist = internalPathData.response?.find( + (existingEntry) => existingEntry.HashedKey === entry.HashedKey, + ); + + if (doesThisEntryExist) { + this.paths.set(path, { + ...internalPathData, + response: internalPathData.response.map((existingEntry) => + existingEntry.HashedKey === entry.HashedKey ? entry : existingEntry, + ), + }); + } else { + this.paths.set(path, { + ...internalPathData, + response: [ + ...(internalPathData?.response || []), + entry as { HashedKey: string; Data: string }, + ], + }); + } + }); + + return { + statusCode, + }; + }; + + readonly onDelete = async ( + path: keyof typeof pathRegexps, + request: Pick, + statusCode: number = 204, + ) => { + const internalPathData = this.paths.get(path); + + if (!internalPathData) { + return { + statusCode, + }; + } + + const isFeatureEntry = determineIfFeatureEntryFromURL(request.path); + + if (isFeatureEntry) { + this.paths.set(path, { + ...internalPathData, + response: internalPathData?.response.filter( + (entry) => entry.HashedKey !== request.path.split('/').pop(), + ), + }); + } else { + this.paths.set(path, { + ...internalPathData, + response: [], + }); + } + + return { + statusCode, + }; + }; + + setupPath = ( + path: keyof typeof pathRegexps, + server: Mockttp, + overrides?: { + getResponse?: UserStorageResponseData[]; + getStatusCode?: number; + putStatusCode?: number; + deleteStatusCode?: number; + }, + ) => { + const previouslySetupPath = this.paths.get(path); + + this.paths.set(path, { + response: overrides?.getResponse || previouslySetupPath?.response || [], + server, + }); + + this.paths + .get(path) + ?.server.forGet(pathRegexps[path]) + .always() + .thenCallback((request) => + this.onGet(path, request, overrides?.getStatusCode), + ); + this.paths + .get(path) + ?.server.forPut(pathRegexps[path]) + .always() + .thenCallback((request) => + this.onPut(path, request, overrides?.putStatusCode), + ); + this.paths + .get(path) + ?.server.forDelete(pathRegexps[path]) + .always() + .thenCallback((request) => + this.onDelete(path, request, overrides?.deleteStatusCode), + ); + }; +} diff --git a/test/e2e/tests/metrics/nft-detection-metrics.spec.js b/test/e2e/tests/metrics/nft-detection-metrics.spec.js index 3c77fdb66731..a0c901087425 100644 --- a/test/e2e/tests/metrics/nft-detection-metrics.spec.js +++ b/test/e2e/tests/metrics/nft-detection-metrics.spec.js @@ -101,7 +101,7 @@ describe('Nft detection event @no-mmi', function () { locale: 'en', chain_id: '0x539', environment_type: 'fullscreen', - is_profile_syncing_enabled: null, + is_profile_syncing_enabled: true, }); assert.deepStrictEqual(events[2].properties, { nft_autodetection_enabled: true, diff --git a/test/e2e/tests/metrics/token-detection-metrics.spec.js b/test/e2e/tests/metrics/token-detection-metrics.spec.js index 669aff0a9290..923f7c86a242 100644 --- a/test/e2e/tests/metrics/token-detection-metrics.spec.js +++ b/test/e2e/tests/metrics/token-detection-metrics.spec.js @@ -98,7 +98,7 @@ describe('Token detection event @no-mmi', function () { locale: 'en', chain_id: '0x539', environment_type: 'fullscreen', - is_profile_syncing_enabled: null, + is_profile_syncing_enabled: true, }); assert.deepStrictEqual(events[2].properties, { token_detection_enabled: true, diff --git a/test/e2e/tests/metrics/wallet-created.spec.js b/test/e2e/tests/metrics/wallet-created.spec.js index 890ac9342a8a..fbe80fb595dc 100644 --- a/test/e2e/tests/metrics/wallet-created.spec.js +++ b/test/e2e/tests/metrics/wallet-created.spec.js @@ -87,7 +87,7 @@ describe('Wallet Created Events @no-mmi', function () { locale: 'en', chain_id: '0x539', environment_type: 'fullscreen', - is_profile_syncing_enabled: null, + is_profile_syncing_enabled: true, }); }, ); diff --git a/test/e2e/tests/notifications/account-syncing/helpers.ts b/test/e2e/tests/notifications/account-syncing/helpers.ts new file mode 100644 index 000000000000..e54a5f6f96ae --- /dev/null +++ b/test/e2e/tests/notifications/account-syncing/helpers.ts @@ -0,0 +1,3 @@ +import { isManifestV3 } from '../../../../../shared/modules/mv3.utils'; + +export const IS_ACCOUNT_SYNCING_ENABLED = isManifestV3; diff --git a/test/e2e/tests/notifications/account-syncing/mockData.ts b/test/e2e/tests/notifications/account-syncing/mockData.ts new file mode 100644 index 000000000000..96e92ecd8491 --- /dev/null +++ b/test/e2e/tests/notifications/account-syncing/mockData.ts @@ -0,0 +1,12 @@ +export const accountsSyncMockResponse = [ + { + HashedKey: + '997050281e559a2bb40d1c2e73d9f0887cbea1b81ff9dd7815917949e37f4f2f', + Data: '{"v":"1","t":"scrypt","d":"1yC/ZXarV57HbqEZ46nH0JWgXfPl86nTHD7kai2g5gm290FM9tw5QjOaAAwIuQESEE8TIM/J9pIj7nmlGi+BZrevTtK3DXWXwnUQsCP7amKd5Q4gs3EEQgXpA0W+WJUgyElj869rwIv/C6tl5E2pK4j/0EAjMSIm1TGoj9FPohyRgZsOIt8VhZfb7w0GODsjPwPIkN6zazvJ3gAFYFPh7yRtebFs86z3fzqCWZ9zakdCHntchC2oZiaApXR9yzaPlGgnPg==","o":{"N":131072,"r":8,"p":1,"dkLen":16},"saltLen":16}', + }, + { + HashedKey: + 'e53d8feb65b4cf0c339e57bee2a81b155e056622f9192c54b707f928c8a42a7a', + Data: '{"v":"1","t":"scrypt","d":"O7QEtUo7q/jG+UNkD/HOxQARGGRXsGPrLsDlkwDfgfoYlPI0To/M3pJRBlKD0RLEFIPHtHBEA5bv/2izB21VljvhMnhHfo0KgQ+e8Uq1t7grwa+r+ge3qbPNY+w78Xt8GtC+Hkrw5fORKvCn+xjzaCHYV6RxKYbp1TpyCJq7hDrr1XiyL8kqbpE0hAHALrrQOoV9/WXJi9pC5J118kquXx8CNA1P5wO/BXKp1AbryGR6kVW3lsp1sy3lYE/TApa5lTj+","o":{"N":131072,"r":8,"p":1,"dkLen":16},"saltLen":16}', + }, +]; diff --git a/test/e2e/tests/notifications/account-syncing/sync-after-adding-custom-name-account.spec.ts b/test/e2e/tests/notifications/account-syncing/sync-after-adding-custom-name-account.spec.ts new file mode 100644 index 000000000000..6ca7c501fc84 --- /dev/null +++ b/test/e2e/tests/notifications/account-syncing/sync-after-adding-custom-name-account.spec.ts @@ -0,0 +1,120 @@ +import { Mockttp } from 'mockttp'; +import { + withFixtures, + defaultGanacheOptions, + completeImportSRPOnboardingFlow, +} from '../../../helpers'; +import FixtureBuilder from '../../../fixture-builder'; +import { mockNotificationServices } from '../mocks'; +import { + NOTIFICATIONS_TEAM_PASSWORD, + NOTIFICATIONS_TEAM_SEED_PHRASE, +} from '../constants'; +import { UserStorageMockttpController } from '../../../helpers/user-storage/userStorageMockttpController'; +import { accountsSyncMockResponse } from './mockData'; +import { IS_ACCOUNT_SYNCING_ENABLED } from './helpers'; + +describe('Account syncing @no-mmi', function () { + if (!IS_ACCOUNT_SYNCING_ENABLED) { + return; + } + describe('from inside MetaMask', function () { + it('syncs newly added accounts', async function () { + const userStorageMockttpController = new UserStorageMockttpController(); + + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions: defaultGanacheOptions, + title: this.test?.fullTitle(), + testSpecificMock: (server: Mockttp) => { + userStorageMockttpController.setupPath('accounts', server, { + getResponse: accountsSyncMockResponse, + }); + + return mockNotificationServices( + server, + userStorageMockttpController, + ); + }, + }, + async ({ driver }) => { + await driver.navigate(); + await completeImportSRPOnboardingFlow( + driver, + NOTIFICATIONS_TEAM_SEED_PHRASE, + NOTIFICATIONS_TEAM_PASSWORD, + ); + + await driver.clickElement('[data-testid="account-menu-icon"]'); + + await driver.wait(async () => { + const internalAccounts = await driver.findElements( + '.multichain-account-list-item', + ); + return internalAccounts.length === accountsSyncMockResponse.length; + }, 20000); + + await driver.clickElement( + '[data-testid="multichain-account-menu-popover-action-button"]', + ); + await driver.clickElement( + '[data-testid="multichain-account-menu-popover-add-account"]', + ); + await driver.fill('#account-name', 'My third account'); + + await driver.clickElementAndWaitToDisappear( + '[data-testid="submit-add-account-with-name"]', + ); + }, + ); + + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions: defaultGanacheOptions, + title: this.test?.fullTitle(), + testSpecificMock: (server: Mockttp) => { + userStorageMockttpController.setupPath('accounts', server); + return mockNotificationServices( + server, + userStorageMockttpController, + ); + }, + }, + async ({ driver }) => { + await driver.navigate(); + await completeImportSRPOnboardingFlow( + driver, + NOTIFICATIONS_TEAM_SEED_PHRASE, + NOTIFICATIONS_TEAM_PASSWORD, + ); + + await driver.clickElement('[data-testid="account-menu-icon"]'); + + await driver.wait(async () => { + const internalAccounts = await driver.findElements( + '.multichain-account-list-item', + ); + return ( + internalAccounts.length === + userStorageMockttpController.paths.get('accounts')?.response + .length + ); + }, 20000); + + await driver.wait(async () => { + const internalAccounts = await driver.findElements( + '.multichain-account-list-item .multichain-account-list-item__account-name', + ); + const lastAccountName = await internalAccounts[ + internalAccounts.length - 1 + ].getText(); + + return lastAccountName === 'My third account'; + }, 20000); + }, + ); + }); + }); +}); diff --git a/test/e2e/tests/notifications/account-syncing/sync-after-onboarding.spec.ts b/test/e2e/tests/notifications/account-syncing/sync-after-onboarding.spec.ts new file mode 100644 index 000000000000..1a55e38c713d --- /dev/null +++ b/test/e2e/tests/notifications/account-syncing/sync-after-onboarding.spec.ts @@ -0,0 +1,60 @@ +import { Mockttp } from 'mockttp'; +import { + withFixtures, + defaultGanacheOptions, + completeImportSRPOnboardingFlow, +} from '../../../helpers'; +import FixtureBuilder from '../../../fixture-builder'; +import { mockNotificationServices } from '../mocks'; +import { + NOTIFICATIONS_TEAM_PASSWORD, + NOTIFICATIONS_TEAM_SEED_PHRASE, +} from '../constants'; +import { UserStorageMockttpController } from '../../../helpers/user-storage/userStorageMockttpController'; +import { accountsSyncMockResponse } from './mockData'; +import { IS_ACCOUNT_SYNCING_ENABLED } from './helpers'; + +describe('Account syncing @no-mmi', function () { + if (!IS_ACCOUNT_SYNCING_ENABLED) { + return; + } + describe('from inside MetaMask', function () { + it('retrieves all previously synced accounts', async function () { + const userStorageMockttpController = new UserStorageMockttpController(); + + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions: defaultGanacheOptions, + title: this.test?.fullTitle(), + testSpecificMock: (server: Mockttp) => { + userStorageMockttpController.setupPath('accounts', server, { + getResponse: accountsSyncMockResponse, + }); + return mockNotificationServices( + server, + userStorageMockttpController, + ); + }, + }, + async ({ driver }) => { + await driver.navigate(); + await completeImportSRPOnboardingFlow( + driver, + NOTIFICATIONS_TEAM_SEED_PHRASE, + NOTIFICATIONS_TEAM_PASSWORD, + ); + + await driver.clickElement('[data-testid="account-menu-icon"]'); + + await driver.wait(async () => { + const internalAccounts = await driver.findElements( + '.multichain-account-list-item', + ); + return internalAccounts.length === accountsSyncMockResponse.length; + }, 20000); + }, + ); + }); + }); +}); diff --git a/test/e2e/tests/notifications/constants.ts b/test/e2e/tests/notifications/constants.ts new file mode 100644 index 000000000000..8c611dcd4f44 --- /dev/null +++ b/test/e2e/tests/notifications/constants.ts @@ -0,0 +1,7 @@ +// As we rely on profile syncing for most of our features, we need to use the same SRP for all of our tests +export const NOTIFICATIONS_TEAM_SEED_PHRASE = + 'leisure swallow trip elbow prison wait rely keep supply hole general mountain'; +export const NOTIFICATIONS_TEAM_PASSWORD = 'notify_password'; +// You can use the storage key below to generate mock data +export const NOTIFICATIONS_TEAM_STORAGE_KEY = + '0d55d30da233959674d14076737198c05ae3fb8631a17e20d3c28c60dddd82f7'; diff --git a/test/e2e/tests/notifications/mocks.ts b/test/e2e/tests/notifications/mocks.ts index 9161faf2967f..2bd6847a0e72 100644 --- a/test/e2e/tests/notifications/mocks.ts +++ b/test/e2e/tests/notifications/mocks.ts @@ -1,15 +1,12 @@ import { Mockttp, RequestRuleBuilder } from 'mockttp'; -import { - AuthenticationController, - UserStorageController, -} from '@metamask/profile-sync-controller'; +import { AuthenticationController } from '@metamask/profile-sync-controller'; import { NotificationServicesController, NotificationServicesPushController, } from '@metamask/notification-services-controller'; +import { UserStorageMockttpController } from '../../helpers/user-storage/userStorageMockttpController'; const AuthMocks = AuthenticationController.Mocks; -const StorageMocks = UserStorageController.Mocks; const NotificationMocks = NotificationServicesController.Mocks; const PushMocks = NotificationServicesPushController.Mocks; @@ -20,32 +17,30 @@ type MockResponse = { }; /** - * E2E mock setup for notification APIs (Auth, Storage, Notifications, Push Notifications, Profile syncing) + * E2E mock setup for notification APIs (Auth, UserStorage, Notifications, Push Notifications, Profile syncing) * * @param server - server obj used to mock our endpoints + * @param userStorageMockttpController - optional controller to mock user storage endpoints */ -export async function mockNotificationServices(server: Mockttp) { +export async function mockNotificationServices( + server: Mockttp, + userStorageMockttpController?: UserStorageMockttpController, +) { // Auth mockAPICall(server, AuthMocks.getMockAuthNonceResponse()); mockAPICall(server, AuthMocks.getMockAuthLoginResponse()); mockAPICall(server, AuthMocks.getMockAuthAccessTokenResponse()); // Storage - mockAPICall(server, await StorageMocks.getMockUserStorageGetResponse()); - mockAPICall(server, await StorageMocks.getMockUserStoragePutResponse()); - - // TODO - add better mock responses for other Profile Sync features - // (Account Sync, Network Sync, ...) - server - .forGet(/https:\/\/user-storage\.api\.cx\.metamask\.io\/.*/gu) - ?.thenCallback(() => ({ - statusCode: 404, - })); - server - .forPut(/https:\/\/user-storage\.api\.cx\.metamask\.io\/.*/gu) - ?.thenCallback(() => ({ - statusCode: 204, - })); + if (!userStorageMockttpController?.paths.get('accounts')) { + new UserStorageMockttpController().setupPath('accounts', server); + } + if (!userStorageMockttpController?.paths.get('networks')) { + new UserStorageMockttpController().setupPath('networks', server); + } + if (!userStorageMockttpController?.paths.get('notifications')) { + new UserStorageMockttpController().setupPath('notifications', server); + } // Notifications mockAPICall(server, NotificationMocks.getMockFeatureAnnouncementResponse()); From 08cf2a719a6cc5032a0b0b8d9bb75411ba5cd593 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Oliv=C3=A9?= Date: Wed, 23 Oct 2024 10:36:30 +0200 Subject: [PATCH 015/116] chore: updated package (#28002) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Updated mmi package ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** ### **Before** ### **After** ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 9826fb4ff59a..a4474e02ec49 100644 --- a/package.json +++ b/package.json @@ -293,7 +293,7 @@ "@lavamoat/snow": "^2.0.2", "@material-ui/core": "^4.11.0", "@metamask-institutional/custody-controller": "^0.3.0", - "@metamask-institutional/custody-keyring": "^2.1.0", + "@metamask-institutional/custody-keyring": "^2.1.1", "@metamask-institutional/extension": "^0.3.28", "@metamask-institutional/institutional-features": "^1.3.6", "@metamask-institutional/portfolio-dashboard": "^1.4.1", diff --git a/yarn.lock b/yarn.lock index 1170bdb8a6a9..d6f93dff6273 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4595,9 +4595,9 @@ __metadata: languageName: node linkType: hard -"@metamask-institutional/custody-keyring@npm:^2.1.0": - version: 2.1.0 - resolution: "@metamask-institutional/custody-keyring@npm:2.1.0" +"@metamask-institutional/custody-keyring@npm:^2.1.0, @metamask-institutional/custody-keyring@npm:^2.1.1": + version: 2.1.1 + resolution: "@metamask-institutional/custody-keyring@npm:2.1.1" dependencies: "@ethereumjs/tx": "npm:^4.1.1" "@ethereumjs/util": "npm:^8.0.5" @@ -4607,7 +4607,7 @@ __metadata: "@metamask/obs-store": "npm:^9.0.0" crypto: "npm:^1.0.1" lodash.clonedeep: "npm:^4.5.0" - checksum: 10/78421e38fed4ad88412593a307fc13f220b0e5a83dee76de0032c835a7896bf23bb76030e4bb7d69bfa604db7a31faa6312ac64b05cc135d8afb723fb3660920 + checksum: 10/c2c20c126ac41f9cf1bbed2f4059046c247352cd1afe68ed6a76ab28eece0eb5a1c30ce46eaf459e3c240dd39c529e458a0a91715ea4953f087bc335709201b6 languageName: node linkType: hard @@ -25925,7 +25925,7 @@ __metadata: "@lydell/node-pty": "npm:^1.0.1" "@material-ui/core": "npm:^4.11.0" "@metamask-institutional/custody-controller": "npm:^0.3.0" - "@metamask-institutional/custody-keyring": "npm:^2.1.0" + "@metamask-institutional/custody-keyring": "npm:^2.1.1" "@metamask-institutional/extension": "npm:^0.3.28" "@metamask-institutional/institutional-features": "npm:^1.3.6" "@metamask-institutional/portfolio-dashboard": "npm:^1.4.1" From e63b7eb54bec1453d39e4a40c9e612377994ccff Mon Sep 17 00:00:00 2001 From: Matthew Walsh Date: Wed, 23 Oct 2024 10:38:48 +0100 Subject: [PATCH 016/116] refactor: remove global network usage from petnames (#27946) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Remove all global network usage from the Petnames components and related React hooks. While this updates many files, the majority of file changes are minor to propagate the chain ID to the low level components. The primary logic changes to review are in: - `ui/hooks/useName.ts` - `ui/hooks/useDisplayName.ts` - `ui/hooks/useNftCollectionsMetadata.ts` Specifically: - Require the `variation` property in the `Name` component. - Require the `variation` property in the `NameDetails` component. - Require the `variation` property in the `useName` hook. - Require the `chainId` property in the following components: - `ConfirmInfoRowAddress` - `ConfirmInfoRowTypedSignDataV1` - `ConfirmInfoRowTypedSignData` - `DataTree` - `PermitSimulationValueDisplay` - `SenderToRecipient` - `SignatureRequestData` - Add `variation` to the `UseDisplayNameRequest` in the `UseDisplayName` hook. - Improve readability by refactoring into multiple local hooks. - Use the `tokensChainsCache` state to retrieve ERC-20 tokens across different chains. - Support requests with alternate chain IDs in the `useNftCollectionsMetadata` hook. - Add `selectERC20TokensByChain` selector. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27946?quickstart=1) ## **Related issues** Fixes: [#3372](https://github.com/MetaMask/MetaMask-planning/issues/3372) ## **Manual testing steps** Regression of all petnames usage, including legacy and redesigned signatures and transactions. ## **Screenshots/Recordings** ### **Before** ### **After** ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .../petnames/petnames-signatures.spec.js | 6 +- .../app/confirm/info/row/address.test.tsx | 7 +- .../app/confirm/info/row/address.tsx | 4 +- .../__snapshots__/name-details.test.tsx.snap | 11 +- .../name/name-details/name-details.test.tsx | 37 +- .../app/name/name-details/name-details.tsx | 33 +- ui/components/app/name/name.test.tsx | 26 +- ui/components/app/name/name.tsx | 19 +- ...transaction-list-item-details.component.js | 3 +- .../sender-to-recipient.component.js | 6 + ui/hooks/useDisplayName.test.ts | 651 +++++++++++++----- ui/hooks/useDisplayName.ts | 188 +++-- ui/hooks/useFirstPartyContractName.test.ts | 78 --- ui/hooks/useFirstPartyContractName.ts | 45 -- ui/hooks/useName.test.ts | 60 +- ui/hooks/useName.ts | 21 +- ui/hooks/useNftCollectionsMetadata.test.ts | 27 +- ui/hooks/useNftCollectionsMetadata.ts | 101 +-- .../confirm-page-container.component.js | 1 + .../approve-details/approve-details.tsx | 3 +- .../approve-static-simulation.tsx | 3 + .../revoke-static-simulation.tsx | 4 + .../info/personal-sign/personal-sign.tsx | 3 +- .../personal-sign/siwe-sign/siwe-sign.tsx | 2 +- ...set-approval-for-all-static-simulation.tsx | 4 + ...set-approval-for-all-static-simulation.tsx | 3 + .../transaction-data/transaction-data.tsx | 38 +- .../transaction-details.tsx | 11 +- .../token-transfer/token-details-section.tsx | 5 +- .../transaction-flow-section.tsx | 9 +- .../info/typed-sign-v1/typed-sign-v1.tsx | 3 + .../permit-simulation/permit-simulation.tsx | 3 + .../value-display/value-display.test.tsx | 2 + .../value-display/value-display.tsx | 6 +- .../confirm/info/typed-sign/typed-sign.tsx | 9 +- .../components/confirm/row/dataTree.test.tsx | 13 +- .../components/confirm/row/dataTree.tsx | 8 +- .../typedSignDataV1.test.tsx | 8 +- .../typed-sign-data-v1/typedSignDataV1.tsx | 4 +- .../typed-sign-data/typedSignData.test.tsx | 4 +- .../row/typed-sign-data/typedSignData.tsx | 3 + .../contract-details-modal.js | 6 +- .../signature-request-data.js | 11 +- .../signature-request-message.js | 4 +- .../signature-request/signature-request.js | 1 + .../simulation-details/asset-pill.test.tsx | 5 +- .../simulation-details/asset-pill.tsx | 51 +- .../useSimulationMetrics.ts | 6 + .../hooks/useCurrentConfirmation.test.ts | 18 +- .../hooks/useCurrentConfirmation.ts | 10 +- ui/selectors/selectors.js | 25 +- 51 files changed, 1023 insertions(+), 586 deletions(-) delete mode 100644 ui/hooks/useFirstPartyContractName.test.ts delete mode 100644 ui/hooks/useFirstPartyContractName.ts diff --git a/test/e2e/tests/petnames/petnames-signatures.spec.js b/test/e2e/tests/petnames/petnames-signatures.spec.js index ba6cf7642c59..6c472901057e 100644 --- a/test/e2e/tests/petnames/petnames-signatures.spec.js +++ b/test/e2e/tests/petnames/petnames-signatures.spec.js @@ -46,7 +46,7 @@ async function installNameLookupSnap(driver) { // Confirm Install Modal await driver.clickElement({ - text: 'Install', + text: 'Confirm', tag: 'button', }); @@ -173,9 +173,7 @@ describe('Petnames - Signatures', function () { ); }); - // TODO(dbrans): Re-enable this test when name-lookup endowment is in stable. - // eslint-disable-next-line mocha/no-skipped-tests - it.skip('can propose names using installed snaps', async function () { + it('can propose names using installed snaps', async function () { await withFixtures( { dapp: true, diff --git a/ui/components/app/confirm/info/row/address.test.tsx b/ui/components/app/confirm/info/row/address.test.tsx index 08a3561691ff..f27e067787b1 100644 --- a/ui/components/app/confirm/info/row/address.test.tsx +++ b/ui/components/app/confirm/info/row/address.test.tsx @@ -8,6 +8,8 @@ import { mockNetworkState } from '../../../../../../test/stub/networks'; import { ConfirmInfoRowAddress } from './address'; import { TEST_ADDRESS } from './constants'; +const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET; + const render = ( // TODO: Replace `any` with type // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -19,7 +21,10 @@ const render = ( ...storeOverrides, }); - return renderWithProvider(, store); + return renderWithProvider( + , + store, + ); }; describe('ConfirmInfoRowAddress', () => { diff --git a/ui/components/app/confirm/info/row/address.tsx b/ui/components/app/confirm/info/row/address.tsx index 7d28851ece92..95fabf26652f 100644 --- a/ui/components/app/confirm/info/row/address.tsx +++ b/ui/components/app/confirm/info/row/address.tsx @@ -22,11 +22,12 @@ import { useFallbackDisplayName } from './hook'; export type ConfirmInfoRowAddressProps = { address: string; + chainId: string; isSnapUsingThis?: boolean; }; export const ConfirmInfoRowAddress = memo( - ({ address, isSnapUsingThis }: ConfirmInfoRowAddressProps) => { + ({ address, chainId, isSnapUsingThis }: ConfirmInfoRowAddressProps) => { const isPetNamesEnabled = useSelector(getPetnamesEnabled); const { displayName, hexAddress } = useFallbackDisplayName(address); const [isNicknamePopoverShown, setIsNicknamePopoverShown] = useState(false); @@ -48,6 +49,7 @@ export const ConfirmInfoRowAddress = memo( value={hexAddress} type={NameType.ETHEREUM_ADDRESS} preferContractSymbol + variation={chainId} /> ) : ( <> 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 a6d0df79843d..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,15 +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 9e93384adcd6..0f0df9f5b5f6 100644 --- a/ui/components/app/name/name-details/name-details.test.tsx +++ b/ui/components/app/name/name-details/name-details.test.tsx @@ -11,8 +11,8 @@ import { MetaMetricsEventCategory, MetaMetricsEventName, } from '../../../../../shared/constants/metametrics'; -import { mockNetworkState } from '../../../../../test/stub/networks'; import { CHAIN_IDS } from '../../../../../shared/constants/network'; +import { mockNetworkState } from '../../../../../test/stub/networks'; import NameDetails from './name-details'; jest.mock('../../../../store/actions', () => ({ @@ -37,11 +37,11 @@ const SOURCE_ID_MOCK = 'ens'; const SOURCE_ID_2_MOCK = 'some_snap'; const PROPOSED_NAME_MOCK = 'TestProposedName'; const PROPOSED_NAME_2_MOCK = 'TestProposedName2'; +const VARIATION_MOCK = CHAIN_ID_MOCK; const STATE_MOCK = { metamask: { ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }), - nameSources: { [SOURCE_ID_2_MOCK]: { label: 'Super Name Resolution Snap' }, }, @@ -85,13 +85,17 @@ const STATE_MOCK = { }, }, useTokenDetection: true, - tokenList: { - '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d': { - address: '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d', - symbol: 'IUSD', - name: 'iZUMi Bond USD', - iconUrl: - 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d.png', + tokensChainsCache: { + [VARIATION_MOCK]: { + data: { + '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d': { + address: '0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d', + symbol: 'IUSD', + name: 'iZUMi Bond USD', + iconUrl: + 'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d.png', + }, + }, }, }, }, @@ -157,6 +161,7 @@ describe('NameDetails', () => { undefined} />, store, @@ -170,6 +175,7 @@ describe('NameDetails', () => { undefined} />, store, @@ -183,6 +189,7 @@ describe('NameDetails', () => { undefined} />, store, @@ -196,6 +203,7 @@ describe('NameDetails', () => { undefined} />, store, @@ -209,6 +217,7 @@ describe('NameDetails', () => { undefined} />, store, @@ -229,6 +238,7 @@ describe('NameDetails', () => { undefined} />, store, @@ -251,6 +261,7 @@ describe('NameDetails', () => { undefined} />, store, @@ -273,6 +284,7 @@ describe('NameDetails', () => { undefined} />, store, @@ -295,6 +307,7 @@ describe('NameDetails', () => { undefined} />, store, @@ -317,6 +330,7 @@ describe('NameDetails', () => { undefined} />, store, @@ -336,6 +350,7 @@ describe('NameDetails', () => { undefined} />, store, @@ -373,6 +388,7 @@ describe('NameDetails', () => { undefined} /> , @@ -399,6 +415,7 @@ describe('NameDetails', () => { undefined} /> , @@ -426,6 +443,7 @@ describe('NameDetails', () => { undefined} /> , @@ -454,6 +472,7 @@ describe('NameDetails', () => { undefined} /> , diff --git a/ui/components/app/name/name-details/name-details.tsx b/ui/components/app/name/name-details/name-details.tsx index 22b0445a0ad5..1bb2b1f1e478 100644 --- a/ui/components/app/name/name-details/name-details.tsx +++ b/ui/components/app/name/name-details/name-details.tsx @@ -46,7 +46,7 @@ import Name from '../name'; import FormComboField, { FormComboFieldOption, } from '../../../ui/form-combo-field/form-combo-field'; -import { getCurrentChainId, getNameSources } from '../../../../selectors'; +import { getNameSources } from '../../../../selectors'; import { setName as saveName, updateProposedNames, @@ -64,6 +64,7 @@ export type NameDetailsProps = { sourcePriority?: string[]; type: NameType; value: string; + variation: string; }; type ProposedNameOption = Required & { @@ -157,12 +158,14 @@ function getInitialSources( return [...resultSources, ...stateSources].sort(); } -function useProposedNames(value: string, type: NameType, chainId: string) { +function useProposedNames(value: string, type: NameType, variation: string) { const dispatch = useDispatch(); - const { proposedNames } = useName(value, type); + const { proposedNames } = useName(value, type, variation); + // TODO: Replace `any` with type // eslint-disable-next-line @typescript-eslint/no-explicit-any const updateInterval = useRef(); + const [initialSources, setInitialSources] = useState(); useEffect(() => { @@ -178,7 +181,7 @@ function useProposedNames(value: string, type: NameType, chainId: string) { value, type, onlyUpdateAfterDelay: true, - variation: chainId, + variation, }), // TODO: Replace `any` with type // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -196,7 +199,7 @@ function useProposedNames(value: string, type: NameType, chainId: string) { updateInterval.current = setInterval(update, UPDATE_DELAY); return reset; - }, [value, type, chainId, dispatch, initialSources, setInitialSources]); + }, [value, type, variation, dispatch, initialSources, setInitialSources]); return { proposedNames, initialSources }; } @@ -205,13 +208,20 @@ export default function NameDetails({ onClose, type, value, + variation, }: NameDetailsProps) { - const chainId = useSelector(getCurrentChainId); - const { name: savedPetname, sourceId: savedSourceId } = useName(value, type); - const { name: displayName, hasPetname: hasSavedPetname } = useDisplayName( + const { name: savedPetname, sourceId: savedSourceId } = useName( value, type, + variation, ); + + const { name: displayName, hasPetname: hasSavedPetname } = useDisplayName({ + value, + type, + variation, + }); + const nameSources = useSelector(getNameSources, isEqual); const [name, setName] = useState(''); const [openMetricSent, setOpenMetricSent] = useState(false); @@ -226,7 +236,7 @@ export default function NameDetails({ const { proposedNames, initialSources } = useProposedNames( value, type, - chainId, + variation, ); const [copiedAddress, handleCopyAddress] = useCopyToClipboard() as [ @@ -275,12 +285,12 @@ export default function NameDetails({ type, name: name?.length ? name : null, sourceId: selectedSourceId, - variation: chainId, + variation, }), ); onClose(); - }, [name, selectedSourceId, onClose, trackPetnamesSaveEvent, chainId]); + }, [name, selectedSourceId, onClose, trackPetnamesSaveEvent, variation]); const handleClose = useCallback(() => { onClose(); @@ -333,6 +343,7 @@ export default function NameDetails({ diff --git a/ui/components/app/name/name.test.tsx b/ui/components/app/name/name.test.tsx index 061d39e670de..33648e98e38c 100644 --- a/ui/components/app/name/name.test.tsx +++ b/ui/components/app/name/name.test.tsx @@ -22,6 +22,7 @@ jest.mock('react-redux', () => ({ const ADDRESS_NO_SAVED_NAME_MOCK = '0xc0ffee254729296a45a3885639ac7e10f9d54977'; const ADDRESS_SAVED_NAME_MOCK = '0xc0ffee254729296a45a3885639ac7e10f9d54979'; const SAVED_NAME_MOCK = 'TestName'; +const VARIATION_MOCK = 'testVariation'; const STATE_MOCK = { metamask: { @@ -44,7 +45,11 @@ describe('Name', () => { }); const { container } = renderWithProvider( - , + , store, ); @@ -61,6 +66,7 @@ describe('Name', () => { , store, ); @@ -75,7 +81,11 @@ describe('Name', () => { }); const { container } = renderWithProvider( - , + , store, ); @@ -90,7 +100,11 @@ describe('Name', () => { }); const { container } = renderWithProvider( - , + , store, ); @@ -114,7 +128,11 @@ describe('Name', () => { renderWithProvider( - + , store, ); diff --git a/ui/components/app/name/name.tsx b/ui/components/app/name/name.tsx index 5af2851c8885..2097d21faf07 100644 --- a/ui/components/app/name/name.tsx +++ b/ui/components/app/name/name.tsx @@ -38,6 +38,12 @@ export type NameProps = { /** The raw value to display the name of. */ value: string; + + /** + * The variation of the value. + * Such as the chain ID if the `type` is an Ethereum address. + */ + variation: string; }; function formatValue(value: string, type: NameType): string { @@ -61,15 +67,17 @@ const Name = memo( disableEdit, internal, preferContractSymbol = false, + variation, }: NameProps) => { const [modalOpen, setModalOpen] = useState(false); const trackEvent = useContext(MetaMetricsContext); - const { name, hasPetname, image } = useDisplayName( + const { name, hasPetname, image } = useDisplayName({ value, type, preferContractSymbol, - ); + variation, + }); useEffect(() => { if (internal) { @@ -100,7 +108,12 @@ const Name = memo( return ( {!disableEdit && modalOpen && ( - + )}

@@ -332,6 +332,7 @@ export default class TransactionListItemDetails extends PureComponent { recipientMetadataName={recipientMetadataName} senderName={senderNickname} senderAddress={senderAddress} + chainId={chainId} onRecipientClick={() => { this.context.trackEvent({ category: MetaMetricsEventCategory.Navigation, diff --git a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js index cfee21b08452..c4deb1e1d8ee 100644 --- a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js +++ b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js @@ -109,6 +109,7 @@ export function RecipientWithAddress({ recipientName, recipientMetadataName, recipientIsOwnedAccount, + chainId, }) { const t = useI18nContext(); const [showNicknamePopovers, setShowNicknamePopovers] = useState(false); @@ -169,6 +170,7 @@ export function RecipientWithAddress({ ) : (
) : (
@@ -292,4 +297,5 @@ SenderToRecipient.propTypes = { onSenderClick: PropTypes.func, warnUserOnAccountMismatch: PropTypes.bool, recipientIsOwnedAccount: PropTypes.bool, + chainId: PropTypes.string, }; diff --git a/ui/hooks/useDisplayName.test.ts b/ui/hooks/useDisplayName.test.ts index 1d6fb22b5e69..5c36b0a97ed2 100644 --- a/ui/hooks/useDisplayName.test.ts +++ b/ui/hooks/useDisplayName.test.ts @@ -1,218 +1,533 @@ -import { NameEntry, NameType } from '@metamask/name-controller'; -import { NftContract } from '@metamask/assets-controllers'; -import { renderHook } from '@testing-library/react-hooks'; -import { getRemoteTokens } from '../selectors'; -import { getNftContractsByAddressOnCurrentChain } from '../selectors/nft'; +import { NameType } from '@metamask/name-controller'; +import { CHAIN_IDS } from '@metamask/transaction-controller'; +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 { useDisplayName } from './useDisplayName'; -import { useNames } from './useName'; -import { useFirstPartyContractNames } from './useFirstPartyContractName'; import { useNftCollectionsMetadata } from './useNftCollectionsMetadata'; +import { useNames } from './useName'; -jest.mock('react-redux', () => ({ - // TODO: Replace `any` with type - // eslint-disable-next-line @typescript-eslint/no-explicit-any - useSelector: (selector: any) => selector(), -})); - -jest.mock('./useName', () => ({ - useNames: jest.fn(), -})); - -jest.mock('./useFirstPartyContractName', () => ({ - useFirstPartyContractNames: jest.fn(), -})); - -jest.mock('./useNftCollectionsMetadata', () => ({ - useNftCollectionsMetadata: jest.fn(), -})); - -jest.mock('../selectors', () => ({ - getRemoteTokens: jest.fn(), - getCurrentChainId: jest.fn(), -})); - -jest.mock('../selectors/nft', () => ({ - getNftContractsByAddressOnCurrentChain: jest.fn(), -})); - -const VALUE_MOCK = '0xabc123'; -const TYPE_MOCK = NameType.ETHEREUM_ADDRESS; -const NAME_MOCK = 'TestName'; -const CONTRACT_NAME_MOCK = 'TestContractName'; -const FIRST_PARTY_CONTRACT_NAME_MOCK = 'MetaMask Bridge'; -const WATCHED_NFT_NAME_MOCK = 'TestWatchedNFTName'; - -const NO_PETNAME_FOUND_RETURN_VALUE = { - name: null, -} as NameEntry; -const NO_CONTRACT_NAME_FOUND_RETURN_VALUE = undefined; -const NO_FIRST_PARTY_CONTRACT_NAME_FOUND_RETURN_VALUE = null; -const NO_WATCHED_NFT_NAME_FOUND_RETURN_VALUE = {}; - -const PETNAME_FOUND_RETURN_VALUE = { - name: NAME_MOCK, -} as NameEntry; - -const WATCHED_NFT_FOUND_RETURN_VALUE = { - [VALUE_MOCK]: { - name: WATCHED_NFT_NAME_MOCK, - } as NftContract, -}; +jest.mock('./useName'); +jest.mock('./useNftCollectionsMetadata'); + +const VALUE_MOCK = 'testvalue'; +const VARIATION_MOCK = CHAIN_IDS.GOERLI; +const PETNAME_MOCK = 'testName1'; +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 SYMBOL_MOCK = 'tes'; +const NFT_IMAGE_MOCK = 'testNftImage'; +const ERC20_IMAGE_MOCK = 'testImage'; +const OTHER_NAME_TYPE = 'test' as NameType; describe('useDisplayName', () => { const useNamesMock = jest.mocked(useNames); - const getRemoteTokensMock = jest.mocked(getRemoteTokens); - const useFirstPartyContractNamesMock = jest.mocked( - useFirstPartyContractNames, - ); - const getNftContractsByAddressOnCurrentChainMock = jest.mocked( - getNftContractsByAddressOnCurrentChain, - ); const useNftCollectionsMetadataMock = jest.mocked(useNftCollectionsMetadata); - beforeEach(() => { - jest.resetAllMocks(); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + let state: any; - useNamesMock.mockReturnValue([NO_PETNAME_FOUND_RETURN_VALUE]); - useFirstPartyContractNamesMock.mockReturnValue([ - NO_FIRST_PARTY_CONTRACT_NAME_FOUND_RETURN_VALUE, - ]); - getRemoteTokensMock.mockReturnValue([ + function mockPetname(name: string) { + useNamesMock.mockReturnValue([ { - name: NO_CONTRACT_NAME_FOUND_RETURN_VALUE, + name, + sourceId: null, + proposedNames: {}, + origin: null, }, ]); - getNftContractsByAddressOnCurrentChainMock.mockReturnValue( - NO_WATCHED_NFT_NAME_FOUND_RETURN_VALUE, - ); - useNftCollectionsMetadataMock.mockReturnValue({}); - }); + } + + function mockERC20Token( + value: string, + variation: string, + name: string, + symbol: string, + image: string, + ) { + state.metamask.tokensChainsCache = { + [variation]: { + data: { + [value]: { + name, + symbol, + iconUrl: image, + }, + }, + }, + }; + } - it('handles no name found', () => { - const { result } = renderHook(() => useDisplayName(VALUE_MOCK, TYPE_MOCK)); - expect(result.current).toEqual({ - name: null, - hasPetname: false, + function mockWatchedNFTName(value: string, variation: string, name: string) { + state.metamask.allNftContracts = { + '0x123': { + [variation]: [{ address: value, name }], + }, + }; + } + + function mockNFT( + value: string, + variation: string, + name: string, + image: string, + isSpam: boolean, + ) { + useNftCollectionsMetadataMock.mockReturnValue({ + [variation]: { + [value]: { name, image, isSpam }, + }, }); - }); + } + + function mockFirstPartyContractName( + value: string, + variation: string, + name: string, + ) { + FIRST_PARTY_CONTRACT_NAMES[name as EXPERIENCES_TYPE] = { + [variation as Hex]: value as Hex, + }; + } - it('prioritizes a petname over all else', () => { - useNamesMock.mockReturnValue([PETNAME_FOUND_RETURN_VALUE]); - useFirstPartyContractNamesMock.mockReturnValue([ - FIRST_PARTY_CONTRACT_NAME_MOCK, - ]); - getRemoteTokensMock.mockReturnValue([ + beforeEach(() => { + jest.resetAllMocks(); + + useNftCollectionsMetadataMock.mockReturnValue({}); + + useNamesMock.mockReturnValue([ { - name: CONTRACT_NAME_MOCK, + name: null, + sourceId: null, + proposedNames: {}, + origin: null, }, ]); - getNftContractsByAddressOnCurrentChainMock.mockReturnValue( - WATCHED_NFT_FOUND_RETURN_VALUE, - ); - const { result } = renderHook(() => useDisplayName(VALUE_MOCK, TYPE_MOCK)); + state = cloneDeep(mockState); - expect(result.current).toEqual({ - name: NAME_MOCK, - hasPetname: true, - contractDisplayName: CONTRACT_NAME_MOCK, - }); + delete FIRST_PARTY_CONTRACT_NAMES[ + FIRST_PARTY_CONTRACT_NAME_MOCK as EXPERIENCES_TYPE + ]; }); - it('prioritizes a first-party contract name over a contract name and watched NFT name', () => { - useFirstPartyContractNamesMock.mockReturnValue([ - FIRST_PARTY_CONTRACT_NAME_MOCK, - ]); - getRemoteTokensMock.mockReturnValue({ - name: CONTRACT_NAME_MOCK, - }); - getNftContractsByAddressOnCurrentChainMock.mockReturnValue( - WATCHED_NFT_FOUND_RETURN_VALUE, + it('returns no name if no defaults found', () => { + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: NameType.ETHEREUM_ADDRESS, + variation: VARIATION_MOCK, + }), + mockState, ); - const { result } = renderHook(() => useDisplayName(VALUE_MOCK, TYPE_MOCK)); - - expect(result.current).toEqual({ - name: FIRST_PARTY_CONTRACT_NAME_MOCK, + expect(result.current).toStrictEqual({ + contractDisplayName: undefined, hasPetname: false, + image: undefined, + name: null, }); }); - it('prioritizes a contract name over a watched NFT name', () => { - getRemoteTokensMock.mockReturnValue([ - { - name: CONTRACT_NAME_MOCK, - }, - ]); - getNftContractsByAddressOnCurrentChainMock.mockReturnValue( - WATCHED_NFT_FOUND_RETURN_VALUE, - ); + describe('Petname', () => { + it('returns petname', () => { + mockPetname(PETNAME_MOCK); + + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: NameType.ETHEREUM_ADDRESS, + variation: VARIATION_MOCK, + }), + state, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: undefined, + hasPetname: true, + image: undefined, + name: PETNAME_MOCK, + }); + }); + }); - const { result } = renderHook(() => useDisplayName(VALUE_MOCK, TYPE_MOCK)); + describe('ERC-20 Token', () => { + it('returns ERC-20 token name and image', () => { + mockERC20Token( + VALUE_MOCK, + VARIATION_MOCK, + ERC20_TOKEN_NAME_MOCK, + SYMBOL_MOCK, + ERC20_IMAGE_MOCK, + ); + + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: NameType.ETHEREUM_ADDRESS, + variation: VARIATION_MOCK, + }), + state, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: ERC20_TOKEN_NAME_MOCK, + hasPetname: false, + image: ERC20_IMAGE_MOCK, + name: ERC20_TOKEN_NAME_MOCK, + }); + }); - expect(result.current).toEqual({ - name: CONTRACT_NAME_MOCK, - hasPetname: false, - contractDisplayName: CONTRACT_NAME_MOCK, + it('returns ERC-20 token symbol', () => { + mockERC20Token( + VALUE_MOCK, + VARIATION_MOCK, + ERC20_TOKEN_NAME_MOCK, + SYMBOL_MOCK, + ERC20_IMAGE_MOCK, + ); + + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: NameType.ETHEREUM_ADDRESS, + variation: CHAIN_IDS.GOERLI, + preferContractSymbol: true, + }), + state, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: SYMBOL_MOCK, + hasPetname: false, + image: ERC20_IMAGE_MOCK, + name: SYMBOL_MOCK, + }); }); - }); - it('returns a watched NFT name if no other name is found', () => { - getNftContractsByAddressOnCurrentChainMock.mockReturnValue( - WATCHED_NFT_FOUND_RETURN_VALUE, - ); + it('returns no name if type not address', () => { + mockERC20Token( + VALUE_MOCK, + VARIATION_MOCK, + ERC20_TOKEN_NAME_MOCK, + SYMBOL_MOCK, + ERC20_IMAGE_MOCK, + ); + + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: OTHER_NAME_TYPE, + variation: CHAIN_IDS.GOERLI, + preferContractSymbol: true, + }), + state, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: undefined, + hasPetname: false, + image: undefined, + name: null, + }); + }); + }); - const { result } = renderHook(() => useDisplayName(VALUE_MOCK, TYPE_MOCK)); + describe('First-party Contract', () => { + it('returns first-party contract name', () => { + mockFirstPartyContractName( + VALUE_MOCK, + VARIATION_MOCK, + FIRST_PARTY_CONTRACT_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: FIRST_PARTY_CONTRACT_NAME_MOCK, + }); + }); - expect(result.current).toEqual({ - name: WATCHED_NFT_NAME_MOCK, - hasPetname: false, + it('returns no name if type is not address', () => { + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: + FIRST_PARTY_CONTRACT_NAMES[EXPERIENCES_TYPE.METAMASK_BRIDGE][ + CHAIN_IDS.OPTIMISM + ], + type: OTHER_NAME_TYPE, + variation: CHAIN_IDS.OPTIMISM, + }), + mockState, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: undefined, + hasPetname: false, + image: undefined, + name: null, + }); }); }); - it('returns nft collection name from metadata if no other name is found', () => { - const IMAGE_MOCK = 'url'; + describe('Watched NFT', () => { + it('returns watched NFT name', () => { + mockWatchedNFTName(VALUE_MOCK, VARIATION_MOCK, WATCHED_NFT_NAME_MOCK); + + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: NameType.ETHEREUM_ADDRESS, + variation: VARIATION_MOCK, + }), + state, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: undefined, + hasPetname: false, + image: undefined, + name: WATCHED_NFT_NAME_MOCK, + }); + }); - useNftCollectionsMetadataMock.mockReturnValue({ - [VALUE_MOCK.toLowerCase()]: { - name: CONTRACT_NAME_MOCK, - image: IMAGE_MOCK, - isSpam: false, - }, + it('returns no name if type is not address', () => { + mockWatchedNFTName(VALUE_MOCK, VARIATION_MOCK, WATCHED_NFT_NAME_MOCK); + + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: OTHER_NAME_TYPE, + variation: VARIATION_MOCK, + }), + state, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: undefined, + hasPetname: false, + image: undefined, + name: null, + }); + }); + }); + + describe('NFT', () => { + it('returns NFT name and image', () => { + mockNFT(VALUE_MOCK, VARIATION_MOCK, NFT_NAME_MOCK, NFT_IMAGE_MOCK, false); + + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: NameType.ETHEREUM_ADDRESS, + variation: VARIATION_MOCK, + }), + mockState, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: undefined, + hasPetname: false, + image: NFT_IMAGE_MOCK, + name: NFT_NAME_MOCK, + }); }); - const { result } = renderHook(() => - useDisplayName(VALUE_MOCK, TYPE_MOCK, false), - ); + it('returns no name if NFT collection is spam', () => { + mockNFT(VALUE_MOCK, VARIATION_MOCK, NFT_NAME_MOCK, NFT_IMAGE_MOCK, true); + + 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: null, + }); + }); - expect(result.current).toEqual({ - name: CONTRACT_NAME_MOCK, - hasPetname: false, - contractDisplayName: undefined, - image: IMAGE_MOCK, + it('returns no name if type not address', () => { + mockNFT(VALUE_MOCK, VARIATION_MOCK, NFT_NAME_MOCK, NFT_IMAGE_MOCK, false); + + 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, + }); }); }); - it('does not return nft collection name if collection is marked as spam', () => { - const IMAGE_MOCK = 'url'; + describe('Priority', () => { + it('uses petname as first priority', () => { + mockPetname(PETNAME_MOCK); + mockFirstPartyContractName( + VALUE_MOCK, + VARIATION_MOCK, + FIRST_PARTY_CONTRACT_NAME_MOCK, + ); + mockNFT(VALUE_MOCK, VARIATION_MOCK, NFT_NAME_MOCK, NFT_IMAGE_MOCK, false); + mockERC20Token( + VALUE_MOCK, + VARIATION_MOCK, + ERC20_TOKEN_NAME_MOCK, + SYMBOL_MOCK, + ERC20_IMAGE_MOCK, + ); + mockWatchedNFTName(VALUE_MOCK, VARIATION_MOCK, WATCHED_NFT_NAME_MOCK); + + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: NameType.ETHEREUM_ADDRESS, + variation: VARIATION_MOCK, + }), + state, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: ERC20_TOKEN_NAME_MOCK, + hasPetname: true, + image: NFT_IMAGE_MOCK, + name: PETNAME_MOCK, + }); + }); - useNftCollectionsMetadataMock.mockReturnValue({ - [VALUE_MOCK.toLowerCase()]: { - name: CONTRACT_NAME_MOCK, - image: IMAGE_MOCK, - isSpam: true, - }, + it('uses first-party contract name as second priority', () => { + mockFirstPartyContractName( + VALUE_MOCK, + VARIATION_MOCK, + FIRST_PARTY_CONTRACT_NAME_MOCK, + ); + mockNFT(VALUE_MOCK, VARIATION_MOCK, NFT_NAME_MOCK, NFT_IMAGE_MOCK, false); + mockERC20Token( + VALUE_MOCK, + VARIATION_MOCK, + ERC20_TOKEN_NAME_MOCK, + SYMBOL_MOCK, + ERC20_IMAGE_MOCK, + ); + mockWatchedNFTName(VALUE_MOCK, VARIATION_MOCK, WATCHED_NFT_NAME_MOCK); + + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: NameType.ETHEREUM_ADDRESS, + variation: VARIATION_MOCK, + }), + state, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: ERC20_TOKEN_NAME_MOCK, + hasPetname: false, + image: NFT_IMAGE_MOCK, + name: FIRST_PARTY_CONTRACT_NAME_MOCK, + }); }); - const { result } = renderHook(() => - useDisplayName(VALUE_MOCK, TYPE_MOCK, false), - ); + it('uses NFT name as third priority', () => { + mockNFT(VALUE_MOCK, VARIATION_MOCK, NFT_NAME_MOCK, NFT_IMAGE_MOCK, false); + mockERC20Token( + VALUE_MOCK, + VARIATION_MOCK, + ERC20_TOKEN_NAME_MOCK, + SYMBOL_MOCK, + ERC20_IMAGE_MOCK, + ); + mockWatchedNFTName(VALUE_MOCK, VARIATION_MOCK, WATCHED_NFT_NAME_MOCK); + + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: NameType.ETHEREUM_ADDRESS, + variation: VARIATION_MOCK, + }), + state, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: ERC20_TOKEN_NAME_MOCK, + hasPetname: false, + image: NFT_IMAGE_MOCK, + name: NFT_NAME_MOCK, + }); + }); - expect(result.current).toEqual( - expect.objectContaining({ - name: null, - image: undefined, - }), - ); + it('uses ERC-20 token name as fourth priority', () => { + mockERC20Token( + VALUE_MOCK, + VARIATION_MOCK, + ERC20_TOKEN_NAME_MOCK, + SYMBOL_MOCK, + ERC20_IMAGE_MOCK, + ); + mockWatchedNFTName(VALUE_MOCK, VARIATION_MOCK, WATCHED_NFT_NAME_MOCK); + + const { result } = renderHookWithProvider( + () => + useDisplayName({ + value: VALUE_MOCK, + type: NameType.ETHEREUM_ADDRESS, + variation: VARIATION_MOCK, + }), + state, + ); + + expect(result.current).toStrictEqual({ + contractDisplayName: ERC20_TOKEN_NAME_MOCK, + hasPetname: false, + image: ERC20_IMAGE_MOCK, + name: ERC20_TOKEN_NAME_MOCK, + }); + }); }); }); diff --git a/ui/hooks/useDisplayName.ts b/ui/hooks/useDisplayName.ts index 64a878d2e357..7b7429c7a0d4 100644 --- a/ui/hooks/useDisplayName.ts +++ b/ui/hooks/useDisplayName.ts @@ -1,16 +1,20 @@ -import { useMemo } from 'react'; import { NameType } from '@metamask/name-controller'; import { useSelector } from 'react-redux'; -import { getRemoteTokens } from '../selectors'; -import { getNftContractsByAddressOnCurrentChain } from '../selectors/nft'; +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 { useNames } from './useName'; -import { useFirstPartyContractNames } from './useFirstPartyContractName'; import { useNftCollectionsMetadata } from './useNftCollectionsMetadata'; export type UseDisplayNameRequest = { - value: string; preferContractSymbol?: boolean; type: NameType; + value: string; + variation: string; }; export type UseDisplayNameResponse = { @@ -23,79 +27,145 @@ export type UseDisplayNameResponse = { export function useDisplayNames( requests: UseDisplayNameRequest[], ): UseDisplayNameResponse[] { - const nameRequests = useMemo( - () => requests.map(({ value, type }) => ({ value, type })), - [requests], - ); - - const nameEntries = useNames(nameRequests); - const firstPartyContractNames = useFirstPartyContractNames(nameRequests); - const nftCollections = useNftCollectionsMetadata(nameRequests); - const values = requests.map(({ value }) => value); - - const contractInfo = useSelector((state) => - // TODO: Replace `any` with type - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (getRemoteTokens as any)(state, values), - ); + const nameEntries = useNames(requests); + const firstPartyContractNames = useFirstPartyContractNames(requests); + const erc20Tokens = useERC20Tokens(requests); + const watchedNFTNames = useWatchedNFTNames(requests); + const nfts = useNFTs(requests); - const watchedNftNames = useSelector(getNftContractsByAddressOnCurrentChain); - - return requests.map(({ value, preferContractSymbol }, index) => { + return requests.map((_request, index) => { const nameEntry = nameEntries[index]; const firstPartyContractName = firstPartyContractNames[index]; - const singleContractInfo = contractInfo[index]; - const watchedNftName = watchedNftNames[value.toLowerCase()]?.name; - const nftCollectionProperties = nftCollections[value.toLowerCase()]; - - const isNotSpam = nftCollectionProperties?.isSpam === false; - - const nftCollectionName = isNotSpam - ? nftCollectionProperties?.name - : undefined; - const nftCollectionImage = isNotSpam - ? nftCollectionProperties?.image - : undefined; - - const contractDisplayName = - preferContractSymbol && singleContractInfo?.symbol - ? singleContractInfo.symbol - : singleContractInfo?.name; + const erc20Token = erc20Tokens[index]; + const watchedNftName = watchedNFTNames[index]; + const nft = nfts[index]; const name = nameEntry?.name || firstPartyContractName || - nftCollectionName || - contractDisplayName || + nft?.name || + erc20Token?.name || watchedNftName || null; + const image = nft?.image || erc20Token?.image; + const hasPetname = Boolean(nameEntry?.name); return { name, hasPetname, - contractDisplayName, - image: nftCollectionImage, + contractDisplayName: erc20Token?.name, + image, }; }); } -/** - * Attempts to resolve the name for the given parameters. - * - * @param value - The address or contract address to resolve. - * @param type - The type of value, e.g. NameType.ETHEREUM_ADDRESS. - * @param preferContractSymbol - Applies to recognized contracts when no petname is saved: - * If true the contract symbol (e.g. WBTC) will be used instead of the contract name. - * @returns An object with two properties: - * - `name` {string|null} - The display name, if it can be resolved, otherwise null. - * - `hasPetname` {boolean} - True if there is a petname for the given address. - */ export function useDisplayName( - value: string, - type: NameType, - preferContractSymbol: boolean = false, + request: UseDisplayNameRequest, ): UseDisplayNameResponse { - return useDisplayNames([{ preferContractSymbol, type, value }])[0]; + return useDisplayNames([request])[0]; +} + +function useERC20Tokens( + nameRequests: UseDisplayNameRequest[], +): ({ name?: string; image?: string } | undefined)[] { + const erc20TokensByChain = useSelector(selectERC20TokensByChain); + + return nameRequests.map( + ({ preferContractSymbol, type, value, variation }) => { + if (type !== NameType.ETHEREUM_ADDRESS) { + return undefined; + } + + const contractAddress = value.toLowerCase(); + + const { + iconUrl: image, + name: tokenName, + symbol, + } = erc20TokensByChain?.[variation]?.data?.[contractAddress] ?? {}; + + const name = preferContractSymbol && symbol ? symbol : tokenName; + + return { name, image }; + }, + ); +} + +function useWatchedNFTNames( + nameRequests: UseDisplayNameRequest[], +): (string | undefined)[] { + const watchedNftNamesByAddressByChain = useSelector( + getNftContractsByAddressByChain, + ); + + return nameRequests.map(({ type, value, variation }) => { + if (type !== NameType.ETHEREUM_ADDRESS) { + return undefined; + } + + const contractAddress = value.toLowerCase(); + const watchedNftNamesByAddress = watchedNftNamesByAddressByChain[variation]; + return watchedNftNamesByAddress?.[contractAddress]?.name; + }); +} + +function useNFTs( + nameRequests: UseDisplayNameRequest[], +): ({ name?: string; image?: string } | undefined)[] { + const requests = nameRequests + .filter(({ type }) => type === NameType.ETHEREUM_ADDRESS) + .map(({ value, variation }) => ({ + chainId: variation, + contractAddress: value, + })); + + const nftCollectionsByAddressByChain = useNftCollectionsMetadata(requests); + + return nameRequests.map( + ({ type, value: contractAddress, variation: chainId }) => { + if (type !== NameType.ETHEREUM_ADDRESS) { + return undefined; + } + + const nftCollectionProperties = + nftCollectionsByAddressByChain[chainId]?.[ + contractAddress.toLowerCase() + ]; + + const isSpam = nftCollectionProperties?.isSpam !== false; + + if (!nftCollectionProperties || isSpam) { + return undefined; + } + + const { name, image } = nftCollectionProperties; + + return { name, image }; + }, + ); +} + +function useFirstPartyContractNames(nameRequests: UseDisplayNameRequest[]) { + return nameRequests.map(({ type, value, variation }) => { + if (type !== NameType.ETHEREUM_ADDRESS) { + return undefined; + } + + const normalizedContractAddress = value.toLowerCase(); + + const contractNames = Object.keys( + FIRST_PARTY_CONTRACT_NAMES, + ) as EXPERIENCES_TYPE[]; + + return contractNames.find((contractName) => { + const currentContractAddress = + FIRST_PARTY_CONTRACT_NAMES[contractName]?.[variation as Hex]; + + return ( + currentContractAddress?.toLowerCase() === normalizedContractAddress + ); + }); + }); } diff --git a/ui/hooks/useFirstPartyContractName.test.ts b/ui/hooks/useFirstPartyContractName.test.ts deleted file mode 100644 index 14d0cd429e6f..000000000000 --- a/ui/hooks/useFirstPartyContractName.test.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { NameType } from '@metamask/name-controller'; -import { getCurrentChainId } from '../selectors'; -import { CHAIN_IDS } from '../../shared/constants/network'; -import { useFirstPartyContractName } from './useFirstPartyContractName'; - -jest.mock('react-redux', () => ({ - // TODO: Replace `any` with type - // eslint-disable-next-line @typescript-eslint/no-explicit-any - useSelector: (selector: any) => selector(), -})); - -jest.mock('../selectors', () => ({ - getCurrentChainId: jest.fn(), - getNames: jest.fn(), -})); - -const BRIDGE_NAME_MOCK = 'MetaMask Bridge'; -const BRIDGE_MAINNET_ADDRESS_MOCK = - '0x0439e60F02a8900a951603950d8D4527f400C3f1'; -const BRIDGE_OPTIMISM_ADDRESS_MOCK = - '0xB90357f2b86dbfD59c3502215d4060f71DF8ca0e'; -const UNKNOWN_ADDRESS_MOCK = '0xabc123'; - -describe('useFirstPartyContractName', () => { - const getCurrentChainIdMock = jest.mocked(getCurrentChainId); - beforeEach(() => { - jest.resetAllMocks(); - - getCurrentChainIdMock.mockReturnValue(CHAIN_IDS.MAINNET); - }); - - it('returns null if no name found', () => { - const name = useFirstPartyContractName( - UNKNOWN_ADDRESS_MOCK, - NameType.ETHEREUM_ADDRESS, - ); - - expect(name).toBe(null); - }); - - it('returns name if found', () => { - const name = useFirstPartyContractName( - BRIDGE_MAINNET_ADDRESS_MOCK, - NameType.ETHEREUM_ADDRESS, - ); - expect(name).toBe(BRIDGE_NAME_MOCK); - }); - - it('uses variation if specified', () => { - const name = useFirstPartyContractName( - BRIDGE_OPTIMISM_ADDRESS_MOCK, - NameType.ETHEREUM_ADDRESS, - CHAIN_IDS.OPTIMISM, - ); - - expect(name).toBe(BRIDGE_NAME_MOCK); - }); - - it('returns null if type is not address', () => { - const alternateType = 'alternateType' as NameType; - - const name = useFirstPartyContractName( - BRIDGE_MAINNET_ADDRESS_MOCK, - alternateType, - ); - - expect(name).toBe(null); - }); - - it('normalizes addresses to lowercase', () => { - const name = useFirstPartyContractName( - BRIDGE_MAINNET_ADDRESS_MOCK.toUpperCase(), - NameType.ETHEREUM_ADDRESS, - ); - - expect(name).toBe(BRIDGE_NAME_MOCK); - }); -}); diff --git a/ui/hooks/useFirstPartyContractName.ts b/ui/hooks/useFirstPartyContractName.ts deleted file mode 100644 index 47468b472955..000000000000 --- a/ui/hooks/useFirstPartyContractName.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { NameType } from '@metamask/name-controller'; -import { useSelector } from 'react-redux'; -import { getCurrentChainId } from '../selectors'; -import { - EXPERIENCES_TYPE, - FIRST_PARTY_CONTRACT_NAMES, -} from '../../shared/constants/first-party-contracts'; - -export type UseFirstPartyContractNameRequest = { - value: string; - type: NameType; - variation?: string; -}; - -export function useFirstPartyContractNames( - requests: UseFirstPartyContractNameRequest[], -): (string | null)[] { - const currentChainId = useSelector(getCurrentChainId); - - return requests.map(({ type, value, variation }) => { - if (type !== NameType.ETHEREUM_ADDRESS) { - return null; - } - - const chainId = variation ?? currentChainId; - const normalizedValue = value.toLowerCase(); - - return ( - Object.keys(FIRST_PARTY_CONTRACT_NAMES).find( - (name) => - FIRST_PARTY_CONTRACT_NAMES[name as EXPERIENCES_TYPE]?.[ - chainId - ]?.toLowerCase() === normalizedValue, - ) ?? null - ); - }); -} - -export function useFirstPartyContractName( - value: string, - type: NameType, - variation?: string, -): string | null { - return useFirstPartyContractNames([{ value, type, variation }])[0]; -} diff --git a/ui/hooks/useName.test.ts b/ui/hooks/useName.test.ts index 76bd5dc593ad..f746c4bb6267 100644 --- a/ui/hooks/useName.test.ts +++ b/ui/hooks/useName.test.ts @@ -5,7 +5,7 @@ import { NameOrigin, NameType, } from '@metamask/name-controller'; -import { getCurrentChainId, getNames } from '../selectors'; +import { getNames } from '../selectors'; import { useName } from './useName'; jest.mock('react-redux', () => ({ @@ -19,13 +19,14 @@ jest.mock('../selectors', () => ({ getNames: jest.fn(), })); -const CHAIN_ID_MOCK = '0x1'; -const CHAIN_ID_2_MOCK = '0x2'; +const VARIATION_MOCK = '0x1'; +const VARIATION_2_MOCK = '0x2'; const VALUE_MOCK = '0xabc123'; const TYPE_MOCK = NameType.ETHEREUM_ADDRESS; const NAME_MOCK = 'TestName'; const SOURCE_ID_MOCK = 'TestSourceId'; const ORIGIN_MOCK = NameOrigin.API; + const PROPOSED_NAMES_MOCK = { [SOURCE_ID_MOCK]: { proposedNames: ['TestProposedName', 'TestProposedName2'], @@ -35,7 +36,6 @@ const PROPOSED_NAMES_MOCK = { }; describe('useName', () => { - const getCurrentChainIdMock = jest.mocked(getCurrentChainId); const getNamesMock = // TODO: Replace `any` with type // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -43,14 +43,12 @@ describe('useName', () => { beforeEach(() => { jest.resetAllMocks(); - - getCurrentChainIdMock.mockReturnValue(CHAIN_ID_MOCK); }); it('returns default values if no state', () => { getNamesMock.mockReturnValue({} as NameControllerState['names']); - const nameEntry = useName(VALUE_MOCK, TYPE_MOCK); + const nameEntry = useName(VALUE_MOCK, TYPE_MOCK, VARIATION_MOCK); expect(nameEntry).toStrictEqual({ name: null, @@ -64,7 +62,7 @@ describe('useName', () => { getNamesMock.mockReturnValue({ [TYPE_MOCK]: { [VALUE_MOCK]: { - [CHAIN_ID_2_MOCK]: { + [VARIATION_2_MOCK]: { name: NAME_MOCK, proposedNames: PROPOSED_NAMES_MOCK, sourceId: SOURCE_ID_MOCK, @@ -74,7 +72,7 @@ describe('useName', () => { }, }); - const nameEntry = useName(VALUE_MOCK, TYPE_MOCK); + const nameEntry = useName(VALUE_MOCK, TYPE_MOCK, VARIATION_MOCK); expect(nameEntry).toStrictEqual({ name: null, @@ -88,7 +86,7 @@ describe('useName', () => { getNamesMock.mockReturnValue({ [TYPE_MOCK]: { [VALUE_MOCK]: { - [CHAIN_ID_MOCK]: { + [VARIATION_MOCK]: { name: NAME_MOCK, proposedNames: PROPOSED_NAMES_MOCK, sourceId: SOURCE_ID_MOCK, @@ -98,7 +96,7 @@ describe('useName', () => { }, }); - const nameEntry = useName(VALUE_MOCK, TYPE_MOCK); + const nameEntry = useName(VALUE_MOCK, TYPE_MOCK, VARIATION_MOCK); expect(nameEntry).toStrictEqual({ name: NAME_MOCK, @@ -112,7 +110,7 @@ describe('useName', () => { getNamesMock.mockReturnValue({ [TYPE_MOCK]: { [VALUE_MOCK]: { - [CHAIN_ID_2_MOCK]: { + [VARIATION_2_MOCK]: { name: NAME_MOCK, proposedNames: PROPOSED_NAMES_MOCK, sourceId: SOURCE_ID_MOCK, @@ -122,7 +120,7 @@ describe('useName', () => { }, }); - const nameEntry = useName(VALUE_MOCK, TYPE_MOCK, CHAIN_ID_2_MOCK); + const nameEntry = useName(VALUE_MOCK, TYPE_MOCK, VARIATION_2_MOCK); expect(nameEntry).toStrictEqual({ name: NAME_MOCK, @@ -147,7 +145,7 @@ describe('useName', () => { }, }); - const nameEntry = useName(VALUE_MOCK, TYPE_MOCK, CHAIN_ID_2_MOCK); + const nameEntry = useName(VALUE_MOCK, TYPE_MOCK, VARIATION_2_MOCK); expect(nameEntry).toStrictEqual({ name: NAME_MOCK, @@ -161,7 +159,7 @@ describe('useName', () => { getNamesMock.mockReturnValue({ [TYPE_MOCK]: { [VALUE_MOCK]: { - [CHAIN_ID_2_MOCK]: { + [VARIATION_2_MOCK]: { name: null, proposedNames: PROPOSED_NAMES_MOCK, sourceId: null, @@ -177,7 +175,7 @@ describe('useName', () => { }, }); - const nameEntry = useName(VALUE_MOCK, TYPE_MOCK, CHAIN_ID_2_MOCK); + const nameEntry = useName(VALUE_MOCK, TYPE_MOCK, VARIATION_2_MOCK); expect(nameEntry).toStrictEqual({ name: NAME_MOCK, @@ -188,37 +186,11 @@ describe('useName', () => { }); }); - it('uses empty string as variation if not specified and type is not address', () => { - const alternateType = 'alternateType' as NameType; - - getNamesMock.mockReturnValue({ - [alternateType]: { - [VALUE_MOCK]: { - '': { - name: NAME_MOCK, - proposedNames: PROPOSED_NAMES_MOCK, - sourceId: SOURCE_ID_MOCK, - origin: ORIGIN_MOCK, - }, - }, - }, - }); - - const nameEntry = useName(VALUE_MOCK, alternateType); - - expect(nameEntry).toStrictEqual({ - name: NAME_MOCK, - sourceId: SOURCE_ID_MOCK, - proposedNames: PROPOSED_NAMES_MOCK, - origin: ORIGIN_MOCK, - }); - }); - it('normalizes addresses to lowercase', () => { getNamesMock.mockReturnValue({ [TYPE_MOCK]: { [VALUE_MOCK]: { - [CHAIN_ID_MOCK]: { + [VARIATION_MOCK]: { name: NAME_MOCK, proposedNames: PROPOSED_NAMES_MOCK, sourceId: SOURCE_ID_MOCK, @@ -228,7 +200,7 @@ describe('useName', () => { }, }); - const nameEntry = useName('0xAbC123', TYPE_MOCK); + const nameEntry = useName('0xAbC123', TYPE_MOCK, VARIATION_MOCK); expect(nameEntry).toStrictEqual({ name: NAME_MOCK, diff --git a/ui/hooks/useName.ts b/ui/hooks/useName.ts index 3af9b0457f79..dd587e81abf6 100644 --- a/ui/hooks/useName.ts +++ b/ui/hooks/useName.ts @@ -5,32 +5,29 @@ import { } from '@metamask/name-controller'; import { useSelector } from 'react-redux'; import { isEqual } from 'lodash'; -import { getCurrentChainId, getNames } from '../selectors'; +import { getNames } from '../selectors'; export type UseNameRequest = { value: string; type: NameType; - variation?: string; + variation: string; }; export function useName( value: string, type: NameType, - variation?: string, + variation: string, ): NameEntry { return useNames([{ value, type, variation }])[0]; } export function useNames(requests: UseNameRequest[]): NameEntry[] { const names = useSelector(getNames, isEqual); - const chainId = useSelector(getCurrentChainId); return requests.map(({ value, type, variation }) => { const normalizedValue = normalizeValue(value, type); - const typeVariationKey = getVariationKey(type, chainId); - const variationKey = variation ?? typeVariationKey; const variationsToNameEntries = names[type]?.[normalizedValue] ?? {}; - const variationEntry = variationsToNameEntries[variationKey]; + const variationEntry = variationsToNameEntries[variation]; const fallbackEntry = variationsToNameEntries[FALLBACK_VARIATION]; const entry = @@ -63,13 +60,3 @@ function normalizeValue(value: string, type: string): string { return value; } } - -function getVariationKey(type: string, chainId: string): string { - switch (type) { - case NameType.ETHEREUM_ADDRESS: - return chainId; - - default: - return ''; - } -} diff --git a/ui/hooks/useNftCollectionsMetadata.test.ts b/ui/hooks/useNftCollectionsMetadata.test.ts index 4897e449e6ad..e1e2b6745ad1 100644 --- a/ui/hooks/useNftCollectionsMetadata.test.ts +++ b/ui/hooks/useNftCollectionsMetadata.test.ts @@ -1,6 +1,5 @@ import { renderHook } from '@testing-library/react-hooks'; import { TokenStandard } from '../../shared/constants/transaction'; -import { getCurrentChainId } from '../selectors'; import { getNFTContractInfo, getTokenStandardAndDetails, @@ -42,7 +41,6 @@ const ERC_721_COLLECTION_2_MOCK = { }; describe('useNftCollectionsMetadata', () => { - const mockGetCurrentChainId = jest.mocked(getCurrentChainId); const mockGetNFTContractInfo = jest.mocked(getNFTContractInfo); const mockGetTokenStandardAndDetails = jest.mocked( getTokenStandardAndDetails, @@ -50,7 +48,6 @@ describe('useNftCollectionsMetadata', () => { beforeEach(() => { jest.resetAllMocks(); - mockGetCurrentChainId.mockReturnValue(CHAIN_ID_MOCK); mockGetNFTContractInfo.mockResolvedValue({ collections: [ERC_721_COLLECTION_1_MOCK, ERC_721_COLLECTION_2_MOCK], }); @@ -67,10 +64,12 @@ describe('useNftCollectionsMetadata', () => { const { result, waitForNextUpdate } = renderHook(() => useNftCollectionsMetadata([ { - value: ERC_721_ADDRESS_1, + chainId: CHAIN_ID_MOCK, + contractAddress: ERC_721_ADDRESS_1, }, { - value: ERC_721_ADDRESS_2, + chainId: CHAIN_ID_MOCK, + contractAddress: ERC_721_ADDRESS_2, }, ]), ); @@ -79,8 +78,10 @@ describe('useNftCollectionsMetadata', () => { expect(mockGetNFTContractInfo).toHaveBeenCalledTimes(1); expect(result.current).toStrictEqual({ - [ERC_721_ADDRESS_1.toLowerCase()]: ERC_721_COLLECTION_1_MOCK, - [ERC_721_ADDRESS_2.toLowerCase()]: ERC_721_COLLECTION_2_MOCK, + [CHAIN_ID_MOCK]: { + [ERC_721_ADDRESS_1.toLowerCase()]: ERC_721_COLLECTION_1_MOCK, + [ERC_721_ADDRESS_2.toLowerCase()]: ERC_721_COLLECTION_2_MOCK, + }, }); }); @@ -99,7 +100,8 @@ describe('useNftCollectionsMetadata', () => { renderHook(() => useNftCollectionsMetadata([ { - value: '0xERC20Address', + chainId: CHAIN_ID_MOCK, + contractAddress: '0xERC20Address', }, ]), ); @@ -114,7 +116,8 @@ describe('useNftCollectionsMetadata', () => { renderHook(() => useNftCollectionsMetadata([ { - value: '0xERC20Address', + chainId: CHAIN_ID_MOCK, + contractAddress: '0xERC20Address', }, ]), ); @@ -126,10 +129,12 @@ describe('useNftCollectionsMetadata', () => { const { waitForNextUpdate, rerender } = renderHook(() => useNftCollectionsMetadata([ { - value: ERC_721_ADDRESS_1, + chainId: CHAIN_ID_MOCK, + contractAddress: ERC_721_ADDRESS_1, }, { - value: ERC_721_ADDRESS_2, + chainId: CHAIN_ID_MOCK, + contractAddress: ERC_721_ADDRESS_2, }, ]), ); diff --git a/ui/hooks/useNftCollectionsMetadata.ts b/ui/hooks/useNftCollectionsMetadata.ts index 641e0fb25dcd..e71216e254c9 100644 --- a/ui/hooks/useNftCollectionsMetadata.ts +++ b/ui/hooks/useNftCollectionsMetadata.ts @@ -1,9 +1,5 @@ -import { useMemo } from 'react'; -import { useSelector } from 'react-redux'; import { Collection } from '@metamask/assets-controllers'; -import type { Hex } from '@metamask/utils'; import { TokenStandard } from '../../shared/constants/transaction'; -import { getCurrentChainId } from '../selectors'; import { getNFTContractInfo, getTokenStandardAndDetails, @@ -11,28 +7,62 @@ import { import { useAsyncResult } from './useAsyncResult'; export type UseNftCollectionsMetadataRequest = { - value: string; - chainId?: string; -}; - -type CollectionsData = { - [key: string]: Collection; + chainId: string; + contractAddress: string; }; // For now, we only support ERC721 tokens const SUPPORTED_NFT_TOKEN_STANDARDS = [TokenStandard.ERC721]; -async function fetchCollections( - memoisedContracts: string[], +export function useNftCollectionsMetadata( + requests: UseNftCollectionsMetadataRequest[], +): Record> { + const { value: collectionsMetadata } = useAsyncResult( + () => fetchCollections(requests), + [JSON.stringify(requests)], + ); + + return collectionsMetadata ?? {}; +} + +async function fetchCollections(requests: UseNftCollectionsMetadataRequest[]) { + const valuesByChainId = requests.reduce>( + (acc, { chainId, contractAddress }) => { + acc[chainId] = [...(acc[chainId] ?? []), contractAddress.toLowerCase()]; + return acc; + }, + {}, + ); + + const chainIds = Object.keys(valuesByChainId); + + const responses = await Promise.all( + chainIds.map((chainId) => { + const contractAddresses = valuesByChainId[chainId]; + return fetchCollectionsForChain(contractAddresses, chainId); + }), + ); + + return chainIds.reduce>>( + (acc, chainId, index) => { + acc[chainId] = responses[index]; + return acc; + }, + {}, + ); +} + +async function fetchCollectionsForChain( + contractAddresses: string[], chainId: string, -): Promise { +) { const contractStandardsResponses = await Promise.all( - memoisedContracts.map((contractAddress) => + contractAddresses.map((contractAddress) => getTokenStandardAndDetails(contractAddress, chainId), ), ); - const supportedNFTContracts = memoisedContracts.filter( + const supportedNFTContracts = contractAddresses.filter( (_contractAddress, index) => SUPPORTED_NFT_TOKEN_STANDARDS.includes( contractStandardsResponses[index].standard as TokenStandard, @@ -48,37 +78,16 @@ async function fetchCollections( chainId, ); - const collectionsData: CollectionsData = collectionsResult.collections.reduce( - (acc: CollectionsData, collection, index) => { - acc[supportedNFTContracts[index]] = { - name: collection?.name, - image: collection?.image, - isSpam: collection?.isSpam, - }; - return acc; - }, - {}, - ); + const collectionsData = collectionsResult.collections.reduce< + Record + >((acc, collection, index) => { + acc[supportedNFTContracts[index]] = { + name: collection?.name, + image: collection?.image, + isSpam: collection?.isSpam, + }; + return acc; + }, {}); return collectionsData; } - -export function useNftCollectionsMetadata( - requests: UseNftCollectionsMetadataRequest[], - providedChainId?: Hex, -) { - const chainId = useSelector(getCurrentChainId) || providedChainId; - - const memoisedContracts = useMemo(() => { - return requests - .filter(({ value }) => value) - .map(({ value }) => value.toLowerCase()); - }, [requests]); - - const { value: collectionsMetadata } = useAsyncResult( - () => fetchCollections(memoisedContracts, chainId), - [JSON.stringify(memoisedContracts), chainId], - ); - - return collectionsMetadata || {}; -} 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 d4a92172aed6..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 @@ -218,6 +218,7 @@ const ConfirmPageContainer = (props) => { recipientEns={toEns} recipientNickname={toNickname} recipientIsOwnedAccount={recipientIsOwnedAccount} + chainId={currentTransaction.chainId} /> )} diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.tsx b/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.tsx index cdcaf7267e06..13d455503db6 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.tsx +++ b/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.tsx @@ -45,6 +45,7 @@ const Spender = ({ } const spender = value.data[0].params[0].value; + const { chainId } = transactionMeta; if (getIsRevokeSetApprovalForAll(value)) { return null; @@ -59,7 +60,7 @@ const Spender = ({ )} data-testid="confirmation__approve-spender" > - + 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 bdbe0e6fbae3..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 @@ -50,6 +50,8 @@ export const ApproveStaticSimulation = () => { return null; } + const { chainId } = transactionMeta; + const formattedTokenText = ( { value={transactionMeta.txParams.to as string} type={NameType.ETHEREUM_ADDRESS} preferContractSymbol + variation={chainId} /> 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 38ff93ba9b36..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 @@ -16,6 +16,8 @@ export const RevokeStaticSimulation = () => { currentConfirmation: TransactionMeta; }; + const { chainId } = transactionMeta; + const TokenContractRow = ( @@ -24,6 +26,7 @@ export const RevokeStaticSimulation = () => { value={transactionMeta.txParams.to as string} type={NameType.ETHEREUM_ADDRESS} preferContractSymbol + variation={chainId} /> @@ -38,6 +41,7 @@ export const RevokeStaticSimulation = () => { value={transactionMeta.txParams.from as string} type={NameType.ETHEREUM_ADDRESS} preferContractSymbol + variation={chainId} /> 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 28b56c8de9ed..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 @@ -34,6 +34,7 @@ const PersonalSignInfo: React.FC = () => { const { from } = currentConfirmation.msgParams; const isSIWE = isSIWESignatureRequest(currentConfirmation); + const chainId = currentConfirmation.chainId as string; return ( <> @@ -62,7 +63,7 @@ const PersonalSignInfo: React.FC = () => { label={t('signingInWith')} ownerId={currentConfirmation.id} > - + )} 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 383bf182ac8c..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 @@ -50,7 +50,7 @@ const SIWESignInfo: React.FC = () => { - + diff --git a/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/revoke-set-approval-for-all-static-simulation/revoke-set-approval-for-all-static-simulation.tsx b/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/revoke-set-approval-for-all-static-simulation/revoke-set-approval-for-all-static-simulation.tsx index 64e90a7066e6..d1746ff85f08 100644 --- a/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/revoke-set-approval-for-all-static-simulation/revoke-set-approval-for-all-static-simulation.tsx +++ b/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/revoke-set-approval-for-all-static-simulation/revoke-set-approval-for-all-static-simulation.tsx @@ -22,6 +22,8 @@ export const RevokeSetApprovalForAllStaticSimulation = ({ const { currentConfirmation: transactionMeta } = useConfirmContext(); + const { chainId } = transactionMeta; + const nftsRow = ( @@ -30,6 +32,7 @@ export const RevokeSetApprovalForAllStaticSimulation = ({ value={transactionMeta.txParams.to as string} type={NameType.ETHEREUM_ADDRESS} preferContractSymbol + variation={chainId} /> @@ -44,6 +47,7 @@ export const RevokeSetApprovalForAllStaticSimulation = ({ value={spender} type={NameType.ETHEREUM_ADDRESS} preferContractSymbol + variation={chainId} /> diff --git a/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/set-approval-for-all-static-simulation/set-approval-for-all-static-simulation.tsx b/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/set-approval-for-all-static-simulation/set-approval-for-all-static-simulation.tsx index 177ef4080860..56a27d3397be 100644 --- a/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/set-approval-for-all-static-simulation/set-approval-for-all-static-simulation.tsx +++ b/ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/set-approval-for-all-static-simulation/set-approval-for-all-static-simulation.tsx @@ -24,6 +24,8 @@ export const SetApprovalForAllStaticSimulation = () => { currentConfirmation: TransactionMeta; }; + const { chainId } = transactionMeta; + const SetApprovalForAllRow = ( @@ -48,6 +50,7 @@ export const SetApprovalForAllStaticSimulation = () => { value={transactionMeta.txParams.to as string} type={NameType.ETHEREUM_ADDRESS} preferContractSymbol + variation={chainId} /> diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.tsx index 4af44b5a310d..374aec4f26ce 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.tsx @@ -57,6 +57,7 @@ export const TransactionData = () => { const { data, source } = value; const isExpandable = data.length > 1; + const { chainId } = currentConfirmation; return ( @@ -67,6 +68,7 @@ export const TransactionData = () => { method={method} source={source} isExpandable={isExpandable} + chainId={chainId} /> {index < data.length - 1 && } @@ -119,10 +121,12 @@ function FunctionContainer({ method, source, isExpandable, + chainId, }: { method: DecodedTransactionDataMethod; source?: DecodedTransactionDataSource; isExpandable: boolean; + chainId: string; }) { const t = useI18nContext(); @@ -134,6 +138,7 @@ function FunctionContainer({ param={param} index={paramIndex} source={source} + chainId={chainId} /> ))} @@ -172,18 +177,20 @@ function FunctionContainer({ function ParamValue({ param, source, + chainId, }: { param: DecodedTransactionDataParam; source?: DecodedTransactionDataSource; + chainId: string; }) { const { name, type, value } = param; if (type === 'address') { - return ; + return ; } if (name === 'path' && source === DecodedTransactionDataSource.Uniswap) { - return ; + return ; } let valueString = value.toString(); @@ -199,10 +206,12 @@ function ParamRow({ param, index, source, + chainId, }: { param: DecodedTransactionDataParam; index: number; source?: DecodedTransactionDataSource; + chainId: string; }) { const { name, type, description } = param; const label = name ? _.startCase(name) : `Param #${index + 1}`; @@ -215,20 +224,29 @@ function ParamRow({ param={childParam} index={childIndex} source={source} + chainId={chainId} /> )); return ( <> - {!childRows?.length && } + {!childRows?.length && ( + + )} {childRows && {childRows}} ); } -function UniswapPath({ pathPools }: { pathPools: UniswapPathPool[] }) { +function UniswapPath({ + pathPools, + chainId, +}: { + pathPools: UniswapPathPool[]; + chainId: string; +}) { return ( {pathPools.map((pool, index) => ( <> - {index === 0 && } + {index === 0 && ( + + )} - + ))} diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.tsx index 706729a8cc0a..89c2da783a4f 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.tsx @@ -56,13 +56,18 @@ export const RecipientRow = () => { return null; } + const { chainId } = currentConfirmation; + return ( - + ); }; @@ -115,7 +120,7 @@ const PaymasterRow = () => { const t = useI18nContext(); const { currentConfirmation } = useConfirmContext(); - const { id: userOperationId } = currentConfirmation ?? {}; + const { id: userOperationId, chainId } = currentConfirmation ?? {}; const isUserOperation = Boolean(currentConfirmation?.isUserOperation); // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -134,7 +139,7 @@ const PaymasterRow = () => { label={t('confirmFieldPaymaster')} tooltip={t('confirmFieldTooltipPaymaster')} > - + ); diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/token-details-section.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/token-details-section.tsx index 48a5f2dad74c..6d686873ea1c 100644 --- a/ui/pages/confirmations/components/confirm/info/token-transfer/token-details-section.tsx +++ b/ui/pages/confirmations/components/confirm/info/token-transfer/token-details-section.tsx @@ -63,7 +63,10 @@ export const TokenDetailsSection = () => { const tokenRow = ( - + ); 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 de0e928c10f8..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 @@ -34,6 +34,8 @@ export const TransactionFlowSection = () => { return ; } + const { chainId } = transactionMeta; + return ( { { color={IconColor.iconMuted} /> {recipientAddress && ( - + )} 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 35d8e3e6d672..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 @@ -23,6 +23,8 @@ const TypedSignV1Info: React.FC = () => { return null; } + const chainId = currentConfirmation.chainId as string; + return ( <> @@ -41,6 +43,7 @@ const TypedSignV1Info: React.FC = () => { diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx index 44131ec18fbf..855f7837ba42 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/permit-simulation.tsx @@ -42,6 +42,7 @@ const PermitSimulation: React.FC = () => { const t = useI18nContext(); const { currentConfirmation } = useConfirmContext(); const msgData = currentConfirmation.msgParams?.data; + const chainId = currentConfirmation.chainId as Hex; const { domain: { verifyingContract }, message, @@ -66,6 +67,7 @@ const PermitSimulation: React.FC = () => { primaryType={primaryType} tokenContract={token} value={amount} + chainId={chainId} /> ); @@ -94,6 +96,7 @@ const PermitSimulation: React.FC = () => { tokenContract={verifyingContract} value={message.value} tokenId={message.tokenId} + chainId={chainId} /> )} diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.test.tsx index e8e48c1ca6f9..453f4a1b6d79 100644 --- a/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/typed-sign/permit-simulation/value-display/value-display.test.tsx @@ -31,6 +31,7 @@ describe('PermitSimulationValueDisplay', () => { , mockStore, ); @@ -48,6 +49,7 @@ describe('PermitSimulationValueDisplay', () => { , mockStore, ); 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 e95edc03087b..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 @@ -32,6 +32,9 @@ import Name from '../../../../../../../../components/app/name/name'; import { TokenDetailsERC20 } from '../../../../../../utils/token'; type PermitSimulationValueDisplayParams = { + /** ID of the associated chain. */ + chainId: Hex; + /** The primaryType of the typed sign message */ primaryType?: string; @@ -51,7 +54,7 @@ type PermitSimulationValueDisplayParams = { const PermitSimulationValueDisplay: React.FC< PermitSimulationValueDisplayParams -> = ({ primaryType, tokenContract, value, tokenId }) => { +> = ({ chainId, primaryType, tokenContract, tokenId, value }) => { const exchangeRate = useTokenExchangeRate(tokenContract); const tokenDetails = useGetTokenStandardAndDetails(tokenContract); @@ -129,6 +132,7 @@ const PermitSimulationValueDisplay: React.FC< 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 7a608fc68b8a..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 @@ -43,6 +43,7 @@ const TypedSignInfo: React.FC = () => { const isPermit = isPermitSignatureRequest(currentConfirmation); const isOrder = isOrderSignatureRequest(currentConfirmation); + const chainId = currentConfirmation.chainId as string; useEffect(() => { (async () => { @@ -61,7 +62,7 @@ const TypedSignInfo: React.FC = () => { {isPermit && ( <> - + @@ -76,7 +77,10 @@ const TypedSignInfo: React.FC = () => { {isValidAddress(verifyingContract) && ( - + )} @@ -85,6 +89,7 @@ const TypedSignInfo: React.FC = () => { diff --git a/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx b/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx index b427b6a8ee97..35dafe552cb7 100644 --- a/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx +++ b/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx @@ -10,6 +10,8 @@ import configureStore from '../../../../../store/store'; import { DataTree } from './dataTree'; +const CHAIN_ID_MOCK = '0x123'; + const mockData = { contents: { value: 'Hello, Bob!', type: 'string' }, from: { @@ -67,7 +69,7 @@ const store = configureStore(mockState); describe('DataTree', () => { it('should match snapshot', () => { const { container } = renderWithProvider( - , + , store, ); expect(container).toMatchSnapshot(); @@ -77,6 +79,7 @@ describe('DataTree', () => { const { container } = renderWithProvider( , store, ); @@ -90,7 +93,7 @@ describe('DataTree', () => { mockPermitData.message.deadline = '-1'; const { container } = renderWithProvider( - , + , store, ); expect(container).toMatchSnapshot(); @@ -100,6 +103,7 @@ describe('DataTree', () => { const { container } = renderWithProvider( , store, ); @@ -114,7 +118,10 @@ describe('DataTree', () => { }, 'A number': { type: 'uint32', value: '1337' }, }; - const { container } = renderWithProvider(, store); + const { container } = renderWithProvider( + , + store, + ); expect(container).toMatchSnapshot(); }); }); diff --git a/ui/pages/confirmations/components/confirm/row/dataTree.tsx b/ui/pages/confirmations/components/confirm/row/dataTree.tsx index b295f337deb4..9a089a757004 100644 --- a/ui/pages/confirmations/components/confirm/row/dataTree.tsx +++ b/ui/pages/confirmations/components/confirm/row/dataTree.tsx @@ -97,10 +97,12 @@ export const DataTree = ({ data, primaryType, tokenDecimals: tokenDecimalsProp, + chainId, }: { data: Record | TreeData[]; primaryType?: PrimaryType; tokenDecimals?: number; + chainId: string; }) => { const tokenContract = getTokenContractInDataTree(data); const { decimalsNumber } = useGetTokenStandardAndDetails(tokenContract); @@ -125,6 +127,7 @@ export const DataTree = ({ value={value} type={type} tokenDecimals={tokenDecimals} + chainId={chainId} /> } @@ -150,12 +153,14 @@ const DataField = memo( type, value, tokenDecimals, + chainId, }: { label: string; primaryType?: PrimaryType; type: string; value: ValueType; tokenDecimals?: number; + chainId: string; }) => { const t = useI18nContext(); @@ -165,6 +170,7 @@ const DataField = memo( data={value} primaryType={primaryType} tokenDecimals={tokenDecimals} + chainId={chainId} /> ); } @@ -191,7 +197,7 @@ const DataField = memo( mixedCaseUseChecksum: true, }) ) { - return ; + return ; } return ; diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.test.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.test.tsx index ecf55e3b574d..e01a42782033 100644 --- a/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.test.tsx +++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.test.tsx @@ -8,11 +8,14 @@ import { ConfirmInfoRowTypedSignDataV1 } from './typedSignDataV1'; const mockStore = configureMockStore([])(mockState); +const CHAIN_ID_MOCK = '0x123'; + describe('ConfirmInfoRowTypedSignData', () => { it('should match snapshot', () => { const { container } = renderWithProvider( , mockStore, ); @@ -21,7 +24,10 @@ describe('ConfirmInfoRowTypedSignData', () => { it('should return null if data is not defined', () => { const { container } = renderWithProvider( - , + , mockStore, ); expect(container).toBeEmptyDOMElement(); diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.tsx index eb7c5c5ecb02..b781a9a6ff3e 100644 --- a/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.tsx +++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.tsx @@ -7,8 +7,10 @@ import { DataTree } from '../dataTree'; export const ConfirmInfoRowTypedSignDataV1 = ({ data, + chainId, }: { data?: TypedSignDataV1Type; + chainId: string; }) => { if (!data) { return null; @@ -22,7 +24,7 @@ export const ConfirmInfoRowTypedSignDataV1 = ({ return ( - + ); diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.test.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.test.tsx index 436edbecd3e0..6eb1c5b4236f 100644 --- a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.test.tsx +++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.test.tsx @@ -8,6 +8,8 @@ import { renderWithProvider } from '../../../../../../../test/lib/render-helpers import configureStore from '../../../../../../store/store'; import { ConfirmInfoRowTypedSignData } from './typedSignData'; +const CHAIN_ID_MOCK = '0x123'; + describe('ConfirmInfoRowTypedSignData', () => { const renderWithComponentData = ( data = unapprovedTypedSignMsgV4.msgParams?.data as string, @@ -15,7 +17,7 @@ describe('ConfirmInfoRowTypedSignData', () => { const store = configureStore(mockState); return renderWithProvider( - , + , store, ); }; diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx index 828f82f41352..b11b02656e81 100644 --- a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx +++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx @@ -13,10 +13,12 @@ import { DataTree } from '../dataTree'; export const ConfirmInfoRowTypedSignData = ({ data, tokenDecimals, + chainId, }: { data: string; isPermit?: boolean; tokenDecimals?: number; + chainId: string; }) => { const t = useI18nContext(); @@ -39,6 +41,7 @@ export const ConfirmInfoRowTypedSignData = ({ data={sanitizedMessage.value} primaryType={primaryType} tokenDecimals={tokenDecimals} + chainId={chainId} /> diff --git a/ui/pages/confirmations/components/contract-details-modal/contract-details-modal.js b/ui/pages/confirmations/components/contract-details-modal/contract-details-modal.js index 68209a68e35d..a0a16cc838c3 100644 --- a/ui/pages/confirmations/components/contract-details-modal/contract-details-modal.js +++ b/ui/pages/confirmations/components/contract-details-modal/contract-details-modal.js @@ -224,7 +224,11 @@ export default function ContractDetailsModal({ {petnamesEnabled ? ( - + ) : ( {typeof value === 'object' && value !== null ? ( - + ) : ( {petnamesEnabled ? ( - + ) : (
{primaryType} - + ); @@ -99,4 +100,5 @@ SignatureRequestMessage.propTypes = { messageRootRef: PropTypes.object, messageIsScrollable: PropTypes.bool, primaryType: PropTypes.string, + chainId: PropTypes.string, }; diff --git a/ui/pages/confirmations/components/signature-request/signature-request.js b/ui/pages/confirmations/components/signature-request/signature-request.js index ce6967b50f70..3cf2a54327c9 100644 --- a/ui/pages/confirmations/components/signature-request/signature-request.js +++ b/ui/pages/confirmations/components/signature-request/signature-request.js @@ -313,6 +313,7 @@ const SignatureRequest = ({ txData, warnings }) => { messageRootRef={messageRootRef} messageIsScrollable={messageIsScrollable} primaryType={primaryType} + chainId={chainId} />