diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 1fae0fd7f..bb7176cbb 100644
--- a/app/_locales/en/messages.json
+++ b/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"
},
diff --git a/ui/components/institutional/compliance-details-modal/compliance-details-modal.js b/ui/components/institutional/compliance-details-modal/compliance-details-modal.js
new file mode 100644
index 000000000..929321f9e
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+ComplianceDetailsModal.propTypes = {
+ reportAddress: PropTypes.func.isRequired,
+ onGenerateComplianceReport: PropTypes.func.isRequired,
+};
diff --git a/ui/components/institutional/compliance-details-modal/compliance-details-modal.test.js b/ui/components/institutional/compliance-details-modal/compliance-details-modal.test.js
new file mode 100644
index 000000000..ddf7a338a
--- /dev/null
+++ b/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(, store);
+};
+
+describe('Compliance Modal', function () {
+ it('render correctly with the correct header', function () {
+ const { getByText } = render();
+
+ expect(getByText('AML/CFT Compliance')).toBeVisible();
+ });
+});
diff --git a/ui/components/institutional/compliance-details-modal/index.js b/ui/components/institutional/compliance-details-modal/index.js
new file mode 100644
index 000000000..40956b073
--- /dev/null
+++ b/ui/components/institutional/compliance-details-modal/index.js
@@ -0,0 +1 @@
+export { default } from './compliance-details-modal';
diff --git a/ui/components/institutional/compliance-details-modal/index.scss b/ui/components/institutional/compliance-details-modal/index.scss
new file mode 100644
index 000000000..38660498a
--- /dev/null
+++ b/ui/components/institutional/compliance-details-modal/index.scss
@@ -0,0 +1,3 @@
+.compliance-details-modal-content {
+ padding: 0;
+}
diff --git a/ui/ducks/institutional/institutional.js b/ui/ducks/institutional/institutional.js
index dad39f6b4..c0f5c3c52 100644
--- a/ui/ducks/institutional/institutional.js
+++ b/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) =>