feat: Implement redesigned send flow feature flag (#35801)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR aims to add feature flag for redesigned send flow for BIP44. 

As new send flow will be relying on `multichainAccountsState2` (aka
BIP44), the centralised hook to determine redesigned send flow has also
dependency to that flag. Please see `useRedesignedSendFlow.ts`

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/35801?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: #35799

## **Manual testing steps**

No user facing changes

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [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/main/.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/main/.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.

Author: OGPoyraz

test/e2e/mock-e2e.js

@@ -1006,6 +1006,22 @@ async function setupMocking(
       };
     });
 
+  await server
+    .forGet('https://client-config.api.cx.metamask.io/v1/flags')
+    .thenCallback(() => {
+      return {
+        ok: true,
+        statusCode: 200,
+        json: [
+          {
+            sendRedesign: {
+              enabled: false,
+            },
+          },
+        ],
+      };
+    });
+
   // On Ramp Content
   const ON_RAMP_CONTENT = fs.readFileSync(ON_RAMP_CONTENT_PATH);
   await server

ui/components/app/assets/nfts/nft-details/nft-details.tsx

@@ -85,6 +85,7 @@ import {
 } from '../../../../../../app/scripts/lib/util';
 import useGetAssetImageUrl from '../../../../../hooks/useGetAssetImageUrl';
 import { getImageForChainId } from '../../../../../selectors/multichain';
+import { useRedesignedSendFlow } from '../../../../../pages/confirmations/hooks/useRedesignedSendFlow';
 import useFetchNftDetailsFromTokenURI from '../../../../../hooks/useFetchNftDetailsFromTokenURI';
 import { navigateToSendRoute } from '../../../../../pages/confirmations/utils/send';
 import NftDetailInformationRow from './nft-detail-information-row';
@@ -129,6 +130,7 @@ export function NftDetailsComponent({
   const trackEvent = useContext(MetaMetricsContext);
   const currency = useSelector(getCurrentCurrency);
   const selectedNativeConversionRate = useSelector(getConversionRate);
+  const { enabled: isSendRedesignEnabled } = useRedesignedSendFlow();
 
   const nftNetworkConfigs = useSelector(getNetworkConfigurationsByChainId);
   const nftChainNetwork = nftNetworkConfigs[nftChainId as Hex];
@@ -335,7 +337,10 @@ export function NftDetailsComponent({
       }),
     );
     // We only allow sending one NFT at a time
-    navigateToSendRoute(history, { address: nft.address, chainId: nftChainId });
+    navigateToSendRoute(history, isSendRedesignEnabled, {
+      address: nft.address,
+      chainId: nftChainId,
+    });
   };
 
   const getDateCreatedTimestamp = (dateString: string) => {

ui/components/app/wallet-overview/coin-buttons.tsx

@@ -67,6 +67,7 @@ import { getCurrentChainId } from '../../../../shared/modules/selectors/networks
 import { MultichainNetworks } from '../../../../shared/constants/multichain/networks';
 import { trace, TraceName } from '../../../../shared/lib/trace';
 import { navigateToSendRoute } from '../../../pages/confirmations/utils/send';
+import { useRedesignedSendFlow } from '../../../pages/confirmations/hooks/useRedesignedSendFlow';
 ///: BEGIN:ONLY_INCLUDE_IF(multichain)
 import { useHandleSendNonEvm } from './hooks/useHandleSendNonEvm';
 ///: END:ONLY_INCLUDE_IF
@@ -107,6 +108,7 @@ const CoinButtons = ({
   >;
   const currentChainId = useSelector(getCurrentChainId);
   const displayNewIconButtons = process.env.REMOVE_GNS;
+  const { enabled: isSendRedesignEnabled } = useRedesignedSendFlow();
 
   // Multichain accounts feature flag and selected account group
   const isMultichainAccountsState2Enabled = useSelector(
@@ -276,7 +278,7 @@ const CoinButtons = ({
     );
 
     ///: BEGIN:ONLY_INCLUDE_IF(multichain)
-    if (!isEvmAccountType(account.type) && !process.env.SEND_REDESIGN_ENABLED) {
+    if (!isEvmAccountType(account.type) && !isSendRedesignEnabled) {
       await handleSendNonEvm();
       // Early return, not to let the non-EVM flow slip into the native send flow.
       return;
@@ -290,11 +292,12 @@ const CoinButtons = ({
     if (trackingLocation !== 'home') {
       params = { chainId: chainId.toString() };
     }
-    navigateToSendRoute(history, params);
+    navigateToSendRoute(history, isSendRedesignEnabled, params);
   }, [
     chainId,
     account,
     setCorrectChain,
+    isSendRedesignEnabled,
     ///: BEGIN:ONLY_INCLUDE_IF(multichain)
     handleSendNonEvm,
     ///: END:ONLY_INCLUDE_IF

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-nft-tab.tsx

@@ -38,6 +38,7 @@ import {
   updateSendAsset,
 } from '../../../../ducks/send';
 import { getNftImage } from '../../../../helpers/utils/nfts';
+import { useRedesignedSendFlow } from '../../../../pages/confirmations/hooks/useRedesignedSendFlow';
 import { navigateToSendRoute } from '../../../../pages/confirmations/utils/send';
 import { NFT } from './types';
 
@@ -67,6 +68,7 @@ export function AssetPickerModalNftTab({
   const nftsStillFetchingIndication = useSelector(
     getNftIsStillFetchingIndication,
   );
+  const { enabled: isSendRedesignEnabled } = useRedesignedSendFlow();
 
   const { currentlyOwnedNfts } = useNfts({
     overridePopularNetworkFilter: true,
@@ -128,7 +130,7 @@ export function AssetPickerModalNftTab({
         skipComputeEstimatedGasLimit: false,
       }),
     );
-    navigateToSendRoute(history, {
+    navigateToSendRoute(history, isSendRedesignEnabled, {
       address: nft.address,
       chainId: nft.chainId,
     });

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx

@@ -103,6 +103,13 @@ jest.mock('lodash', () => ({
   }),
 }));
 
+jest.mock(
+  '../../../../pages/confirmations/hooks/useRedesignedSendFlow',
+  () => ({
+    useRedesignedSendFlow: jest.fn().mockReturnValue({ enabled: false }),
+  }),
+);
+
 describe('AssetPickerModal', () => {
   const useSelectorMock = useSelector as jest.Mock;
   const useI18nContextMock = useI18nContext as jest.Mock;

ui/pages/asset/components/token-buttons.tsx

@@ -57,6 +57,7 @@ import { Asset } from '../types/asset';
 import { getIsUnifiedUIEnabled } from '../../../ducks/bridge/selectors';
 import { navigateToSendRoute } from '../../confirmations/utils/send';
 import { isEvmChainId } from '../../../../shared/lib/asset-utils';
+import { useRedesignedSendFlow } from '../../confirmations/hooks/useRedesignedSendFlow';
 
 const TokenButtons = ({
   token,
@@ -76,7 +77,7 @@ const TokenButtons = ({
   const isMultichainAccountsState2Enabled = useSelector(
     getIsMultichainAccountsState2Enabled,
   );
-
+  const { enabled: isSendRedesignEnabled } = useRedesignedSendFlow();
   const { chainId: multichainChainId } = useSelector(
     getSelectedMultichainNetworkConfiguration,
   );
@@ -194,7 +195,7 @@ const TokenButtons = ({
     );
 
     ///: BEGIN:ONLY_INCLUDE_IF(multichain)
-    if (!isEvmAccountType(account.type) && !process.env.SEND_REDESIGN_ENABLED) {
+    if (!isEvmAccountType(account.type) && !isSendRedesignEnabled) {
       await handleSendNonEvm();
       // Early return, not to let the non-EVM flow slip into the native send flow.
       return;
@@ -209,7 +210,7 @@ const TokenButtons = ({
           details: token,
         }),
       );
-      navigateToSendRoute(history, {
+      navigateToSendRoute(history, isSendRedesignEnabled, {
         address: token.address,
         chainId: token.chainId,
       });
@@ -231,6 +232,7 @@ const TokenButtons = ({
     ///: BEGIN:ONLY_INCLUDE_IF(multichain)
     handleSendNonEvm,
     ///: END:ONLY_INCLUDE_IF
+    isSendRedesignEnabled,
   ]);
 
   const isTestnet = useSelector(getMultichainIsTestnet);

ui/pages/confirmations/components/confirm/header/wallet-initiated-header.test.tsx

@@ -12,6 +12,10 @@ const render = (
   return renderWithConfirmContextProvider(<WalletInitiatedHeader />, store);
 };
 
+jest.mock('../../../hooks/useRedesignedSendFlow', () => ({
+  useRedesignedSendFlow: jest.fn().mockReturnValue({ enabled: false }),
+}));
+
 describe('<WalletInitiatedHeader />', () => {
   it('should match snapshot', () => {
     const { container } = render();

ui/pages/confirmations/components/confirm/header/wallet-initiated-header.tsx

@@ -29,12 +29,14 @@ import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { showSendTokenPage } from '../../../../../store/actions';
 import { useConfirmContext } from '../../../context/confirm';
 import { navigateToSendRoute } from '../../../utils/send';
+import { useRedesignedSendFlow } from '../../../hooks/useRedesignedSendFlow';
 import { AdvancedDetailsButton } from './advanced-details-button';
 
 export const WalletInitiatedHeader = () => {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const history = useHistory();
+  const { enabled: isSendRedesignEnabled } = useRedesignedSendFlow();
 
   const { currentConfirmation } = useConfirmContext<TransactionMeta>();
 
@@ -63,8 +65,8 @@ export const WalletInitiatedHeader = () => {
     await dispatch(editExistingTransaction(assetType, id.toString()));
     dispatch(clearConfirmTransaction());
     dispatch(showSendTokenPage());
-    navigateToSendRoute(history);
-  }, [currentConfirmation, dispatch, history]);
+    navigateToSendRoute(history, isSendRedesignEnabled);
+  }, [currentConfirmation, dispatch, history, isSendRedesignEnabled]);
 
   return (
     <Box

ui/pages/confirmations/hooks/useConfirmSendNavigation.test.ts

@@ -1,9 +1,11 @@
 import mockState from '../../../../test/data/mock-state.json';
 import { renderHookWithProvider } from '../../../../test/lib/render-helpers';
 import * as ConfirmContext from '../context/confirm';
-
+import { useRedesignedSendFlow } from './useRedesignedSendFlow';
 import { useConfirmSendNavigation } from './useConfirmSendNavigation';
 
+const mockUseRedesignedSendFlow = jest.mocked(useRedesignedSendFlow);
+
 const mockHistory = {
   goBack: jest.fn(),
   push: jest.fn(),
@@ -23,34 +25,89 @@ jest.mock('react-redux', () => ({
   },
 }));
 
-function renderHook() {
-  const { result } = renderHookWithProvider(
-    useConfirmSendNavigation,
-    mockState,
-  );
-  return result.current;
-}
+jest.mock('./useRedesignedSendFlow');
 
 describe('useConfirmSendNavigation', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
 
-  it('result returns method navigateBackIfSend', () => {
+  const renderHook = () => {
+    const { result } = renderHookWithProvider(
+      useConfirmSendNavigation,
+      mockState,
+    );
+    return result.current;
+  };
+
+  it('returns navigateBackIfSend method', () => {
     jest
       .spyOn(ConfirmContext, 'useConfirmContext')
       .mockReturnValue({} as unknown as ConfirmContext.ConfirmContextType);
+    mockUseRedesignedSendFlow.mockReturnValue({ enabled: false });
+
     const result = renderHook();
+
     expect(result.navigateBackIfSend).toBeDefined();
   });
 
-  // eslint-disable-next-line mocha/no-skipped-tests
-  it.skip('result returns method handleBack to goto previous page', () => {
+  it('does not navigate back when send redesign is disabled', () => {
+    jest.spyOn(ConfirmContext, 'useConfirmContext').mockReturnValue({
+      currentConfirmation: { origin: 'metamask', type: 'simpleSend' },
+    } as unknown as ConfirmContext.ConfirmContextType);
+    mockUseRedesignedSendFlow.mockReturnValue({ enabled: false });
+
+    const result = renderHook();
+    result.navigateBackIfSend();
+
+    expect(mockHistory.goBack).not.toHaveBeenCalled();
+  });
+
+  it('navigates back when send redesign is enabled and confirmation is metamask simpleSend', () => {
     jest.spyOn(ConfirmContext, 'useConfirmContext').mockReturnValue({
       currentConfirmation: { origin: 'metamask', type: 'simpleSend' },
     } as unknown as ConfirmContext.ConfirmContextType);
+    mockUseRedesignedSendFlow.mockReturnValue({ enabled: true });
+
     const result = renderHook();
     result.navigateBackIfSend();
+
     expect(mockHistory.goBack).toHaveBeenCalled();
   });
+
+  it('does not navigate back when send redesign is enabled but origin is not metamask', () => {
+    jest.spyOn(ConfirmContext, 'useConfirmContext').mockReturnValue({
+      currentConfirmation: { origin: 'dapp', type: 'simpleSend' },
+    } as unknown as ConfirmContext.ConfirmContextType);
+    mockUseRedesignedSendFlow.mockReturnValue({ enabled: true });
+
+    const result = renderHook();
+    result.navigateBackIfSend();
+
+    expect(mockHistory.goBack).not.toHaveBeenCalled();
+  });
+
+  it('does not navigate back when send redesign is enabled but type is not simpleSend', () => {
+    jest.spyOn(ConfirmContext, 'useConfirmContext').mockReturnValue({
+      currentConfirmation: { origin: 'metamask', type: 'contractInteraction' },
+    } as unknown as ConfirmContext.ConfirmContextType);
+    mockUseRedesignedSendFlow.mockReturnValue({ enabled: true });
+
+    const result = renderHook();
+    result.navigateBackIfSend();
+
+    expect(mockHistory.goBack).not.toHaveBeenCalled();
+  });
+
+  it('does not navigate back when send redesign is enabled but both origin and type do not match', () => {
+    jest.spyOn(ConfirmContext, 'useConfirmContext').mockReturnValue({
+      currentConfirmation: { origin: 'dapp', type: 'contractInteraction' },
+    } as unknown as ConfirmContext.ConfirmContextType);
+    mockUseRedesignedSendFlow.mockReturnValue({ enabled: true });
+
+    const result = renderHook();
+    result.navigateBackIfSend();
+
+    expect(mockHistory.goBack).not.toHaveBeenCalled();
+  });
 });

ui/pages/confirmations/hooks/useConfirmSendNavigation.ts

@@ -3,20 +3,22 @@ import { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { useConfirmContext } from '../context/confirm';
+import { useRedesignedSendFlow } from './useRedesignedSendFlow';
 
 export const useConfirmSendNavigation = () => {
   const history = useHistory();
   const { currentConfirmation } = useConfirmContext<TransactionMeta>();
+  const { enabled: isSendRedesignEnabled } = useRedesignedSendFlow();
 
   const navigateBackIfSend = useCallback(() => {
-    if (!process.env.SEND_REDESIGN_ENABLED) {
+    if (!isSendRedesignEnabled) {
       return;
     }
     const { origin, type } = currentConfirmation;
     if (origin === 'metamask' && type === 'simpleSend') {
       history.goBack();
     }
-  }, [currentConfirmation, history]);
+  }, [currentConfirmation, history, isSendRedesignEnabled]);
 
   return { navigateBackIfSend };
 };