Implement routing for new confirmation components (#21970)

Author: jpuri

development/build/transforms/README.md

@@ -16,9 +16,9 @@ this.store.updateStructure({
   ...,
   GasFeeController: this.gasFeeController,
   TokenListController: this.tokenListController,
-  ///: BEGIN:ONLY_INCLUDE_IN(build-flask)
+  ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   SnapController: this.snapController,
-  ///: END:ONLY_INCLUDE_IN
+  ///: END:ONLY_INCLUDE_IF
 });
 ```
 
@@ -36,7 +36,7 @@ Note that multiple build types can be specified by separating them with
 commands inside the parameter parentheses:
 
 ```javascript
-///: BEGIN:ONLY_INCLUDE_IN(build-beta,build-flask)
+///: BEGIN:ONLY_INCLUDE_IF(build-beta,build-flask)
 ```
 
 It's critical that this transform runs before anything else processes our code.

test/e2e/tests/state-snapshots/errors-after-init-opt-in-ui-state.json

@@ -2,6 +2,7 @@
   "DNS": "object",
   "activeTab": "object",
   "appState": "object",
+  "confirm": "object",
   "confirmTransaction": "object",
   "gas": { "customData": { "price": null, "limit": null } },
   "history": { "mostRecentOverviewPage": "/" },

ui/ducks/confirm/confirm.test.js

@@ -0,0 +1,19 @@
+import confirmReducer, { UPDATE_CURRENT_CONFIRMATION } from './confirm';
+
+describe('Confirm State', () => {
+  const metamaskConfirmState = {
+    currentConfirmation: undefined,
+  };
+
+  it('sets currentConfirmation', () => {
+    const currentConfirmation = {
+      id: '123',
+    };
+    const state = confirmReducer(metamaskConfirmState, {
+      type: UPDATE_CURRENT_CONFIRMATION,
+      currentConfirmation,
+    });
+
+    expect(state.currentConfirmation).toStrictEqual(currentConfirmation);
+  });
+});

ui/ducks/confirm/confirm.ts

@@ -1,34 +1,38 @@
 type ActionType = {
   type: string;
-  dummyValue?: string;
+  currentConfirmation?: Record<string, unknown> | undefined;
 };
 
 const createActionType = (action: string): string =>
   `metamask/confirm/${action}`;
 
-const UPDATE_DUMMY = createActionType('UPDATE_DUMMY');
+export const UPDATE_CURRENT_CONFIRMATION = createActionType(
+  'UPDATE_CURRENT_CONFIRMATION',
+);
 
 const initState = {
-  dummy: undefined,
+  currentConfirmation: undefined,
 };
 
 export default function confirmReducer(
   state = initState,
   action: ActionType = { type: '' },
 ) {
   switch (action.type) {
-    case UPDATE_DUMMY:
+    case UPDATE_CURRENT_CONFIRMATION:
       return {
-        dummy: action.dummyValue,
+        currentConfirmation: action.currentConfirmation,
       };
     default:
       return state;
   }
 }
 
-export function updateDummy(dummy: string) {
+export function updateCurrentConfirmation(
+  currentConfirmation: Record<string, unknown> | undefined,
+) {
   return {
-    type: UPDATE_DUMMY,
-    dummy,
+    type: UPDATE_CURRENT_CONFIRMATION,
+    currentConfirmation,
   };
 }

ui/ducks/index.js

@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
 import { AlertTypes } from '../../shared/constants/alerts';
+import confirmReducer from './confirm/confirm';
 import metamaskReducer from './metamask/metamask';
 import localeMessagesReducer from './locale/locale';
 import sendReducer from './send/send';
@@ -20,6 +21,7 @@ export default combineReducers({
   DNS: domainReducer,
   history: historyReducer,
   send: sendReducer,
+  confirm: confirmReducer,
   confirmTransaction: confirmTransactionReducer,
   swaps: swapsReducer,
   gas: gasReducer,

ui/hooks/confirm/setCurrentConfirmation.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { renderHook } from '@testing-library/react-hooks';
+import * as ConfirmDucks from '../../ducks/confirm/confirm';
+import configureStore from '../../store/store';
+import setCurrentConfirmation from './setCurrentConfirmation';
+
+const mockState = {
+  metamask: {
+    confirm: {
+      currentConfirmation: undefined,
+    },
+  },
+};
+
+const mockCurrentConfirmation = { id: '1' };
+
+jest.mock('./useCurrentConfirmation', () => () => ({
+  currentConfirmation: mockCurrentConfirmation,
+}));
+
+const ReduxProvider = Provider as any;
+
+describe('setCurrentConfirmation', () => {
+  it('should dispatch updateCurrentConfirmation', () => {
+    const updateCurrentConfirmationSpy = jest.spyOn(
+      ConfirmDucks,
+      'updateCurrentConfirmation',
+    );
+    const wrapper = ({ children }) => (
+      <ReduxProvider store={configureStore(mockState)}>
+        {children}
+      </ReduxProvider>
+    );
+    renderHook(() => setCurrentConfirmation(), { wrapper });
+    expect(updateCurrentConfirmationSpy).toHaveBeenCalledWith(
+      mockCurrentConfirmation,
+    );
+  });
+});

ui/hooks/confirm/setCurrentConfirmation.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { updateCurrentConfirmation } from '../../ducks/confirm/confirm';
+import useCurrentConfirmation from './useCurrentConfirmation';
+
+/*
+ * This hook is called from <Confirm /> component to set current transaction.
+ * This hook should be invoked only when we are setting or resetting the
+ * current confirmation displayed to the user.
+ */
+const setCurrentConfirmation = () => {
+  const dispatch = useDispatch();
+  const { currentConfirmation } = useCurrentConfirmation();
+
+  useEffect(() => {
+    if (currentConfirmation) {
+      dispatch(updateCurrentConfirmation(currentConfirmation));
+    }
+  }, [currentConfirmation]);
+
+  useEffect(() => {
+    return () => {
+      dispatch(updateCurrentConfirmation(undefined));
+    };
+  }, []);
+};
+
+export default setCurrentConfirmation;

ui/hooks/confirm/syncConfirmPath.test.ts

@@ -0,0 +1,31 @@
+import { renderHookWithProvider } from '../../../test/lib/render-helpers';
+import syncConfirmPath from './syncConfirmPath';
+
+const mockHistoryReplace = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({ replace: mockHistoryReplace }),
+}));
+
+const mockState = {
+  confirm: {
+    currentConfirmation: {
+      id: '1',
+      msgParams: {},
+    },
+  },
+};
+
+describe('syncConfirmPath', () => {
+  it('should execute correctly', () => {
+    const result = renderHookWithProvider(() => syncConfirmPath(), mockState);
+    expect(result).toBeDefined();
+  });
+
+  it('should replace history route', () => {
+    mockHistoryReplace.mockClear();
+    renderHookWithProvider(() => syncConfirmPath(), mockState);
+    expect(mockHistoryReplace).toHaveBeenCalled();
+  });
+});

ui/hooks/confirm/syncConfirmPath.ts

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+
+import {
+  CONFIRM_TRANSACTION_ROUTE,
+  SIGNATURE_REQUEST_PATH,
+} from '../../helpers/constants/routes';
+import { currentConfirmationSelector } from '../../selectors/confirm';
+
+const syncConfirmPath = () => {
+  const history = useHistory();
+  const { id: paramsTransactionId } = useParams<{ id: string }>();
+
+  const currentConfirmation = useSelector(currentConfirmationSelector);
+
+  // Redirect below is done to keep the confirmation routes backward compatible
+  // Currently we have only signature request,
+  // but it will include other confirmation types in future
+  useEffect(() => {
+    if (!currentConfirmation) {
+      return;
+    }
+    if (paramsTransactionId !== currentConfirmation.id) {
+      history.replace(
+        `${CONFIRM_TRANSACTION_ROUTE}/${currentConfirmation.id}/${SIGNATURE_REQUEST_PATH}`,
+      );
+    }
+  }, [currentConfirmation, paramsTransactionId]);
+};
+
+export default syncConfirmPath;

ui/hooks/confirm/useCurrentConfirmation.test.ts

@@ -0,0 +1,39 @@
+import { ApprovalType } from '@metamask/controller-utils';
+
+import { renderHookWithProvider } from '../../../test/lib/render-helpers';
+import useCurrentConfirmation from './useCurrentConfirmation';
+
+const mockState = {
+  metamask: {
+    unapprovedPersonalMsgs: {
+      '1': {
+        id: '1',
+        msgParams: {},
+      },
+    },
+    pendingApprovals: {
+      '1': {
+        id: '1',
+        origin: 'origin',
+        time: Date.now(),
+        type: ApprovalType.PersonalSign,
+        requestData: {},
+        requestState: null,
+        expectsResult: false,
+      },
+    },
+  },
+};
+
+describe('useCurrentConfirmation', () => {
+  it('should return current confirmation', () => {
+    const { result } = renderHookWithProvider(
+      () => useCurrentConfirmation(),
+      mockState,
+    );
+
+    expect(result.current.currentConfirmation).toBe(
+      mockState.metamask.unapprovedPersonalMsgs['1'],
+    );
+  });
+});