Merge branch 'develop' into token-allowance-flow-by-default

CHANGELOG.md

@@ -8,6 +8,81 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 - Added displaying the primaryType during Typed data signing ([#17077](https://github.com/MetaMask/metamask-extension/pull/17077))
 
+## [10.24.0]
+### Added
+- Add NFT setApprovalForAll warning popover when approving the NFT Colleciton ([#16195](https://github.com/MetaMask/metamask-extension/pull/16195))
+- Add "What's New" notification for Security & Privacy ([#16783](https://github.com/MetaMask/metamask-extension/pull/16783))
+- Add informational message on Signature request screen as a user guidance ([#16600](https://github.com/MetaMask/metamask-extension/pull/16600))
+- Add ability to opt out from getting balances as a batch request for all loaded accounts ([#16746](https://github.com/MetaMask/metamask-extension/pull/16746))
+- Add Signature request warning modal ([#16225](https://github.com/MetaMask/metamask-extension/pull/16225))
+- Add Improved Token Allowance experience toggle under Experimental Settings ([#16291](https://github.com/MetaMask/metamask-extension/pull/16291))
+- Add "What's New" Notification for Improved token Allowance Experience ([#16465](https://github.com/MetaMask/metamask-extension/pull/16465))
+- Add new IT translations ([#15748](https://github.com/MetaMask/metamask-extension/pull/15748))
+- Add new zh_TW translations and apply a variety of fixes ([#11212](https://github.com/MetaMask/metamask-extension/pull/11212))
+- Add ES translations for getting Ethereum Accounts permission message ([#15660](https://github.com/MetaMask/metamask-extension/pull/15660))
+- Add "Verify contract details" link to SetApprovalForAll confirmation screens ([#15756](https://github.com/MetaMask/metamask-extension/pull/15756))
+- Add Reject Transactions modal to be present in the footer of the Approve screen ([#16832](https://github.com/MetaMask/metamask-extension/pull/16832))
+- [FLASK] Add snap alerts and prompts via `snap_dialog` RPC method ([#16048](https://github.com/MetaMask/metamask-extension/pull/16048))
+- [FLASK] Expose transaction origin to transaction insight snaps ([#16671](https://github.com/MetaMask/metamask-extension/pull/16671))
+- Toggle option to enable/disable balance and Token rate checking for using third-party API ([#16772](https://github.com/MetaMask/metamask-extension/pull/16772))
+- Onboarding v2: Implement requested metrics ([#17090](https://github.com/MetaMask/metamask-extension/pull/17090))
+
+### Changed
+- Update secondary copy and remove the Address component from SetApprovalForAll and NFT Approve screens ([#16292](https://github.com/MetaMask/metamask-extension/pull/16292))
+- Update background color for picker network ([#16466](https://github.com/MetaMask/metamask-extension/pull/16466))
+- Update network colors with design tokens ([#16543](https://github.com/MetaMask/metamask-extension/pull/16543))
+- Update all background-default hovers colors ([#16519](https://github.com/MetaMask/metamask-extension/pull/16519))
+- Update signature request screens ([#15776](https://github.com/MetaMask/metamask-extension/pull/15776))
+- Remove network name from analytics ([#16781](https://github.com/MetaMask/metamask-extension/pull/16781))
+- Remove RPC urls from metrics ([#16710](https://github.com/MetaMask/metamask-extension/pull/16710))
+- Allow adding networks with the same chainId as a preloaded/default network via `wallet_AddEthereumChain` API ([#16733](https://github.com/MetaMask/metamask-extension/pull/16733))
+- Network request in background should not start until onboarding is completed ([#16773](https://github.com/MetaMask/metamask-extension/pull/16773))
+- Replace the address in SignTypedData_v4 signatures with a 'Verify contract details' link ([#16191](https://github.com/MetaMask/metamask-extension/pull/16191))
+- Bump `@metamask/design-tokens` from `1.11.0` to `1.11.1` ([#16764](https://github.com/MetaMask/metamask-extension/pull/16764))
+  - Update Primary, Error and Info colors to meet AA accessibility standards for light mode [#255](https://github.com/MetaMask/design-tokens/pull/255)
+- Bump `@metamask/design-tokens` from `1.9.0` to `1.11.0` ([#16515](https://github.com/MetaMask/metamask-extension/pull/16515))
+  - Add new background color for `hover` and `pressed` tokens [#233](https://github.com/MetaMask/design-tokens/pull/233)
+- Migrate from deprecated `@metamask/controllers`to the new controller packages ([#16547](https://github.com/MetaMask/metamask-extension/pull/16547))
+- Sanitize data ensuring we don't send any privacy sensitive information to Sentry errors ([#16780](https://github.com/MetaMask/metamask-extension/pull/16780))
+- Track when token balance is changed to update the balance value on the Approval screen ([#16964](https://github.com/MetaMask/metamask-extension/pull/16964))
+- Swaps: ensure 0% slippage on Arbitrum for wrapping/unwrapping ETH (ETH -> WETH or WETH -> ETH) ([#16778](https://github.com/MetaMask/metamask-extension/pull/16778))
+- [Beta] Update `BETA` to sentence case ([#16590](https://github.com/MetaMask/metamask-extension/pull/16590))
+- [Beta] Update text on the Welcome screen ([#16489](https://github.com/MetaMask/metamask-extension/pull/16489))
+- [FLASK] **BREAKING:** Snaps are now required to request the `endowment:rpc` permission to receive RPC requests on `onRpcRequest` ([#16673](https://github.com/MetaMask/metamask-extension/pull/16673))
+  - Snaps must specify if they want to receive RPC requests from dapps or snaps using the following permission `endowment:rpc: { dapps: true, snaps: true }`
+- [FLASK] **BREAKING:** Removed `wallet_enable` and `wallet_installSnaps` in favor of `wallet_requestSnaps` ([#16525](https://github.com/MetaMask/metamask-extension/pull/16525))
+- [FLASK] **BREAKING:** The `wallet` global exposed to Snaps has been replaced with two new globals: `snap` and `ethereum` ([#16525](https://github.com/MetaMask/metamask-extension/pull/16525))
+  - `ethereum` is an EIP-1193 provider and can be accessed by requesting the `endowment:ethereum-provider` permission
+  - `snap` is always exposed and can be used to access snap specific functions using `snap.request()`
+- [FLASK] **BREAKING:** Named parameters are now required in all Snaps RPC methods ([#16525](https://github.com/MetaMask/metamask-extension/pull/16525))
+- Security and Privacy Settings Re-org ([#16756](https://github.com/MetaMask/metamask-extension/pull/16756))
+
+### Removed
+- [FLASK] **BREAKING:** Removed `snap_getAppKey` ([#16525](https://github.com/MetaMask/metamask-extension/pull/16525))
+  - Snaps that need snap-specific entropy can use `snap_getEntropy` instead
+- Remove ONBOARDING_V2 flag for release ([#16865](https://github.com/MetaMask/metamask-extension/pull/16865))
+
+### Fixed
+- Fix resolving to the Account nickname or contact name when scanning the QR code in the Send screen ([#16204](https://github.com/MetaMask/metamask-extension/pull/16204))
+- Fix not being able to reject multiple Signature requests ([#16199](https://github.com/MetaMask/metamask-extension/pull/16199))
+- Fix issue that prevents switching to localhost using the API ([#16707](https://github.com/MetaMask/metamask-extension/pull/16707))
+- Fix unable to proceed with tx when there is "Insufficient funds for gas", by adding the estimated gas fee section on the Send screen ([#14634](https://github.com/MetaMask/metamask-extension/pull/14634))
+- Fix Add Contact by disabling the Save button if the input fields are empty ([#16233](https://github.com/MetaMask/metamask-extension/pull/16233))
+- Fix Token Detection displaying a token without balance, by updating the user state `tokensChainsCache` from array to object ([#16535](https://github.com/MetaMask/metamask-extension/pull/16535))
+- Fix message not rendering properly on Sign Typed Data v4 screen, by supporting nested arrays and arrays with defined length ([#16552](https://github.com/MetaMask/metamask-extension/pull/16552))
+- Fix German translation for `lightTheme` ([#16517](https://github.com/MetaMask/metamask-extension/pull/16517))
+- Fix displaying Collectibles Approval screen instead of ERC20 Approval screen when the token standard property is undefined ([#16765](https://github.com/MetaMask/metamask-extension/pull/16765))
+- Fix token balance precision on Confirm Token Approval page from Token Allowance flow ([#16934](https://github.com/MetaMask/metamask-extension/pull/16934))
+- [FLASK] Clear notification state on restore ([#16503](https://github.com/MetaMask/metamask-extension/pull/16503))
+- [FLASK] Fix a crash that happens after snap install ([#16526](https://github.com/MetaMask/metamask-extension/pull/16526))
+- [FLASK] Fix usage of wrong `ethereum` global for `ethereum` endowment ([#16932](https://github.com/MetaMask/metamask-extension/pull/16932))
+- Validating or restricting the number of digits on token allowance flow ([#17234](https://github.com/MetaMask/metamask-extension/pull/17234))
+- Fixed navigation through multiple unapproved transactions for ERC20 tokens ([#16822](https://github.com/MetaMask/metamask-extension/pull/16822))
+- Display large and small numbers as decimals instead of scientific notation on token allowance confirmation screens ([#16676](https://github.com/MetaMask/metamask-extension/pull/16676))
+- Fix #16959 - Don't allow user to see welcome or password creation screen after a keyring has been created ([#17024](https://github.com/MetaMask/metamask-extension/pull/17024))
+- Fix 'Back' navigation from Restore Vault page when accessed from popup window ([#17095](https://github.com/MetaMask/metamask-extension/pull/17095))
+- Align custom spending cap Max button in approve screen for multiple languages ([#16927](https://github.com/MetaMask/metamask-extension/pull/16927))
+
 ## [10.23.3]
 ### Removed
 - Remove onramp provider Wyre ([#17102](https://github.com/MetaMask/metamask-extension/pull/17102))
@@ -3350,7 +3425,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Uncategorized
 - Added the ability to restore accounts from seed words.
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.23.3...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.24.0...HEAD
+[10.24.0]: https://github.com/MetaMask/metamask-extension/compare/v10.23.3...v10.24.0
 [10.23.3]: https://github.com/MetaMask/metamask-extension/compare/v10.23.2...v10.23.3
 [10.23.2]: https://github.com/MetaMask/metamask-extension/compare/v10.23.1...v10.23.2
 [10.23.1]: https://github.com/MetaMask/metamask-extension/compare/v10.23.0...v10.23.1

app/scripts/metamask-controller.js

@@ -395,9 +395,17 @@ export default class MetamaskController extends EventEmitter {
           this.preferencesController.store.subscribe.bind(
             this.preferencesController.store,
           ),
-        onNetworkStateChange: this.networkController.store.subscribe.bind(
-          this.networkController.store,
-        ),
+        onNetworkStateChange: (cb) =>
+          this.networkController.store.subscribe((networkState) => {
+            const modifiedNetworkState = {
+              ...networkState,
+              providerConfig: {
+                ...networkState.provider,
+                chainId: hexToDecimal(networkState.provider.chainId),
+              },
+            };
+            return cb(modifiedNetworkState);
+          }),
         getOpenSeaApiKey: () => this.nftController.openSeaApiKey,
         getBalancesInSingleCall:
           this.assetsContractController.getBalancesInSingleCall.bind(

docs/forking-mainnet-for-testing.md

@@ -3,9 +3,9 @@
 If you want to test out mainnet functionality without having to actually use mainnet, you can use Ganache's forking feature and then import ganache network and its generated accounts into MetaMask
 
 1. Get your local dev build running and have MetaMask open in your browser
-2. Run `$(yarn bin)/ganache --fork https://mainnet.infura.io/v3/INFURA_PROJECT_ID` with `INFURA_PROJECT_ID` replaced by your own infura project id
+2. Run `$(yarn bin ganache) --fork https://mainnet.infura.io/v3/INFURA_PROJECT_ID --chain.chainId 1` with `INFURA_PROJECT_ID` replaced by your own Infura project id
 3. Ganache will output a list of account addresses, private keys and an "Mnemonic" (aka SRP, aka Secret Recovery Phrase)
 4. Import either the private keys or the SRP into MetaMask
 5. Add the ganache network as a custom network in MetaMask. The "New RPC URL" will need to be http://127.0.0.1:8545, set the Chain Id as 1, and the currency symbol to ETH
 
-You should now be able to use MetaMask, and many dapps, as if you were using mainnet. Your accounts should have 1000 ETH which you can use on this simulated local fork. Note that after significant time ellapses since when you forked mainnet (i.e. ran step 2 above), interactions with many dapps and smart contracts may begin to have inconsistent behaviour or failures.
+You should now be able to use MetaMask, and many dapps, as if you were using mainnet. Your accounts should each have 1000 ETH which you can use on this simulated local fork. Note that after significant time elapses since when you forked mainnet (i.e. ran step 2 above), interactions with many dapps and smart contracts may begin to have inconsistent behavior or failures.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "10.23.3",
+  "version": "10.24.0",
   "private": true,
   "repository": {
     "type": "git",

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -101,18 +101,24 @@ export default class ConfirmPageContainerContent extends Component {
         <Tab
           className="confirm-page-container-content__tab"
           name={t('details')}
+          tabKey="details"
         >
           {detailsComponent}
         </Tab>
         {dataComponent && (
-          <Tab className="confirm-page-container-content__tab" name={t('data')}>
+          <Tab
+            className="confirm-page-container-content__tab"
+            name={t('data')}
+            tabKey="data"
+          >
             {dataComponent}
           </Tab>
         )}
         {dataHexComponent && (
           <Tab
             className="confirm-page-container-content__tab"
             name={t('dataHex')}
+            tabKey="dataHex"
           >
             {dataHexComponent}
           </Tab>

ui/components/ui/tabs/tab/tab.component.js

@@ -11,6 +11,7 @@ const Tab = (props) => {
     name,
     onClick,
     tabIndex,
+    tabKey,
   } = props;
 
   return (
@@ -24,6 +25,7 @@ const Tab = (props) => {
         event.preventDefault();
         onClick(tabIndex);
       }}
+      key={tabKey}
     >
       <button>{name}</button>
     </li>
@@ -36,6 +38,7 @@ Tab.propTypes = {
   'data-testid': PropTypes.string,
   isActive: PropTypes.bool, // required, but added using React.cloneElement
   name: PropTypes.string.isRequired,
+  tabKey: PropTypes.string.isRequired, // for Tabs selection purpose
   onClick: PropTypes.func,
   tabIndex: PropTypes.number, // required, but added using React.cloneElement
 };

ui/components/ui/tabs/tabs.component.js

@@ -4,14 +4,14 @@ import classnames from 'classnames';
 
 export default class Tabs extends Component {
   static defaultProps = {
-    defaultActiveTabName: null,
+    defaultActiveTabKey: null,
     onTabClick: null,
     tabsClassName: undefined,
     subHeader: null,
   };
 
   static propTypes = {
-    defaultActiveTabName: PropTypes.string,
+    defaultActiveTabKey: PropTypes.string,
     onTabClick: PropTypes.func,
     children: PropTypes.node.isRequired,
     tabsClassName: PropTypes.string,
@@ -20,12 +20,12 @@ export default class Tabs extends Component {
 
   state = {
     activeTabIndex: Math.max(
-      this._findChildByName(this.props.defaultActiveTabName),
+      this._findChildByKey(this.props.defaultActiveTabKey),
       0,
     ),
   };
 
-  handleTabClick(tabIndex, tabName) {
+  handleTabClick(tabIndex, tabKey) {
     const { onTabClick } = this.props;
     const { activeTabIndex } = this.state;
 
@@ -36,7 +36,7 @@ export default class Tabs extends Component {
         },
         () => {
           if (onTabClick) {
-            onTabClick(tabName);
+            onTabClick(tabKey);
           }
         },
       );
@@ -47,11 +47,11 @@ export default class Tabs extends Component {
     const numberOfTabs = React.Children.count(this._getValidChildren());
 
     return React.Children.map(this._getValidChildren(), (child, index) => {
-      const tabName = child?.props.name;
+      const tabKey = child?.props.tabKey;
       return (
         child &&
         React.cloneElement(child, {
-          onClick: (idx) => this.handleTabClick(idx, tabName),
+          onClick: (idx) => this.handleTabClick(idx, tabKey),
           tabIndex: index,
           isActive: numberOfTabs > 1 && index === this.state.activeTabIndex,
         })
@@ -89,14 +89,16 @@ export default class Tabs extends Component {
   }
 
   /**
-   * Returns the index of the child with the given name
+   * Returns the index of the child with the given key
    *
-   * @param {string} name - the name to search for
+   * @param {string} tabKey - the name to search for
    * @returns {number} the index of the child with the given name
    * @private
    */
-  _findChildByName(name) {
-    return this._getValidChildren().findIndex((c) => c?.props.name === name);
+  _findChildByKey(tabKey) {
+    return this._getValidChildren().findIndex(
+      (c) => c?.props.tabKey === tabKey,
+    );
   }
 
   // This ignores any 'null' child elements that are a result of a conditional

ui/components/ui/tabs/tabs.stories.js

@@ -11,7 +11,7 @@ export default {
       control: 'object',
       name: 'Tabs',
     },
-    defaultActiveTabName: {
+    defaultActiveTabKey: {
       control: {
         type: 'text',
       },
@@ -29,7 +29,7 @@ export default {
 
 function renderTab({ name, content }, index) {
   return (
-    <Tab name={name} key={name + index}>
+    <Tab tabKey={name} key={name + index} name={name}>
       {content}
     </Tab>
   );
@@ -38,10 +38,10 @@ function renderTab({ name, content }, index) {
 export const DefaultStory = (args) => {
   return (
     <Tabs
-      defaultActiveTabName={args.defaultActiveTabName}
+      defaultActiveTabKey={args.defaultActiveTabKey}
       onTabClick={args.onTabClick}
     >
-      {args.tabs.map((tabProps, i) => renderTab(tabProps, i))}
+      {args.tabs.map((tabProps, i) => renderTab(tabProps, i, args.t))}
       <DropdownTab
         options={[
           { name: 'Insight Snap', value: 'Insight Snap' },