Add improved token allowance experience toggle (#16291)

app/_locales/en/messages.json

@@ -1685,6 +1685,12 @@
     "message": "Imported",
     "description": "status showing that an account has been fully loaded into the keyring"
   },
+  "improvedTokenAllowance": {
+    "message": "Improved token allowance experience"
+  },
+  "improvedTokenAllowanceDescription": {
+    "message": "Turn this on to go through the improved token allowance experience whenever a dapp requests an ERC20 approve"
+  },
   "inYourSettings": {
     "message": "in your Settings"
   },

app/scripts/controllers/preferences.js

@@ -69,6 +69,7 @@ export default class PreferencesController {
         ? LEDGER_TRANSPORT_TYPES.WEBHID
         : LEDGER_TRANSPORT_TYPES.U2F,
       theme: 'light',
+      improvedTokenAllowanceEnabled: false,
       ...opts.initState,
     };
 
@@ -187,6 +188,17 @@ export default class PreferencesController {
     this.store.updateState({ theme: val });
   }
 
+  /**
+   * Setter for the `improvedTokenAllowanceEnabled` property
+   *
+   * @param improvedTokenAllowanceEnabled
+   */
+  setImprovedTokenAllowanceEnabled(improvedTokenAllowanceEnabled) {
+    this.store.updateState({
+      improvedTokenAllowanceEnabled,
+    });
+  }
+
   /**
    * Add new methodData to state, to avoid requesting this information again through Infura
    *

app/scripts/metamask-controller.js

@@ -1629,6 +1629,10 @@ export default class MetamaskController extends EventEmitter {
         preferencesController,
       ),
       setTheme: preferencesController.setTheme.bind(preferencesController),
+      setImprovedTokenAllowanceEnabled:
+        preferencesController.setImprovedTokenAllowanceEnabled.bind(
+          preferencesController,
+        ),
       // AssetsContractController
       getTokenStandardAndDetails: this.getTokenStandardAndDetails.bind(this),
 

ui/helpers/constants/settings.js

@@ -329,4 +329,11 @@ export const SETTINGS_CONSTANTS = [
     route: `${ADVANCED_ROUTE}#restore-userdata`,
     icon: 'fas fa-upload',
   },
+  {
+    tabMessage: (t) => t('experimental'),
+    sectionMessage: (t) => t('improvedTokenAllowance'),
+    descriptionMessage: (t) => t('improvedTokenAllowanceDescription'),
+    route: `${EXPERIMENTAL_ROUTE}#improved-token-allowance`,
+    icon: 'fa fa-flask',
+  },
 ];

ui/helpers/utils/settings-search.test.js

@@ -182,7 +182,7 @@ describe('Settings Search Utils', () => {
 
     it('should get good experimental section number', () => {
       expect(getNumberOfSettingsInSection(t, t('experimental'))).toStrictEqual(
-        1,
+        2,
       );
     });
 

ui/pages/confirm-approve/confirm-approve.js

@@ -27,6 +27,7 @@ import {
   getIsMultiLayerFeeNetwork,
   checkNetworkAndAccountSupports1559,
   getEIP1559V2Enabled,
+  getIsImprovedTokenAllowanceEnabled,
 } from '../../selectors';
 import { useApproveTransaction } from '../../hooks/useApproveTransaction';
 import AdvancedGasFeePopover from '../../components/app/advanced-gas-fee-popover';
@@ -87,6 +88,10 @@ export default function ConfirmApprove({
   const eip1559V2Enabled = useSelector(getEIP1559V2Enabled);
   const supportsEIP1559V2 = eip1559V2Enabled && networkAndAccountSupports1559;
 
+  const improvedTokenAllowanceEnabled = useSelector(
+    getIsImprovedTokenAllowanceEnabled,
+  );
+
   const previousTokenAmount = useRef(tokenAmount);
   const {
     approveTransaction,
@@ -161,7 +166,7 @@ export default function ConfirmApprove({
   if (tokenSymbol === undefined && assetName === undefined) {
     return <Loading />;
   }
-  if (process.env.TOKEN_ALLOWANCE_IMPROVEMENTS && assetStandard === ERC20) {
+  if (improvedTokenAllowanceEnabled && assetStandard === ERC20) {
     return (
       <GasFeeContextProvider transaction={transaction}>
         <TransactionModalContextProvider>

ui/pages/settings/experimental-tab/experimental-tab.component.js

@@ -20,6 +20,8 @@ export default class ExperimentalTab extends PureComponent {
     openSeaEnabled: PropTypes.bool,
     eip1559V2Enabled: PropTypes.bool,
     setEIP1559V2Enabled: PropTypes.func,
+    improvedTokenAllowanceEnabled: PropTypes.bool,
+    setImprovedTokenAllowanceEnabled: PropTypes.func,
   };
 
   settingsRefs = Array(
@@ -190,9 +192,47 @@ export default class ExperimentalTab extends PureComponent {
     );
   }
 
+  renderImprovedTokenAllowanceToggle() {
+    const { t } = this.context;
+    const { improvedTokenAllowanceEnabled, setImprovedTokenAllowanceEnabled } =
+      this.props;
+
+    return (
+      <div ref={this.settingsRefs[1]} className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{t('improvedTokenAllowance')}</span>
+          <div className="settings-page__content-description">
+            {t('improvedTokenAllowanceDescription')}
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={improvedTokenAllowanceEnabled}
+              onToggle={(value) => {
+                this.context.trackEvent({
+                  category: EVENT.CATEGORIES.SETTINGS,
+                  event: 'Enabled/Disable ImprovedTokenAllowance',
+                  properties: {
+                    action: 'Enabled/Disable ImprovedTokenAllowance',
+                    legacy_event: true,
+                  },
+                });
+                setImprovedTokenAllowanceEnabled(!value);
+              }}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="settings-page__body">
+        {this.renderImprovedTokenAllowanceToggle()}
         {this.renderOpenSeaEnabledToggle()}
         {this.renderCollectibleDetectionToggle()}
         {this.renderEIP1559V2EnabledToggle()}

ui/pages/settings/experimental-tab/experimental-tab.container.js

@@ -5,11 +5,13 @@ import {
   setUseCollectibleDetection,
   setOpenSeaEnabled,
   setEIP1559V2Enabled,
+  setImprovedTokenAllowanceEnabled,
 } from '../../../store/actions';
 import {
   getUseCollectibleDetection,
   getOpenSeaEnabled,
   getEIP1559V2Enabled,
+  getIsImprovedTokenAllowanceEnabled,
 } from '../../../selectors';
 import ExperimentalTab from './experimental-tab.component';
 
@@ -18,6 +20,7 @@ const mapStateToProps = (state) => {
     useCollectibleDetection: getUseCollectibleDetection(state),
     openSeaEnabled: getOpenSeaEnabled(state),
     eip1559V2Enabled: getEIP1559V2Enabled(state),
+    improvedTokenAllowanceEnabled: getIsImprovedTokenAllowanceEnabled(state),
   };
 };
 
@@ -27,6 +30,8 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(setUseCollectibleDetection(val)),
     setOpenSeaEnabled: (val) => dispatch(setOpenSeaEnabled(val)),
     setEIP1559V2Enabled: (val) => dispatch(setEIP1559V2Enabled(val)),
+    setImprovedTokenAllowanceEnabled: (val) =>
+      dispatch(setImprovedTokenAllowanceEnabled(val)),
   };
 };
 

ui/selectors/selectors.js

@@ -1254,6 +1254,16 @@ export function getIstokenDetectionInactiveOnNonMainnetSupportedNetwork(state) {
   return isDynamicTokenListAvailable && !useTokenDetection && !isMainnet;
 }
 
+/**
+ * To get the `improvedTokenAllowanceEnabled` value which determines whether we use the improved token allowance
+ *
+ * @param {*} state
+ * @returns Boolean
+ */
+export function getIsImprovedTokenAllowanceEnabled(state) {
+  return state.metamask.improvedTokenAllowanceEnabled;
+}
+
 export function getIsCustomNetwork(state) {
   const chainId = getCurrentChainId(state);
 

ui/store/actions.js

@@ -3789,6 +3789,20 @@ export function setEnableEIP1559V2NoticeDismissed() {
   return submitRequestToBackground('setEnableEIP1559V2NoticeDismissed', [true]);
 }
 
+export function setImprovedTokenAllowanceEnabled(
+  improvedTokenAllowanceEnabled,
+) {
+  return async () => {
+    try {
+      await submitRequestToBackground('setImprovedTokenAllowanceEnabled', [
+        improvedTokenAllowanceEnabled,
+      ]);
+    } catch (error) {
+      log.error(error);
+    }
+  };
+}
+
 export function setFirstTimeUsedNetwork(chainId) {
   return submitRequestToBackground('setFirstTimeUsedNetwork', [chainId]);
 }