[MMI] Added compliance details modal and compliance details component (#18118)

* Added compliance details modal and compliance details component

* Finished component

* Fixed test name

app/_locales/en/messages.json

@@ -358,6 +358,9 @@
     "message": "Allow $1 to withdraw and spend up to the following amount:",
     "description": "The url of the site that requested permission to 'withdraw and spend'"
   },
+  "amlCompliance": {
+    "message": "AML/CFT Compliance"
+  },
   "amount": {
     "message": "Amount"
   },

ui/components/institutional/compliance-details-modal/compliance-details-modal.js

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import { useDispatch } from 'react-redux';
+import Modal from '../../app/modal';
+import { hideModal } from '../../../store/actions';
+import ComplianceDetails from '../compliance-details';
+import { I18nContext } from '../../../contexts/i18n';
+
+export default function ComplianceDetailsModal({
+  onGenerateComplianceReport,
+  reportAddress,
+}) {
+  const dispatch = useDispatch();
+  const handleClose = () => dispatch(hideModal);
+  const t = useContext(I18nContext);
+
+  return (
+    <Modal
+      headerText={t('amlCompliance')}
+      hideFooter="true"
+      onClose={handleClose}
+      contentClass="compliance-details-modal-content"
+    >
+      <ComplianceDetails
+        address={reportAddress}
+        onClose={handleClose}
+        onGenerate={onGenerateComplianceReport}
+      />
+    </Modal>
+  );
+}
+
+ComplianceDetailsModal.propTypes = {
+  reportAddress: PropTypes.func.isRequired,
+  onGenerateComplianceReport: PropTypes.func.isRequired,
+};

ui/components/institutional/compliance-details-modal/compliance-details-modal.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { renderWithProvider } from '../../../../test/jest';
+import configureStore from '../../../store/store';
+import mockState from '../../../../test/data/mock-state.json';
+import ComplianceDetailsModal from './compliance-details-modal';
+
+const props = {
+  hideModal: jest.fn(),
+  onGenerateComplianceReport: jest.fn(),
+  reportAddress: '0xAddress',
+};
+
+const render = () => {
+  const store = configureStore({
+    ...mockState,
+    metamask: {},
+    history: {
+      mostRecentOverviewPage: 'test',
+    },
+  });
+
+  return renderWithProvider(<ComplianceDetailsModal {...props} />, store);
+};
+
+describe('Compliance Modal', function () {
+  it('render correctly with the correct header', function () {
+    const { getByText } = render();
+
+    expect(getByText('AML/CFT Compliance')).toBeVisible();
+  });
+});

ui/components/institutional/compliance-details-modal/index.js

@@ -0,0 +1 @@
+export { default } from './compliance-details-modal';

ui/components/institutional/compliance-details-modal/index.scss

@@ -0,0 +1,3 @@
+.compliance-details-modal-content {
+  padding: 0;
+}

ui/ducks/institutional/institutional.js

@@ -29,19 +29,19 @@ const { actions, reducer } = slice;
 export default reducer;
 
 export const getComplianceProjectId = (state) =>
-  state.metamask[name].complianceProjectId;
+  state.metamask[name]?.complianceProjectId;
 export const getComplianceClientId = (state) =>
-  state.metamask[name].complianceClientId;
+  state.metamask[name]?.complianceClientId;
 export const getComplianceTenantSubdomain = (state) =>
-  state.metamask[name].complianceTenantSubdomain;
+  state.metamask[name]?.complianceTenantSubdomain;
 export const getComplianceHistoricalReports = (state) =>
-  state.metamask[name].historicalReports;
+  state.metamask[name]?.historicalReports;
 export const getComplianceReportsInProgress = (state) =>
-  state.metamask[name].reportsInProgress;
+  state.metamask[name]?.reportsInProgress;
 export const getInstitutionalConnectRequests = (state) =>
-  state.metamask[name].connectRequests;
+  state.metamask[name]?.connectRequests;
 export const complianceActivated = (state) =>
-  Boolean(state.metamask[name].complianceProjectId);
+  Boolean(state.metamask[name]?.complianceProjectId);
 
 export const getComplianceHistoricalReportsByAddress = (address) =>
   createSelector(getComplianceHistoricalReports, (reports) =>